Sabtu
**Tutorial Laravel CRUD Sederhana untuk Pemula**
---
### [Yang Diperlukan]
- PHP v8.3.12
- Laragon v6.0
- MySQL v8.0.30
- Nginx v1.22.0
- phpMyAdmin
- Laravel v12.8.1
- Visual Studio Code
- Git Bash / Cmder (dari Laragon)
---
## Bikin Project Laravel Baru
1. Buka aplikasi **Laragon**.
2. Klik kanan ikon Laragon > **Quick App > Laravel**.
3. Ketik nama project kamu (bebas, misalnya: `latihanukk`) lalu tekan Enter.
4. Tunggu hingga muncul pemberitahuan **"Prettier URL"**.
5. Buka **Visual Studio Code**.
6. Klik tombol **"Root"** di kanan bawah Laragon.
7. Seret folder Laravel project kamu ke Visual Studio Code.
---
## Pengaturan Database
1. Buka file **.env** di root project Laravel.
2. Ubah konfigurasi berikut:
```env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=latihanukk (atau nama project kamu)
DB_USERNAME=root
DB_PASSWORD=
```
3. Buka terminal dari Laragon (Bash / Cmder).
4. Jalankan:
```bash
php artisan migrate:fresh
```
---
## Membuat Tabel "Buku"
1. Jalankan perintah di terminal:
```bash
php artisan make:model Buku -m
```
2. Cari file migrasi `create_bukus_table.php` dengan `CTRL + P`.
3. Ubah isi file migrasi seperti berikut:
```php
public function up(): void
{
Schema::create('bukus', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->string('penulis');
$table->date('tahunTerbit');
$table->string('genre');
$table->timestamps();
});
}
```
**Penjelasan**: Kita membuat tabel baru dengan menggunakan fitur migrasi atau "_Eloquent object-relational mapper (ORM)_". Ini memudahkan kita berinteraksi dengan database melalui _model_ dan juga file _migratation_. Sehingga tidak perlu mengisi manual di **phpMyAdmin**.
**Catatan**: Apabila ada pertanyaan mengenai kodingan diatas yang kurang dimengerti harap diberitahu. kata _string_ dan juga _date_ adalah tipe _data_ itu sendiri. Tipe data yang biasa dipakai adalah:
- _integer_
- _string_
- _date_
- _text_
Hal ini disesuaikan dengan kubutuhan tipe _data_. Untuk lebih lanjut silahkan bisa check di dokumentasi [_Available Column Type_](https://laravel.com/docs/12.x/migrations#available-column-types)
4. Cari file `Buku.php`, tambahkan:
```php
protected $fillable = [
'judul',
'penulis',
'tahunTerbit',
'genre',
];
```
**Penjelasan**: Hal ini agar memudahkan dan mengizinkan kita mengisi data pada saat pembuatan **CRUD** dengan metode fungsi ` Buku::create(); `
5. Jalankan migrasi:
```bash
php artisan migrate
```
---
## Membuat Controller dan Routing
1. Buat controller resource:
```bash
php artisan make:controller BukuController --resource
```
2. Cari file **web.php** di folder `routes`.
3. Tambahkan route:
```php
use App\Http\Controllers\BukuController;
Route::resource('buku', BukuController::class);
```
**Penjelasan**: Agar kita bisa menggunakan `BukuController::class` kita harus menambahkan refrensi *Controller* tersebut dengan menambahkan `use App\Http\Controllers\BukuController;` pada atas _class_ kodingan kita. Ini biasanya otomatis, tapi apabila menambahkan _route_ ini mengakibatkan _error_ harap cek kondisi ini! Menggunakan _resource_ mempermudah dan mempercepat pembuatan route **CRUD**.
4. Cek di browser: `http://latihanukk.test/buku`.
Jika muncul halaman kosong (tidak 404), route berhasil.
---
## Setup View CRUD
1. Buat file `layout.blade.php` di `resources/views`.
2. Isi dengan struktur HTML dasar untuk tampilan.
```html
<!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>@yield('title')</title>
</head>
<body>
@yield('content')
</body>
</html>
```
**Penjelasan**: Agar kita bisa menggunakan kembali _layout_ diatas. Kita akan menggunakan _method_ `@yield()` sebagai _placeholder_ atau bagian yang ingin kita ubah sesuai dengan konteks bagian web atau _page_.
3. Buat folder `buku` di dalam `views`, lalu buat:
- `index.blade.php`
- `create.blade.php`
- `edit.blade.php`
(Semua bisa dibuat manual atau dengan perintah `php artisan make:component (Nama File) --view`)
---
## index.blade.php (READ)
1. Buka `index.blade.php`.
2. Tambahkan tampilan daftar buku (loop data, tombol edit/hapus).
```html
@extends('layout')
@section('title', 'Perpustakaan')
@section('content')
<h1>Perpustakaan Buku</h1>
<a href="{{ route('buku.create') }}">Tambahkan Buku Baru</a>
<table border="2px">
<tr>
<th>ID Buku</th>
<th>Judul Buku</th>
<th>Penulis Buku</th>
<th>Tahun Terbit Buku</th>
<th>Genre Buku</th>
<th>Aksi</th>
</tr>
@foreach ($bukus as $buku)
<tr>
<td>{{ $buku->id }}</td>
<td>{{ $buku->judul }}</td>
<td>{{ $buku->penulis }}</td>
<td>{{ $buku->tahunTerbit }}</td>
<td>{{ $buku->genre }}</td>
<td>
<form action="{{ route('buku.destroy', $buku->id) }}" method="post">
@csrf
@method('DELETE')
<a href="{{ route('buku.edit', $buku->id) }}">Edit</a>
<button type="submit">Hapus</button>
</form>
</td>
</tr>
@endforeach
</table>
@endsection
```
**Penjelasan**: Ini adalah _page_ atau tampilan antarmuka yang akan kita sering lihat dan gunakan. Ini akan menyangkut kepada _view, create, update,_ dan _delete_.
- `@extends('layout')` > Menggunakan file `layout.blade.php` sebagai fondasi tampilan kita, hal ini juga membuat kita dapat mengakses `yield()` pada `layout.blade.php`
- `section('')` > Kita mengubah teks atau data pada `yield()` di `layout.blade.php` sesuai dengan apa yang kita isi pada _section_ dan kategorinya.
- `{{route('')}}` > Ini mengarahkan kita kepada _route_ yang telah kita buat. Karena kita menggunakan _resource_ route ini akan otomatis dibuat sesuai dengan nama _function_ yang ada di `BukuController.php`.
- **PENJELASAN DIHENTIKAN DISINI DAN AKAN DITAMBAHKAN LAGI!!!**
3. Buka `BukuController.php`, dan ubah fungsi `index()`:
```php
public function index()
{
$bukus = Buku::all();
return view('buku.index', compact('bukus'));
}
```
---
## create.blade.php (CREATE)
1. Buka `create.blade.php`.
2. Tambahkan form input: judul, penulis, tahun terbit, genre.
```html
@extends('layout')
@section('title', 'Tambah Buku')
@section('content')
<h1>Tambah Buku Baru</h1>
<form action="{{ route('buku.store') }}" method="post">
@csrf
<div>
<label for="judul">Judul Buku:</label>
<input type="text" name="judul">
</div>
<div>
<label for="penulis">Penulis Buku:</label>
<input type="text" name="penulis">
</div>
<div>
<label for="tahunTerbit">Tahun Terbit Buku:</label>
<input type="date" name="tahunTerbit">
</div>
<div>
<label for="genre">Genre Buku:</label>
<input type="text" name="genre">
</div>
<button type="submit">Tambah Buku Baru</button>
</form>
@endsection
```
3. Di `BukuController.php`, ubah `create()`:
```php
public function create()
{
return view('buku.create');
}
```
4. Ubah `store()`:
```php
public function store(Request $request)
{
$validation = $request->validate([
'judul' => 'required',
'penulis' => 'required',
'tahunTerbit' => 'required|date',
'genre' => 'required',
]);
Buku::create($validation);
return redirect()->route('buku.index');
}
```
---
## edit.blade.php (UPDATE)
1. Buka `edit.blade.php`.
2. Tambahkan form seperti `create`, tapi sudah terisi data.
```html
@extends('layout')
@section('title', 'Update Buku')
@section('content')
<h1>Update Buku</h1>
<form action="{{ route('buku.update', $buku->id) }}" method="post">
@csrf
@method('PUT')
<div>
<label for="judul">Judul Buku:</label>
<input type="text" name="judul" value="{{ $buku->judul }}">
</div>
<div>
<label for="penulis">Penulis Buku:</label>
<input type="text" name="penulis" value="{{ $buku->penulis }}">
</div>
<div>
<label for="tahunTerbit">Tahun Terbit Buku:</label>
<input type="date" name="tahunTerbit" value="{{ $buku->tahunTerbit }}">
</div>
<div>
<label for="genre">Genre Buku:</label>
<input type="text" name="genre" value="{{ $buku->genre }}">
</div>
<button type="submit">Update Buku</button>
</form>
@endsection
```
3. Di `BukuController.php`, ubah `edit()`:
```php
public function edit(Buku $buku)
{
return view('buku.edit', compact('buku'));
}
```
4. Ubah `update()`:
```php
public function update(Request $request, Buku $buku)
{
$validation = $request->validate([
'judul' => 'required',
'penulis' => 'required',
'tahunTerbit' => 'required|date',
'genre' => 'required',
]);
$buku->update($validation);
return redirect()->route('buku.index');
}
```
---
## Hapus Data (DELETE)
1. Di `BukuController.php`, ubah fungsi `destroy()`:
```php
public function destroy(Buku $buku)
{
$buku->delete();
return redirect()->route('buku.index');
}
```
# Catatan
Ini masih belum jelas dan lengkap pembahasaannya. Jika ada kodingan yang tidak diketahui. Harap memberitahukan saya, kawan tercinta anda. Untuk sekarang penjelasan berhenti dan akan dilanjutkan pada **index.blade.php (READ) | NOMOR 2**
[11/4 18.23] Wilham Smk: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<!-- Isi konten -->
@yield('content')
</body>
</html>
[11/4 18.26] Wilham Smk: @extends('components.layout')
@section('title', 'Pendaftaran Beasiswa')
@section('content')
<p>Hello World!</p>
@endsection
[11/4 18.39] Wilham Smk: public function index()
{
return view('components.beasiswa.index');
}
[11/4 19.39] Wilham Smk: @extends('components.layout')
@section('title', 'Pendaftaran Beasiswa')
@section('content')
<div>
<h2>Pendaftaran Beasiswa</h2>
<a href="{{ route('mahasiswa.create') }}">Buat Beasiswa baru</a>
</div>
<div>
<table>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Email</th>
<th>No HP</th>
<th width="280px">Action</th>
</tr>
@foreach ($mahasiswas as $mahasiswa)
<tr>
<td> {{ $mahasiswa->id }} </td>
<td> {{ $mahasiswa->nama }} </td>
<td> {{ $mahasiswa->alamat }} </td>
<td> {{ $mahasiswa->email }} </td>
<td> {{ $mahasiswa->noHP }} </td>
<td>
<form action="{{route('mahasiswa.destroy', $mahasiswa->id)}}" method="post">
<a href="{{route('mahasiswa.show', $mahasiswa->id)}}">Show</a>
<a href="{{route('mahasiswa.edit', $mahasiswa->id)}}">Edit</a>
@csrf
@method('DELETE')
<button type="submit">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
</div>
@endsection
[11/4 19.42] Wilham Smk: public function index()
{
$mahasiswas = Mahasiswa::all();
return view('components.beasiswa.index', compact('mahasiswas'));
}
Komentar
Posting Komentar