Contoh script tentang progress bar sebelumnya pernah dibahas pada artikel yang berjudul Membuat Progress Upload di CodeIgniter Dengan Ajax & Bootstrap 3, perbedaan dengan artikel sebelumnya dengan artikel ini adalah terletak pada dasar proses perhitungan persentase load progress bar, dimana pada artikel Membuat Progress Upload di CodeIgniter Dengan Ajax & Bootstrap 3 yang menjadi dasarnya adalah ukuran file yang terupload ke server sedangkan pada contoh kali ini adalah jumlah baris file MS Excel yang berhasil dibaca oleh script php untuk kemudian disimpan ke database. Pada contoh kali ini akan diterapkan proses pembuata progress bar untuk membaca progress import MS Excel ke MySQL menggunakan PHP native.
Untuk membuat script ini membutuhkan library tambahan yaitu :
- Bootstrap untuk membuat komponen progress bar
- php excel reader 2 untuk membaca file excel yang diupload
Sebagai gambaran perhatikan video demo script berikut :
Bagaimana membuatnya ? berikut langkah-langkahnya
- Download bootstrap
- download php_excel_reader2
- Buat database dengan nama db_pegawai
- Buat tabel dengan nama tbl_pegawai dengan struktur seperti berikut :
- Buat Template file excel dengan extension file *.xls (bukan *.xlsx) dengan kolom seperti berikut :
- Buat folder ProgressImportExcel di c:\xampp\htdocs atau di root directory web server anda
- Buat file index.php ketik script berikut :
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=width-device,initial-scale=1"> <link rel="stylesheet" href="assets/css/bootstrap.css"/> <title>Import Data</title> </head> <body> <nav class="navbar navbar-expand-sm bg-primary navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">Import Data</a> </li> </ul> </nav> <div class="container mt-3"> <form name="myForm" method="post" enctype="multipart/form-data"> <div class="form-group"> <label>Pilih File</label> <input type="file" id="fileData" name="fileData" class="form-control"/> </div> <div class="form-group"> <div class="progress" style="height:30px"> <div class="progress-bar progress-bar-striped progress-bar-animated" id="progress-bar" style="height:30px;padding:0px"> <span id="progess-info"></span> </div> </div> </div> <div class="form-group"> <button type="submit" name="submit" class="btn btn-primary">Import</button> <br/> </div> </form><?php$koneksi=mysqli_connect('localhost', 'root', '','db_pegawai');require "assets/excel_reader2.php";if(isset($_POST['submit'])){ $target = basename($_FILES['fileData']['name']) ; move_uploaded_file($_FILES['fileData']['tmp_name'], $target); $data = new Spreadsheet_Excel_Reader($_FILES['fileData']['name'],false); $baris = $data->rowcount($sheet_index=0); for ($i=2; $i<=$baris; $i++) { $barisXls = $baris-1; $k = $i-1; $percent = intval($k/$barisXls * 100)."%"; // mengupdate progress bar echo '<script language="javascript"> document.getElementById("progress-bar").style.width="'.$percent.'"; document.getElementById("progess-info").innerHTML="'.($i-1).' record ('.$percent.')"; </script>'; // membaca data excel (mulai kolom ke-1) $noInduk = $data->val($i, 1); $namaPegawai = addslashes($data->val($i, 2)); $jenisKelamin = $data->val($i, 3); $tempatLahir = $data->val($i, 4); $tanggalLahir = $data->val($i, 5); $noHandphone = $data->val($i, 6); // masukkan ke tabel mahasiswa mysqli_query($koneksi,"INSERT into tbl_pegawai (NoInduk, NamaPegawai, JenisKelamin, TempatLahir, TanggalLahir, NoHandphone) values('$noInduk','$namaPegawai','$jenisKelamin','$tempatLahir','$tanggalLahir','$noHandphone')") or die(mysqli_error($koneksi)); flush(); // gunakan fungsi usleep 0,25 detik (25000 milisecond) untuk membuat jeda usleep(25000); } // hapus file xls yang udah diupload dan dibaca unlink($_FILES['fileData']['name']);}?> </div> </body></html> - Lakukan percobaan dengan menjalankan aplikasi dengan mengakases http://localhost/ProgressImportExcel, lakukan proses upload file excel versi 97 bukan versi 2003 ke atas !
- Sebagai bahan perbandingan untuk latihan silahkan DOWNLOAD scriptnya
Post a Comment