Cara Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP

Cara Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP

Cara Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP
Cara Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP

Hallo sobat ruangcoder, artikel kali ini tentang Tutorial atau Cara Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP , nah perlu sobat ketahui form upload foto atau gambar ini sangatlah berguna , dan sering kali sobat kunjungi tentunya , bukan hanya form CRUD saja ,  form upload foto ini biasanya dipakai dalam sistem informasi penjualan , seperti untuk mengupload foto product dan banyak lagi , maupun form upload foto ini digunakan ,untuk upload foto data pribadi , atau profile dari user yang register ke suatu website. Nah jadi admin akan memberikan tutorial ini , tentunya mudah sobat , oke tanpa banyak basa - basi langsung saja kita buat form uploadnya.

Tutorial Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP :


Nah langkah pertama silahkan sobat buat terlebih dahulu folder baru di local server sobat (htdocs) disini admin memberi nama folder tersebut dengan nama latihan_foto , lalu sobat silahkan drag and drop ke Text Editor sobat , disini admin menggunakan Text Editor Sublime , setelah selesai membuat folder , sobat buat Database baru , disini admin menamakan databasenya , dengan nama ruangcoderfoto , setelah itu sobat buat Table baru dengan nama table tersebut gambar, untuk kolom table nya cukup 3 saja , dan untuk isi field nya sobat bisa lihat gambar dibawah ini :



Setelah selesai membuat Database dan Folder , langkah selanjutnya sobat buat file untuk form input gambar nya , silahkan sobat buat dengan nama file nya koneksi.php dan sobat letakkan di folder latihan_foto, kemudian sobat ketik kode yang dibawah ini :


<?php
    // koneksi ke engine host mysql
    // valuenya adalah host, user, dan password
    $Open = mysql_connect("localhost","root","");
        if (!$Open){
            die ("Koneksi ke Engine MySQL Gagal !<br>");
        }
        //jika koneksi ke host berhasil
        else{
            echo "Koneksi ke Engine MySQL Berhasil !<br>";
        }
    
    // koneksi ke database mysql
    // valuenya adalah database name
    $Koneksi = mysql_select_db("ruangcoderfoto");
        if (!$Koneksi){
            die ("Koneksi ke Database Gagal !");
        }
        //jika koneksi ke database berhasil
        else{
            echo "Koneksi ke Database MySQL Berhasil !";
        }
?>

form upload ini berbeda dari form inputan biasanya karena kita menambahkan kode seperti dibawah ini :

enctype="multipart/form-data"

Kemudian sobat silahkan buat file baru , didalam folder latihan_foto , buat dengan nama index.php kemudian sobat ketikkan kode dibawah ini :


<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
// jumlah data yang akan ditampilkan per halaman
$dataPerPage = 10;
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1; {
}
// perhitungan offset
$offset = ($noPage - 1) * $dataPerPage;
?>
 
 <html>
 <title> Upload Gambar </title>
 <script language="javascript">
 function tanya() {
 if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
 return true;
  } else {
   return false;
  }
  }
</script>
<body width='900px'>
<center> 
<h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
<hr>
<br>
<!-- /////////////////////////////tombol untuk menambah data//////////////////////////////////-->
<form action='tambah.php' method='POST'>
<table >
 <tr>
 <center><td> <input type='submit' name='tambah' value='Tambah Gambar'> </td> 
 </tr>
</table>
</form>
<!-- ///////////////////////////// Script untuk membuat tabel///////////////////////////////// -->
<table  border='1' Width='600' cellpadding="5">  
<tr>
 <th> NO </th>
 <th> Gambar </th>
 <th> Keterangan </th>
 <th colspan='2'> Action </th>
</tr>
 
<?php  
// Perintah untuk menampilkan data
$queri="Select * From gambar order by id desc LIMIT $offset, $dataPerPage " ;  //menampikan data dari tabel siswa menggunakan limit (untuk membatasi)
$hasil=MySQL_query ($queri);    //fungsi untuk SQL
// nilai awal variabel untuk no urut
$i = $offset+1;
// perintah untuk membaca dan mengambil data dalam bentuk array
while ($data = mysql_fetch_array ($hasil)){
$id = $data['id'];
 echo "  
   <tr>
  <td><center>".$i."</center></td> 
  <td><center><img src='img/" . $data['gambar']. "' alt='' width='80' height='60' /></td>
  <td><center>".$data['ket']."</td>
  
  <td><center> <form action = 'edit.php' method = 'GET'>
  <center><input type = 'submit' name = 'tombol' value = 'Edit' class = 'edit'>"; 
echo " <input type = 'hidden' name = 'id' value = '".$data['id']."'> </center> 
  </form></td>
  <td><center> 
  <form action = 'delete.php' method = 'GET'>
  <input type = 'hidden' name = 'nama' value = '".$data['nama']."'>
  <input type = 'hidden' name = 'id' value = '".$data['id']."'>
  <input type = 'submit' name = 'tombol2' value = 'Delete' class = 'delete'
  onclick='return tanya(". $data['id'].")'>  
  </form></td>
  </tr> 
  "; 
 $i++; 
}
?>
</table>

<?php
// mencari jumlah semua data dalam tabel guestbook
$query   = "SELECT COUNT(*) AS jumData FROM gambar";
$hasil  = mysql_query($query);
$data     = mysql_fetch_array($hasil);
$jumData = $data['jumData'];
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
$jumPage = ceil($jumData/$dataPerPage);
// menampilkan link previous
if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
// memunculkan nomor halaman dan linknya
for($page = 1; $page <= $jumPage; $page++)
{
         if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
         {   
            if (($showPage == 1) && ($page != 2))  echo "..."; 
            if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
            if ($page == $noPage) echo " <b>".$page."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
            $showPage = $page; 
         }
}
// menampilkan link next
if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
?>


</body>
</html> 



Nah untuk penjelasan kodenya , sudah admin cantumkan di kodingan nya ya , jadi sobat tinggal baca saja , selanjutnya sobat buat file baru lagi dengan nama file tambah.php yang dimana ini berfungsi untuk form input atau upload gambarnya, dan sobat buat folder baru di dalam folder latihan_foto beri nama folder tersebut dengan nama img fungsi folder tersebut berfungsi untuk menyimpan hasil upload atau input an gambar kita  :



<?php
error_reporting(0);
include "koneksi.php";

////////////////////////////////////////add atau input data////////////////////////////////
if (isset($_POST['add'])) {
$ket = $_POST['ket'];
///////////////////////////direktori untuk menyimpan gambar //////////////////////////////// 
$lokasi_file = $_FILES['gambar']['tmp_name'];
$foto_file = $_FILES['gambar']['name'];
$tipe_file = $_FILES['gambar']['type'];
$ukuran_file = $_FILES['gambar']['size'];

$direktori = "img/$foto_file"; // tempat penyimpanan
$sql = null;
$MAX_FILE_SIZE = 1000000;
//100kb
if($ukuran_file > $MAX_FILE_SIZE) {
    header("Location:tambah.php");
    exit();
}
$sql = null;
if($ukuran_file > 0) {
    move_uploaded_file($lokasi_file, $direktori);
}

// perintah SQL
$query="INSERT INTO gambar (id,gambar,ket) VALUES ('','$foto_file' ,'$ket') " ;

$hasil=mysql_query($query);

if ($hasil){
//header ('location:view.php');
echo " <center> <b> <font color = 'red' size = '4'> <p> Data Berhasil disimpan </p> </center> </b> </font> <br/>
 <meta http-equiv='refresh' content='2; url= index.php'/>  ";
} else { echo "Data gagal disimpan
 <meta http-equiv='refresh' content='2; url= tambah.php'/> ";
}
  } 
?>
<html>
<head>
 <title> Tambah Data Gambar </title>
 <link href ="css_submit.css" rel="stylesheet" type="text/css">
 
</head>
<body width='900px' style = 'margin : 20px; font : 16px arial;'>
<center> 
<h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
<hr>
<br>
 <center>
 <p> Tambah Data Gambar</p>
 
 <form method = 'POST' action = ' ' enctype ="multipart/form-data" role="form">
 <table border = '1' cellspacing = '1' cellpadding = '10'
 style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
 <tr>
  <td> gambar </td>
  <td width = '5' align = 'center'> : </td>
  <td widht="5">
   <input type="file"   id="uploadImage1"  onchange="PreviewImage(1)" name='gambar'>
         <br>
         <br>
          <a class="cboxElement " > <?php echo " <img src='img/". $data['gambar'] ."' id='uploadPreview1' width='100' height='120'/>"; ?> </a>
             
   </td>
  </tr>
 <tr>
  <td> Keterangan </td>
  <td align = 'center'> : </td>
  <td> <input type = 'text' placeholder='Keterangan' name = 'ket' /> </td>
  </tr>
  
 <tr>
 <td colspan = '3' align = 'center'>
 <input type = 'submit' name = 'add' value = 'Submit'/>
 <input type = 'reset' name = 'Reset' value = 'Reset' /> </td>
 </tr>
</table>
<a href = 'index.php'> Kembali </a>
</form>

    <!-- upload gambar dengan preview -->
    <script type="text/javascript">
    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
        };
    }
</script>
<!-- end upload gambar dengan preview -->
</body>
</html>  

Nah sekarang sobat tinggal coba saja, jika berhasil otomatis di halaman utama , akan muncul gambarnya , dan akan tersimpan baik di database maupun di folder img , langkah selanjutnya , sobat akan membuat file baru dengan nama file nya edit.php dan sobat ketikkan kode yang ada dibawah ini :



<?php
include "koneksi.php";
// membaca informasi yang dikirim dari file view.php pada address bar
$id = $_GET['id'];
// Perintah sql untuk menampilkan database
$queri = "select * from gambar where id = '$id'";
// perintah untuk menjalankan sql
$hasil = mysql_query($queri);
// menjadikan data dalam bentuk array
$data  = mysql_fetch_array($hasil);
$ket = $data['ket'];

/////////////////////////////////////////////////////update//////////////////////////////
if (isset($_POST['update'])) {
$ket = $_POST['ket'];
///////////////////////////foto //////////////////////////////// 
$lokasi_file = $_FILES['gambar']['tmp_name'];
$foto_file = $_FILES['gambar']['name'];
$tipe_file = $_FILES['gambar']['type'];
$ukuran_file = $_FILES['gambar']['size'];

$direktori = "img/$foto_file";
$sql = null;
$MAX_FILE_SIZE = 1000000;
//100kb
if($ukuran_file > $MAX_FILE_SIZE) {
    header("Location:url=edit.php");
    exit();
}
$sql = null;
if($ukuran_file > 0) {
    move_uploaded_file($lokasi_file, $direktori);
}
    $d = mysql_fetch_array(mysql_query("SELECT * FROM gambar WHERE id='$_GET[id]'"));
              if(empty($foto_file)){
                $hasil=mysql_query("UPDATE gambar SET ket='$_POST[ket]'
                  WHERE id='$_POST[id]'");
                echo "<script>window.location='index.php'</script>";
              } else{
                 $hasil=mysql_query("UPDATE gambar SET ket='$_POST[ket]',gambar='$foto_file'
                  WHERE id='$_POST[id]'");
                echo "<script>window.location='index.php'</script>";
              }
          }

?>


<html>
<head>
 <title> Update Data Gambar </title>
 
</head>
<body width='900px' style = 'margin : 20px; font : 16px arial;'>
<center> 
<h3> MEMBUAT UPLOAD IMAGE/GAMBAR</h3>  UpLoad gambar dengan Preview menggunakan PHP dan Javascript 
<hr>
<br>
<?php 
echo "
 <center>
 <p> Upload Gambar dengan PHP dan Java Script </p>
 
 <form method ='POST' action = ' ' enctype ='multipart/form-data' role='form'>
 <table border = '1' cellspacing = '1' cellpadding = '10'
 style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
 
 <input type = 'hidden' name = 'id' value = '".$id."' />
 <tr>
  <td> gambar </td>
  <td width = '5' align = 'center'> : </td>
  <td widht='5'>
   <input type='file'   id='uploadImage1'  onchange='PreviewImage(1)'' name='gambar'>
         <br>
         <br> "; ?>
          <a class="cboxElement " > <?php echo " <img src='img/". $data['gambar'] ."' id='uploadPreview1' width='100' height='120'/>"; ?> </a>
       <?php echo "      
   </td>
  </tr>
 <tr>
  <td> Keterangan </td>
  <td align = 'center'> : </td>
  <td> <input type = 'text' placeholder='Keterangan' name = 'ket' value = '".$ket."'/> </td>
  </tr>

  
 <tr>
 <td colspan = '3' align = 'center'>
 <input type = 'submit' name = 'update' value = 'Update'/>
 </td>
 </tr>
</table>
<a href = 'index.php'> Kembali </a>
";?>

    <!-- upload gambar dengan preview -->
    <script type="text/javascript">
    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
        };
    }
</script>
<!-- end upload gambar dengan preview -->

</form>
</body>
</html>

Dan langkah yang terakhir adalah , sobat membuat file delete.php yang berfungsi untuk menghapus gambar tersebut , silahkan sobat ketikkan kode dibawah ini :



<?php
include "koneksi.php";
error_reporting(E_ALL ^ E_NOTICE);
$id = $_GET['id'];
$gambar = $_GET['gambar'];
$ket = $_GET['ket'];

$delete = "delete from tabel_gambar where id = '$id'";
$hasil = mysql_query($delete);

if ($hasil){
//header ('location:view.php');
echo " <center> <b> <font color = 'red' size = '4'> <p> Data dengan nama $nama Berhasil dihapus </p> </center> </b> </font> <br/>
 <meta http-equiv='refresh' content='1; url= index.php'/>  ";
} else { echo "Data gagal dihapus";
}

?>  
  
Nah jadi Cara Membuat Upload, Edit, Hapus Foto/Gambar dengan PHP sampai sini saja , semoga membantu sobat , terimakasih sobat sudah berkunjung ke website ini , semoga bermanfaat ya , jangan lupa di share

Anda mungkin menyukai postingan ini