Kode atau Bahasa dalam Pemograman Dasar

🧩 Bedah Kode WebApp

Belajar Bahasa Pemrograman dengan Bahasa yang mudah dimengerti

Analogi: Membangun Sebuah Rumah 🏡

Membuat aplikasi web itu sama persis seperti membangun sebuah rumah. Kita tidak bisa hanya menggunakan batu bata saja; kita butuh cat, kabel listrik, dan gudang penyimpanan. Mari kita kenalan dengan 4 "pekerja bangunan" digital kita!

🧱

HTML

Kerangka Bangunan

Menentukan di mana letak ruang tamu, pintu, dan jendela. (Teks, tombol, kotak input).

🎨

CSS

Cat & Dekorasi

Membuat rumah jadi cantik. Mengatur warna tombol, ukuran huruf, dan tata letak agar rapi.

⚡

JavaScript

Listrik & Air

Membuat rumah "hidup". Saat saklar ditekan, lampu menyala. Saat tombol diklik, pesan muncul.

🗄️

Code.gs

Gudang & Keamanan

Pekerja di balik layar yang menyimpan barang ke dalam brankas (Google Sheets) secara aman.

Resep Aplikasi WebApp

Sebuah aplikasi tidak didominasi oleh satu bahasa saja. Grafik di samping menunjukkan perkiraan porsi penggunaan setiap bahasa dalam sebuah proyek WebApp standar. Bagian Frontend (yang dilihat pengguna) memakan porsi terbesar karena berfokus pada kenyamanan mata (UI/UX).

• HTML (20%): Menyusun pondasi halaman.
• CSS (30%): Mempercantik tampilan (Tailwind).
• JS (30%): Mengatur logika saat tombol diklik.
• Code.gs (20%): Menerima data dan menyimpannya.

🧱 HTML & 🎨 CSS: Wajah Aplikasi

HTML menggunakan sistem "Tag" (Tanda). Bayangkan label di kardus pindahan: "Ini Buku", "Ini Baju". Di HTML, kita melabeli: "Ini Judul", "Ini Tombol".
CSS (dalam hal ini kita memakai Tailwind) adalah kata sifat yang kita tempelkan di tag tersebut. "Tombol ini warnanya biru, melengkung, dan teksnya tebal."

Anatomi Tombol Sederhana

Mari kita bedah cara membuat sebuah tombol berwarna biru yang cantik.

1. Tag Utama: <button> memberitahu peramban (browser) bahwa ini adalah area yang bisa diklik.

2. Atribut Class (CSS): class="..." adalah tempat kita memasukkan kata sifat (desain).

• bg-blue-500 = Latar belakang biru.
• text-white = Teks warna putih.
• rounded-lg = Ujung tombol sedikit melengkung (tidak kaku).
• px-4 py-2 = Memberi jarak (padding) di dalam tombol agar tidak sesak.

3. Konten: Teks "Simpan Data" yang muncul di layar, diapit oleh tag penutup </button>.

<!-- Ini adalah kode HTML yang dicampur desain CSS (Tailwind) --> <button class="bg-blue-500 text-white rounded-lg px-4 py-2 font-bold" id="tombolSimpan"> Simpan Data </button>

Hasil di Layar Anda

⚡ JavaScript: Otak dan Otot Aplikasi

Tombol biru yang kita buat di HTML tadi saat ini mati (tidak terjadi apa-apa jika diklik). JavaScript (JS) adalah perintah yang kita berikan agar komputer melakukan aksi saat tombol tersebut ditekan. JS bertugas mengambil data ketikan pengguna, lalu mengirimkannya ke "Pekerja Belakang" (Server).

// 1. Kita cari tombolnya berdasarkan nama "ID" var tombol = document.getElementById('tombolSimpan'); // 2. Kita pasang telinga (Event Listener) untuk mendengarkan 'klik' tombol.addEventListener('click', function() { // 3. Munculkan pesan Loading (Mohon Tunggu) tampilkanLoading(); // 4. Ambil nilai yang diketik pengguna di kotak isian var namaLengkap = document.getElementById('inputNama').value; // 5. Kirim data ke Pekerja Belakang (Code.gs) lewat 'gasRun' gasRun('simpanDataKeDatabase', namaLengkap) .then(function(responDariServer) { // 6. Jika server bilang "Sukses", munculkan Pop-up! if (responDariServer.success === true) { alert("Hore! Data berhasil disimpan."); } }); });

Memahami Alur Kerja JS

Langkah 1 & 2

Mendeteksi Aksi: Komputer selalu menunggu. Sama seperti pelayan restoran yang menunggu kita memanggilnya.

Langkah 3

Feedback Visual: Sangat penting memberi tahu pengguna bahwa aplikasi sedang bekerja (misal memutar ikon loading) agar mereka tidak mengeklik tombol berkali-kali.

Langkah 5

Jembatan Kurir (gasRun): JavaScript di depan (browser pengguna) tidak bisa langsung menulis ke Google Sheets. Ia harus menitipkan paket (data nama) kepada fungsi khusus (gasRun) untuk dibawa ke server.

⚙️ Code.gs: Sang Penjaga Gudang

Kode ini berjalan jauh di dalam server Google, bukan di HP/Laptop pengguna. Karena pengguna tidak bisa melihat kode ini, di sinilah kita meletakkan aturan keamanan (seperti cek password) dan menulis secara permanen ke dalam "gudang" kita (Google Sheets).

Tugas Utama Code.gs

🔒

LockService (Mengatur Antrean)

Bayangkan ada 50 orang mau memasukkan barang ke satu pintu gudang secara bersamaan, pasti macet! LockService bertugas mengunci pintu sedetik, membiarkan orang ke-1 masuk, mengunci lagi, membiarkan orang ke-2 masuk. Ini mencegah data bertabrakan.

📊

SpreadsheetApp (Buku Catatan)

Perintah ini adalah cara server menyentuh Google Sheets Anda. "Hai Google, tolong buka sheet bernama 'DataKu', lalu tambahkan satu baris baru di paling bawah yang isinya nama orang ini."

📤

Return (Memberi Kabar)

Setelah pekerjaan selesai, server WAJIB menelepon balik ke kurir (JavaScript) untuk bilang: { success: true } (Kerja bagus, barang sudah masuk!).

// Fungsi ini dipanggil dari JavaScript tadi function simpanDataKeDatabase(namaLengkap) { // 1. KUNCI PINTU! Biar yang antre tunggu sebentar var kunci = LockService.getScriptLock(); kunci.waitLock(10000); // Tunggu maksimal 10 detik try { // 2. Buka Buku Catatan (Google Sheets) var fileDB = SpreadsheetApp.getActiveSpreadsheet(); var halaman = fileDB.getSheetByName("DataKu"); // 3. Tulis datanya di baris paling bawah (Append Row) // Bayangkan [ ] adalah kolom-kolomnya (A, B, C) halaman.appendRow([ new Date(), namaLengkap, "Selesai" ]); // 4. Kabari ke depan bahwa semuanya lancar! return { success: true, message: "Penyimpanan Aman" }; } catch (error) { // Jika ada yang rusak/error, lapor ke depan return { success: false, message: error.message }; } finally { // 5. Pekerjaan selesai atau gagal, PINTU WAJIB DIBUKA LAGI kunci.releaseLock(); } }

© 2026 E-Learning by Muhammad Alfin Ramadhan