Skip to main content

Membuat Upload File dengan Progress bar (PHP, MySQL, AJAX, Bootstrap)

Membuat Upload File dengan Progress bar (PHP, MySQL, AJAX, Bootstrap). Hai sobat mediakunci, kali ini saya akan membuat sebuah tutorial tentang cara membuat Upload file dengan progress bar, tentu saja menggunakan PHP untuk bahasa pemrogramannya, MySQL sebagai databasenya, AJAX untuk menghandle progress barnya, dan Bootstrap untuk interfacenya biar cantik… ðŸ™‚
Langsung saja kita masuk ke dalam tutorialnya, bagaimana untuk membuat Upload File dengan Progress bar ini. Ikuti dengan seksama ya sob, kalau tidak bisa silahkan kontak saya aja (text only ya sob).
Nanti kita akan membuat file berikut ini sob:
  • index.php (untuk tampilan awal, form dan progress bar)
  • config.php (koneksi ke database)
  • upload.php (proses upload file, menyimpan data ke database)
  • upload.js (untuk handle progress bar)

Download Bootstrap

Pertama karena ini menggunakan Bootstrap untuk interfacenya, maka silahkan download dulu Bootstrap di webseite resminya, atau bisa klik disini. Saya masih menggunakan yang versi 3 ya.
Nah, selesai di download maka sobat akan mendapatkan file bootstrap-3.3.7-dist.zip. Silahkan di ekstrak menggunakan winrar/winzip atau sejenisnya, maka sobat akan mendapatkan 3 folder utama, yaitu css, font, dan js.
Masukkan 3 folder tersebut kedalam folder misal dengan nama upload-progressbar, dan masukkan di folder htdocs pada web server localnya (C:\xampp\htdocs\upload-progressbar), nah jika sudah maka kita lanjutkan ke tahap selanjutnya.

Membuat Database dan Table

Untuk membuat database silahkan masuk ke alamat localhost/phpmyadmin, kemudian buat database baru dengan nama mediakunci_upload_progressbar, jika sudah masuk ke menu SQL, dan copy paste kode di bawah ini:
CREATE TABLE `files` (
  `id` int(11) NOT NULL,
  `tgl_upload` date NOT NULL,
  `file_name` varchar(50) NOT NULL,
  `file_size` int(20) NOT NULL,
  `file_type` varchar(5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
sobat akan mendapatkan sebuah tabel dengan nama files.
Untuk database saya rasa cukup, dan kita lanjutkan ke tahap selanjutnya.

Membuat koneksi ke database

Mudah saja sob, silahkan copy paste kode di bawah ini ya, dan simpan dengan nama config.php
<?php
error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));
session_start();
 
//melakukan koneksi ke database
$conn = new mysqli("localhost", "root", "", "mediakunci_upload_progressbar");
if ($conn->connect_errno) {
    echo die("Failed to connect to MySQL: " . $conn->connect_error);
}
?>
Silahkan ganti koneksinya sesuai dengan server sobat sendiri ya.

Membuat Halaman index.php (form upload & progress bar)

Untuk halaman index.php tidak banyak yang bisa dijelaskan, silahkan copy paste kode di bawah ini, kemudian simpan dengan nama index.php
<!DOCTYPE html>
<html lang="en">
<head>
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Upload file progress bar dengan PHP dan MySQL. Tutorial oleh mediakunci">
    <meta name="author" content="fatoni arif">
 
    <title>Simple Upload File dengan PHP, MySQL dan Bootstrap</title>
 
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
 
</head>
 
<body>
 
 <div class="container" style="margin-top:200px;">
  <div class="well text-center">
   <h1>Upload file dengan cepat!</h1>
   <hr>
   <div class="col-md-8 col-md-offset-2">
    <form class="form-inline" method="post" action="">
     <div class="input-group">
      <label class="input-group-btn">
       <span class="btn btn-danger btn-lg">
        Browse&hellip; <input type="file" id="media" name="media" style="display: none;" required>
       </span>
      </label>
      <input type="text" class="form-control input-lg" size="40" readonly required>
     </div>
     <div class="input-group">
      <input type="submit" class="btn btn-lg btn-primary" value="Start upload">
     </div>
    </form>
    <br>
    <div class="progress" style="display:none">
     <div id="progressBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
      <span class="sr-only">0%</span>
     </div>
    </div>
    <div class="msg alert alert-info text-left" style="display:none"></div>
   </div>
   <div class="clearfix"></div>
  </div>
 </div>
 
 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>
    <script src="js/upload.js"></script>
    <script>
 $(function() {
   $(document).on('change', ':file', function() {
  var input = $(this),
   numFiles = input.get(0).files ? input.get(0).files.length : 1,
   label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
   });
 
   $(document).ready( function() {
    $(':file').on('fileselect', function(event, numFiles, label) {
 
     var input = $(this).parents('.input-group').find(':text'),
      log = numFiles > 1 ? numFiles + ' files selected' : label;
 
     if( input.length ) {
      input.val(log);
     } else {
      if( log ) alert(log);
     }
 
    });
   });
   
 });
 </script>
</body>
</html>
Penjelasan kode menyusul ya sob. ðŸ™‚

Membuat file upload.php

Oke sob, file upload.php ini gunanya untuk menghandle proses upload mulai dari menyimpan data ke database sampai menyalin file tersebut ke folder files. Dan berikut ini kodenya;
<?php
//memasukkan file config.php
include("config.php");
 
//mendefinisikan folder upload
define("UPLOAD_DIR", "files/");
 
if (!empty($_FILES["media"])) {
 $media = $_FILES["media"];
 $ext = pathinfo($_FILES["media"]["name"], PATHINFO_EXTENSION);
 $size = $_FILES["media"]["size"];
 $tgl = date("Y-m-d");
 
 if ($media["error"] !== UPLOAD_ERR_OK) {
  echo '<div class="alert alert-warning">Gagal upload file.</div>';
  exit;
 }
 
 // filename yang aman
 $name = preg_replace("/[^A-Z0-9._-]/i", "_", $media["name"]);
 
 // mencegah overwrite filename
 $i = 0;
 $parts = pathinfo($name);
 while (file_exists(UPLOAD_DIR . $name)) {
  $i++;
  $name = $parts["filename"] . "-" . $i . "." . $parts["extension"];
 }
 
 $success = move_uploaded_file($media["tmp_name"], UPLOAD_DIR . $name);
 if ($success) { 
  $in = $conn->query("INSERT INTO files(tgl_upload, file_name, file_size, file_type) VALUES('$tgl', '$name', '$size', '$ext')");
  $q = $conn->query("SELECT id FROM files ORDER BY id DESC LIMIT 1");
  $rq = $q->fetch_assoc();
  echo $rq['id'];
  exit;
 }
 chmod(UPLOAD_DIR . $name, 0644);
}
?>
simpannya di folder js ya sob, beri nama upload.js
Sudah deh selesai. sekarang bisa sobat coba sendiri di rumah.
Kalau sobat bingung gak bisa-bisa, silahkan komen. Nanti akan saya kasih pencerahan, hehehhe.. ðŸ™‚
Labels:

Comments

Post a Comment

Popular posts from this blog

Membuat Tombol Scroll ke Atas (back to top) dengan JQuery

Cara membuat tombol scroll ke atas dengan jquery (back to top) – Sebuah website yang begitu panjang kebawah tentu akan menyulitkan penggunanya untuk bisa kembali lagi keatas, karena harus scroll terus dengan menggunakan mouse. Hal tersebut tentu kurang efektif. Untuk mengatasi hal tersebut, banyak orang menggunakan sebuah tombol yang ketika di klik akan membawa kita ke bagian atas halaman website dengan animasi yang menarik. Dibutuhkan jquery untuk membuat hal semacam itu, dan pada tutorial kali ini  Media Kunci  akan mengajarkan Anda cara membuatnya. Mudah kok, script nya juga tidak panjang. 1.  HTML:  Buat sebuah file html dan tuliskan script markup nya seperti berikut ini <div id="wrapper"> <h1>Membuat Tombol Scroll to Top Dengan Jquery</h1> <h5><a href="https://mediakunci.blogspot.com/2019/04/membuat-tombol-scroll-ke-atas-back-to.html">Baca tutorial di Media Kunci</a></h5> Konten yang panjang disini....
Post a Comment
Read more

Insert Data ke Database Tanpa Loading dengan PHP dan jQuery

Insert Data ke Database Tanpa Loading dengan PHP dan jQuery. Tutorial pertama tentang jQuery ini akan saya mulai dari yang sederhana aja dulu yaitu cara Insert Data ke Database Tanpa Loading dengan PHP dan jQuery. Baca juga :  Menampilkan Data dari Database MySQL Tanpa Loading Dengan jQuery Sebelumnya silahkan download dahulu jQuery di website resminya  disini . Selanjutnya buat sebuah database, dalam hal ini saya membuat database dengan nama  terserah . Kemudian dumping Script SQL di bawah ini: CREATE TABLE `siswa` ( `nama` varchar(32) NOT NULL, `kelas` varchar(3) NOT NULL, `jurusan` varchar(20) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8; Dari Script SQL di atas anda akan mendapatkan sebuah table dengan nama  siswa  dengan tiga buah field yaitu nama, kelas, jurusan. Jika sudah kita akan membuat Form HTML, dan berikut ini kodenya: <html> <head> <title>Insert Data ke Database Dengan jQuery</title> </head> <body> <form id=&q
Post a Comment
Read more

Belajar PHP (Membuat Halaman Komentar)

Fasilitas komentar pada sebuah website akan menjadikan situs kita rancang menjadi lebih hidup karena dapat mengajak pengunjung untuk berinteraksi secara langsung. Umumnya fasilitas komentar dapat kita jumpai hampir disetiap website, blog atau bahkan forum seperti ini untuk mendapatkan umpan balik baik itu masukan, kritikan, pertanyaan atau bahkan pujian dari pengunjung website. Konsep pembuatan komentar ternyata cukup sederhana, asalkan paham sedikit mengenai PHP dan MYSQL, Insya Allah kamu dapat memahami bagaimana cara kerjanya. Berikut ini saya akan mencoba menulis bagaimana membuat fasilitas halaman komentar sederhana Masuk ke MYSQL buat database dan tabel dalam contoh ini databasenya adalah komentar sedangkan tabelnya adalah data. mysql> use komentar; Database changed mysql> mysql> use komentar; Database changed mysql> create table data( -> id INT NOT NULL  AUTO_INCREMENT PRIMARY KEY, -> nama VARCHAR(50) NOT NULL, -> email VARCHAR(50) NOT NULL, -> isi TEXT
Post a Comment
Read more