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 sahretech. Sekian dan sampai jumpa di tutorial menarik lainnya.
Jika terjadi perubahan data pada spreadsheet, apakah tampilan di webnya akan menyesuaikan/ ikut berubah?
ReplyDeleteya, tampilan webnya akan berubah sesuai dengan data yang ada di spreadsheet. Tapi karena latihan yang kita buat tidak mengambil data secara realtime, jadi jika ada perubahan pada spreadsheet halaman webnya harus direfresh
Deletebagaimana jika table yg di spreadsheet lebih dari satu dan posisi nya bukan dari kiri ke kanan tapi random
ReplyDeleteapakah bisa juga update data ?
ReplyDeletebisa banget mas :)
Deletemas kalau semisal menampilkan datanya melalui url dengan fungsi &_get
ReplyDeletemisal https://apa.com/indek.php?No=1 dan yang muncul hanya baris satu saja gimana ya?
mas kalo panggil data dan index di jadikan 1 file gimana ?
ReplyDeletebisa mas, tinggal copas semua script di data.php. lalu paste di bagian atas sebelum looping tabel
DeleteBaik. ada kontak yang bisa di hub ya mas
Deletetanya di facebook aja
DeleteBagaimana caranya untuk update mas? Terimakasih
ReplyDeleteTinggal update lewat spreadsheet aja mas. Klo mau update lewat aplikasi yg dibikin itu harus pake api
DeleteTerima kasih kodenya. Dengan kode tsb akhirnya saya cukup menyimpan data-data yang relatif sederhana dan sedikit di Google Sheet. Saya paling malas menyimpan data-data tsb menggunakan MySQL, karena untuk menampilkan atau memanggilnya kita perlu membuat koneksi. Sekali lagi terima kasih.
ReplyDeleteParse error: syntax error, unexpected identifier "r" kalo muncul ini kenapa ya mas lagi belajar ni
ReplyDeleteBisa ga ya gan, menampilkannya di filter hanya data tertentu saja
ReplyDeleteBisa dong, caranya gampang. Bisa pake datatable atau Tinggal pake if setelah foreach. Kondisinya juga bisa ditentukan secara hardcode atau pake dropdown.
DeleteBisa buat tutorial nya pak?
DeleteBang mau tanya. bagaimana supaya tampilan baris terakhir berada di baris paling atas. saya menggunakan G form supaya data yang terbaru tampil dibagian atas. terimakasih
ReplyDeletecara paling gampang adalah dengan melakukan pengurutan secara manual dari spreadsheet. Dengan begitu data yg tampil di php juga sesuai urutan pada spreadsheet
DeleteBang kok punyaku datanya gk muncul yh? padahal udah ikutin caranya dari awal
ReplyDeletedibuat publikasi udah belum?
DeleteSudah mas.
ReplyDeleteada keluar error gk mas?
Deletebang mau ambil sheet tertentu aja gimana bang discript data.php
ReplyDeleteIni pake xampp mas
ReplyDeleteGan, mau tanya, kalau biar datanya bisa realtime tanpa kita harus refresh web browsernya gimana ya?
ReplyDeleteTerimakasih...saya coba buat tabel sendiri dan terkoneksi...semoga rejeki agan tambah lancar..ditunggu tunggu tutorial selanjutnya
ReplyDelete