Tutorial Laravel - CURD Dengan Laravel
Pada kesempatan kali ini kita akan belajar membuat curd dengan menggunakan laravel. Kita akan mencoba membuat studi kasus untuk membuat table untuk menyimpan data Toko. Tutorial ini merupakan lanjutan dari tutoral laravel kami sebelumnya tentang membaut member area di laravel. Jadi sebelum rekan rekan semua mengikuti tutorial ini, silahkan ikuti tutorial kami sebelumnya.
1. Bikin Controller, Model , Migration
Pertama tama kita bikin sebuah Controller, Model , Migration Toko dengan perintah
php artisan make:model Toko -mcrDengan perintah ini akan otomatis membuat sebuah controller , model dan juga Migration. Artinya akan otomatis tergenerate file controller di app\Http\Controllers\TokoController.php , kemudian model di app\Models\Toko.php , dan migration di database\migrations\*****_create_tokos_table.php.
Selanjutnya kita edit file migration nya untuk menentukan data apa yang akan kita tambahkan . Jadi silahkan edit di file database\migrations\*****_create_tokos_table.php
Di dalam database ini saya hanya menambahkan 2 field saja. Nama dan note. kode di dilam method up akan terlihat seperti code dibawah ini
public function up(): void
{
Schema::create('tokos', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('note')->nullable();
$table->timestamps();
});
}Setelah kita melengkapi field yang akan kita gunakan di file migration, saatnya kita generate file migration itu dengan perintah di php artisan dengan perintah di bawah ini
php artisan migrateMaka nanti di dalam database kita akan bertambah satu table yaitu table tokos.
2. Menbambahkan Route untuk memanage toko
Untuk menambahkan route / url untuk toko, maka kita akan menambahkan code di dalam file routes\web.php. Karena ketika kita mengakses halaman ini perlu login terlebih dahulu, maka ini harus kita tambahkan di dalam midleware.
Route::resource('/backend/toko',\App\Http\Controllers\TokoController::class);Untuk kode lengkap di dalam midleware adalah seperti gambar di bawah ini
Route::group(['middleware' => 'auth'], function(){
Route::get('/backend', [App\Http\Controllers\BackendController::class, 'index'])->name('home');
Route::resource('/backend/toko',\App\Http\Controllers\TokoController::class);
});Dengan kode diatas, kita sudah berhasil menambahkan route atau url untuk alamat /backend/toko. Selanjutnya kita akan menangkap url ini di dalam controller dan juga di template nya.
3. Bekerja pada Controller dan Template Blade
Untuk controller ini letaknya ada pada app\Http\Controllers\TokoController.php. Sehingga kita akan split pada beberapa method. Yaitu untuk menambah data, edit data dan juga menampilkan data.
Form Untuk Menambah Data
Untuk menambah data kita akan bekerja terlebih dahulu pada method create. Silahkan tambahkan code dibawah ini untuk menrahkan method create pada template.
return view('backend.toko.create');Kode diatas mengarahkan create pada file resources\views\backend\toko\create.blade.php . Sehingga silahkan bikin folder toko dan file create.blade.php.
@extends('backend.layouts')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-10"> Add Toko/Supplier</div>
<div class="col-md-2">
<a class="btn icon icon-left btn-secondary" style="float:right" href="{{route('toko.index')}}" ><< Back</a>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<form method="POST" action="{{route('toko.store')}}">
@csrf
<div class="mb-3 col-md-12">
<label for="name" class="form-label">Name</label>
<input class="form-control" type="text" id="name" name="name" value="{{ old('name') }}" autofocus="" required>
<div class="invalid-tooltip">Name</div>
@error('name')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mb-3 col-md-12">
<label for="note" class="form-label">Note</label>
<input class="form-control" type="text" id="note" name="note" value="{{ old('note') }}" autofocus="">
<div class="invalid-tooltip">Note</div>
@error('note')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mt-2">
<button type="submit" class="form-control button-create me-2">Add</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Process Menambah Data
Kode diatas, ketika kita akan menambah data, maka form mengarahkan pada route {{route('toko.store')}}". Jadi kali ini kita akan bekarja pada methos store. Pertama kita harus bikin validasi agar supa nama toko tidak boleh sama. Kode di methos store untuk validasi adalah
$validator = Validator::make($request->all(),[
"name" => "required|unique:tokos,name"
]);
if($validator->fails()){
return redirect()->back()->withInput($request->all())->withErrors($validator);
}Kita butuh class validator. sehingga kita perlu mengimport validator di bagian atas dari class ini.
use Illuminate\Support\Facades\Validator;Jika validator fail, maka controller akan kembali ke from sebelumnya dengan memberikan keterangan errornya.
Jika tidak error dalam validasi, maka langkah selanjutnya adalah menbambahkan data ke dalam database. Untuk kode didalam method store secara penuh adalah sebagai berikut.
public function store(Request $request)
{
$validator = Validator::make($request->all(),[
"name" => "required|unique:tokos,name"
]);
if($validator->fails()){
return redirect()->back()->withInput($request->all())->withErrors($validator);
}
DB::beginTransaction();
try {
$toko=Toko::create([
'name' => $request->name,
'note' => $request->note,
]);
if($toko){
return redirect()->route('toko.index');
}
} catch (\Throwable $th) {
DB::rollBack();
return redirect()->back()->withInput($request->all())->withErrors($validator);
}finally{
DB::commit();
}
}Karena adanya penambahan Class DB, maka kita harus menambahkan / mengimport DB kedalam class
use Illuminate\Support\Facades\DB;Dan untuk proses penambahan data, agar kita bisa mengisi data di dalam table, maka perlu kita lakukan configurasi di dalam file modelnya. Pada file app\Models\Toko.php. anda bisa menambahkan kode
protected $guarded= [];
Menampilkan Data
Untuk menampilkan data kita akan bekerja pada method index dan template index. untuk itu silahkan bikin file index.blade.php di dalam folder resources\views\backend\toko\index.blade.php.
Didalm controllernya kita taruh kode dibawah ini
public function index()
{
return view('backend.toko.index',['tokos'=> Toko::latest()->paginate(10)]);
}Kemudian untuk file index.blade.php bisa di berikan kode berikut.
Karena didalam file index ini nanti kita akan tambahkan javascript , maka kita perlu manabahkan
@stack('javascript-external')
@stack('javascript-internal')Kode ini kita letaakkan pada file layout nya. yatu di file resources\views\backend\layouts.blade.php. Dan ini kita letakkan di bagian bawah diatas </body>
.......................
@stack('javascript-external')
@stack('javascript-internal')
</body>
</html>Dan untuk kode di method indexnya, bisa kita isi dengan code dibawah ini
@extends('backend.layouts')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-10"> All Toko</div>
<div class="col-md-2">
<a class="btn icon icon-left btn-primary" style="float:right" href="{{route('toko.create')}}" >Add Toko</a>
</div>
</div>
</div>
<div class="card-header">
<div class="row mt-2">
<div class="col-md-8">
<div class="d-flex">{{$tokos->links("pagination::bootstrap-4")}}</div>
</div>
</div>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-lg">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th width=10%>Action</th>
</tr>
</thead>
<tbody>
@forelse ( $tokos as $toko )
<tr>
<td class="text-bold-500">#{{$toko->id}}</td>
<td>{{$toko->name}}</td>
<td>
<a class="btn icon icon-left btn-primary" href="{{route('toko.edit',['toko'=>$toko])}}" >Edit</a>
<button onclick="deleteItem('{{ $toko->id }}','{{ $toko->name }}');" class="btn icon icon-left btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">Del</button>
</td>
</tr>
@empty
@endforelse
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade text-left" id="deleteModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel120" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<form id="form_delete" action="" method="post">
@method('DELETE')
@csrf
<div class="modal-header bg-danger">
<h5 class="modal-title white" id="myModalLabel120">Warning
</h5>
</div>
<div class="modal-body">
Do You Want To Delete Toko <span id="delete_label"></span> ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Cancel</span>
</button>
<button type="submit" class="btn btn-danger ml-1">
<span class="d-none d-sm-block">Delete</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('javascript-internal')
<script>
function deleteItem(id,name){
var url = '{{ route("toko.destroy",["toko" => ":toko_id" ])}}';
url = url.replace(':toko_id', id);
document.getElementById("form_delete").action = url;
document.getElementById('delete_label').innerHTML=name;
}
</script>
@endpush
Menampilkan Data
Untuk delete data, kita sudah memberikan tombol pada index.blade.php , sehingga kita hanya perlu memberikan handle di method destroynya. Silahkan isikan code dibawah ini.
public function destroy(Toko $toko)
{
DB::beginTransaction();
try {
$toko->delete();
return redirect()->route("toko.index");
} catch (\Throwable $th) {
DB::rollBack();
}finally{
DB::commit();
return redirect()->back();
}
}Untuk process message, anda bisa membuat seperti tutorial sebelunya dengan mengirimkan session ke blade dengan kode
@if (\Session::has('success'))
<div class="alert alert-success">
{!! \Session::get('success') !!}
</div>
@endif
Edit Data
Untuk Edit data, kita bisa menggunakan method edit untuk mengarahkan ke dalam formnya.
public function edit(Toko $toko)
{
return view('backend.toko.edit',['toko'=> $toko]);
}Untuk file bladenya kita tinggal copy dari create.blade.php, rubah menjadi edit.blade.php . Setelah itu kita melakukan beberapa perubahan.
- Untuk bagian form rubah
<form method="POST" action="{{route('toko.store')}}"> @csrfRubah menjadi
<form method="POST" action="{{route('toko.update',['toko'=> $toko])}}"> @method('PUT') @csrf - Untuk value tiap tiap input dirubah
Menjadivalue="{{ old('name') }}"
Begitu pula untuk notenyavalue="{{ old('name',$toko->name) }}"
Menjadivalue="{{ old('note') }}"value="{{ old('note',$toko->note) }}"
Dan untu full kodenya seperti dibawah ini
@extends('backend.layouts')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-10"> Edit Toko/Supplier</div>
<div class="col-md-2">
<a class="btn icon icon-left btn-secondary" style="float:right" href="{{route('toko.index')}}" ><< Back</a>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<form method="POST" action="{{route('toko.update',['toko'=> $toko])}}" enctype="multipart/form-data">
@method('PUT')
@csrf
<div class="mb-3 col-md-12">
<label for="name" class="form-label">Name</label>
<input class="form-control" type="text" id="name" name="name" value="{{ old('name',$toko->name) }}" autofocus="" required>
<div class="invalid-tooltip">Name</div>
@error('name')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mb-3 col-md-12">
<label for="note" class="form-label">Note</label>
<input class="form-control" type="text" id="note" name="note" value="{{ old('note',$toko->note) }}" autofocus="">
<div class="invalid-tooltip">Note</div>
@error('note')
<span class="text-danger" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mt-2">
<button type="submit" class="form-control button-create me-2">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Untuk proses penyimpanan berada di controllernya pada method update. Anda bisa mengisinya dengan kode dibawah ini.
public function update(Request $request, Toko $toko)
{
$validator = Validator::make($request->all(),[
"name" => "required|unique:tokos,name,".$toko->id,
]);
if($validator->fails()){
return redirect()->back()->withInput($request->all())->withErrors($validator);
}
DB::beginTransaction();
try {
$toko->update([
'name' => $request->name,
'note' => $request->note,
]);
return redirect()->route('toko.index')->with('success', 'Anda berhasil update data');
} catch (\Throwable $th) {
DB::rollBack();
return redirect()->back()->withInput($request->all())->withErrors($validator);
}finally{
DB::commit();
}
}Ok demikianlah tutorial curd dengan laravel. semoga bermanfaat.
