🎯 Tujuan Pembelajaran

  • Membuat fitur tambah dan tampil data kategori.
  • Menggunakan form input dan validasi sederhana.
  • Menampilkan data dari database ke tabel.

🧩 Materi Pokok

  • Controller kategori.
  • View form input dan tabel data.
  • Validasi input menggunakan Request.

🧪 Langkah Praktik

1. Buat Controller

php artisan make:controller CategoryController

2. Tambahkan Route Manual

routes/web.php:

use App\Http\Controllers\CategoryController;

// Tampilkan semua kategori
Route::get('/categories', [CategoryController::class, 'index'])->name('categories.index');

// Simpan kategori baru
Route::post('/categories/store', [CategoryController::class, 'store'])->name('categories.store');

3. Implementasikan Method index dan store di Controller

app/Http/Controllers/CategoryController.php:

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

public function store(Request $request)
{
 $request->validate(['name' => 'required|unique:categories']);
 Category::create($request->all());
 return redirect()->back()->with('success', 'Kategori berhasil ditambahkan!');
}

4. Buat View dengan Bootstrap 5

File: resources/views/categories/index.blade.php

@extends('layouts.app')
@section('title', 'Kategori')

@section('content')
<div class="container">
 <h3 class="mb-4">Daftar Kategori</h3>

 @if(session('success'))
 <div class="alert alert-success">{{ session('success') }}</div>
 @endif

 <form action="{{ route('categories.store') }}" method="POST" class="mb-4 row g-2">
 @csrf
 <div class="col-auto">
 <input type="text" name="name" placeholder="Nama Kategori" required class="form-control" />
 </div>
 <div class="col-auto">
 <button type="submit" class="btn btn-primary">Tambah</button>
 </div>
 </form>

 <table class="table table-bordered table-striped">
 <thead class="table-light">
 <tr>
 <th scope="col">No</th>
 <th scope="col">Nama Kategori</th>
 <th scope="col">Tanggal Dibuat</th>
 </tr>
 </thead>
 <tbody>
 @foreach($categories as $cat)
 <tr>
 <th scope="row">{{ $loop->iteration }}</th>
 <td>{{ $cat->name }}</td>
 <td>{{ $cat->created_at->format('d-m-Y H:i') }}</td>
 </tr>
 @endforeach
 </tbody>
 </table>
</div>
@endsection

📝 Latihan

  • Tambahkan validasi pesan error menggunakan alert Bootstrap (alert-danger).
  • Tambahkan kolom “Tanggal Dibuat” di tabel kategori (sudah contoh di atas).

💡 Catatan Tambahan

  • Dengan route manual, kita lebih memahami cara kerja route dan controller Laravel.
  • Validasi di controller memastikan data kategori tidak duplikat dan wajib diisi.
  • Bootstrap 5 membuat form, tombol, dan tabel lebih rapi dan responsive.