Tujuan: Selamat! Anda telah berhasil membangun fondasi dan halaman dashboard. Di bagian ini, kita akan membangun fitur inti pertama kita: halaman untuk mengelola data pengguna (Users). Kita akan mempelajari cara Laravel mempercepat pembuatan fitur CRUD menggunakan Resource Controller dan Resource Route.

Langkah 1: Menyiapkan Route & Controller

Kita akan mulai dari "belakang", yaitu menyiapkan rute dan controller terlebih dahulu.

1. Buat Resource Controller: Buka terminal di VS Code dan jalankan perintah berikut:
    

   php artisan make:controller UserController --resource

   
   
   Penjelasan: Perintah ini membuat file UserController.php. Opsi --resource secara ajaib akan membuatkan semua fungsi yang kita butuhkan untuk CRUD (index, create, store, show, edit, update, destroy) di dalam controller tersebut.

2. Daftarkan Resource Route:
   • Buka file routes/web.php.
   • Impor UserController di bagian atas file:
      

     use App\Http\Controllers\UserController;

     
      
   • Tambahkan satu baris kode ini untuk membuat semua rute yang dibutuhkan untuk CRUD Users:
      

     Route::resource('users', UserController::class);

     
      
3. Lihat Keajaiban Resource Route:
   • Untuk melihat rute apa saja yang baru saja dibuat, ketik perintah ini di terminal:
      

     php artisan route:list --name=users

     
      
   • Anda akan melihat Laravel secara otomatis membuat banyak rute seperti users.index, users.create, users.store, users.edit, dll. Ini sangat menghemat waktu!
     
     

Langkah 2: Mengisi Logika UserController (Bagian Index)

Sekarang kita akan mengisi logika untuk menampilkan daftar pengguna.

1. Buka file app/Http/Controllers/UserController.php.
2. Impor Model User di bagian atas file:
    

   use App\Models\User;

   
    
3. Tambahkan beberapa variabel protected di atas fungsi index(). Anda bisa menyalinnya dari DashboardController dan menyesuaikan isinya.
    

   class UserController extends Controller
   {
       // Variabel untuk data umum
       protected $title = 'Users';
       protected $menu = 'users';
       protected $directory = 'admin.users'; // Diubah ke folder view users
   ]

   
    
4. Sekarang, isi fungsi index() dengan kode berikut:
    

   public function index()
   {
   
       // Menyiapkan array untuk dikirim ke view
   
       $data['title'] = $this->title;
   
       $data['menu'] = $this->menu;
   
   
   
       // Mengambil data dari database
   
       $data['users'] = User::where('role', 'Siswa')->latest()->get();
   
   
   
       // Me-return view beserta data
   
       return view($this->directory . '.index', $data);
   
   }

   
    

Penjelasan Kode: Baris $data['users'] = User::where('role', 'Siswa')->latest()->get(); berarti:

• User:: - Mulai query dari Model User.
• where('role', 'Siswa') - Cari semua user yang kolom role-nya adalah 'Siswa'.
• latest() - Urutkan hasilnya dari yang paling baru dibuat.
• get() - Ambil semua data yang cocok.

Langkah 3: Menyiapkan File-File View

Kita siapkan "kanvas" untuk halaman-halaman CRUD kita.

1. Di dalam resources/views/admin/, buat folder baru bernama users.
   
   
    
2. Di dalam folder users tersebut, buat tiga file baru:
   • index.blade.php (untuk menampilkan daftar user)
   • create.blade.php (untuk form tambah user)
   • edit.blade.php (untuk form ubah user)
     
     

Langkah 4: Mendesain Halaman Index Users

Mari kita fokus mengisi file index.blade.php.

1. Buka file resources/views/admin/users/index.blade.php.
2. Isi dengan kerangka Blade dasar:
    

   @extends('admin.layouts.app')
   
   
   @section('css')
   
   {{-- CSS Tambahan --}}
   
   @endsection
   
   
   
   @section('content')
   
   {{-- Konten Utama --}}
   
   @endsection
   
   
   
   @section('js')
   
   {{-- JS Tambahan --}}
   
   @endsection

   

3. Salin komponen <div class="card"> dari sample-page.html dan tempel di dalam @section('content').
   
   
    
4. Sesuaikan isinya. Ubah pada tag h5 yang awalnya Sample Page menjadi Data {{ $title }}, hapus tag <p>, dan tambahkan tombol "Tambah Data" di bawahnya.
   
   
    
5. Terakhir, tambahkan tabel untuk menampilkan data pengguna. Isi @section('content') Anda sehingga menjadi seperti ini:
    

   @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 class="table table-striped">
   
                       <thead>
   
                           <tr>
   
                               <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 action="{{ route('users.destroy', $item->id) }}" method="POST" class="d-inline">
   
                                           @csrf
   
                                           @method('DELETE')
   
                                           <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda ingin menghapusnya?')">Hapus</button>
   
                                       </form>
   
                                   </td>
   
                               </tr>
   
                           @endforeach
   
                       </tbody>
   
                   </table>
   
               </div>
   
           </div>
   
       </div>
   
   @endsection

   

Penjelasan Tabel:

• @foreach: Melakukan perulangan untuk setiap data user yang kita kirim dari controller.
• {{ $loop->iteration }}: Variabel bawaan Blade untuk penomoran otomatis.
• {{ route(...) }}: Helper untuk membuat URL ke rute edit dan hapus secara dinamis.
• @csrf & @method('DELETE'): Perintah Blade khusus untuk keamanan form dan untuk memberitahu Laravel bahwa ini adalah request HAPUS (DELETE).

Langkah 5: Menambahkan Menu Users di Sidebar

Agar halaman Users bisa diakses, kita perlu menambahkan link menunya di sidebar.

1. Buka file resources/views/admin/layouts/sidebar.blade.php.
2. Cari kode untuk menu Dashboard yang sudah ada, lalu duplikat menu Dashboard tersebut.
   
   
    
3. Tambahkan heading "Datamaster" dan menu "Data Users" di bawahnya. Ubah keseluruhan kode <ul id="sidebarnav"> menjadi seperti ini:
    

   <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>
   
       <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>
   
   </ul>

   
    

Perbaikan Penting: Perhatikan kita menggunakan route('users.index') karena ini nama rute untuk halaman daftar user. Kita juga menggunakan Request::is('users*') (dengan tanda bintang *) agar menu tetap aktif meskipun kita berada di halaman tambah atau ubah user (misal: /users/create atau /users/1/edit).
 

Langkah 6: Uji Coba Halaman Users

1. Simpan semua file.
2. Refresh browser Anda.
3. Hasil: Anda akan melihat menu baru "Data Users" di sidebar. Klik menu tersebut. Halaman akan menampilkan sebuah tabel berisi data "Siswa Contoh" yang kita buat di pada bagian Seeder. Tombol "Ubah" dan "Hapus" juga sudah muncul.
   
   

Langkah 7: Mempercantik Tabel dengan DataTables

Tabel HTML standar terlihat sangat biasa. Kita akan mengubahnya menjadi tabel interaktif dengan fitur pencarian, sortir, dan paginasi menggunakan library JavaScript bernama DataTables.

1. Instalasi Aset DataTables:
   • Buka template utama kita di resources/views/admin/layouts/app.blade.php.
   • Tambahkan baris CSS DataTables ini di dalam tag <head>, di bawah CSS lainnya.
      

     <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.dataTables.css" />

     
      
   • Tambahkan baris JavaScript DataTables ini di bagian paling bawah, sebelum tag penutup </body>.
      

     <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>

     
      
2. Menerapkan DataTables pada Halaman Users:
   • Buka kembali halaman daftar user di resources/views/admin/users/index.blade.php.
   • Cari tag <table> dan tambahkan id="datatable" padanya.
      

     <table id="datatable" class="table table-striped">
     

     
      

   • Scroll ke bagian paling bawah file, di dalam @section('js'), tambahkan kode berikut untuk mengaktifkan DataTables pada tabel kita.
      

     @section('js')
         <script>
     
             $(document).ready( function () {
     
                 $('#datatable').DataTable();
     
             } );
     
         </script>
     
     @endsection

     
      

3. Verifikasi Hasil DataTables:
   • Simpan semua file dan refresh browser Anda pada halaman Data Users.
   • Hasil: Tabel Anda sekarang akan terlihat jauh lebih baik! Perhatikan, secara otomatis sudah ada fitur Pencarian (Search), Sortir (dengan mengklik judul kolom), dan Paginasi (Pagination) jika datanya banyak.
     
     

Langkah 8: Mengganti Peringatan (Alert) dengan SweetAlert

Peringatan confirm() bawaan JavaScript terlihat kuno. Kita akan menggantinya dengan SweetAlert yang lebih elegan, sekaligus menyiapkan sistem notifikasi untuk nanti.

1. Instalasi Aset SweetAlert:
   • Buka kembali template utama kita di resources/views/admin/layouts/app.blade.php.
   • Tambahkan baris JavaScript SweetAlert ini di bagian paling bawah, setelah script DataTables.
      

     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

     
      
2. Menyiapkan SweetAlert untuk Pesan Notifikasi:
   • Masih di app.blade.php, tepat di bawah script SweetAlert yang baru saja Anda tambahkan, sisipkan kode Blade ini.
      

     <script>
         @if (session('status'))
     
             swal({
     
                 title: '{{ session('title') }}',
     
                 text: '{{ session('message') }}',
     
                 icon: '{{ session('status') }}',
     
             });
     
         @endif
     
     </script>

     
      

• Penjelasan: Kode ini akan otomatis menampilkan notifikasi SweetAlert setiap kali ada flash message dari controller. Kita akan melihat hasilnya nanti saat kita berhasil menyimpan data.

3. Mengubah Konfirmasi Hapus ke SweetAlert:
   • Buka kembali halaman daftar user di resources/views/admin/users/index.blade.php.
   • Pertama, modifikasi form Hapus. Kita perlu memberikan ID unik pada setiap form dan mengubah tombolnya agar tidak langsung men-submit.
     • SEBELUM:

       PHP
       <form action="{{ route('users.destroy', $item->id) }}" method="POST" class="d-inline">
           @csrf
           @method('DELETE')
           <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda ingin menghapusnya ?')">Hapus</button>
       </form>
       

       
        
     • SESUDAH:

       <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>
       

       
        

   • Kedua, tambahkan fungsi JavaScript. Di bagian @section('js'), di bawah script DataTables, tambahkan fungsi confirmDelete ini.

     @section('js')
         <script>
             // Script untuk DataTables
             $(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
     

     
      
4. Verifikasi Konfirmasi Hapus:
   • Simpan file index.blade.php.
   • Refresh browser Anda pada halaman Data Users.
   • Sekarang, coba klik tombol Hapus pada salah satu data.
   • Hasil: Alih-alih kotak konfirmasi standar dari browser, Anda akan melihat dialog peringatan dari SweetAlert yang jauh lebih menarik dan informatif.
     
     
     

Langkah 9: Membuat Form Tambah User

Sekarang kita akan membuat fungsionalitas untuk menambah data user baru. Kita akan mulai dari menyiapkan controller, mendesain view (tampilan), hingga menulis logika untuk menyimpan data ke database.

1. Menyiapkan Logika di UserController (Fungsi create):
   • Kita tidak perlu membuat route baru, karena Route::resource sudah otomatis membuatkannya untuk kita (users.create).
   • Buka app/Http/Controllers/UserController.php.
     
     
      
   • Cari fungsi create() yang saat ini masih kosong, lalu isi dengan kode berikut:

     public function create()
     
     {
     
         // Menyiapkan array untuk dikirim ke view
     
         $data['title'] = $this->title;
     
         $data['menu'] = $this->menu;
     
     
     
         // Me-return view beserta data
     
         return view($this->directory . '.create', $data);
     
     }

     
      

2. Membangun Tampilan Form (create.blade.php):
   • Buka file resources/views/admin/users/create.blade.php yang masih kosong.
     
     
      
   • Isi terlebih dahulu dengan kerangka Blade dasar seperti ini:
      

     @extends('admin.layouts.app')
     @section('css')
     
     {{-- CSS Tambahan --}}
     
     @endsection
     
     
     
     @section('content')
     
     {{-- Konten Utama akan ditaruh di sini --}}
     
     @endsection
     
     
     
     @section('js')
     
     {{-- JS Tambahan --}}
     
     @endsection

     

• Sekarang, buka file template public/template-admin/src/html/ui-forms.html. Di dalam file ini, ada dua <div class="container-fluid">. Cari yang kedua, lalu salin elemen <div class="card"> pertama yang ada di dalamnya.
  
  
   
• Tempel (paste) kode tersebut di dalam @section('content') pada file create.blade.php. Kodenya akan terlihat sangat panjang, termasuk bagian "Disabled forms".
  
  
   
• Selanjutnya, kita bersihkan. Hapus bagian "Disabled forms" mulai dari <h5 class="card-title fw-semibold mb-4">Disabled forms</h5> hingga tag penutup <div class="card mb-0">.
  
  
  
   
• Terakhir, sesuaikan judul dan kosongkan form-nya. Ubah <h5>Forms</h5> dan hapus semua elemen di dalam <form>. Hasil akhir dari kerangka form Anda akan terlihat seperti ini:

  {{-- Di dalam @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">
  
                      {{-- Input form akan kita letakkan di sini --}}
  
                  </form>
  
              </div>
  
          </div>
  
      </div>
  
  </div>

  
   

3. Mengisi dan Menyesuaikan Form:
   • Sekarang, isi bagian dalam tag <form> dengan kode berikut. Kita akan menambahkan @csrf dan semua input yang dibutuhkan
     .

     <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>

     
      

Penjelasan Singkat Kode Form:

• @csrf: Perintah wajib dari Laravel untuk melindungi form dari serangan.
• class="@error('name') is-invalid @enderror": Jika ada error validasi untuk input name, maka tambahkan class is-invalid (membuat kotak input menjadi merah).
• value="{{ old('name') }}": Jika validasi gagal, isi kembali input ini dengan data lama yang sudah pernah diinput pengguna.
• @error('name') ... @enderror: Jika ada error validasi untuk input name, tampilkan pesan errornya.

Langkah 10: Menyiapkan Model dan Logika Penyimpanan

Sebelum menyimpan data, kita perlu melakukan dua hal: mengizinkan kolom role untuk diisi dan menulis logika penyimpanan di controller.

1. Update Model User:
   • Buka file app/Models/User.php.
   • Tambahkan 'role' ke dalam array $fillable.
     • SEBELUM: protected $fillable = ['name', 'email', 'password'];
       
        
     • SESUDAH: protected $fillable = ['name', 'email', 'password', 'role'];
       
        
2. Isi Logika di UserController (Fungsi store):
   • Buka kembali app/Http/Controllers/UserController.php.
   • Impor Hash di bagian atas file: use Illuminate\Support\Facades\Hash;
     
     
      
   • Cari fungsi store(Request $request) yang masih kosong, lalu isi dengan kode berikut:
      

     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!'
     
             ]);
     
         }
     
     }

     
      

Penjelasan Kode store():

• $request->validate([...]): Ini adalah fitur validasi Laravel yang sangat powerful. Satu baris ini akan memeriksa semua input sesuai aturan yang kita berikan. Jika ada yang gagal, Laravel akan otomatis mengembalikan pengguna ke form sebelumnya lengkap dengan pesan errornya.
• User::create($validatedData): Ini adalah keajaiban Eloquent ORM. Karena kita sudah mengatur $fillable di Model User, perintah ini secara otomatis akan membuat baris data baru di tabel users dengan mencocokkan key dari array $validatedData ke nama kolom di tabel. Sangat simpel dan efisien!

Langkah 11: Uji Coba Form Tambah Data

1. Buka browser, pergi ke halaman Data Users, lalu klik tombol "Tambah Data Users".
2. Anda akan melihat form yang baru saja kita buat.
   
   
    
3. Coba isi formnya, lalu klik Simpan.
   
   
    
4. Hasil: Anda akan diarahkan kembali ke halaman daftar user, sebuah notifikasi SweetAlert yang cantik akan muncul, dan data user baru Anda akan tampil di dalam tabel. Jika ada error validasi (misalnya password kurang dari 5 karakter), kotak input akan menjadi merah dan pesan error akan muncul.
   
   

Langkah 12: Menyiapkan Logika & Tampilan Form Ubah

Kita akan mulai dengan menyiapkan data di controller dan membuat tampilan untuk form ubah data.

1. Menyiapkan Logika di UserController (Fungsi edit):
   • Route untuk halaman edit (users.edit) sudah otomatis dibuat. Kita hanya perlu mengisi logikanya.
   • Buka app/Http/Controllers/UserController.php.
     
     
      
   • Cari fungsi edit(string $id) yang masih kosong, lalu isi dengan kode berikut:
      

     public function edit(string $id)
     {
     
         // Menyiapkan array untuk dikirim ke view
     
         $data['title'] = $this->title;
     
         $data['menu'] = $this->menu;
     
     
     
         // Mencari data user berdasarkan ID
     
         $data['user'] = User::findOrFail($id);
     
     
     
         // Me-return view beserta data
     
         return view($this->directory . '.edit', $data);
     
     }

     
      

Penjelasan Singkat: Metode findOrFail($id) sama seperti find($id), namun jika ID user tidak ditemukan di database, ia akan otomatis menampilkan halaman '404 Not Found'. Ini adalah praktik yang lebih baik dan lebih aman daripada membiarkan aplikasi error.

2. Mendesain Tampilan Form (edit.blade.php):
   • Cara tercepat adalah dengan menduplikasi form tambah. Salin semua kode dari resources/views/admin/users/create.blade.php dan tempel (paste) ke dalam file resources/views/admin/users/edit.blade.php.
     
     
     
      
   • Sekarang, mari kita sesuaikan beberapa bagian di file edit.blade.php:
     • Ubah Judul Card: Ganti Tambah Data {{ $title }} menjadi Ubah Data {{ $title }}
       
       
        
     • Sesuaikan Form Action: Arahkan form ke route users.update dan tambahkan metode PUT.
        

       <form action="{{ route('users.update', $user->id) }}" method="POST">
           @csrf
       
           @method('PUT')

       

• Sesuaikan Nilai Input: Kita perlu menampilkan data lama dari $user di setiap input.
  • Input Nama: Ubah atribut value-nya.
     

    <input type="text" ... value="{{ old('name', $user->name) }}">

    
     
  • Input Email: Ubah atribut value-nya.
     

    <input type="email" ... value="{{ old('email', $user->email) }}">
    

    

  • Input Password: Hapus atribut value dan tambahkan placeholder.
     

    <input type="password" ... placeholder="Kosongkan jika tidak ingin diubah">

    
     
  • Input Role: Tambahkan pengecekan untuk selected.
     

    <select ...>
        <option value="Siswa" {{ old('role', $user->role) == 'Siswa' ? 'selected' : '' }}>Siswa</option>
    
    </select>

    
     

• Kode Lengkap edit.blade.php: Agar lebih mudah, berikut adalah kode lengkap untuk file edit.blade.php setelah semua 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">Ubah Data {{ $title }}</h5>
  
          <div class="card">
  
              <div class="card-body">
  
                  <form action="{{ route('users.update', $user->id) }}" method="POST">
  
                      @csrf
  
                      @method('PUT')
  
                      {{-- 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', $user->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', $user->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="Kosongkan jika tidak ingin diubah">
  
                          @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', $user->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

  
  
  

Langkah 13: Menulis Logika Update di Controller

Sekarang kita tulis logika untuk memproses data yang dikirim dari form ubah.

1. Buka kembali app/Http/Controllers/UserController.php.
   
   
    
2. Cari fungsi update(Request $request, string $id) yang masih kosong, lalu isi dengan kode berikut:
    

   public function update(Request $request, string $id)
   {
   
       // 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!'
   
           ]);
   
       }
   
   }

   
   
   

Langkah 14: Uji Coba Fitur Ubah Data

1. Buka browser Anda dan pergi ke halaman Data Users.
   
   
    
2. Klik tombol "Ubah" berwarna kuning pada salah satu data.
3. Anda akan diarahkan ke form ubah data, dan semua input seharusnya sudah terisi dengan data user tersebut.
   
   
    
4. Coba ubah namanya, dan biarkan password kosong. Klik Simpan.
   
   
    
5. Hasil: Anda akan kembali ke halaman daftar user, notifikasi sukses akan muncul, dan Anda akan melihat nama user tersebut sudah berubah di tabel. Fitur ubah data Anda berhasil!
   
   
   

Langkah 15: Menulis Logika Hapus (Destroy) di Controller

Sekarang kita akan menulis logika untuk memproses permintaan hapus data yang dikirim dari tombol "Hapus" di halaman index.

1. Buka app/Http/Controllers/UserController.php.
   
   
    
2. Cari fungsi destroy(string $id) yang saat ini masih kosong, lalu isi dengan kode berikut:
    

   public function destroy(string $id)
   {
   
       // 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!'
   
           ]);
   
       }
   
   }

   
    

Penjelasan Singkat Kode destroy():

• User::findOrFail($id): Sama seperti sebelumnya, kita mencari data user yang akan dihapus. Jika tidak ada, Laravel akan menampilkan halaman 404.
• if ($user): Pengecekan ini sebenarnya adalah lapisan keamanan tambahan. Karena kita sudah menggunakan findOrFail, kita bisa yakin variabel $user pasti berisi data.
• $user->delete(): Ini adalah perintah Eloquent yang sangat sederhana untuk menghapus baris data yang sudah kita temukan dari tabel users.
• return redirect(): Setelah proses hapus selesai, kita kembalikan pengguna ke halaman daftar user (users.index) sambil membawa notifikasi sukses atau gagal yang akan ditampilkan oleh SweetAlert.

Langkah 16: 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 Users.
   
   
    
2. Pilih salah satu data yang ingin Anda hapus, lalu klik tombol "Hapus" berwarna merah.
3. Sebuah dialog konfirmasi dari SweetAlert akan muncul. Klik tombol "OK" (atau tombol konfirmasi berwarna merah).
   
   
    
4. Hasil: Anda akan tetap berada di halaman daftar user, 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 (Create, Read, Update, Delete) yang lengkap untuk halaman Users. Ini adalah salah satu keterampilan paling fundamental dan penting dalam pengembangan web.