membuat gallery foto
TRANSCRIPT
Modul PHP 3 : Membuat Gallery Foto Hal 1
MODUL PHP 3
MEMBUAT GALLERY FOTO
1. Buatlah database dengan nama dbgallery.
>create database dbgallery;
2. Buatlah table album dan table gallery dengan kode seperti dibawah ini :
CREATE TABLE `album` (
`id_album` int(5) NOT NULL auto_increment,
`jdl_album` varchar(100) collate latin1_general_ci NOT NULL,
`gbr_album` varchar(100) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`id_album`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci
AUTO_INCREMENT ;
CREATE TABLE `gallery` (
`id_gallery` int(5) NOT NULL auto_increment,
`id_album` int(5) NOT NULL,
`jdl_gallery` varchar(100) collate latin1_general_ci NOT NULL,
`keterangan` text collate latin1_general_ci NOT NULL,
`gbr_gallery` varchar(100) collate latin1_general_ci NOT NULL,
PRIMARY KEY (`id_gallery`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci
AUTO_INCREMENT ;
Modul PHP 3 : Membuat Gallery Foto Hal 2
3. Koneksi ke database. Tulis kode berikut , simpan dengan nama : koneksi_galery.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "dbgallery";
// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>
Atau memakai koding koneksi berikut ini :
����lakukan pengetesan koneksi !!
Modul PHP 3 : Membuat Gallery Foto Hal 3
4. Membuat file style.css tulis koding berikut !
BODY {
font-size: 14px;
}
TABLE {
border-collapse: collapse;
}
TH {
background-color: #2e6ab1;
padding-left: 14px;
padding-right: 8px;
border: 1px solid #cccccc;
text-align:left;
color:#ffffff;
}
TD {
font-size: 11pt;
background-color: #F0F0F0;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #cccccc;
}
INPUT,SELECT {
font-size: 11pt;
}
Buat File fungsi_thumb.php yang berguna untuk mengubah ukuran
gambar, agar tidak memakan banyak memory.
<?php
function thumb($fupload_name,$direktori){
// File gambar yang di upload
$file_upload = $direktori . $fupload_name;
// Simpan gambar dalam ukuran sebenarnya
$nama_gbr_asli = $_FILES['fupload']['tmp_name'];
move_uploaded_file($nama_gbr_asli, $file_upload);
// Dapatkan identitas file asli dari file jpg yang di upload
$gbr_asli = imagecreatefromjpeg($file_upload);
$lebar = imageSX($gbr_asli);
$tinggi = imageSY($gbr_asli);
Modul PHP 3 : Membuat Gallery Foto Hal 4
// Simpan dalam versi yang diinginkan 200 pixel (thumbnailnya)
$thu_lebar = 200;
$thu_tinggi = ($thu_lebar/$lebar)*$tinggi;
// Fungsi untuk mengubah ukuran gambar (resample)
$gbr_thumb = imagecreatetruecolor($thu_lebar,$thu_tinggi);
imagecopyresampled($gbr_thumb, $gbr_asli, 0, 0, 0, 0, $thu_lebar,
$thu_tinggi, $lebar, $tinggi);
// Simpan gambar yang versi thumbnailnya
imagejpeg($gbr_thumb,$direktori . "kecil_" . $fupload_name);
// Hapus gambar yang ada di memori
imagedestroy($gbr_asli);
imagedestroy($gbr_thumb);
}
?>
5. Membuat Form Album , tulis koding berikut . Simpan dengan nama
Form_album.php
Modul PHP 3 : Membuat Gallery Foto Hal 5
6. Buat file input_album.php sebagai Action dari form album diatas sebagai
berikut :
7. Membuat file Form_galeri.php :
Modul PHP 3 : Membuat Gallery Foto Hal 6
8. Membuat File Input_galeri.php sebagai Action dari form_galeri.php
� LAKUKAN PENGISIAN ALBUM DAN GALERI, LALU CEK
APAKAH SUDAH TERSIMPAN DENGAN BENAR DI TABEL
album dan gallery PADA DATABASE dbgallery.
� Jika sudah berhasil menyimpan album dan gallery, kerjakan
Modul selanjutnya yaitu menampilkan album dan gallery.
Modul PHP 3 : Membuat Gallery Foto Hal 7
9. Membuat file tampil_album.php
<link href="style.css" rel="stylesheet" type="text/css">
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbgallery");
// Tentukan kolom
$col = 4;
$s = mysql_query("SELECT jdl_album, album.id_album, gbr_album,
COUNT(gallery.id_gallery) as jumlah
FROM album LEFT JOIN gallery ON album.id_album=gallery.id_album
GROUP BY jdl_album");
echo "<table><tr>";
$cnt = 0;
while ($w = mysql_fetch_array($s)) {
if ($cnt >= $col) {
echo "</tr><tr>";
$cnt = 0;
}
$cnt++;
echo "<td align=center><br><a href=tampil_galeri.php?id=$w[id_album]>
<img src='img_album/kecil_$w[gbr_album]' border=0><br>
$w[jdl_album]</a><br>($w[jumlah] Foto)<br></td>";
}
echo "</tr></table>";
?>
Modul PHP 3 : Membuat Gallery Foto Hal 8
10. Membuat file tampil_galeri.php
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function bukajendela(url) {
window.open(url, "window_baru",
"width=800,height=600,left=320,top=100,resizable=1,scrollbars=1");
}
</script>
<?php
include "koneksi_galeri.php";
// Tentukan kolom
$col = 4;
// Langkah 1: Tentukan batas (limit)
$batas = 4;
// Langkah 2: Cek halaman & posisi data
$halaman = $_GET['halaman'];
if(empty($halaman)){
$posisi = 0;
$halaman = 1;
}
else{
$posisi = ($halaman-1) * $batas;
}
// Langkah 3: Sesuaikan perintah SQL dengan posisi dan batas
$s = mysql_query("SELECT * FROM gallery WHERE id_album='$_GET[id]' ORDER BY id_gallery
LIMIT $posisi,$batas");
echo "<table><tr>";
$cnt = 0;
while ($w = mysql_fetch_array($s)) {
if ($cnt >= $col) {
echo "</tr><tr>";
$cnt = 0;
}
$cnt++;
echo "<td align=center><br>
<a href='#' onclick=\"bukajendela('zoom.php?id=$w[id_gallery]')\">
<b>$w[jdl_gallery]</b><br>
<img src='img_galeri/kecil_$w[gbr_gallery]' border=0></a><br>
Modul PHP 3 : Membuat Gallery Foto Hal 9
$w[keterangan]<br></td>";
}
echo "</tr></table>";
//Langkah 4: Hitung total data dan halaman serta tampilkan link untuk navigasi antar halaman
echo "<br>Halaman : ";
$tampil2 = mysql_query("SELECT * FROM gallery WHERE id_album='$_GET[id]'");
$jmldata = mysql_num_rows($tampil2);
$jmlhalaman = ceil($jmldata/$batas);
for($i=1;$i<=$jmlhalaman;$i++){
if ($i != $halaman){
echo " <a href=$_SERVER[$PHP_SELF]?halaman=$i&id=$_GET[id]>$i</A> | ";
}
else{
echo " <b>$i</b> | ";
}
}
?>
11. Membuat file style3.css dipakai untuk scroll.php
BODY {font-size: 14px;
}
TABLE {
border-collapse: collapse;
}
TH {
background-color: #2e6ab1;
padding-left: 14px;
padding-right: 8px;
border: 1px solid #cccccc;
text-align:left;
color:#ffffff;
}
TD {
font-size: 11pt;
background-color: #E6E6C2;
padding-left: 8px;
Modul PHP 3 : Membuat Gallery Foto Hal 10
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border: 2px solid #72a143;
}
INPUT,SELECT {
font-size: 11pt;
}
12. Membuat file scroll.php
<link href="style3.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function bukajendela(url) {
window.open(url, "window_baru", "width=800,height=600,left=320,top=100,resizable=1,scrollbars=1");
}
</script>
<table width=600>
<tr>
<td>
<marquee onmouseover=this.stop() onmouseout=this.start() scrollamount=2 scrolldelay=10
direction=left width=100% height=150>
<?php
include "koneksi_galeri.php";
$s = mysql_query("SELECT * FROM gallery WHERE id_album='21' ORDER BY id_gallery DESC");
while ($w = mysql_fetch_array($s)) {
echo "<a href='#' onclick=\"bukajendela('zoom.php?id=$w[id_gallery]')\"><img
src='img_galeri/kecil_$w[gbr_gallery]' border=0></a> ";
}
?>
</marquee>
</td>
</tr>
</table>
Modul PHP 3 : Membuat Gallery Foto Hal 11
MEMBUAT GALERI CANTIK ( pakai frame )
1. Buat file style2.css
BODY {
font-size: 14px;
}
TABLE {
border-collapse: collapse;
}
TH {
background-color: #2e6ab1;
padding-left: 14px;
padding-right: 8px;
border: 1px solid #cccccc;
text-align:left;
color:#ffffff;
}
TD {
font-size: 11pt;
background-color: #ffffff;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border: 1px solid #ffffff;
}
INPUT,SELECT {
font-size: 11pt;
}
2. BUAT FILE Album_cantik.php
<link href="style2.css" rel="stylesheet" type="text/css">
<style>
.img{
border:2px solid #72a143;
padding:2px;
background:#ffeda5;
}
</style>
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbgallery");
Modul PHP 3 : Membuat Gallery Foto Hal 12
// Tentukan kolom
$col = 4;
$s = mysql_query("SELECT jdl_album, album.id_album, gbr_album,
COUNT(gallery.id_gallery) as jumlah
FROM album LEFT JOIN gallery
ON album.id_album=gallery.id_album
GROUP BY jdl_album");
echo "<table><tr>";
$cnt = 0;
while ($w = mysql_fetch_array($s)) {
if ($cnt >= $col) {
echo "</tr><tr>";
$cnt = 0;
}
$cnt++;
echo "<td align=center><br><a href=galeri_cantik.php?id=$w[id_album]>
<img class='img' src='img_album/kecil_$w[gbr_album]' border=0><br>
$w[jdl_album]</a><br>($w[jumlah] Foto)<br></td>";
}
echo "</tr></table>";
?>
3. Membuat file geleri_cantik.php
<link href="style2.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function bukajendela(url) {
window.open(url, "window_baru", "width=800,height=600,left=320,top=100,resizable=1,scrollbars=1");
}
</script>
<style type="text/css">
.image1{
width : 200px;
height : 150px;
padding : 25px;
background: url(frame.png) no-repeat;
}
</style>
<!--[if lt IE 7]>
Modul PHP 3 : Membuat Gallery Foto Hal 13
<style type="text/css">
.image1 em{ behavior: url(iepngfix.htc); cursor: pointer; }
</style>
<![endif]-->
<?php
include "koneksi_galeri.php";
// Tentukan kolom
$col = 3;
// Langkah 1: Tentukan batas (limit)
$batas = 6;
// Langkah 2: Cek halaman & posisi data
$halaman = $_GET['halaman'];
if(empty($halaman)){
$posisi = 0;
$halaman = 1;
}
else{
$posisi = ($halaman-1) * $batas;
}
// Langkah 3: Sesuaikan perintah SQL dengan posisi dan batas
$s = mysql_query("SELECT * FROM gallery WHERE id_album='$_GET[id]' ORDER BY id_gallery LIMIT
$posisi,$batas");
echo "<table><tr>";
$cnt = 0;
while ($w = mysql_fetch_array($s)) {
if ($cnt >= $col) {
echo "</tr><tr>";
$cnt = 0;
}
$cnt++;
echo "<td align=center><br>
<a href='#' onclick=\"bukajendela('zoom.php?id=$w[id_gallery]')\">
<b>$w[jdl_gallery]</b>
<div class=image1><img src='img_galeri/kecil_$w[gbr_gallery]' border=0 width=200
height=150></div></a>
$w[keterangan]<br></td>";
}
echo "</tr></table>";
Modul PHP 3 : Membuat Gallery Foto Hal 14
HASIL TAMPILAN ALBUM_CANTIK.PHP
Hasil Tampilan galeri_cantik.php