LKPD 01: Teknologi Aplikasi Web (Arsitektur Client-Server)

1 Identitas Peserta Didik

Wajib Diisi

Pilih Sekolah, Kelas, dan Nama Lengkap Anda di bawah ini untuk mengaktifkan modul praktikum web.

Sekolah

Kelas / Jurusan

Nama Lengkap

2 Ringkasan Teori: Arsitektur Client-Server & Ekosistem Web

Dasar Web

Aplikasi Web beroperasi menggunakan model Client-Server Architecture. Klien (seperti Web Browser) mengirimkan *HTTP Request* kepada Web Server. Server kemudian memproses permintaan tersebut dan mengembalikan *HTTP Response* berupa kode status dan resource (HTML, CSS, JS, Gambar, dll).

Komponen Utama Web

Komponen	Contoh Software / Teknologi	Fungsi Utama
Web Client (Browser)	Chrome, Firefox, Safari	Menerjemahkan kode HTML/CSS/JS menjadi antarmuka visual yang dipahami manusia.
Web Server	Apache, Nginx, LiteSpeed	Menyimpan file web dan melayani HTTP Request dari browser klien secara nonstop.
Bahasa Pemrograman (Back-end)	PHP, Python, Node.js, Java	Menangani logika bisnis, keamanan, dan berinteraksi dengan database (MySQL, PostgreSQL).

Status 2xx (Success)

Contoh: 200 OK. Menandakan bahwa request dari client berhasil diterima, dipahami, dan diproses oleh server.

Status 4xx (Client Error)

Contoh: 404 Not Found. Terjadi kesalahan di sisi klien, misalnya meminta URL atau file yang tidak ada di server.

Status 5xx (Server Error)

Contoh: 500 Internal Server Error. Klien mengirim request benar, namun terjadi masalah pada kode server/database.

3 Laboratorium Simulasi Interaktif Web

Analisis traffic jaringan pada browser dan lakukan pemetaan ekosistem perangkat lunak web.

Interactive Modules

Simulasi 1: Analisis Traffic Browser

DevTools (F12) Network

Klik setiap baris *Request* pada simulasi tab Network di bawah ini. Tentukan HTTP Status Code yang tepat berdasarkan skenario request ke server.

Name (File)

Method

Domain

Status

Klik baris request pada tab Network untuk inspeksi.

Simulasi 2: Mapping Tech Stack Web

Project: Toko Online

Klien meminta Anda membangun aplikasi E-Commerce (Toko Online) yang dinamis. Tentukan ekosistem teknologi yang tepat secara berurutan!

1. Front-End 2. Back-End 3. Web Server 4. Database

Langkah 1: Tampilan Antarmuka

Toko online memerlukan tampilan visual di browser (katalog produk, tombol beli, styling). Teknologi apa yang Anda gunakan untuk lapisan Front-end ini?

Selesaikan 4 tahapan arsitektur aplikasi.

4 Tabel Pengamatan Praktikum Web

Rekapitulasi log analisis traffic HTTP dan struktur teknologi aplikasi web.

No	Modul Simulasi	Objek / Tahapan	Analisis / Pilihan Teknologi	Status Pemahaman	Aksi
Belum ada data. Klik tombol "+ Catat Analisis" pada modul simulasi di atas untuk menyimpan hasil.

5 Uji Kompetensi Teknologi Web

Jawablah 20 pertanyaan pilihan ganda berikut mengenai arsitektur dan ekosistem web.

20 Soal Pilihan Ganda

Petunjuk Penyelesaian:

Pastikan seluruh soal uji kompetensi dan tabel pengamatan telah terisi lengkap sebelum mengirim LKPD.