part#6 จัดการหัวข้อ/ประเภท (Category) และเรียนรู้หลักการ CRUD

1. สร้างตาราง categories และฟิลด์ที่ต้องการลงในฐานข้อมูล ด้วยคำสั่ง ดังนี้

php artisan make:migration create_categories_table
  • เพิ่มข้อมูลฟิลด์ต่างๆลงในไฟล์ create_categories_table ที่อยู่ในโฟลเดอร์ database/migrations
public function up(): void
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('cat_title');
            $table->string('cat_subtitle');
            $table->text('cat_description');
            $table->tinyInteger('cat_status')->default(1);
            $table->timestamps();
        });
    }
  • ใช้คำสั่งบนคอมมานด์ไลน์ของ vs code ดังนี้
php artisan migrate
  • จะได้ตารางชื่อ categories เพิ่มขึ้นมาในฐานข้อมูลและมีฟิลด์ต่างๆครบตามที่กำหนดไว้

2. สร้างโมเดลสำหรับจัดการกับตาราง categories ดังนี้

php artisan make:model Categories
  • จากนั้นเปิดไฟล์โมเดล Categories ซึ่งอยู่ในโฟลเดอร์ app/Models แล้วเพิ่มข้อมูลฟิลด์ให้ครบ บันทึกให้เรียบร้อย
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Categories extends Model
{
    protected $fillable = [
        'cat_title',
        'cat_subtitle',
        'cat_description',
        'cat_status',
    ];
}

3. สร้างเมนู All Categories โดยเพิ่มเร้าท์เพื่อทำลิ้งค์เมนูด้านซ้าย ให้เปิดไฟล์ view/layouts/sidebar.blade.php เพิ่มโค้ดใต้เมนู Users และเพิ่มเร้าท์ ตามตัวหนังสือสีแดง เพื่อสร้างเมนู All Category ดังนี้

1.เริ่มโดยการเพิ่มเร้าท์เพื่อทำลิ้งค์เมนูด้านซ้าย เปิดไฟล์ view/layouts/sidebar.blade.php เพิ่มโค้ดใต้เมนู Users และเพิ่มเร้าท์ ตามตัวหนังสือสีแดง เพื่อสร้างเมนู New Category ดังนี้

<!-- Categories -->
<li class="sidebar-item">
              <a class="sidebar-link justify-content-between has-arrow" href="javascript:void(0)" aria-expanded="false">
                <div class="d-flex align-items-center gap-3">
                  <span class="d-flex">
                    <i class="ti ti-layout-grid"></i>
                  </span>
                  <span class="hide-menu">Categories</span>
                </div>
                
              </a>
              <ul aria-expanded="false" class="collapse first-level">
                <li class="sidebar-item">
                  <a class="sidebar-link justify-content-between"  
                    href="{{ route('admin.user.showusers') }}" aria-expanded="false">
                    <div class="d-flex align-items-center gap-3">
                      <div class="round-16 d-flex align-items-center justify-content-center">
                        <i class="ti ti-circle"></i>
                      </div>
                      <span class="hide-menu">All Categoriess</span>
                    </div>                   
                  </a>
                </li>
                
                <li class="sidebar-item">
                  <a class="sidebar-link justify-content-between"  
                    href="{{route('admin.category.create')}}">
                    <div class="d-flex align-items-center gap-3">
                      <div class="round-16 d-flex align-items-center justify-content-center">
                        <i class="ti ti-circle"></i>
                      </div>
                      <span class="hide-menu">New Category</span>
                    </div>                    
                  </a>
                </li>
                      
              </ul>
            </li>
             <!--End Categories -->

2. เปิดไฟล์ web.php เพิ่มเร้าท์คอนโทรลเลอร์ ให้สอดคล้องกับข้อที่ 1 ดังนี้

//ส่วน Admin
Route::name("admin.")->prefix("/admin")->middleware(["auth"])->group(function() {
    Route::get('/show_users', [UserController::class, 'index'])->name('user.showusers');
    Route::get('/create_users', [UserController::class, 'create'])->name('user.create');
    Route::post('/add_users', [UserController::class, 'store'])->name('user.store');
    Route::get('/show_users/{id}', [UserController::class, 'show'])->name('user.show');
    Route::get('/edit_users/{id}', [UserController::class, 'edit'])->name('user.edit');
    Route::patch('/update_users/{id}', [UserController::class, 'update'])->name('user.update');
    Route::delete('/delete_users/{id}', [UserController::class, 'destroy'])->name('user.delete');

    //ส่วน Category
    Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
});

3. สร้างคอนโทรลเลอร์ชื่อ CategoryController

php artisan make:controller CategoryController -r

4. เปิดไฟล์ CategoryController เพิ่มโค้ดลงในฟังก์ชั่น create ดังนี้

public function create()
    {
        return view('admin.categories.create');
    }

5. เพิ่มคำสั่ง use (บรรทัดสีแดง)ไว้ในส่วนบนของไฟล์ web.php

use App\Http\Controllers\UserController;
use App\Http\Controllers\CategoryController;
use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminController; 

6. สร้างโฟลเดอร์ categories ไว้ในโฟลเดอร์ view/admin … เสร็จแล้วให้สร้างไฟล์ create.blade.php ไว้ใน view/admin/categories

9. เปิดไฟล์ CategoryController เพิ่ม use โมเดลที่ส่วนหัวของไฟล์

<?php

namespace App\Http\Controllers;
use App\Models\Categories;
use Illuminate\Http\Request;

10. สร้างฟอร์มสำหรับกรอกข้อมูล New Category โดยเพิ่มโค้ดลงในไฟล์ create.blade.php ดังนี้

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">New Catagory</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">New Category</li>
            </ol>
    </div>
@endsection
@section('content')
<div class="card">
    <div class="col-md-6 mx-4 mb-3">
    <form action="{{ route('admin.category.store')}}" method="POST">
    <div class="form-group mb-3 mt-3">
        <label for="cat_title" class="form-label">Category_Title</label>
        <input type="text" class="form-control" id="category_title" name="cat_title" placeholder="Enter Category Name">
    </div>
    <div class="mb-3">
        <label for="cat_subtitle" class="form-label">Category_SubTitle</label>
        <input type="text" class="form-control" id="cat_subtitle" name="cat_subtitle" placeholder="Enter Subtitle Category">
    </div>
    <div class="mb-3">
        <label for="cat_description" class="form-label">Category_Description</label>
        <textarea class="form-control" id="cat_description" name="cat_description" rows="4" placeholder="Enter Description"></textarea>
    </div>
    <div class="form-group mb-3">
        <label for="cat_status" class="form-label">Category_Status</label>
        <select class="form-control" id="status" name="cat_status" placeholder="Enter Status">
            <option value="1">Active</option>
            <option value="0">Disabled</option>
        </select> 
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</div>
@endsection

11. เพิ่มเร้าท์ในไฟล์ web.php

//ส่วน Admin
Route::name("admin.")->prefix("/admin")->middleware(["auth"])->group(function() {
    Route::get('/show_users', [UserController::class, 'index'])->name('user.showusers');
    Route::get('/create_users', [UserController::class, 'create'])->name('user.create');
    Route::post('/add_users', [UserController::class, 'store'])->name('user.store');
    Route::get('/show_users/{id}', [UserController::class, 'show'])->name('user.show');
    Route::get('/edit_users/{id}', [UserController::class, 'edit'])->name('user.edit');
    Route::patch('/update_users/{id}', [UserController::class, 'update'])->name('user.update');
    Route::delete('/delete_users/{id}', [UserController::class, 'destroy'])->name('user.delete');

    //ส่วน Category
    Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
    Route::post('/add_categories', [CategoryController::class, 'store'])->name('category.store');

12. เพิ่มคำสั่งลงในไฟล์ CategoryController ส่วนฟังก์ชั่น store ดังนี้

public function store(Request $request)
    {
        $validated = $request->validate([
            'cat_title' => 'required|string|max:255',
            'cat_subtitle' => 'required|string|max:255',
            'cat_description' => 'required|string|max:255',
            'cat_status' => 'required|in:0,1',
        ]);
        $category = Categories::create($validated);
        return to_route('admin.categories.index')->with('status', 'New Category-created');
    }
  • ทดสอบเพิ่มข้อมูลลงในฟอร์ม และกด submit จะพบว่ามีข้อมูล category เพิ่มลงในตาราง categories เรียบร้อย
  • จากนั้นเมื่อเพิ่มข้อมูลได้แล้วให้ return ไปที่หน้า index เพื่อแสดงข้อมูล category ที่มีทั้งหมด (เก่าและใหม่)

13. ทำการแสดงผลข้อมูล category ทั้งหมด โดยเริ่มจากการเปิดไฟล์ CategoryController เพิ่มโค้ดในส่วนฟังก์ชั่น index ดังนี้

public function index()
    {
        $cats = Categories::all();
        return view('admin.categories.index', compact('cats'));
    }

14. สร้างไฟล์ index.blade.php ไว้ในโฟลเดอร์ view/admin/categories และเพิ่มโค้ดลงในไฟล์ ดังนี้

By admin