Web Architecture & Database

Web Architecture & Database

Bagaimana Aplikasi Web Bekerja?

Memahami perjalanan data dari layar pengguna hingga ke tempat penyimpanan.

Analogi Restoran

🧑‍💻

Frontend (HTML/CSS)

Seperti Menu & Meja. Tempat pengguna melihat dan memesan (Input Data).

🏃

Backend (API/Server)

Seperti Pelayan. Mengantar pesanan dari meja ke dapur dan sebaliknya.

🧑‍🍳

Database

Seperti Dapur & Gudang. Tempat bahan makanan (Data) disimpan dan diolah secara permanen.

Di mana Database Disimpan?

• Penyimpanan Lokal (Client-side): Disimpan di Browser HP/Laptop pengguna (Local Storage/Cookies). (Bisa hilang jika clear cache/ganti HP).
• Penyimpanan Server (Cloud): Disimpan di komputer raksasa (Server) milik Google/Amazon/Microsoft. (Permanen & bisa diakses dari mana saja).

Mengapa Data HTML Bisa Hilang?

HTML bersifat Stateless. Artinya, setiap kali Anda me-refresh halaman, HTML "lupa" apa yang terjadi sebelumnya.

Solusi Permanen: HTML harus mengirim data ke Server Database (seperti MySQL, PostgreSQL, atau Firebase) agar data dicatat di hard drive server, bukan hanya di memori browser.

Simulasi Database Sederhana

Di sini kita menggunakan LocalStorage browser untuk meniru database. Coba input data, lalu Refresh Halaman. Data akan tetap ada!

Input Data Siswa

Nama Siswa

Nilai

Isi Database (Tabel Siswa)

ID	Nama	Nilai	Waktu Input	Aksi

Database Kosong

// Bagaimana simulasi ini bekerja?

1. Saat tombol simpan diklik, data diubah jadi format JSON String.

2. Browser menyimpannya di localStorage.setItem('db_siswa', data).

3. Ini tersimpan di hard drive komputer Anda (permanen selama browser tidak di-reset).

// Catatan:

Di aplikasi asli, data ini dikirim via Internet ke Server Database (MySQL/Cloud).

Algoritma Penyimpanan Data

Langkah-langkah logika (Algoritma) agar data tersimpan dengan aman.

1. Start / Input

Pengguna memasukkan data melalui Formulir HTML (Input Interface).

2. Validasi Data

IF (Nama == Kosong) OR (Nilai < 0) THEN
  Tampilkan Error
ELSE
  Lanjut ke Proses

3. Proses Koneksi

Aplikasi membuka jalur komunikasi ke Database (API Call). Jika internet mati, proses gagal.

4. Eksekusi Query (Create)

Server menerima data dan menjalankan perintah SQL:

INSERT INTO siswa (nama, nilai) VALUES ('Budi', 90);

5. Konfirmasi & Update UI

Database mengirim sinyal "Sukses". Tampilan HTML diperbarui untuk memunculkan data baru di tabel.

6. End

Proses selesai. Data aman tersimpan.

Kamus Istilah Informatika

Daftar pengertian istilah teknis yang sering muncul dalam pemrograman web.

JSON (JavaScript Object Notation)

Sebuah format teks ringan untuk menyimpan dan mentransfer data. Bayangkan seperti "kardus paket" yang membungkus data agar bisa dikirim dari HTML ke Database.

{ "nama": "Budi", "umur": 17 }

Database (Basis Data)

Kumpulan data yang terorganisir, disimpan dan diakses secara elektronik. Seperti "Lemari Arsip Digital" yang sangat besar dan rapi.

SQL (Structured Query Language)

Bahasa pemrograman khusus yang digunakan untuk "berbicara" dengan database. Contoh perintahnya: "Ambil data siswa bernama Andi" (SELECT * FROM siswa WHERE nama='Andi').

API (Application Programming Interface)

Jembatan penghubung antara dua aplikasi berbeda. Dalam analogi restoran, API adalah "Pelayan" yang mengantar pesanan dari tamu (HTML) ke dapur (Database).

LocalStorage

Fitur pada browser web yang memungkinkan situs web menyimpan data di dalam komputer pengunjung (bukan di server). Data bertahan meski browser ditutup, tapi hilang jika "Clear Cache".

Client-side vs Server-side

• Client-side: Proses yang terjadi di perangkat pengguna (HP/Laptop). Contoh: HTML, CSS, Javascript.
• Server-side: Proses yang terjadi di komputer pusat (Cloud). Contoh: Database, PHP, Python Backend.

Modul Edukasi Informatika - HTML5 & LocalStorage Demo