Contoh Web App “SPPD”.

Padangsidimpuan, 27 Agustus 2026.

Hasil halaman web app yang saya buat dapat Anda akses hingga halaman login di LINK ini.

Web App “SPPD”.

SPPD dalam tulisan kita ini adalah singkatan dari Surat Perintah Perjalanan Dinas. Dalam prakteknya di Instansi pemerintah daerah format SPPD ini telah ditentukan sebagaimana dalam Peraturan Menteri Dalam Negeri Nomor 1 Tahun 2023 tentang Tata Naskah Dinas di Lingkungan Pemerintah Daerah. Format ini juga dapat anda temui dalam Peraturan Perundang-undangan lain yang dikeluarkan oleh Pemerintah Pusat maupun Pemerintah Daerah. Namun dalam tulisan ini kita meniru apa yang disajikan dalam Permendagri yang sudah disebutkan.

Bagaimana peran web app “SPPD” ini?. Sederhana saja; (1)Tentukan format resmi yang akan dipakai, (2)Input data, dan (3)Hasilkan dokumen template. Kenapa masih template? Karena masih ada kemungkinan variabel data yang hanya akan diperoleh setelah kegiatan berjalan. Ketersediaan data di web app menjadi kunci template semakin mendekati tingkat kesiapan sebagai dokumen final. Jenis dokumen yang masih berformat google documents juga akan mempermudah pengeditan kembali di kemudian waktu sembari tetap menyimpan data-data dalam spreadsheet.

Disclaimer.

Aplikasi ini tidak berafiliasi dengan pemerintah dan/atau perusahaan manapun dan tidak bermaksud meniru fasilitas dan fungsi dari aplikasi berbayar atau aplikasi gratis manapun. Web App ini sengaja dibuat menurut penafsiran penulis untuk kebutuhan pembuatan lembar SPPD dengan meniru sebagian atau seluruh Layout Format Laporan dari Peraturan yang dipilih, yang juga disesuaikan dengan kebutuhan penulis.

Fitur Web App “SPPD”.

Adapun fitur-fitur yang ada dalam Web App kita kali ini adalah;

  1. Autentikasi & Manajemen Sesi (Login & Logout).
    • Login Sistem: Memvalidasi username dan password pengguna berdasarkan data dari sheet "Users".
    • Notifikasi Error Login: Menampilkan pesan kesalahan jika username/password tidak sesuai.
    • Profil Pengguna: Menampilkan nama pengguna yang sedang aktif di bilah navigasi (navbar).
    • Logout: Fitur memuat ulang aplikasi untuk mengakhiri sesi pengguna.
  2. Dashboard Statistik & Navigasi Utama.
    • Kartu Statistik Ringkas: Menampilkan jumlah total:
      1. Pengguna terdaftar (Users).
      2. Data Pegawai/ASN (ASN).
      3. Dokumen SPPD Lembar 1 yang telah dibuat (doc1).
      4. Dokumen SPPD Lembar 2 yang telah dibuat (doc2).
    • Akses Cepat (Menu Navigasi): Tombol pintas menuju ke Input Database ASN, Form Lembar 1, Form Lembar 2, dan Pembuatan File Dokumen.
  3. Input & Manajemen Data ASN (Database Awal).
    • Form input master data ASN yang mencakup: Nama, NIP, Jabatan, Pagoru (Pangkat/Golongan), Instansi, dan Tanggal Lahir.
    • Otomatisasi Pilihan Pagoru: Dropdown daftar pangkat/golongan dari Pembina Utama (IV/e) hingga Juru Muda (I/a).
  4. Form SPPD Lembar 1 (Input & Edit Data Utama).
    • Auto-Generate UID: Menghasilkan ID unik secara otomatis (format SPPD-[timestamp]) saat membuat data baru.
    • Auto-Fill Data ASN & PPK: Mengisi otomatis data NIP, Jabatan, Pagoru, dan Instansi saat Nama ASN atau Nama PPK dipilih.
    • Form Lengkap SPPD:
      • Input Kota Instansi, Tingkat Biaya, Transportasi (mendukung pilihan ganda/multiple select), Kode SIPD, dan Tujuan SPPD (maksimal 1000 karakter).
      • Input detail keberangkatan (Kota Keberangkatan, Kota Tujuan, Lamanya PD, Tanggal Berangkat, Tanggal Tiba, Tanggal SPD).
    • Accordion Data Pengikut: Menampung hingga 5 Pengikut (Nama, Tanggal Lahir, dan Keterangan).
    • Dukungan Mode Edit Data: Pengguna dapat memilih UID yang sudah ada untuk memperbarui/mengedit isi data Lembar 1.
  5. Form SPPD Lembar 2 (Input & Edit Data Kunjungan).
    • Relasi Data dari Lembar 1: Memilih UID dari Lembar 1 untuk mengisi otomatis data terkait (Kota Keberangkatan, Kota Tujuan, Tanggal Berangkat, Tanggal Kembali, serta Nama & NIP PPK).
    • Accordion Detail Kunjungan: Menampung data hingga 4 Kota Tujuan Kunjungan (Kota Tujuan, Tanggal Tiba, Pejabat Kunjungan, Nama PK, dan NIP PK).
    • Deteksi Mode Edit Otomatis: Jika UID yang dipilih di Lembar 2 sudah memiliki isi, form akan beralih ke mode edit data secara otomatis.
  6. Pengolahan & Pemformatan Data (CRUD Engine).
    • Format Tanggal Otomatis: Mengonversi input tanggal dari format HTML (YYYY-MM-DD) menjadi format DD-MM-YYYY saat disimpan ke Google Sheets.
    • Penyimpanan Aman: Memilih antara append (tambah baru) atau update (edit baris) berdasarkan ada/tidaknya UID.
    • Pembersihan Form (Reset Form): Mengembalikan form ke status default/mode data baru.
    • Modal Konfirmasi: Menampilkan dialog konfirmasi sebelum menyimpan data guna mencegah salah simpan.
  7. Pembuatan & Pengelolaan File Google Docs (Template Engine).
    • Generasi Dokumen dari Template:
      • Menyalin template Google Docs berdasarkan ID (URL_TEMPLATE_1 untuk Lembar 1, URL_TEMPLATE_2 untuk Lembar 2).
      • Mengganti semua variabel tag {{NamaKolom}} di dalam Google Docs secara otomatis sesuai data pada tabel.
    • Penyimpanan ke Google Drive: File yang berhasil dibuat akan disimpan di folder Drive khusus (FOLDER_OUTPUT_ID).
    • Pengaturan Akses File: Mengubah hak akses file Google Docs yang dibuat menjadi View Only bagi siapa saja yang memiliki tautan.
    • Fitur “Buat Ulang” Dokumen: Jika dokumen sudah ada, sistem akan membuang file lama ke sampah Drive (trash) lalu menerbitkan dokumen baru agar tautan selalu diperbarui.
    • Integrasi Tautan di Spreadsheet: Menyimpan URL file yang berhasil dibuat ke kolom "File Dokumen" pada Google Sheets.
  8. Manajemen Dokumen & UI/UX.
    • Tabel Kelola Dokumen: Menampilkan daftar seluruh data Lembar 1 dan Lembar 2 beserta status dokumennya.
    • Tombol Aksi Dinamis:
      • Tombol “Buat File” (jika dokumen belum pernah dibuat).
      • Tombol “Buka” (membuka link Google Docs di tab baru) dan “Buat Ulang” (jika dokumen sudah ada).
      • Tombol “Edit” untuk kembali ke form pengeditan data.
    • Indikator Loading (Spinner Overlay): Menyembunyikan antarmuka dan menampilkan indikator memuat saat ada proses latar belakang dengan Google Apps Script.

Pembutan Web App “E-Laporan”.

  1. Buatlah File Spreadsheet baru. Silahkan buka link di bawah ini jika anda ingin copy paste / download langsung untuk Anda simpan di drive Anda. Buatlah data di Spreadsheet anda benar-benar sama dengan Spreadsheet yang bagikan berikut ini;
  2. Buka file Spreadsheet yang Anda buat, cari menu Ekstensi, klik dan kemudian pilih Apps Script. Anda akan dibukakan Tab baru / Halaman baru yang merupakan halaman pengalihan ke Aplikasi Google Apps Script Editor.
  3. Di 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 Kode.gs. Lihat bagian atas Kode.gs yang baru saja Anda copy dan jangan lupa ganti “ID_TEMPLATE_LEMBAR_1”, “ID_TEMPLATE_LEMBAR_2”, “ID_FOLDER_ANDA” dengan ID yang sesuai. Saya berasumsi bahwa Anda telah tahu, bahwa ID Template diambil dari ID Google Document yang menjadi templat Anda dan ID Folder diambil dari ID di folder tempat Anda berencana menyimpan hasil file google dokumen yang sudah dibuat oleh Web App. Jika Anda tidak tahu, silahkan cari informasi dari AI gemini atau dari Youtube, dimanakah ID Document dan ID Folder ditemukan?.
  4. Masih di Apps Script, buatlah File baru dengan mengklik tanda “+” dan pilih HTML, kemudian beri nama Index (jangan tambahkan “.html” karena akan otomatis dibuatkan google, cukup “Index”). Pada halaman Index.html yang muncul, hapus seluruh kode bawaan yang sudah ada di dalamnya dan ganti dengan code dari file Index.html.
  5. Jangan lupa simpan seluruh kode yang telah Anda copy-paste.
  6. Sebelum anda mendeploy, jangan lupa menyediakan sebuah Folder di google drive Anda, untuk Anda gunakan sebagai tempat penyimpanan hasil dokumen dan gunakan ID Foldernya di Kode.gs. Juga pastikan kembali apakah dokumen template Anda sudah memiliki {{tag}} yang Anda butuhkan.
  7. Kembali ke tampilan Apps Script, klik tombol Terapkan (Deploy) di kanan atas, kemudian pilih Terapkan baru (New Deployment).
  8. Klik ikon roda gigi (Jenis konfigurasi), kemudian pilih Aplikasi web. Lakukan pengisian dan pengaturan di jendela yang muncul sebagai berikut.
    • 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).
  9. Klik Terapkan. Sistem akan meminta otorisasi akses data spreadsheet Anda pertama kali. Pilih akun Google Anda, klik Advanced / Lanjutan, Klik Go to… (unsafe) / Buka… (tidak aman), pilih semua fitur yang akan diizinkan, lalu klik Allow / Izinkan.
  10. Setelah sukses, Anda akan mendapatkan URL Aplikasi Web (Bukan Library yang di copy ya..!). Salin URL Aplikasi Web tersebut dan jalankan di browser Anda.

Pengujian.

Jangan lupa buat sebuah akun di Sheet “Users” Spreadsheet Anda sebelum pengujian. Kegiatan pengujian dimaksudkan untuk memastikan code yang Anda copy-paste benar-benar dapat dieksekusi sebagaimana mestinya. Juga untuk memastikan Spreadsheet dan Document yang Anda gunakan memiliki fungsi yang sama dengan yang saya gunakan di artikel ini. Sehingga, ketika anda membuka link dan diarahkan ke halaman web app, web app berjalan lancar dan menampilkan data dan fungsi yang ada dalam code sebagaimana direncanakan. Lakukan pengujian di PC / Laptop Anda.

Penutup.

  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. Jika Anda tidak menggunakan Spreasheet dan Document dengan data yang sesuai dan/atau Anda tidak membuat document template yang sesuai atau juga tidak membuat drive penyimpanan hasil dokumen, maka web app mungkin tidak berfungsi sebagaimana mestinya.
  3. Selaku penulis, saya dibebaskan dari segala tuntutan terkait seluruh tulisan saya di artikel ini dan seluruh artikel saya di web ini, sebagaimana Anda dibebaskan dari segala tuntutan karena belajar atau tidak dari seluruh tulisan saya.

Tampilan Dashboard “SPPD”

Scroll to Top