BAB IX

Pemrograman Web

Tujuan Pembelajaran

Di akhir topik ini, mahasiswa akan mampu:

• Tentukan Hypertext Markup Language (HTML) dan standar yang digunakan untuk
pengembangan Web
• Menjelaskan alat yang digunakan untuk membuat dokumen HTML
• Jelaskan pentingnya pemrograman ke server;
• Menjelaskan konsep client dan server dalam halaman web;
• Sebutkan tiga aplikasi yang dapat dibangun dengan skrip sisi klien;
• Sisipkan skrip ke dalam halaman web; dan
• Tentukan kebutuhan menggunakan skrip peristiwa.
• Sisipkan JavaScript ke dalam dokumen HTML;
• Mendeklarasikan variabel dan data JavaScript;
• Mengidentifikasi tiga jenis fungsi yang dapat digunakan dalam JavaScript; dan
• Gunakan struktur kontrol dan loop yang dipilih dalam JavaScript.

HTML

HTML adalah bahasa Markup yang populer untuk mengembangkan dokumen hypertext. Secara
khusus, Web browser seperti Internet Explorer akan bertindak seperti mesin yang akan menafsirkan
HTML dan menampilkannya dalam bentuk yang benar. Versi HTML asli dikembangkan oleh Tim
Berners-Lee yang juga merupakan salah satu pencipta World Wide Web (WWW).
Meskipun HTML memiliki dasar aturan yang kuat, standar untuk versi baru masih terus
berkembang. Pengguna mungkin menemukan bahwa setiap web browser di pasar dapat
mendukung variasi HTML yang berbeda.

Cascading Style Sheets

Seperti halnya HTML, style sheets juga mengikuti standar dan aturan bahasa yang ditetapkan.
Bahasa ini, disebut Cascading Style Sheets, atau CSS, memungkinkan pengembang Web untuk
menulis pernyataan kode yang mengontrol gaya elemen pada halaman Web. Cascading Style
Sheets memungkinkan pengguna mengontrol gaya dan tata letak halaman web. Bahasa ini akan
memungkinkan pengguna untuk menentukan link styles, font, margin, tabel, warna/colors, sizes,
alignments/keselarasan dan banyak lagi di seluruh halaman web. Dengan CSS pengguna akan
mendapatkan cara yang lebih mudah untuk memberi halaman Web Anda format dan tampilan
yang konsisten menggunakan style sheets..

Apakah itu Cascading Style Sheet?

Sebuah style adalah aturan yang menentukan tampilan elemen di halaman Web. style sheet adalah
serangkaian aturan yang menentukan style/gaya untuk halaman Web atau seluruh situs Web.
Cascading Style Sheets digunakan untuk menentukan style/gaya tertentu untuk sebuah karakter,
kata, sekelompok kata, halaman atau seluruh situs web.

Meskipun pengguna dapat mengubah hampir semua tampilan menggunakan style ini, termasuk
beberapa tampilan yang tidak mungkin dilakukan dalam HTML, CSS bukan merupakan bahasa
yang berdiri sendiri atau lengkap, style/gaya tersebut digunakan untuk mengontrol item
tampilan atau bagian pada halaman web.
CSS juga bukan merupakan HTML. Ini adalah bahasa terpisah yang digunakan untuk
meningkatkan kemampuan tampilan HTML. World Wide Web Consortium (W3C), organisasi
yang sama yang mendefinisikan standar HTML, menentukan spesifikasi CSS. CSS tidak
digunakan untuk menambahkan konten apa pun ke situs Web penggguna; CSS hanya membuat
konten pengguna terlihat lebih stylist/baik

Manfaat Menggunakan Cascading Style Sheets

Ada beberapa keuntungan menggunakan cascading style sheets. Keuntungan tersebut adalah:

1. Kode HTML pada halaman web berfungsi untuk mengontrol konten, dan CSS mengontrol
HTML. Hal ini memungkinkan pengguna membuat halaman web yang sesuai untuk semua
browser.

2. Salah satu manfaat terbaik menggunakan CSS dalam halaman web adalah kemudahan
memperbarui halaman web. Jika pengguna/pembuat ingin membuat perubahan pada desain,
daripada harus mengubah lusinan atau bahkan ratusan halaman web di situs, pembuat web
dapat membuat satu perubahan sederhana pada file CSS, dan itu akan secara otomatis
memperbarui semua halaman situs web yang dikembangkan.

3. Dengan CSS pengguna dapat menambahkan elemen visual seperti warna, batas, margin,
dan font style ke halaman Web.

4. Style sheets memungkinkan pengembang untuk mengubah style/gaya untuk satu elemen di
halaman Web, seperti paragraf, atau untuk mengubah style/gaya elemen di semua halaman
di situs Web.

Tipe dari Cascading Style Sheets

Ada tiga teknik utama yang digunakan untuk menerapkan style: inline, embedded, atau
external. Teknik-teknik ini tidak berlaku eksklusif; dengan kata lain, pengguna dapat
menggunakan satu, dua, atau semuanya pada halaman yang sama atau pada halaman yang
diperlukan. Tabel 2.13 merangkum fungsi dari tiga jenis style sheets.

Tabel 9.1 Tipe dari Style Sheets dan Fungsinya

Tipe Fungsi
Inline • Ditambahkan dalam tag standar HTML pembuat halaman.
Style mengubah tag spesifik tersebut, tetapi tidak
memengaruhi tag lainnya di dalam dokumen.
• Gunakan inline style sheets untuk style individu.
Embedded • Ditambahkan ke style sheet dalam tag <head> dari
Dokumen HTML untuk menentukan style seluruh Web
halaman.
• Gunakan style sheet embedded untuk style satu halaman
Web.
Eksternal • Juga dikenal sebagai linked style sheet (tertaut), di sini
pengguna membuat sebuah file teks yang berisi semua
style/gaya yang ingin diterapkan, dan kemudian disimpan
file teks dengan ekstensi file .css., kemudian
menambahkan link ke external style sheet di web page
yang dikehendaki pada website
• Style sheets eksternal memberi penggguna fleksibilitas
dan sangat ideal untuk dapat diterapkan format yang sama
ke semua halaman Web di situs Web. Style sheet eksternal
juga memudahkannya mengubah format dengan cepat di
seluruh halaman Web.
 • • Gunakan style sheet eksternal untuk style yang Anda
inginkan situs Web.

HTML Tag dan CSS Precedent

Setiap tipe style sheet juga memiliki tingkat prioritas atau precedence yang berbeda dalam
hubungannya dengan yang lain. Karena setiap style sheet/lembar gaya memiliki tingkat
prioritas yang berbeda, maka ketiga jenis style sheet dapat digunakan pada satu halaman Web.
Berikut adalah cara memprioritaskan tag:
• Tag HTML menimpa semua tag lainnya.
• Tag inline CSS menggantikan tag yang embedded dan linked tags
• Tag embedded CSS menggantikan linked tag.
• Tag linked CSS tidak akan menimpa tag lainnya.

Sintaks untuk CSS

Apa pun jenis style sheet yang pengguna gunakan, maka harus menggunakan pernyataan
style untuk menentukan style. Kode berikut menunjukkan contoh pernyataan style yang
digunakan dalam embedded atau eksternal style sheet:
p { font-family: arial;

font-size: 12px;

color: blue }

CSS tags akan diformat sebagai berikut:

selector adalah perintah dari browser command, yang biasanya tag HTML yang ingin diformat.
Ini adalah bagian dari pernyataan style yang mengidentifikasi elemen halaman. Dalam contoh di
atas, selektornya adalah p (tag paragraf) yang kemudian diikuti oleh properti, yang merupakan
atribut yang ingin pengguna tentukan. Font-family, font-size dan color adalah properti pada style
sheet di atas. Nilainya menentukan nilai properti. Titik dua setelah properti, kemudiamn diikuti
dengan nilai dan diapit dengan tanda kurung kurawal.
Pernyataan style yang disematkan di atas dapat ditulis ulang menjadi inline style sheet sebagai
berikut:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello World!</p>
<p style=font-family:verdana;font-
size:18px;color:red>Universitas Negeri Yogyakarta</p>

</body>
</html>

Untuk pernyataan style jenis embedded atau extended, jika nilai properti berisi
lebih dari satu kata, harus diapit dengan tanda kutip:
<p style=”font-family:”Times New
Roman”;font-size:12px;color:blue”>

Jika pengguna ingin menyertakan lebih dari satu properti, maka harus memisahkannya dengan
titik koma.
Jika memiliki beberapa selector/pemilih yang akan memerlukan format yang sama, maka
pengguna dapat mengelompokkannya dengan hanya memisahklannya Dengan koma. Pada contoh
di bawah ini, semua teks heading 1, heading 2 dan heading 3 akan ditampilkan dalam huruf Arial
dan warna merah.

h1, h2, h3 {font-family: arial; font-size: 12px; color: red}

Jika pengguna memiliki jenis elemen yang sama, akan tetapi perlu memformatnya secara berbeda,
selector/pemilih class/kelas dapat memungkinkan pengguna untuk melakukannya. Misalnya,
mungkin pengguna ingin menampilkan dua jenis paragraf dalam halaman web dengan ketentuan
satu di tengah dan yang lainnya rata kanan. Format pernyataan style untuk paragraf yang
menggunakan pernyataan embedded dan extended style akan terlihat seperti ini:

p.center {text-align: center}

p.right {text-align: right}

Untuk menunjukkan ke paragraf mana CSS ini harus diterapkan, maka cukup tempatkan kelas
dalam tag paragraf seperti ini:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
#para2 {
text-align: right;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p id="para2">Universitas Negeri Yogyakarta</p>

</body>
</html>

Properties in Style Sheet

Style sheets allow you to control many different property values for various elements on a
Web page. There are six main properties and related options that are used in style sheets.
Table 2.14 shows these main properties and their property values.
Properti di Style Sheet

Style sheets memungkinkan pengguna untuk mengontrol banyak nilai properti yang
berbeda untuk berbagai elemen di halaman Web. Ada enam properti utama dan opsi terkait
yang bisa digunakan di style sheet. Tabel 9.2 menunjukkan properti utama ini dan nilai
propertinya.

Tabel 2.14: Properti Style sheet dan opsi terkaitnya

Nama Property Pilihan Controlling

Font • family
• size
• style
• variant
• Weight
 Pada bagian selanjutnya, akan dibahas secara rinci berbagai jenis cascading style sheet
dan mengilustrasikan dengan contoh bagaimana mereka diterapkan dalam
pengembangan web.

Inline Style Sheet

Inline cascading style tags are used within standard HTML code using the STYLE parameter.

The following example will remove the underline of an individual link:

Dengan inline style sheet, pengguna dapat menambahkan style ke tag HTML individual, seperti
judul atau paragraf. Style mengubah tag spesifik tersebut, tetapi tidak memengaruhi tag lain dalam
dokumen. Karena style sheet sebaris lebih diutamakan daripada jenis style sheet lainnya dan
memengaruhi gaya untuk tag HTML individual, akan sangat membantu bila satu bagian dari
halaman Web perlu memiliki style yang berbeda dari bagian halaman Web lainnya.

Inline cascading style tag digunakan dalam kode HTML standar menggunakan parameter STYLE.

Embedded Inline Style Sheet

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
p{ p{
text-align: center; text-align: center;
font-size:18px; font-size:18px
color: red; color: red;
} }
</style> </style>
</head> </head>
 <body> <body>

<p>Hello World!</p> <p>Hello World!</p>

<p >Universitas Negeri <p style= text-align:left;font-
Yogyakarta</p> size:30px;color:blue>Universitas
Negeri Yogyakarta</p>
</body>
</html> </body>
</html>

Untuk melihat secara jelas efek dari inline style sheet di halaman web, kita akan menambahkan
satu ke paragraf kedua, di mana tag (paragraf) adalah selektor dan properti yang mendefinisikan
align dari paragraf, ukuran font, dan nilai warna untuk paragraf itu. Gambar 1. memperlihatkan
kode CSS pernyataan gaya sebaris yang ditambahkan ke tag <p> dan gambar 2. menunjukkan efek
penambahan lembar gaya sebaris ini pada halaman web.

Gambar 1. Penggunaan Embedded Style Sheet

Gambar 2. Pengaruh Penggunaan Inline Style Sheet terhadap Embedded Style Sheet yang
ditambahkan pada <p> tag

Embedded Style Sheets

Embedded Style sheets digunakan untuk mengontrol style dari satu halaman Web. Pengguna dapat
mengatur bagaimana seluruh halaman web akan muncul termasuk link, font, teks dan banyak lagi,
hanya dengan menggunakan embedded style sheet tag. Hal yang menarik dengan menyematkan
kode style adalah pengguna dapat membuat kelas kode sendiri. Ini berarti penggguna dapat
menunjukkan style yang berbeda di seluruh halaman web dan kemudian memanggilnya dalam
halaman yang dikehendaki.

Untuk menambahkan Style sheet yang disematkan ke halaman Web, maka dapat lakukan hal
berikut:
Sisipkan tag awal <style> di bagian atas halaman Web dalam tag <head> yang menentukan bagian
header.
Setelah menambahkan pernyataan style yang diinginkan, pengguna dapat mengakhiri style sheet
yang disematkan/embedded dengan menambahkan tag akhir </style>.
Terapkan gaya ini ke dalam kode halaman web. Langkah ini dilakukan dengan menempatkan
elemen kelas dengan nama kelas yang dibuat untuk selektor sheet ke dalam tag pembuka HTML
yang pengguna inginkan.
Dalam membuat kelas sheet pengguna, maka dapat menyebutnya sesuai keeinginan. Cukup
dengan menambahkan nama kelas yang pengguna inginkan mengikuti selektor yang ada.
Misalnya, p.kelasanda. Namun, pastikan tidak memulai nama kelas dengan angka, karena ini tidak
akan berfungsi di browser Firefox.

<!DOCTYPE html>
<html>
<head>
SELAMAT DATANG
<style>
p.center {
text-align: center;
color: red;
}
p.uny {
font-size:300%;
}
</style>
</head>
<body>

<h1 class="center">Paragraf ini tidak akan terpengaruh</h1>

<p class="center">Paragraf ini akan terletak di tengah dan warnanya
merah</p>
<p class="uny">Universitas Negeri Yogyakarta</p>

</body>
</html>
 Gambar 3. Penggunaan Class Style sheet pada halaman web

Langkah yang harus dilakukan supaya bisa melakukan embedded style sheet ke dalam halaman
web adalah :.

1. Membuat kode class ke selector paragraph yang letaknya ada dibawah <head> tags seperti
ini:

<!DOCTYPE html>
<html>
<head>
SELAMAT DATANG
<style>
p.center {
text-align: center;
color: red;
}
p.uny {
 font-size:300%;
}

2. Tambahkan style sheet ke dalam paragraph pertama dan kedua

<body>
<p class="center">Paragraf ini akan terletak di tengah dan warnanya merah</p>
<p class="uny">Universitas Negeri Yogyakarta</p>

</body>
3. Simpan file tadi dengan ekstensi html kemudian buka di browser. Gambar 2 menunjukkan
hasil dari penggunaan class di style sheet. Nama yang dipakai saat memanggil class di bagian
style harus sesuai, seperti contoh penggunaan nama p class="uny" adalah disesuaikan saat
pendefinisian nama class yaitu p.uny

Pembuatan Skrip Sisi Klien: JavaScript

Salah satu cara untuk meningkatkan interaktivitas halaman web adalah melalui penggunaan script.
JavaScript adalah salah satu skrip yang mungkin pernah kita dengar atau baca. Namun, banyak
orang yang belum memahami penggunaan dan klasifikasi script dalam HTML.

Bahasa skrip dapat dianggap sebagai bahasa pemrograman yang tidak kompleks. Seperti bahasa
pemrograman lainnya, JavaScript terdiri dari instruksi yang dapat dieksekusi. Hal yang
membedakan javascript dengan yang lain salah satunya bisa disisipkan ke dalam dokumen HTML.
Hasil skrip dapat dilihat menggunakan browser web seperti Netscape dan Internet Explorer.

Bagian ini akan menjelaskan beberapa konsep penting seperti konsep client-server, pemrograman
sisi klien dan pemrograman sisi server dan penggunaan event, sebelum melangkah mempelajari
penyisipan skrip ke dalam halaman web. Pengguna perlu menjelajahi lebih detail karakteristik
JavaScript, sintaks seperti variabel, operasi dan ekspresi, fungsi, struktur kontrol dan loop untuk
JavaScript

Klien dan Server

Ketika web server membuka sebuah website, maka operasi yang dijalankan oleh web server tidak
hanya sekedar berpindah dari kode HTML menjadi teks atau gambar saja. Pada saat yang sama,
web server juga berfungsi sebagai klien yang berinteraksi dengan server lain yang memiliki
dokumen HTML yang sedang pengguna akses.

Model termudah untuk mendemonstrasikan hubungan antara klien dan server adalah pemrosesan
formulir oleh aplikasi Common Gateway Interface (CGI). CGI adalah aplikasi yang dijalankan
dari web server. Pengguna web mengisi formulir dan dikirim ke CGI. Permintaan pengguna
diterima oleh CGI dan keluaran yang diminta akan dikirim. CGI Script atau Common Gateway
Interface script adalah aplikasi atau sekumpulan instruksi yang menerima data dari dokumen
HTML untuk melakukan operasi tertentu pada data tersebut.

Pemrograman Klien

CGI adalah contoh program yang dijalankan di web browser. Namun, ada beberapa kerugian yang
terkait dengannya:
1. Kebutuhan pengguna untuk terhubung ke server sebelum menjalankan skrip CGI.
2. Jika koneksi diakhiri atau terputus, CGI tidak dapat menerima permintaan web server.
3. Hanya programmer yang dapat memodifikasi program CGI karena pengguna tidak berwenang
mengakses dan memodifikasi web server.

CGI, bagaimanapun, memiliki beberapa kelebihan yang terkait dengannya:

Dalam situasi khusus, CGI hanya dapat dijalankan oleh pengguna tertentu untuk menghindari
gangguan pada sistem yang dapat memperlambat atau merusak aplikasi web server. Batasan ini
diatur oleh administrator sistem
Untuk mengatasi beberapa masalah yang terkait dengan interaksi antara dokumen HTML dan CGI,
maka client-side programming (pemrograman sisi klien) bisa digunakan. Proses ini tidak lagi
dioperasikan oleh server web akan tetapi dioperasikan oleh skrip klien. Beberapa keuntungan
menggunakan skrip klien meliputi:
1. Script yang dijalankan di web browser akan mengurangi beban proses yang dilakukan oleh
server.
2. Reaksi atau keluaran yang dihasilkan pada web browser menjadi lebih cepat.
3. Pengguna tidak perlu lagi mengirim permintaan dan menunggu keluaran CGI yang dikirim
melalui Internet.

Contoh skrip sisi klien adalah JavaScript dan VBScript. Ada teknologi pemrograman sisi klien lain
yang tersedia seperti Java Applet dan ActiveX yang mampu melakukan operasi yang lebih
kompleks seperti menampilkan grafik.