Google spreadsheet adalah salah satu layanan milik google yang fungsinya mirip dengan microsoft excel. Yaitu sebagai aplikasi pendataan. Karena mirip dengan excel, pengguna baru tidak perlu beradaptasi terlalu lama dengan aplikasi ini. Tapi pada kesempatan kali ini saya tidak akan membahas fitur atau persamaan dari kedua aplikasi tersebut.
Pada tutorial kali ini, kita akan menggunakan spreadsheet sebagai database layakanya mysql. Wah keren kan?. Jadi data yang ada di dalamnya dapat kita tarik dan ditampilkan pada project yang akan kita buat.
Project yang akan kita buat kali ini adalah membuat halaman yang menampilkan tabel user berisi nama, alamat, tempat lahir, tanggal lahir, dan jabatan dengan menggunakan bahasa php dan dipoles dengan menggunakan bootstrap.
Pada tutorial kali ini, kita akan menggunakan spreadsheet sebagai database layakanya mysql. Wah keren kan?. Jadi data yang ada di dalamnya dapat kita tarik dan ditampilkan pada project yang akan kita buat.
Project yang akan kita buat kali ini adalah membuat halaman yang menampilkan tabel user berisi nama, alamat, tempat lahir, tanggal lahir, dan jabatan dengan menggunakan bahasa php dan dipoles dengan menggunakan bootstrap.
| Baca Artikel Lain ✨ |
| 📰 1. Membuat Notifikasi Realtime dengan php dan Jquery read more |
| 📰 2. Cara Membuat Hide/Show Input Password dengan Javascript dan Bootstrap read more |
| 📰 3. Cara Mencegah Multiple Submit dan Cara Menggunakan Spinner Bootstrap sebagai Indicator Loading pada Php read more |
Cara Menampilkan Data SpreadSheet di PHP
1. Siapkan satu file spreadsheet dengan format yang saya tampilkan seperti di bawah ini. Atau untuk mempersingkat waktu, kalian bisa menggunakan link spreadsheet yang saya bagikan berikut ini klik tautan  |
| Format Spreadsheet |
2. jangan lupa juga untuk mempublikasikan file spreadsheet ke dalam bentuk csv agar dapat dipublikasikan di web. Caranya buka menu file → bagikan → publikasi di web → pilih tab tautan → pilih seluruh dokumen dan pilih format csv → klik tombol publikasikan. Lalu copy link yang diberikan
 |
| Mempublikasikan Spreadsheet |
3. Selanjutnya, buat sebuah folder baru dengan nama latihan atau bebas di dalam folder htdocs. Lalu buat sebuah file di dalamnya dengan nama data.php. Lalu copy script di bawah ini dan paste ke file tersebut.
Script di atas berfungsi mengolah data csv dari spreadsheet menjadi array yang siap dilooping ke tabel nantinya. $newArray adalah array yang akan digunakan.
4. Ok selanjtunya buatlah sebuah file baru dengan nama index.php. Lalu isi file tersebut dengan script yang ada di bawah ini.
<?php
//sesuaikan dengan link spreadsheet yang didapatkan sebelumnya
$feed = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTPJHtqE8GoHWsDtvFWGKW_yQmNmINhS1tmm55j5-VdHmDv_VO6nHlQnqlMc48bTkqso4ui833PxzOJ/pub?output=csv';
// variabel ini akan digunakan untuk melooping data
$keys = array();
$newArray = array();
//fungsi untuk mengkonversi csv ke array asosiatif
function csvToArray($file, $delimiter) {
if (($handle = fopen($file, 'r')) !== FALSE) {
$i = 0;
while (($lineArray = fgetcsv($handle, 4000, $delimiter, '"')) !== FALSE) {
for ($j = 0; $j < count($lineArray); $j++) {
$arr[$i][$j] = $lineArray[$j];
}
$i++;
}
fclose($handle);
}
return $arr;
}
// menjalankan fungsi dan memasukan data ke variabel $data
$data = csvToArray($feed, ',');
$count = count($data) - 1;
//row pertama digunakan untuk nama/header
$labels = array_shift($data);
//membuat nama-nama key dari header
foreach ($labels as $label) {
$keys[] = $label;
}
//menggabungkan key dan value
for ($j = 0; $j < $count; $j++) {
$d = array_combine($keys, $data[$j]);
$newArray[$j] = $d;
}
?> Script di atas berfungsi mengolah data csv dari spreadsheet menjadi array yang siap dilooping ke tabel nantinya. $newArray adalah array yang akan digunakan.
4. Ok selanjtunya buatlah sebuah file baru dengan nama index.php. Lalu isi file tersebut dengan script yang ada di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bottom Navbar Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<div class="container mt-4">
<h2 class="alert alert-info">
Tutorial Menampilkan Data Google SpreadSheet dengan Php
</h2>
<div class="card">
<div class="card-body">
<table class="table table-striped">
<tr>
<td>No</td>
<td>Nama Pegawai</td>
<td>Tempat Lahir</td>
<td>Tanggal Lahir</td>
<td>Jabatan</td>
<td>Alamat</td>
</tr>
<?php
include('data.php');
$no = 1;
?>
<!-- $newArray adalah variabel yang didapatkan dari data.php -->
<?php foreach ($newArray as $value) { ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $value["Nama"]; ?></td>
<td><?php echo $value["Tempat Lahir"]; ?></td>
<td><?php echo $value["Tanggal Lahir"]; ?></td>
<td><?php echo $value["Jabatan"]; ?></td>
<td><?php echo $value["Alamat"]; ?></td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
</body>
</html> Sampai disini semua tahap sudah kita lalui bersama, tiba saatnya kita melakukan uji coba. Buka browser kalian dan jalankan localhost/latihan. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini
 |
| Tampilan Akhir Aplikasi |
Bagaimana susah atau mudah guys?. Ok, sekian tutorial kali ini tentang cara menampilkan data spreadsheet dengan bahasa php. Semoga bermanfaat. Dan jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar atau tanya langsung ke fanspage tulisan saya. Sekian dan sampai jumpa di tutorial menarik lainnya.
Posting Komentar