🎯 Tujuan

Memberikan panduan langkah demi langkah dalam mengimplementasikan operasi CRUD menggunakan Laravel dengan pola arsitektur MVC.

⏰ Konteks

Panduan ini berguna bagi developer yang ingin mempelajari cara menggunakan Laravel untuk membuat, membaca, memperbarui, dan menghapus data (CRUD) menggunakan struktur MVC.

🪵 Hal yang Diperlukan

1. Laravel (versi terbaru)
2. Visual Studio Code
3. Composer (versi terbaru)
4. XAMPP atau Laragon untuk pengembangan lokal

📋 Langkah-Langkah

1. Setup Proyek

   • Buat proyek Laravel baru:

     composer create-project laravel/laravel nama_proyek
     

   • Konfigurasi database di .env:

     DB_CONNECTION=mysql
     DB_HOST=127.0.0.1
     DB_PORT=3306
     DB_DATABASE=nama_database
     DB_USERNAME=root
     DB_PASSWORD=
     

   • Jalankan server lokal dan database (melalui XAMPP/Laragon).

   • Jalankan migrasi awal:

     php artisan migrate
     

2. Membuat Model dan Migrasi

   • Buat Model dan Migration:

     php artisan make:model Student -m
     

   • Definisikan struktur tabel di file migrasi:

     Schema::create('students', function (Blueprint $table) {
         $table->id();
         $table->string('name');
         $table->integer('age');
         $table->string('class');
         $table->text('address');
         $table->timestamps();
     });
     

   • Atur model di app/Models/Student.php:

     protected $fillable = ['name', 'age', 'class', 'address'];
     

   • Jalankan migrasi:

     php artisan migrate
     

3. Implementasi Controller

   • Buat Controller:

     php artisan make:controller StudentController
     

   • Tambahkan metode CRUD di app/Http/Controllers/StudentController.php:

     // Menampilkan semua siswa
     public function index() {
         $students = Student::all();
         return view('students.index', compact('students'));
     }
     
     // Menambah siswa baru
     public function store(Request $request) {
         $request->validate([
             'name' => 'required|string|max:255',
             'age' => 'required|integer|min:1',
             'class' => 'required|string|max:10',
             'address' => 'required|string|max:255',
         ]);
         Student::create($request->all());
         return redirect()->route('students.index')->with('success', 'Siswa berhasil ditambahkan.');
     }
     
     // Mengedit data siswa
     public function edit(Student $student) {
         return view('students.edit', compact('student'));
     }
     
     // Memperbarui data siswa
     public function update(Request $request, Student $student) {
         $request->validate([
             'name' => 'required|string|max:255',
             'age' => 'required|integer|min:1',
             'class' => 'required|string|max:10',
             'address' => 'required|string|max:255',
         ]);
         $student->update($request->all());
         return redirect()->route('students.index')->with('success', 'Data siswa berhasil diperbarui.');
     }
     
     // Menghapus siswa
     public function destroy(Student $student) {
         $student->delete();
         return redirect()->route('students.index')->with('success', 'Siswa berhasil dihapus.');
     }
     

4. Konfigurasi Route

   • Tambahkan rute di routes/web.php:

     use App\Http\Controllers\StudentController;
     
     Route::get('students', [StudentController::class, 'index'])->name('students.index');
     Route::post('students', [StudentController::class, 'store'])->name('students.store');
     Route::get('students/edit/{student}', [StudentController::class, 'edit'])->name('students.edit');
     Route::put('students/edit/{student}', [StudentController::class, 'update'])->name('students.update');
     Route::delete('students/{student}', [StudentController::class, 'destroy'])->name('students.destroy');
     

5. Pembuatan View

   • Buat file view:

     • resources/views/students/index.blade.php – Untuk daftar dan menambah siswa

       <!-- resources/views/students/index.blade.php -->
       
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta http-equiv="X-UA-Compatible" content="ie=edge">
           <link href="<https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>" rel="stylesheet">
           <title>Data Semua Student</title>
       </head>
       <body>
           <div class="container mx-auto">
       
               <h1 class="text-2xl font-bold mb-4">Daftar Siswa</h1>
               <table class="table-auto w-full">
                   <thead>
                       <tr>
                           <th class="px-4 py-2">Nama</th>
                           <th class="px-4 py-2">Age</th>
                           <th class="px-4 py-2">Class</th>
                           <th class="px-4 py-2">Address</th>
                           <th class="px-4 py-2">Action</th>
                       </tr>
                   </thead>
                   <tbody>
                       @foreach ($students as $student)
                           <tr>
                               <td class="border px-4 py-2">{{ $student->name }}</td>
                               <td class="border px-4 py-2">{{ $student->age }}</td>
                               <td class="border px-4 py-2">{{ $student->class }}</td>
                               <td class="border px-4 py-2">{{ $student->address }}</td>
                               <td class="border px-4 py-2">
                                   {{ $student->address }}
                               </td>
                               <td class="border px-4 py-2">
                                   <!-- Tombol edit -->
                                   <a href="{{ route('students.edit', $student->id) }}" class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-3 rounded ml-2">Edit</a>
       
                                   <!-- Tombol hapus -->
                                   <form action="{{ route('students.destroy', $student->id) }}" method="POST" class="inline-block">
                                       @csrf
                                       @method('DELETE')
                                       <button type="submit" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-3 rounded ml-2" onclick="return confirm('Apakah Anda yakin ingin menghapus siswa ini?')">Hapus</button>
                                   </form>
                               </td>
                           </tr>
                       @endforeach
                   </tbody>
               </table>
               <h1 class="text-2xl font-bold mb-4">Tambah Data Siswa</h1>
       
               <!-- Pesan validasi error -->
               @if ($errors->any())
                   <div class="bg-red-500 text-white p-4 rounded">
                       <ul>
                           @foreach ($errors->all() as $error)
                               <li>{{ $error }}</li>
                           @endforeach
                       </ul>
                   </div>
               @endif
       
               <!-- Form untuk menambahkan siswa baru -->
               <form action="{{ route('students.store') }}" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                   @csrf
                   <div class="mb-4">
                       <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nama Siswa:</label>
                       <input type="text" name="name" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('name') }}">
                   </div>
       
                   <div class="mb-4">
                       <label for="age" class="block text-gray-700 text-sm font-bold mb-2">Umur:</label>
                       <input type="number" name="age" id="age" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('age') }}">
                   </div>
       
                   <div class="mb-4">
                       <label for="class" class="block text-gray-700 text-sm font-bold mb-2">Kelas:</label>
                       <input type="text" name="class" id="class" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('class') }}">
                   </div>
       
                   <div class="mb-4">
                       <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Alamat:</label>
                       <textarea name="address" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ old('address') }}</textarea>
                   </div>
       
                   <div class="flex items-center justify-between">
                       <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                           Simpan
                       </button>
                   </div>
               </form>
           </div>
       </body>
       </html
       

     • resources/views/students/edit.blade.php – Untuk mengedit siswa

       <!-- resources/views/students/edit.blade.php -->
       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta http-equiv="X-UA-Compatible" content="ie=edge">
           <title>Edit Data student</title>
       </head>
       <body>
           <div class="container mx-auto">
               <h1 class="text-2xl font-bold mb-4">Edit Data Siswa</h1>
           
               <!-- Pesan validasi error -->
               @if ($errors->any())
                   <div class="bg-red-500 text-white p-4 rounded">
                       <ul>
                           @foreach ($errors->all() as $error)
                               <li>{{ $error }}</li>
                           @endforeach
                       </ul>
                   </div>
               @endif
           
               <!-- Form untuk mengupdate data siswa -->
               <form action="{{ route('students.update', $student->id) }}" method="POST" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                   @csrf
                   @method('PUT')
           
                   <div class="mb-4">
                       <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Nama Siswa:</label>
                       <input type="text" name="name" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('name', $student->name) }}">
                   </div>
           
                   <div class="mb-4">
                       <label for="age" class="block text-gray-700 text-sm font-bold mb-2">Umur:</label>
                       <input type="number" name="age" id="age" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('age', $student->age) }}">
                   </div>
           
                   <div class="mb-4">
                       <label for="class" class="block text-gray-700 text-sm font-bold mb-2">Kelas:</label>
                       <input type="text" name="class" id="class" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" value="{{ old('class', $student->class) }}">
                   </div>
           
                   <div class="mb-4">
                       <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Alamat:</label>
                       <textarea name="address" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">{{ old('address', $student->address) }}</textarea>
                   </div>
           
                   <div class="flex items-center justify-between">
                       <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
                           Update
                       </button>
                   </div>
               </form>
           </div>
       </body>
       </html
       

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda dapat mengimplementasikan operasi CRUD di Laravel menggunakan arsitektur MVC, mulai dari setup proyek, membuat model dan migrasi, hingga pembuatan controller dan view.

📋 Documentation