Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat ProgressBar Pada Upload Gambar Di Php

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Pada postingan ini saya akan membahas tips cara membuat progressbar pada upload gambar di php, sebelum ketutorialnya ada baiknya kalau kita mengetahui terlebih dahulu apa itu maskud dan fungsi dari progressbar?.


ProgressBar digunakan untuk menginformasikan user bahwa ada suatu proses yang masih sedang berlangsung. Sekarang ini, ada dua macam progress bar, yaitu determinate progress bar yang menampilkan perkembangan proses (biasanya proporsional dan dinyatakan dalam persentase), dan indeterminate progress bar yang biasa digunakan untuk suatu proses yang tidak bisa (atau tidak efisien) dihitung persentasi perkembangannya. Yang jelas, kedua macam progress bar ini bertugas untuk menampilkan indikator perkembangan proses agar user tidak menganggap aplikasi tersebut berhenti di tengah jalan.

Pada tutorial ini kita akan menggunakan determinate progress bar, Oke langsung saja

Langkah Pertama
Donwload semua plugins yang diperlukan disini, didalamnya sudah ada folder uplod, jquery, bootstrap, dan jquery.form.

Langkah Kedua
Buatalah datasbase dengan nama terserah sama sobat, pada tutorial ini saya menggunakan database dengan nama dbphp7, kemudian buatlah tabel dengan nama progress, seperti struktur tabel dibawah ini.

CREATE TABLE `progress` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `image` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

Langkah Ketiga
Extractlah hasil download library diatas kedalam folder root aplikasi sobat, kalau sobat menggunakan xampp berada di xampp > htdocs > nama folder (terserah sama sobat), setelah itu buatlah file dengan nama index.php, kemudian ketiklah kode dibawah ini

<html lang="id">
<head>
<title>File upload progress bar with percentage using form jquery example</title>
<link rel="stylesheet" href="bootstrap.css" >
<script src="jquery.js"></script> 
<script src="bootstrap.js"></script> 
<script src="jquery.form.js"></script> 
<script> 

$(document).ready(function() { 
    var progressbar     = $('.progress-bar');
    $(".upload-image").click(function(){
        $(".form-horizontal").ajaxForm({
     target: '.preview',
     beforeSend: function() {
    $(".progress").css("display","block");
     progressbar.width('0%');
     progressbar.text('0%');
                },
      uploadProgress: function (event, position, total, percentComplete) {
       progressbar.width(percentComplete + '%');
       progressbar.text(percentComplete + '%');
   },
  }).submit();
    });
}); 
</script>
</head>
<body>

 <nav class="navbar navbar-default">
  <div class="container-fluid text-center">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">Aguzrybudy.com</a>
   </div>
  </div>
 </nav>

 <div class="container text-center">
  <h2>Upload Gambar Dengan Progressbar</h2>
  <div style="border: 1px solid #ddd;text-align: center;width: 500px;padding:30px;margin:0px auto">

   <form action="uploadpro.php" enctype="multipart/form-data" class="form-horizontal" method="post">
    <div class="preview" style="margin-bottom:20px;"></div>
    <div class="progress" style="display:none">
     <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%"> 0% </div>
    </div>
    <input type="file" name="image" class="form-control" />
    <button class="btn btn-primary upload-image" style="margin-top:20px;">Upload Image</button>
   </form>

  </div>
 </div>
</body>
</html>

Langkah Keempat
Buatlah file dengan nama uploadpro.php, kemudian ketiklah kode dibawah ini.

<?php
 define('DB_SERVER', 'localhost');
 define('DB_USERNAME', 'root'); //sesuaikan dengan milik sobat
 define('DB_PASSWORD', ''); //sesuaikan dengan milik sobat
 define('DB_DATABASE', 'dbphp7'); //sesuaikan dengan milik sobat
 $db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
 if(isset($_POST) && !empty($_FILES['image']['name'])){
  $name = $_FILES['image']['name'];
  list($txt, $ext) = explode(".", $name);
  $image_name = time().".".$ext;
  $tmp = $_FILES['image']['tmp_name'];
  if(move_uploaded_file($tmp, 'upload/'.$image_name)){
   mysqli_query($db,"INSERT INTO progress (image)
   VALUES ('".$image_name."')");
                         //hilangkan tanda double slash pada script dibawah jika ingin melihat hasil upload
   //echo "<img width='200px' src='upload/".$image_name."' class='preview'>";
  }else{
   echo "image uploading failed";
  }
 }
?>

Langkah Kelima
Selanjutnya eksekusi atau jalankanlah script diatas dengan mengetikan url http://localhost/uploadprogess (sesuai dengan url yang sobat miliki), maka hasilny akan terlihat seperti gambar dibawah ini.



Kalau sobat membutuhkan source tersebut silahkan download melalui lin dibawah ini, jika ada kesalahan atau error bisa disampaikan melalui kolom komentar. Semoga tutorial tips ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan.

Post a Comment

0 Comments

Rekomendasi Untuk Anda × +