Beranda php Membuat Galeri Foto dengan PHP
Senin, Desember 05, 2011
A+ A-

Membuat Galeri Foto dengan PHP

Sebelum membuat galeri foto, anda harus bisa mengupload file dengan php. Secara singkat galeri foto yang akan dibuat adalah sebagai berikut. Pertama pengguna memilih gambar yang akan diupload dan memasukkan deskripsi gambar. Kemudian dengan php, gambar akan diupload ke sebuah folder. Nama file dan deskripsi gambar akan disimpan ke database.

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
  1. CREATE TABLE `foto` (  
  2.  `id` int(11) NOT NULL AUTO_INCREMENT,  
  3.  `nama_file` varchar(255) NOT NULL,  
  4.  `deskripsi` varchar(255) ,  
  5.  PRIMARY KEY (`id`)  
  6. )

Membuat Form dan Struktur Folder

  1. <html>  
  2. <head>  
  3.     <title>New Picture</title>  
  4. </head>  
  5. <body>  
  6.     <form name="form1" action="save-gallery.php" method="post" enctype="multipart/form-data">  
  7.         File: <input type="file" name="file" id="file"/><br/>  
  8.         Deskripsi: <textarea name="deskripsi" id="deskripsi"></textarea><br/>  
  9.         <input type="submit" name="save" value="Upload"/>  
  10.     </form>  
  11. </body>  
  12. </html>
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.
  1. <?php  
  2. //koneksi ke database  
  3. $conn = mysql_connect('localhost', 'userdb', 'password');  
  4. mysql_select_db('galeri');  
  5. //upload file  
  6. if(!empty($_FILES) && $_FILES['file']['size'] > 0 && $_FILES['file']['error'] == 0){  
  7.     $fileName = $_FILES['file']['name'];  
  8.     $move = move_uploaded_file($_FILES['file']['tmp_name'], 'upload/'.$fileName);  
  9.     if($move){  
  10.         //simpan deskripsi dan nama file ke database  
  11.         $sql = "insert into foto (nama_file, deskripsi) values  
  12.                 ('$fileName', '".$_POST['deskripsi']."')";  
  13.         mysql_query($sql);  
  14.         header("Location: gallery.php");  
  15.         exit;  
  16.     }  
  17. } 
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.
  1. <html>  
  2. <head>  
  3.     <title>Gallery</title>  
  4. </head>  
  5. <body>  
  6.     <?php  
  7.     //koneksi ke database  
  8.     $conn = mysql_connect('localhost', 'userdb', 'password');  
  9.     mysql_select_db('galeri');  
  10.     //membaca data dari database  
  11.     $result = mysql_query("select * from foto");  
  12.     //menampilkan foto  
  13.     ?>  
  14.     <table>  
  15.         <tr>  
  16.         <?php  
  17.         $i = 1;  
  18.         while($row = mysql_fetch_array($result)){  
  19.         ?>  
  20.             <td>  
  21.                 <a href="upload/<?php echo $row['nama_file'];?>">  
  22.                 <img src="upload/<?php echo $row['nama_file'];?>" alt="" width="200" border="0"/>  
  23.                 </a>  
  24.                 <br/><?php echo $row['deskripsi'];?>  
  25.             </td>  
  26.         <?php  
  27.             if($i % 3 == 0){  
  28.                 echo '</tr><tr>';  
  29.             }  
  30.             $i++;  
  31.         }  
  32.         ?>  
  33.         </tr>  
  34.     </table>  
  35. </body>  
  36. </html>