HTTP, URL, Request & Response

Target Pertemuan

Mahasiswa mampu menjelaskan komunikasi browser–server menggunakan HTTP, membaca struktur URL, membedakan GET dan POST, memahami Request dan Response, serta mengenali Header, Body, dan Status Code.

1. Dari Pertemuan 1 ke Pertemuan 2

Pada pertemuan pertama kita sudah membahas peran browser, server, request, dan response. Sekarang kita akan melihat bagaimana browser dan server benar-benar saling berkomunikasi.

2. HTTP dan HTTPS

HTTP adalah aturan komunikasi antara client dan server. Analogi: mahasiswa meminta transkrip kepada bagian akademik; permintaan dapat dipahami karena ada prosedur komunikasi yang disepakati.

3. Praktik: Laptop sebagai Server Lokal

Aktifkan Apache di XAMPP. Buat C:\xampp\htdocs\web-lanjut\index.php.

<?php
echo "Halo dari server PHP";
?>

Buka http://localhost/web-lanjut/. Localhost menunjuk komputer sendiri; Apache melayani request dan PHP memproses file sebelum hasil dikirim ke browser.

4. Membaca URL

http://localhost/web-lanjut/mahasiswa/detail.php?id=25

Analogi: domain seperti gedung, path seperti ruang yang dituju, dan query parameter seperti informasi tambahan tentang apa yang dicari.

5. Query Parameter: Kode Sama, Request Berbeda

<?php
$nama = $_GET['nama'] ?? 'Belum ada produk';

echo "<h1>Pencarian Produk</h1>";
echo "Anda mencari: " . $nama;
?>

Coba http://localhost/web-lanjut/produk.php?nama=Laptop, lalu ubah menjadi http://localhost/web-lanjut/produk.php?nama=Mouse. Kode tetap, tetapi request berbeda sehingga response berubah.

6. GET — Meminta Data

GET umum digunakan untuk meminta/mengambil Resource: membuka berita, mencari produk, atau memfilter jadwal.

<!DOCTYPE html>
<html>
<body>
<h1>Pencarian Produk</h1>

<form action="produk.php" method="GET">
  <label>Nama Produk</label>
  <input type="text" name="nama">
  <button type="submit">Cari</button>
</form>
</body>
</html>

Isi “Laptop ASUS”, tekan Cari, lalu perhatikan URL. Alurnya: Input → Form → GET Request → PHP → Response.

7. POST — Mengirim Data untuk Diproses

POST umum digunakan ketika data dikirim untuk diproses, misalnya login, pendaftaran, atau menambah transaksi.

<!DOCTYPE html>
<html>
<body>
<h1>Login Mahasiswa</h1>

<form action="login.php" method="POST">
  <label>NIM</label>
  <input type="text" name="nim">
  <br><br>
  <label>Password</label>
  <input type="password" name="password">
  <br><br>
  <button type="submit">Login</button>
</form>
</body>
</html>

<?php
$nim = $_POST['nim'] ?? '';
$password = $_POST['password'] ?? '';

echo "<h1>Data Diterima Server</h1>";
echo "NIM: " . $nim;
?>

Perhatikan bahwa data tidak muncul sebagai query string seperti GET. Data dapat dibawa melalui request Body.

8. GET vs POST dalam Kasus Nyata

Analogi: GET seperti bertanya “Tampilkan data ini.” POST seperti menyerahkan formulir “Ini data saya, tolong diproses.”

9. Header dan Body

Analogi paket: label di luar paket memberi informasi tentang kiriman; isi paket adalah data utamanya.

10. Lihat Request Secara Nyata

Tekan F12 → buka Developer Tools → pilih Network → jalankan form → klik request yang muncul. Cari Request URL, Request Method, Status Code, Request Headers, Response Headers, dan Query String Parameters.

11. Response — Jawaban Server

Response adalah jawaban server. Google Search: kata kunci → hasil pencarian. SIAKAD: semester 3 → daftar nilai. Presensi: data kehadiran → hasil pemrosesan.

12. Status Code

<?php
http_response_code(404);

echo "<h1>404</h1>";
echo "<p>Data tidak ditemukan.</p>";
?>

Jalankan lalu cek Network. Ubah 404 menjadi 200 dan lihat perbedaannya.

13. Jangan Tertipu Tampilan

<?php
http_response_code(500);
?>
<h1>BERHASIL!</h1>
<p>Data berhasil disimpan.</p>

Tampilan dapat berkata “BERHASIL”, tetapi HTTP status-nya 500. Artinya isi halaman dan status komunikasi adalah dua hal berbeda.

14. Mini Challenge

Analisis http://localhost/web-lanjut/produk/detail.php?id=25&kategori=laptop. Tentukan protocol, domain, path, query parameter, lalu jelaskan apa yang kemungkinan diminta kepada server.

Kasus SIAKAD

Mahasiswa memilih semester 3 dan menekan “Tampilkan Nilai”. Tentukan request → process → response.

15. Hubungkan dengan Project Semester

Ambil satu aktivitas dari sistem pilihan Anda. Contoh booking lapangan:

Contoh: http://localhost/web-lanjut/jadwal.php?tanggal=2026-09-25. Laundry: http://localhost/web-lanjut/transaksi.php?id=1001. Perpustakaan: http://localhost/web-lanjut/buku.php?id=15.

16. Tugas Project Book — Minggu 2

1. Buat satu contoh URL sistem Anda dan tandai protocol, host/domain, path, query parameter.
2. Pilih dua aktivitas: minimal satu GET dan satu POST.
3. Tulis data/request → proses server → response.
4. Gambar satu alur User → Browser → Request → Server → Process → Response → Browser → User.
5. Buat mini coding form.html + proses.php. Boleh dibantu AI, tetapi wajib mampu menjelaskannya.
6. Analisis ditulis tangan di Project Book, difoto/scan, lalu diunggah ke Google Drive sesuai arahan dosen.

17. Quis

1. Bedah URL http://localhost/web-lanjut/produk.php?id=25.
2. Apa perbedaan request dan response? Berikan contoh.
3. Apa perbedaan sederhana GET dan POST?
4. Apa arti 200, 404, dan 500?
5. Pada sistem booking, user memilih tanggal lalu menekan “Cari Jadwal”. Jelaskan request, process, response.

18. Ringkasan

Glosarium

Istilah bergaris putus-putus pada materi dapat diarahkan kursor untuk menampilkan arti singkat. Pada layar sentuh, istilah dapat disentuh/fokus. Daftar lengkap: