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
  • Simak dulu aja nih, kalau yang seperti ini harus perlahan belajarnya. Agar bisa bener-bener paham :)

    ReplyDelete
  • 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
  • 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
  • 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
  • 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
    Replies
    1. id atau primary keynya set auto increment

      Delete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin

Newer PostOlder PostHome
nagabet76slot gacorslot online1213141516Slot Online Menghadirkan Pengalaman Digital Yang Didukung Pemrosesan Data Secara Real TimeMahjongways Menganalisis Pola Visual Dan Dinamika Simbol Berdasarkan Pemrosesan Data DigitalMahjongways Mengembangkan Dinamika Permainan Melalui Pengelolaan Data Dan Elemen Visual TerintegrasiAnalisis Komputasi Modern Membantu Memetakan Dinamika Sistem Digital Berdasarkan Data ObservasiMember Baru Mendorong Dinamika Komunitas Digital Menuju Pengalaman Yang Lebih Aktif Dan Menarikslot onlinemahjongwayasarsitektur layananpemrosesan data adaptifmember baruSlot Online Terbaru Menghadirkan AnalisisScatter Hitam Dianalisis Melalui PemetaanPola Scatter Hitam Membentuk Distribusi Visual Yang Dapat Dikaji Menggunakan Komputasi AdaptifArsitektur Teknologi TerdistribusiTeknologi Visualisasi DataMahjongways Mengembangkan Interaksi Visual Melalui Integrasi Simbol Digital Yang DinamisAnalisis Mahjongways Memetakan Dinamika Visual Dan Respons Antarmuka Berbasis DataScatter Hitam Dianalisis Melalui Pemetaan Struktur Simbol Digital Berbasis Komputasi AdaptifAlgoritma Scatter Hitam Membantu Mengidentifikasi Dinamika Pola Melalui Analisis Data ObservasiPg Soft Mengembangkan Sistem Rendering Adaptif Untuk Mendukung Visualisasi Digital ModernTeknologi Pg Soft Mengoptimalkan Pemrosesan Grafis Melalui Arsitektur Rendering TerintegrasiTeknologi Pemodelan Data Membantu Menganalisis Dinamika Informasi Pada Ekosistem Digital ModernArsitektur Komputasi Terdistribusi Meningkatkan Keandalan Pengelolaan Data Pada Platform DigitalTeknologi Kecerdasan Komputasional Mendorong Pengembangan Sistem Digital Yang Lebih AdaptifPemrosesan Data Modern Membantu Memetakan Pola Informasi Melalui Pendekatan Komputasi TerukurTeknologi Integrasi Data Mempermudah Sinkronisasi Informasi Dalam Lingkungan Digital TerpaduVisualisasi Komputasi Modern Membantu Menginterpretasikan Perubahan Pola Pada Sistem Digital KompleksTeknologi Otomasi Data Meningkatkan Efisiensi Pengelolaan Informasi Pada Infrastruktur DigitalModel Komputasi Adaptif Mendukung Pengembangan Teknologi Digital Melalui Analisis Data BerkelanjutanPengembangan Pg Soft Mengintegrasikan Teknologi Rendering Dengan Interaksi Visual Yang ResponsifPg Soft Menerapkan Komputasi Visual Untuk Meningkatkan Efisiensi Pengolahan Elemen DigitalEksplorasi Scatter Hitam Memetakan Distribusi Simbol Melalui Model Analitik Digital TerintegrasiPola Scatter Hitam Dikaji Menggunakan Pendekatan Visualisasi Data Dan Pemodelan StatistikMahjongways Menghadirkan Pendekatan Visual Interaktif Melalui Pemrosesan Simbol Yang AdaptifEksplorasi Mahjongways Mengungkap Perubahan Pola Visual Dalam Lingkungan Digital Terintegrasikasino online dan perubahan cara pengguna menilai keamanan platform digitalmengapa promosi kasino online sering memengaruhi harapan pengguna baruketika tampilan mewah kasino online membentuk kesan kepercayaan penggunapengaruh cerita kemenangan orang lain terhadap minat mengakses kasino onlinekasino online dalam fenomena perubahan pola konsumsi hiburan masyarakatbagaimana kasino online memanfaatkan desain interaktif untuk menarik perhatianalasan sebagian pengguna kasino online lebih mengingat bonus daripada risikoketika kemudahan transaksi mengubah kebiasaan pengguna kasino onlinekasino online dan tantangan menjaga kesadaran finansial di era serbadigitalmengapa ulasan pengguna dapat membentuk persepsi terhadap kasino onlinemahjong online dan perubahan cara generasi digital mengenal permainan klasikmengapa mahjong online menarik perhatian komunitas pecinta permainan strategiketika animasi modern memberikan identitas baru pada mahjong onlineperan fitur multiplayer dalam membangun interaksi pemain mahjong onlinemahjong online membawa warisan permainan asia ke dalam ekosistem digitalbagaimana mahjong online mengadaptasi simbol tradisional menjadi desain modernpengaruh tampilan antarmuka terhadap kenyamanan pengguna mahjong onlinemahjong online dan fenomena berkembangnya komunitas permainan lintas generasimengapa variasi aturan mahjong online menjadi topik menarik bagi pemain baruperjalanan mahjong online dari hiburan berbasis browser menuju platform mobile