SUMBER BELAJAR PENUNJANG PLPG 2017

MATA PELAJARAN/PAKET KEAHLIAN

REKAYASA PERANGKAT LUNAK

BAB X
PEMROGRAMAN WEB

H W Herwanto

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

DIREKTORAT JENDERAL GURU DAN TENAGA KEPENDIDIKAN
2017
 Kompetensi
1. Menjelaskan konsep dasar dan teknologi webpage
2. Menjelaskan struktur dokumen HTML
3. Menjelaskan konsep pemrograman web dinamis
4. Mempersiapkan lingkungan teknis pemrograman web dinamis

A.Materi
1.Konsep Dasar dan Teknologi WEB
World Wide Web merupakan istilah yang biasa disingkat dengan Web.
Internet dan web adalah dua hal yang berbeda. Internet lebih merujuk pada
perangkat keras, sedangkan web adalah perangkat lunak. Perbedaan lain terdapat
pada protokol yang dipakai oleh internet dan web. Internet menggunakan protokol
operasional yaitu TCP/IP, sedangkan web menggunakan HTTP (Hyper Text Transfer
Protocol). Web disusun dari halaman-halaman yang menggunakan teknologi web
dan saling berkaitan satu sama lain. Suatu standar teknologi web saat ini sudah
tersusun, meskipun penerapannya belum didukung oleh seluruh pengembang web.
Standar ini disusun oleh suatu badan yaitu World Wide Web Consortium (W3C).
Standarisasi dibutuhkan untuk menyeragamkan banyaknya variasi teknologi web
yang ada.

2.Standar Teknologi Web

Teknologi desain web terbagi menjadi beberapa layer (lapisan), yaitu
structural layer, presentation layer dan behavioral layer.
• Structural layer
Layer ini berhubungan dengan struktur dokumen-dokumen web. Susunan
sebuah dokumen, format yang dipakai, tanda atau mark up yang digunakan
pada dokumen merupakan pengelolaan yang dilakukan oleh layer ini. Standar

1
 teknologi yang direkomendasikan saat ini adalah Extensible Hypertext Markup
Language (XHTML) dan Extensible Markup Language (XML). XHTML adalah HTML
versi terakhir yang ditulis ulang dengan dengan aturan-aturan yang lebih ketat
mengacu pada XML. Sedangkan XML adalah sekumpulan aturan untuk
menyusun bahasa markup (Mulyanto, 2008).
• Presentation layer
Layer ini mengatur mengenai tampilan dokumen pada layar, suara yang
keluar, dan format pencetakan dokumen. Pada teknologi web lama bagian ini
menyatu dengan structural layer. Tetapi untuk standar baru, layer ini disarankan
dipisah. Contohnya adalah Cascading Style Sheets (CSS).
• Behavioral layer
Layer ini menangani bahasa skrip dan pemrograman. Hal tersebut bertujuan
untuk meningkatkan sisi interaktif dan dinamis halaman web. Layer ini
mencakup Document Object Model (DOM) dan JavaScript. DOM memungkinkan
suatu dokumen atau skrip untuk mengakses atau meng-update isi, struktur, dan
style dari dokumen. JavaScript adalah teknologi yang cukup lama dan stabil
digunakan untuk menambah dokumen menjadi lebih interaktif.

3.Struktur direktori situs web

Halaman web statis adalah halaman web yang sifatnya tetap dan tidak
berubah tampilannya. Ada dua model dalam pembuatan halaman web statis. Yang
pertama adalah membuat halaman-halaman tersebut pada komputer lokal,
kemudian setelah berhasil dipindahkan ke lokasi di web server. Model kedua adalah
model dimana halaman web secara langsung dibuat di lokasi web server. Lokasi web
server dapat berada di satu komputer yang sama dengan tempat pembuatan
halaman web atau di komputer lain yang berperan sebagai server. Cara pertama
tidak membutuhkan kerja web server di tahap desain. Biasanya pengembang web
membuat struktur direktori untuk mempermudah pengaturan halaman. Perhatikan
struktur direktori sebuah situs web pada Gambar berikut.

2
 Gambar Contoh Struktur Direktori Situs Web( Mulyanto, 2008)
Halaman awal suatu situs web umumnya halaman web yang diberi nama
homepage. Biasanya filenya diberi nama index.html (atau bisa juga index.php,
index.jsp, index.asp jika menggunakan bahasa pemrograman di bagian server). Di
dalam direktori yang sama dengan index.html ini biasanya ada direktori-direktori lain
yang berisi halaman-halaman yang dikelompokkan berdasarkan kedekatan 368
Rekayasa Perangkat Lunak tema atau berdasarkan pengelompokkan lain. Terdapat
beberapa direktori lain yang digunakan untuk menyimpan elemen-elemen yang
digunakan dalam halaman web. Umumnya direktori tersebut berisi file-file gambar,
teks, audio, video atau elemen-elemen yang lain. Berikut merupakan contoh skrip
halaman web sederhana yang ditunjukkan Gambar berikut.

Gambar Skrip Halaman Web Sederhana

3
Hasilnya akan tampil pada Gambar .berikut:

direktori

Gambar Hasil Halaman Web Sederhana

4.Struktur dasar HTML

HTML adalah singkatan dari HyperText Markup Language adalah salah satu
bahasa pemprograman web desain yang disebut juga script untuk menyusun
dokumen-dokumen Web. Dokumen HTML memiliki tag-tag yang memerintahkan
web browser untuk mengeksekusi perintah-perintah spesifik dalam membuat
halaman web (Nugroho, 2007).

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut.

a. Tag
Tag adalah teks khusus dapat disebut juga markup berupa dua karakter “<”
dan “>” sebagai contoh <body> adalah tag dengan nama body. Tag harus
ditulis secara berpasangan yang terdiri atas tag pembuka dan tag penutup
(ditambahkan karakter “/“ setelah karakter “<” ) sebagai contoh <body> ini

4
 adalah tag pembuka isi dokumen HTML dan </body> ini adalah tag penutup isi
dokumen HTML.
b. Element
Element memiliki tiga bagian, yaitu tag pembuka, isi dan tag penutup.
Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser
digunakan element title.
<title> Judul Dokumen HTML </title>
Tag <title> adalah tag pembuka judul dokumen HTML. “ Judul Dokumen HTML
“adalah isi judul dari dokumen HTML, sedangkan tag </title> adalah tag penutup
judul dokumen HTML. Tag-tag yang ditulis secara berpasangan pada suatu
element HTML. Selain itu, tag tidak boleh saling tumpang tindih. Tabel berikut
menjelaskan mengenai elemen-elemen pokok yang terdapat halaman web.
Element Keterangan
HTML Menyatakan pada browser bahwa halaman yang digunakan
<html></html> adalah halaman HTML
HEAD Tag kepala mengapit bagian yang tidak secara langsung
<head></head> ditampilkan pada bagian halaman web. Seperti title, meta,
style css dsb
TITLE Judul halaman web yang ditampilkan pada bagian jendela
<title></title> browser
BODY Menampilkan isi halaman web
<body></body>

c. Attribute
Attribute menunjukkan property dari suatu element HTML yang terdiri atas
nama dan nilai. Nilai attribute harus berada dalam tanda petik satu atau dua.
Penggunaan atribut dapat dicontohkan sebagai berikut.
<body bgcolor="brown" text="red">
Skrip tersebut adalah perintah untuk membuat warna teks menjadi merah dan
latarbelakang halaman web menjadi coklat. Penulisan attribute ini hanya
berlaku pada tag body.
5
 Beberapa attribute lain ditunjukkan pada tabel berikut :
Attribute Keterangan
Text Memberikan warna pada teks
bgcolor Memberikan warna pada background
Link Memberikan warna pada link
background Memberikan latar belakang halaman dalam bentuk gambar

Terdapat banyak kode html yang perlu dipahami untuk membuat satu
halaman web. Tabel berikut menunjukkan beberapa kode html yang sering
digunakan untuk pembuatan halaman web.
Kode Keterangan
<br/> Kode enter pada html, turun satu baris ke bawah
<big></big> Membuat tulisan menjadi besar
<strong></strong> Menebalkan isi tulisan
<p> Kursor dan kalimat dibelakangnya turun satu setengah baris ke
bawah
<u></u> Memberikan garis bawah pada teks
<center></center> Membuat tulisan di tengah halaman
<pre></pre> Membuat format tulisan tetap seperti yang diinginkan
&nbsp; Memberikan satu spasi pada halaman web
<table></table> Membuat tabel pada halaman web
<tr></tr> Tag dalam tag tabel untuk menunjukkan baris
<td></td> Tag dalam tabel untuk menujukkan cell atau kolom

6
5..DESAIN WEB DINAMIS BERBASIS JSP (JAVA SERVER PAGES)

Web dinamis adalah halaman web yang tampilannya tidak statis dan
memungkinkan tampilan untuk menyesuaikan dengan pengaturan dari pengguna.
Ada perbedaan yang penting dalam kebutuhan lingkungan pengembangan antara
web statis dan web dinamis. Perangkat keras Pengembangan web dinamis
membutuhkan perangkat keras yang lebih tinggi spesifikasinya dibanding web statis.
Pada umumnya pengembang akan melakukan pembuatan web dinamis pada satu
komputer yang memiliki dua peran sekaligus yaitu sebagai server dan client. Namun,
beberapa kasus membutuhkan lebih dari satu komputer, sehingga satu komputer
berperan sebagai server dan yang lainnya sebagai client. Komputer server memiliki
spesifikasi teknis yang lebih tinggi dari komputer client. Kebutuhan perangkat lunak
yang sangat membedakan antara web statis dan web dinamis adalah program di sisi
server.
Bahasa pemrograman server diinstall untuk digunakan web server
menerjemahkan perintah-perintah tertentu dalam bahasa tertentu. Misalkan server
yang terinstal hanya web server Apache saja, maka tidak dapat dijalankan halaman
web dinamis dengan bahasa pemrograman PHP atau JSP. Perlu dilakukan instalasi
PHP atau Tomcat, sehingga bahasa pemrograman sisi server dapat berjalan dengan
baik.
Pada umumnya web dinamis menggunakan basis data sebagai tempat
penyimpanan data. DBMS merupakan salah satu kebutuhan yang mutlak ada untuk
pengembangan web dinamis. Beberapa DBMS berbasis SQL antara lain MySQL,
Oracle dan Microsoft SQL Server.
Terdapat dua model pemrograman web yang berkaitan dengan pengembangan web
dinamis yaitu
 client-side dan
 server-side.
Bahasa pemrograman untuk membuat web dinamis juga terbagi menjadi dua yaitu
 client-side script (bahasa pemrograman sisi client) dan

7
  server-side script (bahasa pemrograman sisi server).

Untuk Client-side script kebanyakan menggunakan JavaScript dan VBScript.

Client-side script memiliki keunggulan di bagian waktu pemrosesan data, waktu
prosesnya yang jauh lebih cepat dibanding server-side. Namun client-side script
sangat rawan di bagian keamanan. Hal ini dikarenakan mudahnya mengakses kode
program.
Keuntungan pada penggunaan server-side script, yaitu : Keamanan kode Script
yang tidak dapat dibaca oleh user karena disimpan dan dijalankan di web server,
sedangkan yang dikirim ke client (pengguna) adalah hasil pengolahan yang berupa
dokumen dalam format HTML saja. Selain itu, kemampuan koneksi dengan basis
data merupakan keunggulan terbesar dari server-side script. Terdapat 3 teknologi
yang digunakan dalam server side script, yaitu ASP (termasuk ASP.Net), PHP, dan JSP.

a.ASP
ASP adalah mesin (engine) untuk server side script yang ditanamkan pada IIS.
Bahasa pemrograman yang dipakai dalam mesin ini adalah VBScript. Secara default
ini adalah server side script pada web server Microsoft Windows. Untuk menandai
bahwa suatu kode dalam halaman web merupakan VBScript maka digunakan tag
sebagai penanda. VBScript merupakan bahasa yang sangat mirip dengan Visual Basic,
yang membedakan adalah VBScript telah disesuaikan dengan lingkungan web.
Dokumen berisi kode tersebut disimpan dalam bentuk html atau dengan ekstensi
.asp dan diletakkan pada direktori yang dapat dieksekusi oleh web server IIS.

b.PHP
PHP adalah bahasa pemrograman yang didesain khusus untuk halaman web
di sisi server. PHP atau PHP Hypertext Preprocessor adalah bahasa pemrograman
yang diciptakan Rasmus Lerdorf. Perkembangan bahasa pemrograman ini dapat
dilihat melalui www.php.net. Keunggulan dari bahasa pemrograman ini yaitu PHP
mudah dibuat dan cepat dijalankan. PHP dapat berjalan dalam web server yang
berbeda, seperti Apache, PWS, IIS dan sebagainya. PHP juga dapat berjalan dalam
8
sistem operasi yang berbeda pula, seperti UNIX, Windows, Mac OS X dan Linux.
Selain itu PHP merupakan bahasa pemrograman opensource.

c.JSP
JSP adalah suatu teknologi web berbasis bahasa pemrograman Java dan
berjalan di Platform Java, serta merupakan bagian teknologi J2EE (Java 2 Enterprise
Edition). J2EE merupakan platform Java yang digunakan dalam pengembangan
sistem aplikasi enterprise dengan dukungan API (Application Programming Interface)
yang lengkap dan portabilitas, serta memberikan sarana untuk membuat suatu
aplikasi yang memisahkan antara business logic (sistem), presentasi dan data.
JSP memerlukan JVM (Java Virtual Machine) agar dapat beroperasi, sehingga
harus dilakukan instalasi Java Virtual Machine di server, dimana JSP akan dijalankan.
Selain JVM, JSP juga memerlukan server yang disebut dengan Web Container.
Teknologi JSP menyediakan cara yang lebih mudah dan cepat untuk membuat
halaman-halaman web yang menampilkan isi secara dinamik. Teknologi JSP didesain
untuk membuat lebih mudah dan cepat dalam membuat aplikasi berbasis web yang
bekerja dengan berbagai macam web server, application server, browser dan
development tool. JSP bisa menggunakan Apache Tomcat sebagai salah satu web
server yang mendukungnya.
Berikut merupakan contoh JSP sederhana mengenai tampilan waktu dengan
memanggil fungsi Date() yang ditunjukkan pada Gambar berikut.:

Gambar Contoh program JSP sederhana (reumatologi.or.id)

9
Tampilan hasil kode JSP tersebut adalah sebagai berikut.

Gambar Hasil program JSP sederhana (reumatologi.or.id)

JSP memiliki alur yang digunakan untuk memudahkan penggunaannya. Alur

JSP terdiri dari empat fase yang mirip dengan siklus servlet dengan langkah
tambahan untuk kompilasi JSP ke servlet. Fase tersebut, yaitu kompilasi, inisialisasi,
eksekusi dan membersihkan(Clean Up). Berikut ilustrasi siklus hidup JSP pada
Gambar berikut.

10
 Gambar Siklus Hidup JSP (w3ii.com)

JSP Kompilasi
Apabila browser memanggil untuk menjalankan JSP, JSP melakukan
pemeriksaan apakah perlu mengkompilasi halaman. Kompilasi halaman dilakukan
apabila halaman tidak pernah disusun, atau JSP telah dimodifikasi sejak terakhir
dikompilasi. Proses kompilasi melibatkan tiga langkah, yaitu parsing JSP, mengubah
JSP ke servlet dan kompilasi servlet.

JSP Inisialisasi
Inisialisasi dilakukan hanya sekali yang meliputi inisialisasi koneksi database,
file yang terbuka, dan membuat tabel lookup dalam metode jspInit. Inisialisasi
dilakukan dengan memanggil metode jspInit().
public void jspInit()
{ // Initialization code... }

JSP Eksekusi
Metode jspService () dari JSP dipanggil sekali per permintaan dan
bertanggung jawab untuk menghasilkan respon untuk permintaan itu dan metode ini
juga bertanggung jawab untuk menghasilkan tanggapan terhadap metode HTTP
yaitu. GET, POST, DELETE dan lain sebagainya (w3ii.com). Penulisan metode
jspService(), sebagai berikut :
void _jspService(HttpServletRequest
request,HttpServletResponse response)
{ // Service handling code... }

JSP Cleanup
Fase ini merupakan fase dimana JSP dihapus setelah penggunaannya selesai.
Metode jspDestroy () adalah setara dengan metode penghancuran (destroy) pada
servlet. Berikut penulisan jspDestroy() :
public void jspDestroy()
{ // kode cleanup }
11
B. Sumber :

Materi dalam sumber belajar ini disusun/ dirujuk/ diadaptasi/ disalin/ disarikan dari :
1. Mulyanto dkk. 2008. Rekayasa Perangkat Lunak. Kemdikbud
2. https://www.academia.edu/6329892/Struktur_Dasar_HTML_Struktur_Dasar_H
TML_Lisensi_Dokumen. : Struktur Dasar HTML. Oleh Nugroho, Irfan.
3. http://reumatologi.or.id/var/rekomendasi/JENI-Web_Programming-Bab_4-Dasa
r_JSP.pdf. Dasar JSP.
4. Mulyanto dkk.2008. Rekayasa Perangkat Lunak. Kemdikbud
5. http://www.w3ii.com/id/jsp/jsp_life_cycle.html: W3School Indonesia. JSP Life
Cycle.

12