Day 7 — Eloquent Model, Read & Create (CRUD Bagian 1)

Fase: 1 — Fundamental Laravel | Minggu: 2 | Hari: Selasa

---

🎯 Tujuan Hari Ini

Peserta mampu membuat Model Eloquent, menampilkan data dari database ke halaman web (Read), dan menambahkan data baru melalui form HTML (Create).

---

📋 Task Wajib

1. Buat Model Student

php artisan make:model Student

Buka app/Models/Student.php. Laravel otomatis tahu bahwa Model Student → tabel students. Tambahkan $fillable untuk keamanan mass assignment:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Student extends Model
{
    protected $fillable = [
        'name',
        'gender',
        'phone',
        'school',
        'active',
    ];
}

Apa itu $fillable? Daftar kolom yang boleh diisi via mass assignment (Student::create([...])). Kolom yang tidak ada di sini tidak bisa diisi sembarangan — ini fitur keamanan Laravel.

2. Buat Controller untuk Student

php artisan make:controller StudentController --resource

Flag --resource otomatis membuat 7 method standar CRUD: index, create, store, show, edit, update, destroy.

3. Daftarkan Resource Route

Di routes/web.php:

use App\Http\Controllers\StudentController;

Route::resource('students', StudentController::class);

Cek semua route yang terdaftar:

php artisan route:list

Kamu akan melihat 7 route untuk /students secara otomatis.

4. Implementasi: index() — Tampilkan Semua Data

Buka StudentController.php, isi method index():

use App\Models\Student;

public function index()
{
    $students = Student::orderBy('name')->get();
    return view('students.index', compact('students'));
}

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

@extends('layouts.app')

@section('title', 'Daftar Siswa')

@section('content')
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
        <h1>Daftar Siswa Magang</h1>
        <a href="{{ route('students.create') }}" 
           style="background:#1a1a2e; color:white; padding:10px 20px; border-radius:6px; text-decoration:none;">
            + Tambah Siswa
        </a>
    </div>

    @if(session('success'))
        <div style="background:#d4edda; color:#155724; padding:12px; border-radius:6px; margin-bottom:20px;">
            {{ session('success') }}
        </div>
    @endif

    <table style="width:100%; border-collapse:collapse; background:white;">
        <thead>
            <tr style="background:#1a1a2e; color:white;">
                <th style="padding:12px;">No</th>
                <th style="padding:12px;">Nama</th>
                <th style="padding:12px;">L/P</th>
                <th style="padding:12px;">No. HP</th>
                <th style="padding:12px;">Sekolah</th>
                <th style="padding:12px;">Status</th>
                <th style="padding:12px;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($students as $i => $s)
            <tr style="border-bottom:1px solid #eee; text-align:center;">
                <td style="padding:12px;">{{ $i + 1 }}</td>
                <td style="padding:12px; text-align:left;">{{ $s->name }}</td>
                <td style="padding:12px;">{{ $s->gender == 'L' ? '👦 Laki-laki' : '👧 Perempuan' }}</td>
                <td style="padding:12px;">{{ $s->phone ?? '-' }}</td>
                <td style="padding:12px;">{{ $s->school }}</td>
                <td style="padding:12px;">
                    <span style="background:{{ $s->active ? '#d4edda' : '#f8d7da' }}; 
                                 color:{{ $s->active ? '#155724' : '#721c24' }};
                                 padding:4px 10px; border-radius:20px; font-size:12px;">
                        {{ $s->active ? 'Aktif' : 'Nonaktif' }}
                    </span>
                </td>
                <td style="padding:12px;">
                    <a href="{{ route('students.edit', $s->id) }}" style="color:#0066cc;">Edit</a> |
                    <form action="{{ route('students.destroy', $s->id) }}" method="POST" style="display:inline;"
                          onsubmit="return confirm('Yakin hapus data ini?')">
                        @csrf @method('DELETE')
                        <button type="submit" style="border:none; background:none; color:red; cursor:pointer;">Hapus</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7" style="text-align:center; padding:30px; color:#999;">Belum ada data siswa.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
@endsection

5. Implementasi: create() & store() — Form Tambah Data

Method create() di Controller:

public function create()
{
    return view('students.create');
}

Method store() di Controller:

public function store(Request $request)
{
    $request->validate([
        'name'   => 'required|min:3|max:100',
        'gender' => 'required|in:L,P',
        'phone'  => 'nullable|max:15',
        'school' => 'required|max:150',
    ]);

    Student::create([
        'name'   => $request->name,
        'gender' => $request->gender,
        'phone'  => $request->phone,
        'school' => $request->school,
        'active' => true,
    ]);

    return redirect()->route('students.index')->with('success', 'Data siswa berhasil ditambahkan!');
}

Buat view form: resources/views/students/create.blade.php

@extends('layouts.app')

@section('title', 'Tambah Siswa')

@section('content')
    <h1>Tambah Siswa Baru</h1>

    <form method="POST" action="{{ route('students.store') }}" 
          style="background:white; padding:30px; border-radius:10px; margin-top:20px; max-width:600px;">
        @csrf

        <div style="margin-bottom:20px;">
            <label style="display:block; font-weight:bold; margin-bottom:6px;">Nama Lengkap *</label>
            <input type="text" name="name" value="{{ old('name') }}" 
                   style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;"
                   placeholder="Masukkan nama lengkap">
            @error('name') <span style="color:red; font-size:13px;">{{ $message }}</span> @enderror
        </div>

        <div style="margin-bottom:20px;">
            <label style="display:block; font-weight:bold; margin-bottom:6px;">Jenis Kelamin *</label>
            <select name="gender" style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;">
                <option value="">-- Pilih --</option>
                <option value="L" {{ old('gender') == 'L' ? 'selected' : '' }}>Laki-laki</option>
                <option value="P" {{ old('gender') == 'P' ? 'selected' : '' }}>Perempuan</option>
            </select>
            @error('gender') <span style="color:red; font-size:13px;">{{ $message }}</span> @enderror
        </div>

        <div style="margin-bottom:20px;">
            <label style="display:block; font-weight:bold; margin-bottom:6px;">No. HP</label>
            <input type="text" name="phone" value="{{ old('phone') }}" 
                   style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;"
                   placeholder="Opsional">
        </div>

        <div style="margin-bottom:20px;">
            <label style="display:block; font-weight:bold; margin-bottom:6px;">Nama Sekolah *</label>
            <input type="text" name="school" value="{{ old('school') }}" 
                   style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;"
                   placeholder="Contoh: SMK Negeri 1 Jakarta">
            @error('school') <span style="color:red; font-size:13px;">{{ $message }}</span> @enderror
        </div>

        <div style="display:flex; gap:10px;">
            <button type="submit" style="background:#1a1a2e; color:white; padding:12px 30px; border:none; border-radius:6px; cursor:pointer;">
                Simpan
            </button>
            <a href="{{ route('students.index') }}" style="padding:12px 20px; border:1px solid #ddd; border-radius:6px; text-decoration:none; color:#333;">
                Batal
            </a>
        </div>
    </form>
@endsection

6. Uji Fitur

• Akses http://127.0.0.1:8000/students → Pastikan data dari phpMyAdmin muncul
• Klik "+ Tambah Siswa" → Isi form → Submit → Pastikan redirect ke list dengan pesan sukses
• Coba submit form kosong → Pastikan muncul pesan validasi error di bawah input

---

📝 Laporan ke Mentor

📌 LAPORAN HARIAN — Day 7
Nama     : [Nama Lengkap]
Role     : [Role Kamu]

✅ Yang saya kerjakan hari ini:
- [ ] Membuat Model Student dengan $fillable
- [ ] Membuat StudentController --resource
- [ ] Route::resource sudah terdaftar
- [ ] Halaman /students menampilkan data dari DB
- [ ] Form tambah siswa berjalan dan tersimpan ke DB
- [ ] Validasi error muncul jika form kosong

📸 Screenshot Wajib:
1. Halaman /students dengan data dari database
2. Halaman /students/create (form)
3. Setelah submit form: halaman list + flash message sukses

❓ Kendala:
[Tulis jika ada]

---

Catatan Mentor

Pastikan peserta memahami mengapa @csrf wajib ada di setiap form POST. Ini token keamanan Laravel. Jika ada yang berhasil lebih cepat, minta mereka styling tabel dengan warna bergantian (zebra stripe) menggunakan $loop->odd.