Membuat galeri gambar dengan PHP, jQuery & MySQL

12
Membuat galeri gambar dinamis 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:

Root

  • fancybox
    • jquery.fancybox.css
    • jquery.fancybox.js
  • gambar
    • thumb
  • index.php
  • konfigDb.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.

Membuat galeri gambar dinamis dengan PHP, jQuery & MySQL

BAGIKAN
Subscribe
Beritahu
guest
12 Comments
terlama
terbaru vote teratas
Inline Feedbacks
View all comments
yunita
yunita
Juli 14, 2017 19:41

maaf min mo tanya , aku udah download ini dan di situ ada file baca.text nah tolong jelasin maksud dari nomor 3dan 4 aku kurang paham , maaf min ngerepotin. terimakasih

Marthen
Marthen
November 21, 2017 15:26

maaf min,, mo tanya kok ganti sama penabahan gambar kok ngak bisa ????? trima kasih

agusto
agusto
Januari 14, 2018 04:02

bagaimana jika source gambar dalam galeri nya berasal dari google drive mas? apa bisa

rizki
rizki
Maret 27, 2018 20:40
Reply to  Codingan

mas kok gak bisa diekstrak hasil downloadnya, pesannya file rusak atau korupt

April Yantonius
Juni 8, 2018 09:30

Gan, izin download dan mau saya pakai untuk web saya

okri
okri
Agustus 8, 2018 09:54

gan saya mo nanya klo untuk buat galeri videonya gimna gan.. mohon pencerahannya..mksi

kenny
April 9, 2019 14:17

bisakah anda buat address bar seperti windows explorer dan saat sampai folder tujuan bisa drag foto, contohnya seperti :
All Files > 2019 > Bali > [+] (saat tekan + akan di suruh masukin nama folder baru yang akan di buat)

saat sudah kebuat di dalemnya ada kotak : [ Drag Foto di sini ]

Adies
Juli 29, 2019 11:06

Ijin download gan… Ini cocok untuk bahan pembelajaran saya…
Sukses terus gan

Alex
Agustus 4, 2019 01:03

Koneks ke db udah sip bang,, tapi kenapa masih tampil seperti ni ya ” Membuat galeri gambar dinamis dengan PHP, jQuery & MySQL ”
gak mau tampil gambarnya.

leonardo
leonardo
Juli 23, 2020 08:54

bisa tidak jquery nya diarray

jadi kaya fb gitu
jadi foto foto diupload yang pertama, akan tampil seperti di demo.
trus foto yang diupload kedua, juga tampil di atas foto foto pertama seperti didemo juga.

jadi box foto nya ada banyak tergantuk postingan, dan bisa di play/ di perbesara dan geser untuk setiap postingan