Halo teman-teman semuanya, di artikel sebelumnya kita sudaah belajar bagaimana cara memasukkan/insert data ke dalam database. Di artikel kali ini kita semua akan belajar bagaimana cara membuat proses edit dan update data ke dalam database.
Langkah 1 - Membuat Function Edit dan Update
Sekarang, kita akan menambahkan 2 method/function yaitu edit dan update di dalam controller PostController. Untuke method edit akan kita gunakan untuk menampilkan form dengan data yang akan di update, kemudian untuk method update sendiri digunakan untuk melakukan proses update data-nya ke dalam database.
Silahkan buka file app/Http/Controllers/PostController.php dan tambahkan 2 method ini di bawah method store.
/**
* edit
*
* @param mixed $post
* @return void
*/
public function edit(Post $post)
{
return view('post.edit', compact('post'));
}
/**
* update
*
* @param mixed $request
* @param mixed $post
* @return void
*/
public function update(Request $request, Post $post)
{
$this->validate($request, [
'title' => 'required',
'content' => 'required'
]);
//get data post by ID
$post = Post::findOrFail($post->id);
if($request->file('image') == "") {
$post->update([
'title' => $request->title,
'content' => $request->content
]);
} else {
//hapus old image
Storage::disk('local')->delete('public/posts/'.$post->image);
//upload new image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
$post->update([
'image' => $image->hashName(),
'title' => $request->title,
'content' => $request->content
]);
}
if($post){
//redirect dengan pesan sukses
return redirect()->route('post.index')->with(['success' => 'Data Berhasil Diupdate!']);
}else{
//redirect dengan pesan error
return redirect()->route('post.index')->with(['error' => 'Data Gagal Diupdate!']);
}
}
Di atas kita membuat 2 function untuk proses edit dan update data, yaitu :
function edit
Function edit digunakan untuk menampilkan data yang akan di edit ke dalam sebuah form, jika teman-teman perhatikan di dalam function ini kita memiliki sebuah parameter, yaitu Post $post, yang artinya parameter tersebut adalah model Post yang diambil datanya sesuai dengan ID yang di dapatkan dari URL.
Setelah data tersebut di dapatkan, maka akan di parsing ke dalam view edit.blade.php di dalam folder post dengan menggunakan helper compact.
return view('post.edit', compact('post'));
Nah sekarang kita sudah bisa memanggil data post berdasarkan ID yang diambil dari URL di dalam template edit. Untuk contoh memanggilnya kita bisa menggunakan sintaks seperti ini :
{{ $post->title }}
function update
Function update akan kita manfaatkan untuk melakukan update data post ke dalam database, sebelum itu disini kita juga menambahkan sebuah validasi, dimana jika validasi tersebut terpenuhi, maka data baru akan bisa di update ke dalam database sesuai dengan ID dari data post tersebut.
Untuk proses update data post sendiri kita menggunakan sebuah kondisi, dimna jika tidak ada request file dengan nama image, maka kita hanya akan melakukan update tanpa meng-update filed image.
$blog->update([
'title' => $request->title,
'content' => $request->content
]);
Dan apabila request file dengan nama image tersedia, artinya disini kita akan melakuakn update data image. Pertama kita akan remove gambar yang lama terlebih dahulu.
//hapus old image
Storage::disk('local')->delete('public/posts/'.$post->image);
Setelah gambar yang lama terhapus, sekarang kita lakukan upload image baru
//upload new image
$image = $request->file('image');
$image->storeAs('public/posts', $image->hashName());
Dan kemudian data diupdate ke dalam database dengan filed nama image yang baru :
$post->update([
'image' => $image->hashName(), // <— new name file image
'title' => $request->title,
'content' => $request->content
]);
Langkah 2 - Membuat View Edit
Sekarang, kita lanjutkan untuk membuat form untuk menampilkan data yang akan di edit dan di update, silahkan buat file baru dengan nama edit.blade.php di dalam folder resources/views/post kemudian masukkan kode berikut ini :
@extends('layouts.app', ['title' => 'Edit Post'])
@section('content')
<div class="container mx-auto mt-10 mb-10">
<div class="bg-white p-5 rounded shadow-sm">
<form action="{{ route('post.update', $post->id) }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<div>
<label>GAMBAR POST</label>
<input type="file" name="image"
class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white mt-2">
@error('image')
<div class="bg-red-400 p-2 shadow-sm rounded mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mt-5">
<label>JUDUL POST</label>
<input type="text" name="title" value="{{ old('title', $post->title) }}"
class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white mt-2"
placeholder="judul post">
@error('title')
<div class="bg-red-400 p-2 shadow-sm rounded mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mt-5">
<label>KONTEN POST</label>
<textarea name="content">{{ old('content', $post->title) }}</textarea>
@error('content')
<div class="bg-red-400 p-2 shadow-sm rounded mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="mt-5">
<button type="submit"
class="bg-indigo-500 text-white p-2 rounded shadow-sm focus:outline-none hover:bg-indigo-700">UPDATE POST</button>
</div>
</form>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
@endsection
Untuk action dari form kita akan arahkan ke sebuah route post.update, dengan parameter ID dari data post, yaitu :
<form action="{{ route('post.update', $post->id) }}" method="POST" enctype="multipart/form-data">
kemudian jangan lupa, jika kita membuat sebuah edit data, pastikan telah menambahkan method PUT di dalam form, kurang lebih seperti berikut ini :
@method('PUT')
Dan untuk menampilkan data di dalam form, kita menggunakan helper old, kurang lebih contohnya seperti berikut ini :
<input type="text" name="title" value="{{ old('title', $post->title) }}" class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white mt-2" placeholder="judul post">
Langkah 3 - Menjalankan Project
Sekarang kita bisa mencoba menjalankan projectnya, dengan cara klik tombol edit di dalam table data, dan jika berhasil kurang lebih seperti berikut ini :
Dan kita coba edit datanya dan kita klik UPDATE POST, maka jika berhasil kurang lebih tampilannya akan seperti berikut ini :
Sampai disini tutorial bagaimana cara edit dan update data ke dalam database, di artikel selanjutnya kita semua akan belajar bagaimana cara melakukan hapus data dari database.
Terima Kasih
INFO :