Laravel-New Category (CRUD)

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 ดังนี้

<!-- 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.category.show_category') }}" 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 Categories</span>
                    </div>                   
                  </a>
                </li>
                
                <li class="sidebar-item">
                  <a class="sidebar-link justify-content-between"  
                    href="#">
                    <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 -->

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

//ส่วน 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('/show_categories', [CategoryController::class, 'index'])->name('category.show_category');
});

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

php artisan make:controller CategoryController -r

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

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

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

<?php

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

8. สร้างโฟลเดอร์ชื่อ categories ไว้ใน view/admin/ และจากนั้นให้สร้างไฟล์ index.blade.php ไว้ในโฟลเดอร์ view/admin/categories จากนั้นเพิ่มโค้ดสำหรับแสดงผลลงในไฟล์ ดังนี้

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">Categories</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">All Categories</li>
            </ol>
    </div>
@endsection
@section('content')
    <div class="card">
      @if (session("success"))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h5><i class="icon fas fa-check"></i> Success!</h5>
            <p class="m-0">{{ session("success") }}</p>
        </div>
        @endif
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif

    <!--Start main -->
    <div class="card-body">
        <div class="d-md-flex align-items-center">
                    <div>
                      <h4 class="card-title">รายชื่อCategory</h4>
                      <p class="card-subtitle">
                        ทั่วไป/วิชาการ/ท่องเที่ยวฯ
                      </p>
                    </div>
                    
                    <div class="ms-auto mt-3 mt-md-0">
                      <a href="#" class="btn btn-outline-info">+ NewCategory</a>
                    </div>
                  </div>
<!-- Start section table -->
                  <div class="table-responsive mt-4">
                    <table class="table mb-0 text-nowrap varient-table align-middle fs-3">
                      <thead>
                        <tr>
                            <th scope="col" class="px-0 text-muted">
                            #
                          </th>
                          <th scope="col" class="px-0 text-muted">
                            Category_Title
                          </th>
                          <th scope="col" class="px-0 text-muted">Category_SubTitle</th>
                          <th scope="col" class="px-0 text-muted">Category_Status</th> 
                          <th scope="col" class="px-0 text-muted">Action</th>                          
                        </tr>
                      </thead>
                    <tbody>
                        @foreach ($cats as $cat )
                        <tr>
                            <td class="px-0">{{ $loop->iteration }}</td>
                          <td class="px-0">{{ $cat->cat_title }}</td>
                          <td class="px-0">{{ $cat->cat_subtitle }}</td>
                          <td class="px-0">
                            @if($cat->cat_status==1)
                                <span class="text-secondary">Active</span>
                            @else
                                <span class="text-danger">Disabled</span>
                            @endif
                        </td>
                          <td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="#" class="btn btn-success btn-sm">View</a>
                              <a href="#" class="btn btn-warning btn-sm">Edit</a>
                              <form action="#" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                              </form>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                      @endforeach
                    </table>
                  </div>
                </div>
              </div>
            
@endsection

9. เพิ่มคำสั่ง 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; 

• ทดสอบการทำงาน โดยคลิ๊กที่เมนู Categories->All Categories ต้องใช้งานได้

10. ต่อไปสร้างเมนูเพิ่มหัวข้อ(Create New Category) เริ่มโดยการเพิ่มเร้าท์เพื่อทำลิ้งค์เมนูด้านซ้าย เปิดไฟล์ view/layouts/sidebar.blade.php เพิ่มโค้ดใต้เมนู Categories และเพิ่มเร้าท์ ตามตัวหนังสือสีแดง เพื่อสร้างเมนู 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.category.show_category') }}" 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 -->

• ใส่เร้าท์แบบเดียวกันลงในปุ่ม +NewCategory ที่อยู่ตรงด้านขวา บน ของตารางด้วย

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

Route::get('/show_categories', [CategoryController::class, 'index'])->name('category.show_category');
Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
    

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

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

13. สร้างไฟล์ create.blade.php ไว้ใน view/admin/categories

14. สร้างฟอร์มสำหรับกรอกข้อมูล 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

15. เพิ่มเร้าท์ในไฟล์ 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('/show_categories', [CategoryController::class, 'index'])->name('category.show_category');
    Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
    Route::post('/add_categories', [CategoryController::class, 'store'])->name('category.store');

16. เพิ่มคำสั่งลงในไฟล์ 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.category.show_category')->with('status', 'New Category-created');
    }

• ทดสอบเพิ่มข้อมูลลงในฟอร์ม และกด submit จะพบว่ามีข้อมูล category เพิ่มลงในตาราง categories เรียบร้อย
• จากนั้นเมื่อเพิ่มข้อมูลได้แล้วให้ return ไปที่หน้า index เพื่อแสดงข้อมูล category ที่มีทั้งหมด (เก่าและใหม่)

17. เพิ่มเร้าท์ที่ปุ่ม view ในไฟล์ index.blade.php เพื่อดูรายละเอียดข้อมูลทั้งหมด

<td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="{{ route('admin.category.show', $cat->id) }}" class="btn btn-success btn-sm">View</a>
                              <a href="#" class="btn btn-warning btn-sm">Edit</a>
                              <form action="#" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                              </form>
                            </div>
                          </td>

18. เพิ่มข้อมูลเร้าท์ในไฟล์ web.php

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

19. สร้างไฟล์ show.blade.php ลงในโฟลเดอร์ view/admin/categories และใส่โค้ดแสดงผลลงในไฟล์ ดังนี้

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">Catagory_Details</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">Category_Details</li>
            </ol>
    </div>
@endsection
@section('content')
<div class="card">
    <div class="col-md-6 mx-4 mb-3">
    <div class="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" value="{{ $cat->cat_title }}" readonly>
    </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" value="{{ $cat->cat_subtitle }}" readonly>
    </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" readonly>{{ $cat->cat_description }}</textarea>
    </div>
    <div class="mb-3">
        <label for="cat_status" class="form-label">Category_Status</label>
        <p class="form-control-plaintext">
            @if($cat->cat_status==1)
                <span class="badge bg-success">Active</span>
            @else
                <span class="badge bg-danger">Disabled</span>
            @endif
        </p>
    </div>
</div>
</div>
@endsection

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

public function show(string $id)
    {
        $cat = Categories::find($id);
        return view('admin.categories.show', compact('cat'));
    }

21. ทดสอบคลิ๊กที่ปุ่ม view ได้แล้ว

22. เพิ่มเร้าท์ที่ปุ่ม edit ในไฟล์ index.blade.php เพื่อแก้ไขข้อมูล

<td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="{{ route('admin.category.show', $cat->id) }}" class="btn btn-success btn-sm">View</a>
                              <a href="{{ route('admin.category.edit', $cat->id) }}" class="btn btn-warning btn-sm">Edit</a>
                              <form action="#" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                              </form>
                            </div>
                          </td>

23. เพิ่มข้อมูลลงในเร้าท์ ไฟล์ web.php

//ส่วน Category
    Route::get('/show_categories', [CategoryController::class, 'index'])->name('category.show_category');
    Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
    Route::post('/add_categories', [CategoryController::class, 'store'])->name('category.store');
    Route::get('/show_category/{id}', [CategoryController::class, 'show'])->name('category.show');
    Route::get('/edit_categoriess/{id}', [CategoryController::class, 'edit'])->name('category.edit');

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

public function edit(string $id)
    {
        $cat = Categories::find($id);
        return view('admin.categories.edit', compact('cat'));
    }

25. สร้างไฟล์ edit.blade.php ลงในโฟลเดอร์ view/admin/categories และใส่โค้ดลงในไฟล์ ดังนี้

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">Edit Catagory</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">Edit Category</li>
            </ol>
    </div>
@endsection
@section('content')
<div class="card">
    <div class="col-md-6 mx-4 mb-3">
    <form action="{{ route('admin.category.update', $cat->id)}}" method="POST">
        @csrf
    <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" value="{{ $cat->cat_title}}">
    </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" value="{{ $cat->cat_subtitle}}">
    </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" >{{ $cat->cat_description}}</textarea>
    </div>
    <div class="form-group mb-3">
        <label for="cat_status" class="form-label">Category_Status</label>
        <select class="form-control" id="cat_status" name="cat_status">
            <option value="1" {{ $cat->cat_status==1 ? 'selected' : '' }}>Active</option>
            <option value="0" {{ $cat->cat_status==0 ? 'selected' : '' }}>Disabled</option>
        </select>
    </div>
    
    <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
</div>
@endsection

26. เพิ่มข้อมูลลงในเร้าท์ ไฟล์ web.php

//ส่วน Category
    Route::get('/show_categories', [CategoryController::class, 'index'])->name('category.show_category');
    Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
    Route::post('/add_categories', [CategoryController::class, 'store'])->name('category.store');
    Route::get('/show_category/{id}', [CategoryController::class, 'show'])->name('category.show');
    Route::get('/edit_categoriess/{id}', [CategoryController::class, 'edit'])->name('category.edit');
    Route::post('/update_categories/{id}', [CategoryController::class, 'update'])->name('category.update');

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

public function update(Request $request, string $id)
    {
        $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::find($id);
        $category->update($validated);
        return to_route('admin.category.show_category')->with('status', 'Category-updated');
    }

• ทดสอบแก้ไขข้อมูล ซึ่งสามารถแก้ไขได้แล้ว

28. เพิ่มเร้าท์ที่ปุ่ม delete ในไฟล์ index.blade.php เพื่อลบข้อมูล

<td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="{{ route('admin.category.show', $cat->id) }}" class="btn btn-success btn-sm">View</a>
                              <a href="{{ route('admin.category.edit', $cat->id) }}" class="btn btn-warning btn-sm">Edit</a>
                              <form action="{{ route('admin.category.destroy', $cat->id) }}" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                              </form>
                            </div>

29. เพิ่มข้อมูลลงในเร้าท์ ไฟล์ web.php

//ส่วน Category
    Route::get('/show_categories', [CategoryController::class, 'index'])->name('category.show_category');
    Route::get('/create_categories', [CategoryController::class, 'create'])->name('category.create');
    Route::post('/add_categories', [CategoryController::class, 'store'])->name('category.store');
    Route::get('/show_category/{id}', [CategoryController::class, 'show'])->name('category.show');
    Route::get('/edit_categoriess/{id}', [CategoryController::class, 'edit'])->name('category.edit');
    Route::post('/update_categories/{id}', [CategoryController::class, 'update'])->name('category.update');
    Route::delete('/delete_categories/{id}', [CategoryController::class, 'destroy'])->name('category.delete');

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

public function destroy(string $id)
    {
        $category = Categories::find($id);
        $category->delete();
        return to_route('admin.category.show_category')->with('status', 'Category-Data Deleted');
    }

• ทดสอบคลิ๊กที่ปุ่ม delete สามารถลบได้แล้ว