CONTOH WEB APP “SURVEY LPJU”

Padangsidimpuan, 26 Mei 2026.

Hasil URL Saya dapat Anda lihat di Survey LPJU. Namun Anda tidak akan bisa login karena data “Users” kita berbeda. Silahkan gunakan URL hasil Anda dan data dari google spreadsheet anda sendiri.

SURVEY LPJU?

Kali ini, web app yang dibuat tidaklah berafiliasi dengan instansi yang mengemban tugas terkait LPJU di Kota Padangsidimpuan atau Instansi manapun di Indonesia. Tulisan ini dibuat murni untuk tujuan “way to expand my creativity”. Tulisan ini memang dibuat sebagai contoh web aplikasi Kegiatan Survey Lampu Peneranagan Jalan Umum (LPJU) yang menggunakan data “geo-location” dari GPS mobile handphone Surveyor dan disajikan dengan bantuan fasilitas peta “Leaflet” secara khusus menggunakan Area “Kota Padangsidimpuan”. Ada 2 peran dalam web aplikasi ini yakni; (1)Admin, dan (2)Surveyor.

TAHAPAN.

Persiapan File Google Spreadsheet.

Tanpa “mukoddimah” lagi, Ikuti langkah-langkah berikut ini ;

  1. Buatlah sebuah Google Spreadsheet Baru dan beri nama (nama file terserah Anda). Asumsi saya bahwa semua yang membaca tulisan ini sudah tahu bagaimana membuat “New Google Spreadsheet”. Jika belum tahu, silahkan cari videonya di youtube.
  2. Buatlah 3 Sheet di dalamnya bernama “Users”, “Wilayah”, “Lpju”. Perhatikan huruf kecil/besar yang digunakan pada nama Sheet. Perbedaan huruf dapat mengakibatkan code yang diberikan nanti tidak berfungsi dengan baik.
  3. Buat isi masing-masing Sheet dengan kondisi sebagai berikut :
  • Sheet “Users” terdiri dari Kolom (1)UID, (2)username, (3)password, (4)role, hanya akan boleh diisi dengan Admin atau Surveyor dan (5)nama.
  • Sheet “Wilayah” terdiri dari Kolom (1)Kecamatan, dan (2)Kelurahan. Silahkan isi data Kecamatan dan Kelurahan di Kota Padangsidimpuan (bisa anda cari di Internet, namun Anda juga bisa memperolehnya dari code di Index.html tulisan ini).
  • Sheet “Lpju” terdiri dari Kolom (1)UID, (2)Kecamatan, (3)Kelurahan, (4)Nama Gang, (5)Status, (6)Catatan, (7)Titik Lampu, (8)Koordinat Format, (9)Catatan Waktu, (10)Pengirim, (11)Foto Titik Lampu. Kolom (7)Titik Lampu akan diambil dari data yang dientri surveyor sewaktu ke lapangan, sedangkan kolom (8)Koordinat Format akan menggunakan rumus berikut ini : (Simpan kode tersebut jika anda butuh sewaktu waktu)

Rumus data di kolom (8) Koordinat Format adalah sebagai berikut :
(Rumus ini digunakan untuk mengkonversi Format data GPS ke Format Lain).
=IF(G2=””;””;LET(lat;VALUE(SUBSTITUTE(LEFT(G2;FIND(“,”;G2)-1);”.”;”,”));lng;VALUE(SUBSTITUTE(RIGHT(G2;LEN(G2)-FIND(“,”;G2));”.”;”,”));
TEXT(INT(lat);”0″)&”°”&TEXT(INT((lat-INT(lat))60);”00″)&”‘”&TEXT(ROUND(((lat-INT(lat))60-INT((lat-INT(lat))60))60;1);”00.0″)&””””&IF(lat>0;”N “;”S “)&
TEXT(INT(lng);”0″)&”°”&TEXT(INT((lng-INT(lng))60);”00″)&”‘”&TEXT(ROUND(((lng-INT(lng))60-INT((lng-INT(lng))60))60;1);”00.0″)&””””&IF(lng>0;”E”;”W”)
))

Pembuatan Web App dengan Google Apps Script (GAS).

Setelah Anda selesai membuat file sebagaimana kondisi yang disebutkan dalam tahapan sebelumnya, Anda lanjutkan dengan melakukan hal-hal berikut ini:

Jangan lupa bahwa Code.gs yang ada masih perlu menambahkan SPREADSHEET_ID_ANDA. Sebelum Lupa, pada bagian awal Code.gs, ganti SPREADSHEET_ID dengan Spreadsheet ID file anda. Contoh URL Spreadsheet anda adalah: https://docs.google.com/spreadsheets/d/1qpyC0XzvTcKT6EISywvqESX3A0MwQoFDE8p-Bll4hps/edit#gid=0 berdasarkan model URL tersebut, Spreadsheet ID Anda adalah: 1qpyC0XzvTcKT6EISywvqESX3A0MwQoFDE8p-Bll4hps, masukkan ID ini di Code.gs anda.

  1. Di Google Sheet yang baru dibuat tadi, cari menu Ekstensi, kemudian pilih Apps Script. Anda akan dialihkan ke halaman baru, tempat Anda akan mengisi code.
  2. Di Halaman baru yang muncul (Apps Script), Klik Kode.gs (sebagian akan melihat Code.gs di bagian kiri, tergantung bahasa akun google Anda). Hapus semua kode bawaan yang ada di dalam Kode.gs dan ganti dengan code dari file Code.gs.
  3. Masih di halaman Apps Script, buatlah File baru dengan mengklik tanda “+” dan pilih HTML, kemudian beri nama Index (jangan tambahkan kata “.html”, karena akan secara otomatis dibuatkan). Selanjutnya, pada halaman Index.html yang muncul, hapus seluruh kode bawaan yang sudah ada di dalamnya dan ganti dengan code dari file Index.html.
  4. Jangan lupa, simpan seluruh perubahan Kode.gs dan Index.html.
  5. Pada tampilan Apps Script, klik tombol Terapkan (Deploy) di kanan atas > Pilih Terapkan baru (New Deployment).
  6. Klik ikon roda gigi (Jenis konfigurasi) > Pilih Aplikasi web.
  7. Lakukan pengisian dan pengaturan di jendela yang muncul sebagai berikut :
  8. Klik Terapkan.
  9. Sistem akan meminta otorisasi akses data spreadsheet Anda pertama kali. Pilih akun Google Anda, klik Advanced / Lanjutan > Klik Go to… (unsafe) / Buka… (tidak aman), lalu klik Allow / Izinkan.

Langkah 7

  • Deskripsi : versi 1.0 (bisa anda namai secara bebas).
  • Jalankan sebagai: Diri Anda sendiri (Email Anda).
  • Yang memiliki akses: Pilih Siapa saja / Anyone (agar pengguna lain/HP lain bisa membuka tautan login).

Setelah sukses, Anda akan mendapatkan URL Aplikasi Web (Bukan Library yang di copy ya..!). Salin URL tersebut dan jalankan di browser laptop atau handphone Anda.

Pengujian.

Baca, fahami dan perhatikan langkah-langkah berikut ini:

Langkah 1
Lakukan pengisian secara langsung di Spreadsheet untuk akun Admin dan Surveyor, karena kode tidak menanamkan akun Admin dan Surveyor dan harus dibuat secara manual di Spreadsheet. Contoh : (1) UID (USR0001), username (admin@gmail.com), password (121314), role (Admin), nama (Administrator); (2) UID (USR0002), username (surveyor@gmail.com), password (121314), role (Surveyor), nama (Petugas 1). Data Admin ini hanya contoh, modifikasi sesuai kebutuhan Anda.

  1. Untuk menguji apakah web ini berfungsi, anda harus menambahkan 2 user Pertama di Sheet Users untuk pengujian.
  2. Buka URL yang sudah anda Deploy hingga muncul halaman Login. Login-lah menggunakan akun Admin. Perhatikan “menu”, model navigasi, dan data yang ditampilkan (Dashboard Admin, Data Statistik, dan Data PJU). Klik keluar jika sudah cukup.
  3. Coba login dengan akun Surveyor dan anda akan menemui bahwa halaman yang muncul berbeda dengan milik akun Admin. Halaman yang dimilik Surveyor adalah : (1)Form Input Data, (2)Hasil Input, dan (3)Peta PJU.

INFORMASI TAMBAHAN.

  1. Silahkan gunakan dan modifikasi code yang ada sesuai kebutuhan jika anda memiliki kemampuan Google Apps Script Developer. Seluruh code yang ada di dalam dan/atau dikaitkan dengan tulisan ini bersifat gratis dan tidak mengikat. Oleh sebab itu, segala KEUNTUNGAN DAN KERUGIAN penggunaan, pemanfaatan dan sebagainya di luar tanggung jawab saya selaku penulis.
  2. Anda akan menemui beberapa fungsi (seperti peta tidak menunjukkan PIN lokasi di surveyor) yang sengaja tidak saya sertakan dalam code.gs atau script di bagian index.html. Harap maklum dan tidak akan saya sediakan di blog ini.
  3. Selaku penulis, saya dibebaskan dari segala tuntutan terkait seluruh tulisan saya (tidak hanya tulisan ini) di blog ini sebagaimana anda dibebaskan dari segala tuntutan karena belajar atau tidak dari seluruh tulisan saya.

Gambar View ID “Admin”

Gambar View ID “Surveyor”

Scroll to Top