Ticker

6/recent/ticker-posts

Header Ads Widget

Upload Image Ajax PHP MySQL

Aguzrybudy November 07, 2019
Assalamualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Halo semuanya apa kabar kalian hari ini?, saya harap kalian semua senantiasa dalam keadaan yang baik-baik saja dan selalu dalam lindungan Allah SWT dimana saja kalian berada. Tutorial yang akan saya bahas kali ini adalah tutorial tentang pemrograman PHP yaitu tentang Upload Image Ajax PHP MySQL


Seperti biasa sebelum masuk pembahasan saya akan membahas rincian dari judul diatas

Upload dapat juga disebut dengan Unggah, Upload merupakan kebalikan dari Download. Pengertian Upload adalah proses mengirim file yang tersimpan dari komputer lokal ke komputer sistem jaringan Internet. Secara umum upload dapat diartikan sebagai proses transmisi data dari pemakai komputer/komputer client ke jaringan internet.

Upload Image adalah mengunggah file atau data berupa gambar dari komputer/ponsel ke sebuah sistem server, dan gambar atau data tersebut akan dipublikasikan di internet, sehingga data yang telah diupload tersebut dapat dilihat, di download (diambil) oleh orang lain.

AJAX adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi web untuk bekerja secara asynchronous (tidak langsung) – memproses setiap request (permintaan) yang datang ke server di sisi background. Penjelasan diatas gunanya untuk membantu Anda sekalian agar bisa lebih paham untuk tutorial mengikuti tutorial ini.

PHP adalah bahasa pemrograman yang sering disisipkan ke dalam HTML. PHP sendiri berasal dari kata Hypertext Preprocessor. Sejarah PHP pada awalnya merupakan kependekan dari Personal Home Page (Situs personal). PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web.

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL atau DBMS yang multialur, multipengguna, dengan sekitar 6 juta instalasi di seluruh dunia, untuk lebih detailnya silahkan lihat disini.

Penjelasan diatas merupkan penjelasan rincian dari judul. Oke langsung saja kita masuk ke tutorial




Langkah Pertama
Untuk mengikuti tutorial ini silahkan Anda download file-file yang dibutuhkan disini

Langkah Kedua
Setelah file-file sudah terdownload buatlah sebuah folder di root server web milik Anda dengan nama yang anda iginkan, disini saya menggunakan nama uploadajax, setelah itu silahkan extract file hasil download ke dalam folder

Langkah Ketiga
Buatlah sebuah file dengan nama index.php, kemudian ketiklah atau copy kode dibawah ini
<!doctype html>
<html lang="en">
<head>
<title>Upload Image Ajax PHP MySQL | Aguzrybudy.com</title>
<meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" name="viewport"/>
<meta content="Aguzrybudy" name="author"/>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="jquery/jquery.form.min.js"></script>
<style>
 .box-preview .card img{
  width: 15rem;
  height: 10rem;
  object-fit: cover;
 }
 .card{
  width: 15rem;
  margin-bottom:2em;
 }
 .container .row{
  background:#f5f5f5;
  padding: 30px;
  margin-top: 30px;
 }
 .btn{
  width:75px;
 }
</style>
</head>
<body>
 
 <div class="container mt-5 mb-5">
   <h2>Upload Image Ajax PHP MySQL</h2>
   <p>Upload Image Ajax PHP MySQL  Tanpa Harus Refresh Halaman By Aguzrybudy, Rabu 06 November 2019</p>
  
  <div class="row">
   <div class="col-lg-6">
    <div style="box-image">
     <form id="form-upload" method="post" enctype="multipart/form-data" action='image_upload.php' autocomplete="off">
      <div class="form-group">
       <label for="fupload" id="label-upload">Upload New Image</label>
       <!-- Untuk mendapatkan id gambar -->
       <input type="hidden" id="image-id" name="image_id" value="0" class="form-control"/>
       <!-- Untuk mendapatkan nama gambar -->
       <input type="hidden" id="image-old" name="image_old" value="" class="form-control"/>
       <!-- Untuk mengupload gambar -->
       <input type="file" name="fupload" id="fupload" class="form-control" />
      </div>
     </form>
    </div>
   </div>
   <div class="col-lg-6">
    <div class="box-preview">
     <div id='preview' class="row" style="margin-top: 0px;padding: 0px;">
      <?php 
        include "koneksi.php";
        $upload=mysqli_query($koneksi,"SELECT * FROM upload_ajax ORDER BY id desc");
        while($r=mysqli_fetch_array($upload)){
      ?>
      
       <div class="col-lg-6">
        <div class="card">
          <img src="uploads/<?php echo $r['image'];?>" class="card-img-top" alt="<?php echo $r['name'];?>">
          <div class="card-body">
         <h5 class="card-title"><?php echo $r['name'];?></h5>
         <a href="JavaScript:void(0)" class="btn btn-primary" data-id="<?php echo $r['id'];?>" data-image="<?php echo $r['image'];?>" data-name="<?php echo $r['name'];?>">Edit</a>
         <a href="JavaScript:void(0)" class="btn btn-danger" data-id="<?php echo $r['id'];?>" data-image="<?php echo $r['image'];?>">Delete</a>
          </div>
        </div>
       </div>
      
      <?php } ?>
     </div> 
    </div>
   </div>
  </div>
 </div>
 
 <script>
 $(document).ready(function() { 
 
  // Untuk upload gambar ketika gambar di pilih
  $('#fupload').on('change', function(){ 
   $("#preview").html('');
   $("#preview").html('<img src="images/preloader.gif" alt="Uploading...."/>');
   $("#form-upload").ajaxForm(
   {
    target: '#preview',
    success:function(response) { 
     console.log(response);
     $("#fupload").replaceWith($("#fupload").val('').clone(true));
    }
   }).submit();
  });
  
  // Untuk edit gambar
  $("body").on("click",".btn-primary", function(e){
   let id = $(this).data('id');
   let image = $(this).data('image');
   let name = $(this).data('name');
   $("#label-upload").text('Edit Gambar ' + name);
   $("#image-id").val(id);
   $("#image-old").val(image);
  });
  
  // Untuk hapus gambar
  $("body").on("click", ".btn-danger", function(e){
   let id = $(this).data('id');
   let image = $(this).data('image');
   $("#form-upload").ajaxForm(
   {
    target: '#preview',
    url:'image_delete.php', 
    data: { image_id: id, image_old: image },
    success:function(response) { 
     console.log(response);
    }
   }).submit();
  });
  
 }); 
 </script>
</body>
</html>


Langkah Keempat
Buatlah sebuah file dengan nama image_upload.php, kemudian ketiklah atau copy kode dibawah ini
<?php
include_once("koneksi.php");
$id=$_POST['image_id']; 
$image_old=$_POST['image_old']; 
$path = "uploads/";
// tipe file yang boleh diupload
$valid_formats = array("jpg", "png", "gif", "jpeg");
// untuk check request method POST
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
 // untuk mendapatkan file gambar yang diupload
 $name = $_FILES['fupload']['name'];
 $size = $_FILES['fupload']['size'];
 if(strlen($name)) 
 {
  list($txt, $ext) = explode(".", $name);
  // check untuk file yang diperbolehkan
  if(in_array($ext,$valid_formats)) 
  {
   // untuk check ukuran file, jika ingin diganti ukuran berdasarkan KB
   if($size<(1024*1024)) 
   {
    $image_name = time().$id.".".$ext;
    $save_name = time()."_image";
    $tmp = $_FILES['fupload']['tmp_name'];
    
    // Jika nilai id lebih besar dari 0 maka data diupdate jika = 0 maka data baru
    if($id > 0)
    {
     if(move_uploaded_file($tmp, $path.$image_name))
     {
      mysqli_query($koneksi,"UPDATE upload_ajax SET name='$save_name', image='$image_name' WHERE id='$id'");
      unlink($path.$image_old);
     }
     else
     {
      echo "Image Upload failed";
     }
    }
    else
    {
     if(move_uploaded_file($tmp, $path.$image_name))
     {
      mysqli_query($koneksi,"INSERT INTO upload_ajax (name,image) VALUES ('$save_name','$image_name')");
     }
     else
     {
      echo "Image Upload failed";
     } 
    }
    
    // untuk  menampilkan data
    $upload=mysqli_query($koneksi,"SELECT * FROM upload_ajax ORDER BY id desc");
    while($r=mysqli_fetch_array($upload))
    {
     echo "
      <div class='col-lg-6'>
        <div class='card'>
          <img src='uploads/".$r['image']."' class='card-img-top' alt='".$r['name']."'>
          <div class='card-body'>
         <h5 class='card-title'>".$r['name']."</h5>
         <a href='JavaScript:void(0)' class='btn btn-primary' data-id='".$r['id']."' data-image='".$r['image']."' data-name='".$r['name']."'>Edit</a>
         <a href='JavaScript:void(0)' class='btn btn-danger' data-id='".$r['id']."' data-image='".$r['image']."'>Delete</a>
          </div>
        </div>
       </div>
     ";
    }
   }
   else
   {
    echo "Image file size max 1 MB";
   }
  }
  else
  {
   echo "Invalid file format..";
  }
 }
 else
 {
  echo "Please select image..!";
  exit;
 }
}
?>

 Langkah Kelima
Buatlah Sebuah file dengan nama image_delete.php,  kemudian ketiklah atau copy kode dibawah ini
<?php
include_once("koneksi.php");
$id=$_POST['image_id']; 
$image_old=$_POST['image_old']; 
$path = "uploads/";
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
 // untuk check file ada tidak di dalam folder kalau ada di hapus
 if(file_exists($path.$image_old))
 {
  unlink($path.$image_old);
 }
 
 // untuk menghapus gambar dari database
 mysqli_query($koneksi, "DELETE FROM upload_ajax WHERE id='$id'");
 
 // untuk menampilkan data
 $data=mysqli_query($koneksi,"SELECT * FROM upload_ajax ORDER BY id desc");
 while($r=mysqli_fetch_array($data))
 {
  echo "
   <div class='col-lg-6'>
     <div class='card'>
       <img src='uploads/".$r['image']."' class='card-img-top' alt='".$r['name']."'>
       <div class='card-body'>
      <h5 class='card-title'>".$r['name']."</h5>
      <a href='JavaScript:void(0)' class='btn btn-primary' data-id='".$r['id']."' data-image='".$r['image']."'>Edit</a>
      <a href='JavaScript:void(0)' class='btn btn-danger' data-id='".$r['id']."' data-image='".$r['image']."'>Delete</a>
       </div>
     </div>
    </div>
  ";
 }
}
?>




 Langkah Keenam
Buatlah sebuah database dengan nama yang anda inginkan, disini saya menggunakan nama dbphp7, kemudian buatlah struktur tabel seperti query dibawah ini
DROP TABLE IF EXISTS `upload_ajax`;
CREATE TABLE `upload_ajax`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `image` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 14 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

Langkah Ketujuh
Buatlah sebuah file dengan nama koneksi.php, kemudian ketiklah atau copy kode dibawah ini
<?php
 $host="localhost";
 $user="root";
 $pass="";
 $database="dbphp7";
 $koneksi=new mysqli($host,$user,$pass,$database);
 if (mysqli_connect_errno()) {
   trigger_error('Koneksi ke database gagal: '  . mysqli_connect_error(), E_USER_ERROR); 
 }
?>

Langkah Kedelapan
Silahkan Anda jalankan program yang telah anda buat, jika berhasil Anda akan melihat hasil seperti gambar dibawah ini



NB: Code diatas saya tulis menggunakan PHP7 & Bootstrap 4

Jika Anda menginginkan kode dari program diatas silahkan download pada link dibawah ini





Sekian dulu tutorial dari saya, semoga tutorial ini bermanfaat bagi anda dan jika bermanfaat jangan lupa di share, atas segala kekuranganya mohon dimaafkan, jika ada yang ingin ditanyakan silahkan tinggalkan komentar.

Tags:

Post a Comment

1 Comments

  1. Unknown1 September 2020 at 01:18:00 GMT+7

    Top wax

    Thanks for the selection. Some of the above were viewed more than once. Still sometimes I look through mnews.agency/blog. Of the pros, you can highlight: video tool reviews, cool cases, a step-by-step guide to certain tools

    ReplyDelete

Berkomentarlah dengan baik dan sopan

Rekomendasi Untuk Anda × − +