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 :
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"
<?phpSelanjutnya file "index.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>
<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" :
<?phpSelanjutnya 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".
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>
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> <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"> </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 :
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.
[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.
Komentar ini telah dihapus oleh pengarang.
BalasHapushahahay... pasti tidak liat link di bawah yang kecil itu... hehehe.... atau download aja, disini :
BalasHapushttp://code.google.com/p/akhwan-free-project/downloads/list
thankyou ya :)
BalasHapus@siti : masama, terima kasih atas kunjungannya di blog saya... :)
BalasHapusagan makasih banget yah .. berkat tutorial ini , saya jadi bisa juga .. buat album pribadi dengan php dan mySql ..
BalasHapusngomong2 klo tutorial CSS indonesia yang bagus2 biar kaya blog agan ini dimana yah .?
salam hangat gann :) http://blog.riandesign.web.id
matur thankyu gan,,,
BalasHapusAssalamuallaikum....
BalasHapuskak maaf mhon bantuannya!
script di atas uda saya coba.
tapi pas waktu moment penampilan fancybox nya si gambar ga muncul!
knpa ia?
Mas Mo nanya kok ada error begini?? bagaimana cara ngatasinya..
BalasHapusWarning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\PERCOBAAN\galeri\index.php on line 10
assalamualaikum,,
BalasHapuskak, aku ijin copy buat belajar sama ngelengkapin tugas kuliah aku yah.. makasi kak, ilmunya bermanfaat banget,, terus sharing2 yah!
best regard,
cinthya
numpng sedot.
BalasHapussangat membantu,, makasi mas
BalasHapusmas, problem aku sama ky Anonim, gk muncul gbrny..
BalasHapusjasa web dan download kunjungi downloadcyber.byethost31.com
BalasHapusmau tanya gan,,,,saya sudah gunakan scrift nya tapi saya gabung di website saya tapi setelah saya klik potonya kenapa efek fancybox nya tidak berfungsi....
BalasHapushatur nuhun a, tutorial sangat membantu....
BalasHapusuntuk menggunakan jquery pada website yang membuat gallery foto anda menjadi scrol dan berefek kunjung http://downloadcyber.byethost31.com atau http://software.byethost12.com
BalasHapusgan ada yg gk bisa di download linknya rusak tapi numpang sedot beberapa thx gan nice share
BalasHapusGan ijin download ya . . . . .
BalasHapusthax... sangat membantu... salam kenal.......
BalasHapusTERIMA KASIH ... semoga ilmunya berguna bagi nusa dan bangsa
BalasHapusmakasih udah berbagi
BalasHapusijin gan... o y bwt logout gmn yah???
BalasHapusgan ga bisa d download ?
BalasHapusgan pada error nih
BalasHapuslink downloadnya ga bisa gan
BalasHapuserror nhe gmn ngatasin ny
BalasHapuserror nhe gmn ngatasin ny
BalasHapusi like this gan, semoga ilmux bermanfaat dan amalx gak akan putus
BalasHapusKuarng membantu, sebab tutorialnya tidak komplit, malah membingungkan, isi folder pada kosong
BalasHapuslink download nya gan nggak bisa, coba ngopas malah ada error, mohon bantuannya link nya di benerrin :-)
BalasHapusSudah ane update, gan, per 10 September 2014, untuk download skrip dan demo programnya..
BalasHapusOiya, maaf, kalau bahasa tutorialnya kurang bisa dimengerti,..
mas.. muncul eror di bagian admin/index
BalasHapus$p = $_GET['p'];
$mod = $_GET['mod'];
$id_kat = $_GET['id_kat'];
gimana solusinya mas. makasih
diganti make gini, gan :
Hapus$p = isset($_GET['p']) ? $_GET['p'] : null;
$mod = isset($_GET['mod']) ? $_GET['mod'] : null;
$id_kat = isset($_GET['id_kat']) ? $_GET['id_kat'] : null;
mas mau tanya masnya pakek xampp versi berapa?
BalasHapussoalnya script udah sama persis tapi masih ada yg eror
sama kaya' ma subakir
makasih
ane make XAMPP versi 1.8.2,.. normal jaya..
Hapusaslinya tu skrip ane buat di WAMP server versi 1.7.0..
Matep gan,, makasih infonya
BalasHapuscoba
BalasHapusgan kok gini
BalasHapusWarning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\slide_dprd\index.php on line 10
gan kalo buat di blog coding singkatnya ada ga ?
BalasHapusHEY,.,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
BalasHapusizin belajar gan matur nuwun
BalasHapusWarning: 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
BalasHapuserornya script yang ini gmna yah???
$ket_kat = mysql_fetch_array($q_ket_kategori);
link download source codenya error mas
BalasHapusgan cara otak atik warnanya dimana ini ,terus buat hapus kog gk bisa
BalasHapusmas mau nanya kalo mau ngatur ukuran file agar dapat upload file gambar yang kapasitasnya lebih besar gimana mas ,mohon solusinya
BalasHapusgan terimakasih banyak untuk ilmunya.
BalasHapusjgn lupa share ilmu yang lainnya ya gan. semoga ilmunya berkah, sukses selalu. :D
ijin sedot gan, terima kasih atas ilmunya
BalasHapusJadi penasaran pingin nyoba, ada demonya gak mas :)
BalasHapuswww.jualobatkuatcaturex.blogspot.com