Subbab 9 / 9

LARAVEL 13 :3

Hari ini kita maw ngapain aja sih ?

  1. Paham isi folder Laravel (mana yang perlu disentuh, mana yang jangan diutak-atik).
  2. Paham cara kerja MVC dan alur perjalanan URL sampai jadi halaman web.
  3. Berhasil membuat aplikasi Katalog Buku sederhana (Tampil Data + Tambah Data).

Part 1: Peta Folder Laravel 13

Untuk 80% pekerjaanmu semester ini, ntar bakal bolak-balik di 4 folder yang diberi tanda bintang (⭐) ini :

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
laravel-project/
├── ⭐ app/
│   ├── Http/Controllers/   <-- Otak pengatur logika (Controller)
│   └── Models/             <-- Jembatan ke tabel database (Model)
├── bootstrap/
│   └── app.php             <-- Pusat pengaturan rute & keamanan (Middleware)
├── config/                 <-- Pengaturan aplikasi
├── ⭐ database/
│   ├── migrations/         <-- Cetakan tabel database
│   └── database.sqlite     <-- File database bawaan (praktis, tanpa XAMPP!)
├── public/                 <-- Pintu masuk utama (index.php) & file gambar/CSS publik
├── ⭐ resources/
│   └── views/              <-- Tempat menaruh file HTML/Blade (View)
├── ⭐ routes/
│   └── web.php             <-- Daftar alamat URL web kamu
└── .env                    <-- Kunci rahasia & pengaturan database

Part 2 : Konsep MVC & Alur Request

Laravel bekerja dengan pola MVC (Model - View - Controller). Bayangkan kamu sedang makan di restoran:

  1. Route (routes/web.php) = Buku Menu. Daftar URL yang bisa dipesan pengunjung (misal: /books).
  2. Controller (app/Http/Controllers) = Pelayan. Menerima pesanan dari pengunjung, lalu menyuruh koki menyiapkan bahan.
  3. Model (app/Models) = Koki & Gudang Bahan. Mengambil atau menyimpan data ke database (books).
  4. View (resources/views) = Piring Saji. Menampilkan data yang sudah matang menjadi halaman HTML yang rapi ke layar pengunjung.

Urutan Perjalanannya: Pengunjung buka URL ➔ Cek di routes/web.php ➔ Panggil Controller ➔ Ambil data lewat Model ➔ Tampilkan ke View.

Part 3: Praktikum Bikin Aplikasi Katalog Buku

Sekarang buka terminal dan VS Code kalian. Kita akan membuat daftar buku dan form tambah buku

Langkah 1: Buat Proyek & Nyalakan Server

Jalankan perintah ini di terminal :

php
1
2
3
# Buat proyek baru
composer create-project laravel/laravel:^13.0 katalog-buku
cd katalog-buku

Langkah 2: Buat Model & Tabel Database

Kita butuh tabel books di database dan model Book untuk mengelolanya.

plaintext
1
php artisan make:model Book -m

Flag -m artinya: "Tolong sekalian buatin file Migration/cetakan tabelnya").


Buka file migration yang baru muncul di database/migrations/xxxx_create_books_table.php.

Ubah bagian up() menjadi seperti ini:

php
1
2
3
4
5
6
7
8
9
public function up(): void
{
    Schema::create('books', function (Blueprint $table) {
        $table->id();
        $table->string('title');   // Judul buku
        $table->string('author');  // Nama penulis
        $table->timestamps();      // Otomatis bikin kolom created_at & updated_at
    });
}

Sekarang cetak tabel tersebut ke database dengan perintah :

plaintext
1
php artisan migrate

Terakhir, buka app/Models/Book.php. Beri izin agar kolom title dan author boleh diisi lewat form:

php
1
2
3
4
5
6
7
8
9
10
11
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    // Daftar kolom yang diizinkan untuk diisi pengguna
    protected $fillable = ['title', 'author'];
}

Langkah 3: Buat Controller

Sekarang kita buat "Pelayan"-nya. Jalankan di terminal:

plaintext
1
php artisan make:controller BookController

Buka app/Http/Controllers/BookController.php, lalu isi dengan 2 fungsi: index (untuk menampilkan daftar buku) dan store(untuk menyimpan buku baru).

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php

namespace App\Http\Controllers;

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

class BookController extends Controller
{
    // 1. Menampilkan halaman daftar buku
    public function index()
    {
        // Ambil data buku terbaru dari database
        $books = Book::latest()->get();

        // Kirim data $books ke tampilan resources/views/books/index.blade.php
        return view('books.index', ['books' => $books]);
    }

    // 2. Menyimpan buku baru dari form
    public function store(Request $request)
    {
        // Cek dulu: judul & penulis wajib diisi!
        $validated = $request->validate([
            'title'  => 'required|string|max:255',
            'author' => 'required|string|max:255',
        ]);

        // Simpan ke database
        Book::create($validated);

        // Kembalikan ke halaman daftar buku dengan pesan sukses
        return to_route('books.index')->with('success', 'Buku berhasil ditambahkan!');
    }
}

Langkah 4: Buat Tampilan / View Blade

Buat folder baru bernama books di dalam resources/views/, lalu buat file index.blade.php (atau jalankan php artisan make:view books.index). Isi resources/views/books/index.blade.php dengan kode berikut :

php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Katalog Buku</title>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
        .alert { background: #d1fae5; color: #065f46; padding: 10px; border-radius: 6px; margin-bottom: 16px; }
        .error { color: #dc2626; font-size: 14px; }
        form { background: #f8fafc; padding: 16px; border-radius: 8px; border: 1px solid #e2e8f0; }
        input { width: 100%; padding: 8px; margin: 6px 0 12px; box-sizing: border-box; }
        button { background: #2563eb; color: white; border: none; padding: 10px 16px; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>

    <h1Katalog Buku</h1>

    {{-- Munculkan pesan sukses jika ada --}}
    @session('success')
        <div class="alert">{{ $value }}</div>
    @endsession

    {{-- Form Tambah Buku --}}
    <form method="POST" action="{{ route('books.store') }}">
        @csrf {{-- WAJIB ADA: Token keamanan Laravel agar form tidak dibajak --}}

        <label>Judul Buku:</label>
        <input type="text" name="title" value="{{ old('title') }}" placeholder="Contoh: Filosofi Teras">
        @error('title') <div class="error">{{ $message }}</div> @enderror

        <label>Penulis:</label>
        <input type="text" name="author" value="{{ old('author') }}" placeholder="Contoh: Henry Manampiring">
        @error('author') <div class="error">{{ $message }}</div> @enderror

        <button type="submit">+ Tambah Buku</button>
    </form>

    <hr style="margin: 24px 0;">

    {{-- Daftar Buku --}}
    <h3>Koleksi Saat Ini:</h3>
    <ul>
        @forelse ($books as $book)
            <li><strong>{{ $book->title }}</strong> oleh {{ $book->author }}</li>
        @empty
            <li>Belum ada buku. Yuk tambahkan buku pertamamu!</li>
        @endforelse
    </ul>

</body>
</html>

Kenapa pakai @forelse bukan @foreach? Dengan @forelse, kalau databasenya masih kosong, Laravel otomatis menampilkan bagian @empty ("Belum ada buku"). Kita tidak perlu repot bikin if-else manual!

Langkah 5: Daftarkan Alamat URL di Route

Buka routes/web.php, lalu daftarkan 2 rute kita: satu untuk melihat halaman (GET), satu untuk mengirim form (POST).

php
1
2
3
4
5
6
7
8
9
10
<?php

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

// Kalau buka halaman utama, langsung arahkan ke /books
Route::redirect('/', '/books');

Route::get('/books', [BookController::class, 'index'])->name('books.index');
Route::post('/books', [BookController::class, 'store'])->name('books.store');

Langkah 6: Jalankan & Uji Coba! (5 Menit)

Nyalakan server lokal di terminal :

plaintext
1
php artisan serve
  1. Buka browser dan kunjungi http://localhost:8000/books.
  2. Coba klik tombol + Tambah Buku
  3. Sekarang isi Judul dan Penulis, lalu klik tambah.

Percobaan mandiri :p

Sudah berhasil? Sebelum keluar kelas, coba selesaikan percobaan kecil ini:

  1. Tantangan Level 1: Tambahkan kolom year (tahun terbit, tipe integer) di file migration, lalu jalankan php artisan migrate:fresh (perintah ini akan mereset tabel dan membuat ulang dengan kolom baru).
  2. Tantangan Level 2: Perbarui $fillable di Model Book, tambahkan input Tahun Terbit di form Blade, dan tambahkan validasi 'year' => 'required|numeric' di BookController.
  3. Tantangan Level 3: Tampilkan tahun terbit di samping nama penulis, contoh: Filosofi Teras oleh Henry Manampiring (2018).

Cheat Sheet Praktikum Hari Ini

Perintah Terminal Kegunaan

Header 1

Header 3

php artisan serve

Menyalakan server web di localhost:8000

php artisan make:model NamaModel -m

Membuat Model sekaligus file Migration

php artisan make:controller NamaController

Membuat file Controller baru

php artisan make:view folder.nama

Membuat file tampilan Blade baru

php artisan migrate

Mengeksekusi pembuatan tabel ke database

php artisan migrate:fresh

Menghapus semua tabel dan membuat ulang dari awal
Subbab Sebelumnya
PHP (Hypertext Preprocessor)