Pendahuluan
Masih kelanjutnan dari materi sebelumnya yaitu tentang update, kali ini kita akan mencoba latihan untuk update gambar. Pada dasarnya update gambar kita hanya merubah nama file gambar yang tersimpan di dalam database dan menghapus gambar yang ada di PATH. Jadi pastikan anda sudah membuka file latihan sebelumnya.
Mari kita mulai:
Langkah-langkah Update Gambar
1. Buka view => edit_koleksi.blade.php yang sudah kita buat sebelumnya
<!DOCTYPE html><html lang="en"><head><title>CRUD Laravel</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></head><body class="bg-dark"><div class="container bg-white p-5 mt-5"><h3>Edit Data Koleksi</h3><hr><form method="POST" action="/update/{{ $koleksi['id'] }}" enctype="multipart/form-data">@csrf<div class="row mt-3"><label class="col-3">Kode</label><div class="col"><input type="number" name="kode" class="form-control" value="{{ $koleksi['kode'] }}"></div></div><div class="row mt-3"><label class="col-3">Judul</label><div class="col"><input type="text" name="judul" class="form-control" value="{{ $koleksi['judul'] }}"></div></div><div class="row mt-3"><label class="col-3">Deskripsi</label><div class="col"><textarea name="deskripsi" class="form-control" rows="5">{{ $koleksi['deskripsi'] }}</textarea></div></div><div class="row mt-3"><label class="col-3">Upload Gambar</label><div class="col"><img src="/assets/images/{{ $koleksi['gambar'] }}" class="mt-3"><input type="hidden" name="gambar" value="{{ $koleksi['gambar'] }}"><input type="file" name="gambar_baru" class="form-control"></div></div><div class="row mt-3"><div class="col"></div><div class="col"><button type="submit" class="btn btn-success">Simpan Perubahan</button></div></div></form></div></body></html>
Kita mengganti method dari get menjadi post pada element form ( <Form method="POST".....>). Sebab untuk upload gambar kita tidak bisa menggunakan metode GET. Pastikan juga anda sudah menambahkan attribut "enctype="multipart/form-data"" agar gambar bisa di enkripsi nantinya.
Kemudian kita buat juga element untuk menampilkan gambar dengan perintah: <img src="/assets/images/{{ $koleksi['gambar'] }}" class="mt-3">. Selanjutnya kita panggil field gambar yang tersimpan di dalam database dengan menambahkan perintah: "<input type="hidden" name="gambar" value="{{ $koleksi['gambar'] }}">". Script ini bertujuan saat tidak ada gambar yang diganti, maka gambar lama akan tetap di gunakan. Tipe file kita beri hidden agar tidak ditampilkan ke User.
Sedangkan perintah "<input type="file" name="gambar_baru" class="form-control">" bertujuan untuk mengirim gambar baru ke controller.
2. Buka web.php dan gantilah route update yang semula get menjadi post atau any seperti berikut:
3. Buka Controller => KoleksiController.php, tambahkan library untuk memanggil file.
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Models\Koleksi;use File;............
Jadi script USe File berguna untuk memanggil library file. Library ini kita gunakan untuk menghapus gambar yang ada di dalam PATH nantinya.
4. Masih di dalam file KoleksiController.php pada method update buatlah validation untuk gambar agar saat gambar di ganti akan di lakukan pengecekan gambar.
public function update($id, Request $req){$filename;//cek apakah gambar baru di upload atau tidak// jika tidakif ($req->gambar_baru == null) {$filename = $req->gambar_lama;}// jika di uploadelse {//cek validasi data$req->validate(['gambar_baru' => 'image|mimes:png,jpg,jpeg|max:1048']);if ($req->hasfile('gambar_baru')) {$filename = time() . '.' . $req->gambar_baru->extension();$req->file('gambar_baru')->move(public_path('assets/images'), $filename);file::delete(public_path('/assets/images/' . $req->gambar_lama));}}
Jika gambar baru tidak diupload, maka kita akan menyimpan record gambar lama, namun jika gambar baru di upload maka kita akan menyimpan record gambar baru dengan menambahkan perintah " $filename = time() . '.' . $req->gambar_baru->extension();". Selanjutnya kita hapus gambar lama yang ada di dalam PACTH dengan menambahkan perintah " file::delete(public_path('/assets/images/' . $req->gambar_lama));".
5. Masih di method update tadi, kita tambahkan script berikut pada data:
...$data = ['kode' => $req->kode,'judul' => $req->judul,'deskripsi' => $req->deskripsi,'gambar' => $filename //Tambah script ini];Koleksi::where('id', $id)->update($data);return redirect()->to('/');}
Jalankan Program dan cobalah untuk edit gambar. Apakah gambar sudah berubah. Kemudian cek di PATH public/images, apakah gambar lama sudah di hapus saat anda update gambar tadi?!.
