Tutorial PHP Lanjutan Part 34 : Import Data Excel Ke MySQLi Dengan PHP Dan AJAX

Tutorial PHP Lanjutan Part 34 : Import Data Excel Ke MySQLi Dengan PHP Dan AJAX - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih mempelajari Import Data Excel Ke MySQLi Dengan PHP Dan AJAX.

Fungsi import ini sangat berguna sekali bagi kalian yang ingin membuat website karena kalian bisa memasukan data sekali banyak dalam 1 file upload saja. Seperti misalnya kamu sedang membangun website pemilihan osis dan kamu bisa saja sih sebenarnya memasukan data 1 per 1 ke database namun hal itu sangat ribet dengan adanya fitur import data ini sangat membantu anda dalam memasukan data pemilih yang sangat banyak.

Mau tahu cara membuatnya? Yuk simak dibawah ya!

Import Data Excel Ke MySQLi Dengan PHP Dan AJAX

Hal yang paling kita perlukan pada tutorial kali ini adalah sebuah library yang dapat membaca sebuah file EXCEL lalu mengambil data didalamnya, Ya tentu saja kita akan menggunakan Library PhpSpreadsheet's.

Apa Itu PhpSpreadsheet's?

PhpSpreadsheet adalah library yang ditulis dalam PHP murni dan menawarkan serangkaian class yang memungkinkan Anda membaca dan menulis berbagai format file spreadsheet seperti Excel dan LibreOffice Calc.

PhpSpreadsheet's support untuk beberapa format file seperti Open Document Format/OASIS (.ods), Office Open XML (.xlsx) Excel 2007 and above, BIFF 8 (.xls) Excel 97 and above, BIFF 5 (.xls) Excel 95, SpreadsheetML (.xml) Excel 2003, Gnumeric, HTML, SYLK, CSV dan PDF.

Untuk lebih jelasnya silahkan download dan baca disini

Membuat Database

Buatlah database dengan nama “belajarwithib” setelah itu buat juga table didalam database tersebut dengan nama “siswa” lalu buat field didalam table tersebut seperti dibawah ini :

Field Dalam Table:

Id_siswa = int
Siswa_nama = varchar 70
Siswa_kelas = varchar 70
Siswa_alamat = text

Atau kamu dapat mencopy perintah SQL dibawah agar lebih cepat :



-- phpMyAdmin SQL Dump
-- version 5.0.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 27 Jun 2021 pada 15.53
-- Versi server: 10.4.17-MariaDB
-- Versi PHP: 7.3.26

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `belajarwithib`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `siswa`
--

CREATE TABLE `siswa` (
  `id_siswa` int(11) NOT NULL,
  `siswa_nama` varchar(70) NOT NULL,
  `siswa_kelas` varchar(70) NOT NULL,
  `siswa_alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `siswa`
--
ALTER TABLE `siswa`
  ADD PRIMARY KEY (`id_siswa`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `siswa`
--
ALTER TABLE `siswa`
  MODIFY `id_siswa` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Saya rasa kita sudah selesai untuk membuat database sekarang mari kita lanjut ke langkah berikutnya.

Membuat Import Data Excel Ke MySQLi

Pertama kamu harus download dulu library PhpSpreadsheet's nya, setelah itu kamu bisa taruh library nya pada asset atau terserah kalau saya sih biasanya saya taruh didalam file proses, contohnya seperti bawah :

Kedua buat saja file PHP dengan nama “index.php” setelah itu langsung saja save dan ketikan code seperti dibawah ini:



<!doctype html>
  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <title>Import Data Excel Ke MySQLi Dengan PHP Dan AJAX</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="card mt-5">
            <div class="card-header">
              Import Data Excel Ke MySQLi Dengan PHP Dan AJAX
            </div>
            <div class="card-body">
              <div class="row">
                <div class="pesan " id="pesan"></div>
                <div class="sebentar" id="sebentar"></div>
                <form method="post" id="import_excel">

                  <div class="form-group">
                    <label><b>Upload File</b></label>
                    <input type="file" name="import" id="import" class="form-control">
                  </div> 

                  <div id="process" style="display:none;">
                    <div class="progress mt-3">
                      <div class="progress-bar progress-bar-striped" role="progressbar" style=""  aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                  </div>
                  <button class="btn btn-primary btn-form mt-3" id="btn-form" type="submit">Submit</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card mt-5">
            <div class="card-header">
              Semua Data Siswa
            </div>
            <div class="card-body">
              <table class="table table-bordered">
                <tr>
                  <th width="1%">No</th>
                  <th>Nama</th>
                  <th>Kelas</th>
                  <th>Alamat</th>
                </tr>
                <?php 
                // Koneksi Kedatabase
                $koneksi = mysqli_connect("localhost","root","","belajarwithib");
                $no = 1;
                // Mengambil data dari database
                $get_data = mysqli_query($koneksi,"SELECT * FROM siswa");

                // Mengubah data menjadi array
                while ($data = mysqli_fetch_array($get_data)) {
                 ?>
                 <tr>
                  <td><?php echo $no++; ?></td>
                  <td><?php echo $data['siswa_nama']; ?></td>
                  <td><?php echo $data['siswa_kelas']; ?></td>
                  <td><?php echo $data['siswa_alamat']; ?></td>
                </tr>
              <?php } ?>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  <script type="text/javascript">
    $(document).ready(function(){  

      $('#import_excel').on('submit', function(event){  
       event.preventDefault(); 

          // Memulai AJAX 
          $.ajax({  
            url:"import.php",  
            method:"POST",  
            data:new FormData(this),  
            contentType:false,  
            processData:false,
            beforeSend:function(){
              $('#sebentar').html("<div class='alert alert-danger mb-3' role='alert'>Sebentar ya...</div>");
              $('#btn-form').hide();
              $('#process').css('display', 'block');
            },  
            success:function(data){  
             var percentage = 0;

             var timer = setInterval(function(){
               percentage = percentage + 20;
               progress_bar_process(percentage, timer);
             }, 1000);

             console.log(data);
           },

           error:function(data){

            $('#sebentar').html("<div class='alert alert-danger mb-3' role='alert'>Server Error!</div>");

            console.log(data);

          }  
        });  
        });  

      function progress_bar_process(percentage, timer){
       $('.progress-bar').css('width', percentage + '%');
       if(percentage > 100){
        clearInterval(timer);
        $('#import_excel')[0].reset();
        $('#process').css('display', 'none');
        $('.progress-bar').css('width', '0%');
        $('#pesan').html("<div class='alert alert-primary mb-3' role='alert'>Okey, Data pemilih berhasil di input</div>");
        $('#sebentar').html("");
        setTimeout(function(){
         $('#pesan').html('');
         $('#btn-form').show();
       }, 3000);
      }
    }

  });
</script>

</body>
</html>

Oiya saya menggunakan bootstrap untuk tampilan nya agar lebih bagus dan saya juga menambahi effect loading atau progress agar lebih keren.

Setelah itu kalian buat dulu template untuk Import datanya menggunakan EXCEL, ditutorial ini contoh template nya seperti dibawah :

Tapi diatas hanya contoh setelah itu kamu sesuaikan saja sesuai dengan project kamu masing-masing.

Sekarang buatlah file dengan nama “import.php” lalu kamu ketikan saja code seperti dibawah :



<?php
// Memanggil Library
require 'phpexcel/autoload.php';

// Koneksi Ke Database
$koneksi = mysqli_connect("localhost","root","","belajarwithib");

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Reader\Csv;
use PhpOffice\PhpSpreadsheet\Reader\Xlsx;

$file_mimes = array('application/octet-stream', 'application/vnd.ms-excel', 'application/x-csv', 'text/x-csv', 'text/csv', 'application/csv', 'application/excel', 'application/vnd.msexcel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

if(isset($_FILES['import']['name']) && in_array($_FILES['import']['type'], $file_mimes)) {
    var_dump($_FILES['import']['name']);
    // Memisahkan nama file dengan formatnya
    $arr_file = explode('.', $_FILES['import']['name']);
    $extension = end($arr_file);

    // Mengecek format file
    if('csv' == $extension) {
        $reader = new \PhpOffice\PhpSpreadsheet\Reader\Csv();
    } else {
        $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xlsx();
    }

    // Membaca isi file
    $spreadsheet = $reader->load($_FILES['import']['tmp_name']);

    // Mengubah isi file kebentuk array
    $sheetData = $spreadsheet->getActiveSheet()->toArray();

    var_dump($sheetData);
    
    for($i = 1;$i < count($sheetData);$i++){
        $nama = $sheetData[$i]['0'];
        $kelas = $sheetData[$i]['1'];
        $alamat = $sheetData[$i]['2'];
        mysqli_query($koneksi, "INSERT INTO siswa(id_siswa, siswa_nama, siswa_kelas, siswa_alamat) VALUES ('','$nama', '$kelas','$alamat')");
    }
    
}
?>

Penjelasan Singkat

Code dibawah ini berfungsi sebagai untuk memanggil library yang kita butuh kan nantinya.



require 'phpexcel/autoload.php';

use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Reader\Csv;
use PhpOffice\PhpSpreadsheet\Reader\Xlsx;

Sedangkan code dibawah adalah fungsi untuk membuat koneksi kedatabase.



$koneksi = mysqli_connect("localhost","root","","belajarwithib");

Untuk proses upload nya sebenarnya sama seperti upload file namun bedanya kita tidak menyimpan filenya tapi hanya membaca isinya saja.



$arr_file = explode('.', $_FILES['import']['name']);
$extension = end($arr_file);

if('csv' == $extension) {
        $reader = new \PhpOffice\PhpSpreadsheet\Reader\Csv();
} else {
        $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xlsx();
}

Setelah itu systemnya akan mengecek apakah file yang kamu upload itu format CSV atau XLSX.



// Membaca isi file
$spreadsheet = $reader->load($_FILES['import']['tmp_name']);

// Mengubah isi file kebentuk array
$sheetData = $spreadsheet->getActiveSheet()->toArray();

Lalu system akan membaca file yang kita upload lalu system akan mengubah isi filenya kebentuk array.

Untuk mengambil datanya kita menggunakan perulangan for didalam kondisi nya kita menghitung jumlah array didalam file excel tersebut, setelah itu kita mulai dari angka 1 karena jika dimulai dari angka 0 maka ia akan mengambil judul atau baris pertama templatenya sedangkan data yang diperlukan itu ada di baris kedua, jika sudah berhasil langsung saja dimasukkan kedalam database secara berulang.



    for($i = 1;$i < count($sheetData);$i++){
        $nama = $sheetData[$i]['0'];
        $kelas = $sheetData[$i]['1'];
        $alamat = $sheetData[$i]['2'];
        mysqli_query($koneksi, "INSERT INTO siswa(id_siswa, siswa_nama, siswa_kelas, siswa_alamat) VALUES ('','$nama', '$kelas','$alamat')");
    }

Bagaimana melihat data arraynya?

Gampang saja, cukup kamu buka console log atau klik kanan langsung tekan impact element setelah itu hasilnya akan seperti dibawah