SEMESTER GENAP TGL BLN THN

TA.2024/2025 23 05 2025

MODUL PRAKTIKUM

PEMROGRAMAN WEB 1

D I B UAT

Thoyyib Hasonangan. S Doly Yahya Ritonga Daffa Bayhaqi Octarino

NPM: 2308100071 NPM: 2308100075 NPM: 2308100011

DIPERIKSA

Sudi Suryadi, S.Kom, M.Kom

NIDN: 0128027903

T E K N O L O G I I N F O R M A S I
TERAKREDITASI “BAIK SEKALI” SK LAM INFOKOM: 00034/SK/LAM-INFOKOM/Ak.S/VI/2022
Jl. Sisingamangaraja No. 126 A, Aek Tapa, Bakaran Batu, Rantauprapat,
Kabupaten Labuhanbatu, Sumatera Utara, Indonesia 21412
🌐 http://fst.ulb.ac.id | ✉️e-mail: [email protected]
 PEMROGRAMAN WEB 1

MODUL 1: PENGENALAN PEMROGRAMAN WEB

A. Deskripsi Singkat Modul

Pemrograman web adalah salah satu cabang teknologi informasi yang berfokus pada
pembuatan dan pengembangan aplikasi berbasis internet. Dalam praktiknya, aplikasi web
bekerja melalui interaksi antara client dan server menggunakan protokol HTTP/HTTPS,
di mana browser sebagai client mengirimkan permintaan dan server memberikan respons
dalam bentuk data yang dapat ditampilkan sebagai halaman web (Duckett, 2011). Modul
ini disusun untuk memberikan pemahaman mendasar mengenai konsep tersebut, agar
mahasiswa mampu mengenali cara kerja arsitektur web dan alur komunikasi data dalam
sistem berbasis web. Pemahaman ini penting karena menjadi dasar bagi proses
perancangan dan implementasi aplikasi web interaktif dan dinamis.

Selain itu, modul ini juga memperkenalkan berbagai tools dasar yang digunakan
dalam pemrograman web, seperti browser (Google Chrome, Mozilla Firefox), code editor
(Visual Studio Code, Sublime Text), serta web server lokal (seperti XAMPP dan Live
Server). Tools ini memiliki fungsi penting dalam proses coding, pengujian, dan penyajian
halaman web. Menurut Beighley dan Morrison (2009), penggunaan tools yang tepat akan
meningkatkan efisiensi proses pengembangan serta membantu pengembang dalam
mendeteksi kesalahan secara cepat melalui fitur debugging dan live preview. Dengan
kombinasi pemahaman konsep dan penguasaan tools, mahasiswa diharapkan siap untuk
melangkah ke tahap pengembangan web yang lebih kompleks.

B. Tujuan Pembelajaran

Tujuan pembelajaran pada modul ini dirancang untuk memberikan pemahaman dasar
mengenai konsep pemrograman web dan mempersiapkan mahasiswa agar mampu menguasai
alat-alat yang diperlukan dalam proses pengembangan web. Menurut Bloom (1956), tujuan
pembelajaran harus mencakup aspek kognitif, afektif, dan psikomotor, sehingga pembelajar
tidak hanya memahami teori, tetapi juga mampu menerapkannya dalam praktik secara efektif.
Dalam konteks pemrograman web, aspek kognitif mencakup pemahaman tentang arsitektur
 PEMROGRAMAN WEB 1

web dan konsep client-server. Sedangkan aspek psikomotor meliputi kemampuan

menggunakan tools seperti browser, code editor, dan web server lokal untuk membangun dan
menguji aplikasi web sederhana.

Selain itu, tujuan pembelajaran ini bertujuan agar mahasiswa dapat membangun
fondasi yang kuat untuk memahami teknologi web lebih lanjut. Sebagaimana dijelaskan oleh
Mayer (2009), pembelajaran yang terstruktur dan jelas tujuan akan meningkatkan motivasi
serta efektivitas proses belajar. Oleh karena itu, modul ini fokus pada pencapaian kompetensi
dasar yang menjadi landasan dalam mempelajari teknologi pemrograman web yang lebih
kompleks, seperti pengembangan front-end dan back-end.

Dengan tujuan pembelajaran yang terukur dan terarah, diharapkan mahasiswa tidak hanya
memahami konsep secara teoritis, tetapi juga mampu mengimplementasikan pengetahuan
tersebut secara praktis. Hal ini sejalan dengan prinsip pembelajaran berbasis kompetensi yang
menekankan penguasaan keterampilan yang relevan dengan kebutuhan dunia kerja
(Kemdikbud, 2017).

Tabel Tujuan Pembelajaran Modul 1

N Kompetensi yang
o Dicapai Indikator Pencapaian Jenis Kompetensi

1 Menjelaskan konsep dasar Mahasiswa mampu menguraikan pengertian Kognitif

pemrograman web web dan client-server (Pengetahuan)

2 Mengidentifikasi fungsi Mahasiswa dapat menyebutkan dan Kognitif

tools pengembangan web menjelaskan peran browser, code editor, (Pemahaman)
dan web server lokal

3 Menggunakan tools dasar Mahasiswa dapat menginstal dan Psikomotor

pemrograman web mengoperasikan tools dasar untuk membuat (Keterampilan)
dan menampilkan halaman web

4 Menerapkan konsep Mahasiswa mampu menjalankan proses Psikomotor

client-server dalam request dan response menggunakan web (Keterampilan)
praktek server lokal
 PEMROGRAMAN WEB 1

C. Outline Materi

1. Pengantar Pemrograman Web

Pemrograman web merupakan proses merancang dan membangun aplikasi atau situs
web yang dapat diakses melalui jaringan internet menggunakan teknologi berbasis web.
Menurut Duckett (2011), pemrograman web mencakup pembuatan struktur halaman
(menggunakan HTML), pengaturan tampilan (CSS), serta pengendalian perilaku halaman
secara interaktif (JavaScript). Pemrograman web menjadi salah satu kompetensi utama dalam
era digital karena hampir seluruh aspek kehidupan modern bersentuhan dengan aplikasi
berbasis web, baik untuk keperluan pribadi, pendidikan, bisnis, maupun pemerintahan.

Dalam pengembangannya, situs web dapat dibedakan menjadi dua kategori utama:
web statis dan web dinamis. Web statis adalah jenis web yang kontennya tidak berubah-
ubah dan disusun dari halaman HTML sederhana tanpa adanya interaksi atau perubahan data
secara langsung oleh pengguna. Sebaliknya, web dinamis memiliki kemampuan untuk
berinteraksi dengan pengguna, menyesuaikan isi berdasarkan data yang disimpan di server,
dan biasanya dibangun menggunakan bahasa pemrograman sisi server seperti PHP, Python,
atau Node.js (Beighley & Morrison, 2009). Perbedaan ini penting dipahami karena
memengaruhi cara perancangan dan teknologi yang digunakan.

Peran pemrograman web dalam perkembangan teknologi informasi modern sangat

signifikan. Aplikasi berbasis web telah menggantikan banyak sistem tradisional karena
keunggulannya dalam aksesibilitas, skalabilitas, dan efisiensi biaya. Menurut Laudon dan
Laudon (2020), sistem informasi berbasis web memungkinkan perusahaan meningkatkan
kinerja bisnis, efisiensi operasional, dan pengalaman pengguna melalui platform digital yang
dapat diakses kapan saja dan dari mana saja. Oleh karena itu, pemrograman web tidak hanya
menjadi keterampilan teknis, tetapi juga bagian dari solusi strategis dalam transformasi
digital.
 PEMROGRAMAN WEB 1

Tabel Perbandingan Web Statis dan Web Dinamis

Kriteria Web Statis Web Dinamis

Isi halaman Tetap, tidak berubah Dapat berubah tergantung interaksi

pengguna

Teknologi utama HTML, CSS HTML, CSS, JavaScript, PHP, Python, dsb.

Basis data Tidak menggunakan Menggunakan basis data (MySQL,

basis data PostgreSQL, dsb.)

Keterlibatan Minim (hanya file statis) Tinggi (proses logika dan data di server-
server side)

Contoh Portofolio, landing page E-commerce, media sosial, sistem informasi

penggunaan akademik

2. Konsep Dasar Web

Web adalah singkatan dari World Wide Web, sebuah sistem berbasis internet yang
memungkinkan pengguna mengakses dan bertukar informasi melalui halaman-halaman yang
saling terhubung. Sedangkan website adalah kumpulan halaman web (web pages) yang saling
terkait dan dikelola di bawah satu nama domain yang sama. Menurut Berners-Lee (1999),
pencipta web, konsep dasar web adalah penyajian dokumen dalam format hiperlink, yang
memungkinkan pengguna menavigasi antar halaman dengan mudah melalui mekanisme
penautan. Dengan demikian, web menjadi platform utama dalam distribusi informasi digital
di era modern.

Komunikasi antara client dan server di web difasilitasi oleh protokol HTTP
(HyperText Transfer Protocol) dan HTTPS (HyperText Transfer Protocol Secure). HTTP
merupakan protokol standar yang digunakan untuk mentransmisikan data dari server ke
browser. HTTPS adalah versi aman dari HTTP yang menggunakan enkripsi SSL/TLS untuk
melindungi data dari penyadapan atau manipulasi selama proses transmisi (Kurose & Ross,
 PEMROGRAMAN WEB 1

2017). Perbedaan utama antara keduanya terletak pada aspek keamanan, di mana HTTPS
menjadi standar wajib dalam situs web modern, terutama yang memproses data sensitif
seperti informasi pribadi atau transaksi keuangan.

Salah satu komponen penting dari web adalah URL (Uniform Resource Locator),
yaitu alamat unik yang digunakan untuk mengidentifikasi dan mengakses sumber daya
tertentu di internet. Struktur dasar URL terdiri atas beberapa bagian, yaitu skema (protocol),
nama domain, jalur direktori, dan nama file (Duckett, 2011). Memahami struktur URL
penting untuk menavigasi, mengelola, dan mengembangkan aplikasi web yang terstruktur
dengan baik.

HTML (HyperText Markup Language) merupakan fondasi dari semua halaman web.
HTML digunakan untuk menentukan struktur dan isi dari sebuah halaman web, seperti teks,
gambar, tautan, dan elemen lainnya. Tanpa HTML, browser tidak akan mampu menampilkan
informasi dalam format yang terorganisir dan mudah dipahami oleh pengguna. Seperti
dijelaskan oleh Castro dan Hyslop (2013), HTML adalah bahasa markah standar yang
memungkinkan pengembang membangun dokumen web secara sistematis dan semantik.
Meskipun saat ini HTML sering dikombinasikan dengan CSS dan JavaScript, HTML tetap
menjadi inti dari semua aplikasi web.

3. Arsitektur Client-Server

a. Definisi Client dan Server

Dalam arsitektur web modern, client-server merupakan model komunikasi yang

menjadi dasar dalam pengembangan aplikasi berbasis internet. Client adalah perangkat atau
aplikasi yang digunakan pengguna akhir untuk mengakses layanan, seperti browser (Google
Chrome, Mozilla Firefox), sedangkan server adalah perangkat atau aplikasi yang
menyediakan layanan tersebut, seperti web server (Apache, Nginx) yang mengelola
permintaan dan memberikan respons data (Kurose & Ross, 2017). Interaksi antara client dan
server memungkinkan pertukaran data dalam bentuk halaman web atau layanan web lainnya.
 PEMROGRAMAN WEB 1

b. Cara Kerja Request-Response

Sistem client-server beroperasi berdasarkan prinsip request-response. Proses ini

dimulai ketika client mengirimkan permintaan (request) ke server melalui protokol HTTP
atau HTTPS. Server kemudian memproses permintaan tersebut, mengambil data dari sistem
file atau basis data, dan mengirimkan respons kembali ke client dalam bentuk HTML, JSON,
atau format lain yang dapat diproses browser (Duckett, 2011). Dengan kata lain, server
bertindak sebagai penyedia layanan, sedangkan client adalah konsumen layanan tersebut.

c. Ilustrasi Proses Komunikasi Antara Client dan Server

Untuk memahami lebih lanjut, berikut adalah ilustrasi proses komunikasi client-server:

1. Pengguna mengetik alamat URL pada browser.

2. Browser (client) mengirim permintaan HTTP ke server.
3. Server menerima permintaan dan memprosesnya.
4. Server mengirim kembali data sebagai respons ke browser.
5. Browser menampilkan halaman web kepada pengguna.

d. Contoh Layanan Berbasis Client-Server

Layanan berbasis client-server sangat luas dan digunakan dalam berbagai bidang. Contohnya
adalah:

 Email: Aplikasi seperti Gmail dan Outlook mengandalkan protokol IMAP/SMTP

dalam model client-server.
 E-Commerce: Platform seperti Tokopedia atau Shopee menggunakan arsitektur ini
untuk menampilkan produk, mengelola keranjang belanja, dan proses checkout.
 PEMROGRAMAN WEB 1

 Sistem Informasi Akademik: Sistem seperti SIAKAD menyediakan layanan

berbasis web bagi mahasiswa untuk melihat jadwal, nilai, dan KRS.
 Media Sosial: Instagram dan Twitter bekerja berdasarkan request dari client dan
respons dari server berisi konten yang diunggah pengguna lain.

Tabel Perbandingan Antara Client dan Server

Aspek Client Server

Peran Mengirim permintaan Memberikan layanan / respons terhadap

permintaan

Contoh Browser, aplikasi Web server, database server

mobile

Teknologi Umum HTML, CSS, JavaScript PHP, Python, Node.js, MySQL

Lokasi Eksekusi Di perangkat pengguna Di pusat data atau cloud server

Ketergantungan Bergantung pada server Berdiri sendiri, melayani banyak client