Tutorial Laravel Part 3: CRUD Edit dan Update Data Dengan Laravel

0
4120

Mengedit data dan mengupdate data ke database dengan laravel menjadi bahan dalam pembahasan tutorial aplikasi CRUD dengan framework Laravel kali ini.

Setelah sebelumnya kita berhasil menyelesaikan tutorial membuat CRUD input data dengan Laravel, maka kali ini kita akan membahas tutorial laravel dengan judul CRUD edit dan update data dengan Laravel, oke langsung saja kita bahas step stepnya sebagai berikut.

Membuat CRUD Edit dan Update Data Dengan Laravel
Melakukan edit dan update data dengan Laravel itu artinya kita masih bermain-main dengan yang namanya database dan tabel. Nah pada tutorial CRUD Laravel lanjutan kali ini kita juga masih memanfaatkan database dan tabel yang telah kita buat pada tutorial sebelumnya.

Berikut adalah langkah-langkahnya membuat CRUD edit dan update data dengan Laravel.
Pertama yang perlu kita lakukan adalah membuat model Kelas terlebih dahulu, jadi teman-teman disini untuk edit data saya memanfaatkan Model nya Laravel. Untuk membuat Model disini saya memanfaatkan php artisan nya Laravel, php artisan make:model kelas, berikut adalah isi lengkap dari file Model Kelas.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Kelas extends Model
{
protected $table="tbl_kelas";
protected $primaryKey = 'id_kelas';
protected $fillable = array('id_kelas','kelas');
//public $timestamps = false;
}

Karena disini kita memanfaatkan Model nya Laravel, maka pada controller KelasController.php kita perlu memanggil Model yang telas kita buat dengan code seperti berikut.

use App\Kelas;

Tahap kedua yang perlu kita lakukan adalah membuat form edit data nya, nah karena kita menggunakan modal maka kita buka kembali file view kelas/index.blade.php, selanjutnya kita tambahkan formnya seperti berikut.

<!-- moda edit data -->
<div class="modal inmodal fade" id="modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
<form name="frm_edit" id="frm_edit" class="form-horizontal" action="{{route('updatedata')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 control-label">Kelas</label>
<div class="col-lg-10">
<input type="text" name="kelas" id="kelas" placeholder="Kelas" class="form-control">
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id">
<button type="button" class="btn btn-white" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</div>
</form>
</div>
</div>

Sehingga keseluruhan file view kelas/index.blade.php setelah mengalami beberapa penambahan maka akan menjadi seperti berikut.

@extends('layouts.app')

@section('content')
<div class="row">
<div class="col-lg-12">
@include('_partials.flash_message')
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Data Kelas</h5>
<div class="ibox-tools">
<button class="btn btn-primary btn-sm btn-flat" data-toggle="modal" data-target="#modal-add"><i class="fa fa-plus"></i>Tambah</button>
</div>
</div>
<div class="ibox-content">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover dataTables-example" >
<thead>
<tr>
<th>Kelas</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach($kelas as $row)
<tr>
<td>{{$row->kelas}}</td>
<td>
<button type="button" class="btn btn-xs btn-success edit" data-id="{{$row->id_kelas}}"><i class="fa fa-pencil"></i></button>
<button type="button" class="btn btn-xs btn-danger hapus" data-id="{{$row->id_kelas}}"><i class="fa fa-trash"></i></button>
</td>
</tr>
@endforeach
</tbody>
<tfoot>

</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- modal add data-->
<div class="modal inmodal fade" id="modal-add" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('simpandata')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Tambah Data</h4>
</div>
<div class="modal-body">
<div class="form-group"><label class="col-lg-2 control-label">Kelas</label>
<div class="col-lg-10"><input type="text" name="kelas" placeholder="Kelas" class="form-control"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</div>
</form>
</div>
</div>
<!-- moda edit data -->
<div class="modal inmodal fade" id="modal-edit" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xs">
<form name="frm_edit" id="frm_edit" class="form-horizontal" action="{{route('updatedata')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<div class="form-group"><label class="col-lg-2 control-label">Kelas</label>
<div class="col-lg-10"><input type="text" name="kelas" id="kelas" placeholder="Kelas" class="form-control"></div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" id="id">
<button type="button" class="btn btn-white" data-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</div>
</form>
</div>
</div>
<script src="{{ asset('public/assets/js/jquery-3.1.1.min.js') }}"></script>
<script>
$(document).ready(function() {
//edit data
$('.edit').on("click",function() {
var id = $(this).attr('data-id');
$.ajax({
url : "{{route('edit')}}?id="+id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('#id').val(data.id_kelas);
$('#kelas').val(data.kelas);
$('#modal-edit').modal('show');
}
});
});

});
</script>
@endsection

Dan berikut ini adalah tampilan dari form edit data dengan Laravel.

Form CRUD Edit Data Dengan Laravel
Form CRUD Edit Data Dengan Laravel

Tahap berikutnya yang perlu kita lakukan adalah membuatkan route edit dan route update nya, nah disini route untuk edit saya beri nama ‘edit’ dan route untuk update data nya saya beri nama updatedata() seperti berikut.

//edit data
Route::get('edit','KelasController@edit')->name('edit');
//update data
Route::POST('updatedata','KelasController@updatedata')->name('updatedata');

Kemudian teman-teman, tahapan selanjutnya yang perlu kita lakukan adalah menambahkan method edit() pada controller KelasController.php, oke teman-teman kita buka kembali KelasController.php dan kita tambahkan method edit() seperti berikut.

public function edit(Request $request)
{
$data = Kelas::findOrFail($request->get('id'));
echo json_encode($data);
}

Setelah menambahkan method edit(), maka yang perlu kita lakukan selanjutnya adalah menambahkan method untuk mengupdate data ke database nya teman-teman, sehingga di controller KelasController.php perlu kita tambahkan lagi satu buah method dengan nama updatedata(), seperti berikut.

public function updatedata(Request $request)
{
$data = array(
'kelas'=>$request->post('kelas')
);
$simpan = DB::table('tbl_kelas')->where('id_kelas','=',$request->post('id'))->update($data);
if($simpan){
Session::flash('status','Data berhasil diupdate.');
}else{
Session::flash('status','Data gagal diupdate.');
}
return redirect('kelas');
}

Sehingga setelah mengalami beberapa perubahan dan penambahan method() maka secara lengkap file controller KelasController.php akan menjadi seperti berikut.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Session;
use App\Kelas;

class KelasController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//mengambil data kelas
$title = 'CRUD Laravel';
$kelas = DB::table('tbl_kelas')->get();

// mengirim data kelas ke view index
return view('kelas.index',['kelas' => $kelas,'title'=>$title]);
}

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function simpandata(Request $request)
{
$simpan = DB::table('tbl_kelas')->insert([
'kelas'=>$request->post('kelas')
]);

if($simpan){
Session::flash('status','Data berhasil disimpan.');
}else{
Session::flash('status','Data gagal disimpan.');
}
return redirect('kelas');
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit(Request $request)
{
$data = Kelas::findOrFail($request->get('id'));
echo json_encode($data);
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function updatedata(Request $request)
{
$data = array(
'kelas'=>$request->post('kelas')
);
$simpan = DB::table('tbl_kelas')->where('id_kelas','=',$request->post('id'))->update($data);
if($simpan){
Session::flash('status','Data berhasil diupdate.');
}else{
Session::flash('status','Data gagal diupdate.');
}
return redirect('kelas');
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}

Oke teman-teman sampai disini tutorial CRUD mengedit dan mengupdate data dengan Laravel akhirnya berhasil kita selesaikan.

Semoga tutorial membuat CRUD Edit dan Update Data Dengan Laravel ini dapat membantu dan memberi manfaat. Pada tutorial selanjutnya akan kita bahas bagaimana membuat CRUD menghapus data dengan Laravel. Terimakasih…