Export Data Dari Table Dengan Menggunakan Javascript
kalau kemarin saya share cara export table di html dengan menggunakan PHP, kali ini saya akan share tutorial cara export table di html dengan menggunakan javascript, dalam tutorial ini saya hanya menggunakan sintak dasar dari javascript dan tidak menggunakan plugin, dan hasil output format excelnya adalah format excel 2003
seperti dalam tutorial sebelum - sebelumnya buatlah projek dengan nama terserah anda setelah itu buat database dengan nama terserah anda juga kemudian salin kode sql berikut dan jalankan di sql
DROP TABLE IF EXISTS `users`;setelah table dan datanya sudah masuk ke database yang anda buat, kemudian buat koneksi ke database dangan menggunakan php, silahkan salin kode berikut dan simpan file didalam projek yang sudah anda buat tadi dengan dengan nama koneksi.php
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(50) DEFAULT NULL,
`alamat` text,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES ('1', 'Rohmat', 'Jlan. Pantura ciasem tengah');
INSERT INTO `users` VALUES ('2', 'Mimin', 'Jlan. Krajan timur');
INSERT INTO `users` VALUES ('3', 'Maman', 'Jlan. Krajan barat');
INSERT INTO `users` VALUES ('4', 'Roni', 'Jlan. Mekar sari indah ');
INSERT INTO `users` VALUES ('5', 'Rachmat Hidayat', 'Jlan. Garuda 1');
INSERT INTO `users` VALUES ('6', 'Terzo', 'Jlan. Garuda 2');
INSERT INTO `users` VALUES ('7', 'carlos', 'Jlan. Garuda 3');
INSERT INTO `users` VALUES ('8', 'Dwi Susanti Mustari', 'Jlan. Garuda 4');
INSERT INTO `users` VALUES ('9', 'Desmond Satria Andrian', 'Jlan. Garuda 5');
INSERT INTO `users` VALUES ('10', 'Ka Ar', 'Jlan. Garuda 6');
INSERT INTO `users` VALUES ('11', 'Ka Keke', 'Jlan. Garuda 7');
INSERT INTO `users` VALUES ('12', 'Ka Deri', 'Jlan. Garuda 8');
INSERT INTO `users` VALUES ('13', 'Ka Rendy', 'Jlan. Garuda 9');
INSERT INTO `users` VALUES ('14', 'Ka Yanti', 'Jlan. Garuda 10');
INSERT INTO `users` VALUES ('15', 'Ka Nury', 'Jlan. Garuda 11');
INSERT INTO `users` VALUES ('16', 'Salma', 'Jlan. Garuda 12');
INSERT INTO `users` VALUES ('17', 'Terryn', 'Jlan. Garuda 13');
INSERT INTO `users` VALUES ('18', 'Hafiz', 'Jlan. Garuda 14');
INSERT INTO `users` VALUES ('19', 'Felicia', 'Jlan. Garuda 15');
<?phpganti user, pass, dan db sesuai dengan user, password dan db anda.
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'jsexcel';
$conn = mysql_connect($host, $user, $pass);
mysql_select_db($db, $conn);
dan yang terakhir, salin kode dibawah ini dan simpan file didalam projek yang sudah anda buat dengan nama index.php
<!DOCTYPE html>sekarang coba jalankan projek yang sudah anda buat, dan anda akan mendapatkan tampilan seperti ini
<html>
<head>
<title>EXPORT TABLE KE EXCEL DENGAN JAVASCRIPT</title>
<script type="text/javascript">
window.onload = function () {
var table = document.getElementById('data-table'),
download = document.getElementById('download');
download.addEventListener('click', function () {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent(table.outerHTML));
});
}
</script>
</head>
<body>
<a href="#" id="download">download file excel</a>
<table border="1" id="data-table">
<thead>
<tr>
<th>NAMA</th>
<th>ALAMAT</th>
</tr>
</thead>
<tbody>
<?php
// memanggil koneksi
require_once __DIR__.'/koneksi.php';
// menampilkan data users
$sql = 'SELECT * FROM users';
$rs = mysql_query($sql) or die ($sql);
while ($row = mysql_fetch_array($rs)) {
$nama = $row['nama'];
$alamat = $row['alamat'];
?>
<tr>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</body>
</html>
ketika download file excel di klik maka anda akan mendapatkan file excel seperti ini
Ok. sampai di sini dulu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat.
DONASI VIA PAYPAL
Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru
Postingan Lebih Baru
Postingan Lama
Postingan Lama
Komentar