Upload, Tampil dan Delete Gambar di PHP

ROOT93 - Teknik yang digunakan dalam upload di PHP mungkin bisa berbeda – beda, namun pada dasarnya proses yaitu sama, file yang di upload oleh user di validasi terlebih dahulu sebelum disimpan, kemudian bila sudah sesuai dengan ketentuan yang kita inginkan maka file gambar ataupun foto ditampilkan, umumnya validasi yang dilakukan bisa meliputi pemeriksaaan format gambar, ukuran gambar bahkan juga memeriksa rasio gambar berdasarkanukuran pixelnya (px).
Kali ini Saya ingin sedikit memberikan contoh yang sangat sederhana bagaimana teknik upload, menampilkan dan delete gambar menggunakan PHP. Teknik upload gambar yang saya lakukan disini meliputi ketentuan / validasi seperti berikut
  1. Bila ukuran Gambar lebih besar dari 1MB atau 1000000 bytes [baca : ] maka gambar tidak akan bisa di upload
  2. Bila format file yang dikirim bukan gambar JPG, JPEG, GIF atau PNG maka file juga tidak akan disimpan
  3. File yang berhasil melewati proses validasi diatas, maka file gambarnya akan di rename terlebih dahulu kemudian di simpan di folder gambar website yang sudah di buat sebelumnya
  4. Selanjutnya file gambar/foto yang sudah di rename akan disimpan didalam database dalam bentuk nama gambarnya saja, bukan file secara langsung, karena filenya sudah disimpan di folder gambar website
  5. Ketika file gambar/foto akan ditampilkan maka nanti user bisa melakukan query seperti biasa, hanya pada saat menampilkan gambarnya disertai dengan path/tempat dimana folder gambar disimpan
  6. Terkahir adalah proses delete gambar, menghapus dari database dan dari folder website tempat dimana gambar tersimpan menggunakan perintah unlink
gambaran proses upload yang akan dibuat

Upload, Tampil dan Delete Gambar di PHP
Untuk membuat halaman upload, tampil dan delete gambar kita memerlukan beberapa file diantaranya, file untuk koneksi ke database, form untuk upload gambar, file untuk memproses/validasi gambar, file untuk menampilkan gambar, dan untuk mendelete gambar. Tapi sebelumnya buat dulu sebuah folder dengan nama ‘gambar’ pada folder projek website Anda. 

struktur file direktori


Jadi disini ceritanya Saya ingin membuat sebuah halaman website yang nantinya menampilkan data nama  dan  foto siswa maka langkah pertama yang harus Saya lakukan adalah sebagai berikut

#1 Buat Database
Buat database terlebih dahulu misal dengan nama ‘foto’ selanjutnya buat tabel dengan nama misal ‘namasiswa’. Untuk strukturnya nanti kurng lebih seperti berikut :

Id (int) 13 auto_increment
Nama (varchar) 30
Foto (varchar) 5000

struktur tabel

#2 Buat Koneksi ke Database
Seperti pada umumnya untuk bisa melakukan operasi ke database MySQL maka kita memerlukan sebuah file untuk koneksi ke database
Script  koneksi.php
<?php
$host="localhost";
$user="root";
$pass="";
$db="foto";
$koneksi=@mysql_connect($host,$user,$pass);
if(!$koneksi){
 echo "Gagal koneksi=".mysql_error();
 exit();
}
//memilih database
$milih=@mysql_select_db($db,$koneksi);
if(!$milih){
 exit("Gagal memlih database:".mysql_error());

}
?>


#3 Buat form untuk input gambar/foto
Pada langkah ketiga ini kita harus menyediakan halaman atau antar muka kepada user untuk melakukan proses upload data gambar/foto. Form untuk upload gambar ini tidak seperti form untuk upload data biasa, sehingga nanti bentuk penulisan formnya sebagai berikut
<form method="post" action="proses.php" enctype="multipart/form-data">
form untuk upload gambar


Script input_foto.php

<html>
<head>
<title>Upload Gambar</title>
</head>
<body>
<form method="post" action="proses.php" enctype="multipart/form-data">
<table>
<tr>
<th colspan="2">SIMPAN & TAMPIL GAMBAR</th>
</tr>
<tr>
<td>Masukan Nama</td>
<td>Pilih Foto</td>
</tr>
<tr>
<td><input type="text" name="nama" id="nama" placeholder="masukan nama" required=""></td>
<td><input type="file" name="foto" id="foto" required=""></td>
</tr>

<tr>
<td>&nbsp;</td>
<td><input type="submit" name="kirim" id="kirim" value="SIMPAN"></td>
</tr>
</form>

</body>
</html>


#4  Buat file untuk validasi gambar / foto yang di upload
Seperti yang sudah Saya jelaskan sebelumnya bahwasanya nanti saat user melakukan upload gambar, maka gambar yang akan di upload tersebut akan di periksa terlebih dahulu. Proses pemeriksaan tersebut meliputi, jenis file yang di upload, dan ukuran file yang di upload. Bila sudah sesuai ketentuan maka halaman akan memproses untuk langsung menyimpan gambar


Script proses.php

<?php
include('koneksi.php');
$aran=$_POST['nama'];
$nama=true;
if($_POST['nama']==""){
 echo "nama masih kosong";
$nama=false;
}
$cek=($nama)?true:false;
//cek jika benar
if($cek==true){

 //menyiapkan validasi gambar yang akan di upload
 $file=$_FILES['foto']['name'];
 $tmp_dir=$_FILES['foto']['tmp_name'];
 $ukuran=$_FILES['foto']['size'];

 
//
 $direktori='gambar/'; //path tempat simpan
 $ektensi=strtolower(pathinfo($file, PATHINFO_EXTENSION)); //dapatkan info gambar
 $valid_ektensi=array('jpeg','jpg','png','gif'); //ektensi yang dibloehin
 $gambar=rand(1000,1000000).".".$ektensi;
 
//mulai validasi
//cek ektensi gambar
if(in_array($ektensi, $valid_ektensi)){

 //cek ukuran gambar
 if(!$ukuran < 1000000) { //jika lebih
  move_uploaded_file($tmp_dir, $direktori.$gambar);
  //simpan dan buat query
  $perintah=sprintf("INSERT INTO namasiswa VALUES('null','%s','$gambar')",
   $_POST['nama'],'$gambar');
 $query=@mysql_query($perintah,$koneksi);
 //validasi query

 if(!$query){
  echo "Gagal menyimpan:".mysql_error();
 }else{

  echo "Berhasil disimpan<br/>";
  echo "Nama $aran <br/> <img src='$direktori$gambar' height='200'> 
  <br/>berhasil disimpan
  <br><a href='tampil_foto.php'>Lihat Halaman Berikutnya</a>";
  }
 }
 else{
  echo "Gambar kegedean <br/>
  <a href='input_foto.php'>Kembali</a>";
 }
}
else{
 echo "Gambar yang koe upload ora sesuai<br/>
 <a href='input_foto.php'>Kembali</a>";
}
}



?>



Ketika script proses.php berhasil di eksekusi maka nanti kurang lebih akan tampil seperti berikut

script proses yang berhasil di eksekusi



#5 Menampilkan gambar

Foto yang berhasil diupload maka akan disimpan kedalam sebuah halaman. Disini halaman yang Saya buat untuk menampilkan gambar adalah tampil_foto.php, nanti foto – foto yang berhasil di upload kurang lebih akan terlihat seperti berikut

data berhasil ditampilkan
Data gambar yang tersimpan di database hanya berupa nama gambarnya saja, sedangkan file gambar/foto yang sebenarnya tersimpan di folder ‘gambar’ website. 

nama gambar yang tersimpan di database


Sehingga nanti pada saat proses untuk menampilkan gambar maka dalam data perulangan while denganan mysql_fetch_array perlu disertakan path/folder tempat dimana gambar disimpan


Contoh :

<img src="gambar/<?php echo $data['foto'];?>" width="60" height="80">

img src=gambar merupakan folder dengan nama ‘gambar’
<?php echo $data['foto'];?> merupakan perintah untuk mengambil nama gambar yang tersimpan di DB

Script tampil_foto.php
<?php
include('koneksi.php');
$perintah="SELECT * FROM namasiswa order by id desc";
$query=@mysql_query($perintah,$koneksi);
?>
<html>
<head>
<title>Halaman Tampil Foto</title>
</head>
<body>
<table width="500" border="1">
<tr>
<th colspan="4">MENAMPILKAN FOTO / <a href="input_foto.php">TAMBAH DATA</a></th>
</tr>
<tr>
<td>NO</td>
<td>NAMA</td>
<td>FOTO</td>
<td>DELETE</td>
</tr>
<?php
while($data=mysql_fetch_array($query)){
?>
<tr>
<td><?php echo $data['id'];?></td>
<td><?php echo $data['nama'];?></td>
<td align="center"><img src="gambar/<?php echo $data['foto'];?>" width="60" height="80"></td>
<td colspan="2"><a href="delete.php?del=<?php echo $data['id']?>">DELETE</a></td>
<!--path gambarnya sertakan-->
</tr>
<?php }?>
</table>

</body>
</html>


#6 Delete Foto dari database dan folder gambar
Untuk mendelete data dari database Anda bisa menggunakan perintah delete from…… sedangkan nanti untuk proses mendelete data gambarnya Anda perlu memlih databasenya terlebih duhulu kemudian dipecah dengan mysql_fetch_array. Bila sudah seperti itu selanjutnya jalankan perintah unlink yang didepannya disertai dengan parameter path/folder dimana gambar tersimpan


Nanti pada script tampil_foto.php Anda buat link yang mengarah ke file delete.php dan kemudian menyimpan variabel data yang bersangkutan. 

Contoh : 
<a href="delete.php?del=<?php echo $data['id']?>">DELETE</a>

del=<?php echo $data['id'] merupakan nama variabel yang menyimpan data yang bersangkutan kemudian nanti pada halaman file delete.php akan menyimpan varibel yang tersimpan tersebut menggunakan perintah $_GET

script delete.php

<?php
include('koneksi.php');
$del=$_GET['del'];
$perintah1=sprintf("delete from namasiswa where id=%d",$del); //query untuk delete
$perintah2="SELECT * FROM namasiswa where id='$del'"; //wuery untuk pilih db dulu
$a=@mysql_query($perintah2,$koneksi); //simpan query ke variabel $a
$b=mysql_fetch_array($a); //selanjutnya pecah data dan simpan ke variabel $b
unlink("gambar/$b[foto]"); //sekarang jalankan perintah unlink untuk hapus gambar dari folder, ambil data dan didepannya ditambahkan paramter tempatt dimana folder gambar tersimpan
$del2=@mysql_query($perintah1,$koneksi); //query untuk mendelete data di database
if($del2){
 echo "Gambar berhsil dihapus<br/>
 <a href='tampil_foto.php'>Kembali</a>";
}else{
 
 echo "Gagal koneksi=".mysql_error();
}
?>


Jadi kurang lebih seperti ituloah proses upload, tampil dan delete gambar menggunakan PHP. Mungkin untuk validasi  gambar  berdasarkan resolusi pixel (px) lebar dan panjang (px) akan dibahas pada artikel berikutnya.

Video Membuat Halaman Upload, Tampil dan Delete Foto Menggunakan PHP


Liat juga contoh lainnya : Update dan Unlink gambar di PHP

17 Responses to "Upload, Tampil dan Delete Gambar di PHP"

  1. Ada ya.. cara PHP untk upload, tampil dan delete gambar, belajar script lagi ini mah...

    ReplyDelete
  2. Saya nyimak dulu aja mas, karena masih belum begitu paham soal yang beginian

    ReplyDelete
  3. udah disedot, ditampilin, lalu di delete....nggak ada kerjaan banget sih mang...iyah sih makenya make PHP pulak yang cara ngelakuinnya ge udah riweuh.
    tapinya kalau neng Tresna mah jangan didelet dari hatimu atuh mang....bukannya jomblo keneh?

    ReplyDelete
    Replies
    1. teuing mang ah teu rada ngarti wkwk

      Delete
  4. Simak dulu aja nih, kalau yang seperti ini harus perlahan belajarnya. Agar bisa bener-bener paham :)

    ReplyDelete
  5. kren mas tutorialnay, cuman bagaimana caranya menampilkan data saat datanya di ubah dan itu bukan file gambar misal docx,pdf... klw gambar kan jelas scriptnya <img src="gambar/<?php echo $data['foto'];?>" mohon pencerahan nya?

    ReplyDelete
    Replies
    1. kan disitu ada percabanganya mas, jadi file yang bisa di upload hanya berktensi jpg, kalau bukan yah itu akan ditolak, walaupun punya saya memang filternya belum maksimal... , jadi kalau diubah jadi pdf, yah gak bisa,

      soal kalau menampilkan pdf, yah caranya sama saja, karena kan intinya dia memasukan datanya di DB, dan ngeraname datanya, terus dipanggil lewat perulangan, saya sih belum nyoba, tapi datanya kemungkinan akan ditampilkan dalam bentuk lin

      Delete
  6. Assalamu'alaikum min, sy udah praktekin yg diatas tp kok malah eror yah

    Warning: move_uploaded_file(img/497565258.jpg): failed to open stream: No such file or directory in C:\xampp\htdocs\berbagibuku\admin\proses.php on line 31

    Warning: move_uploaded_file(): Unable to move 'C:\xampp\tmp\phpFA66.tmp' to 'img/497565258.jpg' in C:\xampp\htdocs\berbagibuku\admin\proses.php on line 31

    Warning: mysqli_error() expects exactly 1 parameter, 0 given in C:\xampp\htdocs\berbagibuku\admin\proses.php on line 39
    Gagal menyimpan:

    knp ya min, sy udah cek tp gk tau salahnya dmna, line 31, sma 39 aman-aman aja

    ReplyDelete
    Replies
    1. move_uploaded_file(img/497565258.jpg): failed to open stream: No such file or directory in C:\xampp\htdocs\berbagibuku\admin\proses.php on line 31, mungkin maksudnya direktori img tidak ada... atau tidak ditemukan,

      Delete
  7. Fatal error: Uncaught Error: Call to undefined function mysql_connect() in C:\xampp\htdocs\test\koneksi.php:6 Stack trace: #0 C:\xampp\htdocs\test\proses.php(2): include() #1 {main} thrown in C:\xampp\htdocs\test\koneksi.php on line 6


    mas kalo ini error kenapa ya?

    ReplyDelete
    Replies
    1. mas versi phpnya beda, saya itu belum pake ektensi mysqli, coba baca bagian duanya yang terbaru pake mysqli

      Baca : Upload, Tampil dan Delete Gambar di PHP Part II (New)

      Delete
  8. untuk database disini menjadi 1 dengan web server atau terpisah ya ?
    jika ingin menghubungkan database dan webserver yang terpisah agar saling terhubung apakah ada referensi nya pak? terima kasih

    ReplyDelete
    Replies
    1. kalau di hosting bisa pake teknik remote database

      Delete
  9. Gagal menyimpan:Duplicate entry '0' for key 'PRIMARY'

    itu kira-kira kena nya di validasi index querry id kah? apa gmna gan?? soal nya setalah saya coba cuma bisa menampilkan 1 foto doang dan alhasil ketika mau di tambah data tampil "Gagal menyimpan:Duplicate entry '0' for key 'PRIMARY'"

    ReplyDelete
  10. Kalau versi php baru dengan ektensi mysqli, baca tutorial ini : Upload, Tampil dan Delete Gambar di PHP Part II (New)

    ReplyDelete
  11. kalo keteranganya gagal menyimpan data ke database, itu apanya kang?

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin