Pembuatan Web App “Surat Tugas”.

Padangsidimpuan, 19 Juli 2026.

Hasil Web App “Surat Tugas” ini dapat Anda lihat hingga Halaman Login di link ini.

Web App “Surat Tugas”.

Seperti namanya, Web app kita kali ini dibuat untuk menghasilkan Surat Tugas dalam bentuk File Google Document (agar bisa diedit kembali) dan File PDF. Format “Surat Tugas” yang digunakan merupakan layout lembar contoh Surat Perintah/Surat Tugas yang dilampirkan dalam Peraturan Menteri Dalam Negeri Nomor 1 Tahun 2023 tentang Tata Naskah Dinas di Lingkungan Pemerintah Daerah (Lampiran halaman 21 – Contoh b). Format layout surat yang mirip dan sudah ada sebelumnya juga dapat anda temukan di Peraturan Arsip Nasional Republik Indonesia Nomor 5 Tahun 2021 tentang Pedoman Umum Tata Naskah Dinas (Lampiran halaman 62). Jadi, jika anda punya layout yang berbeda dan bukan bagian dari Instansi Pemerintah Daerah, silahkan lakukan perubahan di Template Document-nya. Itupun jika Anda berpikir untuk memanfaat kode yang ada. GRATIS.

Wah.. Bisa ya ganti-ganti format layout surat?. Jawaban singkatnya, Ya. Web app kita kali ini melibatkan 3 aplikasi dari ekosistem google secara langsung. Yakni, Google Apps Script sebagai Front End dan Back End website, Google Spreadsheet sebagai Database penyimpanan data, dan Google Document sebagai Format Layout surat yang akan ditempelkan data dari spreadsheet dan menghasilkan File Document dan File PDF. Penggunaan Google Document sebagai template disebabkan oleh pertimbangan;

  1. Dukungan penempatan data dari Spreadsheet secara langsung ke Document dengan google.script.run dan menghasilkan jenis Document yang sama.
  2. Kemudahan mengubah Layout di Google Document sewaktu-waktu dengan mempertahankan {{Tag}} atau replacement yang sesuai dengan Apps Script. Meski anda mengubah isi dokumen, selama Anda memasukkan Tag yang sesuai, data dari Spreadsheet akan dapat ditampilkan.
  3. Kemudahan “Peng-edit-an” kembali. Jika data sudah benar, namun template ada kesalahan, anda masih bisa membuka file dokumen secara langsung dan ubah sesuai keinginan anda.

Oleh sebab itu, disini saya juga akan menyampaikan {{Tag}} apa saja yang ada di kode Apps Script kita dengan membaginya menjadi 2 jenis model; (1) Tag tipe Individual, dan (2) Tag tipe Dinamis. Maksud Tag tipe Individual adalah data yang hanya akan muncul sekali di tempat tag ditempatkan dalam 1 template. Misal; Tag {{Nomor_SPT} hanya akan muncul 1 kali di 1 tag yang sama dan sesuai dengan tempatnya di template dokumen. Jika anda menempatkannya di halaman awal dan tidak ada lagi ditempat lain, maka hanya akan muncul di tempat awal itu 1 kali. Namun, jika anda buat 2 tag yang sama (di tempat yang berbeda atau 2 kali di tempat yang sama), tag akan muncul 2 kali karena masing-masing akan mewakili 1 tag. Adapun Tag tipe Dinamis adalah data yang akan muncul sesuai jumlah data yang dimilikinya dan dipengaruhi “hubungannya” dengan Tag tipe Individual. Pengertian ini didasari logika, bahwa dalam 1 surat tugas bisa jadi ada lebih dari 1 orang yang ditugaskan, atau ada lebih dari 1 tugas yang akan dilakukan, atau ada lebih dari 1 Dasar Penugasan. Misal : Di surat SPT Nomot : 001/SPT/2026 ditugaskan 5 orang untuk melakukan perjalan dinas ke Kementrian A berdasarkan Surat Edaran Menteri dan Ketersediaan Anggaran Perjalanan Dinas.

Singkatnya, berikut adalah Tag dan tipe Tag-nya yang sudah disediakan kodenya di Apps Script;

  1. Tag Tipe Individual, yaitu; {{Nomor_SPT}}, {{Tempat}} alias kolom yang menampung nama kota tempat SPT ditandatangani, {{Tanggal_SPT}}, {{Jabatan_Pemberi_Perintah}}, {{Nama_Pemberi_Perintah}}, {{NIP_Pemberi_Perintah}}, dan {{Pagoru_Pemberi_Perintah}} alias Pangkat / Golongan Ruang.
  2. Tag Tpe Dinamis, yaitu; {{a}} alias numerasi abjad di bagian “Dasar Penugasan”, {{Dasar_Penugasan}}, {{Label_Kepada}} digunakan untuk menepatkan tulisan “Kepada” di baris pertama dan tulisan kosong di baris kedua dan seterusnya, {{No}} alias penomoran untuk orang yang ditugaskan, {{Nama}}, {{Pagoru}}, {{NIP}}, {{Jabatan}}, {{No}} alias penomoran untuk Tugas / Keterangan di bagian Tugas, {{Uraian_Tugas}}. Secara khusus, untuk pengisian data di Web app, kolom {{a}}, {{Label_Kepada}}, {{No}} bagian Bertugas dan {{No}} bagian Tugas sudah di-handel oleh code di Apps Script.

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 Surat Tugas menurut Layout Format dari Peraturan, yang juga disesuaikan dengan kebutuhan penulis.

Fitur Web App “Surat Tugas”.

Jika Anda membaca penjelasan sebelumnya, anda sudah dapat menebak fitur yang ada di web app ini. Adapun fitur-nya adalah sebagai berikut;

  1. Fitur Login. Meski sederhana dan tidak powerfull (bahkan menurut analisis AI tidak cocok untuk level produksi), web app ini membuat fitur login, agar hanya Username dan Password yang ada di Sheet “Users”-lah yang dapat membuka isi halaman web.
  2. Memiliki halaman Dashboard untuk melihat data statistik Jumlah Surat Tugas dan Jumlah orang yang pernah ditugaskan.
  3. Pembuatan/pembagian proses pengisian data menjadi 4 halaman utama, yakni (1) halaman Pembuatan Data Umum/Individual Surat Tugas, (2) Halaman Dasar Penugasan, (3) Halaman Data yang ditugaskan, (4) Halaman Tugas. Juga fitur Create, Read, Update dan Delete (CRUD) di tiap halamannya.
  4. Pembuatan Halaman Dokumen untuk melihat Surat Tugas yang tersedia untuk di-Create File Google Document dan File PDF-nya. Serta Link untuk membuka File-nya.

Kelemahan Web App ini.

Kali ini saya ingin Anda sendiri yang menyimpulkan apa saja kelemahan Web App kita kali ini. Itupun jika Anda punya waktu untuk menganalisa. Meski saya sudah meminta bantuan AI untuk menganalisa code-nya, saya akan menyimpan pendapat AI tersebut untuk saya saat ini.

Pembuatan Web App “Surat Tugas”.

  1. Buatlah File Spreadsheet baru yang akan menjadi database dan sebuah Google Document yang menjadi template Surat Tugas anda. Untuk memudahkan lihat di point 2.
  2. 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;
  3. 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.
  4. 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. Jangan lupa ganti TEMPLATE_DOC_ID_ANDA dengan data yang sesuai.
  5. 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.
  6. Jangan lupa simpan seluruh kode yang telah Anda copy-paste.
  7. Sebelum anda mendeploy, jangan lupa buatkan Folder bernama “Surat_Tugas_Doc” di Direktori Utama Drive Google Anda.
  8. Kembali ke tampilan Apps Script, klik tombol Terapkan (Deploy) di kanan atas, kemudian pilih Terapkan baru (New Deployment).
  9. 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).
  10. 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), lalu klik Allow / Izinkan.
  11. Setelah sukses, Anda akan mendapatkan URL Aplikasi Web (Bukan Library yang di copy ya..!). Salin URL Aplikasi Web tersebut dan jalankan di browser laptop atau PC Anda.

Pengujian.

Kegiatan pengujian dimaksudkan untuk memastikan code yang Anda copy-paste benar-benar dapat dieksekusi sebagaimana mestinya. Juga untuk memastikan Spreadsheet dan Document yang ada 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 untuk pengalaman yang lebih baik.

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 mengisi Spreasheet Anda dengan data yang sesuai dan/atau Anda tidak membuat document template yang sesuai, maka web app mungkin tidak berfungsi sebagaimana tujuannya.
  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 Isi Web App “Surat Tugas”

Scroll to Top