Canva Code Database
Belajar membuat aplikasi web interaktif dengan database menggunakan Canva Code
6
Pertemuan
5
Subtopik
10
Latihan
📚 Materi Pembelajaran
Subtopik 1
Hari ke-1: Pengantar Materi + Zoom Meeting
Bongkar Canva Code Hack, Prompt, Google App Script, Spreadsheet
📹 Virtual Meeting
- Zoom Meeting Live (ID: 835 6440 4482, Pass: 374166)
- Video Siaran Ulang Zoom Meeting
📝 Contoh Kode Google Apps Script dan Prompt Formulir
-
Contoh Prompt:
Buatkan Form Pendaftaran Siswa
SMAN 1 Bandung
Buatkan tampilan web app, sertakan navigasi buttom, sertakan logo sekolah: https://sman1bdg.sch.id/wp-content/uploads/2019/04/LOGO-SMANSA.png
Tanggal dan Waktu (Sesuai zona)
Nama Lengkap (Sesuai KTP)
NIK (12 digit)
Alamat Domisili (Textarea)
Kota/Kabupaten (Dropdown 27 kota/kab di Jawa Barat)
Provinsi (Dropdown 38 provinsi di Indonesia)
Style CSS (cuplikan):
:root {
--primary: #100c96;
--secondary: #e81064;
--accent: #d0df18;
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background-color: var(--light-bg);
}
...
Google Apps Script (cuplikan):
function doPost(e) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('FormDaftar');
if (!sheet) {
return ContentService.createTextOutput('❌ Sheet FormDaftar tidak ditemukan!'); }
// Ambil waktu saat ini dalam format lokal
var waktuSekarang = new Date().toLocaleString('id-ID', { timeZone: 'Asia/Jakarta' });
sheet.appendRow([
waktuSekarang,
e.parameter.nama_lengkap,
e.parameter.nik,
e.parameter.alamat_domisili,
e.parameter.kotakab,
e.parameter.provinsi
]);
return ContentService.createTextOutput('✅ Data berhasil disimpan!'); }
Hasil nya:
Lihat Hasilnya
Subtopik 2
Hari ke-2: Membuat Formulir dengan Canva Code + Database
Belajar membuat form interaktif yang terhubung dengan database
Subtopik 3
Hari ke-3: Membuat Presensi dengan Canva Code + Database
Sistem absensi digital dengan penyimpanan data
Subtopik 4
Hari ke-4: Membuat Edugame dengan Canva Code + Database
Game edukatif interaktif dengan sistem skor
📹 Video Tutorial
- Membuat Game Kuis Interaktif
- Sistem Skor dan Leaderboard
📝 Soal Latihan
- Quiz: Game Development
🛠️ Latihan Projek
- Projek: Game Matematika
- Submit Projek
Subtopik 5
Hari ke-5: Membuat Dasbor Data dengan Canva Code + Database
Dashboard analitik dengan visualisasi data
📹 Video Tutorial
- Membuat Dashboard Interaktif
- Visualisasi Data dengan Chart
📝 Soal Latihan
- Quiz: Data Visualization
🛠️ Latihan Projek
- Projek: Dashboard Sekolah
- Submit Projek
Subtopik 6
Hari ke-6: Membuat Undangan dengan Canva Code + Database
Sistem undangan digital dengan RSVP otomatis
📹 Video Tutorial
- Membuat Undangan Digital
- Sistem RSVP Otomatis
📝 Soal Latihan
- Quiz: Digital Invitation
🛠️ Latihan Projek
- Projek: Undangan Wisuda
- Submit Projek