Membuat CRUD Gambar dengan Mysqli PHP 7

By | November 6, 2021

Contoh CRUD Menampilkan Gambar dari Database dengan PHP 7. Ada banyak sekali cara untuk membuat dan menampilkan gambar dengan PHP Mysqli , salah satunya dengan cara yang akan saya bagikan langsung simak saja.

Membuat CRUD Gambar dengan Mysqli PHP 7

Cara Membuat CRUD Gambar dengan php mysqli

Sebelum lebih lanjut. Anda harus menginstal xampp versi 7 klik disini untuk mendownload terlebih dahulu, kemudian download bootstrap klik disini untuk mendownload.

Ada 7 file yang akan saya buat diantaranya :

  • File config.php
  • File index.php
  • File edit_produk.php
  • File tambah_produk.php
  • File proses_edit.php
  • File proses_hapus.php
  • File proses_tambah.php

Selanjutnya kita akan membuat database terlebih dahulu dengan nama “upload”. Setelah sudah langkah selanjutnya membuat table produk.

/*CREATE TABLE `produk` ( `id` INT(11) NOT NULL AUTO_INCREMENT ,  `nama_produk` VARCHAR(255) NULL ,  `deskripsi` TEXT NULL ,  `harga_beli` INT(11) NULL , `gambar_produk` VARCHAR(255) NULL ,    PRIMARY KEY  (`id`)) ENGINE = InnoDB;*/

 Selah membuat database langkah selanjutnya itu kita akan membuat file config.php

<?php
  $host = "localhost";
  $user = "root";
  $pass = "";
  $nama_db = "upload"; //nama database
  $koneksi = mysqli_connect($host,$user,$pass,$nama_db); //pastikan urutan nya seperti ini, jangan tertukar
  if(!$koneksi){ //jika tidak terkoneksi maka akan tampil error
    die ("Koneksi dengan database gagal: ".mysql_connect_error());
  }
?>

 

Sedikit penjelasan. $nama_db = “upload”;  ini nama database. bagi anda yang ingin beda nama databasenya bisa di ganti. Jangan merubah yang lain

File index.php

<?php
include('config.php');
?>
<!DOCTYPE html>
<html>
<head>
  <title>CRUD Produk dengan gambar - Gilacoding</title>
  <title>CRUD Gambar dengan PHP 7</title>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
  <center>
    <h1>CRUD Gambar dengan PHP 7 Pemulungkode</h1>
  </center>
  <center><a href="tambah_produk.php"><button type="button" class="btn btn-info"> Tambah Produk</button></a>
  </center>
  <br />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>No</th>
        <th>Produk</th>
        <th>Dekripsi</th>
        <th>Harga Beli</th>
        <th>Gambar</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <?php
      // jalankan query untuk menampilkan semua data diurutkan berdasarkan nim
      $query = "SELECT * FROM produk ORDER BY id ASC";
      $result = mysqli_query($koneksi, $query);
      //mengecek apakah ada error ketika menjalankan query
      if (!$result) {
        die("Query Error: " . mysqli_errno($koneksi) .
          " - " . mysqli_error($koneksi));
      }

      //buat perulangan untuk element tabel dari data mahasiswa
      $no = 1; //variabel untuk membuat nomor urut
      // hasil query akan disimpan dalam variabel $data dalam bentuk array
      // kemudian dicetak dengan perulangan while
      while ($row = mysqli_fetch_assoc($result)) {
      ?>
        <tr>
          <td><?php echo $no; ?></td>
          <td><?php echo $row['nama_produk']; ?></td>
          <td><?php echo substr($row['deskripsi'], 0, 20); ?>...</td>
          <td>Rp <?php echo number_format($row['harga_beli'], 0, ',', '.'); ?></td>
          <td style="text-align: center;"><img src="gambar/<?php echo $row['gambar_produk']; ?>" class="img-thumbnail" style="width: 120px;"></td>
          <td>
            <a href="edit_produk.php?id=<?php echo $row['id']; ?>"><button type="button" class="btn btn-info">Edit</a> |
            <a href="proses_hapus.php?id=<?php echo $row['id']; ?>" onclick="return confirm('Anda yakin akan menghapus data ini?')">Hapus</a>
          </td>
        </tr>
      <?php
        $no++; //untuk nomor urut terus bertambah 1
      }
      ?>
    </tbody>
  </table>
  <br>
  <hr>
  <Center>
    <footer>
      Pemulungkode
    </footer>
  </Center>
</body>
</html>

File index.php ini berfungsi menampilkan data dari database yang berhasil di sempan.

File edit_produk.php

<?php
  // memanggil file koneksi.php untuk membuat koneksi
  include 'config.php';
  // mengecek apakah di url ada nilai GET id
  if (isset($_GET['id'])) {
    // ambil nilai id dari url dan disimpan dalam variabel $id
    $id = ($_GET["id"]);

    // menampilkan data dari database yang mempunyai id=$id
    $query = "SELECT * FROM produk WHERE id='$id'";
    $result = mysqli_query($koneksi, $query);
    // jika data gagal diambil maka akan tampil error berikut
    if (!$result) {
      die("Query Error: " . mysqli_errno($koneksi) .
        " - " . mysqli_error($koneksi));
    }
    // mengambil data dari database
    $data = mysqli_fetch_assoc($result);
    // apabila data tidak ada pada database maka akan dijalankan perintah ini
    if (!count($data)) {
      echo "<script>alert('Data tidak ditemukan pada database');window.location='index.php';</script>";
    }
  } else {
    // apabila tidak ada data GET id pada akan di redirect ke index.php
    echo "<script>alert('Masukkan data id.');window.location='index.php';</script>";
  }
  ?>
 <!DOCTYPE html>
 <html>
 <head>
   <title>CRUD Produk dengan gambar - Gilacoding</title>
   <style type="text/css">
     * {
       font-family: "Trebuchet MS";
     }
     h1 {
       text-transform: uppercase;
       color: #f50834;
     }
     label {
       margin-top: 10px;
       float: left;
       text-align: left;
       width: 100%;
     }
     input {
       padding: 6px;
       width: 100%;
       box-sizing: border-box;
       background: #f8f8f8;
       border: 2px solid #ccc;
       outline-color: #f50834;
     }
     div {
       width: 100%;
       height: auto;
     }
     .base {
       width: 400px;
       height: auto;
       padding: 20px;
       margin-left: auto;
       margin-right: auto;
       background: #ededed;
     }
   </style>
   <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
   <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
   <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
 </head>
 <body>
   <center>
     <h1>Edit Produk <?php echo $data['nama_produk']; ?></h1>
     <center>
       <form method="POST" action="proses_edit.php" enctype="multipart/form-data">
         <section class="base">
           <!-- menampung nilai id produk yang akan di edit -->
           <input name="id" value="<?php echo $data['id']; ?>" hidden />
           <div>
             <label>Nama Produk</label>
             <input type="text" name="nama_produk" value="<?php echo $data['nama_produk']; ?>" autofocus="" required="" />
           </div>
           <div>
             <label>Deskripsi</label>
             <input type="text" name="deskripsi" value="<?php echo $data['deskripsi']; ?>" />
           </div>
           <div>
             <label>Harga Beli</label>
             <input type="text" name="harga_beli" required="" value="<?php echo $data['harga_beli']; ?>" />
           </div>
           <div>
             <label>Gambar Produk</label>
             <img src="gambar/<?php echo $data['gambar_produk']; ?>" style="width: 120px;float: left;margin-bottom: 5px;">
             <input type="file" name="gambar_produk" />
             <i style="float: left;font-size: 11px;color: red">Abaikan jika tidak merubah gambar produk</i>
           </div>
           <div>
             <button type="button" class="btn btn-info">Simpan Perubahan</button>
           </div>
         </section>
       </form>
 </body>
 <br>
 <hr>
 <Center>
   <footer>
     Pemulungkode
   </footer>
 </Center>
 </html>

File edit_produk.php ini berfungsi untuk mengedit data jika teman-teman salah mengimputkan data.

File tambah_produk.php

<?php
include('config.php'); //agar index terhubung dengan database
?>
<!DOCTYPE html>
<html>
<head>
  <title>CRUD Produk dengan gambar - Gilacoding</title>
  <style type="text/css">
    * {
      font-family: "Trebuchet MS";
    }
    h1 {
      text-transform: uppercase;
      color: #f50834;
    }
    label {
      margin-top: 10px;
      float: left;
      text-align: left;
      width: 100%;
    }
    input {
      padding: 6px;
      width: 100%;
      box-sizing: border-box;
      background: #f8f8f8;
      border: 2px solid #ccc;
      outline-color: #f50834;
    }
    div {
      width: 100%;
      height: auto;
    }
    .base {
      width: 400px;
      height: auto;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
      background: #ededed;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
  <center>
    <h1>Tambah Produk</h1>
    <center>
      <div class="base"><label> <a href="index.php"> Home</a>
        </label></div>
      <form method="POST" action="proses_tambah.php" enctype="multipart/form-data">
        <section class="base">
          <div>
            <label>Nama Produk</label>
            <input type="text" name="nama_produk" autofocus="" required="" />
          </div>
          <div>
            <label>Deskripsi</label>
            <input type="text" name="deskripsi" />
          </div>
          <div>
            <label>Harga Beli</label>
            <input type="text" name="harga_beli" required="" />
          </div>
          <div>
            <label>Gambar Produk</label>
            <input type="file" name="gambar_produk" required="" />
          </div>
          <div>
            <button type="button" class="btn btn-info">Simpan Produk</button>
          </div>
        </section>
      </form>
      <br>
      <hr>
      <footer>Pemulungkode</footer>
</body>
</html>

File tambah_produk.php ini berfungsi untuk menambah data produk.

File proses_edit.php

<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'config.php';
// membuat variabel untuk menampung data dari form
$id = $_POST['id'];
$nama_produk   = $_POST['nama_produk'];
$deskripsi     = $_POST['deskripsi'];
$harga_beli    = $_POST['harga_beli'];
$gambar_produk = $_FILES['gambar_produk']['name'];
//cek dulu jika merubah gambar produk jalankan coding ini
if ($gambar_produk != "") {
  $ekstensi_diperbolehkan = array('png', 'jpg'); //ekstensi file gambar yang bisa diupload 
  $x = explode('.', $gambar_produk); //memisahkan nama file dengan ekstensi yang diupload
  $ekstensi = strtolower(end($x));
  $file_tmp = $_FILES['gambar_produk']['tmp_name'];
  $angka_acak     = rand(1, 999);
  $nama_gambar_baru = $angka_acak . '-' . $gambar_produk; //menggabungkan angka acak dengan nama file sebenarnya
  if (in_array($ekstensi, $ekstensi_diperbolehkan) === true) {
    move_uploaded_file($file_tmp, 'gambar/' . $nama_gambar_baru); //memindah file gambar ke folder gambar
    // jalankan query UPDATE berdasarkan ID yang produknya kita edit
    $query  = "UPDATE produk SET nama_produk = '$nama_produk', deskripsi = '$deskripsi', harga_beli = '$harga_beli', gambar_produk = '$nama_gambar_baru'";
    $query .= "WHERE id = '$id'";
    $result = mysqli_query($koneksi, $query);
    // periska query apakah ada error
    if (!$result) {
      die("Query gagal dijalankan: " . mysqli_errno($koneksi) .
        " - " . mysqli_error($koneksi));
    } else {
      //tampil alert dan akan redirect ke halaman index.php
      //silahkan ganti index.php sesuai halaman yang akan dituju
      echo "<script>alert('Data berhasil diubah.');window.location='index.php';</script>";
    }
  } else {
    //jika file ekstensi tidak jpg dan png maka alert ini yang tampil
    echo "<script>alert('Ekstensi gambar yang boleh hanya jpg atau png.');window.location='tambah_produk.php';</script>";
  }
} else {
  // jalankan query UPDATE berdasarkan ID yang produknya kita edit
  $query  = "UPDATE produk SET nama_produk = '$nama_produk', deskripsi = '$deskripsi', harga_beli = '$harga_beli'";
  $query .= "WHERE id = '$id'";
  $result = mysqli_query($koneksi, $query);
  // periska query apakah ada error
  if (!$result) {
    die("Query gagal dijalankan: " . mysqli_errno($koneksi) .
      " - " . mysqli_error($koneksi));
  } else {
    //tampil alert dan akan redirect ke halaman index.php
    //silahkan ganti index.php sesuai halaman yang akan dituju
    echo "<script>alert('Data berhasil diubah.');window.location='index.php';</script>";
  }
}

File proses_edit.php jika teman-teman sudah melakukan aksen edit maka akan di proses oleh file proses_edit.php jika berhasil akan di simpan ke database, jika gagal maka akan ada pesan error.

File proses_hapus.php

<?php
include 'config.php';
$id = $_GET["id"];
//jalankan query DELETE untuk menghapus data
$query = "DELETE FROM produk WHERE id='$id' ";
$hasil_query = mysqli_query($koneksi, $query);
//periksa query, apakah ada kesalahan
if (!$hasil_query) {
  die("Gagal menghapus data: " . mysqli_errno($koneksi) .
    " - " . mysqli_error($koneksi));
} else {
  echo "<script>alert('Data berhasil dihapus.');window.location='index.php';</script>";
}

File proses_hapus.php bersungsi untuk menghapus data.

File proses_tambah.php

<?php
// memanggil file koneksi.php untuk melakukan koneksi database
include 'config.php';
// membuat variabel untuk menampung data dari form
$nama_produk   = $_POST['nama_produk'];
$deskripsi     = $_POST['deskripsi'];
$harga_beli    = $_POST['harga_beli'];
$gambar_produk = $_FILES['gambar_produk']['name'];
//cek dulu jika ada gambar produk jalankan coding ini
if ($gambar_produk != "") {
  $ekstensi_diperbolehkan = array('png', 'jpg'); //ekstensi file gambar yang bisa diupload 
  $x = explode('.', $gambar_produk); //memisahkan nama file dengan ekstensi yang diupload
  $ekstensi = strtolower(end($x));
  $file_tmp = $_FILES['gambar_produk']['tmp_name'];
  $angka_acak     = rand(1, 999);
  $nama_gambar_baru = $angka_acak . '-' . $gambar_produk; //menggabungkan angka acak dengan nama file sebenarnya
  if (in_array($ekstensi, $ekstensi_diperbolehkan) === true) {
    move_uploaded_file($file_tmp, 'gambar/' . $nama_gambar_baru); //memindah file gambar ke folder gambar
    // jalankan query INSERT untuk menambah data ke database pastikan sesuai urutan (id tidak perlu karena dibikin otomatis)
    $query = "INSERT INTO produk (nama_produk, deskripsi, harga_beli, gambar_produk) VALUES ('$nama_produk', '$deskripsi', '$harga_beli', '$nama_gambar_baru')";
    $result = mysqli_query($koneksi, $query);
    // periska query apakah ada error
    if (!$result) {
      die("Query gagal dijalankan: " . mysqli_errno($koneksi) .
        " - " . mysqli_error($koneksi));
    } else {
      //tampil alert dan akan redirect ke halaman index.php
      //silahkan ganti index.php sesuai halaman yang akan dituju
      echo "<script>alert('Data berhasil ditambah.');window.location='index.php';</script>";
    }
  } else {
    //jika file ekstensi tidak jpg dan png maka alert ini yang tampil
    echo "<script>alert('Ekstensi gambar yang boleh hanya jpg atau png.');window.location='tambah_produk.php';</script>";
  }
} else {
  $query = "INSERT INTO produk (nama_produk, deskripsi, harga_beli, gambar_produk) VALUES ('$nama_produk', '$deskripsi', '$harga_beli', null)";
  $result = mysqli_query($koneksi, $query);
  // periska query apakah ada error
  if (!$result) {
    die("Query gagal dijalankan: " . mysqli_errno($koneksi) .
      " - " . mysqli_error($koneksi));
  } else {
    //tampil alert dan akan redirect ke halaman index.php
    //silahkan ganti index.php sesuai halaman yang akan dituju
    echo "<script>alert('Data berhasil ditambah.');window.location='index.php';</script>";
  }
}

membuat-crud-gambar-dengan-mysqli-php-7

File proses_tambah.php jika teman-teman sudah mengisi form tambah data produk, maka akan diproses oleh file proses_tambah.php.  jika berhasil akan di simpan ke database, jika gagal maka akan ada pesan error.

Sekinan Tutorial Cara Menampilkan Gambar dengan PHP kali ini, Semoga bermanfaat, jika ada pertanyaan jangan sungkan-sungkun untuk corat-coret dalam kolom komentar, dan sekiranya membantu anda jangan lupa untuk berbagi ke temen-temen anda yang sedang membutuhkan, bantu support juga dengan mengklik iklan. Terima kasih. oh iya bagi teman-teman yang ingin file codingan lengkapnya silahkan coment.

 

 Baca Juga Tutorial Membuat Form tanggal dengan datepicker

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *