Pada kesempatan kali ini akan memberikan cara membuat galeri foto di website dengan php. Galeri merupakan salah satu fitur yang biasa di dalam website dan lebih mengutamakan tampilan seperti gambar, wallpaper dan masih banyak lainnya lagi.
Fitur gambar ini bisa mempermudah para pengunjung untuk melihat semua gambar yang ada di dalam website dengan mudah. Maka dari itu, ketika bizzie ingin membuat website dengan penuh gambar.
Maka, satu hal yang bisa dilakukan oleh bizzie adalah menggunakan fitur galeri gambar untuk membuat para pengunjung menjadi lebih mudah di dalam akses semua gambar di dalam website tersebut. Untuk lebih lengkap mengenai cara membuat galeri foto di website dengan php bisa simak lebih jelasnya dibawah ini.
Cara Membuat Galeri Foto di Website dengan PHP
Sebelum bizzie membuat galeri foto di dalam website, maka bisa memperhatikan struktur folder sebagai berikut :
| Root● jquery.fancybox.cas● jquery.fancybox.jsGambar● Thumbindex.phpconfigDb.php |
Apabila bizzie sudah mempunyai struktur diatas, maka bisa melanjutkan ke cara membuat galeri foto di website dengan php selanjutnya dengan menggunakan query sebagai berikut :
| 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; |
Untuk file configDb.php ini berisi beberapa kode PHP yang bisa digunakan untuk menghubungkan dan memilih database. Bizzie harus menentukan database, mulai dari nama host, nama pengguna, password dan nama database. Sebagai berikut kode yang bisa bizzie gunakan :
| <?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);} |
Di dalam file index.php bizzie akan mengambil gambar dari database dan menampilkan di dalam galeri. Selain itu, gambar galeri pop up juga akan diimplementasikan dengan galeri foto yang dinamis dan menggunakan plugin fancybox jQuery. JQUery fancybox plugin yang bisa digunakan untuk menampilkan galeri gambar di pop up kali ini meliputi dari library CSS dan JS dari plugin sebagai berikut :
| <!– 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> |
Supaya bisa meningkatkan event pada fancybox di dalam galeri foto, maka bizzie harus menentukan selector dan menggunakan method fancybox (), sebagai berikut:
| <script type=”text/javascript”> $(“[data-fancybox]”).fancybox({ });</script> |
Kode PHP & HTML Pada Cara Membuat Galeri Foto di Website
Setelah paham mengenai cara membuat galeri foto di website dengan php, maka bisa dilanjutkan, untuk memahami kode PHP dan HTML. Menggunakan PHP, informasi gambar diambil pada database dan file tersebut akan ditampilkan di dalam folder gambar. Untuk menambahkan galeri gambar fancybox, bizzie bisa mengikuti atribut di anchor tax gambar sebagai berikut :
● Menentukan path file di dalam gambar yang besar di dalam attribute href.
● Menambahkan attribute data-fancybox=”group”.
● Menentukan keterangan atau caption gambar di dalam attribute data caption.
| <div class=”container”> <div class=”gallery”> <?php //Menyertakan file konfigurasi database include(‘config.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()){ $image ThumbURL = ‘gambar/thumb/’.$row[“nama_file”]; $image URL = ‘gambar/’.$row[“nama_file”]; ?> <a href=”<?php echo $image URL; ?>” data-fancybox=”group” data-caption=”<?php echo $row[“judul”]; ?>” > <img src=”<?php echo $image ThumbURL; ?>” alt=”” /> </a> <?php } } ?> </div></div> |
CSS kali ini bisa digunakan untuk mendefinisikan styling dasar di dalam galeri gambar tersebut. Sebagai berikut code PHP yang bisa bizzie gunakan :
| <style type=”text/css”>.gallery img { width: 20%; height: auto; border-radius: 5px; cursor: pointer; transition: .3s;}</style> |
Setelah mengikuti semua cara membuat galeri foto di website dengan php, maka bizzie bisa memilih menu bertuliskan “running”. Biasanya, akan ditampilkan beberapa koleksi gambar yang dimasukkan.
Fungsi Menggunakan Galeri Foto di Website
Galeri foto merupakan salah satu tempat yang bisa digunakan untuk memamerkan karya seni. Selain itu, galeri foto ini mempunyai fungsi utama sebagai salah satu wadah untuk melakukan komunikasi antara produsen dan konsumen.
Produsen disini merupakan julukan lain dan seniman yang membuat karya seni. Sedangkan, untuk konsumen merupakan orang yang melakukan koleksi karya seni atau kolektor menikmati karya seni. Sebagai berikut fungsi menerapkan cara membuat galeri foto di website dengan php :
● Sebagai tempat promosi barang atau benda seni.
● Tempat untuk mengembangkan pasar bagi para seniman.
● Tempat untuk memperkenalkan dan melestarikan budaya dan karya seni.
● Sebagai tempat pembinaan usaha antara seniman karya seni dan pengelola.
● Tempat eksistensi pengembangan wirausaha.
● Tempat pengembangan pariwisata nasional.
Maka dari itu, fungsi utama dari galeri foto yaitu tempat untuk menjual dan memamerkan karya seni. Tidak ada perbedaan jauh dengan galeri dan museum mempunyai perbedaan. Ketika galeri berfungsi sebagai tempat untuk menjual dan memamerkan benda, sedangkan museum merupakan tempat yang digunakan memamerkan benda karya seni dengan nilai sejarah dan langka tanpa adanya transaksi jual beli.
Nah, itulah dia penjelasan secara lengkap mengenai cara membuat galeri foto di website dengan php. Semoga penjelasan diatas bisa membantu bizzie untuk membuat galeri foto di dalam website.
