CRUD | Images : Menampilkan Serta Tambah dan Edit Gambar Di Laravel

 

    Perintah <img> merupakan tag html untuk menampilkan gambar ke user, namun masalahnya gambar tadi berada dimana? atau gambar tadi kita simpan dimana?. Laravel sendiri menyediakan fitur untuk mengatasi gambar ini yang disebut storage link. Dimana gambar disimpan dan dipanggil menggunakan storage ini.

Membuat Link Storage

    Anda perlu membuat perintah artisan untuk membuat storage link ini. Berikut perintahnya:

php artisan storage:link

    Ketikkan perintah diatas di dalam terminal vsCode untuk membuat storage laravel. Selanjutnya buka folder storage/app/public kemudian buat sebuah folder dengan nama "images". Kita akan menyimpan gambar ke dalam folder ini. Siapkan sebuah gambar terlebih dahulu. beri nama gambar tersebut dengan nama yang sama di recod foto yang ada di tabel kegiatan. ( Disini saya memberi nama gambar dengan nama olahraga.png). selanjutnya Pastekan gambar ke dalam folder storage/app/public/images.

Mengakses Gambar

    Sekarang kita akan menampilkan gambar ke dalam tabel. Masuk ke folder view dan buka kegiatan.blade.php. silahkan rubah script untuk gambar seperti berikut:

....

<td>{{ $kegiatan->judul ?? }} </td>

<td><img src="{{ asset('storage/images/' . $kegiatan->foto) }}" alt="Foto"

        style="max-width: 100px;">

</td>

<td>

    <a href="{{ route('kegiatan.edit', $kegiatan->id_kegiatan) }}"

        class="btn btn-warning btn-sm me-2"><i class="bi bi-pencil-square"></i>

        Edit</a>

    <button type="submit" class="btn btn-danger btn-sm">

        <i class="bi bi-trash"></i> Hapus

    </button>

</td>

....

    Sekarang jalankan program anda. Pastikan gambar sudah tampil di tabel kegiatan.

Tambah Gambar

    Nah, selanjutnya bagaimana cara menambahkan gambar ke dalam database? Sekarang anda buka form_kegiatan. Cari form untuk input gambar dan rubah seperti berikut:

<div class="mb-3">

    <label for="foto" class="form-label">

        <i class="fas fa-image"></i> Foto

    </label>

    <input type="file" class="form-control" name="foto" multiple>

</div>

<button type="submit" class="btn btn-primary">

    Kemudian pada <form> tambahkan code enctype="multipart/form-data" agar form bisa mengirim input berupa file:

<form action="{{ isset($kegiatan) ? route('kegiatan.update', $kegiatan->id_kegiatan) : route('kegiatan.store') }}"

            method="POST" enctype="multipart/form-data">

            @csrf

    Sekarang masuk ke KegiatanController. Edit fungsi store seperti ini:

    public function store(Request $request)

    {

        $data = $request->only(['waktu', 'id_tema', 'judul', 'keterangan']);

        if ($request->hasFile('foto')) {

            $file = $request->file('foto');

            $filename = time() . '_' . $file->getClientOriginalName();

            // simpan ke storage/app/public/images

            $file->storeAs('images', $filename, 'public');

            $data['foto'] = $filename;

        }

        KegiatanModel::create($data);

        return redirect()->route('kegiatan.index');

    }

    Sekarang Coba jalankan program. Tambah data. Apakah data gambar bisa masuk?

Edit Gambar:

 Mari edit fungsi upload agar foto dapat di edit:

public function update(Request $request, $id)

{

    $kegiatan = KegiatanModel::findOrFail($id);

    // Data selain foto

    $data = $request->only(['waktu', 'id_tema', 'judul', 'keterangan']);

    if ($request->hasFile('foto')) {

        // Hapus foto lama kalau ada

        if ($kegiatan->foto && \Storage::disk('public')->exists('images/' . $kegiatan->foto)) {

            \Storage::disk('public')->delete('images/' . $kegiatan->foto);

        }

        // Simpan foto baru

        $file = $request->file('foto');

        $filename = time() . '_' . $file->getClientOriginalName();

        $file->storeAs('images', $filename, 'public');

        $data['foto'] = $filename;

    }

    $kegiatan->update($data);

    return redirect()->route('kegiatan.index')->with('success', 'Kegiatan berhasil diupdate');

}

Hapus Foto

    Untuk dapat menghapus foto dari folder images anda dapat edit fungsi destroy() seperti berikut:

public function destroy($id)

{

    $kegiatan = KegiatanModel::findOrFail($id);

    //hapus foto dari folder

    if ($kegiatan->foto && \Storage::disk('public')->exists('images/' . $kegiatan->foto)) {

        \Storage::disk('public')->delete('images/' . $kegiatan->foto);

    }

    $kegiatan->delete();

    return redirect()->route('kegiatan.index');

}

    Ok. Sampai disini kita telah berhasil edit, hapus dan menampilkan gambar menggunakan teknologi storage link milik laravel.

    Moga susksess.