Aplikasi Laravel Pertama Anda: Membangun Daftar Tugas (Todo List) Sederhana untuk Pemula

Selamat datang di dunia pengembangan web! Jika Anda seorang pemula yang tertarik untuk membangun aplikasi web yang kuat dan efisien, Anda datang ke tempat yang tepat. Laravel, salah satu framework PHP paling populer, dikenal karena sintaksnya yang ekspresif, fitur-fitur yang kaya, dan kemudahan penggunaannya.

Dalam tutorial komprehensif ini, Anda akan dipandu langkah demi langkah untuk membangun aplikasi Laravel pertama Anda: sebuah "Daftar Tugas" (Todo List) sederhana. Anda tidak hanya akan belajar cara menyiapkan proyek Laravel, tetapi juga memahami konsep-konsep inti seperti routing, controller, view (Blade), model, dan Eloquent ORM, serta menerapkan fungsionalitas CRUD (Create, Read, Update, Delete) yang esensial.

Ini adalah Laravel beginner tutorial yang dirancang untuk mereka yang benar-benar baru di Laravel. Mari kita mulai perjalanan coding Anda!

Apa yang Akan Kita Bangun?

Kita akan membangun aplikasi daftar tugas sederhana yang memungkinkan pengguna untuk:

  • Melihat semua tugas yang ada.
  • Menambahkan tugas baru.
  • Mengedit tugas yang sudah ada.
  • Menghapus tugas.

Ini adalah fondasi yang sangat baik untuk memahami bagaimana komponen-komponen Laravel bekerja sama.

Prasyarat

Sebelum kita mulai, pastikan Anda memiliki perangkat lunak berikut yang terinstal di komputer Anda:

  1. PHP (versi 8.1 atau lebih tinggi): Laravel dibangun di atas PHP.
  2. Composer: Ini adalah manajer dependensi untuk PHP, digunakan untuk menginstal Laravel dan paket-paket lainnya.
  3. Node.js & npm (atau Yarn): Digunakan untuk mengelola aset frontend seperti CSS dan JavaScript (khususnya untuk Vite yang digunakan Laravel).
  4. Text Editor: Seperti VS Code, Sublime Text, atau PHPStorm.
  5. Database Server: MySQL, PostgreSQL, SQLite, atau SQL Server. Untuk tutorial ini, kita akan menggunakan MySQL.
  6. Web Server (opsional): XAMPP, MAMP, Laragon (untuk Windows), Valet (untuk macOS), atau bahkan server pengembangan bawaan PHP yang bisa diakses via php artisan serve.

Jika Anda belum menginstal salah satu dari ini, silakan instal terlebih dahulu. XAMPP atau Laragon adalah pilihan yang bagus untuk pemula karena menyediakan PHP, MySQL, dan Apache/Nginx dalam satu paket.

Langkah 1: Instalasi Proyek Laravel

Pertama, mari buat proyek Laravel baru. Buka terminal atau Command Prompt Anda dan jalankan perintah berikut:

composer create-project laravel/laravel my-todo-app
  • composer create-project: Perintah Composer untuk membuat proyek baru dari boilerplate.
  • laravel/laravel: Nama paket yang ingin kita gunakan (boilerplate Laravel).
  • my-todo-app: Nama folder proyek Anda. Anda bisa menggantinya dengan nama lain yang Anda suka.

Proses ini mungkin memakan waktu beberapa menit karena Composer akan mengunduh semua dependensi yang diperlukan.

Setelah instalasi selesai, navigasikan ke direktori proyek Anda:

cd my-todo-app

Sekarang, Anda bisa menjalankan server pengembangan bawaan Laravel untuk memastikan semuanya terinstal dengan benar:

php artisan serve

Anda akan melihat output seperti Starting Laravel development server: http://127.0.0.1:8000. Buka URL tersebut di browser Anda, dan Anda akan melihat halaman selamat datang Laravel. Ini berarti instalasi Anda berhasil!

Langkah 2: Konfigurasi Database

Setiap aplikasi web membutuhkan database untuk menyimpan data. Laravel bekerja dengan baik dengan berbagai database relasional. Untuk tutorial ini, kita akan menggunakan MySQL.

  1. Buat Database:
    Buka tools manajemen database Anda (misalnya phpMyAdmin jika Anda menggunakan XAMPP/Laragon, atau MySQL Workbench). Buat database baru dengan nama laravel_todo_app.

  2. Konfigurasi .env File:
    Di root proyek Laravel Anda, ada file .env. File ini berisi variabel konfigurasi lingkungan Anda. Buka file .env dan ubah bagian database agar sesuai dengan pengaturan Anda.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_todo_app
DB_USERNAME=root
DB_PASSWORD=
  • DB_DATABASE: Ganti dengan nama database yang baru saja Anda buat (laravel_todo_app).
  • DB_USERNAME: Biasanya root untuk instalasi lokal.
  • DB_PASSWORD: Kosongkan jika Anda tidak mengatur kata sandi untuk user root MySQL Anda (umumnya pada instalasi default XAMPP/Laragon). Jika Anda punya password, masukkan di sini.

Pastikan Anda menyimpan perubahan pada file .env.

Langkah 3: Membuat Migrasi dan Model

Di Laravel, kita menggunakan "migrasi" untuk mendefinisikan skema database kita secara terprogram. Ini memungkinkan kita untuk melacak perubahan skema database seiring waktu dan membuatnya mudah dibagikan dengan anggota tim. "Model" adalah representasi dari tabel database Anda, yang memungkinkan kita berinteraksi dengan data.

Kita akan membuat model Todo dan migrasinya sekaligus:

php artisan make:model Todo -m
  • php artisan make:model Todo: Membuat file model app/Models/Todo.php.
  • -m: Opsi ini memberitahu Artisan untuk juga membuat file migrasi yang sesuai.

Anda akan melihat dua file baru:

  • app/Models/Todo.php
  • database/migrations/_create_todos_table.php

Buka file migrasi (database/migrations/_create_todos_table.php). Kita akan menambahkan kolom task (untuk nama tugas) dan is_completed (untuk menandai apakah tugas sudah selesai) ke tabel todos.

$table->string('task'); // Kolom untuk nama tugas
$table->boolean('is_completed')->default(false); // Kolom untuk status, default false
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('todos');
}
};
  • $table->string('task');: Membuat kolom string untuk menyimpan teks tugas.
  • $table->boolean('is_completed')->default(false);: Membuat kolom boolean yang akan menyimpan true atau false, dengan nilai default false.
  • $table->timestamps();: Ini adalah Laravel magic! Secara otomatis akan membuat kolom created_at dan updated_at yang akan diisi secara otomatis oleh Laravel saat record dibuat atau diperbarui.

Sekarang, jalankan migrasi untuk membuat tabel todos di database Anda:

php artisan migrate

Anda akan melihat output yang menunjukkan bahwa migrasi telah berhasil dijalankan. Periksa database Anda, dan Anda akan melihat tabel todos telah dibuat dengan kolom yang kita definisikan.

Selanjutnya, buka file app/Models/Todo.php. Kita perlu memberi tahu model Laravel kolom mana yang aman untuk diisi secara massal (mass assignable).

});
  • use AppHttpControllersTodoController;: Mengimpor controller kita agar bisa digunakan.
  • Route::resource('todos', TodoController::class);: Ini adalah fitur Laravel yang sangat praktis. Ia secara otomatis mendefinisikan beberapa rute RESTful standar untuk sumber daya todos yang dipetakan ke metode yang sesuai di TodoController:
  • GET /todos -> index
  • GET /todos/create -> create
  • POST /todos -> store
  • GET /todos/{todo} -> show (tidak akan kita gunakan secara eksplisit, tapi ada)
  • GET /todos/{todo}/edit -> edit
  • PUT/PATCH /todos/{todo} -> update
  • DELETE /todos/{todo} -> destroy
  • Route::get('/', function () { return redirect()->route('todos.index'); });: Ini hanya untuk kenyamanan, agar ketika kita mengakses /, kita langsung diarahkan ke daftar todos.

Anda bisa melihat daftar lengkap rute dengan menjalankan perintah ini di terminal:

php artisan route:list

Langkah 6: Membuat Tampilan (Views) dengan Blade

Laravel menggunakan Blade sebagai templating engine-nya. Blade memungkinkan Anda menulis kode PHP murni dalam tampilan Anda dan menyediakan pintasan nyaman untuk tugas-tugas umum seperti menampilkan data, perulangan, dan kondisi.

Pertama, buat folder todos di dalam resources/views/. Di dalam folder todos, kita akan membuat tiga file:

  • resources/views/todos/index.blade.php: Untuk menampilkan daftar tugas.
  • resources/views/todos/create.blade.php: Untuk formulir penambahan tugas baru.
  • resources/views/todos/edit.blade.php: Untuk formulir pengeditan tugas.

Kita juga akan membuat layout dasar di resources/views/layouts/app.blade.php agar kita tidak perlu mengulang kode HTML dasar di setiap tampilan.

resources/views/layouts/app.blade.php


@vite('resources/css/app.css')
@yield('content')
@vite('resources/js/app.js')
  • @vite('resources/css/app.css'): Ini adalah direktif Vite yang akan memuat CSS kita. Kita akan menyiapkan Vite di Langkah 8.
  • @yield('content'): Ini adalah placeholder di mana konten spesifik dari setiap tampilan akan disuntikkan.

resources/views/todos/index.blade.php

@extends('layouts.app')
@section('content')
Daftar Tugas Anda
+ Tambah Tugas Baru
@if ($todos->isEmpty())
Belum ada tugas yang ditambahkan.
@else
@foreach ($todos as $todo)
{{ $todo->task }}
Edit
@csrf
@method('DELETE')
Hapus
@endforeach
@endif
@endsection
  • @extends('layouts.app'): Ini memberitahu Blade untuk menggunakan layout app.blade.php.
  • @section('content'): Semua kode di antara ini dan @endsection akan ditempatkan di @yield('content') di layout.
  • {{ $todo->task }}: Sintaks Blade untuk menampilkan data. Ini mencegah serangan XSS.
  • @foreach: Perulangan Blade untuk mengulang setiap todo dalam koleksi $todos.
  • @if ($todos->isEmpty()): Kondisi Blade.
  • @csrf: Direktif Blade yang menghasilkan token CSRF tersembunyi. Ini penting untuk keamanan formulir.
  • @method('DELETE'): Direktif Blade untuk memberitahu Laravel bahwa permintaan adalah DELETE (karena HTML standar hanya mendukung GET dan POST).

resources/views/todos/create.blade.php

@extends('layouts.app')
@section('content')
Tambah Tugas Baru
@csrf
Nama Tugas:
@error('task')
{{ $message }}
@enderror
Sudah Selesai?
Simpan Tugas
Batal
@endsection
  • {{ old('task') }}: Jika formulir dikirim dan ada kesalahan validasi, ini akan mengisi kembali input dengan nilai yang terakhir dimasukkan.
  • @error('task'): Direktif Blade untuk menampilkan pesan error validasi spesifik untuk input task.

resources/views/todos/edit.blade.php

@extends('layouts.app')
@section('content')
Edit Tugas
@csrf
@method('PUT') {{-- Penting untuk metode UPDATE --}}
Nama Tugas:
@error('task')
{{ $message }}
@enderror
is_completed ? 'checked' : '' }}>
Sudah Selesai?
Perbarui Tugas
Batal
@endsection
  • @method('PUT'): Penting! Karena HTML hanya mendukung metode GET dan POST, kita menggunakan direktif Blade ini untuk mensimulasikan permintaan PUT ke rute update.
  • {{ old('task', $todo->task) }}: Ini akan mengisi input dengan nilai task dari objek $todo, tetapi jika ada error validasi, ia akan menggunakan nilai old('task') yang terakhir diisi.
  • {{ $todo->is_completed ? 'checked' : '' }}: Logika untuk mencentang checkbox jika tugas sudah selesai.

Langkah 7: Implementasi Logika CRUD di Controller

Sekarang, kita akan mengisi metode-metode di app/Http/Controllers/TodoController.php untuk mengimplementasikan fungsionalitas CRUD.

// Mengirimkan data tugas ke view 'todos.index'
return view('todos.index', compact('todos'));
}
/**
* Menampilkan formulir untuk membuat tugas baru. (CREATE - Form)
*/
public function create()
{
// Menampilkan view untuk form penambahan tugas
return view('todos.create');
}
/**
* Menyimpan tugas baru ke database. (CREATE - Store)
*/
public function store(Request $request)
{
// Validasi input dari form
$request->validate([
'task' => 'required|string|max:255', // Kolom 'task' wajib diisi, berupa string, maks 255 karakter
'is_completed' => 'boolean', // Kolom 'is_completed' harus berupa boolean
]);
// Membuat instance Todo baru dan mengisi propertinya
Todo::create([
'task' => $request->task,
'is_completed' => $request->has('is_completed') ? true : false, // Cek apakah checkbox dicentang
]);
// Redirect kembali ke halaman daftar tugas dengan pesan sukses
return redirect()->route('todos.index')->with('success', 'Tugas berhasil ditambahkan!');
}
/**
* Menampilkan detail tugas tertentu. (Tidak digunakan secara eksplisit, tapi ada)
*/
public function show(Todo $todo)
{
// Biasanya untuk menampilkan satu detail record, tapi kita tidak akan pakai di tutorial ini.
// return view('todos.show', compact('todo'));
}
/**
* Menampilkan formulir untuk mengedit tugas tertentu. (UPDATE - Form)
*/
public function edit(Todo $todo)
{
// Mengirimkan objek Todo yang akan diedit ke view 'todos.edit'
return view('todos.edit', compact('todo'));
}
/**
* Memperbarui tugas tertentu di database. (UPDATE - Store)
*/
public function update(Request $request, Todo $todo)
{
// Validasi input dari form
$request->validate([
'task' => 'required|string|max:255',
'is_completed' => 'boolean',
]);
// Memperbarui properti tugas
$todo->update([
'task' => $request->task,
'is_completed' => $request->has('is_completed') ? true : false,
]);
// Redirect kembali ke halaman daftar tugas dengan pesan sukses
return redirect()->route('todos.index')->with('success', 'Tugas berhasil diperbarui!');
}
/**
* Menghapus tugas tertentu dari database. (DELETE)
*/
public function destroy(Todo $todo)
{
// Menghapus tugas dari database
$todo->delete();
// Redirect kembali ke halaman daftar tugas dengan pesan sukses
return redirect()->route('todos.index')->with('success', 'Tugas berhasil dihapus!');
}
}
  • Dependency Injection: Perhatikan Todo $todo di metode show, edit, update, dan destroy. Laravel secara otomatis akan menemukan instance Todo yang cocok berdasarkan ID di URL. Ini disebut "Route Model Binding" dan sangat mempermudah pengambilan data.
  • Eloquent ORM: Todo::latest()->get() dan $todo->update() adalah contoh penggunaan Eloquent. Ini adalah ORM (Object-Relational Mapper) yang sangat kuat di Laravel yang memungkinkan Anda berinteraksi dengan database menggunakan sintaks PHP yang elegan.
  • Validasi: $request->validate() adalah cara mudah Laravel untuk memvalidasi data form yang masuk. Jika validasi gagal, Laravel secara otomatis akan mengarahkan kembali pengguna ke form dengan pesan error dan input yang diisi sebelumnya.
  • $request->has('is_completed') ? true : false: Ini penting karena jika checkbox tidak dicentang, ia tidak akan dikirimkan dalam request, jadi kita perlu menanganinya secara eksplisit.
  • with('success', 'Pesan'): Ini adalah cara untuk menyimpan pesan sementara (flash message) ke sesi yang dapat Anda tampilkan di view. Kita tidak menampilkannya di view kita saat ini, tetapi ini adalah praktik yang baik.

Langkah 8: Mengintegrasikan Aset Frontend (Tailwind CSS dengan Vite)

Laravel 10+ menggunakan Vite untuk kompilasi aset frontend. Kita akan menggunakan Tailwind CSS untuk styling agar aplikasi kita terlihat sedikit lebih baik tanpa harus menulis banyak CSS.

  1. Instal Tailwind CSS:

Pastikan Anda berada di direktori proyek my-todo-app di terminal Anda.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Ini akan menginstal dependensi dan membuat dua file konfigurasi: tailwind.config.js dan postcss.config.js.

  1. Konfigurasi Tailwind:
    Buka tailwind.config.js dan konfigurasikan content untuk memindai file Blade Anda:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/**/*.vue",
],
theme: {
extend: {},
},
plugins: [],
}
  1. Buat File CSS Utama:
    Buat file baru di resources/css/app.css dan tambahkan direktif Tailwind:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Jalankan Vite:
    Sekarang, Anda perlu menjalankan Vite untuk mengkompilasi aset Anda. Biarkan perintah ini berjalan di terminal terpisah selama Anda mengembangkan:
npm run dev

Jika Anda ingin mengkompilasi untuk produksi (saat deployment), gunakan npm run build.

Pastikan server Laravel (php artisan serve) juga berjalan di terminal lain.

Langkah 9: Menguji Aplikasi Anda

Sekarang saatnya melihat hasil kerja keras Anda!

  1. Pastikan php artisan serve berjalan.
  2. Pastikan npm run dev berjalan.
  3. Buka browser Anda dan navigasikan ke http://127.0.0.1:8000/ (atau URL yang diberikan oleh php artisan serve).

Anda akan diarahkan ke halaman daftar tugas.

  • Tambahkan Tugas: Klik "Tambah Tugas Baru", isi formulir, dan klik "Simpan Tugas". Tugas Anda akan muncul di daftar.
  • Edit Tugas: Klik "Edit" pada tugas. Ubah nama tugas atau centang/lepas centang "Sudah Selesai?", lalu klik "Perbarui Tugas".
  • Hapus Tugas: Klik "Hapus" pada tugas. Konfirmasi penghapusan. Tugas akan hilang dari daftar.

Selamat! Anda telah berhasil membangun aplikasi Todo List sederhana dengan fungsionalitas CRUD lengkap menggunakan Laravel!

Langkah Selanjutnya

Ini hanyalah permulaan. Laravel adalah framework yang luas dan kuat. Berikut beberapa ide untuk melanjutkan pembelajaran Anda:

  • Autentikasi: Tambahkan sistem login dan registrasi agar setiap pengguna memiliki daftar tugasnya sendiri. Laravel menyediakan scaffold autentikasi bawaan yang mudah digunakan.
  • Pemberitahuan (Notifications): Tambahkan notifikasi seperti "Tugas berhasil ditambahkan!" yang akan hilang setelah beberapa detik.
  • Validasi yang Lebih Canggih: Eksplorasi aturan validasi Laravel yang lebih kompleks.
  • Database Seeding: Buat data dummy untuk database Anda menggunakan seeder.
  • Testing: Pelajari cara menulis tes otomatis untuk aplikasi Anda.
  • Deployment: Pelajari cara meng-deploy aplikasi Laravel Anda ke server produksi.
  • API: Ubah aplikasi Anda menjadi API RESTful dan bangun frontend terpisah menggunakan JavaScript framework seperti Vue.js atau React.
  • Middleware: Pelajari cara menggunakan middleware untuk memfilter permintaan HTTP.

Kesimpulan

Anda baru saja menyelesaikan perjalanan penting dalam memahami pengembangan web dengan Laravel. Anda telah belajar cara menginstal proyek, mengelola database dengan migrasi dan model Eloquent, mengimplementasikan logika bisnis dengan controller, dan menampilkan data dengan view Blade. Ini adalah fondasi yang sangat kuat untuk membangun aplikasi web yang lebih kompleks dan dinamis.

Teruslah bereksperimen, bangun proyek-proyek kecil, dan jangan takut untuk menjelajahi dokumentasi Laravel yang sangat baik. Dunia pengembangan web menanti Anda! Selamat coding!