Archive for Desember 2012

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>";
}
}
?>
 <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>";
}
?>
</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>";
?>
</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 :

DEMO (10 sept 2014)

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.

Blog Nur Akhwan

Membuat Galeri Foto dengan PHP dan jQuery Fancybox

Arsip Blog