Bab 1: Pengantar Konten Web Dinamis

World Wide Web terus berkembang pesat dan kini perannya sudah jauh melebihi tujuan awal kemunculannya di awal tahun 1990-an, yang sebenarnya dibuat untuk menjawab permasalahan tertentu saja. Saat itu, eksperimen di CERN (European Laboratory for Particle Physics, sekarang lebih dikenal sebagai pengelola Large Hadron Collider) menghasilkan begitu banyak data sehingga para ilmuwan di seluruh dunia kesulitan untuk mendapatkannya.

Kala itu, internet memang sudah ada dan sudah menghubungkan ratusan ribu komputer. Oleh sebab itu, Tim Berners-Lee, peneliti di CERN, merancang cara agar komputer-komputer itu bisa saling bertukar informasi lewat jaringan hyperlink, yang kini kita kenal dengan Hypertext Transfer Protocol (HTTP). Ia pun membuat markup language baru bernama Hypertext Markup Language (HTML), sekaligus juga membangun web browser dan web server pertama.

Era Web 1.0

Istilah Web 1.0 sendiri sebenarnya baru muncul setelah orang mulai menyebut Web 2.0. Pada masa Web 1.0, umumnya pengguna hanya sebatas menjadi pembaca konten, meski sudah ada beberapa website pribadi, tetapi belum ada social network. Fitur seperti Guestbook digunakan untuk menggantikan kolom komentar. Walaupun ada website yang memakai database, sumber daya server serta bandwidth masih sangat terbatas. Navigasi dan tampilan situs masih sederhana, dikelola dengan tombol dan gambar simpel, dan interaksi pengguna juga nyaris belum ada.

Kini, web sederhana seperti itu sudah dianggap hal lumrah, tapi waktu itu konsep ini sungguh revolusioner. Tingkat koneksi terbaik untuk pengguna rumahan saat itu hanya sebatas dial-up ke bulletin board (sejenis forum), di mana kamu hanya bisa bertukar pesan atau data dengan pengguna lain dalam layanan yang sama. Artinya, agar bisa efektif berkomunikasi secara elektronik, kamu harus jadi anggota banyak bulletin board berbeda.

Namun, apa yang dibuat Berners-Lee mengubah semuanya dalam lompatan besar, sampai akhirnya di pertengahan 1990-an ada tiga browser saling bersaing memperebutkan atensi lima juta pengguna. Walau begitu, terasa masih “ada yang kurang”. Konten berupa teks dan gambar yang ditautkan memang sebuah inovasi keren, namun web saat itu belum memberi peluang bagi pengguna untuk mendapat konten yang dinamis serta disesuaikan secara instan sesuai kebutuhan mereka. Web terasa “datar”, meski sudah ada efek seperti teks berjalan dan animasi GIF.

Hadirnya fitur-fitur seperti shopping cart, mesin pencari, dan jejaring sosial jelas membawa perubahan cara kita dalam mengakses web. Pada bab ini, kamu akan mengenal berbagai bagian yang membentuk web beserta perangkat lunak yang menjadikannya sebagai pengalaman yang dinamis dan menarik.

note

Beberapa akronim akan mulai digunakan dari awal bab. Penulis berusaha menjelaskan secara perlahan sebelum melanjutkan, jadi kamu tidak perlu khawatir dengan istilah-istilah tersebut sekarang, karena penjelasan lengkapnya akan lebih jelas seiring kamu membaca halaman-halaman berikutnya.

HTTP dan HTML: di Masa Awal

HTTP sendiri adalah protokol komunikasi yang mengatur proses request dan response dari browser di komputer pengguna ke web server. Server bertugas menerima permintaan dari client, lalu memberi respon, biasanya berupa halaman web yang diminta—itulah mengapa ia disebut server. Lawan dari server adalah client, yaitu pengguna, browser, atau komputer pengakses.

Di antara client dan server, sering kali ada perangkat tambahan seperti router, proxy, hingga gateway dan lainnya. Tiap perangkat ini berfungsi untuk memastikan lalu lintas request dan response berjalan baik, umumnya lewat internet. Beberapa perangkat tersebut juga dapat mempercepat akses web dengan menyimpan halaman di cache lokal, jadi konten bisa langsung diambil dari cache tanpa harus selalu mengambil ulang ke server asal.

Sebuah web server bisa melayani banyak koneksi secara bersamaan. Ketika tidak sedang “sibuk”, server hanya menunggu saja hingga ada permintaan masuk. Saat ada koneksi masuk, server akan membalas dengan response.

Proses Request/Response

Pada dasarnya, alur request/response adalah: browser (atau client lain) meminta sebuah halaman ke web server, lalu server membalas dengan mengirim halaman tersebut, dan akhirnya browser menampilkan halaman yang didapat (lihat gambar di bawah).

Rangkaian proses request-response pada web secara umum sebagai berikut:

1. Kamu mengetikkan http://server.com di address bar browser.
2. Browser mencari tahu alamat IP dari server.com.
3. Browser mengirim permintaan (request) untuk mendapatkan halaman utama di server.com.
4. Permintaan tadi melintasi internet hingga sampai ke web server server.com.
5. Web server menerima permintaan dan mencari file halaman di penyimpanannya.
6. File halaman itu diambil dan dikirim kembali ke browser.
7. Browser menampilkan halaman web hasil balasan tadi.

Untuk setiap objek pada halaman seperti gambar, video, atau CSS stylesheet, proses serupa juga di ulang.

Pada langkah kedua, browser sesungguhnya mencari alamat IP milik server.com. Semua komputer yang terhubung ke internet punya alamat IP, termasuk milikmu sendiri, tapi biasanya kita lebih mudah mengakses server dengan nama seperti google.com. Browser lalu menggunakan layanan khusus, Domain Name System (DNS), untuk mencari tau IP dari nama tersebut sebelum akhirnya berkomunikasi dengan komputer tujuan.

Jika berurusan dengan halaman web dinamis, urutannya menjadi sedikit lebih rumit karena melibatkan PHP dan MySQL. Misal kamu mengklik gambar jas hujan, PHP akan membuat request ke database menggunakan SQL (kamu akan mempelajari perintahnya di buku ini) dan permintaan itu dikirim ke MySQL. Hasil pencarian mengenai jas hujan tadi dikembalikan oleh MySQL, kemudian PHP membungkusnya menjadi HTML lalu dikirimkan ke browser untuk ditampilkan (lihat gambar).

Secara detail, berikut tahapan proses request-response dinamisnya:

1. Kamu mengakses http://server.com lewat browser.
2. Browser mencari alamat IP server.com.
3. Browser mengirim permintaan ke alamat itu agar dapat halaman utama.
4. Permintaan mengalir melewati internet dan tiba di web server.
5. Web server menerima request, lalu mengambil halaman utama dari hard disk.
6. Setelah halaman utama dimuat di memori, server menyadari file itu memuat skrip PHP, lalu meneruskannya ke PHP interpreter.
7. Interpreter PHP menjalankan kode PHP.
8. Jika ada bagian kode PHP yang berisi perintah SQL, interpreter akan meneruskannya ke MySQL.
9. MySQL membalas dengan mengembalikan hasil query-nya ke PHP interpreter.
10. Interpreter PHP lalu memberikan hasil eksekusi beserta data dari MySQL ke web server.
11. Terakhir, web server mengirim hasil tersebut balik ke browser client untuk ditampilkan.

Meski serangkaian proses ini terasa kompleks, kamu tak harus terlalu menghafalnya karena semuanya berlangsung otomatis di balik layar.

Perlu diingat, halaman HTML balasan yang diterima browser bisa juga menyertakan kode JavaScript, yang nantinya dijalankan di sisi pengguna dan bahkan dapat men-trigger permintaan lain ke server.

Mengapa Memilih PHP, MySQL, JavaScript, CSS, dan HTML

Diawal tadi, kamu telah dikenalkan ke era Web 1.0, namun evolusi pun terjadi dengan hadirnya Web 1.1 akibat munculnya berbagai pengembangan browser seperti Java, JavaScript, Flash, dan ActiveX. Di sisi server, perkembangan juga terlihat pada Common Gateway Interface (CGI) dengan penggunaan bahasa scripting seperti Perl (pilihan lain selain PHP), juga server-side scripting, teknik untuk memasukkan isi file ke dalam file lain secara dinamis.

Walau Perl cukup terkenal dan punya penggemar yang loyal, PHP jauh lebih sederhana dan sudah terintegrasi dengan MySQL, sehingga jumlah penggunanya jauh lebih banyak. Sementara itu, JavaScript makin krusial perannya untuk manipulasi HTML secara dinamis, bahkan kini menjadi tulang punggung berbagai komunikasi asynchronous antara client dan server setelah halaman web selesai dimuat. Lewat metode asynchronous, sebuah halaman dapat memproses dan mengirimkan permintaan ke server di latar belakang tanpa diketahui pengguna.

Tidak diragukan lagi, keunggulan open source serta sinergi antara PHP dan MySQL membuat keduanya berkembang pesat. Tapi mengapa banyak developer memilih dua teknologi ini? Jawabannya sederhana: mereka mudah dipakai untuk membuat website yang dinamis dengan cepat. MySQL, selain cepat dan andal, juga mudah dikelola dan menyediakan nyaris semua yang dibutuhkan website untuk mencari dan menyajikan data ke browser.

Bila kamu memasukkan JavaScript dan CSS ke dalam kombinasi ini, kamu bisa mendapatkan fondasi yang solid untuk membangun website yang benar-benar dinamis dan interaktif—terutama karena kini banyak framework JavaScript canggih yang sangat membantu mempercepat pengembangan web. Salah satu contoh framework yang dulu begitu populer adalah jQuery, bahkan sampai beberapa tahun terakhir menjadi program andalan programmer dalam membangun fitur asynchronous.

Sekarang, ada library JavaScript yang lebih kekinian, seperti React, yang semakin meroket popularitasnya. Sampai-sampai, saat buku ini ditulis, lowongan pekerjaan untuk developer React bahkan melebihi jQuery.

React menawarkan berbagai fitur modern untuk membangun UI yang kompleks dan dapat berinteraksi dengan server secara real time di halaman berbasis JavaScript. Dengan React, kamu dapat membuat component yang menjadi bagian-bagian dari aplikasi React.

Component React ini bisa berupa elemen sederhana seperti Button, Text, Label, atau Grid, maupun komponen yang lebih kompleks seperti widget login atau popup modal. React juga mendukung rendering komponen di server menggunakan tool seperti Next.js. React bisa diterapkan ke aplikasi lama (memang didesain untuk kemudahan itu), sehingga kamu dapat mengubah sedikit demi sedikit bagian aplikasimu ke React. Bila dirasa sukses, seluruh aplikasi bisa dimigrasi ke React.js. Namun, framework seperti Vue.js kadang lebih cocok untuk perubahan bertahap seperti ini.

MariaDB: “Saudara Kembar” MySQL

Setelah Oracle (raksasa database) mengambil alih Sun Microsystems (pemilik MySQL), komunitas khawatir MySQL tidak akan open source lagi. Karena itu, MariaDB dibuat sebagai fork dari MySQL guna memastikan tetap gratis di bawah lisensi GNU GPL, yang menjamin bebas pakai, pelajari, bagi, dan modifikasi. MariaDB dikembangkan langsung oleh developer inti MySQL, sehingga kompatibilitasnya sangat tinggi.

Karena hal tersebut, bisa jadi kamu akan menjumpai MariaDB di beberapa server sebagai pengganti MySQL. Tidak usah khawatir, sebab semua materi di buku ini akan berjalan sama baiknya, baik di MySQL maupun MariaDB. Keduanya bisa saling menggantikan tanpa kendala berarti.

Syukurlah, kekhawatiran bahwa MySQL bisa “tutup” ternyata tidak terbukti karena status open source tetap dipertahankan. Oracle hanya mengenakan biaya untuk dukungan premium atau untuk fitur-fitur tingkat lanjut seperti geo-replication dan automatic scaling. Hanya saja, berbeda dengan MariaDB, MySQL saat ini tidak 100% dikembangkan komunitas. Dengan adanya MariaDB yang selalu tersedia, para developer juga merasa lebih tenang, dan semoga MySQL akan selalu terbuka.

Belajar PHP

Mengaktifkan fitur dinamis di halaman web dengan PHP sangatlah mudah. Jika file kamu berakhiran .php, otomatis kamu sudah bisa menulis kode scripting di dalamnya. Bagi developer, cukup tulis kode seperti ini:

<?php
echo "Today is " . date("l") . ". ";
?>

Here's the latest news.

Perintah <?php menginformasikan ke web server agar bagian setelahnya diproses sebagai kode PHP hingga bertemu tanda ?>. Di luar tanda itu, seluruh isi file dikirim apa adanya ke browser sebagai HTML murni. Jadi, kalimat Here's the latest news. langsung tampil biasa di browser, sedangkan fungsi date di dalam tag PHP akan mencetak nama hari sesuai waktu server.

Hasil akhir dari gabungan contoh di atas adalah:

Today is Wednesday. Here's the latest news.

Fleksibilitas PHP membuat sebagian developer lebih suka menulis kode PHP “nyelip” di tengah HTML, misalnya:

Today is <?php echo date("l"); ?>. Here's the latest news.

Tentu masih ada banyak teknik lain untuk mengatur penampilan dan pemformatan data, yang akan dijelaskan di bab-bab PHP. Intinya, PHP memberi kamu bahasa scripting yang cepat, mudah, dan dapat menyatu dengan HTML dengan lancar, walau kecepatan murninya memang tidak secepat bahasa yang dikompilasi seperti C.

note

Jika kamu ingin mengetik ulang contoh-contoh PHP dalam buku ini secara manual di editor kode, ingat untuk selalu menyertakan <?php di awal file dan ?> di akhir, agar script PHP bisa dijalankan PHP interpreter. Supaya lebih praktis, kamu bisa siapkan file khusus bernama example.php dengan template tag tersebut di dalamnya.

Dengan memanfaatkan PHP, kamu seakan memegang kendali penuh atas web server. Mulai dari mengubah isi HTML secara dinamis, memproses pembayaran online, menambahkan data pengguna ke database, atau bahkan mengambil info dari web lain, semua bisa dikerjakan dalam satu file PHP berdampingan dengan HTML.

Belajar MySQL

Tentunya, mengubah halaman HTML secara dinamis akan sia-sia kalau kamu tidak bisa mencatat semua input pengguna ke website-mu. Dulu, situs-situs menyimpan data (seperti username dan password) hanya di file teks sederhana, namun solusi ini sering bermasalah jika file tidak terlindungi atau terlalu sering diakses sekaligus. File biasa juga gampang “kelewat besar” sehingga sulit dikelola, apalagi jika harus digabung dan dicari dengan perintah kompleks.

Di sinilah pentingnya database relasional dengan kemampuan “structured querying”. MySQL jadi pilihan utama karena bisa dipakai gratis dan terpasang di sangat banyak server web. Singkatnya, MySQL adalah database management system yang tangguh, cepat, dan perintah-perintahnya mudah dipahami hampir menyerupai kalimat biasa.

Di level paling atas, MySQL adalah sebuah “database”; di dalamnya kamu bisa punya satu atau banyak “table” tempat data disimpan. Gampangnya, bayangkan file spreadsheet Excel dengan banyak sheet: satu file = sebuah database, tiap sheet = satu table.

Misal, kamu punya tabel users, yang sudah disiapkan kolom seperti surname, firstname, dan email. Jika ingin menambah pengguna baru, cukup dengan:

INSERT INTO users VALUES('Smith', 'John', 'jsmith@mysite.com');

Tentu sebelumnya kamu sudah harus membuat database, table, dan field-fieldnya. Tapi dari contoh di atas, terlihat betapa mudahnya menambah data ke database.

Mencari data pun mudah. Misal, kamu tahu email seorang user dan ingin mencari nama aslinya, cukup jalankan query seperti ini:

SELECT surname,firstname FROM users WHERE email='jsmith@mysite.com';

Hasilnya, MySQL akan mengembalikan data Smith, John atau nama yang terkait dengan email tersebut.

Bayangkan, kemampuan MySQL tidak cuma untuk perintah INSERT dan SELECT saja. Kamu bisa menggabungkan data terkait, mengatur urutan hasil, melakukan pencarian parsial, hanya mengambil urutan hasil ke-n saja, dan masih banyak lagi.

Dengan PHP, semua proses ke MySQL itu bisa dilakukan tanpa “bersentuhan” langsung dengan command-line MySQL. Keuntungannya, data yang diterima dapat disimpan di array dan diproses lebih lanjut, termasuk melakukan pencarian berlapis berdasarkan hasil query sebelumnya.

Belajar JavaScript

JavaScript dibuat untuk memberi kendali scripting atas setiap elemen dalam dokumen HTML. Dengan kata lain, JavaScript memungkinkan bentuk interaksi yang dinamis, contohnya memeriksa alamat email input oleh user dan menampilkan pesan seperti “Apakah data yang kamu masukkan sudah benar?” (tapi harus diingat, keamanan tetap harus dijaga di server, bukan di JavaScript!).

Jika digabung dengan CSS (lihat “Belajar CSS” setelah ini), JavaScript jadi kekuatan utama pembentuk halaman web yang bisa berubah seketika di depan mata, bukan cuma ketika halaman datang dari server.

Dulu, JavaScript agak rumit digunakan karena produsen browser ingin memperluas fitur sendiri-sendiri walau akhirnya malah memperparah masalah kompatibilitas.

Untungnya, sekarang JavaScript sudah jauh lebih baik dan hampir semua vendor browser menyadari bahwa kompatibilitas itu sangat penting, sehingga kamu tidak perlu lagi pusing-pusing menulis kode khusus untuk browser tertentu.

Untuk contoh sederhana, berikut cara memakai JavaScript dasar yang didukung semua browser:

<script>document.write("Today is " + Date() );</script>

Kode di atas menginstruksikan browser mengeksekusi apapun di dalam tag <script> sebagai JavaScript. Hasilnya, browser akan mencetak “Today is” lalu tanggal dan waktu yang dihasilkan dari fungsi Date bawaan JavaScript, contohnya:

Today is Wed Jan 01 2025 01:23:45

note

Fungsi document.write dipakai di sini karena memang lebih mudah untuk mendapat potongan kode yang pendek. Namun, ada cara-cara yang lebih baik untuk menampilkan data ataupun saat debugging, dan nanti akan dipelajari bersamaan dengan alasan kapan dan mengapa kamu sebaiknya memilih alternatif tersebut.

Seperti disinggung sebelumnya, fungsi utama JavaScript sejak awal adalah memberi kendali dinamis pada komponen HTML—dan itu tetap penting hingga sekarang. Namun, posisinya kini makin strategis sebagai bahasa utama pengembangan web application, misalnya lewat fitur Ajax, yang memungkinkan request ke server dilakukan di latar belakang.

Komunikasi asynchronous semacam ini membuat aplikasi web makin mirip program desktop, karena konten baru bisa diambil dan diperbarui tanpa harus reload halaman. Contohnya, mengganti foto profil di jejaring sosial atau menukar tombol dengan hasil jawaban langsung. Topik ini akan dikupas tuntas nanti di Bab 17.

Belajar CSS

CSS adalah partner penting HTML, yang bertugas membuat tampilan tulisan serta gambar tetap konsisten dan enak dilihat di semua layar pengguna. Belakangan, sejak hadirnya standar CSS3, CSS kini punya kemampuan interaksi dinamis setara JavaScript. Contohnya, bukan hanya ukuran maupun warna dan border yang bisa diubah, tapi kamu juga bisa menambahi animasi transisi atau transformasi hanya dengan beberapa baris CSS.

Sebagai tambahan, penomoran versi CSS (misal CSS2, CSS3) kini tak terlalu dipakai lagi. Istilah Cascade Style Sheets cukup disebut CSS, meski beberapa bagian submodulnya tetap memakai angka level seperti CSS Selectors Level 4, CSS Images Level 3, dan seterusnya.

Menerapkan CSS bisa dengan cara menyisipkan beberapa aturan (rule) di tengah tag <style> dalam <head> halaman web, misalnya:

<style>
    p {
        text-align:justify;
        font-family:Helvetica;
    }
</style>

Aturan di atas mengatur agar semua paragraf (<p>) menjadi rata kiri-kanan dan menggunakan font Helvetica.

Selain cara di atas, kamu bisa juga menuliskan CSS langsung dalam tag HTML, atau menulis di file terpisah yang bisa di-include secara khusus. Fleksibilitas ini membuat kamu bebas berkreasi memberi style pada setiap elemen HTML, juga memberi efek hover, animasi saat mouse melintas, dan lain-lain. Kamu akan belajar cara manipulasi properti CSS baik dari JavaScript maupun dari HTML itu sendiri.

Nantinya di buku ini, kamu juga akan membahas fitur-fitur CSS yang lebih lanjut seperti border, shadow, efek teks, transisi, transformasi, hingga teknologi powerful seperti flexbox dan CSS Grid.

HTML5 dan Standar Web Modern

Walaupun berbagai penambahan fitur pada standar lama sangat bermanfaat, tetap saja para developer ingin segalanya jadi lebih fleksibel. Contohnya, dulu sangat sulit untuk memproses grafik di browser tanpa menggunakan plug-in, misal Flash (yang sekarang sudah ditinggalkan). Situasi serupa dialami untuk audio dan video: penyisipan media tidak semudah saat ini. Bahkan, dalam perjalanan perkembangan HTML, banyak muncul masalah ketidakkonsistenan.

Untuk merapikan semuanya sekaligus memperbarui web ke era lebih baru, akhirnya dibuatlah standar HTML5. Usaha pengembangan HTML5 sudah dimulai sejak tahun 2004 oleh Mozilla Foundation dan Opera Software (pembuat browser populer masa itu).

Kini, HTML5 dikelola oleh WHATWG (Web Hypertext Application Technology Working Group) dan dinamakan HTML Living Standard. Artinya, standar ini terus diperbarui tanpa henti, dan fitur-fitur baru akan terus bertambah seiring waktu berjalan.

Beberapa fitur terbaik HTML5 dalam pengelolaan media antara lain kehadiran tag <audio>, <video>, serta <canvas> untuk menambah kemampuan suara, video, maupun grafik modern.

tip

Ada hal kecil yang disyukuri penulis dari HTML5, yaitu aturan wajib XHTML untuk elemen self-closing kini tidak lagi harus diikuti. Dahulu, jika ingin membuat baris baru, pakai <br>. Tapi, agar ramah dengan XHTML (yang awalnya direncanakan menggantikan HTML, namun gagal), bentuknya diubah jadi <br />, alias ada tambahan garis miring karena seolah semua elemen harus ada penutup. Sekarang kamu bebas memakai cara lama atau cara baru untuk elemen semacam itu.

Di buku ini, penulis kembali memakai gaya HTML klasik seperti <br>, <hr>, dan sebagainya, mengikuti rekomendasi standar mutakhir. Tetapi, framework seperti React yang menggunakan JSX tetap “memaksa” karakter / di akhir, sehingga pada contoh React di buku ini, format <br /> dan sejenisnya pun tetap digunakan.

Web Server Apache

Selain PHP, MySQL, JavaScript, CSS, dan HTML, ada “pahlawan” keenam dalam dunia web dinamis, yakni web server. Dalam buku ini, yang dimaksud adalah Apache. Sebelumnya kita sudah sedikit membahas apa saja peran web server dalam pertukaran HTTP antara server dan client, namun sebenarnya, tugas Apache jauh lebih beragam di balik layar.

Apache tak hanya melayani file HTML, tapi juga file gambar, audio MP3, RSS feed, dan file lainnya. Bahkan objek-objek itu bisa berupa file statis, atau file dinamis hasil olahan program (misal dari PHP). Ya, PHP bahkan bisa menghasilkan gambar dan file lain baik secara real time maupun sebelumnya.

Biasanya, untuk pengolahan semacam itu, tersedia modul khusus di Apache atau di PHP yang bisa dipanggil saat runtime. Salah satunya adalah library GD (Graphics Draw) yang banyak digunakan PHP dalam membuat maupun memanipulasi gambar.

Selain modul PHP, Apache punya banyak modul lain yang penting bagi programmer web—misal, modul untuk keamanan, modul Rewrite yang memungkinkan pengaturan format URL, juga modul Proxy agar file yang sering diakses bisa langsung disajikan dari cache tanpa membebani server terlalu berat.

Bab-bab berikutnya dari buku ini akan mengajarkan cara memakai beberapa modul canggih itu untuk mengoptimalkan tiga teknologi utama yang akan kita pelajari.

Node.js: Pilihan Lain Pengganti Apache

Pada tahun 2009, seorang developer bernama Ryan Dahl merasa Apache kurang cocok untuk menangani koneksi simultan yang besar, lalu ia menciptakan Node.js. Teknologi ini memakai JavaScript V8 engine (buatan Google), sehingga programmer bisa menjalankan JavaScript di sisi server. Tak lama, hadir pula package manager bernama npm yang membuat berbagi, memasang, update, dan menghapus package Node.js jadi sangat mudah.

Di tahun 2024, versi Node.js sudah mencapai 22.6.0 serta menjadi pilihan penting selain Apache. Buku ini akan membahas Node.js karena ada banyak manfaatnya. Jika kamu ingin mencobanya, ada setidaknya tiga alasan utama yang mungkin mendorongmu:

Node.js menggunakan model I/O event-driven dan nonblocking (tidak saling menunggu), sehingga bisa menangani koneksi sangat banyak dengan efisien. Keunggulan ini membuat Node.js cocok untuk aplikasi real-time, aplikasi chat, layanan streaming, dan lain sebagainya.

Node.js memungkinkan developer menulis JavaScript baik untuk sisi frontend maupun backend, sehingga tercipta lingkungan full-stack. Ini menghilangkan kebutuhan belajar banyak bahasa berbeda, memudahkan penggunaan ulang kode, dan membuat proses pengembangan lebih ringkas. Artinya, kamu tidak perlu repot terus belajar PHP kalau beralih ke Node.js (meski Node.js tidak bisa menjalankan PHP). Namun, dalam aplikasi kompleks, kamu tetap bisa mengombinasikan Node.js dan Apache+PHP untuk kebutuhan yang berbeda.

Karena Node.js berdiri di atas engine V8, performanya sangat kencang. Kode JavaScript bisa langsung dieksekusi dengan cepat dan efisien, sehingga respon aplikasi makin cepat dan resource yang digunakan juga hemat sumber daya —cocok untuk deployment di cloud platform.

Kelak kamu akan menjumpai lebih banyak alasan bagus untuk memilih Node.js. Meski begitu, PHP tetap bahasa yang sangat penting dan digunakan secara luas, terus berkembang, punya komunitas aktif, dan sering dikombinasikan juga dengan Node.js untuk kasus tertentu.

Sekilas Tentang Open Source

Semua teknologi yang dibahas di buku ini bersifat open source: bebas dibaca, dipakai, ataupun dimodifikasi siapa saja. Apakah sifat open source inilah yang membuatnya sangat populer memang kerap jadi perdebatan, tapi faktanya PHP, MySQL, dan Apache tetap jadi pilihan utama di kelasnya. Keunggulan pasti dari model open source adalah teknologinya dikembangkan komunitas melalui tim programmer yang biasanya langsung menambahkan fitur yang memang mereka butuhkan. Kode aslinya juga transparan, sehingga bug bisa cepat ditemukan dan masalah keamanan dicegah sejak awal.

Ada manfaat lain juga: umumnya software open source gratis dipakai, meskipun tergantung lisensi masing-masing. Jadi kamu bisa dengan tenang memperbesar kapasitas website tanpa harus memikirkan biaya lisensi baru, bahkan upgrade ke versi terbaru pun tak butuh anggaran khusus.

Bagaimana Semua Teknologi Bekerja Bersama

Salah satu keunggulan utama dari PHP, MySQL, JavaScript, CSS, dan HTML adalah bagaimana mereka saling terhubung untuk membangun konten web yang dinamis: PHP melakukan proses utama di server, MySQL menyimpan dan menangani data, dan gabungan CSS serta JavaScript bertugas mengatur tampilan halaman. JavaScript bahkan dapat berkomunikasi dengan script PHP di server setiap kali perlu memperbarui sesuatu, baik di sisi server atau di halaman web. Berbagai fitur HTML modern, seperti canvas, audio, video, sampai geolocation, memungkinkanmu membuat web yang interaktif, multimedia, dan dinamis.

Supaya makin jelas, mari kita simak, tanpa kode program, bagaimana kombinasi teknologi itu digunakan pada fitur komunikasi asynchronous yang kini lazim: memeriksa ketersediaan username saat pengguna mendaftar akun baru, seperti pada Gmail.

Secara garis besar, proses asynchronous tersebut berjalan seperti ini:

1. Server menghasilkan HTML beserta form input pengguna. Form meminta data seperti username, nama depan, nama belakang, dan email.
2. Pada saat yang sama, server menyertakan JavaScript ke dalam HTML agar dapat memantau kotak input untuk username, lalu mengecek dua hal: apakah sudah diisi, dan apakah fokusnya sudah pindah (user klik atau pindah field dengan tombol tab).
3. Begitu user selesai mengetik dan pindah ke field lain, JavaScript di latar belakang mengirim username ke sebuah program di server, lalu menunggu balasan.
4. Server mencari tahu apakah username sudah digunakan atau belum, lalu mengirim jawabannya ke JavaScript.
5. JavaScript menampilkan indikator (misal: tanda centang hijau atau silang merah beserta pesan) di sebelah kotak input username sebagai tanda ketersediaan username tersebut.
6. Bila username sudah tidak tersedia tetapi user tetap men-submit form, JavaScript akan mencegah pengiriman form dan menampilkan peringatan (bisa berupa pop-up besar/gambar lebih mencolok) agar user mencari username lain.
7. Fitur lanjutan, proses ini bisa mencarikan alternatif username jika username yang diminta pengguna ternyata sudah dipakai orang lain.

Semuanya berjalan di balik layar dan memberikan pengalaman pengguna yang lancar serta nyaman. Tanpa asynchronous, user harus mengirim seluruh form ke server dulu dan menunggu balasan HTML baru yang memberitahu jika ada isian salah atau username sudah dipakai. Metode klasik ini jelas terasa lambat dan kurang praktis, jauh berbeda dengan asynchronous yang langsung memberi feedback.

Komunikasi seperti ini bisa dipakai untuk banyak hal di luar pengecekan username. Kamu nanti akan mengeksplorasi beragam manfaat tambahannya di bab-bab selanjutnya.

Pada bab ini, kamu sudah mendapat pengenalan tentang teknologi inti seperti PHP, MySQL, JavaScript, CSS, HTML (juga Apache), dan memahami bagaimana mereka saling bersinergi. Di Bab 2, kamu akan diajak memasang server pengembangan web sendiri untuk latihan. Seperti di setiap bab, silakan uji pemahamanmu dengan menjawab soal-soal berikut.

Pertanyaan

1. Sebutkan empat komponen penting yang dibutuhkan untuk membangun halaman web yang benar-benar dinamis!
2. Apa singkatan dari HTML?
3. Kenapa MySQL memakai huruf SQL di namanya?
4. PHP dan JavaScript dua-duanya mampu membuat halaman web dinamis. Apa perbedaan utama di antara keduanya, dan kenapa tetap perlu memakai keduanya?
5. Apa arti singkatan CSS?
6. Sebutkan tiga fitur utama yang muncul di HTML5!
7. Jika kamu menemukan bug (meski jarang) di salah satu perangkat open source, bagaimana cara memperbaikinya menurut kamu?
8. Kenapa framework seperti jQuery atau React sangat penting dalam pengembangan website atau web app modern?
9. Apa alasan model event-driven milik Node.js bisa lebih unggul dari web server Apache?

Jawaban semua soal ini bisa kamu buka di bagian Lampiran.