Contoh Web App “E-Laporan”.

Padangsidimpuan, 25 Juli 2026.

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

Web App “E-Laporan”.

Web App ini dibuat untuk menghasilkan laporan berbentuk File Document (Google Document) berdasarkan data yang diinput di web. Format ini dipilih agar mudah diedit kembali LAYOUT hasil akhirnya. Penamaan “E-Laporan” tidak terlepas dari maksud dan fungsi web app ini dibuat, dimana huruf “E” merupakan akronim dari kata “Elektronik” yang sudah lazim kita dengar dalam keseharian dan dimaknai sebagai bentuk digital atau bentuk non dokumen fisik. Jadi, dari kata “E-Laporan” saja, Anda sudah dapat menebak apa isi web app kita kali ini. Meskipun hasil akhirnya Anda jadikan sebagai dokumen yang di print. Tapi itu proses diluar web app kita.

Bukankah Layout atau Format Resmi Dokumen Laporan setiap organisasi berbeda?. Ya. Oleh sebab itu, pembuatan E-Laporan kali ini menggunakan Layout atau Format Surat yang bersumber dari Peraturan Menteri Dalam Negeri Nomor 1 Tahun 2023 tentang Tata Naskah Dinas di Lingkungan Pemerintah Daerah (halaman 36) dan Peraturan Arsip Nasional Republik Indonesia Nomor 5 Tahun 2021 tentang Pedoman Umum Tata Naskah Dinas (halaman 92). Hal ini pula yang membuat isian dalam Form Input data akan mengikuti Field, logika, dan aturan terkait Tata Naskah Dinas berbentuk Laporan.

Dalam Permendagri dimaksud (Pasal 2) ada 3 jenis naskah dinas (ND), (1) ND Arahan, (2) ND Korespondensi; dan (3) ND Khusus. Masih dalam peraturan yang sama, tidak disebutkan definisi dari ketiga jenis naskah dinas ini. Namun, di pasal 14 disebutkan bahwa terdapat 21 Naskah Dinas yang dikategorikan sebagai bentuk ND Khusus. Kenapa ND Khusus? Karena artikel ini akan membahas 1 bentuk dari ND Khusus yang terdapat dalam Pasal 14 tersebut yakni Laporan.

Nah.. di pasal 15 disebutkan bahwa “Laporan sebagaimana dimaksud dalam Pasal 14 huruf h berisi pemberitahuan tentang pelaksanaan kegiatan atau kejadian tertentu“. Jika melihat peraturan Arsip Nasional Republik Indonesia Nomor 5 Tahun 2021 tentang Pedoman Umum Tata Naskah Dinas, Pasal 48, disebutkan bahwa Laporan merupakan Naskah Dinas yang memuat pemberitahuan tentang pelaksanaan suatu kegiatan atau kejadian tertentu. Kemudian di Pasal 49 dijelaskan bahwa pembuatan Naskah Dinas Laporan menjadi wewenang pejabat/staf yang diberi tugas dan ditandatangani oleh pejabat/staf yang diserahi tugas. Dengan demikian, kita dapat melihat siapa yang harus membuat dokumen Naskah Dinas yang disebut Laporan ini.

Meski Web App ini didesain untuk membuat Naskah Dinas Khusus berbentuk Laporan yang sudah memiliki Layout susunan dokumen yang tetap, dalam prakteknya penggunaan Web App ini masih dapat Anda utak-atik (khususnya template dokumen) agar sesuai kebutuhan Anda. Maksudnya, bagi yang ingin web app ini murni untuk menghasilkan dokumen berbentuk laporan sebagaimana TEMPLATE (peraturan), Anda tidak perlu melakukan tindakan yang merepotkan. Cukup copy, paste, testing dan gunakan. Namun, bagi mereka yang ingin berkreatifitas, mereka dapat mengubah dokumen template laporan yang mereka gunakan. Sebebas itu. Karena code yang dibuat untuk web app ini masih dapat Anda gunakan fitur dan fasilitasnya, selama Anda ingin dan Anda tahu bagaimana memanfaatkannya. Kuncinya terletak dari bagaimana Anda memanfaatkan letak {{tag}} dari data di Spreadsheet.

Berikut ini saya sampaikan {{tag}} apa saja yang sudah disiapkan oleh kode kita dan dapat Anda tempatkan nantinya di Dokumen Template yang Anda buat.

  1. {{UID}}. Ini dibuat sebagai data unik (yang tidak boleh ada data duplikat-nya) di database. Anda dapat menggunakannya sebagai Identitas Unik sebuah Laporan. Saat ini tidak difungsikan untuk menjaga kesederhanaan kode.
  2. {{Judul}}. Ini digunakan untuk menempatkan Kalimat/Teks dari Judul Laporan. Judul adalah bagian Kepala dalam sebuah Laporan. Menurut Peraturan ANRI halaman 91 bagian Kepala harus ditulis huruf KAPITAL dan diletakkan secara simetris. (Jika ingin sesuai peraturan. Namun jika anda berimprovisasi menurut kebutuhan yang tidak mengikat, tentunya penempatan dan tulisan juga tidak mengikat).
  3. {{Pendahuluan Umum}}. Pendahuluan merupakan bagian dari Batang Tubuh dalam sebuah Laporan. Kata Umum ditambahkan di nama kolom dengan maksud memperjelas posisi kata umum itu sendiri dalam laporan.
  4. {{Maksud dan Tujuan}}. Maksud dan tujuan merupakan bagian dari Batang Tubuh dan masih menjadi bagian dari Pendahuluan.
  5. {{Ruang Lingkup}}. Bagian dari Batang Tubuh dan juga bagian dari Pendahuluan.
  6. {{Dasar}}. Bagian dari Batang Tubuh dan Juga bagian dari Pendahuluan.
  7. {{Materi Laporan}}. Materi Laporan adalah sub bagian sendiri dari Batang Tubuh dalam sebuah Laporan yang harusnya memuat kegiatan yang dilaksanakan, faktor yang mempengaruhi, hasil pelaksanaan kegiatan, hambatan yang dihadapi dan hal-hal lain yang perlu dilaporkan (PERANRI hal.91). Jika Anda melihat Layout Contoh Dokumen, {{tag}} ini dapat anda tempatkan di bawah sub judul Kegiatan yang dilaksanakan. Namun ketika laporan merupakan catatan sebuah kejadian yang bukan kegiatan dari pembuat laporan, sub judul menjadi tidak relevan. Biasanya akan diganti dengan sub judul lain seperti ; Kronologi Kejadian atau Hal-hal yang terjadi. Masih di Layout Contoh Dokumen, bahkan di sub judul berikutnya yang berbunyi Hasil yang dicapai juga menjadi kurang relevan dalam setiap jenis Laporan yang bervariatif. Akhirnya, apapun sub judulnya, {{tag}} ini dapat Anda tempatkan sebagai penampung teks dari Materi Laporan Anda.
  8. {{Dampak Materi Laporan}}. {{tag}} ini disiapkan dalam Tabel dan Kode kita bukan karena bagian wajib dari sebuah Laporan sebagaimana aturan yang ada. {{tag}} ini sengaja dibuat untuk mengantisipasi sub judul yang memerlukan penjelasan tambahan seperti; Hasil yang dicapai, Akibat kejadian, Capaian Kegiatan, dan/atau penjelasan tambahan lain terkait Materi Laporan itu sendiri. Jadi, Anda tidak akan melihat adanya penjelasan tentang {{tag}} ini di peraturan resmi. Pembuatan {{tag}} ini bertujuan untuk memudahkan (tempat tambahan) Anda menempatkan teks lain yang dibutuhkan dalam Materi Laporan atau berkaitan dengan Materi Laporan.
  9. {{Simpulan dan Saran}}. Bagian dari Batang Tubuh dan memiliki posisi tersendiri sebagai bagian dari Batang Tubuh dalam sebuah Laporan. Dalam peraturan, Simpulan dan Saran merupakan bagian dari penjelasan bahan masukan dan bahan pertimbangan.
  10. {{Penutup}}. Bagian tersendiri dalam Batang Tubuh Laporan yang digunakan untuk memuat harapan /permintaan arahan /ucapan terima kasih yang merupakan bagian akhir dari laporan.
  11. {{Tempat}}. Bagian Kaki dalam sebuah laporan yang digunakan untuk mengisi nama tempat/ kota/ daerah Laporan dibuat.
  12. {{Tanggal Laporan}}. Bagian Kaki dalam sebuah laporan yang digunakan untuk mengisi Tanggal Laporan.
  13. {{Jabatan Pembuat Laporan}}. Bagian Kaki dalam sebuah laporan yang digunakan untuk mengisi Jabatan/Pekerjaan atau keterangan sejenis dari si Pembuat Laporan.
  14. {{Nama Pembuat Laporan}}. Bagian Kaki dalam sebuah laporan yang digunakan untuk mengisi Nama si pembuat Laporan.
  15. {{NIP Pembuat Laporan}}. Bagian Kaki dalam sebuah laporan yang digunakan untuk mengisi Nomor Induk Pegawai/Nomor Induk Karyawan dan sejenisnya dari si Pembuat Laporan. Tidak usah dipakai di Dokumen Template jika memang tidak dibutuhkan atau tidak ingin disediakan.

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 E-Laporan dengan meniru sebagian atau seluruh Layout Format Laporan dari Peraturan yang dipilih, yang juga disesuaikan dengan kebutuhan penulis.

Fitur Web App “E-Laporan”.

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

  1. Memiliki Fitur Login. Hanya untuk keperluan “pintu masuk”.
  2. Memiliki Halaman Dashboard. Hal ini memberikan informasi statistik sederhana tentang jumlah pengguna, jumlah laporan dan jumlah dokumen yang sudah dibuatkan File-nya dari laporan yang ada.
  3. Memiliki Halaman pengisian Formulir Laporan tersendiri. Ini adalah bagian inti dari web app ini.
  4. Memiliki Halaman Pengolahan Laporan menjadi File Document. Hal ini memberi keleluasaan bagi pengguna untuk melakukan perbaikan pengisian formulir kembali bahkan setelah file dokumen dibuat.

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 TEMPLATE_ID_DOC_ANDA dan FOLDER_ID_DOC_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), 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.

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 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 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 Dashboard E-Laporan

Scroll to Top