Tutorial CRUD pada Laravel 5.5 (Lengkap)
Pada artikel kali ini, saya akan memberikan tutorial melakukan CRUD (Create, Read, Update dan Delete) pada Laravel. Sebelumnya saya pernah memberikan tutorial CRUD laravel untuk versi 5.3. Nah, pada kesempatan kali ini, saya akan mencoba mengupdatenya dengan versi yang terbaru yaitu laravel 5.5.
Oke gak perlu basa basi lagi, mari kita mulai saja project membuat CRUD di laravel 5.5.
Install Laravel
Sebelum memulai melakukan CRUD di Laravel, tentunya kita harus install
laravel dong. Tapi buat kalian yang sudah punya projectnya bisa skip
tahap ini.
Sebelumnya saya telah membuatkan tutorial juga mengenai cara installnya,
jadi untuk kalian yang belum pernah melakukan instalasi laravel, bisa
langsung ke tutorial cara install laravel.
Jika kalian menggunakan linux atau macOS, silahkan lakukan konfigurasi
permissions pada beberapa direktori laravel. Namun, jika kalian
menggunakan windows bisa melewati bagian ini.
sudo chmod -R 777 storagesudo chmod -R 777 bootstrap/cachephp artisan serve pada terminal maka akan muncul tampilan berikut pada browser.
Konfigurasi Database di Laravel
Setelah melakukan instalasi, tahap selanjutnya adalah melakukan
konfigurasi database untuk digunakan laravel. Kalian cukup membuat
database baru, dalam hal ini saya akan menggunakan database bernama
kodehero_crud. Kalian bisa menamai database dengan nama apapun. Selanjutnya, buka file .env pada direktori root laravel, dan lakukan konfigurasi seperti berikut.DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=kodehero_crud // Ganti dengan nama database kalian
DB_USERNAME=root // Ganti dengan username database kalian
DB_PASSWORD= // Ganti dengan password user database kalian
Membuat Model dan Migrations
Langkah selanjutnya adalah membuat model dan migrations. Sebelumnya saya pernah membuatkan tutorial mengenai pembuatan migrations menggunakan php artisan.
Tetapi prosesnya masih membuat model dan migrations satu persatu. Kali
ini akan saya ajarkan bagaimana membuat model dan migrations-nya dalam
sekali perintah php artisan. Silahkan buka terminal yang kalian biasa
gunakan dan panggil perintah berikut.
php artisan make:model Article -m
Pada perintah diatas, kita membuat model dengan nama
Article. Kemudian, dengan menambahkan perintah -m dibelakangnya, maka laravel akan secara otomatis membuatkan migration-nya sekaligus. Praktis kan. Konfigurasi file migrations
Setelah berhasil membuat file migrations dengan perintah diatas.
Sekarang saatnya mengisi kodingnya. buka file migrations yang telah
dibuat tadi pada direktori
database\migrations\xxxx_xx_xx_xxxxxx_create_articles_table.php. Pada method up, tambahkan beberapa koding berikut.public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('content');
$table->timestamps();
$table->softDeletes();
});
}
Pada kode diatas, saya hanya menggunakan 2 atribut saja untuk tabel
articles supaya sederhana. Selain itu saya juga menggunakan softDeletes(), supaya nantinya operasi hapus data di tabel kita menggunakan prosedur soft delete bukan permanen delete.Soft Delete merupakan metode yang sangat disarankan saat kalian melakukan operasi hapus data pada database, sehingga data tidak benar-benar hilang. Hal ini untuk mengantisipasi jika data yang kita hapus masih memiliki relasi dengan data di tabel lain yang tentunya akan mengakibatkan error saat data tersebut dihapus secara permanen.
Jika sudah, silahkan lakukan migrasi dengan perintah berikut.
php artisan migrate
Jika terdapat error specified key was too long, saya sudah menyiapkan tutorial untuk mengatasinya. silahkan baca solusi laravel error specified key was too long.
Konfigurasi file model Article
Setalah melakukan konfigurasi pada file migrations, sekarang saatnya kita melakukan konfigurasi di bagian modelnya. Silahkan buka file modelnya, biasanya terdapat pada direktori app\Article.php. Pada file model ini, saya hanya akan menambahkan beberapa atribut saja.<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
class Article extends Model
{
// Digunakan untuk menggunakan soft delete secara default saat menghapus data
use SoftDeletes;
protected $fillable = [
'title', 'content'
];
protected $dates = ['deleted_at'];
}
Oke, cukup ini saja yang perlu kita lakukan pada modelnya. Selanjutnya adalah mengatur routingnya.
Konfigurasi Route di Laravel
Buka file route yang ada di direktori routes\web.php. Tambahkan baris kode berikut.
Route::resource('article', 'ArticleController');
Pada route diatas, saya menggunakan 
resource, sehingga kita tidak perlu lagi membuat route untuk CRUD satu persatu, Semua otomatis disediakan oleh laravel. Membuat Controller Resource untuk CRUD
Untuk membuat controller, cukup dengan menggunakan perintah php artisan saja. Tapi karena kita menggunakan route
resource, maka kita akan membuat controller dengan resource juga. Lakukan perintah berikut pada terminal.php artisan make:controller ArticleController -r
Perhatikan tambahan
-r pada perintah diatas. Fungsinya
adalah untuk membuat controller dengan tambahan fungsi untuk CRUD secara
otomatis. Jika kalian buka file controller yang telah dibuat pada
direktori app\Http\Controllers\ArticleController.php, maka kalian akan menemukan method index(), create(), store(), show(), edit(), update() dan destroy(). Fungsi inilah yang akan kita gunakan untuk membuat CRUD. Oke, silahkan masukan koding berikut untuk membuat CRUD-nya.<?php
namespace App\Http\Controllers;
use App\Article;
use Illuminate\Http\Request;
class ArticleController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$articles = Article::orderBy('id', 'DESC')->paginate(5);
return view('article.index', compact('articles'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('article.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required',
'content' => 'required'
]);
$article = Article::create($request->all());
return redirect()->route('article.index')->with('message', 'Artikel berhasil dibuat!');
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$article = Article::findOrFail($id);
return view('article.show', compact('article'));
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$article = Article::findOrFail($id);
return view('article.edit', compact('article'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$this->validate($request, [
'title' => 'required',
'content' => 'required'
]);
$article = Article::findOrFail($id)->update($request->all());
return redirect()->route('article.index')->with('message', 'Artikel berhasil diubah!');
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$article = Article::findOrFail($id)->delete();
return redirect()->route('article.index')->with('message', 'Artikel berhasil dihapus!');
}
}
Kodingan diatas, dibuat sesederhana mungkin supaya mudah dipahami. Dalam
kasus yang sesungguhnya, mungkin akan lebih rumit lagi prosesnya. Tapi
karena ini hanya contoh CRUD yang sederhana, maka saya buat sesimpel
mungkin.
Membuat View untuk CRUD di Laravel
Langkah berikutnya adalah membuat view. Karena pada bagian ini banyak
file yang perlu dibuat secara terpisah, maka saya akan bagi menjadi
beberapa sub bab.
Membuat layouts di laravel
Untuk membuat layouts, caranya cukup mudah. Silahkan buat folder baru pada direktori
resources\views\. Kemudian buat file baru pada folder layouts yang telah kita buat. Pada tutorial ini saya menggunakan nama app.blde.php untuk file layoutnya. Jadi buat file baru pada direktori resources\views\layouts\app.blade.php. Supaya sederhana, saya akan menggunakan html biasa dengan sentuhan bootstrap.<!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">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>Kodehero - CRUD</title>
<style>
.martop-sm {margin-top: 15px;}
.martop-lg {margin-top: 70px;}
</style>
</head>
<body>
<div class="container martop-lg">
<div class="panel panel-default">
<div class="panel-body">@yield('content')</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>Membuat View untuk Index
Index disini, dimaksudkan untuk proses Read pada rangkaian CRUD. Jadi
pada view ini, nantinya semua data akan ditampilkan disini. Buat file
baru
resources\views\article\index.blade.php.@extends('layouts.app')
@section('content')
<a href="{{ route('article.create') }}" class="btn btn-info btn-sm">Artikel Baru</a>
@if ($message = Session::get('message'))
<div class="alert alert-success martop-sm">
<p>{{ $message }}</p>
</div>
@endif
<table class="table table-responsive martop-sm">
<thead>
<th>ID</th>
<th>Title</th>
<th>Action</th>
</thead>
<tbody>
@foreach ($articles as $article)
<tr>
<td>{{ $article->id }}</td>
<td><a href="{{ route('article.show', $article->id) }}">{{ $article->title }}</a></td>
<td>
<form action="{{ route('article.destroy', $article->id) }}" method="post">
{{csrf_field()}}
{{ method_field('DELETE') }}
<a href="{{ route('article.edit', $article->id) }}" class="btn btn-warning btn-sm">Ubah</a>
<button type="submit" class="btn btn-danger btn-sm">Hapus</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
@endsection
Perlu diperhatikan disini, bahwa untuk penghapusan data sebaiknya kita
menggunakan method post, bukan menggunakan link yang mengarah ke route
destroy. Selain itu, karena kita menggunakan route resource, maka
otomatis laravel meminta kita untuk mengirim data melalui HTTP REST,
tetapi karena pada dasarnya HTML Form tidak support hal tersebut, kita
harus menggunakan method spoofing. Dalam hal ini, saya menggunakan
{{ method_field('DELETE') }}
untuk mensimulasikan method DELETEMembuat View untuk Create
Untuk Create, tentunya kita akan membuat sebuah form. Buat file baru pada direktori
resources\views\article\create.blade.php. Silahkan lihat contohnya dibawah.@extends('layouts.app')
@section('content')
<h4>Artikel Baru</h4>
<form action="{{ route('article.store') }}" method="post">
{{csrf_field()}}
<div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
<label for="title" class="control-label">Title</label>
<input type="text" class="form-control" name="title" placeholder="Title">
@if ($errors->has('title'))
<span class="help-block">{{ $errors->first('title') }}</span>
@endif
</div>
<div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">
<label for="content" class="control-label">Content</label>
<textarea name="content" cols="30" rows="5" class="form-control"></textarea>
@if ($errors->has('content'))
<span class="help-block">{{ $errors->first('content') }}</span>
@endif
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Simpan</button>
<a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
</div>
</form>
@endsectionMembuat View untuk Show
Untuk Show, kita hanya perlu menampilkan data salah satu artikel saja. Buat file baru pada direktori
resources\views\article\show.blade.php dan gunakan contoh kode dibawah.@extends('layouts.app')
@section('content')
<h4>{{ $article->title }}</h4>
<p>{{ $article->content }}</p>
<a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
@endsectionMembuat View untuk Edit
Untuk edit kurang lebih mirip dengan saat membuat view untuk Create.
Bedanya, disini, kita harus menampilkan data yang akan di edit pada
form. Buat file baru pada direktori
resources\views\article\edit.blade.php dan gunakan contoh kode dibawah.@extends('layouts.app')
@section('content')
<h4>Ubah Artikel</h4>
<form action="{{ route('article.update', $article->id) }}" method="post">
{{csrf_field()}}
{{ method_field('PUT') }}
<div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
<label for="title" class="control-label">Title</label>
<input type="text" class="form-control" name="title" placeholder="Title" value="{{ $article->title }}">
@if ($errors->has('title'))
<span class="help-block">{{ $errors->first('title') }}</span>
@endif
</div>
<div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">
<label for="content" class="control-label">Content</label>
<textarea name="content" cols="30" rows="5" class="form-control">{{ $article->content }}</textarea>
@if ($errors->has('content'))
<span class="help-block">{{ $errors->first('content') }}</span>
@endif
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Simpan</button>
<a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
</div>
</form>
@endsection
Sama seperti DELETE diatas, kita harus menggunakan method spoofing untuk
menggunakan PUT pada proses update. Dalam hal ini, saya menggunakan
{{ method_field('PUT') }} untuk mensimulasikan method PUT.Percobaan Aplikasi
Setalah bersusah payah diatas, sekarang saatnya kita mencoba aplikasi kita. 
Kita jalankan dulu servernya dengan perintah php artisan serve. Selanjutnya buka browser dan arahkan ke URL localhost:8000/article. Jika berhasil maka akan muncul tampilan seperti dibawah.
Kemudian, jika kita klik tombol Artikel Baru, maka akan diarahkan ke
view Create. Jika berhasil maka tampilannya akan seperti ini.
Silahkan coba untuk membuat artikel baru, jika ada kesalahan input data,
maka aplikasi akan kembali ke halaman tersebut dan menampilkan pesan
error. Namun, jika berhasil maka aplikasi akan kembali ke halaman index
dengan pesan sukses.
Selanjutnya adalah percobaan untuk melihat data satuan. Caranya, klik
saja link yang ada pada judul artikel. Maka akan terlihat tampilan
artikel secara utuh.
Berikutnya, adalah percobaan ubah data. Jika kalian tekan tombol Ubah,
maka aplikasi akan menuju view edit dengan tampilan sebagai berikut.
Sama seperti create, ketika tombol Simpan ditekan maka aplikasi akan
mengecek input dari user, jika tidak ada kesalahan maka aplikasi akan
kembali ke halaman index dan menampilkan pesan sukses.
Yang terakhir adalah proses delete. Jika tombol Hapus ditekan, maka data
akan dihapus. Namun, hapus disini tidak secara permanen, melainkan
hanya sementara menggunakan metode soft delete. Sehingga jika data ini
nantinya punya relasi dengan data lain, tidak akan terjadi error jika
dihapus.
Sumber : https://www.kodehero.com/2017/12/tutorial-crud-pada-laravel-55-lengkap.html
