🧭 1. Definisi Pemrograman Web
6
📖 Deskripsi
Pemrograman web adalah proses pembuatan aplikasi atau sistem yang berjalan di atas web browser dengan memanfaatkan teknologi internet.
🧠 Narasi
Ketika pengguna membuka sebuah website, sebenarnya terjadi komunikasi antara client (browser) dan server. Browser meminta data, server memproses permintaan tersebut, lalu mengirimkan kembali hasilnya dalam bentuk halaman web.
🎯 Tujuan Pembelajaran
- Memahami konsep dasar web
- Mengetahui bagaimana web bekerja
- Mengenal komponen utama dalam pengembangan web
🌐 2. Cara Kerja Web (Client–Server Model)
6
📖 Deskripsi
Web bekerja dengan model client-server, yaitu:
- Client: perangkat pengguna (browser)
- Server: tempat penyimpanan dan pengolahan data
🔄 Alur Proses
- User mengetik URL (misalnya: google.com)
- Browser mengirim HTTP Request
- Server menerima dan memproses permintaan
- Server mengirim HTTP Response
- Browser menampilkan halaman
🧠 Narasi
Setiap klik, scroll, atau input di web memicu komunikasi ini. Tanpa model client-server, web tidak akan bisa berjalan secara dinamis.
🧩 3. Komponen Utama Web
8
📖 Deskripsi
Pengembangan web terdiri dari beberapa komponen utama:
🧱 Tabel Komponen
| Komponen | Fungsi |
|---|---|
| Frontend | Tampilan yang dilihat user |
| Backend | Logika aplikasi |
| Database | Penyimpanan data |
🧠 Narasi
Bayangkan sebuah website seperti restoran:
- Frontend = tampilan menu & meja
- Backend = dapur & koki
- Database = gudang bahan makanan
🎨 4. Frontend vs Backend
7
📖 Deskripsi
Frontend
- Berjalan di browser
- Menggunakan HTML, CSS, JavaScript
Backend
- Berjalan di server
- Menggunakan PHP, Node.js, Python, dll
⚖️ Perbandingan
| Aspek | Frontend | Backend |
|---|---|---|
| Lokasi | Browser | Server |
| Fungsi | Tampilan | Logika |
| Bahasa | HTML, CSS, JS | PHP, Node.js |
🧠 Narasi
Frontend berfokus pada pengalaman pengguna (UI/UX), sedangkan backend mengatur bagaimana data diproses dan disimpan.
🌍 5. Teknologi Dasar Web
7
📖 Deskripsi
Tiga teknologi utama dalam web:
🧱 Tabel Teknologi
| Teknologi | Fungsi |
|---|---|
| HTML | Struktur halaman |
| CSS | Tampilan/desain |
| JavaScript | Interaksi |
🧠 Narasi
Ketiga teknologi ini saling melengkapi:
- HTML → kerangka
- CSS → estetika
- JavaScript → perilaku
🖥️ 6. Tools dalam Pemrograman Web
6
📖 Deskripsi
Beberapa tools yang digunakan:
🧰 Daftar Tools
- Code Editor: VS Code, Sublime
- Browser: Chrome, Firefox
- Web Server Lokal: XAMPP, Laragon
- Version Control: Git
🧠 Narasi
Tools ini membantu developer dalam menulis, menguji, dan mengelola kode secara efisien.
📂 7. Struktur Dasar Website
8
📖 Deskripsi
Contoh struktur folder:
project-web/
│
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
🧠 Narasi
Struktur yang rapi membantu dalam pengelolaan proyek dan memudahkan pengembangan jangka panjang.
🔐 8. Pengenalan HTTP & HTTPS
6
📖 Deskripsi
- HTTP: komunikasi tanpa enkripsi
- HTTPS: komunikasi aman dengan SSL/TLS
🧠 Narasi
Saat menggunakan HTTPS, data yang dikirim akan dienkripsi sehingga lebih aman dari penyadapan.
🧪 9. Contoh Sederhana Halaman Web
💻 Kode HTML
<!DOCTYPE html>
<html>
<head>
<title>Website Pertama Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah halaman web pertama saya.</p>
</body>
</html>
🧠 Narasi
Kode di atas adalah langkah awal dalam belajar web. Browser akan menerjemahkan kode tersebut menjadi tampilan visual.
🎯 10. Kesimpulan
- Web adalah sistem berbasis client-server
- HTML, CSS, dan JavaScript adalah fondasi utama
- Frontend dan backend memiliki peran berbeda
- Tools dan struktur proyek penting untuk efisiensi
📌 Latihan / Tugas Mahasiswa
- Buat file HTML sederhana
- Tampilkan:
- Judul
- Paragraf
- Gambar
- Jelaskan perbedaan frontend dan backend dengan bahasa sendiri
🎓 Penutup
Materi ini menjadi fondasi untuk pertemuan selanjutnya. Pemahaman konsep dasar akan sangat membantu dalam mempelajari:
- HTML lanjutan
- CSS
- JavaScript
- Backend programming
