Membuat CRUD dengan Laravel 11 dan Bootstrap

CRUD (Create, Read, Update, Delete) adalah operasi dasar dalam aplikasi berbasis database. Dalam panduan ini, kita akan membuat CRUD menggunakan Laravel 11 dan Bootstrap dengan tabel mahasiswa.

Persiapan

Sebelum mulai, pastikan Anda telah menginstal:

Composer: Untuk mengelola dependensi Laravel.
PHP >= 8.1: Laravel 11 membutuhkan versi PHP terbaru.
Database (MySQL/PostgreSQL/SQLite): Untuk menyimpan data mahasiswa.

1. Instalasi Laravel 11

Jalankan perintah berikut untuk membuat proyek Laravel versi terbaru:

composer create-project laravel/laravel belajar-crud
cd belajar-crud
php artisan serve

Akses proyek di browser: http://127.0.0.1:8000

2. Konfigurasi Database

Edit file .env dan sesuaikan pengaturan database:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=belajar_crud
DB_USERNAME=root
DB_PASSWORD=

3. Buat Model dan Migration

Jalankan perintah berikut untuk membuat model Mahasiswa dan file migrasi:

php artisan make:model Mahasiswa -m

Edit file migrasi di database/migrations/nama_file:

public function up(): void
{
    Schema::create('mahasiswas', function (Blueprint $table) {
        $table->id();
        $table->string('nama');
        $table->string('nim')->unique();
        $table->string('email')->unique();
        $table->string('jurusan');
        $table->timestamps();
    });
}

Jalankan migrasi:

php artisan migrate

4. Buat Controller

Jalankan perintah:

php artisan make:controller MahasiswaController --resource

Edit app/Http/Controllers/MahasiswaController.php:

MahasiswaController.php

use App\Models\Mahasiswa;
use Illuminate\Http\Request;
 
class MahasiswaController extends Controller
{
    public function index()
    {
        $mahasiswas = Mahasiswa::all();
        return view('mahasiswa.index', compact('mahasiswas'));
    }
 
    public function create()
    {
        return view('mahasiswa.create');
    }
 
    public function store(Request $request)
    {
        $request->validate([
            'nama' => 'required',
            'nim' => 'required|unique:mahasiswas',
            'email' => 'required|email|unique:mahasiswas',
            'jurusan' => 'required'
        ]);
 
        Mahasiswa::create($request->all());
        return redirect()->route('mahasiswa.index')->with('success', 'Mahasiswa berhasil ditambahkan!');
    }
 
    public function edit(Mahasiswa $mahasiswa)
    {
        return view('mahasiswa.edit', compact('mahasiswa'));
    }
 
    public function update(Request $request, Mahasiswa $mahasiswa)
    {
        $request->validate([
            'nama' => 'required',
            'nim' => 'required|unique:mahasiswas,nim,' . $mahasiswa->id,
            'email' => 'required|email|unique:mahasiswas,email,' . $mahasiswa->id,
            'jurusan' => 'required'
        ]);
 
        $mahasiswa->update($request->all());
        return redirect()->route('mahasiswa.index')->with('success', 'Mahasiswa berhasil diperbarui!');
    }
 
    public function destroy(Mahasiswa $mahasiswa)
    {
        $mahasiswa->delete();
        return redirect()->route('mahasiswa.index')->with('success', 'Mahasiswa berhasil dihapus!');
    }
}

5. Definisi Route

Tambahkan route di routes/web.php:

web.php

use App\Http\Controllers\MahasiswaController;
 
Route::resource('mahasiswa', MahasiswaController::class);

6. Buat View dengan Bootstrap

File layouts.app (Layout Utama) File ini digunakan untuk menyusun tampilan yang konsisten pada semua halaman. Letakkan di resources/views/layouts/app.blade.php.

File Layout (`resources/views/layouts/app.blade.php`)

app.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'CRUD Mahasiswa')</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ route('mahasiswa.index') }}">CRUD Mahasiswa</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
 
    <div class="container mt-4">
        @yield('content')
    </div>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Buat folder resources/views/mahasiswa/ lalu buat beberapa file berikut:

Tampilkan Data Mahasiswa (`resources/views/mahasiswa/index.blade.php`)

index.blade.php

@extends('layouts.app')
 
@section('content')
<div class="container">
    <h2 class="mb-3">Data Mahasiswa</h2>
    <a href="{{ route('mahasiswa.create') }}" class="btn btn-primary mb-3">Tambah Mahasiswa</a>
 
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
 
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Nama</th>
                <th>NIM</th>
                <th>Email</th>
                <th>Jurusan</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($mahasiswas as $mahasiswa)
                <tr>
                    <td>{{ $mahasiswa->nama }}</td>
                    <td>{{ $mahasiswa->nim }}</td>
                    <td>{{ $mahasiswa->email }}</td>
                    <td>{{ $mahasiswa->jurusan }}</td>
                    <td>
                        <a href="{{ route('mahasiswa.edit', $mahasiswa) }}" class="btn btn-warning btn-sm">Edit</a>
                        <form action="{{ route('mahasiswa.destroy', $mahasiswa) }}" method="POST" style="display:inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin hapus?')">Hapus</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection

Form Tambah Mahasiswa (`resources/views/mahasiswa/create.blade.php`)

create.blade.php

@extends('layouts.app')
 
@section('content')
<div class="container">
    <h2>Tambah Mahasiswa</h2>
    <form action="{{ route('mahasiswa.store') }}" method="POST">
        @csrf
        <div class="mb-3">
            <label>Nama</label>
            <input type="text" name="nama" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>NIM</label>
            <input type="text" name="nim" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Email</label>
            <input type="email" name="email" class="form-control" required>
        </div>
        <div class="mb-3">
            <label>Jurusan</label>
            <input type="text" name="jurusan" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-success">Simpan</button>
    </form>
</div>
@endsection

Form Edit Mahasiswa (`resources/views/mahasiswa/edit.blade.php`)

edit.blade.php

@extends('layouts.app')
 
@section('content')
<div class="container">
    <h2>Edit Mahasiswa</h2>
    <form action="{{ route('mahasiswa.update', $mahasiswa) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="mb-3">
            <label>Nama</label>
            <input type="text" name="nama" class="form-control" value="{{ $mahasiswa->nama }}" required>
        </div>
        <div class="mb-3">
            <label>NIM</label>
            <input type="text" name="nim" class="form-control" value="{{ $mahasiswa->nim }}" required>
        </div>
        <div class="mb-3">
            <label>Email</label>
            <input type="email" name="email" class="form-control" value="{{ $mahasiswa->email }}" required>
        </div>
        <div class="mb-3">
            <label>Jurusan</label>
            <input type="text" name="jurusan" class="form-control" value="{{ $mahasiswa->jurusan }}" required>
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
        <a href="{{ route('mahasiswa.index') }}" class="btn btn-secondary">Batal</a>
    </form>
</div>
@endsection

7. Menjalankan Aplikasi

Jalankan perintah berikut untuk melihat hasilnya:

php artisan serve

Akses di browser: http://127.0.0.1:8000/mahasiswa

Dengan tutorial ini, Anda telah berhasil membuat CRUD dengan Laravel 11 dan Bootstrap. 🎉

See all blogs

Membuat CRUD dengan Laravel 11 dan Bootstrap

Tags

Table of Contents (Click to Open)