Membuat galeri gambar dengan PHP, jQuery & MySQL

Galeri gambar adalah fitur yang sangat umum untuk aplikasi web. Galeri gambar atau galeri foto adalah cara yang efisien untuk memperlihatkan serangkaian gambar. Galeri gambar memungkinkan pengguna untuk mengakses semua gambar dari seluruh situs dalam satu tempat. Jika kamu ingin menerapkan galeri gambar di website, tutorial ini akan membantumu untuk melakukannya dengan mudah dalam waktu yang singkat.

Dalam tutorial ini, saya akan menunjukkan cara membuat galeri gambar dinamis di PHP dengan database MySQL. Juga, saya akan mengintegrasikan gambar galeri popup menggunakan Plugin jQuery fancybox di galeri foto ini. Plugin fancybox popup membantu untuk menampilkan gambar berukuran besar pada popup ketika pengguna mengklik gambarnya.

Sebelum memulai, lihatlah struktur folder dan file untuk membuat galeri gambar dinamis dengan PHP:

Membuat table database

Untuk menyimpan informasi gambar, sebuah table perlu dibuat dalam database. Script SQL berikut akan membuat table gambar dengan beberapa kolom dasar.

CREATE TABLE `gambar` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `nama_file` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `judul` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `diupload` datetime NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Buat folder untuk menyimpan gambar

Buat folder bernama gambar untuk menyimpan gambar dan subfolder bernama thumb untuk menyimpan thumbnail gambar.

Konfigurasi Database (konfigDb.php)

File konfigDb.php berisi beberapa kode PHP untuk menghubungkan dan memilih database MySQL. Kamu perlu menentukan kredensial database kamu, seperti nama host ($dbHost), nama pengguna ($dbUsername), password ($dbPassword), dan nama database ($dbname).

<?php
//rincian DB
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'codingan_demo';

//Membuat koneksi dan memilih DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Tidak dapat menghubungkan database: " . $db->connect_error);
}

Galeri gambar dinamis (index.php)

Dalam file index.php, kita akan mengambil gambar dari database dan menampilkannya di galeri. Juga, gambar galeri popup akan diimplementasikan dengan galeri foto yang dinamis menggunakan plugin fancybox jQuery.

Kode JavaScript:

JQuery fancybox Plugin digunakan untuk menampilkan galeri gambar di popup, ini meliputi library CSS dan JS dari plugin fancybox:

<!-- library CSS fancybox -->
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<!-- library JS -->
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<!-- library JS fancybox -->
<script src="fancybox/jquery.fancybox.js"></script>

Untuk mengikat event fancybox pada galeri foto, kita harud menentukan selector dan memanggil metode fancybox():

<script type="text/javascript">
    $("[data-fancybox]").fancybox({ });
</script>

Kode PHP&HTML:

Menggunakan PHP, informasi gambar diambil dari database dan file-file tersebut ditampilkan dari folder gambar. Untuk menambahkan galeri gambar fancybox, kamu harus menentukan atribut berikut di anchor tag gambar.

• Menentukan path file gambar yang besar dalam atribute href.
• Menambahkan attribute data-fancybox="group".
• Tentukan keterangan/caption gambar dalam atribute data-caption.

<div class="container">
    <div class="gallery">
        <?php
        //Menyertakan file konfigurasi database
        include('konfigDb.php');

        //mengambil gambar dari database
        $query = $db->query("SELECT * FROM gambar ORDER BY diupload DESC");

        if($query->num_rows > 0){
            while($row = $query->fetch_assoc()){
                $imageThumbURL = 'gambar/thumb/'.$row["nama_file"];
                $imageURL = 'gambar/'.$row["nama_file"];
        ?>
            <a href="<?php echo $imageURL; ?>" data-fancybox="group" data-caption="<?php echo $row["judul"]; ?>" >
                <img src="<?php echo $imageThumbURL; ?>" alt="" />
            </a>
        <?php }
        } ?>
    </div>
</div>

Kode CSS:

CSS berikut ini digunakan untuk mendefinisikan styling dasar dari galeri gambar.

<style type="text/css">
.gallery img {
    width: 20%;
    height: auto;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s;
}
</style>

Sekarang kamu akan melihat galeri gambar yang dinamis dengan popup di halaman web.