Teknik Upload Gambar Dan Menampilkannya

Belum lama ini ada teman yang bertanya bagaimana memasukan ( upload ) gambar dan memanggilnya kembali pada pemrograman PHP. Selama ini dia menyimpan gambar pada database MySQL yang tipe data Blob. Maklum dahulu dia melakukan hal yang sama di pemrograman Delphi.

Kini saya mencoba untuk menjelaskan semampu saya bagaimana teknik upload gambar dengan PHP dan memanggilnya kembali. Sebelumnya saya pernah membahas mengenai proses upload file dengan PHP. Sebenarnya hampir sama, Cuma sekarang yang kita upload adalah file gambar dan kita mesti panggil kembali gambar tersebut.

Oke langsung saja ya, sebelumnya kita buat dahulu databasenya.

CREATE TABLE `buat_blog`.`dtImage` (
`id_image` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nama_image` VARCHAR( 30 ) NOT NULL 
) ENGINE = InnoDB

Lalu sekarang kita buat folder baru di htdocs untuk folder latihan ini dengan nama teknik_upload_image. Lalu pada folder teknik_upload_image, buat lagi folder dengan nama image. Folder image digunakan untuk tempat menyimpan file gambar yang telah kita upload.

Bila sudah buat 4 file yaitu index.php, proses_upload.php, view_image.php, fungsi_koneksi.php

Sekarang kita buat form untuk mengupload gambar pada file index.php. Berikut adalah sourcecodenya :

<html>
<head>
<title>Teknik Upload Gambar</title>
</head>
<form enctype="multipart/form-data" method="post" action="proses_upload.php">
<table align="center" border="0">
 <tr>
  <td colspan="2" align="center">Teknik Upload Gambar</td>
 </tr>
 <tr>
  <td>Silahkan Tekan Tombol Browse Untuk mencari file yang ingin diupload</td>
 </tr>
 <tr>
  <td colspan="2" align="center"><input type="file" name="adiputra"></td>
  <td></td>
 </tr>
 <tr>
  <td><input type="submit" name="tombol" value="Upload !"></td>
  </tr>
</table>
<body>
</body>
</html>

Penjelasan code dari file index.php dapat dilihat pada artikel saya sebelumnya mengenai upload file dihalaman ini.

Bila sudah sekarang kita buat code untuk koneksi ke database pada file fungsi_koneksi.php. Sengaja dibuat fungsi file terpisah agar praktis tinggal panggil nantinya. Berikut listing kodenya :

<?php
  function koneksi_db(){
	$host = "localhost";
	$user = "root";
	$pass = "adi";
	$db   = "buat_blog";
	
	$link = mysql_connect($host,$user,$pass);
	
	mysql_select_db($db,$link);
	
	if (!$link) {
	  echo "error : ".mysql_error();
	}
	
	return $link;
  }
?>

Code diatas hanya melakukan koneksi ke database, lalu hasilnya akan dikeluarkan apakah berhasil atau tidak dilihat dari variable $link.

Lalu sekarang kita buat proses uploadnya pada file proses_upload.php.

<?php
  // code A
  include("fungsi_koneksi.php");
  // end of code A
  
  // code B
  $lokasi_file = $_FILES['adiputra']['tmp_name'];
  $tipe_file   = $_FILES['adiputra']['type'];
  $nama_file   = $_FILES['adiputra']['name'];
  $direktori   = "image/$nama_file";
  // end of code B
  
  if (!empty($lokasi_file)) {
	move_uploaded_file($lokasi_file,$direktori); 
  
    // code C
    $koneksi = koneksi_db();
    $sql = "insert into dtimage values (null,'$nama_file')";
    $aksi = mysql_query($sql,$koneksi);
    // end of code C
	
	// code D
	if (!$aksi) {
	echo "maaf gagal memasukan gambar";
  	}else{
		echo "gambar berhasil di upload<br>";
		echo "untuk melihatnya silakan klik <a href='view_image.php'>Link ini</a>";
  	}
	// end of code D
	
  }else{
	echo "terjadi kesalahan";  
  }
  
  
  
?>

Penjelasan Code pada file proses_upload.php :

  • Code A : code untuk mengikutsertakan file fungsi_koneksi.php ke dalam file proses_upload.php dimana pada file proses_upload.php kita melakukan proses koneksi ke database.
  • Code B : Proses Setting Operasi Upload, keterangan lebih jelas bisa dilihat pada artikel ini.
  • Code C : Proses koneksi ke database.
  • Code D : hanya proses validasi apabila koneksi ke database terjadi kegagalan.

Bila sudah, sekarang kita buat untuk view gambar yang telah kita upload. Buka file view_image.php, lalu copy paste code dibawah ini.

<?php
  
  include("fungsi_koneksi.php");
  
  
  $koneksi = koneksi_db();
  $sql  = "select * from dtimage";
  $aksi = mysql_query($sql,$koneksi);
  
  echo "<table align='center' border='1'>
        <tr>
      	 <td>No</td>
      	 <td>Gambar</td>
     	</tr>";
		
  $no = 1;
  while($data = mysql_fetch_array($aksi)):?>
	 <tr>
      <td>
       <?php echo $no; ?>
      </td>
      <td>
       <center>
         <img src="image/<?php echo $data['nama_image']; ?>" border="0"/> 
       </center>
      </td>
     </tr>
  <?php 
  $no++;
  endwhile;
  ?>
  </table>
  <br /><center><a href="index.php">Upload lagi</a></center>

Yang paling penting dari code view_image.php adalah proses menampilkan gambar. Gambar ditampilkan dengan perintah 

<img src="image/<?php echo $data['nama_image']; ?>" border="0"/>

lalu memanggil nama file pada nama file yang telah kita masukan ke database pada proses file proses_upload.php.

<?php echo $data['nama_image']; ?>

sampai sini, semoga dimengerti. Sangat sederhana bukan, pada artikel berikutnya saya akan membahas validasi file yang akan diupload insyAllah.

semua file dapat di download di SINI

Moga bermanfaat yang bingung cara menampilkan gambar dari gambar yang kita upload dengan bahasa PHP.

Penulis: Martin Adiputra

Software Engineer

128 tanggapan untuk “Teknik Upload Gambar Dan Menampilkannya”

  1. Ping-balik: Teknik Validasi Image Upload « Mari Terus Belajar Dan Berbagi

  5. met ciank..
    mas sdah bsa buat aplikasi data karyawan yang dulu aku pernah krim di email????
    truz cara tampilin rating tangan pada postingan sama orang komentar gimana???
    trimz

  6. @ bayu :
    pagee..:)

    duh,,maaf bgt..baru liat..
    emailku penuh dari milis…

    oh,,itu bawaan mas bayu,,,
    coba ke halaman rating di admin WP-nya..

  7. gan mau nanya .,.,. caranya untuk nampilin source program ini gimana? biasanya ane pake gambar … ternyata ada cara yang lebih bagus ,,, pake apa sech gan? thx

  10. mas kalo yang di upload file flash (.swf) itu gimana caranya mas? apakah sama seperti kita mengupload gambar?

    cara menampilkannya gimana mas?

  11. @ kaem :
    oy,,iya ya..sumpah blum pernah mas,,
    nti ta coba ulik…

    tapi klu gak salah tinggal panggil element HTML untuk menampilkan file flash,,

    ta gk tau keteng,,nti ta coba ya….

  14. Wah tutorialnya keren banget euy. Belum coba sih tapi keren bener. Udah nyari2 eh akhirnya ketemu disini. TQ BGT deh.

  16. Ping-balik: Alamat Penting « Hendro Gunarto

  18. makasih banyak ya mas, jurus sederhana tapi mematikan karena dilengkapi dengan penjelasan yang begitu gamblang …

  20. @esdoger :
    kalu defaultnya MyISAM ya…

    apa ngaruh ke skrip ?

    Tergantung kasus aplikasi kita mas,,

    Mas bisa baca InnoDB Versus MyISAM pada beberapa artikel ini :

    moga bisa jadi tambahan ilmu 🙂

  21. Mas salam kenal mau tanya ney, klo mau tampilkan foto kita dari member area langsung ke testimoni gimna caranya, jadi ketika kita input testimoni dari member area langsung ada fotonya yg diambil dari foto profile di member area juga..tolong dikirimin caranya ya ke email saya..thanks

  22. @zulfan :
    sepertinya mudah kok mas..
    di table testimoni ada id_member jg kan..
    ya tinggal dipanggil aja foto member dimana id_member di table member sama dgn id_member di table testimoni..:)

  25. mas… saya kan da tugas tuh, disuruh buat web yang bisa nampilin edit sama hapus, tabel dbnya udah saya isi 5 field, nah pengennya saya tambah 1 field lagi untuk upload,
    ini form inputannya
    <?php

    //proses input
    if (isset($_POST['Input'])) {
    $date = date("Y-m-d H:i:s");
    $judul_film = addslashes (strip_tags ($_POST['judul']));
    $kategori = addslashes (strip_tags ($_POST['kategori'']));
    $tanggal= addslashes (strip_tags ($_POST['tanggal']));
    $deskripsi = addslashes (strip_tags ($_POST['deskripsi']));
    tmbah 1 lagi upload
    //

    //insert ke tabel
    $query = "INSERT INTO tabel
    VALUES('','$kategori','$judul','$date','$tanggal','$deskripsi','untuk upload'
    )";
    $sql = mysql_query ($query);
    if ($sql) {
    echo "data masuk”;
    } else {
    echo “data gagal masuk”;
    }
    }

    ?>

    forminput

    Masukkan Data

    Renananya disini ditambah upload

    Judul:

    Jenis:

    Tanggal:

    Deskripsi :

       

    bisa bantu gak…. udah 3 hari nambah upload gagal terus ni mas

  26. mas… saya kan da tugas tuh, disuruh buat web yang bisa nampilin edit sama hapus, tabel dbnya udah saya isi 5 field, nah pengennya saya tambah 1 field lagi untuk upload,
    ini form inputannya
    <?php

    //proses input
    if (isset($_POST['Input'])) {
    $date = date("Y-m-d H:i:s");
    $judul = addslashes (strip_tags ($_POST['judul']));
    $kategori = addslashes (strip_tags ($_POST['kategori'']));
    $tanggal= addslashes (strip_tags ($_POST['tanggal']));
    $deskripsi = addslashes (strip_tags ($_POST['deskripsi']));
    tmbah 1 lagi upload
    //

    //insert ke tabel
    $query = "INSERT INTO tabel
    VALUES('','$kategori','$judul','$date','$tanggal','$deskripsi','untuk upload'
    )";
    $sql = mysql_query ($query);
    if ($sql) {
    echo "data masuk”;
    } else {
    echo “data gagal masuk”;
    }
    }

    ?>

    forminput

    Masukkan Data

    Renananya disini ditambah upload

    Judul:

    Jenis:

    Tanggal:

    Deskripsi :

       

    bisa bantu gak…. udah 3 hari nambah upload gagal terus ni mas

  29. kurang lengkap, mas. itu $tipe_file nya kok sama sekali gak digunakan? kok gak sekalian mengecek jenis filenya. hehehe sekedar saran.

  31. saya masih sangat awam dengan DW. tolong bantuannya, bagaimana cara menampilkan gambar seperti bahasan di atas dengan berbagai keterangannya seperti nama, alamat, jabatan. karna saya akan membuat halaman profile

  32. @ratna : coba ikuti langkah diatas satu per satu…kalu dlm tutorial ini sy menyimpan nama dari gambar saja, jika ingin menampilkannya sy hanya panggil nama alamat dari file gambar berada lalu memanggil nama gambar yang telah tersimpan pada database. jika ratna ingin menampilkan nama, alamat, jabatan, dll silahkan panggil seperti pemanggilan data di database saja…:)

  33. masa saya kan sudah ikuti langkah mas tapi kok selalu ada pesan “terjadi kesalahan ” kira2 di bagian mana y yg salah ya?

  35. klo punya mas jalan normal pas saya buat lgi untuk memahamin fungsi script y eh mlah muncul pesan terjadi kesalahan mulu

  37. pas saya cek ternyata di file function_koneksi ada script fungction koneksi_db(); jadi saya kurang nambahi fungsi koneksi db ya ajja mas@
    oh iya klo cara buat pendaftaran yang make upload foto dan menampilkan foto pada saat kita dh login kira2 tw script ya g mas?

  43. <? session_start();
    //jika belum login
    if(!isset($_SESSION['username']))
    {
    echo"alert(‘login dulu bos’);window.history.go(-1);”;
    }else
    // dh login
    echo”welcome “;
    $query=mysql_fetch_array(mysql_query(“select * from admin1 where id=’$id'”));
    $photo=$query[‘foto’];
    echo””;
    echo $_SESSION[‘username’];
    echo””;
    echo”keluar“;
    ?>
    <img src="image/” width=”100″ height=”100″ style=”border:none”/>

    CREATE TABLE `admin1` (
    `id` int(22) NOT NULL auto_increment,
    `username` varchar(44) NOT NULL,
    `password` varchar(55) NOT NULL,
    `foto` text NOT NULL,
    PRIMARY KEY (`id`)
    ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

    —
    — Dumping data for table `admin1`
    —

    INSERT INTO `admin1` VALUES (7, ‘agung’, ’49ae49a23f67c759bf4fc791ba842aa2′, ‘DSC-0000043.jpg’);

    (kira2 slah ya dimana ya mas sehingga foto member g muncul tolong di revisi ya mas)

  44. <? session_start();
    //jika belum login
    if(!isset($_SESSION['username']))
    {
    echo"alert(‘login dulu bos’);window.history.go(-1);”;
    }else
    // dh login
    echo”welcome “;
    $query=mysql_fetch_array(mysql_query(“select * from admin1 where id=’$id'”));
    $photo=$query[‘foto’];
    echo””;
    echo $_SESSION[‘username’];
    echo””;
    echo”keluar“;

    ?>
    <img src="image/” width=”100″ height=”100″ style=”border:none”/>

  47. dh mah berhasil ? tpi kok urutan foto ya kebawah ya mas ? klo di buat berjejer kesamping seperti di fb kira2 penambahan ya seperti apa y mas

  52. mas sya minta tutorial pendaftar member pke foto n menpilkan foto member juga pliiis buat skripsi mas
    mksh ….

  62. ane newbie nih dari php..
    program upload gambar udah berhasil jalan.. ane mu tanya kok ketika ganti nama database dll seperti pada fungsi_koneksi.php malah program ga jalan dan muncul “terjadi kesalahan” itu kenapa ya…???

    dan yang script adiputra pada :
    [‘adiputra’][‘tmp_name’];
    [‘adiputra’][‘type’];
    [‘adiputra’][‘name’];
    itu kira-kira penting ga ya?? hehe.. soalnya pernah didelete dan ga pake .. dan program ga jalan… mohon bantuannya trims…

  65. Bang,, tau kodingan searching buat gambar yang udah di upload ga??
    Jadi ane pake program yang diatas cuma ane mu tampilinnya pake tehnik searching jadi cuma gambar yang dicari yang muncul..

    kira-kira gimana tuh.. mohon bantuannya.. Trims… 🙂

  72. @mazbro : sederhana aja mas, ada 3 table, table artikel, table komentar, table pembaca. di table komentar terselip id_artikel dan id_pembaca, lalu tinggal query join ke table pembaca kalau ingin mengambil foto pembaca

    @Dewe : mana variable $dir ?? perasaan di kode gak ada yah..

  74. alur nya sama, seperti upload gambar tutorial ini, hanya saja sebelum di upload update gambar,
    1. ambil nama file gambar lama di DB,
    2. hapus nama file di folder gambar dengan perintah unlink()
    3. kalu berhasil, update aja DB dengan nama gambar baru,
    4. lakukan upload untuk gambar baru

    moga alurnya dapet..

  76. mas, cara buat quest book seperti disini gimana ya. cara buat kotak2nya boleh tau gk?. thaks sebelumya.

  78. semuanya udah bener, waktu diupload imagenya udah masuk tapi masih ada keslahan, mohon pencerahannya master 😀

    note : database, dan scriptnya saya rubah sesuai dengan database saya..
    thnx before, nice post

  79. <?php
    // code A
    include("fungsi_koneksi.php");
    // end of code A

    // code B
    $lokasi_file = $_FILES['adiputra']['tmp_name'];
    $tipe_file = $_FILES['adiputra']['type'];
    $nama_file = $_FILES['adiputra']['name'];
    $direktori = "image/$nama_file";
    // end of code B

    if (!empty($lokasi_file)) {
    move_uploaded_file($lokasi_file,$direktori);

    // code C
    $koneksi = koneksi_db();
    $sql = "insert into dtimage values (null,'$nama_file')";
    $aksi = mysql_query($sql,$koneksi);
    // end of code C

    saya rasa kesalahannya disekitar script ini…
    mohon penjelasannya… 😀

  88. mas , tau ngga caranya kalo pake framework symfony 1.4 ?
    kalo tau ajarin dong mas butuh banget ini . 🙂

  90. Warning: move_uploaded_file(image/testing.png) [function.move-uploaded-file]: failed to open stream: No such file or directory in C:\AppServ\www\tugas\proses_upload.php on line 14

    Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘C:\Windows\Temp\php20A7.tmp’ to ‘image/testing.png’ in C:\AppServ\www\tugas\proses_upload.php on line 14
    maaf gagal memasukan gambar

    itu karena apa??

  94. bagaiman jika saya ingin menampilkan foto tersebut dgn icon..
    contoh kasus, jika file berextensi .pdf = maka tampil iconpdf.png ..
    mohon pencerahannya .

  96. Kenapa saya nggak berhasil ya? Ada error seperti ini :

    “; echo “untuk melihatnya silakan klik Link ini”; } // end of code D }else{ echo “terjadi kesalahan”; } ?>

  98. waduh yg di proses-update.php kog eror… maksud dari ini apa kak ??? adiputra itu nama apa yaa help…..thanks

    $lokasi_file = $_FILES[‘adiputra’][‘tmp_name’];
    $tipe_file = $_FILES[‘adiputra’][‘type’];
    $nama_file = $_FILES[‘adiputra’][‘name’];
    $direktori = “gbr/$nama_file”;

  100. mas kalo mau nge replace foto yang udah diupload gimana mas? mau change foto gitu mas… soalnya saya bikin crud yang ada fotonya. mkasih ya mas,, seblumnya saya kirim email juga mas,

  103. bang tolong dibantu
    saya ingin buat web
    dengan cara kerja web tsb : user upload gambar—>lalu secara otomatis gambar yang di upload muncul di halaman utama

    itu gimana inti script upload nya?

    sebagai contoh kaya 9gag.com

    terima kasih

  104. @erwin: sepertinya ada 2 handle halaman. Halaman upload gambar sama seperti artikel diatas. Dan halaman depan dimana halaman ini menghandle gambar apa saja yang baru dimasukan oleh user. Biasanya teknik ini menggunakan ajax comet dimana konsep sederhananya adalah tiap x second, ada proses request ke server secara terus menerus sampai mendapatkan gambar terbaru. Contohnya bisa lihat di link ini : http://webscepter.com/simple-comet-implementation-using-php-and-jquery/

  105. mas gambar yang ditampilin ngga keluar .. pas “save image as ..” juga “error .. no file” diliat di direktori tujuan juga kosong .. ngmg2 sy pake ubuntu..
    pas dicoba di windows juga sama, gambarnya ga muncul di view, tapi di direktori tujuannya udah ke simpen..
    mohon bantuannya mas

  106. mas gambar yang ditampilin ngga keluar .. pas “save image as ..” juga “error .. no file” diliat di direktori tujuan juga kosong .. ngmg2 sy pake ubuntu..
    pas dicoba di windows juga sama, gambarnya ga muncul di view, tapi di direktori tujuannya udah ke simpen..
    mohon bantuannya mas
    makasih

  107. @febyana : kemungkinan kalau mas pakai ubuntu, permission directory-nya belum bisa writeable sehingga gambar tidak akan bisa dibuat ke folder tujuan. Kalau diwindows, gambar directory tujuan sudah masuk tapi gambarnya gak muncul mungkin mas salah panggil alamat / path yang benar. coba cek lagi url target-nya.

  109. mas mau tanya untuk file gambar itu di taruh dimana ya? masalahanya saya sudah ngikuti sampai proses apload tapi kok gagal ya.. gak bisa upload tapi malah muncul validasi terjadi kesalahan..gmana ya mas? mohon bantuanya

  111. mas mau tanya, kalo mau edit file yang kita upload gmn ya?
    kasusnya,
    saya mengganti ‘insert’ menjadi ‘update’ di querynya. gambarnya sih ter-update di folder, tapi tidak terganti di phpmyadmin saya.
    ada pesan error “Undefined index : nama_file D:Localhost/bla bla bla bla bla bla on line 7 ”
    kira2 itu gmn ya mas?
    Mohon pencerahannya 😥

  117. gan kenapa punya saya terjadi kesalahan pada
    proses_upload.php on line 7
    proses_upload.php on line 8
    proses_upload.php on line 9

    gimana cara ngatasinya

  118. gan kenapa punya saya terjadi kesalahan pada line
    proses_upload.php on line 7
    proses_upload.php on line 8
    proses_upload.php on line 9
    gimana cara ngatasinya

  120. Ping-balik: Validasi Tipe Gambar Saat Upload Dengan PHP | Adiputra

  122. assalamu’alaikum ,mas tolong bantuannya, ini scriptnya udah bener nyimpen gambar di folder images admin dan berhasil, tapi niat saya gambarnya bisa ditampilin di luar folder admin untuk halaman user. karena beda folder jadi pasti gak nampil kan,, udah tak coba ganti pake BASE URL di bagian $nama_folder tapi tetep eror. script yg bener gmna toh?

    #tangkap gambar
    $namafolder= “images/”; //folder tempat menyimpan file
    if (!empty($_FILES[“gbr_berita”][“tmp_name”]))
    {
    $jenis_gambar=$_FILES[‘gbr_berita’][‘type’];
    if($jenis_gambar==”image/jpeg” || $jenis_gambar==”image/jpg” || $jenis_gambar==”image/gif” || $jenis_gambar==”image/png”)
    {
    $gambar = $namafolder . basename($_FILES[‘gbr_berita’][‘name’]);
    if (move_uploaded_file($_FILES[‘gbr_berita’][‘tmp_name’], $gambar)) {
    mysql_query(“insert into materi values (”,’$id_makul’,’$judul_berita’,’$isi_berita’,’$tgl_berita’,’$gambar’)”,$koneksi);
    ?>

    alert(‘Berhasil menambahkan’);
    document.location=”lihat_materi.php”;

    alert(‘Gagal menambahkan’);
    ;self.history.back();

    alert(‘Gambar harus berformat .jpg .png .gif’);
    document.location = input_materi.php;

    <?php
    }

Silahkan Komentar...

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.