Inventaris Lab Laravel 12 : Bagian #07 - MEMBUAT HALAMAN CRUD CATEGORY — Minarsih TECH Install Web App

Inventaris Lab Laravel 12 : Bagian #07 - MEMBUAT HALAMAN CRUD CATEGORY

profil-penulis

Belajar Bareng Minarsih - Edisi Ngoding

09 Oktober 2025

Tujuan: Selamat datang di bagian ini! Setelah berhasil membuat CRUD Users dari nol dan membuat fitur Autentikasi untuk Pengguna bisa Login, sekarang kita akan membangun CRUD untuk Category dengan cara yang lebih cepat dan efisien. Di bagian ini, kita akan fokus pada teknik refactoring (mengadaptasi kode yang sudah ada) untuk mempercepat proses development, sambil tetap memperhatikan setiap detail perubahan.

 

Langkah 1: Menyiapkan Route & Controller

Kita akan mulai dari "belakang", yaitu menyiapkan "jalan" (Route) dan "otak" (Controller) untuk fitur Category.

  1. Memastikan Controller Sudah Ada:
    • Anda tidak perlu membuat controller baru. Ingat di bagian KONFIGURASI DATABASE & FONDASI PROYEK, kita sudah menjalankan perintah php artisan make:model Category -msr. Perintah itu sudah otomatis membuatkan file CategoryController.php untuk kita di app/Http/Controllers/, lengkap dengan semua fungsi CRUD yang kosong.


       
  2. Mendaftarkan Resource Route:
    • Buka file routes/web.php.
    • Di bagian atas file, di bawah use yang lain, "impor" CategoryController agar bisa dikenali oleh file ini.
       
      use App\Http\Controllers\CategoryController;

       
    • Di dalam grup Route::middleware('auth')->group(...), tambahkan satu baris kode di bawah Route::resource('users', ...) untuk mendaftarkan semua rute CRUD untuk category.
       
      Route::middleware('auth')->group(function () {
          // ... route dashboard dan users
      
          Route::resource('category', CategoryController::class);
      
      });


       

  3. Melihat Daftar Route yang Dibuat:
    • Untuk melihat keajaiban dari Route::resource, buka terminal di VS Code dan jalankan perintah ini:
       
      php artisan route:list --name=category
      

    • Anda akan melihat daftar rute seperti category.index, category.create, category.store, dll., telah dibuat secara otomatis oleh Laravel. Ini membuktikan "jalan" untuk fitur kita sudah siap.

 

Langkah 2: Mengisi Logika CategoryController (Bagian Index)

Sekarang, kita akan mengisi logika pada controller untuk mengambil data semua kategori dari database dan menampilkannya.

  1. Buka file app/Http/Controllers/CategoryController.php.


     
  2. Pertama, impor Model Category di bagian atas file agar kita bisa berinteraksi dengan tabel categories.
     
    use App\Models\Category;

     
  3. Selanjutnya, tambahkan beberapa variabel protected di dalam kelas CategoryController. Ini adalah praktik yang baik untuk menjaga agar kode kita tetap rapi dan mudah diubah. Kita bisa menyalinnya dari UserController dan menyesuaikan isinya.
     
    class CategoryController extends Controller
    {
    
        // Variabel untuk data umum
    
        protected $title = 'Category';
    
        protected $menu = 'category';
    
        protected $directory = 'admin.category'; // Diubah ke folder view category
    
    

     
  4. Terakhir, kita isi fungsi index() untuk mengambil data dan mengirimkannya ke view. Anda juga bisa menyalin logika ini dari fungsi index() di UserController lalu menyesuaikannya.
     
    public function index()
    {
    
        // Menyiapkan array untuk dikirim ke view
    
        $data['title'] = $this->title;
    
        $data['menu'] = $this->menu;
    
    
    
        // Mengambil data dari database
    
        $data['categories'] = Category::latest()->get();
    
    
    
        // Me-return view beserta data
    
        return view($this->directory . '.index', $data);
    
    }
    

Penjelasan Kode: Baris $data['categories'] = Category::latest()->get(); memiliki arti:

  • Category:: - Mulai sebuah query pada Model Category (yang terhubung ke tabel categories).
  • latest() - Urutkan data yang diambil berdasarkan tanggal pembuatan (kolom created_at) dari yang paling baru ke yang paling lama.
  • get() - Eksekusi query dan ambil semua hasilnya. Hasilnya kemudian disimpan ke dalam $data['categories'] untuk dikirim ke view. 

 

Langkah 3: Menyiapkan File-File View (Cara Cepat)

Daripada membuat file tampilan dari nol, kita akan menduplikasi folder users yang sudah lengkap, karena struktur halamannya akan sangat mirip.

  1. Di panel file VS Code, buka direktori resources/views/admin/.
  2. Klik kanan pada folder users, lalu pilih Copy.


     
  3. Klik kanan lagi pada folder admin (folder induknya), lalu pilih Paste. Sebuah folder baru bernama users copy (atau sejenisnya) akan muncul.



     
  4. Klik kanan pada folder users copy tersebut dan pilih Rename. Ubah namanya menjadi category.




     
  5. Penjelasan: Sekarang kita memiliki folder category yang berisi file index.blade.php, create.blade.php, dan edit.blade.php. Ini sangat menghemat waktu, namun kita harus ekstra teliti untuk mengubah semua kode di dalamnya yang masih merujuk ke "Users".
     

Langkah 4: Menyesuaikan Halaman Index Category

Sekarang adalah bagian terpenting: mengubah file index.blade.php di dalam folder category agar sesuai dengan data kategori.

  1. Buka file resources/views/admin/category/index.blade.php.


     
  2. KODE SEBELUM PENYESUAIAN (Masih Kode Milik Users):
     
    @extends('admin.layouts.app')
    
    
    @section('css')
    
        {{-- CSS Tambahan --}}
    
    @endsection
    
    
    
    @section('content')
    
        <div class="card">
    
            <div class="card-body">
    
                <h5 class="card-title fw-semibold mb-4">Data {{ $title }}</h5>
    
                <a href="{{ route('users.create') }}" class="btn btn-primary mb-4">Tambah Data {{ $title }}</a>
    
    
    
                <div class="table-responsive">
    
                    <table id="datatable" class="table table-striped">
    
                        <thead>
    
                            <th>No</th>
    
                            <th>Nama</th>
    
                            <th>Email</th>
    
                            <th>Role</th>
    
                            <th>Aksi</th>
    
                            </tr>
    
                        </thead>
    
                        <tbody>
    
                            @foreach ($users as $item)
    
                                <tr>
    
                                    <td>{{ $loop->iteration }}</td>
    
                                    <td>{{ $item->name }}</td>
    
                                    <td>{{ $item->email }}</td>
    
                                    <td>{{ $item->role }}</td>
    
                                    <td>
    
                                        <a href="{{ route('users.edit', $item->id) }}" class="btn btn-warning btn-sm">Ubah</a>
    
                                        <form id="deleteForm{{ $item->id }}"
    
                                            action="{{ route('users.destroy', $item->id) }}" method="POST" class="d-inline">
    
                                            @csrf
    
                                            @method('DELETE')
    
                                            <button type="button" class="btn btn-danger btn-sm"
    
                                                onclick="confirmDelete({{ $item->id }})">Hapus</button>
    
                                        </form>
    
                                    </td>
    
                                </tr>
    
                            @endforeach 
    
                        </tbody>
    
                    </table>
    
                </div>
    
            </div>
    
        </div>
    
    @endsection
    
    
    
    @section('js')
    
        <script>
    
            $(document).ready(function() {
    
                $('#datatable').DataTable();
    
            });
    
    
    
            // Script untuk SweetAlert
    
            function confirmDelete(id) {
    
                swal({
    
                        title: "Apakah anda yakin?",
    
                        text: "Data yang dihapus tidak dapat dikembalikan!",
    
                        icon: "warning",
    
                        buttons: true,
    
                        dangerMode: true,
    
                    })
    
                    .then((willDelete) => {
    
                        if (willDelete) {
    
                            // Jika pengguna menekan "OK", submit form
    
                            $('#deleteForm' + id).submit();
    
                        } else {
    
                            // Jika pengguna menekan "Cancel"
    
                            swal("Data tidak jadi dihapus!", {
    
                                icon: "error",
    
                            });
    
                        }
    
                    });
    
            }
    
        </script>
    
    @endsection


     

  3. Lakukan Penyesuaian dengan Teliti:
    • Tombol Tambah: Ubah href="{{ route('users.create') }}" menjadi href="{{ route('category.create') }}".


       
    • Header Tabel: Hapus <th>Email</th> dan <th>Role</th>. Sisakan No, Nama, dan Aksi.


       
    • Looping Data: Ubah @foreach ($users as $item) menjadi @foreach ($categories as $item).


       
    • Isi Tabel: Hapus <td>{{ $item->email }}</td> dan <td>{{ $item->role }}</td>. Sisakan {{ $loop->iteration }} dan {{ $item->name }}.


       
    • Tombol Aksi: Ubah semua rute dari users.* menjadi category.*. Contoh: route('users.edit', $item->id) menjadi route('category.edit', $item->id).


       
  4. KODE SETELAH PENYESUAIAN (Kode Final untuk category/index.blade.php):
    Setelah semua perubahan, kode Anda akan terlihat jauh lebih sederhana seperti ini:
     
    @extends('admin.layouts.app')
    
    
    @section('css')
    
        {{-- CSS Tambahan --}}
    
    @endsection
    
    
    
    @section('content')
    
        <div class="card">
    
            <div class="card-body">
    
                <h5 class="card-title fw-semibold mb-4">Data {{ $title }}</h5>
    
                <a href="{{ route('category.create') }}" class="btn btn-primary mb-4">Tambah Data {{ $title }}</a>
    
    
    
                <div class="table-responsive">
    
                    <table id="datatable" class="table table-striped">
    
                        <thead>
    
                            <tr>
    
                                <th>No</th>
    
                                <th>Nama</th>
    
                                <th>Aksi</th>
    
                            </tr>
    
                        </thead>
    
                        <tbody>
    
                            @foreach ($categories as $item)
    
                                <tr>
    
                                    <td>{{ $loop->iteration }}</td>
    
                                    <td>{{ $item->name }}</td>
    
                                    <td>
    
                                        <a href="{{ route('category.edit', $item->id) }}" class="btn btn-warning btn-sm">Ubah</a>
    
                                        <form id="deleteForm{{ $item->id }}"
    
                                            action="{{ route('category.destroy', $item->id) }}" method="POST" class="d-inline">
    
                                            @csrf
    
                                            @method('DELETE')
    
                                            <button type="button" class="btn btn-danger btn-sm"
    
                                                onclick="confirmDelete({{ $item->id }})">Hapus</button>
    
                                        </form>
    
                                    </td>
    
                                </tr>
    
                            @endforeach
    
                        </tbody>
    
                    </table>
    
                </div>
    
            </div>
    
        </div>
    
    @endsection
    
    
    
    @section('js')
    
        <script>
    
            $(document).ready(function() {
    
                $('#datatable').DataTable();
    
            });
    
    
    
            function confirmDelete(id) {
    
                swal({
    
                    title: "Apakah anda yakin?",
    
                    text: "Data yang dihapus tidak dapat dikembalikan!",
    
                    icon: "warning",
    
                    buttons: true,
    
                    dangerMode: true,
    
                })
    
                .then((willDelete) => {
    
                    if (willDelete) {
    
                        $('#deleteForm' + id).submit();
    
                    } else {
    
                        swal("Data tidak jadi dihapus!", {
    
                            icon: "error",
    
                        });
    
                    }
    
                });
    
            }
    
        </script>
    
    @endsection



 

Langkah 5: Menambahkan Menu Category di Sidebar

Agar halaman daftar kategori bisa diakses, kita perlu menambahkan link menunya di sidebar. Prosesnya sama persis seperti saat kita menambahkan menu Users.

  1. Buka file resources/views/admin/layouts/sidebar.blade.php.


     
  2. Cari blok kode untuk menu "Data Users" yang sudah ada. Gunakan shortcut keyboard Alt + Shift + Arrow Down (atau salin dan tempel manual) untuk menduplikasi seluruh blok <li class="sidebar-item ..."> tersebut.


     
  3. KODE SEBELUM PENYESUAIAN (Setelah Diduplikasi):
     
    {{-- (Kode Menu Home & Dashboard) --}}
    <li class="nav-small-cap">
    
        <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
    
        <span class="hide-menu">Datamaster</span>
    
    </li>
    
    {{-- Menu Users --}}
    
    <li class="sidebar-item {{ Request::is('users*') ? 'selected' : '' }}">
    
        <a class="sidebar-link {{ Request::is('users*') ? 'active' : '' }}"
    
            href="{{ route('users.index') }}" aria-expanded="false">
    
            <span>
    
                <i class="ti ti-users"></i>
    
            </span>
    
            <span class="hide-menu">Data Users</span>
    
        </a>
    
    </li>
    
    {{-- Ini adalah kode hasil duplikasi yang akan kita ubah --}}
    
    <li class="sidebar-item {{ Request::is('users*') ? 'selected' : '' }}">
    
        <a class="sidebar-link {{ Request::is('users*') ? 'active' : '' }}"
    
            href="{{ route('users.index') }}" aria-expanded="false">
    
            <span>
    
                <i class="ti ti-users"></i>
    
            </span>
    
            <span class="hide-menu">Data Users</span>
    
        </a>
    
    </li>

     

  4. Lakukan Penyesuaian pada Kode Hasil Duplikasi:
    • Ubah pengecekan URL dari Request::is('users*') menjadi Request::is('category*').


       
    • Ubah link rute dari route('users.index') menjadi route('category.index').


       
    • Ganti ikon ti ti-users menjadi ti ti-category agar sesuai.


       
    • Ganti teks menu Data Users menjadi Data Category.


       
  5. KODE SETELAH PENYESUAIAN (Kode Final Sidebar):
    Setelah diubah, seluruh blok <ul> Anda akan terlihat seperti ini, rapi dan terstruktur.
     
    <ul id="sidebarnav">
        {{-- MENU HOME --}}
    
        <li class="nav-small-cap">
    
            <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
    
            <span class="hide-menu">Home</span>
    
        </li>
    
        <li class="sidebar-item {{ Request::is('dashboard') ? 'selected' : '' }}">
    
            <a class="sidebar-link {{ Request::is('dashboard') ? 'active' : '' }}"
    
                href="{{ route('dashboard') }}" aria-expanded="false">
    
                <span>
    
                    <i class="ti ti-layout-dashboard"></i>
    
                </span>
    
                <span class="hide-menu">Dashboard</span>
    
            </a>
    
        </li>
    
    
    
        {{-- MENU DATAMASTER --}}
    
        <li class="nav-small-cap">
    
            <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
    
            <span class="hide-menu">Datamaster</span>
    
        </li>
    
        {{-- Menu Users --}}
    
        <li class="sidebar-item {{ Request::is('users*') ? 'selected' : '' }}">
    
            <a class="sidebar-link {{ Request::is('users*') ? 'active' : '' }}"
    
                href="{{ route('users.index') }}" aria-expanded="false">
    
                <span>
    
                    <i class="ti ti-users"></i>
    
                </span>
    
                <span class="hide-menu">Data Users</span>
    
            </a>
    
        </li>
    
        {{-- Menu Category --}}
    
        <li class="sidebar-item {{ Request::is('category*') ? 'selected' : '' }}">
    
            <a class="sidebar-link {{ Request::is('category*') ? 'active' : '' }}"
    
                href="{{ route('category.index') }}" aria-expanded="false">
    
                <span>
    
                    <i class="ti ti-category"></i>
    
                </span>
    
                <span class="hide-menu">Data Category</span>
    
            </a>
    
        </li>
    
    </ul>



     
  6. Uji Coba Halaman Index Category:
    • Simpan file sidebar.blade.php.
    • Refresh browser Anda. Menu "Data Category" akan muncul di bawah "Data Users".


       
    • Klik menu "Data Category" tersebut.
    • Hasil: Halaman daftar kategori akan tampil dengan benar, lengkap dengan DataTables dan SweetAlert yang sudah berfungsi. Data kategori yang kita buat dengan seeder di awal akan muncul di tabel.


       

 

Langkah 6: Membuat Form Tambah Category

Sekarang kita akan membuat fungsionalitas untuk menambah data kategori baru. Kita akan mengadaptasi form tambah user yang sudah ada.

  1. Siapkan Logika di Controller (Fungsi create):
    • Kita tidak perlu membuat route baru, karena Route::resource('category', ...) sudah otomatis membuatkan rute category.create untuk kita.
    • Buka app/Http/Controllers/CategoryController.php.


       
    • Cari fungsi create() yang masih kosong. Kita bisa menyalin logika dari fungsi create() di UserController karena tujuannya sama: hanya menampilkan halaman form.


       
    • Isi fungsi create() dengan kode berikut:
       
      public function create()
      {
      
          $data['title'] = $this->title;
      
          $data['menu'] = $this->menu;
      
      
          return view($this->directory . '.create', $data);
      
      }


       

  1. Sesuaikan Tampilan Form (create.blade.php):
    • Buka file resources/views/admin/category/create.blade.php. Saat ini, isinya adalah salinan persis dari form tambah user.
    • KODE SEBELUM PENYESUAIAN:
       
      @extends('admin.layouts.app')
      @section('css')
      
          {{-- CSS Tambahan --}}
      
      @endsection
      
      
      
      @section('content')
      
          <div class="card">
      
              <div class="card-body">
      
                  <h5 class="card-title fw-semibold mb-4">Tambah Data {{ $title }}</h5>
      
                  <div class="card">
      
                      <div class="card-body">
      
                          <form action="{{ route('users.store') }}" method="POST">
      
                              @csrf
      
                              {{-- Nama --}}
      
                              <div class="mb-3">
      
                                  <label for="name" class="form-label">Nama</label>
      
                                  <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
      
                                      id="name" placeholder="Nama Lengkap" value="{{ old('name') }}">
      
                                  @error('name')
      
                                      <small class="text-danger">{{ $message }}</small>
      
                                  @enderror
      
                              </div>
      
      
      
                              {{-- Email --}}
      
                              <div class="mb-3">
      
                                  <label for="email" class="form-label">Email</label>
      
                                  <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
      
                                      id="email" placeholder="contoh@email.com" value="{{ old('email') }}">
      
                                  @error('email')
      
                                      <small class="text-danger">{{ $message }}</small>
      
                                  @enderror
      
                              </div>
      
      
      
                              {{-- Password --}}
      
                              <div class="mb-3">
      
                                  <label for="password" class="form-label">Password</label>
      
                                  <input type="password" class="form-control @error('password') is-invalid @enderror"
      
                                      name="password" id="password" placeholder="Password">
      
                                  @error('password')
      
                                      <small class="text-danger">{{ $message }}</small>
      
                                  @enderror
      
                              </div>
      
      
      
                              {{-- Role --}}
      
                              <div class="mb-3">
      
                                  <label for="role" class="form-label">Role</label>
      
                                  <select class="form-select @error('role') is-invalid @enderror" name="role" id="role">
      
                                      <option value="Siswa" {{ old('role') == 'Siswa' ? 'selected' : '' }}>Siswa</option>
      
                                  </select>
      
                                  @error('role')
      
                                      <small class="text-danger">{{ $message }}</small>
      
                                  @enderror
      
                              </div>
      
      
      
                              {{-- Tombol --}}
      
                              <button type="submit" class="btn btn-primary">Simpan</button>
      
                              <a href="{{ route('users.index') }}" class="btn btn-warning">Kembali</a>
      
      
      
                          </form>
      
                      </div>
      
                  </div>
      
              </div>
      
          </div>
      
      @endsection
      
      
      
      @section('js')
      
          {{-- JS Tambahan --}}
      
      @endsection
       
  2. Lakukan Penyesuaian dengan Teliti:
    • Form Action: Ubah rute dari users.store menjadi category.store.


       
    • Input Fields: Hapus semua div class="mb-3" untuk input Email, Password, dan Role. Sisakan hanya input untuk Nama.


       
    • Tombol Kembali: Ubah rute dari users.index menjadi category.index.


       
    • Penjelasan: Kita hanya menyisakan input "Nama" yang nantinya kita ubah menjadi “Nama Kategori” karena tabel categories hanya memiliki kolom name yang perlu diisi. Atribut seperti name="name", old('name'), dan @error('name') tidak perlu diubah karena nama kolom di tabel kita juga name. Jangan lupa untuk ubah atribut placeholder juga, yang sebelumnya “Nama” menjadi “Nama Kategori”. Menjaga konsistensi penamaan seperti ini akan sangat memudahkan development.
       
  3. KODE SETELAH PENYESUAIAN (Kode Final create.blade.php):
     
    @extends('admin.layouts.app')
    
    @section('css')
        {{-- CSS Tambahan --}}
    
    @endsection
    
    
    @section('content')
    
        <div class="card">
    
            <div class="card-body">
    
                <h5 class="card-title fw-semibold mb-4">Tambah Data {{ $title }}</h5>
    
                <div class="card">
    
                    <div class="card-body">
    
                        <form action="{{ route('category.store') }}" method="POST">
    
                            @csrf
    
                            {{-- Nama --}}
    
                            <div class="mb-3">
    
                                <label for="name" class="form-label">Nama Kategori</label>
    
                                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
    
                                    id="name" placeholder="Nama Kategori" value="{{ old('name') }}">
    
                                @error('name')
    
                                    <small class="text-danger">{{ $message }}</small>
    
                                @enderror
    
                            </div>
    
    
    
                            {{-- Tombol --}}
    
                            <button type="submit" class="btn btn-primary">Simpan</button>
    
                            <a href="{{ route('category.index') }}" class="btn btn-warning">Kembali</a>
    
                        </form>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    @endsection
    
    
    @section('js')
    
        {{-- JS Tambahan --}}
    
    @endsection

 

Langkah 7: Menyiapkan Logika Penyimpanan Data

Sekarang kita akan menulis logika di controller untuk memvalidasi dan menyimpan data kategori baru ke database.

  1. Siapkan Model Category.php:
    • Sebelum kita bisa menggunakan create(), kita harus memberitahu Model kolom apa saja yang "aman" untuk diisi.
    • Buka file app/Models/Category.php.


       
    • Tambahkan properti protected $fillable di dalam kelasnya.


       
    • Penjelasan: Properti $fillable adalah fitur keamanan Laravel yang disebut Mass Assignment Protection. Ini bertindak sebagai 'daftar izin' yang hanya memperbolehkan kolom-kolom di dalamnya (name) untuk diisi secara massal menggunakan metode create(). 

       

  2. Isi Logika store() di Controller:
    • Buka CategoryController.php dan UserController.php berdampingan.


       
    • Salin seluruh isi fungsi store() dari UserController dan tempel ke dalam fungsi store() yang masih kosong di CategoryController.


       
    • KODE SEBELUM PENYESUAIAN (Hasil Salin dari UserController):
       
      public function store(Request $request)
          {
      
              // 1. Validasi data
      
              $validatedData = $request->validate([
      
                  'name' => 'required|max:255',
      
                  'email' => 'required|email|unique:users',
      
                  'password' => 'required|min:5',
      
                  'role' => 'required'
      
              ]);
      
      
      
              // 2. Enkripsi password
      
              $validatedData['password'] = Hash::make($validatedData['password']);
      
      
      
              // 3. Simpan data ke database
      
              $user = User::create($validatedData);
      
      
      
              // 4. Redirect dengan pesan sukses
      
              if ($user) {
      
                  return redirect()->route('users.index')->with([
      
                      'status' => 'success',
      
                      'title' => 'Berhasil',
      
                      'message' => 'Data Berhasil Ditambahkan!'
      
                  ]);
      
              } else {
      
                  return redirect()->route('users.index')->with([
      
                      'status' => 'danger',
      
                      'title' => 'Gagal',
      
                      'message' => 'Data Gagal Ditambahkan!'
      
                  ]);
      
              }
      
          }

        
  • Sesuaikan Kodenya:
    • Hapus validasi untuk email, password, dan role. Tambahkan aturan unique:categories pada name untuk mencegah nama kategori yang sama.


       
    • Hapus baris enkripsi password.


       
    • Ganti User::create menjadi Category::create.


       
    • Ganti semua variabel $user menjadi $category.


       
    • Ganti redirect dari route('users.index') menjadi route('category.index').


       
  • KODE SETELAH PENYESUAIAN (Final untuk store() di CategoryController):
     
    public function store(Request $request)
    {
    
        // 1. Validasi data
    
        $validatedData = $request->validate([
    
            'name' => 'required|max:255|unique:categories',
    
        ]);
    
    
    
        // 2. Simpan data ke database
    
        $category = Category::create($validatedData);
    
    
    
        // 3. Redirect dengan pesan sukses
    
        if ($category) {
    
            return redirect()->route('category.index')->with([
    
                'status' => 'success',
    
                'title' => 'Berhasil',
    
                'message' => 'Data Berhasil Ditambahkan!'
    
            ]);
    
        } else {
    
            return redirect()->route('category.index')->with([
    
                'status' => 'danger',
    
                'title' => 'Gagal',
    
                'message' => 'Data Gagal Ditambahkan!'
    
            ]);
    
        }
    
    }

 

Langkah 8: Uji Coba Form Tambah Data

  1. Buka browser Anda, pergi ke halaman "Data Category", lalu klik tombol "Tambah Data Category".
  2. Anda akan melihat form tambah kategori yang baru saja kita buat.


     
  3. Coba isi nama kategori baru (misalnya "Laptop"), lalu klik Simpan.


     
  4. Hasil: Anda akan diarahkan kembali ke halaman daftar kategori, sebuah notifikasi SweetAlert "Berhasil Ditambahkan!" akan muncul, dan data "Laptop" akan tampil di dalam tabel.


 

Langkah 9: Membuat Form Ubah Category

Prosesnya akan sangat mirip dengan membuat form tambah, kita akan mengadaptasi kode yang sudah ada untuk mempercepat pekerjaan.

  1. Siapkan Logika di Controller (Fungsi edit):
    • Route category.edit sudah siap digunakan. Kita hanya perlu mengisi logika di CategoryController.
    • Buka app/Http/Controllers/CategoryController.php.


       
    • Cari fungsi edit(Category $category) yang masih kosong, lalu isi dengan kode yang bisa kita salin dari UserController dan sesuaikan.
       
      {
          // Menyiapkan data umum
          $data['title'] = $this->title;
          $data['menu'] = $this->menu;
      
          // Mencari data category berdasarkan ID menggunakan Model Binding
          $data['category'] = $category;
      
          // Me-return view beserta data
          return view($this->directory . '.edit', $data);
      }
      

       
    • Penjelasan: Fungsi ini memanfaatkan Route Model Binding untuk secara otomatis mencari Category berdasarkan ID dari URL. Jika ketemu, objek Category tersebut akan langsung dimasukkan ke parameter $category dan dikirim ke halaman edit.blade.php. Jika tidak, halaman 404 Not Found akan otomatis ditampilkan.
       
  2. Sesuaikan Tampilan Form (edit.blade.php):
    • Buka file resources/views/admin/category/edit.blade.php. Saat ini, isinya masih berupa salinan dari form ubah user.


       
    • Untuk mempercepat, hapus semua isinya, lalu salin semua kode dari create.blade.php (dari folder category) dan tempel ke edit.blade.php ini.



       
    • Sekarang, kita hanya perlu melakukan tiga penyesuaian kecil pada edit.blade.php:
      • Ubah Judul Card: Ganti teks "Tambah Data" menjadi "Ubah Data".


         
      • Ubah Form Action & Method: Arahkan form ke route category.update dan tambahkan directive @method('PUT') di bawah @csrf.


         
      • Ubah Nilai Input: Tambahkan data lama ($category->name) sebagai nilai default pada input name.


         
  3. KODE SETELAH PENYESUAIAN (Kode Final edit.blade.php):
     
    @extends('admin.layouts.app')
    
    @section('css')
        {{-- CSS Tambahan --}}
    
    @endsection
    
    
    @section('content')
    
        <div class="card">
    
            <div class="card-body">
    
                <h5 class="card-title fw-semibold mb-4">Ubah Data {{ $title }}</h5> {{-- PERUBAHAN 1 --}}
    
                <div class="card">
    
                    <div class="card-body">
    
                        <form action="{{ route('category.update', $category->id) }}" method="POST"> {{-- PERUBAHAN 2 --}}
    
                            @csrf
    
                            @method('PUT') {{-- PERUBAHAN 3 --}}
    
                            {{-- Nama --}}
    
                            <div class="mb-3">
    
                                <label for="name" class="form-label">Nama Kategori</label>
    
                                <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
    
                                    id="name" placeholder="Nama Kategori" value="{{ old('name', $category->name) }}"> {{-- PERUBAHAN 4 --}}
    
                                @error('name')
    
                                    <small class="text-danger">{{ $message }}</small>
    
                                @enderror
    
                            </div>
    
    
    
                            {{-- Tombol --}}
    
                            <button type="submit" class="btn btn-primary">Simpan</button>
    
                            <a href="{{ route('category.index') }}" class="btn btn-warning">Kembali</a>
    
                        </form>
    
                    </div>
    
                </div>
    
            </div>
    
        </div>
    
    @endsection

 

Langkah 10: Menyiapkan Logika Update Data

Saatnya menulis logika di controller untuk memvalidasi dan memperbarui data di database.

  1. Buka CategoryController.php.


     
  2. Salin seluruh isi didalam fungsi update() dari UserController dan tempel ke dalam fungsi update() yang masih kosong di CategoryController.


     
  3. KODE SEBELUM PENYESUAIAN (Hasil Salin dari UserController):
     
    public function update(Request $request, Category $category)
        {
    
            // 1. Cari data user berdasarkan ID
    
            $user = User::findOrFail($id);
    
    
    
            // 2. Validasi data
    
            $validatedData = $request->validate([
    
                'name' => 'required|max:255',
    
                'email' => 'required|email|unique:users,email,' . $id,
    
                'password' => 'nullable|min:5', // Password boleh kosong
    
                'role' => 'required'
    
            ]);
    
    
    
            // 3. Menyiapkan data untuk diupdate
    
            $updateData = [
    
                'name' => $validatedData['name'],
    
                'email' => $validatedData['email'],
    
                'role' => $validatedData['role'],
    
            ];
    
    
    
            // 4. Jika password diisi, enkripsi dan tambahkan ke data update
    
            if ($request->filled('password')) {
    
                $updateData['password'] = Hash::make($validatedData['password']);
    
            }
    
    
    
            // 5. Update data di database
    
            $updateProcess = $user->update($updateData);
    
    
    
            // 6. Redirect dengan pesan sukses
    
            if ($updateProcess) {
    
                return redirect()->route('users.index')->with([
    
                    'status' => 'success',
    
                    'title' => 'Berhasil',
    
                    'message' => 'Data Berhasil Diubah!'
    
                ]);
    
            } else {
    
                return redirect()->route('users.index')->with([
    
                    'status' => 'danger',
    
                    'title' => 'Gagal',
    
                    'message' => 'Data Gagal Diubah!'
    
                ]);
    
            }
    
        }


     

  1. Sesuaikan Kodenya:
    • Ganti semua variabel $user menjadi $category.


       
    • Tidak perlu pakai User::findOrFail($id) atau Category::findOrFail($id), karena kita sudah menggunakan Model Binding di parameter fungsi update().


       
    • Sesuaikan aturan validasi, hanya untuk name. Jangan lupa tambahkan pengecualian ID saat memeriksa keunikan data.


       
    • Hapus semua logika terkait password.


       
    • Sesuaikan redirect ke route('category.index').


       
  2. KODE SETELAH PENYESUAIAN (Final untuk update() di CategoryController):
     
    public function update(Request $request, Category $category)
    {
    
        // 1. Validasi data
    
        $validatedData = $request->validate([
    
            'name' => 'required|max:255|unique:categories,name,' . $category->id,
    
        ]);
    
    
    
        // 2. Update data di database
    
        $updateProcess = $category->update($validatedData);
    
    
    
        // 3. Redirect dengan pesan sukses
    
        if ($updateProcess) {
    
            return redirect()->route('category.index')->with([
    
                'status' => 'success',
    
                'title' => 'Berhasil',
    
                'message' => 'Data Berhasil Diubah!'
    
            ]);
    
        } else {
    
            return redirect()->route('category.index')->with([
    
                'status' => 'danger',
    
                'title' => 'Gagal',
    
                'message' => 'Data Gagal Diubah!'
    
            ]);
    
        }
    
    }

 

Langkah 11: Uji Coba Form Ubah Data

  1. Buka browser Anda, pergi ke halaman "Data Category", lalu klik tombol "Ubah" berwarna kuning pada salah satu data.
  2. Anda akan diarahkan ke form ubah, dan nama kategori lama akan otomatis terisi di kolom input.


     
  3. Ganti nama kategori tersebut, lalu klik Simpan.


     
  4. Hasil: Anda akan kembali ke halaman daftar kategori, notifikasi SweetAlert "Berhasil Diubah!" akan muncul, dan nama kategori di tabel akan berubah sesuai pembaruan Anda.



 

Langkah 12: Membuat Fitur Hapus Category

Ini adalah langkah terakhir untuk melengkapi CRUD Category. Kita hanya perlu mengisi logika di controller, karena route dan tombol di tampilan sudah kita siapkan sebelumnya.

  1. Siapkan Logika destroy() di Controller:
    • Buka CategoryController.php dan UserController.php secara berdampingan.


       
    • Salin seluruh isi didalam fungsi destroy() dari UserController dan tempel ke dalam fungsi destroy() yang masih kosong di CategoryController.




       
    • KODE SEBELUM PENYESUAIAN (Hasil Salin dari UserController):
       
      public function destroy(Category $category)
      {
      
          // 1. Cari data user berdasarkan ID
      
          $user = User::findOrFail($id);
      
      
      
          // 2. Lakukan proses delete
      
          if ($user) {
      
              $user->delete();
      
      
      
              // 3. Jika berhasil, redirect dengan pesan sukses
      
              return redirect()->route('users.index')->with([
      
                  'status' => 'success',
      
                  'title' => 'Berhasil',
      
                  'message' => 'Data Berhasil Dihapus!'
      
              ]);
      
          } else {
      
              // 4. Jika gagal, redirect dengan pesan gagal
      
              return redirect()->route('users.index')->with([
      
                  'status' => 'danger',
      
                  'title' => 'Gagal',
      
                  'message' => 'Data Gagal Dihapus!'
      
              ]);
      
          }
      
      }
       
  • Sesuaikan Kodenya:
    • Ganti variabel $user untuk fungsi delete() menjadi $category.


       
    • Tidak perlu pakai User::findOrFail($id) atau Category::findOrFail($id), karena kita sudah menggunakan Model Binding di parameter fungsi destroy().


       
    • Buat $deleteProcess di atas pengecekan, potong $category->delete() di dalam pengecekan, dan simpan kedalam $deleteProcess yang di buat tadi.


       
    • Ganti kondisi pengecekan yang tadinya $user menjadi $deleteProcess.


       
    • Ubah redirect dari route('users.index') menjadi route('category.index').


       
  • KODE SETELAH PENYESUAIAN (Final untuk destroy() di CategoryController):
     
    public function destroy(Category $category)
    {
    
        $deleteProcess = $category->delete();
    
    
    
        if ($deleteProcess) {
    
            return redirect()->route('category.index')->with([
    
                'status' => 'success',
    
                'title' => 'Berhasil',
    
                'message' => 'Data Berhasil Dihapus!'
    
            ]);
    
        } else {
    
            return redirect()->route('category.index')->with([
    
                'status' => 'danger',
    
                'title' => 'Gagal',
    
                'message' => 'Data Gagal Dihapus!'
    
            ]);
    
        }
    
    }

 

Penjelasan Kode: Logikanya sangat sederhana. Fungsi ini mencari kategori berdasarkan ID menggunakan Model Binding, menghapusnya dari database menggunakan metode $category->delete(), lalu mengembalikan pengguna ke halaman daftar kategori dengan notifikasi yang sesuai.

 

Langkah 13: Uji Coba Terakhir Fitur Hapus

Saatnya memastikan semua bagian (Tombol -> SweetAlert -> Controller -> Redirect) bekerja dengan sempurna.

  1. Buka browser Anda dan pergi ke halaman "Data Category".


     
  2. Pilih salah satu data kategori yang ingin Anda hapus, lalu klik tombol "Hapus" berwarna merah.
  3. Sebuah dialog konfirmasi dari SweetAlert akan muncul, menanyakan apakah Anda yakin. Klik tombol "OK" (atau tombol konfirmasi berwarna merah).


     
  4. Hasil: Anda akan tetap berada di halaman daftar kategori, sebuah notifikasi SweetAlert "Berhasil Dihapus!" akan muncul, dan baris data yang Anda hapus tadi akan hilang dari tabel.



Selamat! Anda telah berhasil membangun fungsionalitas CRUD kedua (Create, Read, Update, Delete) dengan jauh lebih cepat dengan mengadaptasi kode yang sudah ada. Ini adalah keterampilan penting yang menunjukkan pemahaman Anda tentang pola pengembangan di Laravel.

Artikel Lainnya Dengan Kategori Terkait :


1. Inventaris Lab Laravel 12 : Bagian #01 - INSTALASI LARAGON, PHP, PHPMYADMIN & LARAVEL

2. Inventaris Lab Laravel 12 : Bagian #02 - KONFIGURASI DATABASE & FONDASI PROYEK

3. Inventaris Lab Laravel 12 : Bagian #03 - MEMBANGUN HALAMAN ADMIN DENGAN BLADE TEMPLATING

4. Inventaris Lab Laravel 12 : Bagian #04 - MEMBUAT HALAMAN DASHBOARD DINAMIS

5. Inventaris Lab Laravel 12 : Bagian #05 - MEMBUAT HALAMAN CRUD USERS

6. Inventaris Lab Laravel 12 : Bagian #06 - MEMBUAT FITUR AUTENTIKASI (LOGIN) & PENYESUAIAN UI

7. Inventaris Lab Laravel 12 : Bagian #07 - MEMBUAT HALAMAN CRUD CATEGORY

8. Inventaris Lab Laravel 12 : Bagian #08 - MEMBUAT HALAMAN CRUD ITEM

9. Inventaris Lab Laravel 12 : Bagian #09 - MEMBUAT HALAMAN TRANSAKSI PEMINJAMAN (LOAN)

10. Inventaris Lab Laravel 12 : Bagian #10 - HAK AKSES (AUTHORIZATION) & HALAMAN SISWA

Masuk Terlebih dahulu untuk berkomentar

Paling baru
Lihat Lainnya