Upload Edit dan Hapus Gambar PHP MYSQLi

Publish Date : 23-11-2023 , dibaca 198 kali, Hari ini dibaca : 1 kali ,0 comments

Halo teman-teman , Kali ini kita akan membahas secara lengkap dan sedetail mungkin Bagaimana Cara Upload Gambar ke database , Bukan hanya itu , tentunya Edit / Update Gambar dari database , Serta Menghapus gambar dari database secara user frendly , atau dengan kata lain , kita akan membuat CRUD gambar dengan PHP MYSQLi

Demo

Langkah pertama , tentunya kita harus menggunakan TEXT EDITOR , disini saya menggunakan sublime Text , anda boleh menggunakan text editor kesayangan anda sendiri :

Sebelum kita membahas secara detail , disini saya akan berusaha menjabarkan satu persatu apa saja yang kita butuhkan file nya

koneksi.php
index.php
tampil.php
tambah.php
edit.php
proses.php
gambar (merupakan folder untuk tempat menyimpan file gambar kita )

terdapat 6 file , yang nantinya akan kita gunakan untuk membuat CRUD data gambar dengan PHP MYSQLi ini

OK , langsung saja , langkah pertama ,disini kita akan membuat database terlebih dahulu

--Membuat Database--

Tentunya kita harus mempersiapkan database kita , disini kita akan membuat database dengan nama db_senterwebs.com ,
berikut ini ada 3 field yang harus kita buat , id_artikel, judul ,gambar , berikut tabelnya :

Name	Type
id_artikel	int(2)
judul	varchar(100)
gambar	text

Atau anda bisa menggunakan script dibawah ini , dan jalankan pada query di sql phpmyadmin,berikut script nya :

CREATE TABLE tabel_artikel(
    id_artikel int(2) NOT NULL AUTO_INCREMENT,
    judul varchar(60)NOT NULL,
    gambar text,
    PRIMARY KEY(id_artikel)
);>

Ok , jika database sudah berhasil kita buat , buka text editor anda , dan langkah selanjutnya adalah , membuat 6 buah file yang nantinya akan kita gunakan dalam project website kita kali ini , tentunya anda harus membuat Folder terlebih dahulu di htdocs dalam xampp anda , sehingga nanti file ini dapat langsung kita jalankan

1. koneksi.php

file koneksi.php , merupakan file yang kita gunakan dalam menghubungkan aplikasi website kita dengan database yang sudah kita buat sebelumnya , yang harus di perhatikan dari script dibawah ini ada tiap-tiap variabel yang kita buat itu harus sesuai dengan setingan database dan server di komputer kita :

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "db_senterwebs.com"; //database yang sudah kita buat sebelumnya
$koneksi = mysqli_connect($server, $username, $password,$database);
if ( mysqli_connect_errno() ) {
 // Jika koneksi Error tampilkan Pesan.
 exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
?>

2. index.php

file index.php , meruapakan file utama website kita , dimana file ini akan tampil pertama pada setiap halaman website

<!DOCTYPE html>
<html>
<head>
    <title>Upload Edit Hapus Gambar Senterwebs.com</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
 
<body>
    <div class="container">
        <div class="row bg-light">
            <div class="col-sm-6 mx-auto">
       <h1>
          Senterwebs.Com
      </h1>
       <?php
       include "koneksi.php";
     
            if (empty($_GET['alert'])) {
              echo "";
            } elseif ($_GET['alert'] == 1) {
                echo "<div class='alert alert-success alert-dismissable'>
                                          <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
                                          <i class='icon fa fa-check-circle'></i> Sukses!
                                          Query Berhasi dijalankan.
                                        </div>";
            }
        ?>
            
         <?php 
         if (isset($_GET['page'])== "edit"){
            include "edit.php";
         }else{
            include "tambah.php";
         }
         include "tampil.php"; 
         ?>

        </div>
    </div>
</div>
</body>
</html>
<script>
    var loadFile = function(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };
</script>

3. tambah.php

file tambah.php merupakan file yang kita gunakan dalam pembuatan form , untuk menginput file ke dalam database

<form action="proses.php?act=simpan" method="post" enctype="multipart/form-data" name="form" target="_self">
<div class="form-group">
    <label for="">Judul</label>
      <input type="text" name="judul" class="form-control" required>
</div>            
<div class="form-group">
    <label for="">Image</label>
     <img id="output" width="200" />
      <input type="file" name="gambar" class="form-control" onchange="loadFile(event)">
</div>
<div class="form-group">
    <button class="btn btn-success btn-sm" name="submit"
            type="submit">
         Simpan
    </button>
</div>
</form>

4. tampil.php

file tampil.php merupakan file yang kita gunakan untuk menampilkan data di dalam database

<table class="table table-striped">
<thead>
<tr>
  <th>No.</th>
  <th>Judul</th>
  <th>Gambar</th>
  <th>Action</th>
</tr>
</thead>
<tbody>
  <?php 
      $no = 1;
      $sql = mysqli_query($koneksi,"SELECT * FROM tabel_artikel");
      while ($r = mysqli_fetch_array($sql)) { 
      echo" 
<tr>
  <td>$no</td>
  <td>$r[judul]</td>
  <td><img src='gambar/$r[gambar]' width='60'></td>
  <td><a href='?page=edit&id=$r[id_artikel]'><button type='button' class='btn btn-success'><span class='glyphicon glyphicon-edit'></span> Edit</button></a> "; ?>
  <a href='proses.php?act=hapus&id=<?php echo $r['id_artikel'];?>' onClick="return confirm('Yakin akan menghapus Data?')"><button type='button' class='btn btn-danger'><span class='glyphicon glyphicon-remove-sign'>Delete</button></a></td>
</tr>
<?php $no++; } ?>
</tbody>
</table>

5. edit.php

file edit.php merupakan file yang kita gunakan untuk menampilkan data di dalam database ke dalam form ,yang nanti akan kita edit :

<?php
$sql = mysqli_query($koneksi,"SELECT * FROM tabel_artikel WHERE id_artikel='$_GET[id]'");
$r = mysqli_fetch_array($sql);
?> 
<form action="proses.php?act=update" method="post" enctype="multipart/form-data" name="form" target="_self">
    <div class="form-group">
        <input type='hidden' name='id' value="<?= $r['id_artikel']?>">
        <label for="">Judul</label>
          <input type="text" name="judul" value="<?= $r['judul'] ?>"class="form-control" required>
    </div>            
    <div class="form-group">
        <label for="">Image</label>
         <img  src="gambar/<?= $r['gambar'] ?>" id="output" width="200" />
          <input type="file" name="gambar" class="form-control" onchange="loadFile(event)">
    </div>
    <div class="form-group">
        <button class="btn btn-success btn-sm" name="submit"
                type="submit">
             Upate
        </button>
    </div>
</form>

6. proses.php

file proses.php merupakan file yang kita gunakan untuk memproses setiap action

 <?php
 include "koneksi.php";

$judul = $_POST['judul'];
$nama_file      = $_FILES['gambar']['name'];
$acak           = rand(1,99);
$nama_file_unik = $acak.$nama_file;

 if ($_GET['act']=="simpan"){
 if(isset($_POST["submit"])){

                    if (!empty($nama_file)){
                        
                       move_uploaded_file($_FILES["gambar"]["tmp_name"], "gambar/".$nama_file_unik);
                        
                        $query = mysqli_query($koneksi, "INSERT INTO tabel_artikel (judul, gambar) values ('$judul', '$nama_file_unik')") or die('Ada kesalahan pada query  : '.mysqli_error($koneksi));
                            if ($query == TRUE){
                                 // jika berhasil dijalankan
                                    header("location: index.php?alert=1");
                            }
                        
                }
            }
}
elseif ($_GET['act']=='update') {
   $id = $_POST['id'];
  if (isset($id)) {

      // Jika tidak kosong gambar           
      if (!empty($nama_file)){
      //Queri menampilkan gambar
      $query = "SELECT gambar FROM tabel_artikel WHERE id_artikel='$id'";
      $hapus = mysqli_query($koneksi, $query);
      $r     = mysqli_fetch_array($hapus);
                  //Jika gambar ada
               if ($r['gambar']!=''){
                    $namafile = $r['gambar'];
                    // hapus file gambar yang berhubungan dengan artikel tersebut
                    unlink("gambar/".$namafile); 
                  }  

       move_uploaded_file($_FILES["gambar"]["tmp_name"], "gambar/".$nama_file_unik);            
      $query = mysqli_query($koneksi, "UPDATE tabel_artikel 
         SET judul = '$judul',
             gambar = '$nama_file_unik' WHERE id_artikel='$id'")or die('Ada kesalahan pada query  : '.mysqli_error($koneksi));
      }else{
         $query = mysqli_query($koneksi, "UPDATE tabel_artikel 
         SET judul = '$judul' WHERE id_artikel='$id'")or die('Ada kesalahan pada query  : '.mysqli_error($koneksi));
      }
      // cek hasil query
      if ($query) {
          // jika berhasil dijalankan
          header("location: index.php?alert=1");
      }
  }
}
elseif ($_GET['act']=='hapus') {
  $id = $_GET['id'];
  if (isset($id)) {
      $query = "SELECT gambar FROM tabel_artikel WHERE id_artikel='$id'";
      $hapus = mysqli_query($koneksi, $query);
      $r     = mysqli_fetch_array($hapus);
               if ($r['gambar']!=''){
                    $namafile = $r['gambar'];
                    // hapus file gambar yang berhubungan dengan artikel tersebut
                    unlink("gambar/".$namafile); 
                  }
      $query = mysqli_query($koneksi, "DELETE FROM tabel_artikel WHERE id_artikel='$id'")or die('Ada kesalahan pada query delete : '.mysqli_error($koneksi));

      // cek hasil query
      if ($query) {
          // jika berhasil dijalankan
          header("location: index.php?alert=1");
      }
  }
    } 
?>