Mohon tunggu...
JNC Edukasi
JNC Edukasi Mohon Tunggu... Guru - Learn to Code

I am an English teacher at SDN 001 Babulu, interested in programming HTML, CSS and JavaScript.

Selanjutnya

Tutup

Pendidikan

Sertifikat Online Web App Google Sheets

5 November 2023   17:11 Diperbarui: 5 November 2023   18:41 848
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.

Membuat aplikasi sertifikat online adalah sebuah proyek yang melibatkan beberapa langkah dan teknologi. Berikut langkah-langkah untuk membuat sertifikat online dengan menggunakan Web App Google Sheets:

1. Login ke Google Drive.

2. Buat spreadsheet baru.

3. Ganti nama Sheet1 dengan Data, Sheet2 (Partisipasi) dan sheet3 ( Nomor) untuk nomor Sertifkat.

4. Pada sheet Data, buatlah header pada masing-masing kolom yang akan dijadikan data atau detail sertifikat.

Pada screenshoot gambar di bawah menggunakan 10 kolom header yaitu kolom Id, Nomor Sertifikat, Diberikan kepada, Asal Sekolah, Atas Partisipasinya,Nama Penanda Tangan, NIP Penanda Tangan, Nomor Telepon, Tanggal Sertifikat, File PDF Sertifikat.

Drive JNC Edukasi
Drive JNC Edukasi

5. Setelah selesai membuat kolom header, maka masuk ke halaman script dengan klik menu Extension/Ekstensi.

Drive JNC Edukasi
Drive JNC Edukasi

6. Pada dropdown menu Extension/Ekstensi, pilih dan klik submenu App Script.

7. Setelah klik submenu App Script, maka akan masuk ke halaman script.

Dalam halaman script, sudah saya siapkan scriptnya dan pengguna yang ingin mengaplikasikan App ini bisa membuat salinan File pada link https://docs.google.com/spreadsheets/d/1rTXcqNg3Fyzssde2JAGkdmVzT5kabMfK6QDelrs8DyY/copy

Drive JNC Edukasi
Drive JNC Edukasi

Yang utama harus diperhatikan pada script code.gs adalah 

- Data Range baris 14 (Data!A2:J)

Pastikan nama Data Range sesuai dengan nama Sheet1 yaitu Data dari kolom A2 sampai kolom J.  Mulai dari kolom A2 karena A1 adalah kolom Header.

- Slide ID

Slide ID diambil dari ID Google Slide yang telah didesign format sertifikat. Perhatikan screenshoot pada link yang ditandai warna biru. Copy ID tersebut kemudian paste di script code.gs ada baris 55.

https://docs.google.com/presentation/d/13jdU4aor4Ym0klLMQTzaMU7csPxLJACXd7XHuTe3Kt8/copy

Drive JNC Edukasi
Drive JNC Edukasi

- Folder ID

Buatlah folder baru dalam Drive dan beri nama sesuai keinginan pemilik drive. Di sini saya memberi nama folder SERTIFIKAT JUARA.

Perhatikan screenshoot pada yang ditandai warna biru. Copy ID Folder tersebut dan paste di script code.gs pada baris 56

Drive JNC Edukasi
Drive JNC Edukasi

8. Setelah langkah-langkah di atas selesai maka Save/Simpan kemudian klik Deploy/Terapkan pada button warna biru. Pilih dan klik Deployment Baru.

Drive JNC Edukasi
Drive JNC Edukasi

9. Perhatikan form pop up:

- Ketikkan deskripsi. 

-Pilih email 

- anyone/siapa saja 

- klik tombol biru Terapkan.

- Ijinkan akses

- Pilih akun (Email)

- Klik Advance (Lanjutkan)

Drive JNC Edukasi
Drive JNC Edukasi

- Klik Go To

Drive JNC Edukasi
Drive JNC Edukasi

- Klik Allow/Ijinkan

- Terakhir akan ditampilkan link web. Salin/Copy dan bagikan ke siapa saja.

Drive JNC Edukasi
Drive JNC Edukasi

10. Tampilan web

Drive JNC Edukasi
Drive JNC Edukasi

11. Input data dengan klik tombol Create New kemudian lengkapi detail sertifikat pada form dan Submit.

Drive JNC Edukasi
Drive JNC Edukasi

12.  Data terinput akan ditampilkan dalam datatable.

Drive JNC Edukasi
Drive JNC Edukasi

13. Data terinput pada spreadsheet.

Drive JNC Edukasi
Drive JNC Edukasi

14. Update data dengan klik Tombol Edit pada datatable  untuk membuat sertifikat dengan memasukkan password yang dibuat saat input data kemudian klik Submit.

15. Setelah diupdate, klik kolom PDF untuk melihat sertifikat.

Demo Aplikasi : Sertifikat Online 

Baca konten-konten menarik Kompasiana langsung dari smartphone kamu. Follow channel WhatsApp Kompasiana sekarang di sini: https://whatsapp.com/channel/0029VaYjYaL4Spk7WflFYJ2H

HALAMAN :
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
Mohon tunggu...

Lihat Konten Pendidikan Selengkapnya
Lihat Pendidikan Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun