blue color

Membuat Database Galeri Foto

Buatlah sebuah database dengan nama "galeri", dan buat sebuah tabel "foto" dengan struktur seperti:

Nama Field	Tipe Data	Keterangan
id	int(11)	Primary Key, auto increment
nama_file	varchar(255)
deskripsi	varchar(255)

atau gunakan sql query di bawah

CREATE TABLE `foto` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`nama_file` VARCHAR(255) NOT NULL,
`deskripsi` VARCHAR(255) ,
PRIMARY KEY (`id`)
)
ENGINE = MyISAM;

Membuat Form dan Struktur Folder

Pertama buatlah sebuah folder dengan nama "galeri" di document root web server. Biasanya folder "htdocs" atau "public_html". Di dalam folder galeri buat folder "upload" dan tiga file kosong seperti gambar.

Buka file form.html dan buatlah html form dengan kode berikut.

<html><br />
<head><br />
<title>New Picture</title><br />
</head><br />
<body><br />
<form name="form1" action="save-gallery.php" method="post" enctype="multipart/form-data"><br />
File: <input type="file" name="file" id="file"/><br/><br />
Deskripsi: <textarea name="deskripsi" id="deskripsi"></textarea><br/><br />
<input type="submit" name="save" value="Upload"/><br />
</form><br />
</body><br />
</html><br />

kemudian simpan file tersebut.

Mengupload dan Menyimpan Gambar ke Database

Langkah selanjutnya adalah mengupload gambar ke folder "upload" dan menyimpan deskripsi dan nama file ke tabel "foto". Buka file save-gallery.php dan gunakan kode php di bawah untuk menyimpan gambar.

<?php<br />
    //koneksi ke database<br />
    $conn = mysql_connect('localhost', 'userdb', 'password');<br />
    mysql_select_db('galeri');<br />
    //upload file<br />
    if(!empty($_FILES) && $_FILES['file']['size'] > 0 && $_FILES['file']['error'] == 0){<br />
    $fileName = $_FILES['file']['name'];<br />
    $move = move_uploaded_file($_FILES['file']['tmp_name'], 'upload/'.$fileName);<br />
    if($move){<br />
    //simpan deskripsi dan nama file ke database<br />
    $sql = "insert into foto (nama_file, deskripsi) values<br />
    ('$fileName', '".$_POST['deskripsi']."')";<br />
    mysql_query($sql);<br />
    header("Location: gallery.php");<br />
    exit;<br />
    }<br />
    }<br />
   ?><br />

Pertama tama di baris ke 3-4 membuka koneksi ke database. Di baris ke-6 dilakukan pengecekan apakah file sudah terupload dan ukurannya lebih besar dari nol dan tidak terjadi error. Baris ke-8 memindahkan file yang telah terupload, dari temporary folder ke folder "upload" yang telah dibuat sebelumnya. Baris selanjutnya mengecek jika proses pemindahan file berhasil. Jika berhasil deskripsi dan nama file disimpan ke tabel 'foto'.

Menampilkan Gambar

Selanjunya, menampilkan gambar yang telah disimpan. Buka file gallery.php dan isi dengan kode php di bawah.

<html><br />
    <head><br />
    <title>Gallery</title><br />
    </head><br />
    <body><br />
    <?php<br />
    //koneksi ke database<br />
    $conn = mysql_connect('localhost', 'userdb', 'password');<br />
    mysql_select_db('galeri');<br />
    //membaca data dari database<br />
    $result = mysql_query("select * from foto");<br />
    //menampilkan foto<br />
    ?><br />
    <table><br />
    <tr><br />
    <?php<br />
    $i = 1;<br />
    while($row = mysql_fetch_array($result)){<br />
    ?><br />
    <td><br />
    <a href="upload/<?php echo $row['nama_file'];?>"><br />
    <img src="upload/<?php echo $row['nama_file'];?>" alt="" width="200" border="0"/><br />
    </a><br />
    <br/><?php echo $row['deskripsi'];?><br />
    </td><br />
    <?php<br />
    if($i % 3 == 0){<br />
    echo '</tr><tr>';<br />
    }<br />
    $i++;<br />
    }<br />
    ?><br />
    </tr><br />
    </table><br />
    </body><br />
    </html><br />

Yang perlu di perhatikan adalah di baris ke-22. Untuk menampilkan gambar digunakan tag <img/>. Nama nama gambar yang ditampilkan diambil dari database - echo $row['nama_file']. Karena gambar diupload ke folder "upload" maka attribute src diisi dengan nilai seperti ini "upload/<?php echo $row['nama_file'];?>".

Membuat Zoom

Sebuah galeri foto perlu sebuah fasilitas zoom. Untuk itu diperlukan jQuery dan Fancybox. Silahkan download Fancybox di websitenya (versi 1.3.4 saat tutorial ini dibuat). Setelah selesai, ekstrak file zip yang didownload dari website fancybox. Kemudian copy file jquery-1.4.3.min.js dan folder fancybox dari hasil ekstrakan dan paste di folder 'galeri' yang telah dibuat sebelumnya.
Selanjutnya buka kembali file gallery.php dan ubah menjadi seperti berikut.

<html><br />
    <head><br />
    <title>Gallery</title><br />
    <!--menambahkan jquery--><br />
    <script type="text/javascript" src="jquery-1.4.3.min.js"></script><br />
    <!--menambahkan fancybox--><br />
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script><br />
    <!--menambahkan css fancybox--><br />
    <link href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" rel="stylesheet"/><br />
    <script type="text/javascript"><br />
    $(document).ready(function(){<br />
    $(".fancy").fancybox();<br />
    });<br />
    </script><br />
    </head><br />
    <body><br />
    <?php<br />
    //koneksi ke database<br />
    $conn = mysql_connect('localhost', 'userdb', 'password');<br />
    mysql_select_db('galeri');<br />
    //membaca data dari database<br />
    $result = mysql_query("select * from foto");<br />
    //menampilkan foto<br />
    ?><br />
    <table><br />
    <tr><br />
    <?php<br />
    $i = 1;<br />
    while($row = mysql_fetch_array($result)){<br />
    ?><br />
    <td><br />
    <a href="upload/<?php echo $row['nama_file'];?>" class="fancy"><br />
    <img src="upload/<?php echo $row['nama_file'];?>" alt="" width="200" border="0"/><br />
    </a><br />
    <br/><?php echo $row['deskripsi'];?><br />
    </td><br />
    <?php<br />
    if($i % 3 == 0){<br />
    echo '</tr><tr>';<br />
    }<br />
    $i++;<br />
    }<br />
    ?><br />
    </tr><br />
    </table><br />
    </body><br />
    </html><br />

Delete / Hapus Gambar

Tidak tertutup kemungkinan ada kesalahan pada saat mengupload file. Untuk itu diperlukan fungsi untuk menghapus file. Pertama ubah skrip untuk menampilkan gambar (file gallery.php), tambahkan kode di bawah setelah baris ke-24.

Delete Kemudian buat satu file lagi dengan nama delete-gallery.php dan isi dengan skrip untuk delete gambar di bawah.

<?php<br />
    //file delete-gallery.php<br />
    //koneksi ke database<br />
    $conn = mysql_connect('localhost', 'userdb', 'password');<br />
    mysql_select_db('galeri');<br />
    if(isset($_GET['id'])){<br />
    $id = (int) $_GET['id'];<br />
    $sql = "select * from foto where id='$id'";<br />
    $result = mysql_query($sql);<br />
    if(mysql_num_rows($result) > 0 ){<br />
    $data = mysql_fetch_array($result);<br />
    //delete file<br />
    @unlink('upload/'.$data['nama_file']);<br />
    //delete data di database<br />
    mysql_query("delete from foto where id='$id'");<br />
    }<br />
    }<br />
    header("Location: gallery.php");<br />
<span class="Apple-tab-span" style="white-space: pre;">	</span>?><br />

Edit Gambar

Selain manghapus data juga diperlukan kemampuan untuk mengedit gambar. Pertama ubah skrip untuk menampilkan gambar (file gallery.php), ubah pada baris yang sama seperti cara membuat hapus gambar (tambahkan kode di bawah setelah baris ke-24.) seperti:

Edit Kemudian buat sebuah file dengan nama edit-gallery.php dan isi dengan skrip php di bawah untuk melakukan edit gambar.

<?php<br />
    //file edit-gallery.php<br />
    //koneksi ke database<br />
    $conn = mysql_connect('localhost', 'userdb', 'password');<br />
    mysql_select_db('galeri');<br />
    if($_POST){ //jika tombol update ditekan dan data terkirim ke server<br />
    //bentuk sql query untuk update<br />
    $update = "update foto set deskripsi='".$_POST['deskripsi']."' ";<br />
    if($_FILES['file']['size'] > 0 && $_FILES['file']['error'] == 0){ //update gambar hanya jika user memilih file baru<br />
    $move = move_uploaded_file($_FILES['file']['tmp_name'], "upload/".$_FILES['file']['name']);<br />
    if($move){<br />
    $update .= ", nama_file='".$_FILES['file']['name']."'";<br />
    }<br />
    }<br />
    $update .= " where id='".$_POST['id']."'";<br />
    mysql_query($update); //update data ke database<br />
    header("Location: gallery.php");<br />
    exit;<br />
    }<br />
    ?><br />
    <html><br />
    <head><br />
    <title>Edit Picture</title><br />
    </head><br />
    <body><br />
    <form name="form1" action="" method="post" enctype="multipart/form-data"><br />
    <?php<br />
    $sql = "select * from foto where id='".intval($_GET['id'])."'";<br />
    $data = mysql_fetch_array(mysql_query($sql));<br />
    ?><br />
    <!-- menampilkan gambar sebelumnya --><br />
    <img src="upload/<?php echo $data['nama_file'];?>" alt="" width="200"/><br/><br />
    File: <input type="file" name="file" id="file"/><br/><br />
    <!-- menampilkan deskripsi --><br />
    Deskripsi: <textarea name="deskripsi" id="deskripsi"><?php echo $data['deskripsi'];?></textarea><br/><br />
    <input type="submit" name="save" value="Update"/><br />
    <input type="hidden" name="id" value="<?php echo $data['id'];?>"/><br />
    </form><br />
    </body><br />
    </html><br />

Sekarang buka browser dan buka halaman http://localhost/galeri/form.html. Upload beberapa file dan lihat hasilnya.
Selamat Mencoba.

Sumber : myphptutorials.com

Baca selengkapnya »

Navigation

blue color

Label

Membuat Galeri Foto

Membuat Database Galeri Foto

Membuat Form dan Struktur Folder

Mengupload dan Menyimpan Gambar ke Database

Menampilkan Gambar

Membuat Zoom

Delete / Hapus Gambar

Edit Gambar

HTML Text Berkedip

Memasang gambar logo icon pada bar website

Arsip Blog

Popular Posts