ธันวาคม 2020

Javascript Zero to Hero บทนำ EP1

javascript มีอายุของภาษาก็ 25 ปีแล้ว ถือว่าเป็นภาษาที่ได้รับความนิยมมายาวนาน ด้วยความสามารถที่เขียนไครเอนซ์ไซน์ (client side) และเซอร์เวอร์ไซต์ (server side) ทำให้ตัวภาษารับความนิยม จึงทำให้บริษัทเจ้าใหญ่ๆ ตั้งทีมงานเพื่อมาพัฒนา framework เพื่อเป็นกรอบการทำงานของการพัฒนาแอพพลิเคชั่น (application) ที่เป็นมาตรฐานที่เป็น standard แบบเดียวกัน เช่น React (facebook) , Angular (google) ,Vue (Evan U) เป็นต้น สิ่งที่มีเหมือนกันของแต่ละ framework คือ fundamental ของตัวภาษา javascript เอง ชุดบทความนี้จะพาทำความรู้จักภาษา javascript ตั้งแต่เริ่ม zero จนกระทั่งถึง hero คือสามารถนำไปใช้งานและพัฒนาแอพพลิเคชั่นได้อย่างดีแน่นอน

ทำความรู้จักเครื่องมือ สิ่งที่ช่วยให้การเริ่มเขียน Javascript น่าสนุกมากยิ่งขึ้น

เครื่องมือที่เป็นเหมือนสิ่งที่แปล หรือแปลงโค๊ดของภาษา javascript มากกว่าให้สามารถทำงานได้มีหลัก ๆ อยู้ด้วยกัน 2 การคอมไพล์ (compile) ผ่านเครื่องมือเหล่านี้

  1. NodeJS Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
  2. Browser ต่าง ๆ ที่จะทำหน้าที่มี javascript runtime engine มาให้อยู่แล้ว เช่น Firefox , Safari ,Chrome แนะนำใช้งาน Google Chrome เพราะจะอัพเกรด version Javascript Engine ก่อน browser อื่น ๆ

console.log คืออะไร

เริ่มต้นก่อนที่จะพาไปรู้จักส่วนอื่น ๆ ในขั้นถัดๆ ไป ที่เรียกว่าขาดไม่ได้เลยคือการที่จะ debug หรือการที่จะแสดงผลลัพธ์ของตัวแปรที่เก็บอยู่ในโค๊ด การเรียกใช้งานคำสั่ง console.log(‘message or variable’)

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 'Zero', 'to', 'Hero')

การคอมเม้นท์ (comment)

การคอมเม้นท์ (comment code) คือการแทรกข้อความ หรืออื่น ๆ ที่ต้องการใส่ลงไปในไฟล์ของ โค๊ด javascript ที่ไม่ต้องการที่จะให้ javascript compile โค๊ดในส่งนี้เข้าไปในการทำงานของโปรแกรม จะไม่มีผลต่อการทำงานของโปรแกรม เพียงแต่จะมี text ข้อความแทรกอยู่ในไฟล์เท่านั้นเอง

ตัวอย่างการคอมเม้นท์ 1 บรรทัด
// This is the first comment
// This is the second comment
// I am a single line comment

ตัวอย่างการคอมเม้นท์ หลายบรรทัด
/_ This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
_/

การใช้เครื่องหมายดำเนินการทางคณิตศาสตร์

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

แนวทางการเขียน Javascript Code ต่าง ๆ บนหน้าเว็บ

แนวทางการเขียนโค๊ด javascript กับหน้าเว็บไซต์ในรูปแบบต่าง ๆ หลัก ๆ มีด้วยกัน 4 แนวทางคือ

  • inline script การแทรก javascript ใน tag html เป็นการเขียนที่ง่ายที่สุด ตัวอย่าง
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to Javascript Zero to Hero!')">Click Me</button>
  </body>
</html>
  • internal script การเขียนแทรก javascript code ในไฟล์ html โดยคำสั่งต่าง ๆ จะถูกเขียนอยู่ใน tag <script> </script>
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:Internal Script</title>
    <script>
      console.log('Welcome to Javascript Zero to Hero')
    </script>
  </head>
  <body></body>
</html>
  • external script การเขียนโค๊ด javascript แยกเป็นอีก 1 ไฟล์ (นามสกุล .js) จากนั้นเรียกใช้งานเข้ามาในไฟล์ html ด้วยคำสั่ง <script src=”?”/>
    index.js
console.log('Welcome to Javascript Zero to Hero')

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Zero to Hero:External script</title>
    <script src="index.js"></script>
  </head>
  <body></body>
</html>

Javascript Data Type ต่าง ๆ

ในภาษา javascript จะเรียกเป็นรูปแบบ Dynamic Type ความหมายคือเป็นการกำหนด type ที่สามารถเปลี่ยนได้ตลอดเวลา โดยมีการกำนด type อยู่ด้วยกันหลัก ๆ ตามนี้ String, Number, Boolean, undefined, Null, and Symbol.

String 

'Poolsawat'
'Apin'
'Javascript Zero to Hero'

Number

Integers: Integer (negative, zero and positive) numbers Example: ... -3, -2, -1, 0, 1, 2, 3 ...
Float-point numbers: Decimal number Example ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Boolean

True/true , False/false

Undefined

let name;
console.log(name) // undefined

Null

let emptyValue = null

การตรวจสอบประเภท หรือชนิดของตัวแปร

จะมีคำสั่งที่ช่วยให้ทราบได้ว่าตัวแปรที่สร้างขึ้นถูกกำหนดชนิดข้อมูลเป็นอะไร โดยจะมีการคืนค่าเป็นชื่อของชนิดข้อมูลนั้น ๆ เช่น

console.log(typeof 'Poolsawat') // string
console.log(typeof 5) // number
console.log(typeof true) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined

การประกาศตัวแปร และการกำหนดขอบเขตของการเข้าถึง

ภาษา javascript จะมีการกำหนดประเภทตัวแปร โดยมีอยู่ด้วยกัน 3 รูปแบบ คือ

Var การกำหนดประเภทตัวแปรที่เป็นระดับ global ที่จาก function หรือ condition ไหน ๆ ก็สามารถเข้าถึงได้สามารถ assign value ได้

var name = 'Poolsawat' , lname = 'Apin'
var age = 99
var isMale = true

Const การกำหนดประเภทตัวแปรที่จะคล้ายกับ Var แต่จะไม่สามารถ assign value ใหม่ให้ได้ แต่จะมี scope ที่แคบกว่า var

const name = 'Poolsawat' , lname = 'Apin'
const age = 99
const isMale = true

Let การกำหนดประเภทข้อมูลในระดับที่แคบมาก ๆ สามารถ assign value ใหม่ได้ สามารถกำหนดชื่อซ้ำกันได้ แต่อยู่คนละ statement code ได้

let name = 'Poolsawat' , lname = 'Apin'
let age = 99
let isMale = true
if (age == 99 ){
    isMale = false
}

สรุปท้ายบทความ

จากบทความนี้จะเป็นการปูพื้นฐานก่อนเริ่มการเขียน javascript ในบทถัด ๆ ไปสิ่งเหล่านี้จำเป็นต้องจดจำและฝึกฝนเขียนให้จำได้ เพราะในบทความต่อ ๆ ไปจะเจอคำสั่งหรือเรื่องจากบทความนี้เยอะมาก สำหรับการทดสอบเรียกคำสั่งแบบง่ายที่สุด เพียงแต่เปิด browser chrome กด F12 เลือกไปที่ tab console จากนั้นพิมพ์ console.log(‘message ‘); กด enter ผลลัพธ์ก็จะแสดงทันที บทความถัดไปจะมาอธิบายเกี่ยวกับเรื่องอะไรคอยติดตามกันด้วยนะครับ

12/22/2020 by Javascript 0

Laravel Upload File to local storage and saved to database with Postman upload client UI EP8

File Storage เป็นเรื่องนึงที่ Laravel จัดการมาให้เรียบร้อยพร้อมใช้งาน ประหยัดเวลานักพัฒนาไปได้มากเลยทีเดียว ไม่ว่าจะเป็นการดึงไฟล์ (Retrieving Files) ,อัพโหลดไฟล์ (Storing Files) ,ดาวห์โหลดไฟล์ (Downloading Files) ,ลบไฟล์ (Delete Files) เหล่านี้เป็นเรื่องง่ายมาก ๆ ถ้าแอพของเราพัฒนามาด้วย Laravel

บทความนี้จะพาทุกคนมาลองเขียนโค๊ดง่าย ๆ ทดสอบการอัพโหลดไฟล์ด้วยเครื่องมือ Postman client ที่รองรับการอัพโหลดไฟล์ (แทนการเขียนหน้าฟอร์มอัพโหลดเอง) ทำการอัพโหลดไฟล์รูปภาพไปที่ Laravel Project ที่เขียนโค๊ดการอัพโหลดไฟล์ไว้ ทำหน้าที่รับ request ที่ส่ง binary data ระบบจะทำการ Save File ลง local drive และ Save Data ลง Database

เริ่มโค๊ดเลยดีกว่า

สร้าง Table photos เพื่อเอาไว้เก็บข้อมูล photos ที่อัพโหลดเข้าระบบ

CREATE TABLE `photos` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `photo_origin_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `photo_new_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `photo_temp_path` varchar(255) NOT NULL,
  `photo_extension` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `photo_status` enum('active','inactive') CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
  `photo_date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8

สร้าง Class Model Photo (Photo.php) 

php artisan make:Model Photo

แก้ไขไฟล์ app\Models\Photo.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Photo extends Model
{
  use HasFactory;
  protected $table = 'photos';
  protected $fillable = [
    'id', 'photo_origin_name', 'photo_new_name',
    'photo_extension', 'photo_status', 'photo_date', 'photo_temp_path'
  ];
  public $timestamps = false;
}

สร้าง Class Controller UploadFileController (UploadFileController.php)

<?php

namespace App\Http\Controllers;

use App\Models\Photo;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class UploadFileController extends Controller
{

  public function simpleUplaod(Request $request)
  {
    try {
      if ($request->file('photo')->isValid()) {
        $path = $request->photo->path();
        $extension = $request->photo->extension();
        $clientOriginalName = $request->photo->getClientOriginalName();
        $newFileName = time() . $clientOriginalName;
        $uploadedFile = $request->file('photo');

        // Save File to local drive
        Storage::putFileAs('photos', $uploadedFile, $newFileName);

        //Save File to Photo table
        $photo = new Photo();
        $photo->photo_temp_path = $path;
        $photo->photo_origin_name = $clientOriginalName;
        $photo->photo_new_name = $newFileName;
        $photo->photo_extension = $extension;
        $photo->photo_status = 'ACTIVE';
        $photo->photo_date = Carbon::now();
        $photo->save();

        return [
          'path' => $path,
          'extension' => $extension,
          'clientOriginalName' => $clientOriginalName,
          'newFileName' => $newFileName
        ];
      }
    } catch (\Throwable $th) {
      return $th->getMessage();
    }
  }
}

แก้ไขไฟล์ routes.php เพิ่ม /upload 

Route::post('upload', 'App\Http\Controllers\[email protected]');

เนื่องด้วยการ request ส่ง data ไปที่ laravel โดยต้องมีการส่งจำเป็นต้องส่ง @csrf ไม่เช่นนั้น ระบบจะ response (419 PAGE EXPIRED) ให้เพิ่ม ignore path “/upload” App\Http\Middleware\VerifyCsrfToken

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
  /**
   * The URIs that should be excluded from CSRF verification.
   *
   * @var array
   */
  protected $addHttpCookie = true;

  protected $except = [
    'upload'
  ];
}

start server

php artisan serve

เปิดโปรแกรม Postman ขึ้นมา กำหนดตามนี้ จากนั้นกด Send

POST : http://127.0.0.1:8000/upload 
Body : form-data
        KEY : photo (File)
        VALUE : Chose File

ตรวจสอบข้อมูลที่ Table photos

ตรวจสอบไฟล์ที่ storage/app/photos/1608200088upload-1.PNG

สรุปท้ายบทความ

จากที่ได้ทดสอบการสร้างระบบ upload ไม่ได้ยุ่งยากอย่างที่คิด ตัวอย่างโค๊ดเป็นเพียงการ Push File ลง local Storage ความสามารถของ Laravel กับเรื่อง File System สามารถศึกษาเพิ่มเติมได้ที่ลิ้งนี้ https://laravel.com/docs/7.x/filesystem หากผู้อ่านท่านใดลองทำตามแล้วไม่ได้ หรือ ติดปัญหาสามารถ ทักมาสอบถามกันได้ที่ https://www.facebook.com/poolsawat.apin/ สำหรับบทความนี้ขอจบเนื้อหาเพียงเท่านี้ครับ

12/17/2020 by General Laravel 0

คลังเก็บเรื่องราวต่าง ๆ

วงแหวนเว็บ

วงแหวนเว็บ