เรียนรู้อะไรจาก Laravel ไปแล้วบ้าง

รวบรวมสิ่งที่ได้เรียนรู้จากการใช้งาน Laravel เผื่อได้ย้อนกลับมาอ่าน และการจดก็เป็นการจำที่ดี

Livewire

ส่วนเสริมที่ทำให้ Laravel มีความสามารถในการสร้าง Component และเรียกใช้ได้ เหมือน Component ใน React, Vue, Angular ก็ถือว่าเจ๋งดีอยู่ ทำให้ PHP มี Component ได้ แม้ไม่ต้องใช้ Javascript

TailwindCSS

Frontend Framework เหมือน Bootstrap แต่ว่าแนวคิดต่างกัน ของ Bootstrap จะเป็นแนวคิดเรื่องชื่อมากกว่า เช่นอยากสร้างปุ่มสีฟ้า ก็ใช้ class btn btn-primary ไรงี้ แต่ของ TailwindCSS จะออกแนวสร้าง class รูปแบบต่างๆ ไว้ แล้วให้เราเรียกมาประกอบ ตัวอย่างเดิมคือจะสร้างปุ่มสีฟ้า ก็ใช้ class bg-blue-500 จากชื่อ class ก็จะเห็นว่าใส่แค่ส่วนที่เราจะตกแต่งลงไป ตกแต่งแค่สีพื้นหลังเข้าไปแค่นั้น

dd()

ย่อมาจาก Dump and Die เป็นการแสดงผลตัวแปรออกมามากกว่า 1 ตัวในทีเดียว และหยุดการทำงาน ปกติเราจะ echo หรือ print_r ออกมาทีละตัวและรูปแบบไม่ค่อยสวย ดูยากใช่ป่ะ อันนี้จะออกมาให้สวยและดูง่ายเลย แถมคำสั่งก็สั้นมากๆ ด้วย วิธีใช้ก็แค่ dd($variable)

การกำหนด Route แบบ Prefix -> Group -> Prefix -> Group

หรือก็คือ group ใน group ทีกำหนด prefix นั่นเอง แบบทำหลายๆ ชั้นไรงี้

Route::prefix('admin')->name('admin.')->middleware(['auth:sanctum', 'verified'])->group(function () {
    Route::prefix('users')->name('user-')->group(function () {
        Route::get('/', [UserController::class, 'index'])->name('list');
        Route::get('/create', [UserController::class, 'create'])->name('create');
        Route::get('/{id}/edit', [UserController::class, 'edit'])->name('edit');
    });
});
// เวลาจะเรียกหน้า Create User ก็ใช้ route('admin.user-create')
// ที่เรียกแบบนี้ได้ ให้สังเกตุตรง name อันแรก prefix name ของ admin คือ admin.
// ส่วน prefix name ของ users คือ user-
// ก็เอา 2 ส่วนนี้มาต่อกันก่อนจะเรียกตัวด้านใน
// เลยจะได้ admin.user-create, admin.user-list, admin.user-edit

Fortify แก้ลิงก์ Redirect หลังจาก Login เข้าสู่ระบบ

เข้าไปแก้ที่ไฟล์ app/Providers/RouteServiceProvider.php หาตัวแปร public const Home = ‘/dashboard’; ให้แก้เป็นอันที่ต้องการได้เลย

วิธีการเรียกใช้ไฟล์ภาษา

ทำให้เราสามารถทำแอปหลายๆ ภาษาได้นั่นเอง วิธีการเรียกใช้ก็แค่ใช้ฟังก์ชั่น __(‘file.key’) (อันเดอร์สกอร์ 2 ครั้ง) เช่น ไฟล์ภาษาอยู่ที่ resources/lang/en/validation.php มี array [ ‘required’ => ‘The :attribute field is required’ ]

เวลามาเรียกใช้ก็ __(‘validation.required’) และถ้าต้องการเปลี่ยน :attribute เป็นชื่อที่ต้องการด้วย ก็ใช้แบบนี้ __(‘validation.required’, [ ‘attribute’ => ‘Name’ ])

และแน่นอนถ้าใช้ใน Blade Template อย่าลืมใส่ {{ }} ด้วย {{ __(‘validation.required’) }}

วิธีการสร้าง Livewire

พิมพ์ด้วยคำสั่ง php artisan livewire:make NameComponent ใน Terminal

ระบบจะทำการสร้างไฟล์ Class ชื่อ NameComponent.php ในโฟลเดอร์ app/Http/Livewire และไฟล์ View ชื่อ name-component.blade.php ใน resourses/views/livewire

วิธีการเรียกใช้ Livewire Component ใน Blade Template

เรียกใช้ด้วยคำสั่ง

@livewire('name-component')

ส่งค่าพารามิเตอร์ให้ Livewire Component

ตอนเรียกใช้ก็เพิ่มค่าต่อไปว่าจะส่งค่าอะไรในรูปแบบอาเรย์

@livewire('name-component', [ 'name' => 'KanexKane' ])

และในไฟล์ Class ของ Livewire Component ก็ไปสร้างตัวรับแบบนี้

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class NameComponent extends Component
{
    // สร้างตัวรับพารามิเตอร์ตรงนี้ โดยชื่อที่ส่งกับชื่อที่รับต้องตรงกัน
    public $name = '';

    public function render()
    {
        // ลองแสดงผลออกมา
        echo $this->name;
 
        return view('livewire.name-component');
    }
}

แค่นี้แหละ เวลาเรียกใช้ก็เรียกในไฟล์ Blade Template ของ Livewire ก็ไม่ต้องตั้งค่าให้ส่งอะไรไป สามารถเรียกใช้ {{ $name }} ได้เลย

TailwindCSS Palette สี มาไม่ครบ

ให้ลองรันคำสั่ง npm run dev หรือ npm run watch ใน Terminal ดูก่อน หาตั้งนาน และทางที่ดี ควรเปิดแท็บสำหรับ npm run watch ทิ้งไว้เลย จะสะดวกกว่ามาก ไม่ต้องมาคอยกังวล

เพราะจากที่ลองมาเหมือนตัว Laravel ต้องตรวจเจอก่อนว่ามีการใช้ Class ใน Blade Template มันถึงจะทำการ Mix เข้ามาในไฟล์ CSS ที่ Laravel จะทำการ Compile ถ้าไม่เจอว่ามีการใช้ มันก็จะไม่มีในไฟล์ app.css

ดังนั้นวิธีการแก้ไขที่ถูกต้องจริงๆ หากตัว Class ไม่ได้อยู่ในไฟล์ .blade.php ก็ให้เพิ่มใน tailwind.config.js อย่างของเรามันอยู่ใน Livewire Class ก็เพิ่มแบบนี้

module.exports = {
  purge: [
    "./app/Http/Livewire/*.php
  ],
}

เท่านี้มันจะไปดูในไฟล์ PHP ในโฟลเดอร์ Livewire ทั้งหมดด้วย ว่ามีคลาสไหนของ Tailwind ที่มีในไฟล์ PHP เหล่านี้ไหม ถ้ามี มันก็เอาไปรวมใน app.css

หรือถ้าไม่ได้จริงๆ ให้เอา mode: “jit” ใน tailwind.config.js ออก เพราะโหมด Just in Time เป็นการเอาเฉพาะส่วนที่ใช้งานมา Compile เป็นไฟล์ใหม่ แต่ถ้าเราเอาออกก็จะไม่เลือกแล้ว เอามาทั้งหมด แต่ก็แลกกับการที่ขนาดไฟล์จะใหญ่ขึ้นนั่นเอง

TailwindCSS SVG Icon มันไม่ขึ้น/ไม่แสดง

ให้ใส่ Height กับ Width ให้มันด้วย เช่น class=”h-6 w-6″ ไม่งั้นไอคอนจะไม่มีขนาด