1. Belajar Membuat Modul CRUD di
Laravel 5
Source : http://karedok.net/teknologi/belajar-membuat-modul-crud-di-laravel-5
Shorturl : https://go.karedok.net/BelajarCRUD
Author : Welly Rosadi
welly@karedok.net
"Bagaimanapun, Jalani aja..."
oOo
1

2. Setelah beberapa waktu yang lalu kita sudah bisa menjalankan Laravel + Xampp di
Windows. Kali ini kita akan belajar memahami dasar pemrograman, yaitu CRUD alias
Create, Read, Update, Delete. Yaitu modul yang digunakan oleh sebuah aplikasi. Oleh
karena itu memahaminya bisa dibilang menjadi suatu keharusan.
Kita akan belajar membuat modul crud sederhana dengan framework Laravel 5 (pada saat
tulisan ini dibuat, yang digunakan versi 5.6). Yaitu bagaimana membuat modul untuk
menginput informasi, menyimpan, mengedit, dan juga menghapusnya. Untuk keperluan
ini, Laravel yang merupakan framework PHP MVC populer memiliki fitur bawaan yang
mempermudah kita dalam membuat modul CRUD.
Tahapan yang akan dilakukan yaitu:
1. Install Laravel
2. Konfigurasi database
3. Membuat file model, controller, dan migration
4. Konfigurasi file migration dan model
5. Menambahkan Route
6. Konfigurasi function Controller & Blade file
7. Menjalankan aplikasi
Install Laravel
composer create-project --prefer-dist laravel/laravel belajar-laravel
Ingat, sebelum menjalankan perintah ini pastikan sudah menginstall composer.
Konfigurasi Database
Buatkan dulu database MySQL, dan masukkan informasi databasenya ke dalam file .env .
Kalau belum ada, copy file .env.example dan beri nama file .env . Cari dan isikan bagian:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=username_mysql
DB_PASSWORD=password
Jangan lupa untuk merubah bagian DB_DATABASE, DB_USERNAME, DB_PASSWORD
sesuai konfigurasi masing-masing.
Membuat file Model, Controller, dan Migration
Kita akan membuat file model, controller, dan file migration dengan menjalankan perintah
berikut:
2

3. Model & Migration
php artisan make:model Post -m
Dengan tambahan -m Laravel juga akan membuat file migration selain membuat model.
Respon dibawah ini tanda kalau file model dan migration berhasil dibuat
Model created successfully.
Created Migration: 2018_04_21_043514_create_posts_table
Controller
php artisan make:controller PostController --resource --model=Post
Umumnya, file controller terdiri dari beberapa fungsi untuk menampilkan, menyimpan,
update, dan hapus data. Agar Laravel otomatis membuat bagian-bagian tersebut, kita
tambahkan --resource di perintahnya. Sedangkan --model=Post adalah perintah untuk
menghubungkan PostController dengan Model Post.
Sebenarnya kita bisa menjalankan kedua hal diatas dengan satu perintah, namun
terkadang kita hanya memerlukan sebuah controller tanpa perlu membuat model. Jadi
sekaligus saya menunjukkan bagaimana membuat controller tanpa perlu membuat model.
Konfigurasi file migration & model
Sekarang kita akan konfigurasi file migration, yaitu file yang berfungsi untuk membuat
table di database. Semua file migration disimpan di direktori database/migrations. Kita
akan edit file migration untuk model Post. Nama filenya bisa dilihat saat kita membuat file
model pada langkah sebelumnya, dalam tulisan ini berarti
2018_04_21_043514_create_posts_table.php . Edit sehingga menjadi seperti berikut
<?php
use IlluminateSupportFacadesSchema;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateDatabaseMigrationsMigration;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up() { Schema::create('posts', function (Blueprint $table)
{
$table->increments('id');
$table->string('judul');
$table->text('isi');
$table->timestamps();
3

4. });
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Kita jalankan migrate untuk membuat table di database.
php artisan migrate
Respon berikut menandakan Laravel berhasil membuat tabel di database:
Migration table created successfully.
Migrating: 2018_04_21_043514_create_posts_table
Migrated: 2018_04_21_043514_create_posts_table
Sekarang kita akan mengedit file modelnya. Secara default, file model terletak di direktori
app. Di langkah sebelumnya modelnya kita beri nama Post, kita akan cari file Post.php di
folder app. Edit file tersebut sehingga menjadi
<?php
namespace App;
use IlluminateDatabaseEloquentModel;
class Post extends Model
{
protected $fillable = [
'judul', 'isi'
];
}
Menambahkan Route
Pada tahap ini kita akan menambahkan route untuk post sehingga nanti kita bisa akses
konten post dengan url misalnya http://karedok.dev/post. Caranya dengan menambahkan
bari berikut di file routes/web.php .
Route::resource('post','PostController');
4

5. Konfigurasi CRUD: function Controller & Blade file
File controller secara default akan diletakkan di direktori app/Http/Controllers. Buka file
PostController.php, di dalamnya kita akan menemukan tujuh method yang sudah dibuat.
<?php
namespace AppHttpControllers;
use AppPost;
use IlluminateHttpRequest;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
public function index()
{
//
}
/**
* Show the form for creating a new resource.
*
* @return IlluminateHttpResponse
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param IlluminateHttpRequest $request
* @return IlluminateHttpResponse
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return IlluminateHttpResponse
*/
5

6. public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param IlluminateHttpRequest $request
* @param int $id
* @return IlluminateHttpResponse
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return IlluminateHttpResponse
*/
public function destroy($id)
{
//
}
}
Function dan View Untuk Menampilkan Daftar Post
Untuk membuat halaman yang menampilkan daftar post, kita akan melakukan edit di
bagian method index(). Sehingga bagian tersebut menjadi seperti berikut:
public function index()
{
$post = Post::latest()->paginate(5);
return view('post.index',compact('post'));
}
Penjelasan:
• Post::
membuka relasi ke class Post di dalam model
• latest()
untuk sortir daftar secara descending (yang terbaru tampilkan lebih dulu)
• paginate(angka)
membuat paging sesuai jumlah angka dalam kurung
Sekarang kita akan membuat file untuk menampilkan data. Secara bawaan, Laravel sudah
menyediakan template dengan bootstrap sebagai core css nya. Jadi, buat yang sudah
terbiasa menggunakan bootstrap, tidak akan kesulitan lagi. Untuk kesempatan kali ini kita
akan gunakan template bawaannya.
6

7. Secara default, semua view disimpan di resources/views. Untuk keperluan ini kita akan
membuat direktori dengan nama post. Sedangkan untuk bagian index(), kita akan
membuat file di dalam direktori Post dengan nama index.blade.php . Tentu saja bisa
menggunakan nama lain sesuai selera.
cd resources/views
mkdir post
touch post/index.blade.php
Oh iya, semua file yang digunakan untuk view harus ditambahkan .blade di belakang
namanya. Kenapa begitu? Ya, begitulah aturan dari Laravelnya. Hehehe...
Buka file index.blade.php dan isi seperti ini:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
@if ($pesan = Session::get('pesan'))
<div class="alert alert-success">
<p>{{ $pesan }}</p>
</div>
@endif
<div class="card">
<div class="card-body">
<div class="float-left">
<h2>Daftar Konten</h2>
</div>
<div class="float-right">
<a class="btn btn-primary" href="{{ route('post.create') }}"> Post
baru</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>No.</th>
<th>Judul</th>
<th>Isi</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($post as $k=>$data)
<tr>
<td>{{ $post->firstItem() + $k }}</td>
<td>{{ $data->judul }}</td>
<td>{{ str_limit($data->isi, $limit = 250, $end =
'...') }}</td>
<td>
<div class="btn-group" role="group">
7

8. <button id="aksiGroup" type="button" class="btn btn-
secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Aksi
</button>
<div class="dropdown-menu" aria-labelledby="aksiGroup">
<a class="btn btn-info dropdown-item"
href="{{ route('post.show',$data->id) }}">Detail</a>
<a class="btn btn-warning dropdown-item"
href="{{ route('post.edit',$data->id) }}">Edit</a>
<form action="{{ route('post.destroy',$data->id) }}"
method="POST">
@csrf
@method('DELETE')
<input type="hidden" name="judul"
value="{{ $data->judul }}">
<button type="submit" class="btn btn-danger dropdown-
item">Hapus</button>
</form>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
{!! $post->links() !!}
</div>
</div>
</div>
</div>
@endsection
Funtion dan View Untuk Input Data
Langkahnya sama, kita buat controller nya terlebih dahulu baru kemudian view nya. Buka
kembali file PostController.php, kali ini kita akan mengedit bagian create() & store().
Pada bagian create(), edit sehingga menjadi seperti berikut:
public function create()
{
return view('post.create');
}
Untuk bagian store(), isinya menjadi seperti berikut:
public function store(Request $request)
{
request()->validate([
'judul' => 'required',
'isi' => 'required',
]);
Post::create($request->all());
8

9. $request->session()->flash('pesan','Post '.$request['judul'].' berhasil
disimpan.');
return redirect()->route('post.index');
}
request()->validate kita melakukan validasi formulir. Dalam contoh ini kita
memberikan required, yang artinya harus diisi.
Post::create($request-
>all());
Menyimpan data ke dalam database.
$request->session()-
>flash()
Membuat session sementara berisi pesan.
return redirect() Mengalihkan ke halaman index.
Buat sebuah file baru di direktori Post dan beri nama create.blade.php . Di dalamnya
isikan seperti berikut:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-body">
<h2>Post baru</h2>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('post.store') }}" method="POST">
@csrf
<div class="form-group row">
<div class="col-md-12">
<strong>Judul:</strong>
<input type="text" name="judul" class="form-control"
placeholder="Judul">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<strong>Isi:</strong>
<textarea class="form-control" rows="5" name="isi"
placeholder="Isi post"></textarea>
9

10. </div>
</div>
<div class="form-group row">
<div class="col-md-6">
<a href="{{ route('post.index') }}" class="btn btn-
secondary">Kembali</a>
</div>
<div class="col-md-6 text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Function dan View untuk menampilkan detail
Pada bagian show($id) di controller, ubah menjadi berikut:
public function show(Post $post)
{
return view('post.show',compact('post'));
}
Buat file view dengan nama show.blade.php isikan dengan:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-body">
<h2>{{ $post->judul }}</h2>
<p>{{ $post->isi }}</p>
<div class="form-group row">
<div class="col-md-6">
<a href="{{ route('post.index') }}" class="btn">Kembali</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
10

11. @endsection
Function dan View untuk melakukan edit
Pada bagian edit($id) ubah menjadi:
public function edit(Post $post)
{
return view('post.edit',compact('post'));
}
Pada bagian update($id) ubah menjadi:
public function update(Request $request, Post $post)
{
request()->validate([
'judul' => 'required',
'isi' => 'required',
]);
$post->update($request->all());
$request->session()->flash('pesan','Post '.$request['judul'].' berhasil
diperbarui.');
return redirect()->route('post.index');
}
Buat file baru, beri nama edit.blade.php dengan isi sebagai berikut:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-body">
<h2>Edit Post</h2>
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('post.update',$post->id) }}" method="POST">
@csrf
@method('PUT')
<div class="form-group row">
11

12. <div class="col-md-12">
<strong>Judul:</strong>
<input type="text" name="judul" class="form-control" value="{{
$post->judul }}">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<strong>Isi:</strong>
<textarea class="form-control" rows="10" name="isi">{{ $post-
>isi }}</textarea>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<a href="{{ route('post.index') }}" class="btn btn-
secondary">Kembali</a>
</div>
<div class="col-md-6 text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Function dan View untuk menghapus data
Pada bagian destroy($id), ubah menjadi:
public function destroy(Request $request, Post $post)
{
$post->delete();
$request->session()->flash('pesan','Post '.$request['judul'].' berhasil
dihapus.');
return redirect()->route('post.index');
}
Jalankan Aplikasi
Sekarang, kita akan tes aplikasi CRUD sederhana yang sudah kita buat. Untuk membuka
halamannya. Misalkan dalam tulisan ini adalah http://karedok.dev/post . Kalau semua
konfigurasi sudah sesuai, maka akan tampil halaman berikut:
12

13. Selanjutnya kita akan coba membuat postingan pertama, dengan klik tombol Post baru
atau ke user /post/create. Tampilan halamannya seperti berikut:
Coba isi dan tekan tombol submit. Seharusnya sudah tampil di daftar post.
Buat sampai ada 6 post untuk melihat fungsi paging yang sudah dibuat. Fungsi lainnya
bisa dicoba untuk memastikan aplikasi berhasil dibuat.
Oh iya, tentu saja kita bisa memberikan autentikasi pada aplikasi ini jika memang
dibutuhkan. Caranya, kita akan bahas pada kesempatan lain.
Semoga bermanfaat dan selamat mencoba.
PDF: https://go.karedok.net/bljrCRUDpdf
Source Code: https://github.com/karedokNetwork/belajar_crud
oOo
13

14. Mochamad Welly Rosadi
Suami dari Erni Yunita, Ayah dari satu orang putra dan dua orang putri,
seorang biasa-biasa saja yang menyukai Travelling, Ikan Hias, Gadget
dan Teknologi. Lahir di Jakarta, besar di Tangerang, dan menuntaskan
pendidikan di Bandarlampung. Di kota yang disebutkan terakhirlah,
saya bertemu seseorang yang kemudian menjadi teman hidup.
Karedok.Net adalah refleksi dari kecintaan saya terhadap aktifitas menulis dan teknologi,
walaupun diselingi oleh tulisan sang Istri tentang pelajaran sekolah. Oret-oretan dalam
blog, merupakan catatan dari pengalaman sendiri, terjemahan bebas dari artikel
berbahasa asing, sekedar fork dari tulisan orang, dan juga sekedar melanjutkan tulisan
orang lain.
Selain menulis di Karedok.Net, saya juga salah satu Author di Tekmagz.ID, yaitu portal
informasi Teknologi dan Informasi. Sebuah portal informasi yang dibangun bersama
kawan-kawan semasa masih bekerja di Lazada Indonesia.
Untuk komunikasi bisa menghubungi via email ke welly@karedok.net atau bisa juga ke
facebook https://www.facebook.com/welly.rosadi kalau mau via twitter bisa ke
https://twitter.com/WellyRM
14