Mengenal Dunia Web
“Tak kenal maka tak sayang”
– Pribahasa Indonesia
Ketika pertama kali mengenal dunia web, segala sesuatu terlihat
seperti sihir di mata saya. Hidupkan komputer, colok modem (pastikan
juga tidak ada yang akan / sedang menggunakan telepon!), jalankan
software yang disediakan oleh ISP, tekan “Dial”, dan tunggu sampai
terdapat tulisan “Connected to the Internet”. Selesai terkoneksi, buka
Netscape Navigator , dan masukkan alamat website yang ingin dituju (90%
boleh.com waktu itu).
Karena hanya memandang Internet sebagai sihir, pada saat itu saya
sama sekali tidak tertarik untuk mengetahui bagaimana internet bekerja.
Tidak adanya minat tersebut membuat saya sama sekali tidak peduli akan
pengembangan web, dan meskipun sangat ingin memiliki website sendiri,
pada akhirnya saya hanya bisa membuat website menggunakan Frontpage atau
Word (dan percayalah, hasilnya sangat, sangat parah). Ketidak
mengertian saya tentang dunia web pada saat itu berdampak pada parahnya
website yang saya kembangkan. Karena hal inilah pada saat memutuskan
untuk menulis buku ini, saya mendedikasikan satu bab untuk mengenalkan
pembaca kepada dunia web, dan mudah-mudahan membangun minat pembaca
dalam dunia web. Pembelajaran yang disertai dengan minat dan
ketertarikan akan jauh lebih optimal dibandingkan pembelajaran tanpa
minat sama sekali.
Akhir kata, pengenalan akan dunia web akan kita mulai dengan melihat cara kerja web secara singkat.
Cara Kerja Web
Ketika menjelajah website dalam Internet, umumnya kita menggunakan sebuah browser. Kita memasukkan sebuah alamat, seperti
google.com
ke dalam browser, dan kemudian browser akan menampilkan website Google
kepada kita. Apa yang sebenarnya terjadi di belakang layar?
Tentu saja cara kerja web sebenarnya tidak sesederhana ini. Prosesnya disederhanakan hanya untuk ilustrasi saja.
Secara sederhana, dapat dikatakan bahwa web bekerja seperti pos, di
mana setiap orang yang ingin berkomunikasi dengan orang lain harus
melakukan pengiriman pesan. Identifikasi penerima pesan dilakukan
melalui alamat dan kode pos, yang ditentukan oleh kantor pos. Pesan yang
dikirimkan ini kemudian disampaikan oleh kantor pos, untuk kemudian
dibaca oleh penerima pesan. “Kantor pos”, sebagai pihak yang menentukan
alamat dan kode pos, dikenal dengan nama DNS (Domain Name Server) pada
dunia web. “Alamat”, sebagai tempat penerima pesan, dikenal sebagai IP
Address, sementara penerima pesannya sendiri tentunya adalah website
atau komputer lain. Pengirim pesan, tentunya adalah web browser yang
kita gunakan. Ilustrasi lengkap tapi sederhana dari langkah-langkah
tersebut dapat dilihat pada Gambar
Bagaimana Web Bekerja.
Mari kita telaah langkah demi langkah yang diperlihatkan oleh Gambar
Bagaimana Web Bekerja:
- Langkah Pertama
- Cukup jelas. Pengguna memberikan perintah kepada browser untuk membuka halaman tertentu.
- Langkah Kedua
- Browser kemudian harus melalui firewall atau proxy, sebuah sistem
pengamanan di sisi pengguna atau ISP, sebelum memasuki Internet.
- Langkah Ketiga
- Browser menanyakan DNS alamat IP dari http://www.google.com.
- Langkah Keempat
- Browser berjalan menuju alamat IP yang diberikan oleh DNS.
- Langkah Kelima
- Setelah mencapai alamat, browser biasanya menemui sekumpulan website
pada alamat tersebut. Hal ini disebabkan karena umumnya beberapa
website disajikan dalam satu server (yang dikenal dengan nama Hosting
Server) untuk menghemat sumber daya.
- Langkah Keenam
- Browser memasuki “ruang” google.com pada hosting server, dan meminta konten dari google.com kepada penyaji konten. Pada gambar Bagaimana Web Bekerja, penyaji konten diilustrasikan sebagai burung hantu.
- Langkah Ketujuh
- Data dikirimkan kembali ke pengguna.
- Langkah Kedelapan
- Ketika data sampai, maka browser menampilkan data yang didapatkan kepada pengguna.
- Langkah Kesembilan
- Selesai.
Perlu ditekankan bahwa langkah-langkah di atas merupakan langkah yang
telah disederhanakan, dan hanya mencakup satu bagian dari browser:
pengambilan data dari server. Bagian ini bahkan adalah bagian yang
paling sederhana dari sebuah browser, karena sebagian besar pekerjaan
dikerjakan oleh jaringan Internet. Kegunaan utama (dan tugas tersulit)
dari sebuah browser ialah menampilkan halaman web. Penjelasan mengenai
hal ini akan diberikan pada bagian selanjutnya.
Sampai pada titik ini, kita dapat melihat bahwa web merupakan
kumpulan dokumen masif dalam jaringan yang dapat diakses kapanpun,
selama kita terkoneksi dalam jaringan tersebut. Untuk pengembangan web
sendiri, terdapat dua komponen penting, yaitu: komponen server yang
menyajikan halaman kepada kita, dan komponen klien yang menampilkan
halaman yang disajikan oleh server ke pengguna. Komponen server dikenal
dengan nama
web server, sementara komponen klien dikenal dengan nama
web browser. Contoh dari web server adalah Apache dan nginx, sementara contoh dari web browser yaitu Internet Explorer dan Mozilla Firefox.
Karena memiliki dua komponen dalam pengembangan, tentunya pembangunan
sebuah website akan memerlukan pengembangan dari kedua sisi. Seorang
pengembang web yang handal setidaknya harus dapat melakukan pengembangan
klien dan server, meskipun banyak pengembang yang memiliki spesialisasi
pada satu sisi saja (misalnya penulis lebih menguasai pengembangan
server, meskipun tetap harus memiliki pengetahuan yang mumpuni pada sisi
klien). Mempelajari web, menurut penulis, lebih baik dilakukan mulai
dari sisi klien terlebih dahulu, karena pengembangan pada sisi server
tidak dapat terlepas dari pengembangan sisi klien. Ingat, tujuan akhir
dari server ialah untuk menghasilkan halaman web kepada pengguna, yang
adalah sisi klien.
HyperText Markup Language
HyperText Markup Language, yang lebih dikenal sebagai HTML, merupakan
bahasa yang digunakan untuk membuat halaman web. HTML dikirimkan kepada
pengguna oleh web server, untuk kemudian ditampilkan oleh web browser.
Sebagai sebuah
markup language, HTML bertugas hanya memberikan informasi mengenai isi dari konten (dengan cara memberikan “tanda” pada teks, makanya disebut
markup),
tanpa memiliki informasi mengenai tampilan (style) dari konten
tersebut. HTML hanya memberitahukan browser bahwa bagian tertentu dari
sebuah tulisan merupakan kutipan, atau harus dicetak tebal. Bagaimana
bentuk dari tulisan cetak tebal tidak diatur dalam HTML.
Karena bertugas hanya memberikan informasi isi (semantik), HTML
bersifat sangat sederhana, biasanya hanya sepasang penanda (tag) yang
melingkupi teks yang ingin ditandai. Listing di bawah memberikan contoh
potongan HTML pada teks:
Scala (yang adalah kepanjangan dari "<u>Scalable Language</u>") merupakan
sebuah bahasa pemrograman yang dirancang untuk digunakan dalam berbagai lingkungan,
mulai dari <i>script</i> sederhana sampai dengan sebuah sistem yang besar dan rumit.
Istilah kerennya, Scala adalah sebuah <b>general purpose programming language</b>.
bagian mana yang merupkana HTML pada kode di atas? Dengan mudah
tentunya anda dapat melihat, bahwa bagian yang merupakan kode HTML
adalah kode-kode yang tidak dapat dibaca seperti
<u>Scalable Language</u>. Penanda teks seperti
<u></u> tersebut dikenal dengan nama
tag pada HTML. Setiap tag memberikan arti khusus kepada teks. Tag “u” berarti teks tersebut bergaris bawah (
underlined). Tag “i” berarti teks dicetak miring (
italics), dan tag “b”, seperti yang dapat ditebak, memberikan huruf tebal (
bold).
Kaget bahwa ternyata HTML sesederhana itu? Ya, HTML memang sangat
sederhana! Pembelajaran HTML biasanya berkisar dalam eksperimen dan
pembacaan dokumentasi mengenai setiap tag. Kedua hal tersebut
menyebabkan penguasaan HTML hanya menjadi masalah kerajinan membaca dan
pengalaman. Tantangan dalam pengembangan web pada sisi klien utamanya
terdapat pada memperindah tampilan dan interaktifitas dari teks yang
telah diformat HTML.
Cascading StyleSheet
Jadi, kalau HTML hanya berguna untuk menandai teks, bagaimana kita
memberikan tampilan yang bagus pada teks tersebut? Dokumen HTML
ditingkatkan tampilannya menggunakan sebuah bahasa lain, yang dikenal
dengan nama Cascading Stylesheet, atau CSS. CSS sendiri merupakan bahasa
deklaratif yang sangat kompleks, sehingga intrik utamanya tidak dapat
dijelaskan di dalam beberapa paragraf, seperti pada HTML. Penjelasan
detil mengenai CSS akan diberikan pada bagian selanjutnya. Untuk
sekarang, hanya perlu dimengerti bahwa untuk membuat halaman web yang
indah, diperlukan pengetahuan HTML dan CSS yang baik.
Javascript
Pada sebuah website modern, web yang enak dipandang mata saja tidak
cukup. Sebuah website yang baik juga kerap kali bersifat sangat
interaktif. Nama anda terlalu panjang untuk masuk ke dalam kolom nama di
formulir pendaftaran? Tenang saja, web kami akan memperpanjang kolom
tersebut begitu anda mengetik sampai di ujung kolom. Ingin mengetahui
apakah user id yang diinginkan telah terpakai? Tenang, otomatis dicek
kok, tidak perlu melakukan apa-apa.
Interaktifitas seperti yang dicontohkan di atas dimungkinkan dengan
adanya kode khusus pada website tersebut yang dijalankan oleh browser
ketika kita menampilkan website. Kode yang dijalankan ini ditulis dalam
bahasa pemrograman Javascript, yang dapat langsung berinteraksi dengan
HTML dan mengubah atribut, CSS, maupun isi dari HTML itu sendiri. Sama
seperti CSS, Javascript tidak akan dibahas mendalam pada bagian ini, dan
bahkan pada buku ini sama sekali. Pembahasan mengenai Javascript akan
memerlukan sebuah buku tersendiri, karena kayanya bahasa pemrograman
ini.
Browser dan Kode Klien
Sejauh ini, kita telah mengetahui bahwa pengembangan pada sisi klien
dilakukan dengan menggunakan tiga bahasa, yaitu: HTML sebagai bahasa
penanda konten, CSS untuk membuat desain tampilan, dan Javascript untuk
inteaktifitas. Ketika browser menerima ketiga kode tersebut dari web
server, maka browser akan menjalankan ketiga kode tersebut. Hasil dari
eksekusi kode tersebut ialah tampilan website yang diberikan kepada
pengguna. Jadi, tugas utama dari pengembang browser ialah membaca dan
menjalankan kode pada sisi klien, untuk kemudian ditampilkan kepada
pengguna.
Untuk memastikan berbagai browser yang ada dapat mengintepretasikan
kode web dengan benar, sebuah badan standar dibuat untuk memberikan
spesifikasi yang dapat dirujuk oleh pengembang browser. Badan standar
ini dikenal dengan nama W3C (World Wide Web Consortium). Idealnya,
setiap browser yang mengimplementasikan spesifikasi HTML dan CSS sesuai
dengan standar yang ditentukan (W3C hanya mengatur kedua standar
tersebut, Javascript diatur oleh badan lain) akan mendapatkan tampilan
yang sama dari kode yang sama. Sayangnya, hal ini tidak sesuai dengan
kenyataan yang ada di lapangan. Pada implementasinya, setiap browser
memiliki “keunikan” tersendiri dalam mengintepretasikan HTML dan CSS.
Hal ini menyebabkan pengembang pada sisi klien harus menguji web yang
dikembangkan pada banyak browser, atau setidaknya beberapa browser yang
paling populer, untuk memastikan halaman yang dikembangkan dapat tampil
sesuai dengan keinginan.
Beberapa browser utama yang umumnya didukung oleh kebanyakan website
karena pangsa pasarnya yang besar yaitu: Microsoft Internet Explorer,
Mozilla Firefox, Google Chrome, Apple Safari, dan Opera. Tabel
Browser dan engine-nya table-browser-engine memperlihatkan engine yang digunakan oleh masing-masing browser.
Browser dan engine-nya
| Browser |
Engine |
|---|
| Microsoft Internet Explorer |
Trident |
| Mozilla Firefox |
Gecko |
| Google Chrome |
Webkit |
| Apple Safari |
Webkit |
| Opera |
Presto (Kedepannya Webkit) |
Perbedaan-perbedaan tampilan yang diashilkan oleh setiap engine dapat
berupa perbedaan kecil, seperti ukuran font, ataupun perbedaan yang
sangat besar, seperti perbedaan layout. Gambar
Perbedaan Tampilan Browser memperlihatkan contoh perbedaan tampilah oleh empat buah browser, dari satu halaman yang sama . Jika ditemui perbedaan-perbedaan sejenis pada bagian selanjutnya dalam buku ini, catatan khusus akan diberikan kepada pembaca.
Adanya perbedaan cara setiap browser menampilkan ini menyebabkan
pengembang web pada umumnya memiliki banyak browser pada sistem
pengembangan mereka, dan biasanya akan menguji tampilan web mereka pada
banyak browser. Begitupun, kesamaan tampilan 100% umumnya tidak menjadi
tujuan akhir, karena hal tersebut akan sangat sulit dilakukan. Yang
umumnya ingin dicapai dengan pengujian pada banyak browser ialah tidak
adanya tampilan yang menyebabkan web tidak dapat digunakan pada browser
tertentu, misalnya komponen yang saling menimpa ataupun tulisan yang
terlalu besar.
Jika anda masih belum memiliki seluruh browser utama yang tertera pada tabel
Browser dan engine-nya,
tunggu apa lagi? Segera pasang semua browser yang ada, dan lihat
berbagai perbedaan dari tiap browser pada website yang sering anda
kunjungi!
Catatan Kaki
