MODUL 1 PENGENALAN HTTP DAN HTML

1.1. Deskripsi Singkat

Internet sudah menjadi ”media” sehari-hari, dimanfaatkan untuk mulai dari
bersosialisasi (dalam jaringan), mengirimkan surat elektronik, dan sebagai sumber
informasi melalui web. Mencari dan berbagi informasi melalui web merupakan bentuk
pemanfaatan Internet yang umum.

Dalam modul ini, mahasiswa diperkenalkan dengan HTTP (Hyper Text Transfer
Protocol) sebagai protokol yang digunakan dalam world wide web/www/web, dan
juga HTML (Hyper Text Markup Language) sebagai ”bahasa” yang digunakan untuk
mendeskripsikan isi dari suatu halaman web.

1.2. Tujuan Praktikum

Setelah menyelesaikan praktikum pada modul ini, mahasiswa diharapkan dapat
mengenal apa dan bagaimana cara kerja HTTP, serta mengenal bagaimana suatu
halaman web dideskripsikan.

1.3. Material Praktikum

Praktikum kali ini menggunakan terminal (Command Prompt atau PowerShell
pada sistem operasi Microsoft Windows, aplikasi Terminal pada sistem operasi macOS,
atau xterm, kterm, atau terminal pada sistem operasi Linux), dan web browser (Google
Chrome, Microsoft Edge, atau Safari). Selain itu, khusus untuk sistem operasi
Windows, anda perlu menyiapkan program Ncat yang bisa diunduh dari sini:
[Link]

1.4. Kegiatan Praktikum

1.4.1. Persiapan Untuk Pengguna Windows
Khusus untuk pengguna Microsoft Windows, siapkan program Ncat terlebih
dahulu. Unduh program dari sini: [Link] Ada dua pilihan paket
file: self-installer atau command-line zip-file: Pilih Latest stable command-line zip-file
yang artinya versi stabil terkini, dengan nama file [Link] (di mana
7.92 menunjukkan versinya; bisa saja berbeda). Setelah diunduh, ekstrak file yang
diunduh ke dalam folder yang anda pilih, misalnya ke folder
C:\Users\YourName\Desktop, di mana YourName menunjukkan username
Windows anda. Catat lokasinya, karena nanti akan digunakan.

1
1.4.2. Mengenal HTTP Dengan Terminal
Pada bagian ini anda akan diperkenalkan dengan HTTP dan cara kerjanya. HTTP
adalah salah satu protokol atau aturan yang digunakan dalam Internet yang mengatur
cara kerja web. Untuk mengakses suatu situs web atau halaman web, kita
memasukkan alamatnya, yaitu URL di tempat lokasi dalam aplikasi web browser. Web
browser kemudian akan mengirimkan permintaan atau request ke server yang
ditunjukkan oleh alamat tersebut. Response atau balasan dari server kemudian akan
diterima oleh web browser, yang kemudian ditampilkan di dalam web browser.

Gambar 1: Contoh Halaman Web

Sebagai contoh, silakan buka aplikasi web browser yang biasa anda gunakan.
Misalnya di sini kita menggunakan Google Chrome seperti yang terlihat pada Gambar
1. Buka alamat web [Link] dengan memasukkan alamat URL
tersebut. Beberapa saat kemudian, akan ditampilkan isi dari halaman web tersebut di
dalam web browser seperti yang terlihat pada gambar. Setelah kita memasukkan
alamat URL sampai dengan isinya ditampilkan, web browser melakukan komunikasi
dengan web server, yaitu (1) mengirimkan permintaan atau request dan (2) menerima
balasan atau response. Berikut ini, mari kita lihat apa yang terjadi di "balik layar".
Untuk itu, kita akan menggunakan terminal untuk mengemulasikan apa yang terjadi.

1. Buka aplikasi terminal. Untuk Windows, buka aplikasi PowerShell atau

Command Prompt/cmd; Untuk macOS, buka aplikasi Terminal; dan untuk Linux
buka program terminal (xterm, kterm, terminal). Berikut adalah contoh untuk
Windows, dengan aplikasi PowerShell. Dengan perintah cd atau "change
directory", pindahkan posisi directory atau folder ke tempat di mana program

2
 ncat diekstrak. Untuk macOS dan Linux, kita akan menggunakan perintah nc
atau netcat dan tidak perlu memindahkan directory seperti pada Windows.

Gambar 2: Menyiapkan Terminal (Windows PowerShell)

2. Berikutnya, kita akan mempelajari apa yang dilakukan web browser untuk
membuka situs [Link] Yang pertama dilakukan oleh
browser adalah membuka koneksi ke server [Link]. Jalankan
perintah berikut sesuai sistem operasi yang digunakan. Tekan tombol ENTER
atau RETURN setelah mengetikkan perintah tersebut.

Windows:
ncat -v [Link] 80

macOS/Linux:
nc -v [Link] 80

Gambar berikut menunjukkan contoh eksekusi pada Windows.

Gambar 3: Membuka Koneksi HTTP Dengan Ncat

Jika tidak muncul seperti di atas dan muncul pesan seperti perintah tidak
ditemukan, coba periksa apakah posisi directory/folder sudah benar, yaitu di
mana program ncat diekstrak. Jika muncul pesan error seperti masalah
koneksi, coba periksa apakah koneksi Internet tidak bermasalah.

3
3. Selanjutnya, kita akan mengirimkan permintaan atau request dengan
menggunakan protokol HTTP untuk meminta halaman web yang berada pada
alamat tersebut. Ketikkan perintah berikut:

GET / HTTP/1.1
Host: [Link]
👈 Baris kosong; Hanya tekan tombol ENTER atau RETURN

Pastikan ada spasi setelah "GET" dan setelah simbol "/" yang pertama. Pastikan
juga pada baris ketiga/baris terakhir, anda tidak mengetikkan karakter apa pun.
Setelah anda menekan tombol ENTER atau RETURN pada baris ketiga/baris
terakhir, akan muncul respon berupa "source code" HTML yang cukup banyak
sehingga perintah di atas akan hilang dari layar. Namun, anda bisa kembali lagi
ke atas dengan scroll ke atas.

4. Jadi setelah kita mengirimkan perintah di atas, maka web server akan langsung
membalas mengirimkan response berupa teks HTML. Transaksi antara client
dengan server web bisa dilhat pada gambar berikut.

HTTP Request
.. termasuk satu baris kosong di akhir

HTTP Response

Gambar 4: HTTP Request dan Response

Jadi kalau kita lihat di sini, di bagian HTTP Request, "GET" adalah perintah dalam
HTTP kepada web server untuk mencarikan halaman web yang berada di path
"/" dengan protocol HTTP versi 1.1. Sebagai response, yang dikembalikan oleh
web server berupa teks yang diawali dengan "HTTP/1.1 200 OK", yang
menunjukkan bahwa protocol yang digunakan adalah HTTP versi 1.1, kode
responnya adalah "200", dan deskripsi dari kode responnya adalah "OK" atau
berhasil.

4
 5. Jika muncul pesan "An established connection was aborted..", kemungkinan
koneksi diputus oleh web server karena waktu koneksi habis. Anda bisa
membuka kembali koneksinya dengan menjalankan perintah ncat atau nc
kembali.

6. Anda bisa mencoba membuka situs web atau halaman web yang lain dan amati
bagaimana responnya. Coba juga alamat web yang tidak exists atau salah,
dengan sengaja, untuk melihat bagaimana respon dari server. Amati kode
respon dan keterangannya.

7. Screenshot hasil kerja Anda dan simpan pada file laporan praktikum.

1.4.3. Mengenal HTML Dengan Web Browser

Pada bagian ini, kita akan melihat kembali hasil tampilan halaman web yang sudah
kita buka sebelumnya di web browser seperti yang terlihat pada Gambar 1. Jika sudah
ditutup, buka kembali web browser, yang dalam contoh ini menggunakan Google
Chrome, dan buka alamat [Link] Selanjutnya, mari kita lihat
apa yang ada di balik halaman web yang ditampilkan.

Untuk melihat apa yang ada di balik halaman web, atau apa yang mendeskripsikan
halaman web ini sehingga tampilannya seperti ini, kita akan membuka "Page Source"
atau kode HTML dari halaman web yang ditampilkan. Untuk Google Chrome,
tampilkan menu konteks (dengan megeklik tombol kanan mouse di atas halaman
web), lalu pilih menu "View Page Source" seperti terlihat pada Gambar 5. Kode HTML
kemudian akan ditampilkan dalam tab baru seperti terlihat pada Gambar 6.

Gambar 5: Menampilkan "Page Source"

5
 Dari Gambar 6 kita bisa melihat bahwa apa yang ditampilkan dalam web browser
sebelumnya sebetulnya berupa kumpulan teks dalam bentuk HTML (Hyper Text
Markup Language). Coba anda bandingkan dan amati, tampilan pada Gambar 1
bandingkan dengan kode HTML pada Gambar 6:

Gambar 6: Kode HTML Dari Halaman Web

a. Judul "Example Domain" yang ada pada tab dan pada halaman web, masing-
masing bagaimana markupnya dalam kode HTML?

b. Paragraf "This domain is for use...", bagaimana markupnya dalam kode HTML?

c. Baris "More Information...", bagaimana markupnya dalam kode HTML, lalu apa
fungsinya (misalnya bagaimana jika diklik)?

d. Amati dan pelajari struktur HTML dari halaman ini, bahwa HTML terbagi menjadi
dua bagian, yaitu <head> dan <body>, dan pelajari apa yang tertulis di sana dan
bagaimana fungsinya.

Tuliskan jawaban Anda untuk pertanyaan Anda untuk pertanyaan a - d pada file
laporan praktikum.

1.4.4. Membandingkan Respon HTTP dan "Page Source" HTML

Selanjutnya, mari kita bandingkan apa yang menjadi respon dari permintaan HTTP
yang kita telah kita emulasikan di 1.4.2 dengan "page source" yang telah kita dapatkan
di 1.4.3.

6
 Dari HTTP Response seperti yang terlihat pada Gambar 4, coba scroll ke bawah
sampai terlihat satu baris kosong seperti yang terlihat pada Gambar 7 berikut.

HTTP Header
termasuk satu baris kosong di
akhir

HTTP Body

Gambar 7: HTTP Response

Gambar 7 menunjukkan respon yang dikirimkan kembali dari web server setelah
permintaan atau request dikirimkan oleh client, yang dalam contoh ini menggunakan
program Ncat sebagai emulator. Struktur dari HTTP Response adalah sama dengan
HTTP Request, dan sama dengan struktur data yang digunakan dalam Internet, yaitu
terdiri dari "Header" dan "Body", yang dipisahkan oleh satu baris kosong. Sebagai
catatan, "header" dan "body" di sini berbeda dengan "head" dan "body" di dalam
file HTML.

Sekarang, coba ambil bagian "HTTP Body" saja, lalu simpan dalam satu file
tertentu. Anda bisa gunakan aplikasi Notepad jika anda menggunakan Windows, atau
aplikasi editor teks lainnya. Disarankan tidak menggunakan aplikasi pengolah kata
seperti Microsoft Word karena tampilannya nanti akan sulit untuk dilihat. Kemudian,
coba bandingkan bagian "HTTP Body" ini dengan "Page Source" seperti yang terlihat
pada Gambar 6. Pastikan bahwa isinya sama. Jika tidak sama, berarti anda mungkin
mengambil dari sumber yang berbeda. Coba ulangi kembali langkah-langkah yang
telah diberikan di atas. Simpan hasil perbandingan Anda pada file laporan.

1.5. Penugasan
Kerjakan sesuai dengan yang dijelaskan pada bagian Kegiatan Praktikum. Hasil
pekerjaan praktikum (dalam bentuk screenshot) dilaporkan dalam bentuk file lembar
kerja dengan format nama <<kelas>>_modul1_<<nim>>.pdf, contoh:
2KS1_modul1_192191234.pdf.