Tutorial CRUD Laravel 13 dan MySQL: Studi Kasus Todo App Sederhana

Memahami konsep CRUD (Create, Read, Update, Delete) adalah fondasi utama sebelum kamu membangun aplikasi web yang lebih kompleks. Di tutorial kali ini, kita akan praktik membuat aplikasi Todo App sederhana menggunakan Laravel 13 dan database MySQL.

Sebelum melangkah lebih jauh, pastikan kamu sudah berhasil melakukan instalasi project awal. Jika belum, kamu bisa ikuti panduan Cara Install Laravel 13 di Windows, Mac, dan Linux terlebih dahulu.

Selain itu, jika kamu penasaran dengan performa dan fitur-fitur baru yang kita gunakan di versi ini, silakan baca ulasan Laravel 13: Apa yang Baru & Panduan Lengkap Fitur Utama.

Prasyarat & Alur Kerja

Pastikan environment kamu sudah siap:

1. Local Server & MySQL sudah berjalan (Laragon / Herd / XAMPP).

2. Database MySQL kosong sudah dibuat (misal: db_laravel13_todo).

3. Project Laravel 13 sudah terinstall.

┌─────────────────────────────────────────────────────────────┐
│                    ALUR PENGEMBANGAN CRUD                   │
├─────────────────────────────────────────────────────────────┤
│ 1. Setup Database (.env)                                    │
│ 2. Buat Migration & Model Task                              │
│ 3. Buat Controller & Method CRUD                            │
│ 4. Atur Route Application                                   │
│ 5. Buat Tampilan (Blade View)                               │
└─────────────────────────────────────────────────────────────┘

Langkah 1: Konfigurasi Database di .env

Buka file .env di root project kamu, lalu sesuaikan konfigurasi database MySQL kamu:

Cuplikan kode

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

Langkah 2: Buat Model & Migration Task

Kita butuh satu tabel bernama tasks untuk menyimpan data Todo. Jalankan perintah Artisan berikut di terminal untuk membuat Model sekaligus file Migration-nya:

Bash

php artisan make:model Task -m

Buka file migration di folder database/migrations/xxxx_xx_xx_xxxxxx_create_tasks_table.php, lalu lengkapi skema tabelnya seperti ini:

PHP

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->boolean('is_completed')->default(false);
            $table->timestamps();
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('tasks');
    }
};

Selanjutnya, buka file Model app/Models/Task.php dan tambahkan properti $fillable agar kolom bisa diisi secara mass assignment:

PHP

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'is_completed',
    ];
}

Jalankan migrasi database dengan perintah:

Bash

php artisan migrate

Langkah 3: Buat Controller & Logika CRUD

Sekarang buat controller untuk menangani alur logika data Todo App:

Bash

php artisan make:controller TaskController

Buka file app/Http/Controllers/TaskController.php dan isi dengan kode berikut:

PHP

<?php

namespace App\Http/Controllers;

use App\Models\Task;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    // READ: Menampilkan daftar tugas
    public function index()
    {
        $tasks = Task::latest()->get();
        return view('tasks.index', compact('tasks'));
    }

    // CREATE: Menyimpan tugas baru
    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|max:255',
        ]);

        Task::create([
            'title' => $request->title,
        ]);

        return redirect()->back()->with('success', 'Tugas berhasil ditambahkan!');
    }

    // UPDATE: Mengubah status selesai / belum
    public function update(Task $task)
    {
        $task->update([
            'is_completed' => !$task->is_completed,
        ]);

        return redirect()->back()->with('success', 'Status tugas berhasil diperbarui!');
    }

    // DELETE: Menghapus tugas
    public function destroy(Task $task)
    {
        $task->delete();

        return redirect()->back()->with('success', 'Tugas berhasil dihapus!');
    }
}

Langkah 4: Registrasi Routing Application

Buka file routes/web.php dan daftarkan route untuk mengarahkan request user ke TaskController:

PHP

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TaskController;

Route::get('/', [TaskController::class, 'index'])->name('tasks.index');
Route::post('/tasks', [TaskController::class, 'store'])->name('tasks.store');
Route::patch('/tasks/{task}', [TaskController::class, 'update'])->name('tasks.update');
Route::delete('/tasks/{task}', [TaskController::class, 'destroy'])->name('tasks.destroy');

Langkah 5: Buat Tampilan (Blade View)

Buat folder baru bernama tasks di dalam resources/views/, lalu buat file index.blade.php (resources/views/tasks/index.blade.php).

Untuk mempercantik tampilan secara instan, kita gunakan CDN Tailwind CSS:

HTML

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 13 - Todo App CRUD</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen py-10">
    <div class="max-w-xl mx-auto bg-white p-6 rounded-lg shadow-md">
        <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">Laravel 13 Todo App</h1>

        <!-- Pesan Sukses -->
        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                {{ session('success') }}
            </div>
        @endif

        <!-- Form Tambah Task (CREATE) -->
        <form action="{{ route('tasks.store') }}" method="POST" class="flex gap-2 mb-6">
            @csrf
            <input type="text" name="title" placeholder="Ketik tugas baru..." required 
                class="flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-500">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                Tambah
            </button>
        </form>

        <!-- Daftar Task (READ) -->
        <ul class="divide-y divide-gray-200">
            @forelse ($tasks as $task)
                <li class="py-3 flex items-center justify-between">
                    <span class="{{ $task->is_completed ? 'line-through text-gray-400' : 'text-gray-800' }}">
                        {{ $task->title }}
                    </span>

                    <div class="flex items-center gap-2">
                        <!-- Toggle Status (UPDATE) -->
                        <form action="{{ route('tasks.update', $task->id) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="text-sm px-2 py-1 rounded {{ $task->is_completed ? 'bg-yellow-500 text-white' : 'bg-green-500 text-white' }}">
                                {{ $task->is_completed ? 'Batal' : 'Selesai' }}
                            </button>
                        </form>

                        <!-- Hapus Task (DELETE) -->
                        <form action="{{ route('tasks.destroy', $task->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-sm bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">
                                Hapus
                            </button>
                        </form>
                    </div>
                </li>
            @empty
                <li class="py-3 text-center text-gray-500">Belum ada tugas. Tambahkan sekarang!</li>
            @endforelse
        </ul>
    </div>
</body>
</html>

Uji Coba Aplikasi

Sekarang saatnya menjalankan aplikasi! Buka terminal dan jalankan server lokal:

Bash

php artisan serve

Buka browser dan akses http://localhost:8000. Coba lakukan pengujian fitur berikut:

1. Tambah Data: Masukkan judul tugas lalu klik tombol Tambah.

2. Ubah Status: Klik tombol Selesai untuk menandai tugas tercoret.

3. Hapus Data: Klik tombol Hapus untuk menghapus baris tugas dari database.

Ringkasan & Langkah Selanjutnya

Selamat! Kamu sudah berhasil membuat aplikasi CRUD Todo App menggunakan Laravel 13 dan MySQL. Melalui tutorial ini, kamu telah mempelajari penggunaan Migration, Model, Controller, Routing, hingga integrasi Blade View.

Langkah selanjutnya: Kamu bisa mencoba menambahkan fitur validasi yang lebih kompleks, pagination, atau menambahkan fitur authentication menggunakan starter kit Laravel. Selamat mencoba!