Membuat Laporan Excel dengan PHP dan jQuery

Tutorial - 21 Jan 2014

Salah satu laporan yang sering dibutuhkan dalam aplikasi ialah laporan dalam bentuk file excel. Laporan ini biasanya dibuat dengan maksud agar pengguna aplikasi dapat menambah ataupun mengubah data yang ada sesuai kebutuhan di file excel tersebut secara langsung.

Pada tutorial berikut, akan dibahas bagaimana membuat laporan excel dengan PHP dan jQuery (fasilitas export data). Untuk detilnya silahkan download atau lihat demo dibawah.

Langkah 1

Terlebih dahulu, buatlah sebuah file untuk menampilkan data dari database MySQL. Pastikan data yang ditampilkan dalam bentuk tabel. Misal seperti berikut.

index.php

<table id="tabelExport">
<thead>
<tr>
<th width="7%">No.</th>
<th width="30%">Nama</th>
<th width="40%">Kota Asal</th>
<th width="23%">No. Hp</th>
</tr>
</thead>

<tbody>
<?php 
$i = 1;
$query = mysql_query("SELECT * FROM karyawan ");
while($fetch = mysql_fetch_array($query)) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $fetch['nama_karyawan']; ?></td>
<td><?php echo $fetch['kota_asal']; ?></td>
<td><?php echo $fetch['hp']; ?></td>
</tr>
<?php 
$i++; 
} ?>
</tbody>
</table>

<button id="tombolExport">Export Excel</button>

Keterangan :
Berilah id pada tabel dan tombol yang telah dibuat. Pada contoh diatas id tabel tabelExport dan id tombol tombolExport.

Langkah 2

Sisipkan plugin jQuery beserta plugin ExcelExport ke dalam dokumen file diatas.

<script src="js/jquery-2.0.1.min.js"></script>
<script src="js/jquery.base64.js"></script>
<script src="js/jquery.btechco.excelexport.js"></script>

Selanjutnya, kita harus memberikan instruksi pada tombol yaitu apabila diklik maka lakukan export data tabel ke file excel. Berikut perintahnya :

$(document).ready(function () {
     $("#tombolExport").click(function () { // Jika tombol export diklik
          $("#tabelExport").btechco_excelexport({ // Definisikan tabel yang akan di export
               containerid: "tabelExport" 
               , datatype: $datatype.Table
          });
     });
});

Silahkan jalankan kode Anda dan download file excel yang telah di-export. Selamat mencoba.



  • mas aku buat sama persis seperti diatas kok tidak bisa ya mas ? setiap klik export tidak bisa muncul dan download ? bagaimana cara mengatasinya mas, saya masih pakai Bootstrap v2.3.2

    • Pastikan versi jQuery yg digunakan sesuai dgn plugin export excel mas, cba di cek jquery-nya..

      • sudah mas, tapi masih lom bisa juga. sebelum menampilkan laporan saya pakai pengkodisian dulu mas dimana hanya melakukan export berdasarkan data tertentu ?

        jadi bagaimana ya mas solusinya

        • apakah tanpa peng-kondisian fitur export jln ?
          jika jln, brrti kode kondisi mas ada yg blm benar..

  • Raipansyah

    cara mengatur nama file excel yang didownloadnya gimana gan? biar sesuai dengan keinginan bukan kode acak gitu namanya gan.