Halo para calon pengembang web! Apakah Anda baru mengenal dunia pengembangan web dan ingin memulai dengan framework PHP modern yang kuat dan elegan? Jika ya, Anda datang ke tempat yang tepat! Tutorial ini dirancang khusus sebagai Laravel beginner tutorial yang akan memandu Anda dari nol hingga memiliki aplikasi web sederhana pertama Anda.

Laravel adalah framework PHP paling populer di dunia, dikenal karena sintaksnya yang ekspresif dan alat-alat canggih yang membuat pengembangan web menjadi mudah dan menyenangkan. Meskipun kedengarannya besar, jangan khawatir! Kita akan memecahnya menjadi langkah-langkah yang mudah dicerna.

Dalam tutorial ini, kita akan membangun aplikasi ""Daftar Tugas"" (To-Do List) yang sangat sederhana. Melalui proses ini, Anda akan memahami konsep fundamental Laravel seperti routing, controller, view, migrasi database, dan penggunaan Eloquent ORM.

Siap untuk petualangan pertama Anda dengan Laravel? Mari kita mulai!

Prasyarat: Apa yang Anda Butuhkan?

Sebelum kita menyelam lebih dalam, ada beberapa hal yang perlu Anda siapkan di komputer Anda. Jangan khawatir, semuanya gratis dan relatif mudah diinstal.

  1. PHP (Versi 8.1 atau lebih baru): Laravel dibangun di atas PHP, jadi Anda pasti membutuhkannya.
  2. Composer: Ini adalah manajer dependensi untuk PHP. Laravel sangat bergantung pada Composer untuk mengelola paket-paketnya.
  3. Server Web (misal: Apache atau Nginx): Untuk menjalankan aplikasi PHP di browser.
    • XAMPP/WAMP/Laragon (untuk Windows): Bundle yang mudah diinstal yang sudah termasuk Apache/Nginx, MySQL, dan PHP. Sangat direkomendasikan untuk pemula.
    • MAMP (untuk macOS): Mirip dengan XAMPP/WAMP untuk pengguna Mac.
    • Laravel Valet (untuk macOS) / Laravel Sail (untuk Docker): Opsi yang lebih canggih, namun XAMPP/WAMP/Laragon lebih disarankan untuk absolute beginner.
  4. Database (misal: MySQL atau MariaDB): Kita akan menyimpan data daftar tugas kita di sini. XAMPP/WAMP/Laragon sudah menyertakannya.
  5. Code Editor (misal: VS Code): Editor teks yang kuat dengan fitur highlighting kode. VS Code sangat populer di kalangan pengembang Laravel.
  6. Terminal/Command Prompt: Untuk menjalankan perintah-perintah Laravel.

Pastikan PHP dan Composer sudah terinstal dengan benar dan dapat diakses dari terminal Anda. Anda bisa mengeceknya dengan mengetik php -v dan composer -v di terminal.

Bagian 1: Persiapan Lingkungan Laravel

Langkah pertama adalah membuat proyek Laravel baru.

1.1. Instalasi Composer (Jika Belum Ada)

Jika Anda belum menginstal Composer, kunjungi getcomposer.org dan ikuti instruksi instalasinya. Ini adalah langkah krusial karena Composer akan mengunduh semua dependensi Laravel untuk kita.

1.2. Instalasi Laravel Installer (Opsional, tapi Direkomendasikan)

Laravel memiliki alat installer global yang memudahkan pembuatan proyek baru.

Buka terminal Anda dan jalankan perintah ini:

composer global require laravel/installer

Pastikan direktori bin Composer Anda ada di PATH sistem Anda agar perintah laravel dapat dikenali.

1.3. Membuat Proyek Laravel Baru

Setelah Laravel Installer terinstal, Anda bisa membuat proyek baru dengan sangat mudah. Navigasikan ke direktori tempat Anda ingin menyimpan proyek Anda, lalu jalankan perintah berikut:

laravel new todo-app

Perintah ini akan membuat folder todo-app baru, mengunduh semua file Laravel yang diperlukan, dan menginstal dependensinya melalui Composer. Proses ini mungkin memakan waktu beberapa menit, tergantung kecepatan internet Anda.

Jika Anda tidak menginstal Laravel Installer, Anda bisa menggunakan Composer secara langsung:

composer create-project laravel/laravel todo-app

1.4. Menjalankan Aplikasi Laravel

Setelah proyek selesai dibuat, masuk ke direktori proyek Anda:

cd todo-app

Sekarang, jalankan server pengembangan bawaan Laravel menggunakan Artisan, command-line interface (CLI) Laravel:

php artisan serve

Anda akan melihat output seperti ini: Starting Laravel development server: http://127.0.0.1:8000.

Buka browser Anda dan kunjungi alamat tersebut (biasanya http://localhost:8000 atau http://127.0.0.1:8000). Jika Anda melihat halaman selamat datang Laravel, selamat! Aplikasi Laravel pertama Anda berhasil berjalan.

1.5. Struktur Proyek Laravel (Sekilas)

Meskipun terlihat banyak, ada beberapa folder kunci yang perlu Anda ketahui:

  • app/: Berisi kode inti aplikasi Anda (models, controllers, providers, dll.). Ini adalah tempat sebagian besar logika bisnis Anda akan berada.
  • bootstrap/: Berisi file bootstrapping framework.
  • config/: Berisi semua file konfigurasi aplikasi Anda.
  • database/: Berisi migrasi database, seeders, dan factories.
  • public/: Folder root web Anda. Semua permintaan masuk melalui index.php di folder ini. Juga tempat untuk aset publik seperti CSS, JavaScript, dan gambar.
  • resources/: Berisi views (template HTML), bahasa, dan aset front-end yang belum dikompilasi (seperti Sass, Less, JavaScript).
  • routes/: Berisi semua definisi rute aplikasi Anda (web.php, api.php, dll.).
  • storage/: Berisi log, file yang dikompilasi oleh framework, dan file yang diunggah pengguna.
  • vendor/: Berisi semua dependensi Composer.

Bagian 2: Konsep Dasar Laravel

Sebelum kita membangun To-Do List, mari kita pahami tiga pilar utama aplikasi web di Laravel: Routing, Views, dan Controllers.

2.1. Routing (Perutean)

Routing adalah cara Anda mendefinisikan URL mana yang harus merespons permintaan tertentu dan tindakan apa yang harus dilakukan. Laravel menggunakan file routes/web.php untuk rute berbasis web.

Buka file routes/web.php di editor kode Anda. Anda akan melihat rute default:

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Ini berarti ketika seseorang mengunjungi URL / (akar situs Anda), Laravel akan mengembalikan view bernama welcome.

Mari kita buat rute sederhana lainnya:

// routes/web.php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

// Rute baru Anda
Route::get('/hello', function () {
    return ""Halo, Selamat Datang di Aplikasi Laravel Pertamaku!"";
});

Sekarang, kunjungi http://localhost:8000/hello di browser Anda. Anda akan melihat pesan yang Anda definisikan. Ini adalah rute paling sederhana: mengembalikan string langsung.

2.2. Views (Tampilan)

Views adalah tempat Anda menulis kode HTML untuk menampilkan antarmuka pengguna aplikasi Anda. Laravel menggunakan sistem templating bernama Blade, yang memungkinkan Anda menulis HTML biasa dengan sintaks PHP yang lebih bersih dan kuat. File Blade biasanya memiliki ekstensi .blade.php.

Views Anda disimpan di direktori resources/views. Anda sudah melihat welcome.blade.php.

Mari kita buat view baru. Buat file baru bernama resources/views/greeting.blade.php dan tambahkan kode HTML berikut:

<!-- resources/views/greeting.blade.php -->

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
    <title>Halo dari Laravel!</title>
</head>
<body>
    <h1>Selamat Datang, {{ $name }}!</h1>
    <p>Ini adalah aplikasi Laravel pertama saya.</p>
</body>
</html>

Perhatikan sintaks {{ $name }}. Ini adalah sintaks Blade untuk mencetak variabel.

Sekarang, ubah rute /hello Anda di routes/web.php untuk mengembalikan view ini dan melewati data:

// routes/web.php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('/hello/{name}', function ($name) { // Tambahkan {name} sebagai parameter
    return view('greeting', ['name' => $name]); // Lewatkan data ke view
});

Kunjungi http://localhost:8000/hello/Budi atau http://localhost:8000/hello/Dunia. Anda akan melihat nama yang Anda masukkan di URL ditampilkan di halaman. Ini menunjukkan bagaimana data dapat dilewatkan dari rute ke view.

2.3. Controllers (Pengontrol)

Seiring bertambahnya aplikasi, mengelola semua logika di file rute akan menjadi berantakan. Di sinilah controllers berperan. Controller adalah kelas yang mengelompokkan logika penanganan permintaan HTTP yang terkait.

Mari kita buat controller baru untuk mengelola tugas-tugas kita. Gunakan Artisan lagi:

php artisan make:controller TodoController

Perintah ini akan membuat file app/Http/Controllers/TodoController.php. Buka file tersebut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TodoController extends Controller
{
    //
}

Sekarang, mari kita pindahkan logika ""hello world"" kita ke controller ini. Tambahkan metode index ke TodoController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TodoController extends Controller
{
    public function showGreeting($name)
    {
        return view('greeting', ['name' => $name]);
    }
}

Terakhir, perbarui rute Anda di routes/web.php untuk menggunakan controller ini:

// routes/web.php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TodoController; // Import controller Anda

Route::get('/', function () {
    return view('welcome');
});

// Ubah rute ini untuk menggunakan controller
Route::get('/hello/{name}', [TodoController::class, 'showGreeting']);

Hasilnya akan sama di browser, tetapi sekarang logika pemrosesan permintaan Anda lebih terorganisir di dalam controller. Ini adalah praktik terbaik yang akan Anda gunakan terus-menerus.

Bagian 3: Membangun Aplikasi To-Do List

Sekarang kita akan mulai membangun fitur inti aplikasi To-Do List kita. Kita akan fokus pada operasi CRUD (Create, Read, Update, Delete) yang fundamental.

3.1. Database dan Migrasi

Laravel membuat interaksi database menjadi sangat mudah dengan Migrations dan Eloquent ORM.

3.1.1. Konfigurasi Database

Pertama, kita perlu memberi tahu Laravel tentang database kita. Buka file .env di root proyek Anda. Ini adalah file konfigurasi lingkungan.

Cari bagian DB_CONNECTION:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_todo
DB_USERNAME=root
DB_PASSWORD=
  • DB_DATABASE: Ganti laravel dengan nama database yang ingin Anda gunakan, misalnya laravel_todo. Pastikan database ini sudah Anda buat di MySQL/MariaDB Anda (misalnya melalui phpMyAdmin jika Anda menggunakan XAMPP/WAMP/Laragon).
  • DB_USERNAME: Biasanya root untuk XAMPP/WAMP.
  • DB_PASSWORD: Biasanya kosong untuk XAMPP/WAMP.

3.1.2. Migrasi Database

Migrasi Laravel adalah seperti kontrol versi untuk database Anda. Mereka memungkinkan tim untuk mendefinisikan dan membagikan skema database aplikasi dengan mudah.

Mari kita buat migrasi untuk tabel todos kita. Jalankan perintah Artisan berikut:

php artisan make:migration create_todos_table

Ini akan membuat file baru di database/migrations/ (nama file akan mencakup tanggal dan waktu). Buka file tersebut:

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('todos', function (Blueprint $table) {
            $table->id();
            $table->string('task'); // Kolom untuk menyimpan deskripsi tugas
            $table->boolean('is_completed')->default(false); // Kolom untuk menandai apakah tugas selesai
            $table->timestamps(); // Kolom created_at dan updated_at
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('todos');
    }
};
  • Metode up() dijalankan saat migrasi dieksekusi, membuat tabel todos dengan kolom id, task, is_completed, created_at, dan updated_at.
  • $table->id(): Membuat kolom primary key auto-increment.
  • $table->string('task'): Membuat kolom string untuk nama tugas.
  • $table->boolean('is_completed')->default(false): Membuat kolom boolean, default false.
  • $table->timestamps(): Membuat kolom created_at dan updated_at secara otomatis untuk melacak kapan baris dibuat atau diperbarui.
  • Metode down() digunakan untuk membatalkan migrasi (misalnya, menghapus tabel).

Sekarang, jalankan migrasi untuk membuat tabel di database Anda:

php artisan migrate

Anda akan melihat output yang menunjukkan bahwa tabel todos (bersama dengan tabel bawaan Laravel lainnya seperti users, password_reset_tokens, failed_jobs, cache, sessions) telah berhasil dibuat. Anda bisa memeriksanya di tool database Anda (misalnya phpMyAdmin).

3.2. Model Eloquent

Eloquent ORM (Object-Relational Mapper) Laravel menyediakan cara yang indah dan ekspresif untuk berinteraksi dengan database Anda. Setiap tabel database memiliki ""Model"" Eloquent yang sesuai, yang digunakan untuk berinteraksi dengan tabel tersebut.

Buat model untuk tabel todos kita:

php artisan make:model Todo

Ini akan membuat file app/Models/Todo.php. Buka file tersebut:

<?php

namespace App\Models;

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

class Todo extends Model
{
    use HasFactory;

    // Menentukan kolom mana yang bisa diisi secara massal (mass assignable)
    protected $fillable = ['task', 'is_completed'];
}

Kita menambahkan $fillable untuk menentukan kolom mana yang aman untuk diisi dengan mass assignment (mengisi beberapa kolom sekaligus dari array). Tanpa ini, Laravel akan memberikan kesalahan MassAssignmentException untuk keamanan.

3.3. Implementasi CRUD (Create, Read, Update, Delete)

Sekarang, kita akan mengimplementasikan logika CRUD di TodoController kita.

3.3.1. Read (Menampilkan Semua Tugas)

Pertama, kita akan menampilkan semua tugas di halaman utama.

  • Rute: Tambahkan rute untuk menampilkan daftar tugas di routes/web.php:

    // routes/web.php
    use App\Http\Controllers\TodoController; // Pastikan ini sudah ada
    
    // Rute untuk menampilkan daftar tugas
    Route::get('/todos', [TodoController::class, 'index'])->name('todos.index');
    
    // Rute untuk menampilkan form tambah tugas
    Route::get('/todos/create', [TodoController::class, 'create'])->name('todos.create');
    // Rute untuk menyimpan tugas baru
    Route::post('/todos', [TodoController::class, 'store'])->name('todos.store');
    
    // Rute untuk menampilkan form edit tugas
    Route::get('/todos/{todo}/edit', [TodoController::class, 'edit'])->name('todos.edit');
    // Rute untuk mengupdate tugas
    Route::put('/todos/{todo}', [TodoController::class, 'update'])->name('todos.update');
    
    // Rute untuk menghapus tugas
    Route::delete('/todos/{todo}', [TodoController::class, 'destroy'])->name('todos.destroy');
    
  • Controller: Tambahkan metode index di app/Http/Controllers/TodoController.php:

    // app/Http/Controllers/TodoController.php
    
    <?php
    
    namespace App\Http\Controllers;
    
    use App\Models\Todo; // Import model Todo
    use Illuminate\Http\Request;
    
    class TodoController extends Controller
    {
        public function index()
        {
            $todos = Todo::all(); // Mengambil semua data dari tabel 'todos'
            return view('todos.index', compact('todos')); // Mengirimkan data ke view
        }
    
        // ... metode lain akan ditambahkan di sini
    }
    
  • View: Buat folder todos di resources/views/ dan di dalamnya buat file index.blade.php:

    <!-- resources/views/todos/index.blade.php -->
    
    <!DOCTYPE html>
    <html lang=""en"">
    <head>
        <meta charset=""UTF-8"">
        <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
        <title>Daftar Tugas</title>
        <style>
            body { font-family: sans-serif; margin: 20px; }
            .container { max-width: 600px; margin: auto; }
            ul { list-style: none; padding: 0; }
            li { background: #f4f4f4; margin-bottom: 10px; padding: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; }
            .completed { text-decoration: line-through; color: #888; }
            .actions { display: flex; gap: 5px; }
            .actions form { margin: 0; }
            button { padding: 5px 10px; border: none; border-radius: 3px; cursor: pointer; }
            .btn-edit { background: #007bff; color: white; }
            .btn-delete { background: #dc3545; color: white; }
            .btn-toggle { background: #28a745; color: white; }
            .btn-create { background: #6f42c1; color: white; text-decoration: none; padding: 8px 12px; border-radius: 3px; }
        </style>
    </head>
    <body>
        <div class=""container"">
            <h1>Daftar Tugas</h1>
            <a href=""{{ route('todos.create') }}"" class=""btn-create"">Tambah Tugas Baru</a>
            <hr>
            @if ($todos->isEmpty())
                <p>Belum ada tugas. Silakan tambahkan satu!</p>
            @else
                <ul>
                    @foreach ($todos as $todo)
                        <li class=""{{ $todo->is_completed ? 'completed' : '' }}"">
                            <span>{{ $todo->task }}</span>
                            <div class=""actions"">
                                @if (!$todo->is_completed)
                                <form action=""{{ route('todos.update', $todo->id) }}"" method=""POST"">
                                    @csrf
                                    @method('PUT')
                                    <input type=""hidden"" name=""is_completed"" value=""1"">
                                    <button type=""submit"" class=""btn-toggle"">Selesai</button>
                                </form>
                                @endif
                                <a href=""{{ route('todos.edit', $todo->id) }}"" class=""btn-edit"">Edit</a>
                                <form action=""{{ route('todos.destroy', $todo->id) }}"" method=""POST"">
                                    @csrf
                                    @method('DELETE')
                                    <button type=""submit"" class=""btn-delete"" onclick=""return confirm('Yakin ingin menghapus tugas ini?')"">Hapus</button>
                                </form>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>
    </body>
    </html>
    

Kunjungi http://localhost:8000/todos. Anda akan melihat halaman ""Daftar Tugas"" yang masih kosong.

3.3.2. Create (Menambah Tugas Baru)

  • Controller: Tambahkan metode create dan store di TodoController:

    // app/Http/Controllers/TodoController.php
    
    // ... (kode sebelumnya)
    
    public function create()
    {
        return view('todos.create');
    }
    
    public function store(Request $request)
    {
        // Validasi input (penting untuk produksi!)
        $request->validate([
            'task' => 'required|max:255',
        ]);
    
        Todo::create([
            'task' => $request->task,
            'is_completed' => false, // Default saat membuat tugas baru
        ]);
    
        return redirect()->route('todos.index')->with('success', 'Tugas berhasil ditambahkan!');
    }
    // ... (metode lain)
    
    • Request $request: Laravel secara otomatis menginjeksikan objek Request yang berisi semua data input dari formulir.
    • $request->validate(): Ini adalah cara mudah untuk memvalidasi data input. Jika validasi gagal, Laravel akan secara otomatis mengarahkan kembali ke halaman sebelumnya dengan pesan kesalahan.
    • Todo::create(): Membuat catatan baru di database menggunakan model Todo.
    • redirect()->route('todos.index'): Mengarahkan kembali pengguna ke halaman daftar tugas setelah berhasil disimpan.
    • ->with('success', '...'): Menambahkan pesan flash ke sesi, yang dapat Anda tampilkan di view.
  • View: Buat file resources/views/todos/create.blade.php:

    <!-- resources/views/todos/create.blade.php -->
    
    <!DOCTYPE html>
    <html lang=""en"">
    <head>
        <meta charset=""UTF-8"">
        <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
        <title>Tambah Tugas Baru</title>
        <style>
            body { font-family: sans-serif; margin: 20px; }
            .container { max-width: 600px; margin: auto; }
            form div { margin-bottom: 10px; }
            label { display: block; margin-bottom: 5px; }
            input[type=""text""] { width: 100%; padding: 8px; box-sizing: border-box; }
            button { padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
            .btn-back { display: inline-block; margin-top: 20px; padding: 8px 12px; background: #6c757d; color: white; text-decoration: none; border-radius: 3px; }
        </style>
    </head>
    <body>
        <div class=""container"">
            <h1>Tambah Tugas Baru</h1>
    
            <form action=""{{ route('todos.store') }}"" method=""POST"">
                @csrf <!-- Token CSRF untuk keamanan -->
                <div>
                    <label for=""task"">Deskripsi Tugas:</label>
                    <input type=""text"" id=""task"" name=""task"" required>
                </div>
                <button type=""submit"">Tambah Tugas</button>
            </form>
            <a href=""{{ route('todos.index') }}"" class=""btn-back"">Kembali ke Daftar</a>
        </div>
    </body>
    </html>
    
    • @csrf: Ini adalah direktif Blade yang sangat penting. Laravel secara otomatis menyertakan token CSRF (Cross-Site Request Forgery) tersembunyi di formulir Anda. Ini melindungi aplikasi Anda dari serangan berbahaya.
    • action=""{{ route('todos.store') }}"": Menggunakan fungsi route() untuk menghasilkan URL berdasarkan nama rute yang kita definisikan (todos.store). Ini membuat URL Anda lebih fleksibel.

Sekarang, kunjungi http://localhost:8000/todos/create, tambahkan tugas, dan lihatlah di halaman daftar tugas.

3.3.3. Update (Mengubah Tugas)

  • Controller: Tambahkan metode edit dan update di TodoController:

    // app/Http/Controllers/TodoController.php
    
    // ... (kode sebelumnya)
    
    public function edit(Todo $todo) // Laravel akan otomatis menemukan tugas berdasarkan ID
    {
        return view('todos.edit', compact('todo'));
    }
    
    public function update(Request $request, Todo $todo)
    {
        $request->validate([
            'task' => 'required|max:255',
        ]);
    
        $todo->task = $request->task;
        $todo->is_completed = $request->has('is_completed') ? true : false; // Cek apakah checkbox dicentang
        $todo->save(); // Menyimpan perubahan ke database
    
        return redirect()->route('todos.index')->with('success', 'Tugas berhasil diperbarui!');
    }
    
    // ... (metode lain)
    
    • Todo $todo: Ini adalah contoh Route Model Binding. Laravel secara otomatis menginjeksikan instance model Todo yang cocok dengan ID yang dilewatkan di URL.
    • $todo->save(): Menyimpan perubahan pada model yang sudah ada.
  • View: Buat file resources/views/todos/edit.blade.php:

    <!-- resources/views/todos/edit.blade.php -->
    
    <!DOCTYPE html>
    <html lang=""en"">
    <head>
        <meta charset=""UTF-8"">
        <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
        <title>Edit Tugas</title>
        <style>
            body { font-family: sans-serif; margin: 20px; }
            .container { max-width: 600px; margin: auto; }
            form div { margin-bottom: 10px; }
            label { display: block; margin-bottom: 5px; }
            input[type=""text""], input[type=""checkbox""] { margin-right: 5px; }
            button { padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
            .btn-back { display: inline-block; margin-top: 20px; padding: 8px 12px; background: #6c757d; color: white; text-decoration: none; border-radius: 3px; }
        </style>
    </head>
    <body>
        <div class=""container"">
            <h1>Edit Tugas</h1>
    
            <form action=""{{ route('todos.update', $todo->id) }}"" method=""POST"">
                @csrf
                @method('PUT') <!-- Digunakan untuk metode HTTP PUT/PATCH -->
                <div>
                    <label for=""task"">Deskripsi Tugas:</label>
                    <input type=""text"" id=""task"" name=""task"" value=""{{ $todo->task }}"" required>
                </div>
                <div>
                    <input type=""checkbox"" id=""is_completed"" name=""is_completed"" {{ $todo->is_completed ? 'checked' : '' }}>
                    <label for=""is_completed"">Selesai?</label>
                </div>
                <button type=""submit"">Update Tugas</button>
            </form>
            <a href=""{{ route('todos.index') }}"" class=""btn-back"">Kembali ke Daftar</a>
        </div>
    </body>
    </html>
    
    • @method('PUT'): HTML form secara native hanya mendukung GET dan POST. Laravel @method direktif membantu spoofing metode HTTP untuk PUT, PATCH, atau DELETE.

Dari halaman index, klik tombol ""Edit"" untuk menguji fitur ini.

3.3.4. Delete (Menghapus Tugas)

  • Controller: Tambahkan metode destroy di TodoController:

    // app/Http/Controllers/TodoController.php
    
    // ... (kode sebelumnya)
    
    public function destroy(Todo $todo)
    {
        $todo->delete(); // Menghapus model dari database
        return redirect()->route('todos.index')->with('success', 'Tugas berhasil dihapus!');
    }
    

Dari halaman index, klik tombol ""Hapus"" untuk menguji fitur ini. Kita sudah menyertakan form dan @method('DELETE') di index.blade.php sebelumnya.

Finalisasi dan Langkah Selanjutnya

Selamat! Anda telah berhasil membangun aplikasi To-Do List sederhana menggunakan Laravel! Anda telah melalui instalasi, memahami konsep routing, views, controllers, migrasi database, model Eloquent, dan mengimplementasikan operasi CRUD dasar. Ini adalah fondasi yang sangat kuat untuk perjalanan pengembangan web Anda.

Apa selanjutnya?

Ini hanyalah permulaan. Ada banyak hal yang bisa Anda jelajahi lebih lanjut di Laravel:

  • Autentikasi & Otorisasi: Pelajari cara menambahkan fitur login, registrasi, dan mengelola izin pengguna. Laravel menyediakan starter kits seperti Breeze atau Jetstream yang membuatnya sangat mudah.
  • Validasi Formulir yang Lebih Lanjut: Periksa validasi input lebih mendalam, termasuk pesan kesalahan kustom dan aturan validasi yang lebih kompleks.
  • Middleware: Pahami cara memfilter permintaan HTTP sebelum mencapai controller Anda (misalnya, memeriksa apakah pengguna sudah login).
  • Eloquent Relationships: Pelajari cara menghubungkan model yang berbeda (misalnya, satu pengguna memiliki banyak tugas).
  • Pengujian: Laravel memiliki alat pengujian yang luar biasa untuk memastikan aplikasi Anda berfungsi seperti yang diharapkan.
  • Asset Bundling (Vite): Untuk mengelola CSS dan JavaScript Anda dengan lebih efisien.
  • Deployment: Pelajari cara membawa aplikasi Anda dari lingkungan lokal ke server production.

Jangan ragu untuk memodifikasi aplikasi To-Do List ini. Tambahkan fitur, perbaiki tampilannya, dan terus bereksperimen. Cara terbaik untuk belajar adalah dengan melakukan!

Semoga Laravel beginner tutorial ini membantu Anda memulai perjalanan yang menarik di dunia pengembangan web. Selamat mengoding!

—"