Membuat galeri foto php

Question

Home
PHP MYSQLi
Membuat Halaman Galeri Mudah dengan PHP MYSQLi

Bingung Desain Geleri Web di website...??? Sementara data sudah input galeri sudah ada dalam database..??? Pernah temen-temen rasakan hal yang sama gak..?????

Table of Contents Show

Membuat Halaman Galeri di Website PHP MYSQli
Artikel Rekomendasi
Artikel Terkait Menjumlahkan record / field numerik di database MYSQLCara mudah Membuat laporan Exel dengan PHPAplikasi Database Pegawai Sederhana dengan PHP dan MySQLSensor Nomor HP dengan PHPMembuat Validasi Form Menjadi Array pada PHPMerubah Format Bulan Menjadi Romawi di PHPCara mudah Backup database dengan PHPKonversi Bilangan dengan PHPGanti Path model GET dengan PATH_INFOTop 5 tools online Cek Performa Website
Membuat table database
Buat folder untuk menyimpan gambar
Konfigurasi Database (konfigDb.php)
Galeri gambar dinamis (index.php)
Kode JavaScript:
Kode PHP&HTML:

Nah.. kali ini admin akan menulis Cara Menampilkan Galeri di web dengan data yang di ambil dari database...tidak perlu CSS ribet.. desain ribet... cukup simple dan sederhana... Yuk Simak

Membuat Halaman Galeri di Website PHP MYSQli

Halo teman... sering kali kita kebingungan dalam membuat halaman galeri dalam membuat website kan..?.. nah disini kita akan membuat halaman galeri dengan mengambil data dari database... kemudian kita tampilkan dengan hanya memanfaatkan table.. mudah bukan...???

Disini kita dapat membuat perulangan 2 kolom , dengan menggambil data di database , logikanya data akan ditampilkan berulang dalam dua gambar sesuai limit di database

Disini saya tidak menjelaskan bagaimana cara input data galeri, melainkan saya membahas cara menampilkan -nya dengan data yang sudah tersimpan di database

Jadi anggaplah kita mempunyai data di database , dan kemudian kita tampilkan gambar dalam bentuk kolom dengan menggunakan tabel , seperti galeri webiste

Berikut codenya

 $col = 2;
 $qry = mysqli_query($koneksi, "SELECT * FROM galeri ORDER BY id_galeri DESC LIMIT 9");  echo "<table align='center'><tr>"; 
 $cnt = 0;
 while ($w = mysqli_fetch_array($qry)) {
 if ($cnt >= $col) {
 echo "</tr><tr>";
 $cnt = 0;
 }
 $cnt++;
 echo "<td align=center valign=top><br />
 <a id='galeri' href='foto/$w[gambar]' width='200' height='200' title='$w[keterangan]'>
 <img alt='galeri' src='foto/$w[gambar]' width='189' height='200' /></a><br />
 <b>$w[keterangan]</b></td>";
 }
 echo "</tr></table>";

Nah.. GImana..?? mudah bukan menampilkan gambar dari database , dengan mengatur kolom dan baris , sehingga membentuk sebuah galeri website

Artikel Rekomendasi

Membuat table database

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

CREATETABLE`gambar` (
`id`int(11) NOTNULL AUTO_INCREMENT,
`nama_file`varchar(255) COLLATE utf8_unicode_ci NOTNULL,
`judul`varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`diupload` datetime NOTNULL,
`status` enum('1','0') COLLATE utf8_unicode_ci NOTNULL,
PRIMARYKEY (`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=newmysqli($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:

<link rel="stylesheet"type="text/css"href="fancybox/jquery.fancybox.css">
<scriptsrc="//code.jquery.com/jquery-3.2.0.min.js"></script>
<scriptsrc="fancybox/jquery.fancybox.js"></script>

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

<scripttype="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>