84 Komentar

Galeri foto sederhana dengan PHP (dengan database MySQL)

Tutorial kali ini merupakan jawaban dari salah satu pertanyaan dari pengunjung di posting Upload form sederhana dengan PHP.

komentar evan

pertanyaan dari Evan

Disini kita akan mengembangkan fungsi upload sehingga informasi gambar yang di-unggah akan disimpan di database MySQL, pembuatan galeri foto merupakan contoh yang akan kita gunakan dalam penerapannya.

Untuk memudahkan pemahaman dan pembelajaran terhadap upload dan database saya mengesampingkan beberapa faktor keamanan seperti validasi dan pengecekan extensi dari file.

Yang pertama kali harus dibuat adalah database dari gambar, buka phpmyadmin (biasanya ada di http://localhost/phpmyadmin) lalu buat database dengan nama galeri dan tekan tombol Create.

create database galeri

Create database galeri

Dan database galeri pun tercipta namun masih belum memiliki tabel, masukan gambar pada kolom name dan 3 pada kolom number of fields, kita akan membuat tabel gambar dengan 3 field yang masing-masing field-nya akan menampung informasi yang berbeda. Jangan lupa tekan tombol Go jika sudah selesai.

Create table gambar

Buat tabel gambar

Pada halaman berikutnya kita harus mengisi definisi data dari ketiga field yang ingin kita buat, isi seperti gambar dibawah:

Jika sudah jangan lupa tekan save.

  • Field: nama field-nya
  • Type: tipe data yang akan kita simpan
  • Length/Values: panjang data, tidak semuanya harus diisi
  • Null: jika di-cek berarti field tersebut nantinya boleh kosong/tidak diisi
  • Index: peran dari field
  • AUTO_INCREMENT: nilai dari field akan otomatis  diisi dan nilainya selalu ditambah 1 dari record sebelumnya
struktur tabel gambar

Struktur tabel gambar

Bagian database beres, tabel gambar dengan struktur datanya telah tercipta, sekarang kita bisa fokus ke PHP.

Pada folder htdocs buat folder galeri dan didalamnya buat lagi folder gambar, lihat gambar.

Folder galeri

isi folder galeri

folder galeri

Susunan file dan folder

Lalu buat file config.php untuk menyimpan semua variabel penting

<?php
$server = 'localhost'; //server MySQL
$user = 'root'; //username MySQL
$password = ''; //Password MySQL
$db = 'galeri'; //nama database
$dir_gambar = 'C:\xampp\htdocs\galeri\gambar\\'; //direktori dalam server
$url_folder_gambar = 'http://localhost/galeri/gambar/';  //URL dari direktori jika diakses lewat browser
?>

Perhatikan variebel $dir_gambar pastikan folder tersebut sudah anda buat terlebih dahulu, jika tidak hal ini akan memicu error.

$dir_gambar = 'C:\xampp\htdocs\galeri\gambar\\'; //direktori dalam server

Selanjutnya buat file db.php yang manyimpan fungsi koneksi ke database MySQL

<?php
include_once('config.php'); //sertakan semua kode yang ada di config.php

if( !mysql_connect($server, $user, $password) ) {
	die(mysql_error());
} else {
	if( !mysql_select_db($db) ){
		die(mysql_error());
	}
}
?>

buat index.php sebagai landing page, halaman ini yang akan pertama kali diakses ketika direktori galeri diakses lewat web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Upload gambar</title>
</head>

<body>
<p>
<a href="index.php">depan</a> | <a href="galeri.php">galeri</a>
</p>
<form action="upload.php" enctype="multipart/form-data" method="post">
<table border="0">
<tr>
	<td>Judul</td>
    <td><input type="text" name="judul" />
    </td>
</tr>
<tr>
	<td>Gambar</td>
    <td><input type="file" name="userfile" size="40" /></td>
</tr>
<tr>
	<td><input type="submit" name="submit" value="Unggah" /></td>
    <td></td>
</tr>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> <!-- dalam byte {2000000b = 2Mb} -->
</form>
</body>
</html>

galeri.php untuk menampilkan daftar gambar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galeri</title>
</head>

<body>
<p>
<a href="index.php">depan</a> | <a href="galeri.php">galeri</a>
</p>
<?php
include('db.php');
if( !empty($_REQUEST['j']) ){
	$msg = '<div style="background:#F6F3C0;text-align:center;color:#999;">';
	$msg .= 'Gambar baru telah ditambahkan | <strong>' . $_REQUEST['j'];
	$msg .= '</strong></div>';
	echo $msg;
}
$query = "SELECT * FROM gambar";
$query = mysql_query( $query );
if(!$query){
	die( mysql_error() );
}
while( $rows = mysql_fetch_row($query) ){
	?>
	<p>
	<img src="<?php echo $url_folder_gambar . $rows[2];?>" width="100" />
	</p>
	<?php
	echo $rows[1];
	?>
	<hr />
<?php
}
?>
</body>
</html>

Dan yang terakhir adalah upload.php sebagai file php yang bertanggung jawab terhadap proses upload

<?php
if( isset($_REQUEST['submit']) ){

	include('db.php');

	$title = $_REQUEST['judul'] ? htmlspecialchars($_REQUEST['judul']) : 'blun ada judul'; //ternary operator

	$filename = basename($_FILES['userfile']['name']);
	$uploadfile = $dir_gambar . $filename;

	if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
		$query = "INSERT INTO gambar VALUES('', '$title', '$filename')";
		$query = mysql_query($query);
		if(!$query){
			die( mysql_error() );
		}
		header('Location: galeri.php?j=' . $title);
		exit();
	} else {
		echo "Kemungkinan hacking!\n";
	}
}else{
	echo "Anda kesasaar? kembali ke <a href='index.php'>jalan yang benar</a>";
}
?>

Pada kode tersebut saya menggunakan operator logika yang disebut ternary untuk mendapatkan nilai TRUE dan FALSE, coba perhatikan kode:

$title = $_REQUEST['judul'] ? htmlspecialchars($_REQUEST['judul']) : 'blun ada judul'; //ternary operator

Pola dari ternary adalah statement ? BLOK TRUE : BLOK FALSE; jika statement bernilai TRUE maka BLOK TRUE yang akan dieksekusi sebaliknya jika FALSE maka BLOK FALSE yang akan dieksekusi. Jika memungkinkan saya selalu menggunakan ternary, karena kodenya lebih pendek x ? y : z😉

galeri sederhana dengan php

Galeri sederhana dengan PHP

Selamat mencoba.


Update:
– 11 july 2013; perjelas bagian config.php yang memiliki kemungkinan memicu error.
– 11 july 2013; perbarui file di box.net (download source code)

84 comments on “Galeri foto sederhana dengan PHP (dengan database MySQL)

  1. php agak ribet..saya belom sabar belajar php hehehee..blog wallking gan…lam kenal..

  2. Hehe. Ya begitulah PHP, tapi dari semua bahasa pemrograman PHP relatif paling mudah dipelajari🙂

  3. pingin bisa nulis panjang lebar seperti ini, tapi kok kayaknya sulit yah …?

  4. ninggalin jejak dulu karena mungkin berguna😀

  5. kok setelah upload selesai image/gambarnya nggak muncul? yg muncul cuma tulisannya…?
    mohon bantuannya…😀

  6. makasihh banyak🙂

  7. gan….kalo uda di upload kserver….

    $dir_gambar = ‘C:\xampp\htdocs\galeri\gambar\\’; //direktori dalam server
    $url_folder_gambar = ‘http://localhost/galeri/gambar/’; //URL dari direktori jika diakses lewat browser

    scripnya hrs gmn gan??
    uda ak otak otaik di Cpanel…gambar gak menuju ke direktorinya gan…

    mohon petunjuk

  8. Out of range value adjusted for column ‘id’ at row 1

    ini katanya mas….

  9. tutorial yang menarik dengan gaya bahasa yang cukup dimengerti oleh pemula , thanks sudah share ilmu.

  10. saya udh coba phpnya tapi tampilannya koq jadi 1 baris 1 gambar yach??? Gemana caranya biar gambarnya misalnya bisa 1 baris 3 gambar????thank you…

  11. Saya udah coba buat sesuai yg diatas tapi hasil tampak di galeri hanya 1 baris 1 foto.. Tolong dong gimana caranya phpnya buat galeri misalkan 1 baris ada 5-6 foto… Thank You… ^^

    • kuncinya ada di modifikasi file galeri.php line 25

      eksperimen ke-1: coba hilangkan <p> dan </p>, lihat hasilnya.
      eksperimen ke-2: tambahkan kondisional if() yang bertugas mengecek setiap kelipatan 5 (atau jumlah foto yg diinginkan), jika TRUE maka tambahkan <br>

      Selamat bereksperimen😉

  12. manfaat bangeeeettttt…..

  13. waahh Nice info…🙂
    Makasih ya informasi’y

    jangan lupa mampir kesini ya..
    http://quantamultimedia.com/

    terimakasih ^_^

  14. phpmyadmin *databasenya misal :identitas (Fieldnya: nama, alamat, foto)

    foto terize 4×6 cm
    bagaimana buat sciptnya UPLOAD/SIMPAN sehingga keluar foto4x6 beserta nama dan alamatnya kak
    sebelumnya matur nuhun kak

    • Prosesnya sama seperti contoh di atas. tinggal diganti aja nama tabel dan output echo-nya. untuk ukuran gambar sementara bisa diakalin dengan <img width="15px" height="20" /> tinggal disesuaikan
      Ayo exsperimen aja, jangan mudah menyerah😉

  15. Kalau mau tambahkan delete gambar lagi bagimana?

  16. bro? punyaku error

    Warning: move_uploaded_file(C:\xampp\htdocs\galeri\gambar\android-ice-cream-sandwich-wallpaper-for-480×640-mobile-46-37.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in C:\Program Files\xampp\htdocs\galeri\upload.php on line 11

    Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘C:\Program Files\xampp\tmp\php5DD0.tmp’ to ‘C:\xampp\htdocs\galeri\gambar\android-ice-cream-sandwich-wallpaper-for-480×640-mobile-46-37.jpg’ in C:\Program Files\xampp\htdocs\galeri\upload.php on line 11
    Kemungkinan hacking!

  17. mantab banged, akhirnyaa ketemu yg gini

  18. Terima Kasih banyak ya sedikit2 saya sudah agak paham tapi kalau buat login sekalian upload photo gimana ya caranya. sekali lagi terima kasih ya semoga amal ibadah dibalas oleh yang maha kuasa. Amiiinnn

  19. makasih gan. ane mau pelajrin dah. pusing”. wkkwkw

  20. kalauuu uploaddd videoo gan tauu gak gannn ????

    • Sama saja, cuman kalau video beda tag htmlnya aja, dan ada 2 cara menggunakan tag object untuk video flash, quicktime, dll. Cara yang satu lagi dengan native tag video pada browser yang mendukung video secara native. Native embedded ini berbeda karena browser langsung mendukung video langsung tanpa harus menginstal plugin terlebih dahulu.
      Cek disini untuk contoh kode-nya

      Semoga bermanfaat.

  21. gan ..kalo upload videos bisa ga…dan di tampilkan..?

  22. bisa minta contohnya dong gan, kirim ke email ane : heru_brad@yahoo.com
    untuk upload video n di klik bisa play…
    thx..

  23. agan..pada saat ane upload gambat tampil “kemungkinan hacking”..
    knp ya gan…mohon bantuannya…!

  24. adminnya masi ad gk yah ?
    cara edit tampilannya galery’a gmn kang? info dunk…

  25. gan contoh diatas nyimpen gambar di MySQL dalam bentuk “contoh_gambar.jpg”
    kalo mw saya ubah biar data yang di save di MySQL dalam bentuk “images/contoh_gambar.jpg” gmn ya gan ? makasih !

  26. siang gan, minta tolong contohkan bagaimana membuat login dengan cara pilih level dulu, dan paswordnya sudah kita default untuk masing level usernya, dan contoh untuk pembuatan tabel pada sql nya. trimakasih banyak atas bantuannya.

  27. gan mau tanya.. kalau erornya kayak gini gmna ??
    Notice: Use of undefined constant SES_USER – assumed ‘SES_USER’ in C:\xampp\htdocs\Pakar_edamame\pakar\inc.session.php on line 3

    Deprecated: Function session_is_registered() is deprecated in C:\xampp\htdocs\Pakar_edamame\pakar\inc.session.php on line 3

    ini programnya..
    <?php
    session_start();
    if(! (session_is_registered(SES_USER))) { // ini yang eror

    echo " PERHATIAN! “;
    echo “Akses ditolak, Pakar belum login”;
    include “Login.php”;
    exit;
    }
    ?>

  28. Kasus saya gini mas bro gimna ya ngatasinnya?

    Warning: move_uploaded_file(C:\xampp\htdocs\galeri\gambar\errorhandling.png) [function.move-uploaded-file]: failed to open stream: No such file or directory in C:\xampp\htdocs\log\function\uploadgambar.php on line 11

    Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘C:\xampp\tmp\php6E.tmp’ to ‘C:\xampp\htdocs\galeri\gambar\errorhandling.png’ in C:\xampp\htdocs\log\function\uploadgambar.php on line 11
    Kemungkinan hacking!

  29. Mohon cepat di balas mas bro, lagi pkl dikasih tugas (curhat) jd buru2 hehe

  30. variabel $dir_gambar sudah disesuaikan dengan nama folder tapi tetep engga ada perubahan mas bro?

  31. yang kemaren udah bisa mas bro maksih, sekarang mau nampilin lebih dari satu gambar gimana ya? udah coba di unggah buat nampilin gambar yg ke2 tapi di database & galerinya ga muncul?

  32. gambar yang ke2nya udah masuk ke databasenya mas, tinggal sekarang cara nampilin gambar yg ke2 di galerinya gmna ya? dtunggu balasannya

  33. Ini script galeri.php mas diambahin apa ya

    Galeri

    depan | galeri

    <?php
    include('configgambar.php');
    if( !empty($_REQUEST['j']) ){
    $msg = '’;
    $msg .= ‘Gambar baru telah ditambahkan | ‘ . $_REQUEST[‘j’];
    $msg .= ‘
    ‘;
    echo $msg;
    }
    $query = “SELECT * FROM gambar”;
    $query = mysql_query( $query );
    if(!$query){
    die( mysql_error() );
    }
    while( $rows = mysql_fetch_row($query) ){
    ?>

    <img src="” width=”400″ />

  34. untuk download sourcenya harus sign up wikipedia?

  35. Sukses mas terima kasih byk atas waktunya,

  36. gan aq ambil sintak buat nampilinnnya kok g’ bisa ya??//

  37. gambar yang diupload tidak tampil, mau tampil di galeri tapi ada di htdocs\gambar

  38. udah di download tapi gak mau juga

    ni koding yang saya sudah edit buat tampilkan album saja tapi gambar yang mau ditampilkan rusak gitu

    Tk Umum Widya Pertiwi
    Album Tk Umum Widya Pertiwi

    <?php
    if( !empty($_REQUEST['j']) ){
    $msg = '’;
    $msg .= ‘Gambar baru telah ditambahkan | ‘ . $_REQUEST[‘j’];
    $msg .= ‘
    ‘;
    echo $msg;

    }
    $query = “SELECT * FROM gambar”;
    $query = mysql_query( $query );
    if(!$query){
    die( mysql_error() );
    }
    while( $rows = mysql_fetch_row($query) ){
    ?>
    <img src="” width=”100″ align=”bottom” />

     

  39. while nya belum ditutup kurung kurawal tutup – }
    src tidak boleh kosong, itu diisi dengan alamat gambarnya – <img src=""

  40. cara delete nya bagaimana?

  41. Mas…Kalau Pengambilan gambarnya melalui Webcame terus simpan didatabase, Bagaimana ?

    • Bisa pakai flash atau java untuk mengendalikan kamera dan mengambil gambar, setelah itu gambar akan disimpan sementara di client, baru di-upload ke server. Setelah itu bisa disimpan didatabase sebagai BLOB atau sebagai file.

  42. Lalu, Bagaimana cara menyimpannya secara Sementara, lalu baru di-Upload. Kasih Contoh Script lengkapnya mas. Kalau untuk kameranya sudah ada, tinggal penyimpanannya ke Database yang sulit

  43. kak tolong kasih script untuk hapus sekalian dong. aku nyoba bolak-balik belum bisa

  44. Mantap gan… saya punya tutorial serupa mungkin buat yang lain bisa berguna
    Simpan Gambar ke Dalam Database Mysql (Xampp) Dengan Dreamweaver CS6

  45. itu semua codingnya di simpan dalam bentuk .PHP dan di simpan ke folder galeri semua atau gimana gan?
    mohon pencerahannya

  46. thanks gan…
    tapi ane mau tnya ne, kenapa waktu bagian yg ini
    ?>

    <img src="” width=”300″ />

    <?php
    rows[2] ane ganti ke [1] gambar malah g muncul y gan? it fungsinya rows buat apa yak..??

  47. Terimakasih mas ilmunya. lam kenal

  48. gan mau tanya boleh , kalau pas aku hostingin $dir_gambar urlnya gimana ya??

  49. makasih nompang download dulu gan…

  50. Horee saya bisa gan…!! simpel, mudah, dan bermanfaat untuk saya. Trimakasih gan. Lumayan untuk tugas kampus.

  51. makasih banyak gan udah bagi2 ilmunya…

Menurut anda bacaan ini bermanfaat? Ada tambahan? Atau mungkin mencari jawaban lain? Tulis disini Ok (:

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: