ทดสอบสร้าง Project Laravel 9

ครั้งนี้ผมจะมา ทดสอบสร้าง Project Laravel 9 โดยสร้างเป็นระบบหน้าบ้าน-หลังบ้านเล็กๆ ในรูปแบบ Model-View-Controller (MVC) ที่สามารถคลิก ID เพื่อเข้าไปดูข้อมูลของแต่ละรายการได้ครับ

สิ่งที่ต้องมี

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

ทำการติดตั้ง Extention Remote – SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode

ทำการเชื่อมต่อ Server EC2 Instance โดยอ่านคำอธิบายและทำตามลิงก์ด้านล่างนี้ครับ

ขั้นตอนนี้ให้ทำการเชื่อมต่อ Server EC2 โดยใช้โปรแกรม VSCode ในการ Run Command และจัดการระบบ Server EC2 แทนการใช้โปรแกรม PuTTY เพราะว่า VSCode มี Terminal อยู่ในตัวที่สามารถ Run Command ได้เหมือนกับ PuTTY ซึ่งมีความสะดวกมากๆ และถ้าเราเขียนโปรแกรมใน VSCode อยู่แล้วผมขอแนะนำให้ใช้ Terminal ของ VSCode ดีกว่าครับ

ข้อควรระวัง: ก่อนสร้าง Key Pair ให้อ่านที่ลิงก์ ข้อควรระวังของ MySQL 8 เพราะในบทความนี้ผมจะใช้ MySQL 8 เป็น Database สำหรับ Laravel ! เมื่อพร้อมแล้วเริ่มทำตามลิงก์ด้านล่างนี้ได้เลยครับ

วิธีการติดตั้ง Laravel บน EC2 (Amazon Linux 2)

เมื่อทำการเชื่อมต่อ Server EC2 และเปิด Terminal เตรียมไว้แล้วให้ทำ วิธีการติดตั้ง Laravel บน EC2 (Amazon Linux 2) โดยอ่านคำอธิบายและทำตามลิงก์ด้านล่างนี้ได้เลยครับ (ถ้ามีขั้นตอนซ้ำกันให้ข้ามไปได้เลยครับ)

สิ่งที่ต้องทำในลิงก์นี้:
・ตั้งค่า Time Zone ใน Amazon Linux 2 ของ EC2
・Restart EC2 Instance (Amazon Linux 2)
・เรียกใช้ PHP โดยใช้ Nginx บน EC2 (Amazon Linux 2)
・ติดตั้ง MySQL 8 และสร้าง Database ใน Amazon Linux 2
・ติดตั้ง Composer ใน EC2 (Amazon Linux 2)
・ติดตั้ง Laravel ใน EC2 (Amazon Linux 2)

เปิด Project Laravel 9

เมื่อทำตามขั้นตอนข้างต้นทุกอย่างแล้วถ้าแสดงหน้าเว็บไซต์โดยไม่มีปัญหาอะไร ให้เปิด Project Laravel 9 ของเราได้เลยครับ

มาที่มุมซ้ายบน คลิกที่FileและOpen Folder...จากนั้นใส่ path/var/www/html/นี้เข้าไปและคลิกOK

เมื่อเปิดโฟลเดอร์ html ได้แล้วจะแสดงหน้าจอแบบนี้

ตรวจสอบการตั้งค่าในไฟล์ .env

คลิกที่ไฟล์.envแล้วดูการตั้งค่าของเราที่นี่ ซึ่งเราสามารถเปลี่ยนแปลงการตั้งค่าบางส่วนได้ เช่น [APP_NAME=your_name] (จะเปลี่ยนหรือไม่เปลี่ยนก็ได้) เป็นต้น แต่ในส่วนของ [DB_DATABASE, DB_USERNAME และ DB_PASSWORD] ที่ทำการตั้งค่ามาก่อนหน้านี้ ไม่ควรจะเปลี่ยนแปลงอะไรครับ

การเขียนโปรแกรม Laravel เบื้องต้น

ขั้นตอนนี้ผมจะเขียนโปรแกรมเบื้องต้นเกี่ยวกับ Customer List (ชื่อบุคคล) โดยสามารถคลิกที่ ID เพื่อเข้าไปดูข้อมูลของแต่ละรายการได้ครับ

สิ่งที่จะทำในขั้นตอนนี้:
・ตั้งค่าไฟล์ config/app.php
・เขียนโปรแกรมเกี่ยวกับ Model
・เขียนโปรแกรมเกี่ยวกับ Controller
・เขียนโปรแกรมเกี่ยวกับ Routes
・เขียนโปรแกรมเกี่ยวกับ Views
・ตรวจสอบหน้าเว็บไซต์ด้วย IP Address (EC2 Instance)

ตั้งค่าไฟล์ config/app.php

ให้เปิด "config/app.php" ใน Project แล้วในสถานะเริ่มต้นจะมีหัวข้อ "timezone" แถวบรรทัดที่ 72 จากนั้นทำการเปลี่ยน Timezone ให้เป็น "Asia/Bangkok" ตามรูปภาพ และทำการ Save ครับ

เขียนโปรแกรมเกี่ยวกับ Model

Model หมายถึง ส่วนของซอฟต์แวร์ที่ใช้ในการแปลการทำงานของระบบ ไปสู่สิ่งที่ระบบซอฟต์แวร์ได้ถูกออกแบบเอาไว้ ตรรกะเนื้อหาใช้เพื่อให้ความหมายแก่ข้อมูลดิบ (ยกตัวอย่างเช่น การคำนวณว่าวันนี้เป็นวันเกิดของผู้ใช้หรือไม่, หรือจำนวนเงินรวม ภาษี และค่าส่งสินค้า ในตะกร้าสินค้า) เมื่อโมเดลมีการเปลี่ยนแปลง จะมีการส่งคำเตือนให้แก่ วิว ที่เกี่ยวข้องเพื่อปรับค่า

※สร้างไฟล์ Customer ในโฟลเดอร์ migrations และ seeders
เปิด Terminal ขึ้นมา แล้วรันคำสั่งด้านล่างนี้

php artisan make:model Customer --migration --seed

คำสั่งที่รันไปเมื่อสักครู่นี้จะทำการสร้างมา 3 ไฟล์ดังนี้:
① Path: app/Models/Customer.php
② Path: database/migrations/date_time_create_customers_table.php (ชื่อไฟล์ข้างหน้าคือ datetime ปัจจุบันครับ)
③ Path: database/seeders/CustomerSeeder.php

※เขียนโปรแกรมที่ไฟล์ date_time_create_customers_table.php
เปิดไฟล์ database/migrations/date_time_create_customers_table.php แล้ว Copy Code ด้านล่างนี้วางในไฟล์ตามรูปภาพ และ Save ครับ

            $table->string('firstname', 100);
            $table->string('lastname', 100);

เรียกใช้ migrate ด้วยคำสั่งนี้ migrate จะทำการสร้าง Table ตามโปรแกรมที่เขียนไว้จากขั้นตอนที่แล้ว

php artisan migrate:fresh

※เขียนโปรแกรมที่ไฟล์ DatabaseSeeder.php
เปิดไฟล์ database/seeders/DatabaseSeeder.php แล้ว Copy Code ด้านล่างนี้วางในไฟล์ตามรูปภาพ และ Save ครับ

        $this->call(CustomerSeeder::class);

※เขียนโปรแกรมที่ไฟล์ CustomerSeeder.php
เปิดไฟล์ database/seeders/CustomerSeeder.php แล้วลบ Code ตั้งแต่บรรทัดที่ 7 จนถึงบรรทัดสุดท้ายออกไป
จากนั้น Copy Code ด้านล่างนี้วางในไฟล์ตามรูปภาพ และ Save ครับ (ในส่วนของ [firstname, lastname] ให้เปลี่ยนเป็นชื่อของใครก็ได้)

use App\Models\Customer;

class CustomerSeeder extends Seeder
{
    protected $customers = [
        [
            'firstname'      => 'Tinnakorn',
            'lastname'       => 'Maneewong',
        ],[
            'firstname'      => 'Supanut',
            'lastname'       => 'Akaram',
        ]
    ];

    public function run()
    {
        foreach ($this->customers as $customer) {
            Customer::create($customer);
        }
    }
}

ทำการเรียกใช้ migrate กับ seeder ที่สร้างจากขั้นตอนที่แล้ว
Migrate: จะสร้าง Table ไปยัง MySQL
Seeder: จะทำการแทรกข้อมูลเริ่มต้น โดยทำการ Insert ไปยัง MySQL

php artisan migrate:fresh --seed

เขียนโปรแกรมเกี่ยวกับ Controller

Controller รับข้อมูลจากผู้ใช้เข้ามา แล้วดำเนินการตอบสนองต่อข้อมูลนั้น โดยเรียกใช้ logic ต่างๆจากอ็อบเจกต์ในโมเดล และส่งข้อมูลผลลัพย์นั้นกลับไปยังส่วนแสดงผล เพื่อตอบกลับไปยังผู้ใช้ได้อย่างถูกต้อง

※สร้างไฟล์ CustomerController.php
ขั้นตอนนี้คือการสร้างไฟล์ CustomerController ขึ้นมาเพื่อใช้เขียนในส่วนของระบบหลังบ้านครับ

รันคำสั่งนี้เพื่อสร้างไฟล์ CustomerController

php artisan make:controller CustomerController

เมื่อรันไปแล้วเราจะได้ไฟล์ CustomerController.php มา จากนั้นให้ทำการเปิดไฟล์ตาม path ด้านล่างนี้:
Path: app/Http/Controllers/CustomerController.php

※เขียนโปรแกรมที่ไฟล์ CustomerController.php

ส่วนนี้คือการสร้าง method index และ method show
method index จะรองรับ URL ที่ชื่อว่า /customer/
method show จะรองรับ URL ที่ชื่อว่า /customer/[id]
ซึ่งจะทำการตั้งค่าการรองรับ Method เหล่านี้กับ URL ด้วยการตั้งค่า Route ในขั้นตอนถัดไป

นอกจากนี้ส่วน return ของ Method แต่ละอัน จะกำหนดว่า View ใดที่จะใช้แสดง HTML ซึ่งในส่วนของ View นี้จะอธิบายในภายหลัง

เมื่ออ่านคำอธิบายแล้ว ให้ลบสิ่งที่เขียนไว้ในไฟล์ CustomerController.php ออกให้หมดและ Copy Code ด้านล่างนี้วางลงไป ตามด้วย Save ครับ

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Customer;

class CustomerController extends Controller
{
    public function index()
    {
        $customers = Customer::all();
        return view('customer.index', ['customers' => $customers]);
    }

    public function show($id)
    {
        $customer = Customer::find($id);
        return view('customer.show', ['customer' => $customer]);
    }
}

เขียนโปรแกรมเกี่ยวกับ Routes

Route คือ class ที่ใช้จัดการกับเส้นทาง เข้า-ออก ของเว็บไซต์เรา โดยเป็นตัวกำหนด Path ว่า Path นี้ให้ทำงานที่ Controller ไหน หรือ แสดง View ไหน รวมถึงสามารถระบุการส่ง Parameter ผ่านตัว Route ได้ด้วยครับ

※เขียนโปรแกรมที่ routes/web.php
Path: routes/web.php

เปิดไฟล์ web.php ขึ้นมา แล้ว Copy Code ด้านล่างนี้วางลงไป ตามด้วย Save ครับ

Route::get('/customer', [App\Http\Controllers\CustomerController::class, 'index'])->name('customer.index');
Route::get('/customer/{id}', [App\Http\Controllers\CustomerController::class, 'show'])->name('customer.show');

เขียนโปรแกรมเกี่ยวกับ Views

View แสดงผลค่าในโมเดลในรูปแบบที่เหมาะสมต่อการปฏิสัมพันธ์กับผู้ใช้ ในแต่ละโมเดลสามารถมีวิวได้หลายแบบ เพื่อใช้ในจุดประสงค์ที่ต่างกัน

※สร้างโฟลเดอร์ customer และไฟล์ index.blade.php ที่ resources/views
Path: resources/views

สร้างโฟลเดอร์ใหม่ที่ชื่อว่า "resources/views/customer/"

สร้างไฟล์ใหม่ที่ชื่อว่า "resources/views/customer/index.blade.php"

※เขียนโปรแกรมที่ customer/index.blade.php
Path: resources/views/customer/index.blade.php

เมื่อมีไฟล์ index.blade.php แล้ว ให้ Copy Code ด้านล่างนี้วางลงไปครับ

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <table>
            <tr><th>ID</th><th>name</th></tr>
            @foreach ($customers as $customer)
                <tr>
                    <td><a href="{{ route('customer.show', ['id' => $customer->id]) }}">{{ $customer->id }}</a></td>
                    <td>{{ $customer->firstname }} {{ $customer->lastname }}</td>
                </tr>
            @endforeach
        </table>
    </body>
</html>

เมื่อวาง Code เสร็จแล้วจะได้แบบนี้ จากนั้นทำการ Save ครับ

※สร้างไฟล์ show.blade.php ที่ resources/views/customer
Path: resources/views/customer

สร้างไฟล์ใหม่ที่ชื่อว่า "resources/views/customer/show.blade.php"

เมื่อมีไฟล์ show.blade.php แล้ว ให้ Copy Code ด้านล่างนี้วางลงไปครับ

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <ul>
            <li>ID: {{ $customer->id }}</li>
            <li>Name: {{ $customer->firstname }} {{ $customer->lastname }}</li>
        </ul>

        <p><a href="{{ route('customer.index') }}">Index</a></p>
</body>
</html>

เมื่อวาง Code เสร็จแล้วจะได้แบบนี้ จากนั้นทำการ Save ครับ

ตรวจสอบหน้าเว็บไซต์ด้วย IP Address (EC2 Instance)

เมื่อทำการเขียนโปรแกรมเสร็จแล้ว ขั้นตอนนี้จะทำการแสดงผลโปรแกรมที่เขียนเมื่อสักครู่นี้ผ่านเว็บเบราว์เซอร์ด้วย IP Address (EC2 Instance) ครับ

ทดสอบเว็บไซต์ด้วย URL นี้ในหน้าเว็บเบราว์เซอร์ครับ

http://[IP Address]/customer

เมื่อเปิดเว็บเบราว์เซอร์ด้วย URL ข้างต้นแล้วถ้าไม่มี Error จะแสดงหน้าจอแบบนี้ครับ (หน้านี้คือหน้าของไฟล์ index.blade.php) ทีนี้ลองคลิกที่ ID:1ดูครับ

เมื่อคลิกเข้ามาแล้วจะแสดงข้อมูลชื่อของ ID: 1 ครับ (หน้านี้คือหน้าของไฟล์ show.blade.php) ทีนี้กดปุ่มIndexเพื่อย้อนกลับไปหน้าแรกครับ

จะเห็นว่าสามารถย้อนกลับมาได้ ทีนี้ลองคลิกที่ ID:2ดูครับ

เมื่อคลิกเข้ามาแล้วจะแสดงข้อมูลชื่อของ ID: 2 ครับ

เพียงเท่านี้เราก็สามารถเขียนโปรแกรมเล็กๆที่เกี่ยวกับ Customer List (ชื่อบุคคล) ได้แล้วครับ

สรุป

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

บทความที่เกี่ยวข้อง

• วิธีการติดตั้ง Visual Studio Code บน Windows 10/11 [2022]
• วิธีการติดตั้ง Laravel บน EC2 (Amazon Linux 2)
• 【Update】วิธีติดตั้ง Amazon Linux 2 บน EC2 และเชื่อมต่อเซิร์ฟเวอร์ด้วยโปรแกรม PuTTY
• วิธีตั้งค่า Time Zone ใน Amazon Linux 2 ของ EC2
• เรียกใช้ PHP โดยใช้ Nginx บน EC2 (Amazon Linux 2)
• การติดตั้ง MySQL 8 และสร้าง Database ใน Amazon Linux 2
• การติดตั้ง Composer ใน EC2 (Amazon Linux 2)
• มาทำความรู้จัก Laravel กัน
• https://code.visualstudio.com/ (ภาษาอังกฤษ)
• Visual Studio Code Remote - SSH (ภาษาอังกฤษ)
• VS Codeで改行コードを変更するには (ภาษาญี่ปุ่น)