Blog Nur Akhwan

Membuat Galeri Foto dengan PHP dan jQuery Fancybox

Tutorial ini merupakan lanjutan dari postingan sebelumnya yaitu  : Membuat Gallery Foto dengan PHP - Bag. 1  yang dulu katanya admin ada  lanjutannya, namun ternyata tidak dilanjutkan sama sekali.. :P haahahaa.. maklumlah, klu dulu tampilannya masih sangat aneh, dan minim animasi. Nah pada postingan kali ini adalah masih tentang membuat galeri dengan PHP, tapi dengan dengan embel-embel "dan jQuery Fancybox". Tahu FancyBox, kan, yak, itu, untuk menampilkan detail suatu gambar, dengan animasi jQuery (definisi menurut ane hahaaha).. contohnya adalah sebagai berikut :


Selain halaman depan, juga akan saya tambahkan halaman admin untuk galeri tersebut. Untuk struktur folder-foldernya adalah sebagai berikut :



 Untuk databasenya, buat database dengan nama "lab" :


CREATE TABLE `galeri` (
  `id` int(4) NOT NULL auto_increment,
  `file` varchar(200) NOT NULL,
  `kategori` int(2) NOT NULL,
  `keterangan` varchar(255) NOT NULL,
  `oleh` int(2) NOT NULL,
  `tgl` datetime NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;
CREATE TABLE `galerikategori` (
  `id` int(2) NOT NULL auto_increment,
  `nama` varchar(200) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;


Kemudian selanjutnya file "koneksi.php"

<?php
$h = "localhost";
$u = "root";
$p = "";
$db = "lab";
mysql_connect($h, $u, $p) or die ("Not connected, please try again later");
mysql_select_db($db);
//Fungsi Perkecil Ukuran Gambar //
//penggunaan ===> perkecil("img/siswa_1.JPG", "img/small/"); (folder/file, folder/folder/)
function perkecil($imgAsal, $imgTujuan) {
$pcImgAsal = explode("/", $imgAsal);
$jAr = count($pcImgAsal) - 1;
$namaFileAsli = $pcImgAsal[$jAr];
//identitas file asli
$im_src = imagecreatefromjpeg($imgAsal);
$src_width = imageSX($im_src);
$src_height = imageSY($im_src);
//Simpan dalam versi small 110 pixel
//set ukuran gambar hasil perubahan
$dst_width = 110;
$dst_height = ($dst_width/$src_width)*$src_height;
//proses perubahan ukuran
$im = imagecreatetruecolor($dst_width,$dst_height);
imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
//Simpan gambar
imagejpeg($im, $imgTujuan."_s_".$namaFileAsli);

imagedestroy($im_src);
imagedestroy($im);
}
?>
<html>
<head>
<script type="text/javascript" src="JS/jquery.min.js"></script>
<script type="text/javascript" src="JS/fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="JS/fancybox/jquery.mousewheel.js"></script>
<link rel="stylesheet" type="text/css" href="JS/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<title>Galeri dengan jQuery Fancybox</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/tooltip.js"></script>

</head>
<body>
Selanjutnya file "index.php"

<div id="isi">
<h1>Galeri Foto</h1>
<p>
<?php
include "koneksi.php";
echo "<ul id='produk'>";
$QKategori = mysql_query("SELECT * FROM galerikategori");
while ($AKategori = mysql_fetch_array($QKategori)) {
$Kategori = $AKategori[0];
$QGetNamaKategori = mysql_query("SELECT nama FROM galerikategori WHERE id = '$Kategori'");
$AGetNamaKategori = mysql_fetch_array($QGetNamaKategori);
$QJumlahPerKategori = mysql_query("SELECT file FROM galeri WHERE kategori = '$Kategori'");
$JJumlahPerKategori = mysql_num_rows($QJumlahPerKategori);
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$Kategori' ORDER BY RAND()");
$AGaleri = mysql_fetch_array($QGaleri);
if ($JJumlahPerKategori == 0) {
echo "
<a href='#' onclick=\"javascript:alert('belum ada foto ..!')\" class='tooltip' title='$AGetNamaKategori[0]'>
<li class='lis-produk'>
<div class='isi'><img src='foto/no-image.jpg'></div>
</li>
</a>";
} else {
echo "
<a href='galeri_detil.php?kat=$Kategori' class='tooltip' title='$AGetNamaKategori[0]'>
<li class='lis-produk'>
<div class='isi'><img src='foto/$AGaleri[1]'></div>
</li>
</a>";
}
}
echo "</ul>";
?>
</p>
</div>

dan file "galeri_detil.php" :
<?php
include "koneksi.php";

$Kategori = $_GET['kat'];
$nKategori = mysql_fetch_array(mysql_query("SELECT nama FROM galerikategori WHERE id = '$Kategori'"));
?>
<div id="isi">
<h1>Galeri Foto | <?php echo $nKategori[0]; ?></h1>
<p>
<b><a href="index.php">Back to Gallery</a></b>
<div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper"></div>
      <div class="ad-controls"></div>
   
 <center>
 <div class="ad-nav">
        <div class="ad-thumbs">
          <ul id='produk'>
<?php
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$Kategori'");
while ($AGaleri = mysql_fetch_array($QGaleri)) {
?>
<li class="lis-produk">
<h3><?=$AGaleri[3]?></h3>
<a class="fancybox" href="foto/<?=$AGaleri[1]?>" data-fancybox-group="gallery" title="<?=$AGaleri[3]?>">
<img src="foto/<?=$AGaleri[1]?>" alt="">
</a>
</li>
            <?php } ?>
          </ul>
        </div>
      </div>
 </center>
</div>
</p>
</div>
</body>
</html> 
Selanjutnya membuat halaman admin, yang sengaja tidak saya beri autentifikasi atau proses login. Untuk membuat proses login dengan jQuery bisa dilihat di tutorial "membuat halaman login dengan jQuery".

Buat folder baru dengan nama admin, yang berisi 2 file :
1. index.php
<?php
include "../koneksi.php";
?>
<div id="isi">
<h1>Admin Galeri Foto</h1>
<?php
//variabel post
$p = $_GET['p'];
if ($p == "simpan_album") {
$QTambahKategori = mysql_query("INSERT INTO galerikategori VALUES ('', '".$_POST['kategori']."')");
if ($QTambahKategori) {
echo "<script>alert('Berhasil Ditambahkan'); window.open('index.php', '_self');</script>";
} else {
echo "<script>alert('Gagal Ditambahkan'); window.open('index.php', '_self');</script>";
}
}
//variabel Get
$mod = $_GET['mod'];
$id_kat = $_GET['id_kat'];
if ($mod == "del_kat") {
//hapus file

$QDelKategori = mysql_query("DELETE FROM galerikategori WHERE id = '$id_kat'");
$QDelGaleriKat = mysql_query("DELETE FROM galeri WHERE kategori = '$id_kat'");
if ($QDelKategori && $QDelGaleriKat) {
echo "<script>alert('Berhasil Dihapuskan'); window.open('index.php', '_self');</script>";
} else {
echo "<script>alert('Gagal Dihapus'); window.open('index.php', '_self');</script>";
}
} else if ($mod == "upload") {
$id_kat = $_POST['id_kat'];
$ket = $_POST['ket'];
//upload foto
$fileName = $_FILES['foto']['name'];
$fileSize = $_FILES['foto']['size'];
$fileError = $_FILES['foto']['error'];
$fileType = $_FILES['foto']['type'];
if ($fileType == "image/gif" || $fileType == "image/pjpeg" || $fileType == "image/jpeg") {
if (move_uploaded_file($_FILES['foto']['tmp_name'], '../foto/'.$fileName)) {
perkecil("../foto/$fileName", "../foto/");
mysql_query("INSERT INTO galeri VALUES ('', '$fileName', '$id_kat', '$ket', '0', now())");
}
echo "<script>alert('Berhasil Ditambahkan'); window.open('galeri_form.php?id_kat=".$_POST['kategori']."', '_self');</script>";
} else {
echo "<script>alert('Gagal Ditambahkan'); window.open('galeri_form.php?id_kat=".$_POST['kategori']."', '_self');</script>";
}
}
?>
<!-- End Box Head --> <div style="margin: 0 15px 0 15px">
<div id="tKategori">
<form action="?p=simpan_album" method="post" name="tmKategori" onsubmit="return cekNama();">
<input type="text" name="kategori" size="40" style="padding: 3px" placeholder="Isikan nama album" required>&nbsp;<input type="submit" value="Buat Kategori" name="tbKat" style="padding: 3px">
</form>
</div>
</div>
<div style="margin: 0 15px 0 15px">
<?php
$QKategori = mysql_query("SELECT * FROM galerikategori");
while ($AKategori = mysql_fetch_array($QKategori)) {
$Kategori = $AKategori[0];
$QGetNamaKategori = mysql_query("SELECT nama FROM galerikategori WHERE id = '$Kategori'");
$AGetNamaKategori = mysql_fetch_array($QGetNamaKategori);
$QJumlahPerKategori = mysql_query("SELECT file FROM galeri WHERE kategori = '$Kategori'");
$JJumlahPerKategori = mysql_num_rows($QJumlahPerKategori);
echo "
<div id='foto' style='background: #E3FFB5; padding: 5px; margin: 10px 0 10px 0; border: solid 1px #85C226; overflow: auto; width: 50%'>
<h3 style='font-size: 10px; font-weight: bold;'>$AKategori[1] ($JJumlahPerKategori foto) |
[ <a href='galeri_form.php?id_kat=$AKategori[0]'>Manajemen Kategori Foto</a> ] |
[ <a href='?p=galeri&mod=del_kat&id_kat=$Kategori' onclick=\"return konfirmasi('Menghapus Data ini - $Kategori - ')\">Hapus Kategori ini</a> ]
</h3>";
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$Kategori'");
$no = 1;
if ($JJumlahPerKategori == 0) {
echo "<font color='red'><b>Belum ada foto dalam kategori ini</b></font>";
} else {
while ($AGaleri = mysql_fetch_array($QGaleri)) {
echo "
<td align='center'>
<img src='../foto/_s_$AGaleri[1]' width='50px' height='50px' style='margin: 10px 10px auto; border: solid 3px #85C226'>
</td>";
$no++;
if ($no > 6 ) {
echo "</tr><tr>";
}
}
}
echo "</div><!--</tr></table><br>-->";
}
?>
</div>
</div> 

2. galeri_form.php
<?php
include "../koneksi.php";
$p = $_GET['p'];
$id_kat = $_GET['id_kat'];
$id_foto= $_GET['id_foto'];
$mod = $_GET['mod'];
if (empty($id_kat)) {
echo "<script>alert('Pilih dulu albumnya')</script>";
echo "<meta http-equiv='refresh' content='0;url=http:index.php'>";
}
$q_ket_kategori = mysql_query("SELECT * FROM galerikategori WHERE id = '".$id_kat."'");
$ket_kat = mysql_fetch_array($q_ket_kategori);
if ($p == "upload") {
$id_kat = $_POST['id_kat'];
$ket = $_POST['ket'];
//upload foto
$fileName = $_FILES['foto']['name'];
$fileSize = $_FILES['foto']['size'];
$fileError = $_FILES['foto']['error'];
$fileType = $_FILES['foto']['type'];
if ($fileType == "image/gif" || $fileType == "image/pjpeg" || $fileType == "image/jpeg") {
$QUpload = mysql_query("INSERT INTO galeri VALUES ('', '$fileName', '$id_kat', '$ket', '0', now())");
$move = move_uploaded_file($_FILES['foto']['tmp_name'], '../foto/'.$fileName);
perkecil("../foto/$fileName", "../foto/");
echo "<script>alert('Berhasil Ditambahkan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
} else {
echo "<script>alert('Gagal Ditambahkan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
}
} else if ($p == "del_foto") {
$getNamaFile = mysql_query("SELECT file FROM galeri WHERE id = '".$id_foto."'");
$aNamaFile = mysql_fetch_array($getNamaFile);
$q_del = mysql_query("DELETE FROM galeri WHERE id = '$id_foto'");
if ($q_del) {
$del_file1 = unlink("../foto/".$aNamaFile[0]);
$del_file2 = unlink("../foto/_s_".$aNamaFile[0]);
echo "<script>alert('Berhasil Dihapuskan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
} else {
echo "<script>alert('Gagal Dihapuskan'); window.open('galeri_form.php?id_kat=$id_kat', '_self');</script>";
}

}
?>
<div id="isi">
<h1>Upload foto pada : <?php echo $ket_kat['nama']; ?></h1>
<a href="index.php">Back To beranda</a>
<form name="fUploadGaleri" action="?p=upload&id_kat=<?=$id_kat?>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id_kat" value="<?php echo $id_kat; ?>">
<table>
<tr>
<td>File</td>
<td><input type="file" name="foto" size="10"> *HANYA tipe .GIF dan .JPEG</td>
</tr>
<tr>
<td>Keterangan</td>
<td><input type="text" name="ket" size="45" placeholder="Isikan keterangannya" required></td>
</tr>
<tr>
<td width="124">&nbsp;</td>
<td width="319"><input type="submit" name="tbUpload" value="kirim"></td>
</tr>
</table>
</form>
<hr>
<br>
<b>Daftar Foto dalam kategori ini</b><br>
<?php
$QJumlahPerKategori = mysql_query("SELECT file FROM galeri WHERE kategori = '".$id_kat."'");
$JJumlahPerKategori = mysql_num_rows($QJumlahPerKategori);
?>
<div id='foto' style='background: #E3FFB5; padding: 5px; margin: 10px 0 10px 0; border: solid 1px #85C226; overflow: auto; width: 50%'>
<h3 style='font-size: 10px; font-weight: bold;'><?=$ket_kat['nama']." ( ".$JJumlahPerKategori."  foto) | "?>
[ <a href="index.php?mod=del_kat&id_kat=<?=$id_kat?>" onclick="return konfirmasi('Menghapus Data ini - <?=$ket_kat['nama']?> - ')">Hapus Kategori ini</a> ]
</h3>
<?php
$QGaleri = mysql_query("SELECT * FROM galeri WHERE kategori = '$id_kat'");
if ($JJumlahPerKategori == 0) {
echo "<font color='red'><b>Belum ada foto dalam kategori ini</b></font>";
} else {
while ($AGaleri = mysql_fetch_array($QGaleri)) {
?>
<div style="float: left">
<img src='../foto/_s_<?=$AGaleri[1]?>' width='50px' height='50px' style='margin: 10px 10px auto; border: solid 3px #85C226'>
<a style="font-size: 12px; margin-left: 23px; display: block" href='?p=del_foto&id_kat=<?=$id_kat?>&id_foto=<?=$AGaleri[0]?>' title='Klik Untuk Menghapus Foto Ini' onclick="return confirm('Anda yakin akan menghapus Foto ini ? ')">Hapus
</a>
</div> <?php }
}
echo "</tr></div><!--</tr></table><br>-->";
?>
</div> 

Selanjutnya adalah membuat folder "foto" yang digunakan untuk menyimpan foto yang diupload, dan folder "JS" yang berisi file Javascript, seperti jQuery, dan plugin Fancybox.

Setelah, anda copy pastekan kode di atas (pastilah dicopy paste, kan....? :P, hehehe) jika berhasil akan menjadi seperti di halaman demo di bawah ini :


Nah, seperti itu, yak pemiarsa, sekian postingan dari saya, atas kunjungannya diucapkan terima kasih. 

Oh, iya sampe lupa, pastilah, penginnya tinggal copas skrip yang udah jadi ke localhost, yak... haahahahaha... ini, linknya, yak.. silakan disedottt di link di bawah ini :


[UPDATE - 10 SEPTEMBER 2014]
1. Demo program :
http://nur-akhwan.web.id/demo/blog/fancybox/

2. Database :
http://www.4shared.com/document/iKsXPkkFce/Database_-_blog_fancybox.html

3. Source Code :
http://www.4shared.com/rar/53WFpYLyce/Source_Code_-_blog_fancybox.html


*) PROMOSI JASA 
Jangan lupa klo membutuhkan website profil, website sekolah, sistem informasi, yang ada hubungannya dengan website, hubungi ane saja, gan. Hubungi saja lewat YM di samping, atau untuk respon cepat hubungi : 085292747190 (WA), 085643437024 (SMS), BB :  790d66d2.

48 komentar:

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. hahahay... pasti tidak liat link di bawah yang kecil itu... hehehe.... atau download aja, disini :

    http://code.google.com/p/akhwan-free-project/downloads/list

    BalasHapus
  3. @siti : masama, terima kasih atas kunjungannya di blog saya... :)

    BalasHapus
  4. agan makasih banget yah .. berkat tutorial ini , saya jadi bisa juga .. buat album pribadi dengan php dan mySql ..

    ngomong2 klo tutorial CSS indonesia yang bagus2 biar kaya blog agan ini dimana yah .?

    salam hangat gann :) http://blog.riandesign.web.id

    BalasHapus
  5. matur thankyu gan,,,

    BalasHapus
  6. Assalamuallaikum....
    kak maaf mhon bantuannya!

    script di atas uda saya coba.
    tapi pas waktu moment penampilan fancybox nya si gambar ga muncul!
    knpa ia?

    BalasHapus
  7. Mas Mo nanya kok ada error begini?? bagaimana cara ngatasinya..
    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\PERCOBAAN\galeri\index.php on line 10

    BalasHapus
  8. assalamualaikum,,

    kak, aku ijin copy buat belajar sama ngelengkapin tugas kuliah aku yah.. makasi kak, ilmunya bermanfaat banget,, terus sharing2 yah!

    best regard,
    cinthya

    BalasHapus
  9. mas, problem aku sama ky Anonim, gk muncul gbrny..

    BalasHapus
  10. jasa web dan download kunjungi downloadcyber.byethost31.com

    BalasHapus
  11. mau tanya gan,,,,saya sudah gunakan scrift nya tapi saya gabung di website saya tapi setelah saya klik potonya kenapa efek fancybox nya tidak berfungsi....

    BalasHapus
  12. hatur nuhun a, tutorial sangat membantu....

    BalasHapus
  13. untuk menggunakan jquery pada website yang membuat gallery foto anda menjadi scrol dan berefek kunjung http://downloadcyber.byethost31.com atau http://software.byethost12.com

    BalasHapus
  14. gan ada yg gk bisa di download linknya rusak tapi numpang sedot beberapa thx gan nice share

    BalasHapus
  15. Gan ijin download ya . . . . .

    BalasHapus
  16. thax... sangat membantu... salam kenal.......

    BalasHapus
  17. TERIMA KASIH ... semoga ilmunya berguna bagi nusa dan bangsa

    BalasHapus
  18. makasih udah berbagi

    BalasHapus
  19. ijin gan... o y bwt logout gmn yah???

    BalasHapus
  20. link downloadnya ga bisa gan

    BalasHapus
  21. i like this gan, semoga ilmux bermanfaat dan amalx gak akan putus

    BalasHapus
  22. Kuarng membantu, sebab tutorialnya tidak komplit, malah membingungkan, isi folder pada kosong

    BalasHapus
  23. link download nya gan nggak bisa, coba ngopas malah ada error, mohon bantuannya link nya di benerrin :-)

    BalasHapus
  24. Sudah ane update, gan, per 10 September 2014, untuk download skrip dan demo programnya..

    Oiya, maaf, kalau bahasa tutorialnya kurang bisa dimengerti,..

    BalasHapus
  25. mas.. muncul eror di bagian admin/index
    $p = $_GET['p'];
    $mod = $_GET['mod'];
    $id_kat = $_GET['id_kat'];

    gimana solusinya mas. makasih

    BalasHapus
    Balasan
    1. diganti make gini, gan :

      $p = isset($_GET['p']) ? $_GET['p'] : null;
      $mod = isset($_GET['mod']) ? $_GET['mod'] : null;
      $id_kat = isset($_GET['id_kat']) ? $_GET['id_kat'] : null;

      Hapus
  26. mas mau tanya masnya pakek xampp versi berapa?
    soalnya script udah sama persis tapi masih ada yg eror
    sama kaya' ma subakir
    makasih

    BalasHapus
    Balasan
    1. ane make XAMPP versi 1.8.2,.. normal jaya..
      aslinya tu skrip ane buat di WAMP server versi 1.7.0..

      Hapus
  27. gan kok gini
    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\slide_dprd\index.php on line 10

    BalasHapus
  28. gan kalo buat di blog coding singkatnya ada ga ?

    BalasHapus
  29. HEY,.,maf boleh tanya aku dah copy buat refrensi saj sih,.tapi kok muncul "Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:\xampp\htdocs\blog_fancybox\index.php on line 10.,.,.,gimana ngatasinya ? maksih

    BalasHapus
  30. izin belajar gan matur nuwun

    BalasHapus
  31. Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\DATABASE-JEMAAT\include\input_galeri\galeri_form.php on line 17

    erornya script yang ini gmna yah???
    $ket_kat = mysql_fetch_array($q_ket_kategori);

    BalasHapus
  32. link download source codenya error mas

    BalasHapus
  33. gan cara otak atik warnanya dimana ini ,terus buat hapus kog gk bisa

    BalasHapus
  34. mas mau nanya kalo mau ngatur ukuran file agar dapat upload file gambar yang kapasitasnya lebih besar gimana mas ,mohon solusinya

    BalasHapus
  35. gan terimakasih banyak untuk ilmunya.
    jgn lupa share ilmu yang lainnya ya gan. semoga ilmunya berkah, sukses selalu. :D

    BalasHapus
  36. ijin sedot gan, terima kasih atas ilmunya

    BalasHapus
  37. Jadi penasaran pingin nyoba, ada demonya gak mas :)

    www.jualobatkuatcaturex.blogspot.com

    BalasHapus