Cara Membuat Aplikasi To-Do List dengan Laravel (Part 1)

Laravel adalah framework PHP paling populer saat ini berkat sintaks yang elegan dan fitur yang lengkap. Pada seri tutorial ini kita akan membangun sebuah aplikasi To-Do List (manajemen tugas) dari nol menggunakan Laravel — lengkap dengan CRUD, pencarian, filter, pagination, hingga autentikasi login.

Di Part 1 ini kita fokus menyiapkan proyek: instalasi, konfigurasi database, membuat struktur tabel lewat migration, model, controller, hingga menampilkan daftar tugas dengan Blade.

Memahami Pola MVC di Laravel

Laravel menerapkan pola MVC (Model-View-Controller):

• Model — representasi tabel database (Eloquent ORM).
• View — tampilan yang ditulis dengan template engine Blade.
• Controller — pengatur alur yang menerima request, memanggil model, lalu mengirim data ke view.

Diagram di atas menggambarkan bagaimana sebuah permintaan mengalir dari browser hingga menjadi halaman yang tampil.

Menyiapkan Kebutuhan

• PHP 8.1+ dengan ekstensi yang dibutuhkan Laravel.
• Composer untuk mengelola dependensi.
• MySQL/MariaDB sebagai database.

Membuat Proyek Laravel

Buat proyek baru bernama todolist lewat Composer:

composer create-project laravel/laravel todolist
cd todolist

Jalankan server pengembangan untuk memastikan instalasi berhasil:

php artisan serve

Buka http://localhost:8000 — bila muncul halaman selamat datang Laravel, instalasi berhasil.

Mengatur Koneksi Database

Buat database kosong bernama todolist, lalu sesuaikan file .env:

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

Membuat Migration Tabel Tugas

Migration mendefinisikan struktur tabel lewat kode. Kita buat sekaligus model dan controller-nya dengan satu perintah:

php artisan make:model Tugas -mc

Opsi -mc otomatis membuat migration dan controller. Buka file migration di database/migrations/ dan isi metode up():

public function up(): void
{
    Schema::create('tugas', function (Blueprint $table) {
        $table->id();
        $table->string('judul');
        $table->text('deskripsi')->nullable();
        $table->enum('prioritas', ['rendah', 'sedang', 'tinggi'])->default('sedang');
        $table->enum('status', ['belum', 'proses', 'selesai'])->default('belum');
        $table->date('deadline')->nullable();
        $table->timestamps();
    });
}

Menjalankan Migration

php artisan migrate

Laravel akan membuat tabel tugas beserta tabel bawaan lainnya di database.

Mengisi Data Awal dengan Seeder

Agar ada data untuk diuji, buat seeder:

php artisan make:seeder TugasSeeder

Isi metode run() pada database/seeders/TugasSeeder.php:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\Tugas;

class TugasSeeder extends Seeder
{
    public function run(): void
    {
        Tugas::insert([
            ['judul' => 'Menyusun laporan bulanan', 'prioritas' => 'tinggi', 'status' => 'proses', 'deadline' => '2026-07-10'],
            ['judul' => 'Balas email klien',        'prioritas' => 'sedang', 'status' => 'belum',  'deadline' => '2026-07-08'],
            ['judul' => 'Backup database',          'prioritas' => 'tinggi', 'status' => 'selesai','deadline' => '2026-07-05'],
        ]);
    }
}

Jalankan seeder:

php artisan db:seed --class=TugasSeeder

Menyiapkan Model Tugas

Buka app/Models/Tugas.php. Karena nama tabel jamak tidak beraturan, kita tentukan eksplisit, dan izinkan kolom diisi massal:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Tugas extends Model
{
    protected $table = 'tugas';

    protected $fillable = [
        'judul', 'deskripsi', 'prioritas', 'status', 'deadline',
    ];
}

Properti $fillable menentukan kolom yang boleh diisi lewat mass assignment — pengaman penting Laravel.

Membuat Controller dan Route

Buka app/Http/Controllers/TugasController.php dan isi metode index() untuk menampilkan daftar tugas:

<?php

namespace App\Http\Controllers;

use App\Models\Tugas;

class TugasController extends Controller
{
    public function index()
    {
        $tugas = Tugas::latest()->get();

        return view('tugas.index', compact('tugas'));
    }
}

Daftarkan route di routes/web.php. Kita pakai resource agar sekaligus menyiapkan seluruh route CRUD untuk Part berikutnya:

use App\Http\Controllers\TugasController;

Route::resource('tugas', TugasController::class);

Membuat Layout Blade

Buat layout induk resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>@yield('judul', 'To-Do List')</title>
    <link rel="stylesheet" href="{{ asset('css/gaya.css') }}">
</head>
<body>
<header>
    <div class="logo">To-Do List</div>
    <nav>
        <a href="{{ route('tugas.index') }}">Daftar Tugas</a>
    </nav>
</header>
<main>
    @yield('konten')
</main>
<footer>© 2026 To-Do List Laravel</footer>
</body>
</html>

Menampilkan Daftar Tugas

Buat view resources/views/tugas/index.blade.php:

@extends('layouts.app')

@section('konten')
    <h2>Daftar Tugas</h2>

    <table border="1" cellpadding="8" cellspacing="0">
        <thead>
            <tr><th>Judul</th><th>Prioritas</th><th>Status</th><th>Deadline</th></tr>
        </thead>
        <tbody>
            @foreach ($tugas as $t)
                <tr>
                    <td>{{ $t->judul }}</td>
                    <td>{{ ucfirst($t->prioritas) }}</td>
                    <td>{{ ucfirst($t->status) }}</td>
                    <td>{{ $t->deadline }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

Buka http://localhost:8000/tugas dan daftar tugas akan tampil. Sintaks {{ }} pada Blade otomatis meng-escape output demi keamanan, sedangkan @foreach adalah cara Blade melakukan perulangan.

Penutup

Fondasi aplikasi To-Do List Anda sudah berdiri — instalasi, migration, seeder, model, controller, dan menampilkan data lewat Blade. Anda kini paham bagaimana komponen Laravel bekerja sama dalam pola MVC.

Di Part 2, kita akan membuat aplikasi ini benar-benar hidup dengan operasi CRUD: menambah tugas baru, mengedit, dan menghapus, lengkap dengan validasi. Sampai jumpa!

Referensi: untuk pendalaman lebih lanjut, kunjungi dokumentasi resmi Laravel.

Baca Juga

• Cara Membuat CRUD To-Do List dengan Laravel (Part 2)
• Pencarian, Filter, dan Pagination To-Do List Laravel (Part 3)