Lewati ke konten utama
Numekara
Konsultasi GratisKontak

F4 · Modul 01

Cara kerja web

59 langkah singkat, dari mudah sampai tantangan.

  1. Level 1

    Kenal

  2. Level 2

    Paham

  3. Level 3

    Terapkan

  4. Level 4

    Tantangan

  5. Level 5

    Pendalaman

Intinya

  • Membuka sebuah alamat berarti rangkaian permintaan dan respons HTTP: HTML-nya dulu, lalu setiap CSS, skrip, gambar, dan data.
  • URL punya tata bahasa. Urai dan bangun dengan URL dan URLSearchParams, bukan dengan split atau sambung string.
  • HTTP punya arti yang tetap: metode aman dan idempoten, kode status lima kelas (4xx salah klien, 5xx salah server), dan nama kepala yang tidak peka huruf besar.
  • Peramban mengurai HTML menjadi pohon DOM dan memperbaiki yang rusak. DOM bukan teks HTML-mu.
  • XSS terjadi saat data diurai sebagai kode. Kodekan data sesuai tempatnya: escapeHtml (& dulu), textContent, dan allowlist skema URL.

Sebelum mulai

±4 jam.

Modul ini memakai materi di bawah. Belum yakin? Ulas dulu bagian yang disebut.

Hasil belajar: menjelaskan apa yang terjadi sejak sebuah alamat diketik sampai halaman tampil; mengurai dan membangun URL dengan URL dan URLSearchParams tanpa menyambung string; membaca dan membuat pesan HTTP dari sisi aplikasi (Request, Response, Headers, fetch ke server lokal) beserta metode, kode status, dan kepala yang penting; menulis HTML semantik yang sah dan ramah pembaca layar; memahami CSS dasar (aturan, kaskade, model kotak, media query); menjelaskan DOM sebagai pohon hasil penguraian, termasuk perbaikan otomatis oleh pengurai; mencegah XSS dengan escaping yang sesuai konteks; dan menulis escapeHtml serta tabelHtml untuk proyek Laporan Warung.

Proyek: Laporan Warung langkah 01: escapeHtml, tabelHtml, dan halaman laporan.html statis berisi lima produk terlaris September 2026.

Istilah di modul ini (40)

Ketuk istilah untuk melihat penjelasannya. Di materi, istilah bergaris titik membuka kartu yang sama. Semua istilah course

Bahan modul

Semua kode, latihan, dan data modul ini dalam satu zip, untuk dijalankan di laptop atau Google Colab.

  • 9 berkas latihan + tes
Semua data course (data-f4.zip) Cara menjalankan di laptop
Lihat isi zip
  • BACA-DULU.txt
  • latihan_f4_01_2.ts
  • latihan_f4_01_4.ts
  • latihan_f4_01_1.ts
  • latihan_f4_01_5.ts
  • latihan_f4_01_7.ts
  • latihan_f4_01_3.ts
  • latihan_f4_01_8.ts
  • latihan_f4_01_6.ts
  • latihan_f4_01_9.ts