14
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 ;

Membuat Gallery Foto

  • Upload
    hardo

  • View
    1.222

  • Download
    3

Embed Size (px)

Citation preview

Page 1: Membuat Gallery Foto

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 ;

Page 2: Membuat Gallery Foto

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 !!

Page 3: Membuat Gallery Foto

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);

Page 4: Membuat Gallery Foto

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

Page 5: Membuat Gallery Foto

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 :

Page 6: Membuat Gallery Foto

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.

Page 7: Membuat Gallery Foto

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>";

?>

Page 8: Membuat Gallery Foto

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>

Page 9: Membuat Gallery Foto

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;

Page 10: Membuat Gallery Foto

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>

Page 11: Membuat Gallery Foto

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");

Page 12: Membuat Gallery Foto

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]>

Page 13: Membuat Gallery Foto

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>";

Page 14: Membuat Gallery Foto

Modul PHP 3 : Membuat Gallery Foto Hal 14

HASIL TAMPILAN ALBUM_CANTIK.PHP

Hasil Tampilan galeri_cantik.php