Tutorial CRUD Laravel 8 - MySQL

Database

Salah satu konsep yang perlu dipelajari dan dipahami ketika mempelajari laravel
adalah bagaimana membuat suatu fungsi untuk melakukan tindakan penyimpanan,
pengambilan, pembaharuan, dan penghapusan suatu data untuk membangun suatu
aplikasi yang komplek.

Konsep ini biasa disebut dengan CRUD, yang merupakan singkatan

dari (CREATE, READ, UPDATE, dan DELETE). Pembuatannya juga akan mudah di
laravel dengan menggunakan cara-cara atau fitur yang ada; salah satunya adalah
seperti yang akan kita pelajari bersama disini.

Yang akan kita buat:

Kita akan membuat dan mempelajari aplikasi CRUD laravel 8 sederhana dengan
MySQL database sebagai penyimpanan / manajemen basis data.
• Instalasi Laravel
• Konfigurasi Database
• Membuat File Migrasi dan Model
• Membuat Kolom
• Eloquent: Mass Assignment
• Membuat Controller
• Membuat Route
• Insert Data
• Menampilkan Data
• Edit Data
• Hapus Data
• Selesai
Konfigurasi Database#
Silahkan buat database MySQL baru kemudian buka file .env pada projek untuk
dihubungkan dengan mengaturnya pada DB_DATABASE ; seperti dibawah ini.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_crud
DB_USERNAME=root
DB_PASSWORD=
Membuat File Migrasi dan Model#
Selanjutnya kita buat file migrasi baru untuk membuat tabel dan kolom
database. Kita gunakan perintah dibawah ini untuk membuat file migrasi sekaligus
membuat model untuk tabel yang dibuat.

php artisan make:model Post –migration

Sebagai contoh tabel yang dibuat yaitu tabel posts , jika ingin membuat dengan nama
lain silahkan disesuaikan. File model yang terbuat berada di direktori app >
Models dan file migrasi di direktori database > migrations.

Kita buka file migrasi yang telah dibuat tadi untuk kita tambahkan beberapa kolom.
Pada up() method silahkan buat seperti dibawah ini.
//...create_posts_table.php
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
Kemudian jalankan perintah php artisan migrate untuk mengirim ke database.
@laravel-app ➜ php artisan migrate

Migration table created successfully.

Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table (888.57ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table
(973.35ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated: 2019_08_19_000000_create_failed_jobs_table
(965.86ms)
Migrating: 2021_02_27_064548_create_posts_table
Migrated: 2021_02_27_064548_create_posts_table (288.21ms)
MariaDB [laravel_crud]> desc posts;
+------------+---------------------+------+-----+---------+---
-------------+
| Field | Type | Null | Key | Default |
Extra |
+------------+---------------------+------+-----+---------+---
-------------+
| id | bigint(20) unsigned | NO | PRI | NULL |
auto_increment |
| title | varchar(255) | NO | | NULL |
|
| body | text | NO | | NULL |
|
| created_at | timestamp | YES | | NULL |
|
| updated_at | timestamp | YES | | NULL |
|
+------------+---------------------+------+-----+---------+---
-------------+
5 rows in set (0.114 sec)
Sampai disini database, tabel, kolom telah dibuat.

Eloquent: Mass Assignment

Langkah selanjutnya kita buka model Post.php untuk membuat
properti $fillable dan menambahkan kolom tabel, seperti dibawah ini.
//app/Models/Post.php
class Post extends Model
{
use HasFactory;

protected $fillable = [
'title',
'body'
];
}
Mass Assignment merupakan salah satu fitur di laravel yang melindungi atau
memproteksi kolom / field suatu tabel dan menggunakan pernyataan tunggal yang
singkat dengan create method untuk menyimpan data melalui model.
Namun untuk menggunkan metode Mass Assignment agar dapat mengakses atau
berinteraksi dengan setiap kolom tabel yang menggunakan model, kita perlu
mendaftarkannya pada model tersebut; seperti yang kita buat diatas.
Membuat Controller
Kita lanjutkan untuk membuat sebuah controller. Kita akan membuat controller
dengan memanfaatkan fitur --resource yang menyediakan method / metode-
metode yang kita butuhkan yang sesuai konsep CRUD.

php artisan make:controller PostController --resource

Controller baru akan berada di direktori app > Http > Controllers.

Membuat Route
Selanjutnya kita buat route ke setiap method() di controller menggunakan resources
method. Silahkan buka route web.php dan tambahkan dibawah ini.
//routes/web.php
use App\Http\Controllers\PostController;

Route::resource('posts', PostController::class);

Jalankan perintah php artisan route:list untuk melihat daftar route yang ada.
@laravel-app ➜ php artisan route:list
+--------+-----------+-------------------+---------------+----
-----------------------------------------+------------+
| Domain | Method | URI | Name |
Action | Middleware |
+--------+-----------+-------------------+---------------+----
-----------------------------------------+------------+
| | GET|HEAD | / | |
Closure | web |
| | GET|HEAD | posts | posts.index |
App\Http\Controllers\PostController@index | web |
| | POST | posts | posts.store |
App\Http\Controllers\PostController@store | web |
| | GET|HEAD | posts/create | posts.create |
App\Http\Controllers\PostController@create | web |
| | GET|HEAD | posts/{post} | posts.show |
App\Http\Controllers\PostController@show | web |
| | PUT|PATCH | posts/{post} | posts.update |
App\Http\Controllers\PostController@update | web |
| | DELETE | posts/{post} | posts.destroy |
App\Http\Controllers\PostController@destroy | web |
| | GET|HEAD | posts/{post}/edit | posts.edit |
App\Http\Controllers\PostController@edit | web |
+--------+-----------+-------------------+---------------+----
-----------------------------------------+------------+
Insert Data
Setelah Model, Controller, Route telah dibuat, kita lanjutkan untuk mengerjakan
fungsi membuat data atau 'CREATE' meyimpan data ke database. Kita akan membuat
halaman dengan html form input dan membuat metode insert di controller.
Pertama silahkan buat folder baru dengan nama layouts di direktori views dan
buat sebuah file app.blade.php didalamnya, lalu silahkan tulis html di bawah. Kita
membuat struktur template inheritance dengan parent / main blade.

//views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>@yield('title')</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}"/>
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>

Kita buat sebuah file css. Silahkan buat folder baru pada direktori public dengan
nama css dan tambahkan file styles.css didalamnya.

Selanjutnya buat kembali folder baru di direktori views dengan nama post dan
file create.blade.php didalamnya dan tulis html dibawah ini.

//views/post/create.blade.php
@extends('layouts.app')
@section('title', 'Buat Post Baru')
@section('content')
<div class="wrapper">
<h1>Buat Post Baru</h1>

@if (session('success'))
<div class="alert-success">
<p>{{ session('success') }}</p>
</div>
@endif

@if ($errors->any())
<div class="alert-danger">
<ul>
 @foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

<form method="POST" action="{{ url('posts') }}">

@csrf
<input name="title" type="text" placeholder="Title...">
<input name="body" type="text" placeholder="Body...">
<button class="btn-blue">Submit</button>
</form>
</div>
@endsection

Pada atribut action form diatas, kita gunakan route dengan URI 'posts' atau bisa juga
route name (lihat route list) ke method store() di controller dan menampilkan pesan
berhasil dan atau keterangan error jika ada kesalahan validasi. Selanjutnya
pada create() dan store() method di PostController.php silahkan buat sepeti
dibawah ini.
use App\Models\Post;

...

public function create()

{
return view('post.create');
}

public function store(Request $request)

{
$request->validate([
'title' => 'required|unique:posts|max:150',
'body' => 'required',
]);

$input = $request->all();

$post = Post::create($input);

return back()->with('success',' Post baru berhasil

dibuat.');
}

Jangan lupa untuk memangil model model dari pada Post. Sampai disini kita bisa
mencobanya untuk insert menyimpan data baru. Jalankan php artisan serve dan
buka url http://localhost:8000/posts/create pada browser.
Menampilkan Data
Setelah selesai dan berhasil membuat proses untuk pembuatan atau
menyimpan data baru, kita lanjutkan untuk membuat fungsi menampilkan semua data
yang ada di database pada suatu halaman. Kita ke controller terlebih dahulu untuk
membuat membuat request mengambil data dan menentukan lokasi dimana akan
ditampilkan. Kita mengambil semua data yang ada pada tabel posts melalui model
menggunakan all() method. Pada index() method silahkan buat seperti dibawah
ini.

public function index()

{
$posts = Post::all();

return view('post.index', ['posts' => $posts]);

}
Kemudian buat file baru di folder views > post dengan nama index.blade.php dan
tulis Bahasa html dibawah ini.
//views/layouts/index.blade.php
@extends('layouts.app')
@section('title', 'Semua Post')
@section('content')
<div class="wrapper">
<h1 style="text-align: center;">Semua Post</h1>
<table style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Body</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($posts as $post)
<tr>
<td style="width: 200px" >{{ $post->title}}</td>
<td style="width: 500px" >{{ $post->body }}</td>
<td style="width: 100px"><button class="btn-
green">Edit</button></td>
<td style="width: 100px"><button class="btn-
red">Hapus</button></td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection

Simpan dan lihat pada browser dengan url http://localhost:8000/posts ; hasilnya

seperti gambar berikut.
Kita telah berhasil menampilkan semua data yang ada di database, dan kita tampilkan
dalam bentuk tabel. Pada tabel tersebut kita tambahkan juga dua buah button, edit
dan delete yang akan kita kerjakan sesuai fungsinya di tahap selanjutnya.

Edit Data
Kita ke tahap edit membuat fungsi pembaharuan data. Yang akan kita lakukan
adalah menentukan data mana yang dipilih untuk di edit. Kita akan membuat
permintaan untuk mengambil data tertentu berdasarkan index atau ID dari suatu data
record yang ada di database pada tabel posts. Pengambilan data untuk data tertentu
dan di tampilkan pada halaman tersendiri atau dinamis memerlukan parameter untuk
mengidentifikasi data tersebut. Kita akan membuat halaman khusus untuk edit dan
mengambil data yang ada untuk ditampilkan. Kita juga telah memiliki route dengan
parameter yang akan kita gunakan.

| | GET|HEAD | posts/{post}/edit | posts.edit |

App\Http\Controllers\PostController@edit | web |

Kita mulai membuat halaman edit. Silahkan buat file baru dengan
nama edit.blade.php di folder views > post dan tulis html dibawah ini.
//views/post/edit.blade.php
@extends('layouts.app')
@section('title', 'Post Edit')
@section('content')
<div class="wrapper">
<h1>Edit Post</h1>

@if (session('success'))
<div class="alert-success">
<p>{{ session('success') }}</p>
</div>
@endif

@if ($errors->any())
<div class="alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif

<form method="POST" action="{{ url('posts', $post->id ) }}">

@csrf
@method('PUT')
<input name="title" value="{{ $post->title }}" type="text"
placeholder="Title...">
 <input name="body" value="{{ $post->body }}" type="text"
placeholder="Body...">
<button class="btn-blue">Submit</button>
</form>
</div>
@endsection

Mari lihat pada form diatas. Karena html forms tidak mendukung method PUT dan
yang telah digunakan route update, kita menggunakan POST untuk mengirim
permintaan dan tetap menggunkan PUT yang dikirim dengan hidden method.
Selanjutnya kita buka PostController.php dan pada edit() dan update() method
silahkan dibuat seperti dibawah ini.

public function edit($id)

{
$post = Post::findOrFail($id);

return view('post.edit', [
'post' => $post
]);
}

public function update(Request $request, $id)

{
$request->validate([
'title' => 'required|unique:posts|max:150',
'body' => 'required',
]);

$post = Post::find($id)->update($request->all());

return back()->with('success',' Data telah diperbaharui!');

}
 Silahkan coba untuk melakukan edit data di halaman edit dengan url
http://localhost:8000/posts/{ID}/edit .

Hapus Data
Kita juga menggunkan parameter untuk menentukan data mana yang akan di
hapus. Kita tidak membutuhkan halaman khusus untuk memilih data / post lalu
menghapusnya. Kita hanya akan menambahkan route permintaan ke setiap data yang
ditampilkan dan mengambil ID dari data tersebut sebagai argument. Kita akan
menggunkan DELETE method pada route yang digunakan. Dan seperti halnya method
PUT yang tidak dapat digunkan untuk permintaan http pada form, kita juga akan
menggunkaan / mengirim hidden method untuk DELETE. Pada button 'Hapus' di
halaman posts silahkan buat seperti dibawah ini; kita tambahkan juga session dan
route di button edit.
...
<div class="wrapper">
<h1 style="text-align: center;">Semua Post</h1>
@if (session('success'))
<div class="alert-success">
<p>{{ session('success') }}</p>
</div>
@endif
...
@foreach ($posts as $post)
<tr>
<td style="width: 200px" >{{ $post->title}}</td>
<td style="width: 500px" >{{ $post->body }}</td>
<td style="width: 100px"><button class="btn-green"><a
href="{{ route('posts.edit', $post->id)
}}">Edit</a></button></td>
<form method="POST" action="{{ url('posts', $post->id ) }}">
@csrf
@method('DELETE')
<td style="width: 100px"><button class="btn-
red">Hapus</button></td>
</form>
</tr>
@endforeach
Kemudian pada PostController.php di destroy() method silahkan buat seperti
dibawah ini.
public function destroy($id)
{
$post = Post::find($id);

$post->delete();

return back()->with('success',' Penghapusan berhasil.');

}
Langkah terakhir tinggal mencobanya.

Selesai
Aplikasi crud laravel 8 telah selesai dibuat, semua fungsi telah dikerjakan. Semoga
bermanfaat dan silahkan dikembangkan.