Laravel CRUD

Tutorial Membuat CRUD Menggunakan Laravel

1. Setup XAMPP di Windows

1

Download dan Install XAMPP

XAMPP adalah paket all-in-one yang berisi Apache, MySQL, PHP, dan Perl.

Setup XAMPP
LANGKAH 1: Download XAMPP
1. Buka https://www.apachefriends.org/
2. Download XAMPP Windows (PHP 8.2+)
3. Jalankan file installer XAMPP

LANGKAH 2: Instalasi
1. Pilih folder instalasi: C:\xampp (default)
2. Pilih komponen: Apache, MySQL, PHP (semuanya)
3. Klik "Next" hingga selesai
4. Jangan install sebagai service

LANGKAH 3: Verifikasi
1. Buka XAMPP Control Panel
2. Klik "Start" untuk Apache
3. Klik "Start" untuk MySQL
4. Tunggu status menjadi "Running" (hijau)
Apache dan MySQL sudah berjalan. Sekarang siap untuk Composer!
2

Install Composer

Composer adalah package manager PHP yang diperlukan untuk membuat project Laravel.

Install Composer
LANGKAH 1: Download Installer
1. Buka https://getcomposer.org/download/
2. Download "Composer-Setup.exe"
3. Jalankan file installer

LANGKAH 2: Konfigurasi
1. Saat diminta "php.exe location"
2. Cari & pilih: C:\xampp\php\php.exe
3. Klik "Next" hingga selesai

LANGKAH 3: Verifikasi (Command Prompt Baru)
Buka Command Prompt/PowerShell:
composer --version
Jika muncul versi Composer, instalasi berhasil!
3

Setup Text Editor (VSCode)

Untuk coding, gunakan Visual Studio Code (gratis dan ringan).

Setup VSCode
LANGKAH 1: Download dan Install
1. Buka https://code.visualstudio.com/
2. Download untuk Windows
3. Jalankan installer, next-next sampai selesai

LANGKAH 2: Install Extensions
1. Buka VSCode
2. Klik "Extensions" (icon kotak di kiri)
3. Cari dan install:
   - PHP Intelephense
   - Composer
   - Thunder Client (untuk testing API)

LANGKAH 3: Setup PHP Path
1. File → Preferences → Settings
2. Cari "php.executablePath"
3. Isi: C:\xampp\php\php.exe

2. Membuat Project Laravel Pertama

1

Buat Project dengan Composer

Buka Command Prompt atau PowerShell di folder tempat Anda menyimpan project.

Command Prompt
composer create-project laravel/laravel student-manager

Proses instalasi:

  • Download Laravel dan semua dependencies
  • Tunggu 2-3 menit (tergantung kecepatan internet)
  • Selesai jika tidak ada error
Folder "student-manager" berhasil dibuat dengan file-file Laravel
2

Masuk ke Folder Project

Command Prompt
cd student-manager

Sekarang Command Prompt menunjuk ke folder project

3

Jalankan Development Server

Command Prompt
php artisan serve

Output:

Result
Laravel development server started on http://127.0.0.1:8000/

Buka di browser:

URL Browser
http://localhost:8000/
Server berjalan selama Command Prompt terbuka. Tekan Ctrl+C untuk stop.
4

Memahami Struktur Folder

Folder Structure
student-manager/
├── app/
│   ├── Models/          ← Database models
│   └── Http/
│       └── Controllers/ ← Logika aplikasi
├── routes/
│   └── web.php         ← Daftar URL aplikasi
├── resources/
│   └── views/          ← File HTML/template
├── database/
│   ├── migrations/     ← Struktur tabel DB
│   └── seeders/        ← Data dummy
├── public/             ← File CSS, JS, images
├── .env                ← Konfigurasi database
└── composer.json       ← List dependencies

3. Database dan CRUD Siswa

1

Konfigurasi Database MySQL

Buat database baru di MySQL:

Opsi A: Gunakan phpMyAdmin (Jika XAMPP)

Setup
1. Buka http://localhost/phpmyadmin/
2. Login (username: root, password: kosong)
3. Klik "New" di sebelah kiri
4. Buat database baru dengan nama: laravel_siswa
5. Pilih Collation: utf8mb4_unicode_ci
6. Klik "Create"

Opsi B: Gunakan Command Line MySQL

Command Prompt
mysql -u root -p
# Ketik password (default kosong untuk XAMPP)
CREATE DATABASE laravel_siswa CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
EXIT;

Konfigurasi Laravel - Edit file .env

.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_siswa
DB_USERNAME=root
DB_PASSWORD=
Catatan: DB_PASSWORD kosong untuk XAMPP default. Jika Anda set password MySQL saat install, masukkan di sini
2

Buat Migration (Struktur Tabel)

Migration adalah file untuk mendefinisikan struktur tabel database.

Command Prompt
php artisan make:migration create_students_table

Edit file migration yang baru dibuat:

database/migrations/create_students_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration {
    public function up(): void {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->string('nama');
            $table->string('email')->unique();
            $table->string('nomor_induk')->unique();
            $table->string('kelas')->nullable();
            $table->string('jurusan')->nullable();
            $table->text('alamat')->nullable();
            $table->string('nomor_telepon')->nullable();
            $table->timestamps();
        });
    }

    public function down(): void {
        Schema::dropIfExists('students');
    }
};
3

Jalankan Migration

Command ini membuat tabel di database.

Command Prompt
php artisan migrate
Tabel "students" berhasil dibuat di database MySQL
4

Buat Model Student

Model adalah class yang menghubungkan database dengan aplikasi.

Command Prompt
php artisan make:model Student

Edit file: app/Models/Student.php

app/Models/Student.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class Student extends Model {
    protected $fillable = [
        'nama',
        'email',
        'nomor_induk',
        'kelas',
        'jurusan',
        'alamat',
        'nomor_telepon'
    ];
};
5

Buat Controller

Controller adalah file yang menangani logika bisnis aplikasi.

Command Prompt
php artisan make:controller StudentController

Edit file: app/Http/Controllers/StudentController.php

app/Http/Controllers/StudentController.php
<?php
namespace App\Http\Controllers;
use App\Models\Student;
use Illuminate\Http\Request;

class StudentController extends Controller {
    public function index() {
        $students = Student::all();
        return view('students.index', compact('students'));
    }

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

    public function store(Request $request) {
        $request->validate([
            'nama' => 'required|max:255',
            'email' => 'required|email|unique:students',
            'nomor_induk' => 'required|unique:students'
        ]);
        
        Student::create($request->all());
        return redirect('students')->with('success', 'Siswa ditambahkan!');
    }

    public function edit(Student $student) {
        return view('students.edit', compact('student'));
    }

    public function update(Request $request, Student $student) {
        $request->validate([
            'nama' => 'required|max:255',
            'email' => 'required|email|unique:students,email,'.$student->id,
            'nomor_induk' => 'required|unique:students,nomor_induk,'.$student->id
        ]);
        
        $student->update($request->all());
        return redirect('students')->with('success', 'Siswa diupdate!');
    }

    public function destroy(Student $student) {
        $student->delete();
        return redirect('students')->with('success', 'Siswa dihapus!');
    }
}
6

Setup Routes

Edit file: routes/web.php

routes/web.php
use App\Http\Controllers\StudentController;
use Illuminate\Support\Facades\Route;

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

Route::resource('students', StudentController::class);
Route::resource otomatis membuat 7 route CRUD

4. Membuat Views (HTML Template)

1

Buat Folder dan File View

Buat folder: resources/views/students/

Kemudian buat 3 file di folder tersebut:

  1. index.blade.php - Tampilkan semua siswa
  2. create.blade.php - Form tambah siswa
  3. edit.blade.php - Form edit siswa
2

Buat View: Daftar Siswa (index)

File: resources/views/students/index.blade.php

resources/views/students/index.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Daftar Siswa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4">Daftar Siswa</h2>
    
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <a href="/students/create" class="btn btn-primary mb-3">Tambah Siswa</a>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Email</th>
                <th>Nomor Induk</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @forelse($students as $key => $student)
            <tr>
                <td>{{ $key + 1 }}</td>
                <td>{{ $student->nama }}</td>
                <td>{{ $student->email }}</td>
                <td>{{ $student->nomor_induk }}</td>
                <td>
                    <a href="/students/{{ $student->id }}/edit" class="btn btn-sm btn-warning">Edit</a>
                    <form action="/students/{{ $student->id }}" method="POST" style="display:inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Yakin?')">Hapus</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="text-center">Belum ada data siswa</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
</body>
</html>
3

Buat View: Form Tambah Siswa (create)

File: resources/views/students/create.blade.php

resources/views/students/create.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Tambah Siswa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2>Tambah Siswa Baru</h2>
    <a href="/students" class="btn btn-secondary mb-3">Kembali</a>

    <div class="row">
        <div class="col-md-6">
            <form action="/students" method="POST">
                @csrf

                <div class="mb-3">
                    <label>Nama Siswa</label>
                    <input type="text" class="form-control @error('nama') is-invalid @enderror" name="nama" value="{{ old('nama') }}" required>
                    @error('nama')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label>Email</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required>
                    @error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label>Nomor Induk</label>
                    <input type="text" class="form-control @error('nomor_induk') is-invalid @enderror" name="nomor_induk" value="{{ old('nomor_induk') }}" required>
                    @error('nomor_induk')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label>Kelas</label>
                    <input type="text" class="form-control" name="kelas">
                </div>

                <div class="mb-3">
                    <label>Jurusan</label>
                    <input type="text" class="form-control" name="jurusan">
                </div>

                <div class="mb-3">
                    <label>Alamat</label>
                    <textarea class="form-control" name="alamat" rows="3"></textarea>
                </div>

                <div class="mb-3">
                    <label>Nomor Telepon</label>
                    <input type="tel" class="form-control" name="nomor_telepon">
                </div>

                <button type="submit" class="btn btn-primary">Simpan</button>
                <a href="/students" class="btn btn-secondary">Batal</a>
            </form>
        </div>
    </div>
</div>
</body>
</html>
4

Buat View: Form Edit Siswa (edit)

File: resources/views/students/edit.blade.php

resources/views/students/edit.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Edit Siswa</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2>Edit Siswa: {{ $student->nama }}</h2>
    <a href="/students" class="btn btn-secondary mb-3">Kembali</a>

    <div class="row">
        <div class="col-md-6">
            <form action="/students/{{ $student->id }}" method="POST">
                @csrf
                @method('PUT')

                <div class="mb-3">
                    <label>Nama Siswa</label>
                    <input type="text" class="form-control @error('nama') is-invalid @enderror" name="nama" value="{{ old('nama', $student->nama) }}" required>
                    @error('nama')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label>Email</label>
                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email', $student->email) }}" required>
                    @error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label>Nomor Induk</label>
                    <input type="text" class="form-control @error('nomor_induk') is-invalid @enderror" name="nomor_induk" value="{{ old('nomor_induk', $student->nomor_induk) }}" required>
                    @error('nomor_induk')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label>Kelas</label>
                    <input type="text" class="form-control" name="kelas" value="{{ old('kelas', $student->kelas) }}">
                </div>

                <div class="mb-3">
                    <label>Jurusan</label>
                    <input type="text" class="form-control" name="jurusan" value="{{ old('jurusan', $student->jurusan) }}">
                </div>

                <div class="mb-3">
                    <label>Alamat</label>
                    <textarea class="form-control" name="alamat" rows="3">{{ old('alamat', $student->alamat) }}</textarea>
                </div>

                <div class="mb-3">
                    <label>Nomor Telepon</label>
                    <input type="tel" class="form-control" name="nomor_telepon" value="{{ old('nomor_telepon', $student->nomor_telepon) }}">
                </div>

                <button type="submit" class="btn btn-primary">Update</button>
                <a href="/students" class="btn btn-secondary">Batal</a>
            </form>
        </div>
    </div>
</div>
</body>
</html>

5. Testing dan Troubleshooting

1

Test Aplikasi CRUD

Pastikan semua berjalan dengan baik:

  1. Jalankan server: php artisan serve
  2. Buka: http://localhost:8000/students
  3. Klik "Tambah Siswa"
  4. Isi form dan klik "Simpan"
  5. Klik "Edit" untuk mengubah data
  6. Klik "Hapus" untuk menghapus data
2

Error dan Solusi Umum

Error: Database connection error

Solusi
MASALAH: MySQL belum running
SOLUSI:
1. Buka XAMPP Control Panel
2. Klik "Start" untuk MySQL
3. Tunggu status menjadi "Running" (hijau)
4. Refresh halaman aplikasi

Error: No such file or directory

Solusi
MASALAH: Database belum dibuat
SOLUSI:
1. Buka phpMyAdmin: http://localhost/phpmyadmin/
2. Login: username=root, password=kosong
3. Buat database baru: laravel_siswa
4. Jalankan migration: php artisan migrate

Error: The key APP_KEY is missing

Solusi
MASALAH: APP_KEY belum di-generate
SOLUSI:
Jalankan command:
php artisan key:generate

Error: CSRF token mismatch

Solusi
MASALAH: Form tidak punya @csrf
SOLUSI:
Tambahkan @csrf di setiap form:
<form method="POST" action="/...">
    @csrf
    <!-- input fields -->
</form>
3

Command Penting Laravel

Command Artisan
php artisan serve           # Jalankan server
php artisan migrate          # Jalankan migration
php artisan migrate:fresh    # Reset database
php artisan make:model Name  # Buat model
php artisan make:controller NameController  # Buat controller
php artisan make:migration create_table     # Buat migration
php artisan route:list       # Lihat semua route
4

Langkah Selanjutnya Setelah Kuasai CRUD

Hal-hal yang bisa Anda pelajari:

  1. Authentication dan Login System
  2. Database Relationships (One-to-Many, Many-to-Many)
  3. API Development (JSON Response)
  4. Form Validation (Advanced)
  5. File Upload dan Storage
  6. Send Email (SMTP)
  7. Testing dan Unit Tests
  8. Deployment ke Server
5

Resources Berguna

Link dokumentasi dan tutorial:

Links
Official Laravel Docs:
https://laravel.com/docs

Laracasts (Video Tutorial):
https://laracasts.com

Laravel API Documentation:
https://laravel.com/api

Laravel News:
https://laravel-news.com

Stack Overflow (Q&A):
https://stackoverflow.com (tag: laravel)