Create Image View
Salah satu komponen penting bagi development web atau program bagaimana menampilkan gambar ke dalam view berdasarkan data yang ada di database. Tentu gambar tidak dapat kita masukkan ke dalam database. Karena tabel di database berisi nilai string atau karakter. Sedangkan gambar merupakan sebuah objek. Namun bukan kita tidak dapat menampilkan gambar.
Ada metode yang kita gunakan di dalam menampilkan gambar dari database ke view. Namun sebelumnya pastikan anda sudah memiliki tabel di database. Disini kita menggunakan tabel dengan nama koleksi sebagaimana yang telah kita buat di tutorial sebelumnya. Silahkan pelajari kembali PART 2 dan Part 3. Tabel koleksi dapat kita lihat seperti berikut:
Perhatikan pada kolom gambar, terdapat data berupa nama gambar yang terdiri dari komputer.jpeg, jaringan, jpeg dan animasi.jpg. Data ini merupakan nama dari gambar yang akan kita tampilkan ke halaman view nantinya. Sebelum lanjut silahkan anda siapkan gambar sebanyak 3 buah dan beri nama masing-masing gambar sesuai dengan nama gambar yang tertera di dalam tabel diatas. Namun disini saya memiliki format gambar yang berbeda dengan nama gambar di database. Jadi gambar disini berformat png ( komputer.png, jaringan.png, dan animasi.png). Maka kita perlu merubah data gambar di database seperti berikut:
| No | Kode | Judul | Deskripsi | Gambar |
|---|---|---|---|---|
| 1 | 9090 | Pemrograman Komputer | Menjelaskan bagaimana memulai membuat program | komputer.png |
| 2 | 9098 | Jaringan Komputer | Konsep dasar membuat jaringan | jaringan.png |
| 3 | 9088 | Animasi | Langkah-langkah dasar menjadi seorang animasion | animasi.jpg |
Nah sekarang anda kembali ke struktur projek dan buka folder public kemudian buat satu folder dengan nama assets dan di dalam folder assets tersebut buat lagi satu folder dengan nama images. Kopi dan pastekan ke tiga gambar tadi ke dalam folder images.
📂public
📂assets
📂images
🖻komputer.png
🖻jaringan.png
🖻animasi.png
Selanjutnya buka file koleksi.blade.php di folder view anda dan rubahlah script seperti berikut:
<!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>{{ $title }}</h3><table class="table table-striped border"><thead><tr><th>NO</th><th>KODE</th><th>JUDUL</th><th>DESKRIPSI</th><th>GAMBAR</th><th>OPSI</th></tr></thead><tbody>{{ $no=1 }}@foreach( $koleksi as $k)<tr><td>{{ $no++ }}</td><td>{{ $k['kode'] }}</td><td>{{ $k['judul'] }}</td><td>{{ $k['deskripsi'] }}</td><td><img src="/assets/images/{{ $k['gambar'] }}" class="w-100" style="object-fit:cover; height:50px;"></td><td><a href="" class="btn btn-info">Edit</a><a href="" class="btn btn-danger">Hapus</a></td></tr>@endforeach</tbody><tfoot><th><td><a class="btn btn-outline-success" href=""> + Tambah Data </a></td></th></tfoot></table></div></body></html>
Perintah <img > merupakan komponen html yang meminta agar mengakses gambar yang ada di dalam folder assets/images kemudian mencari gambar sesuai dengan nama gambar yang yang ada di dalam databse.
Sekarang jalankan program anda. Maka hasilnya akan terlihat seperti berikut:
