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)
hai