Pada postingan kali ini saya akan sharing cara membuat proses Create, Read, Update, Delete atau yang lebih dikenal dengan istilah CRUD :D.
Ok langsung saja :
Create new project
untuk nama project-nya saya buat dengan nama crud
composer create-project --prefer-dist laravel/laravel crud
Create database
setelah membuat project laravel, selanjutnya kita buat database dan table di mysql, untuk nama databasenya kita buat sama denga nama projectnya yaitu : crud. Setelah itu kita buat table dengan nama Books dan struktur tablenya seperti berikut :
sampai disini persiapan awal sudah selesai, selanjutnya buka folder project laravel yang sudah kita buat dan ikut step-step berikut :
Setting koneksi
untuk setting koneksi kita buka file .env dan kita rubah menjadi seperti berikut :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crud
DB_USERNAME=root
DB_PASSWORD=
Tambahkan bootstrap css
agar tampilan web yang akan kita buat lebih baik, kita tambahkan css bootstrap di project kita. jika belum punya boostrap bisa di download Disini. Setelah itu copy file bootstrap.css yang ada di folder css ke folder public/css yang ada di project kita.
Membuat View
dalam view ini kita bisa mengatur tampilan website yang akan kita buat, view ini terletak di folder resource/views, adapun view-view yang akan kita buat disini adalah :
1. View index
view index ini berfungsi sebagai tampilan awal dari website kita, tambahkan kode berikut di view index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>CRUD Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Tutorial CRUD Laravel</h4>
</div>
<div class="panel-body">
<form action="{{url('create')}}" method="get">
<div class="form-group">
<input type="submit" name="new" id="new" value="Entry Baru" class="btn btn-success">
</div>
</form>
<table class="table table-striped">
<thead>
<tr>
<th>Kode Buku</th>
<th>Judul</th>
<th>Deskripsi</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($data as $key => $d)
<tr>
<td>{{ $d->kode_buku }}</td>
<td>{{ $d->judul }}</td>
<td>{{ $d->deskripsi }}</td>
<td>
<a href="{{url('read',array($d->id))}}">Read</a>
<a href="{{url('delete',array($d->id))}}">Delete</a>
<a href="{{url('edit',array($d->id))}}">Edit</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
2. view create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>CRUD Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Tutorial CRUD Laravel</h4>
</div>
<div class="panel-body">
<form action="{{url('insert')}}" method="post">
<div class="form-group">
<label for="kode">Kode Buku</label>
<input type="text" name="kode" id="kode" class="form-control" required="require">
</div>
<div class="form-group">
<label for="judul">Judul Buku</label>
<input type="text" name="judul" id="judul" class="form-control">
</div>
<div class="form-group">
<textarea id="deskripsi" name="deskripsi" class="form-control"></textarea>
</div>
<div class="form-group">
<input type="submit" name="send" id="send" value="Simpan" class="btn btn-success">{!!csrf_field()!!}
</div>
</form>
</div>
</div>
</div>
</body>
</html>
3. view edit.blade.php
<!DOCTYPE html>
<html>
<head>
<title>CRUD Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Tutorial CRUD Laravel</h4>
</div>
<div class="panel-body">
<form action="{{url('update', $data->id)}}" method="post">
<!-- <input type="hidden" name="id" id="id" value="{{$data->id}}"> -->
<div class="form-group">
<label for="kode">Kode Buku</label>
<input type="text" name="kode" id="kode" value="{{$data->kode_buku}}" class="form-control">
</div>
<div class="form-group">
<label for="judul">Judul Buku</label>
<input type="text" name="judul" id="judul" value="{{$data->judul}}" class="form-control">
</div>
<div class="form-group">
<textarea id="deskripsi" name="deskripsi" class="form-control">
{!!$data->deskripsi!!}
</textarea>
</div>
<div class="form-group">
<input type="submit" name="send" id="send" value="Simpan" class="btn btn-success">{!!csrf_field()!!}
</div>
</form>
</div>
</div>
</div>
</body>
</html>
4. view read.blade.php
<!DOCTYPE html>
<html>
<head>
<title>CRUD Laravel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Tutorial CRUD Laravel</h4>
</div>
<div class="panel-body">
<!-- <input type="hidden" name="id" id="id" value="{{$data->id}}"> -->
<div class="form-group">
<label for="kode">Kode Buku</label>
<input type="text" name="kode" id="kode" value="{{$data->kode_buku}}" class="form-control" readonly>
</div>
<div class="form-group">
<label for="judul">Judul Buku</label>
<input type="text" name="judul" id="judul" value="{{$data->judul}}" class="form-control" readonly>
</div>
<div class="form-group">
<label for="desk">Deskripsi</label>
<input type="text" name="desk" id="desk" value="{{$data->deskripsi}}" class="form-control" readonly>
</div>
<form action="{{url('back')}}" method="get">
<div class="form-group">
<input type="submit" value="Back" class="btn btn-success">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Membuat Controller
controller ini berfungsi untuk menuliskan logic program (contohnya : query ke database)
untuk membuat controller kita jalan command line dan tuliskan command berikut :
php artisan make:controller BooksController
setelah itu dalam project kita akan terbentuk sebuah controller dengan nama BooksController yang trsimpan di folder app/Http/Controllers dan tambahkan kode berikut :
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use DB; use App\Books; class BooksController extends Controller { public function index(){ $data=Books::all(); return view('index',compact('data')); } public function back(){ return redirect ('/'); } public function create(){ return view('create'); } public function insert(Request $request){ $data=new Books(); $data->kode_buku=$request->get('kode'); $data->judul=$request->get('judul'); $data->deskripsi=$request->get('deskripsi'); $data->save(); return redirect ('/'); } public function delete($id){ $data=Books::find($id); $data->delete(); return back(); } public function edit($id){ $data=Books::find($id); return view('edit',compact('data')); } public function update(Request $request, $id){ $data = Books::findOrFail($id); $data->kode_buku=$request->get('kode'); $data->judul=$request->get('judul'); $data->deskripsi=$request->get('deskripsi'); $data->save(); return redirect ('/')->with('alert-success','Data berhasil Diubah.'); } public function read($id){ $data=Books::find($id); return view('read',compact('data')); } }
Membuat model
untuk membuat model tuliskan command berikut di command line :
php artisan make:model Books
Tuliskan kode berikut di model Books
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Books extends Model { protected $table="Books"; protected $primaryKey="id"; protected $fillable=['kode_buku','judul','deskripsi']; }
Routing
routing ini berfungsi untuk menghubungkan controller dengan view, routing ini kita tambahkan didalam folder routes/web.php dan tambahkan kode berikut :
Route::get('/','BooksController@index');
Route::get('back','BooksController@back');
Route::get('create','BooksController@create');
Route::post('insert', 'BooksController@insert');
Route::get('delete/{id}','BooksController@delete');
Route::get('edit/{id}','BooksController@edit');
Route::post('update/{id}', 'BooksController@update');
Route::get('read/{id}','BooksController@read');
jika sudah selesai semua, coba jalankan programnya melalui web browser.
Berikut screen shot dari aplikasi ini :
index
Read
Edit
Sekian sharing kali ini, semoga bermanfaat.
keep sharing..... :D
