Tutorial ini adalah kelanjutan dari Import Data Excel Dengan Codeigniter 4 jika belum silahkan ikuti terlebih dahulu,agar tidak bingung.
Disini kita hanya akan menggubah bagian Controller Home dan View.
Mengubah Controller Home
Yang tadinya hanya ada dua fungsi kita rubah menjadi 3 yaitu:
- index untuk menampilkan view.
- prosesExcel untuk membaca file excel dan menyimpan ke tabel.
- loadData untuk mengambil data dari tabel.
Langsung saja rubah controller Home menjadi seperti kode dibawah ini.
<?php namespace App\Controllers;
use PHPExcel;
use PHPExcel_IOFactory;
use App\Models\ContactModel;
class Home extends BaseController
{
public function __construct(){
$this->contact = new ContactModel();
}
public function index(){
echo view('index');
}
public function prosesExcel()
{
$status = false;
$file = $this->request->getFile('fileexcel');
if($file){
$excelReader = new PHPExcel();
//lokasi file
$fileLocation = $file->getTempName();
//baca file
$objPHPExcel = PHPExcel_IOFactory::load($fileLocation);
//ambil sheet active
$sheet = $objPHPExcel->getActiveSheet()->toArray(null,true,true,true);
//looping untuk mengambil data
foreach ($sheet as $idx => $data) {
//skip index 1 karena title excel
if($idx==1){
continue;
}
$nama = $data['A'];
$hp = $data['B'];
$email = $data['C'];
// insert data
$this->contact->insert([
'nama'=>$nama,
'handphone'=>$hp,
'email'=>$email
]);
}
$status =true;
}
echo json_encode([
'status'=>$status
]);
}
public function loadData(){
$contact = $this->contact->findAll();
echo json_encode($contact);
}
}
Mengubah View
Kita menggunakan plugin tambahan jquery untuk memanggil ajax.Ubah kode view index.php menjadi seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Import Excel Codeigniter</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<form method="post" id="formExcel" enctype="multipart/form-data">
<div class="form-group">
<label>File Excel</label>
<input type="file" name="fileexcel" class="form-control" id="file" required accept=".xls, .xlsx" /></p>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Upload</button>
</div>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>Nama</th>
<th>Handphone</th>
<th>Email</th>
</tr>
</thead>
<tbody id="contactTable">
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script type="text/javascript">
//upload data
$("#formExcel").on('submit',function(e){
e.preventDefault();
$.ajax({
url:"/home/prosesExcel",
method:"POST",
data:new FormData(this),
processData:false,
contentType:false,
cache:false,
success:function(data){
console.log(data);
loadData();
}
})
})
loadData();
//ambil data
function loadData(){
$.ajax({
url:"/home/loadData",
success:function(val){
val = JSON.parse(val);
$.each(val,function(idx,data){
$("#contactTable").append(`<tr>
<td>${data.nama}</td>
<td>${data.handphone}</td>
<td>${data.email}</td>
</tr>
`);
})
}
})
}
</script>
</body>
</html>Fungsi loadData di javascript digunakan untuk mengambil data dari controller menggunakan ajax dan ditampilan ke tabel.
Perintah untuk upload juga kita ganti menggunakan ajax.Fungsi e.preventDefault digunakan untuk mencegah form disubmit ,kemudian digantikan oleh fungsi ajax yang kita buat.Setiap fungsi ajax untuk mengupload berhasil dijalankan,fungsi loadData dipanggil kembali untuk meload data baru ke tabel.
Sekian tutorial kali ini,jika ada yang kurang jelas bisa ditanyakan dibawah.Kalau diatas susah gak ada kolom komentar.