---

🟢 Pendahuluan

Perkembangan internet modern tidak dapat dipisahkan dari teknologi web. Ketika seseorang membuka website seperti Google, YouTube, atau sistem akademik kampus, sebenarnya terjadi komunikasi antara browser dan web server menggunakan protokol HTTP atau HTTPS.

Materi ini membahas secara lengkap:

• Hypertext Transfer Protocol (HTTP)
• Web Browser
• Web Server
• Cara kerja web
• Praktikum sederhana web server
• Analisis komunikasi client-server

---

🟡 Capaian Pembelajaran

Mahasiswa diharapkan mampu:

✅ Memahami konsep HTTP dan HTTPS
✅ Menjelaskan fungsi web browser dan web server
✅ Memahami komunikasi client-server
✅ Menjelaskan request dan response HTTP
✅ Melakukan instalasi web server sederhana
✅ Menganalisis proses akses website

---

🟢 1. Konsep Dasar World Wide Web (WWW)

📌 Pengertian WWW

World Wide Web (WWW) adalah layanan internet berbasis hypertext yang memungkinkan pengguna mengakses informasi melalui browser.

WWW dikembangkan oleh Tim Berners-Lee pada tahun 1989.

---

🔍 Komponen Utama Web

Komponen	Fungsi
Web Browser	Menampilkan halaman web
Web Server	Menyediakan layanan web
HTTP/HTTPS	Protokol komunikasi
HTML	Struktur halaman web
URL	Alamat halaman web

---

🖼️ Ilustrasi Konsep WWW

7

---

🟢 2. Hypertext Transfer Protocol (HTTP)

📌 Pengertian HTTP

HTTP (Hypertext Transfer Protocol) adalah protokol komunikasi yang digunakan untuk pertukaran data antara browser dan web server.

HTTP bekerja menggunakan model:

• Client → Request
• Server → Response

---

📊 Port HTTP

Port	Fungsi
80	HTTP
443	HTTPS

---

🔍 Fungsi HTTP

HTTP digunakan untuk:

• Mengakses website
• Mengirim halaman HTML
• Transfer gambar/video
• Mengirim data formulir
• Komunikasi API web

---

🟢 3. Cara Kerja HTTP

📌 Alur HTTP

Ketika pengguna membuka website:

1. User mengetik URL
2. Browser mencari IP melalui DNS
3. Browser mengirim HTTP Request
4. Server memproses permintaan
5. Server mengirim HTTP Response
6. Browser menampilkan halaman

---

🖼️ Diagram Cara Kerja HTTP

8

---

📊 Struktur Komunikasi HTTP

Tahap	Aktivitas
Request	Permintaan browser
Processing	Pemrosesan server
Response	Jawaban server
Rendering	Tampilan browser

---

🟢 4. Struktur URL

📌 Pengertian URL

URL (Uniform Resource Locator) adalah alamat unik suatu halaman web.

Contoh:

https://www.google.com/search

---

📊 Struktur URL

Bagian	Fungsi
https	Protokol
www.google.com	Domain
/search	Path

---

🖼️ Ilustrasi Struktur URL

6

---

🟢 5. HTTP Request

📌 Pengertian HTTP Request

HTTP Request adalah permintaan dari browser kepada server.

---

📊 Metode HTTP

Method	Fungsi
GET	Mengambil data
POST	Mengirim data
PUT	Update data
DELETE	Menghapus data

---

🔍 Contoh HTTP GET

GET /index.html HTTP/1.1
Host: example.com

---

🖼️ Diagram HTTP Request

8

---

🟢 6. HTTP Response

📌 Pengertian HTTP Response

HTTP Response adalah jawaban server terhadap request browser.

---

📊 Status Code HTTP

Kode	Arti
200	OK
301	Redirect
400	Bad Request
401	Unauthorized
403	Forbidden
404	Not Found
500	Internal Server Error

---

🔍 Contoh HTTP Response

HTTP/1.1 200 OK
Content-Type: text/html

---

🖼️ Ilustrasi Status HTTP

6

---

🟢 7. HTTPS (HTTP Secure)

📌 Pengertian HTTPS

HTTPS adalah versi aman HTTP yang menggunakan SSL/TLS encryption.

---

🔍 Fungsi HTTPS

• Mengamankan data
• Mencegah penyadapan
• Menjamin integritas data

---

📊 Perbandingan HTTP dan HTTPS

Aspek	HTTP	HTTPS
Keamanan	Tidak terenkripsi	Terenkripsi
Port	80	443
SSL/TLS	Tidak	Ya

---

🖼️ Diagram HTTPS

5

---

🟢 8. Web Browser

📌 Pengertian Web Browser

Web browser adalah aplikasi untuk mengakses dan menampilkan halaman web.

---

📊 Contoh Browser

Browser	Developer
Google Chrome	Google
Mozilla Firefox	Mozilla Foundation
Microsoft Edge	Microsoft
Safari	Apple

---

🔍 Fungsi Browser

• Mengakses website
• Menampilkan HTML/CSS
• Menjalankan JavaScript
• Menyimpan cache dan cookie

---

🖼️ Gambar Web Browser

6

---

🟢 9. Cara Kerja Web Browser

📌 Proses Browser

1. User memasukkan URL
2. DNS mencari IP server
3. Browser mengirim HTTP request
4. Server mengirim response
5. Browser merender halaman

---

🔍 Rendering Browser

Browser menerjemahkan:

• HTML → Struktur
• CSS → Tampilan
• JavaScript → Interaksi

---

🖼️ Diagram Rendering Browser

6

---

🟢 10. Web Server

📌 Pengertian Web Server

Web server adalah sistem yang menyediakan layanan website kepada client/browser.

---

📊 Contoh Web Server

Web Server	Developer
Apache HTTP Server	Apache Software Foundation
Nginx	F5
Microsoft IIS	Microsoft

---

🔍 Fungsi Web Server

• Menyimpan website
• Melayani request browser
• Mengelola keamanan web
• Menjalankan aplikasi web

---

🖼️ Gambar Web Server

9

---

🟢 11. Arsitektur Client-Server

📌 Pengertian Client-Server

Model komunikasi dimana:

• Client meminta layanan
• Server memberikan layanan

---

📊 Komponen Client-Server

Komponen	Fungsi
Client	Pengguna layanan
Server	Penyedia layanan
Network	Media komunikasi

---

🖼️ Diagram Client-Server

6

---

🟢 12. DNS dan Web

📌 Fungsi DNS

DNS menerjemahkan domain menjadi IP Address.

Contoh:

google.com → 142.250.182.14

---

🔍 Proses DNS

1. Browser meminta IP
2. DNS mencari alamat
3. DNS mengirim IP
4. Browser menghubungi server

---

🖼️ Diagram DNS

6

---

🟢 13. Cookie dan Session

📌 Cookie

Cookie adalah data kecil yang disimpan browser.

Fungsi:

• Login
• Preferensi user
• Tracking

---

📌 Session

Session adalah data sementara di server.

---

📊 Perbandingan Cookie dan Session

Aspek	Cookie	Session
Lokasi	Browser	Server
Keamanan	Lebih rendah	Lebih tinggi
Penyimpanan	Client	Server

---

🟢 14. Cache Browser

📌 Pengertian Cache

Cache menyimpan data website sementara agar akses lebih cepat.

---

🔍 Fungsi Cache

✅ Mempercepat loading
✅ Menghemat bandwidth

---

🖼️ Diagram Cache

8

---

🟢 15. Praktikum Instalasi Web Server

💻 Praktikum 1 — Instalasi Apache Web Server

📌 Tujuan

Mahasiswa mampu membuat web server sederhana.

---

📌 Langkah Praktikum

Windows

Install:

• XAMPP

---

Linux Ubuntu

sudo apt update
sudo apt install apache2

---

📌 Menjalankan Server

Buka browser:

http://localhost

---

🖼️ Ilustrasi Praktikum

6

---

🟢 16. Praktikum Membuat Website Sederhana

💻 Praktikum 2 — HTML Sederhana

📌 File index.html

<!DOCTYPE html>
<html>
<head>
<title>Website Pertama</title>
</head>
<body>
<h1>Hello World</h1>
<p>Praktikum Web Server</p>
</body>
</html>

---

📌 Simpan File

Folder:

htdocs/

---

📌 Akses Browser

http://localhost/index.html

---

🟢 17. Analisis Paket HTTP

💻 Praktikum 3 — Menggunakan Wireshark

📌 Tujuan

Melihat paket HTTP secara langsung.

---

📌 Langkah

1. Install Wireshark
2. Capture network
3. Filter:

http

4. Buka website
5. Analisis paket request/response

---

🖼️ Ilustrasi Wireshark

7

---

🟢 18. Studi Kasus

📌 Kasus

Sebuah website kampus lambat diakses.

Analisis:

• DNS lambat
• Cache tidak optimal
• Server overload
• Bandwidth kecil

---

🔍 Solusi

✅ Upgrade server
✅ Gunakan cache
✅ Gunakan CDN
✅ Optimasi database

---

🟢 19. Latihan Mahasiswa

🎯 Pilihan Ganda

1. Port default HTTPS adalah?

a. 25
b. 80
c. 110
d. 443

✅ Jawaban: d

---

2. Fungsi browser adalah?

a. Routing
b. Menampilkan web
c. DNS server
d. Firewall

✅ Jawaban: b

---

3. Fungsi HTTP GET adalah?

a. Menghapus data
b. Mengambil data
c. Update data
d. Mematikan server

✅ Jawaban: b

---

🟢 20. Diskusi Kelas

🎯 Topik Diskusi

1. Mengapa HTTPS sangat penting?
2. Apa dampak cache browser?
3. Mengapa web server membutuhkan keamanan tinggi?
4. Apa perbedaan browser dan search engine?

---

🟢 21. Rangkuman Materi

Materi	Inti Pembahasan
HTTP	Protokol komunikasi web
HTTPS	HTTP terenkripsi
Browser	Aplikasi akses web
Web Server	Penyedia layanan web
DNS	Penerjemah domain
Cache	Penyimpanan sementara

---

🟢 22. Kesimpulan

HTTP, browser, dan web server merupakan fondasi utama sistem web modern.

Browser bertugas meminta halaman web, HTTP menjadi media komunikasi, sedangkan web server menyediakan layanan dan data yang diminta pengguna.

Pemahaman teknologi web sangat penting dalam bidang jaringan komputer, administrasi server, keamanan jaringan, dan pengembangan aplikasi web.

---

📚 Referensi Pembelajaran

Buku

1. Andrew S. Tanenbaum — Computer Networks
2. Behrouz A. Forouzan — Data Communications and Networking
3. Kurose & Ross — Computer Networking

---

Website Referensi

• MDN Web Docs HTTP
• Apache HTTP Server
• Nginx
• Mozilla Firefox
• Google Chrome