Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebprogramming, pada tutorial kali ini kita akan belajar tentang Cara Membuat Galeri Responsif dengan CSS Media. Galeri adalah cara yang bagus untuk menampilkan data dalam tampilan kisi sehingga menarik bagi pengguna. Ini salah satu cara terbaik untuk mempresentasikan produk. Galeri  dapat berisi gambar, video, atau kumpulan data teks dalam kartu.

Dalam contoh ini, saya telah menyimpan gambar galeri di dalam folder. Saya telah membuat tabel database untuk menyimpan  file dari gambar.  Galeri ini akan responsif dan akan masuk ke dalam area pandang perangkat apa pun dengan mulus. Saya menggunakan  media queri CSS untuk membuat galeri responsif.

Cara Mengambil Data Dari Database

Kode berikut digunakan untuk mengambil  gambar dari tabel database MySQL. Hasil array dari database akan diulang dalam satu lingkaran untuk menampilkan gambar dalam tampilan galeri. Kode ini menampilkan kode HTML untuk kotak galeri untuk menampilkan gambar. Jika tidak ada file gambar seperti yang dibaca dari database, maka saya telah menunjukkan gambar default. Saya menggunakan fungsi file_exists PHP () untuk memeriksa keberadaan lokasi file gambar.

CSS Media Queries untuk Membuat Galeri Gambar Responsif

Dalam contoh sederhana ini, kita dapat memahami dengan jelas bagaimana media queri  digunakan dalam membuat tampilan responsif. Dalam CSS berikut, lebar gambar diubah berdasarkan ukuran viewport dengan menambahkan style berdasarkan rentang. Spesifikasi jangkauan untuk pengaturan ukuran layar viewport min-maks.

Kelas DBController untuk Membuat Koneksi Database dan Mengambil Gambar

Kelas DBController ini membangun koneksi dalam konstruktornya. Ini berisi fungsi runQuery () untuk mengambil hasil basis data dengan mengeksekusi kueri yang dilewatkan sebagai argumennya.

 

MySQL DatabaseTable tbl_image Struktur dan Data

Ini skrip SQL untuk data tabel tbl_image, struktur dan indeks.

 

Screenshot ini menunjukkan keluaran galeri gambar dalam tampilan desktop dan tampilan seluler

Cara Membuat Galeri Responsif dengan CSS Media

Cara Membuat Galeri Responsif dengan CSS Media

OKe itulah tadi pembahasan saya tentang Cara Membuat Galeri Responsif dengan CSS Media, semoga bermanfaat.