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
Kita mulai dengan melakukan instalasi laravel. Silahkan gunakan salah satu perintah dibawah ini.
//composer composer create-project laravel/laravel laravel-crud //laravel installer laravel new laravel-crud
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.
Membuat Kolom
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 contoller 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 copas 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.
Kemudian silahkan copas css dibawah ini.
//public/css/styles.css
.container{
margin:1rem;
padding: 1rem;
border: 2px solid #444;
min-height:80vh;
background-color: #f9f9f9;
}
.wrapper h1{
padding-bottom: 14px;
border-bottom: 2px solid #444;
margin-top: 0;
}
a{
color: #fff;
text-decoration: none;
}
input{
padding: 6px;
border-radius: 2px;
border: 2px solid #444;
}
.btn-blue{
padding: 6px;
border-radius: 2px;
background: #3f51b5;
color: #fff;
border: 2px solid #3f51b5;
}
.alert-success p{
background: #009688;
padding: 12px;
color: #ffff;
}
.alert-danger ul{
background: #f34444;
color:#fff;
padding: 1rem 2rem;
}
table,
td {
border: 1px solid #333;
text-align:center;
}
tr{
height: 32px;
}
thead,
tfoot {
background-color: #3f51b5;
color: #fff;
}
.btn-red, .btn-green{
padding: 6px;
border-radius: 2px;
color: #fff;
width: 50%;
}
.btn-red{
border: 2px solid #e14949;
background: #e14949;
}
.btn-green{
border: 2px solid #1a887e;
background: #1a887e;
}
Selanjutnya buat kembali folder baru di direktori views dengan nama post dan file create.blade.php didalamnya dan copas 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 copas 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 copas 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.
Tambahan: silahkan lihat Cara Install Bootstrap di Laravel 8 jika ingin menggunakan css bootstrap untuk komponen tabel, button dan lainnya.