Cara Bikin Progress Bar Persentase pada Upload File dengan Php, Ajax, dan Mysql

Share:
Cara Bikin Progress Bar Persentase dengan Php, Mysql, dan Ajax
Halo semuanya, kembali lagi di sahretech. Terkadang kita perlu menampilkan progress bar dengan persentase pada saat meng-upload sebuah file, karena terkadang jika kita mengupload sebuah file berukuran besar maka kita harus menunggu terlalu lama tanpa diketahui waktu yang tepat, dan terkadang kita tidak tahu apakah aplikasi masih merespon, terjadi error atau sudah selesai.

Jadi jika kita menambahkan progress bar dengan persentase maka itu lebih user friendly, dengan begitu pengguna dapat melihat berapa banyak waktu yang dibutuhkan dan mengetahui bahwa aplikasi sedang memproses file yang diupload.

Dalam contoh ini saya akan memberi Kalian proses kemajuan pengunggahan file dengan persentase menggunakan jquery, mysql, bootstrap dan php. dalam contoh ini saya menggunakan teknik ajax dalam pengiriman data ke database, sehingga halaman tidak mereload saat proses dikerjakan. Untuk melihat hasil akhirnya kalian bisa scroll ke bagian paling bawah pada artikel ini.


Cara Membuat Progres Upload File dengan Persentase

1. Buatlah sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel baru di dalamnya dengan nama items. Ikuti strukturnya seperti gambar di bawah ini.

Membuat Persentase Progress bar Saat Upload File
Struktur Tabel Items



2. Buatlah sebuah folder baru dengan nama latihan-progress-bar. Lalu buat sebuah file baru dengan nama index.php di dalam folder tersebut. Lalu copy dan paste script di bawah ini.

    

<html lang="en"> <head> <title>Latihan Progress Bar dengan Persentase</title> <!-- bootstrap 5 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="https://malsup.github.io/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> <div class="container"> <h2 class="alert alert-success mt-4">Latihan Progress Bar dengan Persentase</h2> <div class="row"> <div class="col-lg-8"> <div class="text-center"> <div class="card"> <div class="card-body"> <form action="upload.php" enctype="multipart/form-data" class="form-horizontal" method="post"> <div class="progress mb-2" 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" required/> <div class="d-flex justify-content-start"> <button class="btn btn-sm btn-primary upload-image mt-2">Kirim Gambar</button> </div> </form> </div> </div> </div> </div> <div class="col-lg-4"> <div class="card"> <div class="card-body"> <h4 class="text-center">Preview Image</h4> <div class="preview text-center"></div> </div> </div> </div> </div> </d> </html>

3. Buatlah sebuah file baru dengan nama upload.php. Lalu copy dan paste script di bawah ini.

    

<?php define('DB_SERVER', 'localhost'); define('DB_USERNAME', 'root'); define('DB_DATABASE', 'latihan'); //koneksi ke database $db = mysqli_connect(DB_SERVER,DB_USERNAME,'',DB_DATABASE); if(isset($_POST) && !empty($_FILES['image']['name'])){ // mengambil nama file $name = $_FILES['image']['name']; list($txt, $ext) = explode(".", $name); //mengganti nama file menjadi format waktu $image_name = time().".".$ext; //mengambil lokasi file $tmp = $_FILES['image']['tmp_name']; //membuat data array, data array ini adalah jenis ekstensi yang bisa dipreview $allowed = array('gif', 'png', 'jpg', 'JPEG',); if(move_uploaded_file($tmp, 'upload/'.$image_name)){ //menyimpan gambar ke database mysqli_query($db,"INSERT INTO items (title) VALUES ('".$image_name."')"); //jika file yang diupload bukan gambar maka tampilkan tulisan di bawah ini if(!in_array($ext, $allowed)){ echo "File tidak dapat di-preview karena bukan gambar"; }else{ echo "<img width='200px' src='upload/".$image_name."' class='preview'>"; } }else{ echo "Gambar Tidak Bisa Diupload"; } } ?>

4. Jangan lupa membuat sebuah folder baru dengan nama upload di dalam folder latihan-progress-bar. Folder ini berfungsi untuk menampung file yang diupload.

5. Semua step sudah kita lalui, saatnya kita uji coba. Ayo jalankan project ini di browser kalian masing-masing. Jika berhasil maka tampilannya akan tampak seperti di bawah ini.

Cara Membuat Progress Bar dengan Persentase di php
Hasil Akhir



Bagaimana, mudah atau susah guys?. Sekian tutorial cara membuat persentase progress bar pada upload file dengan jquery ajax. Semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tanya langsung di kolom komentar di bawah ini atau tanya langsung di fanspage sahretech.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik