Tutorial Laravel 9 CRUD App Sekolah

MWI – Pada materi CRUD Tutorial Laravel 9 kali ini, kita akan membahas tentang App Sekolah. App Sekolah yang kita bahas diawali dengan 1 tabel kelas (grades) dengan struktur tabel tambahan grade dan amount.

Editor yang kita gunakan adalah Visual Studio Code dan browser Google Chrome. Asumsi awal composer dan web server (semisal XAMPP) sudah terinstall dan jalan sempurna.

Daftar Isi

Install Laravel 9

Untuk memulai installasi laravel versi terbaru dapat dilakukan dengan cara: (catatan composer dan web server sudah terisntall, PHP terinstall minimal 8)

composer create-project laravel/laravel appsekolah

Konfigurasi Database

Buat database dengan nama appsekolah dapat menggunakan phpMyAdmin lalu edit file .env sesuaikan dengan settingan di web server masing-masing, misal:

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

Buat Migration

Buat tabel menggunakan perintah migration pada terminal vscode. Alternatif lain buat tabel secara manual di phpMyAdmin. Perintah untuk membuat migration adalah dapat menggunakan make:migration bisa juga dengan make:model -m (opsi -m akan menambahkan migration pada pembuatan model yang diminta)

php artisan make:model Grade -m

Buka file xxxx_create_grades_table.php pada folder database/migrations (xxxx berisi tahun bulan tangal pembuatan migration) dan tambahkan 2 baris diantara id dan stamptime seperti ini

        Schema::create('grades', function (Blueprint $table) {
            $table->id();
            $table->string('grade', 25);
            $table->integer('amount');
            $table->timestamps();
        });

Berikan perintah untuk migrate (membuat tabel pada databse yang sudah dibuat)

php artisan migrate

bisa juga dengan menambahkan :fresh jika menghapus tabel dan membuat kembali
php artisan migrate:fresh

Cek pada database akan terlihat ad atabel baru bernama grades, contoh kali ini tambahkan secara manual pada tabel grades dengan 2 kali

Buat Controller

Untuk membuat controller kita dapat menggunakan make:controller NamaController dengan penamaan file menggunakan Camel Case (seperti punuk unta), dapat juga ditambahkan –resource agar function yang dibutuhkan langsung dibuatkan di controller.

php artisan make:controller GradeController --resource

Lalu buka file pada App/Http/Controller/GradeController.php yang sudah memilik tujuh function sebagai berikut:

1)index()
2)create()
3)store()
4)show()
5)edit()
6)update()
7)destroy()

Buka file app/Http/Controllers/GradeController.php dan ubah menjadi seperti ini, ubah pada function index, tambahkan 2 baris ini

        $grades = Grade::All();
        return view('grades.index', compact('grades'))

Klik kanan dan lakukan import class pada Grade atau tulis manual dipaling tambahkan

use App\Models\Grade;

Routes web.php

Tambahkan 1 baris perintah pada file web.php yang berada pada folder routes/web.php

Route::resource('grade', \App\Http\Controllers\GradeController::class);

Jalankan aplikasi dengan mengetikan php artisan serve pada terminal vs code, buka dahulu terminal pada view >> terminal (ctrl + `), lalu tulis

php artisan serve

klik pada link 127.0.0.1:8000 atau buka browser arahkan ke likn tersebut

Lanjutkan dengan index.blade.php pada folder resources/views/grades/ dengan isian

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Grade View Index</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Index View Grade</h1>
        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
        @endif
        <a href="grade/create" class="btn btn-primary">Tambah Kelas</a>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Kelas</th>
                    <th>Jumlah</th>
                    <th>Edit | Hapus</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($grades as $no => $item)
                    <tr>
                        <td>{{ ++$no }}</td>
                        <td>{{ $item->grade }}</td>
                        <td>{{ $item->amount }}</td>
                        <td>
                            <form action="{{ route('grade.destroy', $item->id) }}"
                                onsubmit="return confirm('Apakah Anda Yakin?')" method="POST">
                                {{-- <a class="btn btn-info" href="{{ route('grades.show', $item->id) }}">Show</a> --}}
                                <a class="btn btn-primary" href="{{ route('grade.edit', $item->id) }}">Edit</a>
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
    </script>
</body>

</html>

Tambahkan /grade pada alamat web dan mestinya akan muncul

Demikian Tutorial Laravel 9 awal ini untuk Read Data, semoga bermanfaat dari ms (ms)