Materi Pemrograman Web1

PERTEMUAN 2
PENGENALAN HTML
OVERVIEW
Sebuah aplikasi web dibangun menggunakan tag HTML. Pada sesi pertemuan ini akan
dipelajari bagaimana membuat dokumen HTML sederhana, memformat tampilan pada
dokumen HTML dan membuat list yang yang biasa kita gunakan untuk menampilkan daftar
dengan urutan tertentu. Untuk praktikum ini akan menggunakan notepad++ sebagai HTML
editornya.
2.1 FORMAT PENULISAN HTML

Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>, <body>
beserta tag penutupnya masing-masing. Susunan tag – tag tersebut membentuk dokumen
HTML sebagai berikut :
<html>
<head>
... informasi tentang dokumen HTML
</head>
<body>
... informasi yang akan ditampilkan di web browser
</body>
</html>
2.2 MEMULAI MEMBUAT DOKUMEN DENGAN FORMAT HTML

1. Buka notepad++ sebagai editor dokumen HTML
2. Buat skrip sederhana seperti dibawah ini di notepad++ :
html>
<head>
<title>First Web</title>
</head>
<body>
Ini Web Pertama Saya
</body>
</html>
3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau.html
4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut
dengan menggunakan web browser. Dengan klik Run – Launch in Chrome/Firefox/IE.
2.3 TAG DASAR DALAM HTML

2.3.1 HEADING
Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam
dokumen HTML, dengan berbagai ukuran yang berbeda.
Pada dasarnya untuk menyatakan suatu Heading, digunakan tag <Hx> dimana x adalah
level 1 sampai 6. Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag yang mempunyai
tag awal <Hx> dan tag penutup </Hx>.
Format : <H1>...........</H1> sampai <H6>.......</H6>
Contoh :
<HTML>
<BODY>
<H1>Heading 1 adalah 24 Point</H1>
<br>
<br>
<br>
<br>
<br>
<br>
2.3.2 PARAGAF
a) Melakukan Formating Paragaf
Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan
informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen khusus, untuk
mendefinisikan teks dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti teks
tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
 teks tebal : menggunakan tag <b>
 teks penting : menggunakan tag <strong>
 teks miring : menggunakan tag <i>
 teks menekankan : menggunakan tag <em>
 teks menandai : menggunakan tag <mark>
 teks kecil : menggunakan tag <small>
 teks menghapus : menggunakan tag <del>
 teks memasukkan : menggunakan tag <ins>
 subscript / pangkat dibawah : menggunakan tag <sub>
 superscripts / pangkat di atas : menggunakan tag <sup>
b) Menggunakan Line Break

Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak berlaku
dalam penulisan dokumen HTML. Seberapa banyak kita mengklik tombol Enter, maka tidak
kan dianggap 1 pun.
Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya
fungsi tombol Enter pada keyboard. Line break menggunakan tag <br>.
c) Preformatted Text
Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu
spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut di dalam editor
teks, maka teks yang bersangkutan harus di beri tanda tag <pre> di awalnya dan </pre> di
akhir teks. Dengan tag <pre>, yang mempunyai kepanjangan "preformatted" teks akan di
tampilkan dalam browser dengan ukuran font dengan lebar - fix. Tag ini juga akan menjaga
spasi, baris baru, dan tap sesuai dengan aslinya pada saat di tampilkan dalam browser.
d) Mengolah Properti Dari Font
Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan
menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin karena
info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag
style="property:value" untuk mengubah style property dari font. Gunakan atribut style untuk
elemen styling HTML.
 background-color untuk warna latar belakang
 color untuk warna teks
 font-family untuk font teks
 font-size untuk ukuran teks
 text-align untuk perataan teks
e) Membuat Garis Horizontal

Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah <hr>. Beberapa atributnya adalah ALIGN, SIZE, dan WIDTH.
Tag hr seperti halnya tag br (<br>) adalah tag yang beridiri sendiri. Jadi tidak perlu ditutup
dengan tag penutup.
2.3.3 LIST
List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar
dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list, unordered list
dan definition list.
a) List Tanpa Urutan (Unordered Lists)
Unordered list adalah metode mengurutkan daftar dengan menggunakan symbol atau
special character pada HTML. nama lain dari unordered list sendiri adalah bullet list. Bullet
atau onordered list ini umumnya digunakan apabila kita ingin membuat suatu daftar yang
terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini, pembuatannya sangat mirip
dengan Ordered list, hanya saja ada perbedaan pada jenis synthax yang digunakan dimana
unordered list akan menggunakan <ul>.
b) List Berurut (Ordered Lists)

Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka,
abjad dan angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis elemen yang
dibutuhkan yaitu <ol> yang merupakan singkatan ordered list dan <li> yang merupakan
singkatan list item.
c) Definition List
Definition list merupakan jenis daftar yang umumnya digunakan untuk mendefinisikan
sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga daftar diatas, dalam
artian mempunyai jenis opening dan closing tag yang benar-benar berbeda dari tiga jenis
daftar diatas. Definition list akan menggunakan tiga jenis tag : Diawali dengan <dl> yang
merupakan singkatan definition list; <dt> yang merupakan singkatan definition term
(digunakan untuk kata yang akan didefinisikan); <dd> definition description yang merupakan
penjelasan dari suatu istilah (<dt>).
LATIHAN
1. Menggunakan Heading
<html>
<head>
<title>Latihan Menggunakan Heading</title>
</head>
<body>
DOKUMEN HTML INI MENGGUNAKAN HEADING
<h1>HEADING 1</h1>
<h2 align ="right">HEADING 2</h2>
<h3 align ="center">HEADING 3</h3>
<h4>HEADING 4</h4>
<h5>HEADING 5</h5>
<h6>HEADING 6</h6>
<h3>HEADING 8</h3>
</body>
</html>
2. Memformat Paragraf
<html>
<head>
<title>Latihan Formating Paragraf</title>
</head>
<body>
<p>Paragraf Pertama</p>
<p>Paragraf Pertama ini menggunakan rata kiri</p>
<p></p>
<p align="center">Paragraf Kedua</p>
<p align="center">Paragraf kedua ini menggunakan rata tengah</p>
<p></p>
<p align="right">Paragraf Ketiga</p>
<p align="right">Paragraf ketiga ini menggunakan rata kanan</p>
</body>
</html>
3. Penggunaan Line Break Dalam HTML
<html>
<head>
<title>Latihan Penggunaan Line Break</title>
<head>
<body>
Menggunakan line break<br><br>
Dengan menggunakan line break, kita dapat memindahkan kalimat<br>
setelah elemen tersebut satu baris dibawahnya.<br>
seperti menggunakan enter pada word processing.
</body>
</html>
4. Penggunaan Pre Dalam HTML
<html>
<head>
<title>Latihan Penggunaan Preformatted</title>
<head>
<body>
<pre>
Pengetikan ini dicoba menggunakan Preformatted Text
Dimana format penulisan ditampilkan dalam web sesuai dengan format yang dilakukan
seperti contoh melakukan satu tab seperti ini.
</pre>
</body>
</html>
5. Memformat Tulisan Dalam HTML
<html>
<head>
<title>Latihan Teknik Format Penulisan</title>
<head>
<body>

<b>Tulisan ini dicetak Tebal</b>
<p>

<i>Tulisan ini dicetak Miring</i>
<p>

<u>Tulisan ini dicetak Bergaris Bawah</u>
<p>

Dalam matematika, x pangkat 2 dituliskan dengan x<sup>2</sup>
<p>

Rumus kimia untuk oksigen adalah O<sub>2</sub>
<p>

<font size="1" face=arial color=blue>Tulisan ini bertulisan dengan ukuran 1,
dengan font Arial, dan berwarna biru</font>
<br>
<font size="3" face=tahoma color=red>Tulisan ini bertulisan dengan ukuran 3,
dengan font Tahoma, dan berwarna merah</font>
</body>
</html>
6. Menambahkan Garis Horizontal Pada HTML
<html>
<head>
<title>Latihan Menambahkan Horizontal Rules</title>
<head>
<body>
Menambahkan garis mendatar pada halaman ini
<hr size="15">
<hr width="700" align="left">
<hr color="blue">
<hr size="20" width="300" noshade>

</body>
</html>
7. Penggunaan Unordered List Pada HTML
<html>
<head>
<title>Latihan Penggunaan Listing</title>
<head>
<body>
<h3>Menggunakan Unordered List</h3>
<hr>
<h4>Ordered list dengan type default</h4>
<ul>
<li>Agung Nugroho</li>
<li>Mulya Setiawan</li>
<li>Rizal Mantovani</li>
</ul>
<h4>Ordered list dengan type circle</h4>

<ul type="circle">
</ul>
<h4>Ordered list dengan type square</h4>

<ul type="square">
</ul>
</body>
</html>
8. Penggunaan Ordered List Pada HTML
<html>
<head>
<title>Latihan Penggunaan Listing</title>
<head>
<body>
<h3>Menggunakan Unordered List</h3>
<hr>
<h4>Ordered list dengan type default</h4>
<ol>
</ol>
<h4>Ordered list dengan type a</h4>

<ol type="a">
</ol>
<h4>Ordered list dengan type I</h4>

<ol type="I">
</ol>
<h4>Ordered list dengan type atribut start</h4>

<ol start="5">
</ol>
</body>
</html>
STUDI KASUS
1. Buatlah skrip HTML yang mampu menampilkan format tulisan seperti dibawah ini :
2. Buatlah skrip HTML yang mampu menampilkan informasi seperti dibawah ini
PERTEMUAN 3
LINK DAN GAMBAR
OVERVIEW
Kemudahan dalam aplikasi berbasis web salah satunya adalah bisa menghubungkan
satu dokumen dengan dokumen lainnya, baik dalam satu server aplikasi web maupun dengan
server aplikasi web yang berbeda di seluruh dunia maya. HTML menyediakan hypertext link
yang merupakan daerah teks (ataupun gambar) yang bisa link (menyambungkan) ke dokumen
HTML yang lain. Seiring berkembangnya teknologi internet, bukan hanya teks dan gambar
yang bisa link ke dokumen tertentu, file multimedia pun sudah dapat dibuat link ke dokumen
yang diinginkan.
3.1 LINK
Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih
singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau
langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan
pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut
(secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :
<A href =url_tujuan> nama_link </A>
Beberapa atribut yang sering ditambahkan atau sering digunakan dalam penggunaan
sintak diatas adalah seperti dibawah ini:
Atribut Kegunaan
Href Menunjukan URL yang dituju
Name Memberikan nama pada bagian tertentu pada dokumen
Target Menunjukan target ditampilkannya link
Title Menunjukan title dari link ketika cursor digerakkan disekitar area hyperlink
3.1.2 MEMBUAT LINK KE DALAM DOKUMEN

Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari
posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila
kita langsung merujuk pada bagian tertentu sebuah halaman web. Caranya dengan
menyisipkan Tag Anchor <a> dengan atribut "name" di bagian dokumen yang akan dituju.
Untuk perintah standartnya :
<a name=”nama_section”> </a>

Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan
"#nama_section" menjadi :
<a href=”sebuah_halaman.html#nama_section”>langsung ke nama section</a>
3.2 GAMBAR
Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar
yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd, dan sebagainya.
Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar
saja yaitu jpeg, gif dan psd. Sintaksis yang digunakan secara standar adalah :
<IMG src=”url_file” width=”img_width” height=”img_height” vspace=”10” hspace=”10”

alt=”alt_teks”>
3.2.1 MEMBUAT OBJEK GAMBAR MENJADI SEBUAH HYPERLINK

Apabila kita mengakses sebuah website, seperti facebook atau search engine google
terdapat logo dari dua website tersebut. Logo tersebut merupakan gambar dimana kita sering
dapat melakukan klick terhadap gambar tersebut dan merujuk ke sebuah link tertentu.
Berikut contoh sintaks penggunaan obyek gambar menjadi hyperlink :
<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'>
 Tag <img> adalah tag HTML untuk mendefinisikan sebuah gambar.

 Atribut src adalah sumber/url dari gambar.
 Atribut alt adalah untuk memberikan nama alternatif gambar. Apabila gambar tidak
bisa ditampilkan, maka yang muncul adalah nama alternatifnya.
 Atribut height dan width adalah untuk mengatur ukuran gambar.
contoh:
<img src=‟sepeda.jpg' alt='Click Me!' width=100' height='100'>
LATIHAN
1. Membuat Link Antar Dokumen

Dalam Contoh ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman
html dengan nama teknik_informatika.html, teknik_industri.html, teknik_mesin.html
(disimpan di direktori anda masing masing) dengan script masing-masing seperti
dibawah ini:
teknik_informatika.html
<html>
<head>
<title>Teknik Informatika</title>
<head>
<body>
<h4>S1 Teknik Informatika</h4>
</body>
</html>
teknik_industri.html
<html>
<head>
<title>Teknik Industri</title>
<head>
<body>
<h4>S1 Teknik Industri</h4>
</body>
</html>
teknik_mesin.html
<html>
<head>
<title>Teknik Mesin</title>
<head>
<body>
<h4>S1 Mesin</h4>
</body>
</html>
Setelah kita menulis skrip diatas dan melakukan penyimpanan, selanjutnya kita
akan membuat halaman HTML baru yang nanti ada link untuk merujuk ke tiap
halaman HTML diatas. Simpan dengan nama halaman_utama.html.
halaman_utama.html
<html>
<head>
<title>STT Wastukancana</title>
<head>
<body>
<a href="stt-wastukancana.ac.id">
</a>
<center>
<h3>STT Wastukancana</h3>
<h5>Jalan Cikopak Sadang Purwakarta</h5>
<hr>
<a href="teknik_informatika.html">Teknik Informatika</a>
<a href="teknik_industri.html" target="blank">Teknik Industri</a>
<a href="teknik_mesin.html">Teknik Mesin</a>
<br>
<br>
<a href="http://www.stt-wastukancana.ac.id">STT Wastukancana</a>
</center>
</body>
</html>
2. Membuat Link ke Dalam Dokumen
<html>
<head>
<title>Membuat Link ke Bagian Dalam Dokumen</title>
<head>
<body>
<h4> Membuat Link ke Bagian Dalam Dokumen </h4>
<a name="Bab1"> </a>
<b> Bab 1 </b>
<br>
Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<br>
Mulai dari pemahaman, pembuatan dokumen HTML sederhana sampai membuat
Website.<br>
Sebagai pendahuluan, coba Klik link ini untuk
<a href="#sejarah"> menuju ke bagian lain </a> pada dokumen ini.
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<a name="sejarah"> </a>
<b> 1.1 Sekilas Sejarah Internet </b> <br>
Sub Bab ini merupakan bagian dari bagian bab yang dituju ketika link pada Bab1 di
klik. <br>
Untuk kembali ke bab1, klik <a href="#Bab1"> disini </a>
</body>
</html>
3. Menyisipkan Gambar Pada HTML
<html>
<head>
<title>Menambahkan Image</title>
<head>
<body>
<h4>Menambahkan Image ke Dalam Dokumen HTML</h4>
<img src="desert.jpg" width="150" height="120">
<br>
<h4>Mengatur Border Pada Image</h4>
<img src="desert.jpg" border="10" color="red">
<br>
<h4>Alternatif Text</h4>
Pada Image dibawah ini terdapat Alternatif Text.
<img src="desert1.jpg" width="100" height="120" alt="alternatif Text>
</body>
</html>
4. Membuat Gambar Menjadi Hyperlink
<html>
<head>
<title>Membuat Gambar Menjadi Hyperlink - Halaman Utama</title>
<head>
<body>
<h4>Selamat Datang di Personal Web Saya.</h4>
Untuk melanjutkan silahkan klik gambar dibawah ini
<br>
<a href="GambarSebagaiLinkSub.html">
<img src="Desert.jpg" alt="Menggunakan Gambar Link">
<a>
<br>
<br>
<br>
<br>
Selamat Menjelajah
</body>
</html>
Jika diperhatikan, skrip diatas terdapat sebuah sintak yang mengarah sebuah
halaman html tertentu. Oleh karenanya, buatlah sesuai nama halaman html diatas
agar bisa dirujuk oleh halaman tersebut. Simpan dengan nama
GambarSebagaiLinkSub.html.
<html>
<head>
<title>Halaman 2</title>
<head>
<body>
<a href="image2.html">
<img src="Desert.jpg" width="273" height="273" align="left" alt="alternatif text">
<a>
Saya adalah seorang Web Desainer yang berasal dari Kabupaten Purwakarta
</body>
</html>
Jika penulisan skrip tidak terjadi kesalahan, maka obyek gambar diatas jika
diklik maka akan merujuk ke halaman html yang telah kita buat setelahnya.
PERTEMUAN 4
FORM
OVERVIEW
Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk
melakukan “interaksi lebih” terhadap halaman dokumen tersebut. Semisal, kemampuan
dokumen HTML mampu menyediakan fasilitas yang dapat menerima masukkan atau isian
data dari user. Data isian user ini nantinya akan dapat diproses lebih lanjut menjadi informasi
yang dibutuhkan oleh user maupun oleh pemilik situs tersebut. Teknik pengisian ini dilakukan
menggunakan elemen Form.
Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan
dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai
dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data
dan lain sebagainya.
4.1 MENU FORM

Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan
dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai
dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data
dan lain sebagainya. Cara penulisan form dalam html adalah:
<form action=”_url_” method=”get|post” enctype=””>

. . . elemen-elemen yang ditambahkan dalam form . . .
</form>
<form name=”nama_form” method=”post/get” action=”url”> … isi form … </form>
Pada penulisan form "nama form" adalah nama form yang sedang digunakan, method
adalah metode atau cara yang digunakan untuk menyimpan data ke server sedangkan action
adalah alamat atau bisa juga file lain yang digunakan untuk memproses input dari form
kedalam server.
4.2 JENIS-JENIS MEDIA INPUT DALAM FORM

Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masing-masing
keperluan dalam memasukan data input. Dan kontrol form terdiri dari :
4.2.1 KONTROL BERUPA TEXT
Pengisian informasi dalam bentuk teks pada form HTML dapat dilakukan dengan
menggunakan dua buah elemen:textarea dan input. textarea digunakan untuk masukan teks
yang terdiri dari beberapa baris, sementara inputdigunakan untuk masukan teks yang hanya
satu baris.
Penggunaan elemen textarea dapat dilakukan dengan sangat sederhana, hanya
langsung memasukkan tag-nya saja:
<textarea>
</textarea>
Selain memberikan tag kosong seperti di atas, kita juga dapat mengisikan tag untuk
mendapatkan nilai masukan standar:
<textarea>
Contoh isi textarea
</textarea>
Berikut contoh penggunaan elemen textarea :
Pengaturan panjang dan lebar dari textarea dapat dilakukan melalui CSS, dengan
menggunakan properti height dan width. Walaupun dapat mengisikan teks dengan banyak
sekaligus, textarea tentunya tidak dapat digunakan untuk seluruh kasus pengisian data.
Seringkali kita menginginkan pengguna hanya mengisikan data singkat, tanpa isi teks yang
banyak. Untuk jenis masukan seperti itu, kita dapat menggunakan elemen input:
<input type=”text”>
Yang akan menghasilkan elemen masukan seperti berikut:
Perhatikan juga bahwa kita menggunakan atribut type pada elemen ini untuk
menentukan data-data yang akan diisikan. Terdapat banyak jenis tipe data yang dapat kita
isikan, dan browser akan menyesuaikan jenis masukan teks yang ada, sesuai dengan atribut
type yang kita tentukan. Nilai-nilai yang dapat diisikan pada atribut type yaitu:
color time
datetime-local datetime
number month
tel search
week url
date password
email text
range file
4.2.2 KONTROL BERUPA RADIO BUTTON

Radio button di gunakan untuk menyatakan pilihan yang bersifat tunggal, umumnya
pada web di gunakan untuk kelengkapan pertanyaan seperti pada pendaftaran online,
biasanya pertanyaan itu adalah pilihan untuk menyertakan jenis kelamin , agama, ataupun
sebagainya. Radio Button ini akan sering kita temui saat kita berselancar di dunia maya yang
terkait dengan proses input data seperti pendaftaran dan lain-lain.
Radio button dibuat dalam HTML dengan menggunakan elemen input, dengan atribut
type bernilai : code`radio`:
<input type="radio" name="jenis kelamin" value="pria"> Pria <br>

<input type="radio" name="jenis kelamin" value="wanita"> Wanita
Dalam pembuatan elemen radio button, kita juga wajib menambahkan dua atribut
lainnya, yaitu name dan value. Atribut name digunakan untuk memberitahukan browser
bahwa radio button dengan atribut name yang sama adalah merupakan kumpulan radio
button yang sama, sehingga pengguna tidak boleh memilih dua buah pilihan pada radio
button tersebut. Atribut value digunakan untuk menyimpan nilai yang ingin kita kirimkan ke
server.
Berikut contoh penggunaan elemen radio button :
4.2.3 KONTROL BERUPA CHECKBOX

Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan,
pada input type checked box kita dapat memilih satu atau beberapa pilihan, atau tidak
memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya
opsional. kita dapat menggunakan “Checkbox” pada atribut. Input checkbox adalah sebuah
masukan untuk memilih sesuatu opsi/ pilihan. Jika dipilih maka pengguna akan men-check
(mencentang) dan jika tidak memilih akan dibiarkan saja.
Elemen ini sama seperti radio button, dibuat dengan elemen input yang nilai atribut
type-nya berisikan checkbox.
<input type="checkbox" name="day" value="senin"> Senin <br>

<input type="checkbox" name="day" value="selasa"> Selasa <br>
<input type="checkbox" name="day" value="rabu"> Rabu
Seperti yang dapat dilihat, atribut name dan value juga wajib dimiliki oleh checkbox,
dengan alasan yang sama untuk radio button. Berikut contoh penggunaan elemen checkbox :
Meskipun dapat memberikan pilihan nilai kepada pengguna, radio button maupun
checkbox sangat tidak ideal untuk digunakan pada pilihan yang memiliki nilai yang sangat
banyak. Misalnya, pilihan negara yang ditinggali oleh pengguna dari ratusan negara yang ada
di dunia akan jika ditampilkan pada radio button akan menyebabkan daftar yang dipaparkan
sangat banyak dan sulit dibaca oleh pengguna. Dalam kasus seperti ini lebih baik kita
menggunakan dropdown list.
4.2.4 DROPDOWN LIST

Pembuatan elemen dropdown dilakukan dengan menggabungkan dua elemen, yaitu
select dan option. Elemen select membungkus seluruh elemen option yang ada, untuk
membentuk sebuah dropdown. Elemen option sendiri merupakan nilai dari dropdown yang
diinginkan. Perhatikan kode di bawah ini :
<select name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Berikut contoh penggunaan elemen dropdown list :
Dan jika ingin memungkinkan pengguna memilih beberapa pilihan kita dapat
menambahkan atribut multiple pada elemen select:
<select name="country" multiple>

<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="filipina">Filipina</option>
<option value="vietnam">Vietnam</option>
</select>
Berikut contoh penggunaan elemen dropdown dengan pilihan banyak :
4.2.5 BUTTON
Pada saat kita melakukan browsing di dunia maya, dan mengakses sebuah website.
Sering kita menemui tombol-tombol fungsi seperti reset, submit, send dan lain sebagainya.
Dan sering pula kita sering menemui gambar yang dibuat fungsi seperti tombol.
4.2.5.1 SUBMIT
Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di atribut action.
Pembuatan tombol submit juga dilakukan dengan menggunakan elemen input, yang atribut
type-nya diisikan dengan nilai submit, seperti berikut:
<input type="submit" name="submit" value="Masukkan Form">
Perhatikan bahwa berbeda dengan elemen-elemen input sebelumya, nilai dari atribut
value diproses menjadi teks dari tombol yang ditampilkan ke pengguna. Hal ini menyebabkan
kita tidak lagi perlu menambahkan teks setelah elemen form, seperti pada radio button
ataupun checkbox. Berikut contoh penggunaan tombol submit :
4.2.5.2 RESET
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai
semua elemen yang ada pada form). Pembuatan tombol dilakukan sama persis seperti pada
tombol submit, dengan perbedaan nilai pada atribut type, yang diisikan dengan reset pada
tombol penghapusan ini.
<input type="reset" name="reset" value="Kosongkan Form">
4.2.6 ORGANISASI ELEMEN FORM

Mengetahui bagaimana membuat elemen-elemen masukan / input pada form masih
merupakan langkah awal dalam pembuatan form HTML. Elemen-elemen masukan form jika
ditampilkan tanpa informasi tambahan tidaklah berguna, karena pengguna tidak dapat
mengetahui data apa yang harus diisikan ke dalam elemen-elemen tersebut.
Untuk memberikan informasi tambahan kepada pengguna, HTML juga menyediakan
elemen-elemen yang dapat digunakan sebagai penanda dari elemen masukan form. Adapun
elemen-elemen yagn dapat digunakan untuk tujuan tersebut yaitu label, fieldset, dan legend.
4.2.6.1 LABEL
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan
form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan, dan
harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan
atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen
label dengan elemen masukan, sehingga pengguna dapat langsung mengisikan nilai dengan
melakukan klik pada teks yang dihasilkan oleh elemen label.
Perhatikan kode berikut di mana isi dari atribut for pada label adalah sama dengan isi
atribut id pada elemen input.
<label for="username">Username</label>
<input type="text" name="username" id="username">
Berikut contoh penggunaan label :
4.2.6.2 FIELDSET
Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa
elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan
elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan.
Secara standar, elemen fieldset akan memberikan border di sekitar grup eleme-
nelemen di dalamnya, yang tentunya dapat diubah dengan menggunakan CSS. Berikut adalah
contoh penggunaan fieldset :
<fieldset>
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
Berkut hasilnya :
4.2.6.3 LEGEND
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset. Pengunaan
elemen legend sangat sederhana, hanya dengan menambahkan elemen tersebut sebagai
child pertama dari fieldset, seperti berikut :
<fieldset>
<legend>Login</legend>
<label for="password">Password</label>
<input type="text" name="password" id="password">
</fieldset>
Berikut hasilnya :
Dan tentunya tampilan dari legend dapat diubah dengan menggunakan CSS.
4.2.7 VALIDASI MASUKAN PADA FORM

Seringkali dalam pengembangan form pada aplikasi, terdapat elemen-elemen yang
tidak wajib diisikan oleh pengguna dan elemen-elemen yang wajib diisikan oleh pengguna.
Aplikasi kemudian akan melakukan pengecekan terhadap nilai masukan dari pengguna,
apakah nilai yang wajib ada sudah diisikan atau belum. Jika nilai belum diisikan maka aplikasi
akan menolak form pengguna, dengan pesan kesalahan yang menjelaskan bahwa terdapat
isian yang wajib diisi oleh pengguna. Proses pengecekan kewajiban isi atau berbagai batasan
lain ini dikenal dengan nama validasi.
Validasi pada elemen-elemen form HTML dilakukan dengan beberapa cara, yaitu:
1. Atribut requied pada elemen-elemen masukan yang wajib diisikan. Jika pengguna tidak
mengisikan elemen maka browser secara otomatis akan memberikan peringatan
kepada pengguna dan membatalkan pengiriman form. Contoh penggunaan atribut ini
yaitu :
<input type="text" name="username" requied>
2. Pengunaan atribut type yang benar, untuk memastikan browser dapat melakukan
pengecekan nilai yang diisikan pengguna dengan format sesuai dengan yang
dispesifikasikan pada standar HTML. Misalnya, jika menggunakan type="email", maka
pengguna tidak dapat mengisikan bukan email sebagai masukan form. Berikut contoh
pesan kesalahan pengisian email pada html :
LATIHAN
1. Penggunaan Input Text Dalam Sebuah Form
<html>
<head>
<title>Menyisipkan Elemen Berupa Text</title>
</head>
<body>
<font type="arial" size="6">Data Diri</font>
<br>
<br>
<font type="arial" size="5">
Nama : <input type="text" name="nama">
<br>
<br>
NIM : <input type="text" name="nim" value="" maxlength="9" size="9">
</font>
</body>
</html>
2. Penggunaan Input Text Berupa Password
<html>
<head>
<title>Input Password</title>
</head>
<body>
Password : <input type="password" name="nama" size="11" maxlength="9">
</body>
</html>
3. Penggunaan Input Text Berupa Radio Button
<html>
<head>
<title>Penggunaan Radio Button</title>
</head>
<body>
Jenis Kelamin :
<br>
<input type="radio" name="jenis_kelamin" value="L">Laki-laki
<br>
<input type="radio" name="jenis_kelamin" value="P">Perempuan
</body>
</html>
4. Penggunaan Checkbox Dalam HTML
<html>
<head>
<title>Penggunaan Checkbox</title>
</head>
<body>
Sebutkan Hobi Anda, Boleh Lebih Dari Satu :
<br>
<input type="checkbox" name="hobi_1" value="Menonton">Menonton
<br>
<input type="checkbox" name="hobi_2" value="Olahraga">Olahraga
<br>
<input type="checkbox" name="hobi_1" value="Game">Bermain Game
<br>
<input type="checkbox" name="hobi_1" value="Belanja">Belanja
<br>
<input type="checkbox" name="hobi_1" value="Membaca">Membaca
<br>
</body>
</html>
5. Penggunaan Submit, Reset, dan Image Sebagai Button
<html>
<head>
<title>Konfigurasi Button</title>
</head>
<body>
<form>
<input type="submit" value="kirim" name="submit">
<input type="reset" value="ulangi" name="reset">
<input type="button" value="batal" name="cancel">
<input type="image" name="gambar" img src="Desert.jpg"
width="194" height="90">
</form>
</body>
</html>
6. Penggunaan Textarea Dalam Form
<html>
<head>
<title>Membuat Textarea</title>
</head>
<body>
Deskripsi Diri :
<br>
<textarea name="deskripsi" cols="45" rows="5" align="center">Tuliskan
deskripsi singkat tentang anda
</textarea>
</body>
</html>
7. Penggunaan Select Dropdown Dalam Form
<html>
<head>
<title>Membuat Textarea</title>
</head>
<body>
<img src="Desert.jpg" align="right">
</img>
<br>
Silahkan Pilih Orientasi Minat :
<br>
<br>
<select name="orientasi_minat">
<option value="OD">Oracle Developer</option>
<option value="DS">Data Science</option>
<option value="UX">User Experience</option>
<option value="SD">Software Development</option>
</select>
<br>
<br>
<select name="orientasi_kemampuan" multiple>
<option value="OD">Oracle Developer</option>
<option value="DS">Data Science</option>
<option value="UX">User Experience</option>
<option value="SD">Software Development</option>
<option value="SA">System Analyst</option>
<option value="WD">Web Designer</option>
</select>
</body>
</html>
PERTEMUAN 5
LAYOUT WEB PAGE
OVERVIEW
Saat kita membuat sebuah halaman website, dapat dibuat menggunakan tabel dan
frame. Hal ini memang tidak ada perbedaan didalamnya yang begitu signifikan, tapi saat pada
proses pengaksesan halaman web mungkin akan sangat berpengaruh terhadap respons time
yang diperlukan.
Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan
bentuk kolom dan baris. Hampir semua web yang mempunyai kualitas dan profesional,
dirancang dengan menggunakan tabel. Layaknya sebuah spreadsheet yang memiliki sel dan
berisi angka-angka, tabel dalam web juga mempunyai sel yang berisi link, gambar dan text.
Frame akan dapat membagi sebuah HTML menjadi beberapa dokumen HTML. Dimana
masing-masing bagian terhubung dengan dokumen HTML yang terpisah.
5.1 TABEL
5.1.1 MEMBUAT SEBUAH TABEL DAN JUDUL TABEL
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya
setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom
menunjukkan kelompok data dalam satu kesatuan.
Sebuah tabel mempunyai judul, tempat kita menjelaskan kolom/baris yang dilibatkan,
baris untuk informasi dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi
informasi header, setiap baris menjelaskan sebuah tag tabel HTML dan setiap sel berisi
sebuah pasangan tag atau penjelasan dari fungsi tag. Berikut ini disajikan elemen-elemen
yang sering digunakan dalam pembuatan tabel dalam HTML.
Elemen Penjelasan
Mendefinisikan sebuah tabel dalam HTML jika atribut border
<table>. . .</table> dituliskan, maka browser akan menampilkan tabel dengan
border.
Mendefinisikan tulisan untuk judul tabel. Posisi default dari
judul adalah ditengah pada bagian paling atas tabel. Atribut
<caption>. . .</caption> align=”bottom” dapat digunakan untuk menempatkan judul
pada bagian bawah tabel.
Catatan : judul dapat diberi tag apa saja
Menspesifikasikan sebuah baris tabel dalam tabel. Kita dapat
<tr>. . .</tr>
mendefinisikan atribut untuk seluruh baris : align (left, center,
Elemen Penjelasan
right) dan valign (top, middle, bottom).
Mendefinisikan sel header tabel. Secara default teks dalam sel
<th>. . .</th>
ini ditebalkan dan ditampilkan ditengah.
Mendefinisikan sebuah sel data tabel. Secara default teks
dalam sel ini ditampilkan rata kiri, dan ditengah secara vertikal.
<td>. . .</td>
Sel data tabel dapat berisi atribut untuk mendefinisikan
karakteristik dari sel dan isinya.
5.1.2 MELAKUKAN FORMAT BARIS DAN KOLOM

Setiap tabel pasti akan terdiri dari atas baris-baris yang diwakili dengan sebuah tag
<tr> dan juga mempunyai kolom-kolom yang menggunakan sebuah tag <td>. Setiap baris dan
kolom pada tabel memiliki atribut nya masing-masing.
5.1.3 PEMBAHASAN TABEL LEBIH LANJUT

Pada pembahasan selanjutnya, kita akan belajar menyisipkan sebuah gambar kedalam
sebuah susunan tabel. Tabel di dalam sebuah website dapat berisi hyperlink, gambar, gambar
yang menunjuk ke sebuah hyperlink dan teks dengan huruf yang berwarna.
5.2 FRAME
Framing dalam HTML dapat kita pergunakan untuk membuat tampilan halaman HTML
yang terbagi-bagi menjadi beberapa dokumen HTML, dimana didalam setiap bagian halaman
HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap
sehingga dapat melakukan efisiensi terhadap bandwidth koneksi internet dan mempercepat
proses download page secara keseluruhan. Berikut adalah sintaks umum yang sering
digunakan dalam membuat frame :
<HTML>
<HEAD>
</HEAD>
<FRAMESET BORDER=”#” { [ROWS | COLS] } = { #, [#, [. . .] ] }>
<FRAME SRC=”url” NAME=”FrameName”>
</FRAMESET>
</HTML>
Berikut adalah atribut yang digunakan dalam frame:
Atribut Fungsi
Frameset cols Membuat frame vertikal dengan lebar kolom tertentu.
Atribut Fungsi
Frameset rows Membuat frame horizontal dengan tinggi baris tertentu.
Frame src Memasukan dokumen HTML ke dalam frame
Memasukan body text untuk browser yang tidak
Noframe
menampilkan frame
LATIHAN
1. Penggunaan Tabel Dalam HTML
<html>
<head>
<title>Pembuatan Tabel</title>
</head>
<body>
<font face="tahoma" size="4" color="blue">
<table border="0.8">
<caption align="top"> <b> <u>Daftar Alamat</u> </b> </caption>
<tr bgcolor="blue" align="center">
<td width="40">No.</td>
<td width="150">Nama</td>
<td width="200">Alamat</td>
</tr>
<tr bgcolor=skyblue>
<td align="center">1.</td>
<td>Ika Iriyanti</td>
<td>Cimahi</td>
</tr>
<tr bgcolor=orange>
<td>Yogi Pranamulya</td>
<td>Kuningan</td>
</tr>
<tr bgcolor=skyblue>
<td>Annisa Fitri</td>
<td>Purwakarta</td>
</tr>
<tr bgcolor=orange>
<td>Endra Abdul Hadi</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
2. Penggunaan Formating Baris dan Kolom Dalam Skrip HTML
<html>
<head>
<title>Mengatur Baris dan Kolom</title>
</head>
<body>
<table border="3" cellspacing="3" cellpadding="5">
<caption>Daftar Order Barang</caption>
<th>No</th>
<th>Barang</th>
<th>Jenis</th>
<th>Harga</th>
<th>Jumlah</th>
<th>Total Harga</th>
<tr>
<td align="center">1</td>
<td>Pocari Sweat</td>
<td rowspan="2">Minuman</td>
<td>Rp. 6.000</td>
<td align="right">3</td>
<td>Rp. 18.000</td>
</tr>
<tr>
<td>Mizone</td>
<td>Rp. 5.000</td>
<td>Rp. 15.000</td>
</tr>
<tr>
<td>Pilus Garuda</td>
<td rowspan="3">Cemilan</td>
<td>Rp. 5.000</td>
<td>Rp. 20.000</td>
</tr>
<tr>
<td>Tango Cokelat</td>
<td>Rp. 10.000</td>
<td>Rp. 40.000</td>
</tr>
<tr>
<td>Qtela</td>
<td>Rp. 10.000</td>
<td>Rp. 10.000</td>
</tr>
<tr height=30>
<td colspan="5"><b></td>
</tr>
</table>
</body>
</html>
3. Penyisipan Gambar dan Text Dalam Tabel
<html>
<head>
<title>Sisipan Gambar Dalam Tabel</title>
</head>
<body>
<table border="2">
<caption>Dokumen Pemotretan</caption>
<tr>
<th>1.</th>
<th>2.</th>
<th>3.</th>
</tr>
<tr align="center">
<td>Desert</td>
<td>Lighthouse</td>
<td>Jellyfish</td>
</tr>
<td align="center">
<img src="Desert.jpg" width="200" height="200"></td>
<td align="center">
<img src="Lighthouse.jpg" width="200"
height="200"></td>
<td align="center">
<a href="latihan2.html">
<img src="Jellyfish.jpg" width="200" height="200"></td>
</table>
</body>
</html>
4. Contoh Penggunaan Menu Menggunakan Frame HTML

Sebelum membuat sebuah frame, kita buat beberapa dokumen web yang nanti akan
ditampilkan ke dalam tiap frame. Misalnya kita akan membuat tiga halaman yang akan
ditampilkan yang terdiri dari halaman header.html, tif.html, menuutama.html, home.html
dan menu.html. sebuah tips jika akan membuat sebuah website dengan sub subnya, akan
lebih efektif lagi jika kita membuat sub-sub nya terlebih dahulu. Misalnya membuat header,
menu-menu baru dibuat frame utama berisi sub-sub diatas.
a. Header
Simpan dengan nama header.html
<html>
<head>
</head>
<body>
<center>
<font face="tahoma">
<h5>Jl. Alternative Bukit Indah - Purwakarta, Mulyamekar,
Kec. Babakancikao, Kabupaten Purwakarta, Jawa Barat 41151</h5>
<img src="sttwastu.jpeg">
<hr>
</font>
</center>
</body>
</html>
b. Menu Utama
Selanjutnya adalah kita membuat menu utama. Dimana menu utama ini adalah menu
paling depan sebagai “menu penyambut” ketika user mengakses halaman website yang
kita buat. Berikut ini adalah skrip yang dibuat. Simpan dengan nama menuutama.html
<html>
<head>
<title>Sejarah STT Wastukancana</title>
</head>
<body>
<pre>
<font face="tahoma">
Sekolah Tinggi Teknologi Wastukancana (selanjutnya disebut STT Wastukancana)
merupakan salah satu perguruan tinggi swasta yang berkedudukan di Provinsi
Jawa Barat Kabupaten Purwakarta.
Beberapa jurusan yang terdapat di STT Wastukancana adalah sebagai berikut
<ol>
<li>S1 Teknik Informatika</li>
<li>S1 Teknik Industri</li>
<li>S1 Teknik Mesin</li>
<li>S1 Teknik Tekstil</li>
<li>D3 Manajemen Industri</li>
</ol>
</body>
</html>
c. Sub Menu Teknik Informatika

Pada langkah selanjutnya adalah membuat sub menu tif.html.
<html>
<head>
<title>S1 Teknik Informatika</title>
</head>
<body>
<img src="humanika.jpg" width="168" height="131" alt="STT Wastukancana" align="left">
<h3>S1 Teknik Informatika</h3>
<hr>
<pre>
Program S1 Teknik Informatika diarahkan pada hasil lulusan yang berbudi luhur, berjiwa
entrepreneur
dan memiliki kualifikasi sebagai berikut :
1. Kemampuan merancang dan mengelola proyek-proyek perangkat lunak
2. Kemampuan menguasai aspek teknis dan manajemen dari pemanfaatan teknologi informasi
3. Kemampuan mengevaluasi dan menghadapi dampak dari teknologi informasi
4. Kemampuan mempunyai daya inovatif dalam menghasilkan produk/jasa teknologi informasi
5. Kemampuan merancang, mengembangkan, dan mengimplementasikan proyek dalam bidang
media digital
<table width="100%" border="1" cellpadding="1" cellspacing="1">

<tr bgcolor="#e2e2e2">
<td>Tahapan</td>
<td>Mata Kuliah Reguler</td>
</tr>
<tr>
<td rowspan="7">Semester 1</td>
<td>Analisis dan Desain Sistem</td>
</tr>
<tr><td>Desain dan Jaringan Komputer</td></tr>
<tr><td>Software Engineering</td></tr>
<tr><td>Sistem Informasi</td></tr>
<tr><td>Sistem Manajemen Database</td></tr>
<tr><td>Pengantar Teknologi Informasi</td></tr>
<tr><td>Praktikum Dasar Jaringan Komputer</td></tr>
</body>
</html>
d. Menu Pilihan
Langkah selanjutnya adalah membuat bagian dimana untuk memberikan akses
kepada pengguna dengan menyajikan kumpulan link-link dari sub menu yang ada.
Contoh skripnya adalah sebagai berikut. Simpan dengan nama menu.html
<html>
<head>
</head>
<body>
<center>
<a href="menuutama.html" target="main">Home</a><br>
<a href="tif.html" target="main">S1 Teknik Informatika</a><br>
<a href="#">S1 Teknik Industri</a><br>
<a href="#">S1 Sistem Mesin</a><br>
<a href="#">S1 Sistem Tekstil</a><br>
<a href="#">D3 Manajemen Industri</a><br>
</center>
</body>
</html>
e. Frame
Setelah kita telah selesai membuat sub menu dari website tersebut, selanjutnya
kita akan membuat frame. Agar dapat memilah satu halaman website menjadi
beberapa bagian yang berisi tiap halaman tersebut. Berikut ini adalah contoh skrip
yang akan kita buat. Simpan dengan nama home.html.
<html>
<head>
<title>Menggunakan Frame</title>
</head>
<frameset rows=200,*>
<frame src="header.html" name="atas">
<frameset cols=250,*>
<frame src="menu.html" name="kiri">
<frame src="menuutama.html" name="main">
</frameset>
<noframes>
<body>
</body>
</noframes>
</body>
</html>
PERTEMUAN 6-7
CASCADING STYLE SHEET (CSS)
OVERVIEW
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk
mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan
untuk pengembangan website kurang lebih pada tahun 1996. Nama CSS didapat dari fakta
bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian
akan membentuk hubungan parent-child pada setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang
ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium
(W3C). CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda
untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu
dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille.
Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi
gaya tampilan atau skema warna dengan menggunakan CSS.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser
terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
6.1 PENGERTIAN CSS

 CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang
menentukan bagiamana suatu text akan tertampil di halaman web.
 Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors
(warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan
lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan
spacing (jarak) disebut juga “styles”.
 Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers
(lapisan) yang berbeda.
 CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen
akan disajikan.
 Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style
sheet.
 Saat menggunakan CSS, kita tidak perlu menulis font, color atau size pada setiap
paragraf, atau pada setiap dokumen. Setelah kita membuat sebuah style sheet, kita
dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila
diperlukan.
6.2 KEUNTUNGAN MENGGUNAKAN CSS
 CSS memberikan keseragaman pada halaman web.
 Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat
menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web. kita
hanya perlu membuat perubahan dalam style sheet.
 CSS memungkinkan kita untuk memuat halaman web kita dengan mudah.
 Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
 CSS membantu kita memelihara halaman web kita dengan mudah dan efektif.
6.3 PENGERTIAN SELECTOR, PROPERTY, DAN VALUE PADA CSS
6.3.1 SELECTOR
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,
CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS dengan
tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin
dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag
HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag
<p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li,
dan lain-lain. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.
6.3.2 PROPERTY
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag
HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir
yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property
adalah “efek apa yang ingin dimanipulasi dari tag p tersebut “, seperti ukuran text, warna
text, jenis fontnya, dan lain-lain
6.3.3 VALUE
Value CSS adalah nilai dari property. Misalkan untuk property backgroundcolor yang
digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya
dapat berupa red, blue, black, atau white.
6.4 PENEMPATAN SEBUAH CSS

Ada tiga cara untuk menempatkan sebuah CSS ke dalam sebuah halaman web, ketiga
cara ini dapat digunakan untuk memformat halaman web dengan style yang diinginkan.
6.4.1 INLINE STYLE SHEET

CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang
akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara
menambahkan atribut title pada elemen (tag) HTML yang akan diatur style-nya. Oleh karena
itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara
independen.
Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML
yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat
mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style
sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu
property saja pada tag HTML yang akan dimanipulasi.
6.4.2 EMBEDDED STYLE SHEET

Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi
embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya,
hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag <head>) dengan
menambahkan tag <style type=”text/css”>.
Dengan menggunakan model penempatan CSS sebagai embedded style sheet,
pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang
berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara
otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang
mengharuskan pembuat web menentukan style pada tag – tag yang digunakan berulang kali
dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut.
6.4.3 LINKED STYLE SHEET

Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked
style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style
yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh halaman web yang
membutuhkan pengaturan style.
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika
ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang
dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika
ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang
dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.
6.5 PENGGUNAAN CSS PADA HALAMAN WEB

Kita dapat menggunakan salah satu dari ketiga penempatan CSS yang ada, namun
tidak menutup kemungkinan juga kita dapat menggunakan dua atau ketiganya dalam sebuah
website jika memang diperlukan.
6.5.1 PENGOLAHAN FONT

Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf
(<p>). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau ditambahkan CSS
untuk memanipulasi font jika pada tag HTML tersebut akan berisi tulisan / text, seperti :
<th><td>, <a>, <li>, <h1>…<h6>, dan tag – tag lain yang memungkinkan berisi text. Bentuk
manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini :
Nama Property Value Contoh Penggunaan

Font-family Nama font P {font-family:arial.Helvetica}
Nilai integer dengan pilihan
Font-size P {font-size:24em}
satuan : em|pt|px|%
Font-style Oblique|italic|normal P {font-style:italic}
Font-variant Normal|small-caps P {font-varian:small-caps}
Font-weight Normal|bold|bolder|100-900 P {font-weight:bold}
6.5.2 MEMANIPULASI COLOR DAN BACKGROUND

Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada
tulisan, menambahkan warna background, atau dengan menambahkan gambar sebagai
background. Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di
atas, ditampilkan pada tabel di bawah ini.

Body {
Rangkaian 6 digit heksadesimal atau
Background-color background-color : green;
nama warna
}
Background-image Url dimana image disimpan Body {
background-image :
url(gambar1.jpg);
}
Body {
Background- background-attachment :
Fixed|scroll|inherit
attachment scroll;
}
Body {
Background-repeat : repeat;
Inherit|repeat|no-repeat|repeat-
Background-repeat Background-image :
x|repeat-y
url(image/gambar1.jpg);
}
Body {
Background-repeat : no-repeat;
Background-image :
Background-
Bottom|center|left|right|top|inherit url(image/gambar1.jpg);
position
Background-position : bottom
center
}
Color Rangkaian 6 digit H1 {color : red}
7.1 MENGENAL JENIS-JENIS SELECTOR DASAR CSS

Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di
dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh
tag h1 yang memiliki atribut class=judul.
7.1.1 UNIVERSAL SELECTOR

Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini
bertujuan untuk „mencari‟ semua tag yang ada.
Contoh Universal Selector CSS:
*{
color: blue;
background-color: white;}
}
Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan
background berwarna putih.
7.1.2 ELEMENT TYPE SELECTOR
Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya
merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan
seluruh tag tersebut akan ditangkap oleh selector ini.
Contoh Element Type Selector CSS:
h1 {
text-decoration: underline;
}
p{
font-size:14px;
}
Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan
seluruh tag <p>akan berukuran 14pixel.
Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag
<p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag
penutup </p>.
7.1.3 CLASS SELECTOR

Class Selector merupakan salah satu selector yang paling umum dan paling sering
digunakan. Class Selector akan „mencari‟ seluruh tag yang memiliki atribut class dengan nilai
yang sesuai. Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai
atribut class. Contohnya:
<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>
<h1 class=”judul”>Judul Artikel</h1>
<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>
Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan
nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1
tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.
Contohnya dalam baris terakhir pada contoh diatas, tag h2 memiliki atribut
class=”judul penting berwarna”. Tag ini terdiri dari 3 class, yaitu judul, penting, dan class
berwarna. Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:
.paragraf_pertama {
color: red;
}
.judul {
font-size:20px;
}
.penting {
color:red;
font-size: 1em;
}
Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda titik
sebelum nama dari class. Untuk contoh kita, seluruh class yang memiliki nilai
“paragraf_pertama”, warna text akan menjadi merah. Dan seluruh class judul akan memiliki
font 20 pixel.
7.1.4 ID SELECTOR
ID Selector bersama-sama dengan class selector merupakan selector paling umum dan
juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama
dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut
class untuk tag HTML, untuk ID selector, kita menggunakan atribut id. Contoh penggunaan
atribut id pada tag HTML :
<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>
<h1 id=”judul_utama”>Judul Artikel</h1>
<h2 id=”sub_judul”>Sub Judul Artikel<h2>
Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk
masingmasing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang
digunakan harus unik dan tidak boleh sama. Dengan kata lain, id hanya bisa digunakan satu
kali dalam sebuah halaman web dan tidak boleh sama. Contoh penggunaan id selector kode
CSS Class Selector adalah sebagai berikut:
#paragraf_ pembuka {
color: red;
}
#judul utama {
font-size:20px
}
Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita
mencari tag yang memiliki id tersebut.
7.1.5 ATTRIBUTE SELECTOR

Selector ini sedikit lebih advanced dibandingkan dengan selector-selector sebelumnya.
Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang
dituliskan.
Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:
[href] {
font-size:20px ;
}
[type="submit"] {
width:30px;
}
Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada
diantara tanda kurung siku “*” dan “+”. *href+ akan cocok dengan seluruh tag yang memiliki
atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk contoh
*type=”submit”+ akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang
dalam hal ini adalah tombol submit dalam form. Walaupun memiliki kemampuan mencari tag
yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.
LATIHAN
1. Penggunaan Inline Style Sheet
<html>
<head>
<title>CSS Untuk Memanipulasi Font</title>
</head>
<body>
<h3 style="font-family:sans; color:red">Sejarah STT Wastukancana</h3>
<p style="font-family:verdana; color:blue">
STT. (Sekolah Tinggi Teknologi) Wastukancana Purwakarta untuk yang pertama
kalinya
diselenggarakan oleh Yayasan Bunga Bangsa berdasarkan Akta Notaris
no. 08 tanggal 09 Februari 2000 (dilampirkan).
Izin Operasional dengan status terdaftar untuk STT. Wastukancana berdasarkan
SK. Mendiknas no. 255/D/O/2000 tanggal 12 Desember 2000 (Dilampirkan).
</p>
<p style="font-size:16px">
Nama Wastukancana diambil dari nama besar Raja Padjadjaran yaitu Niskala
Rahyang Niskala Wastukancana,
pada zaman kepemimpinannya berdasar pada prinsip-prinsip: Taat pada agama,
Patuh pada aturan,
dan Mengutamakan kesejahteraan rakyat; karena spirit inilah namanya
diabadikan.
</p>
<p style="font-style:italic">
Awal kegiatan proses belajar-mengajar pada tahun akademik 2000/2001
dilaksanakan di jalan Jendral Sudirman No. 28 Purwakarta Telp. 0264-214952,
gedung tersebut adalah gedung yang disewa oleh Yayasan Bunga Bangsa;
sementara itu mebeler; AC; Komputer; dan peralatan lainnya adalah milik yayasan
sebagai investasi untuk memenuhi kebutuhan proses belajar mengajar
berlangsung.
</p>
</body>
2. Penggunaan Embedded Style Sheet
<html>
<head>
<title>Contoh Internal CSS</title>

<style type="text/css">
p{
font-family: serif;
line-height: 1.75em;
font-size: 18px;
}
i{
font-family: sans;
color: orange;
}
</style>
</head>
<body>

h2 {
font-family: sans;
color: red;
}
</style>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja.
Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i>
adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
3. Penggunaan Lineked Style Sheet

Simpan File Pertama dengan nama mystyle.css
p{
font-family: serif;
line-height: 1.75em;
}
i{
font-family: sans;
color: red;
}
h2 {
font-family: sans;
color: blue;
}
Kemudian buat file kedua dengan nama latihan3.html
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h2>Ini judul artikel</h2>
<p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja.
Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i>
adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>
4. Manupulasi Font Dengan Menggunakan Selector Tag, Class, ID dan Universal
<html>
<head>
<title>Contoh Internal CSS</title>

p{
color: blue;
}
.red {
color: white;
background: red;
padding: 5px;
}
#header {
background: teal;
color: white;
height: 100px;
padding: 50px;
}
*{
border: 1px solid grey;
}
</style>
</head>
<body>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>
<p>Saya sedang belajar <b class="red">CSS</b> di Mata Kuliah Pemrograman Web</p>
<header id="header">
<h1>Selamat Datang di Website Saya</h1>
</header>
</body>
</html>
PERTEMUAN 9
PENGENALAN JAVASCRIPT
OVERVIEW
Javascript adalah bahasa pemrograman yang wajib kita pelajari jika ingin mendalami
dunia web development. Saat ini javascript tidak hanya digunakan di sisi client (browser) saja.
Javascript juga digunakan pada server, console, program desktop, mobile, IoT, game, dan lain -
lain. Hal ini membuat javascript semakin populer dan menjadi bahasa yang paling banyak
digunakan di Github.
9.1 APA ITU JAVASCRIPT

JavaScript adalah bahasa pemograman yang digunakan untuk membuat interaksi atau
menambah fitur web dinamis kedalam sebuah web. JavaScript adalah bahasa pemograman
web yang bersifat Client Side Programming Language. Client Side Programming Language
adalah tipe bahasa pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client
yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.
Jenis bahasa pemograman Client Side berbeda dengan bahasa pemograman Server
Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.
Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web
browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely
tiped, dan berorientasi objek.
9.1.2 FUNGSI JAVASCRIPT DALAM PEMROGRAMAN WEB

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara
user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server.
Sebelum javascript, setiap interaksi dari user harus diproses oleh web server. Bayangkan
ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol
submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan
mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum diisi.
Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek
apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web
browser.
Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form,
namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik
halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan
JavaScript. Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web
browser yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi
JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript,
atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak bisa bergantung
sepenuhnya kepada JavaScript.
9.2 MENGENAL CONSOLE JAVASCRIPT

Ada yang mengatakan, belajar javascript itu susah, karena saat melihat hasilnya di web
browser, pesan error-nya tidak tampil. Pendapat ini tidak benar. Karena kita bisa melihatnya
melalui console. Console Javascript dapat kita buka melalui Inspect Element->Console.
Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan
langsung ditampilkan. Misalnya, mari kita coba kode berikut:
console.log("Hi apa kabar!");

alert("Saya sedang belajar javascript");
Maka hasilnya :
Setelah mencoba console Javascript, maka dapat kita simpulkan:

 Console bisa digunakan untuk mengujicoba fungsi atau kode Javascript;
 Console dapat kita gunakan untuk melihat pesan error saat debugging program.
9.3 MEMBUAT PROGRAM JAVASCRIPT

Silahkan buka teks editor, kemudian buat file beru bernama hello_world.html dan isi
dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Javascript</title>
</head>
<body>
<script>
console.log("Saya belajar Javascript");
document.write("Hello World!");
</script>
</body>
</html>
Maka hasilnya :
Tadi kita menulis perintah:
console.log("Saya belajar Javascript");
Karena perintah atau fungsi console.log() akan menampilkan pesan ke dalam console
javascript. Sedangkan perintah document.write() berfungsi untuk menulis ke dokumen HTML.
Sekarang coba buka console javascript. Maka kita akan melihat pesan "Saya belajar
Javascript":
9.4 CARA MENULIS KODE JAVASCRIPT DI HTML
Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML. Cara tersebut
merupakan cara penulisan embeded (ditempel). Masih ada beberapa cara lagi yang perlu kita
ketahui:
1. Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
2. Inline (kode Javascript ditulis pada atribut HTML)
3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)
9.4.1 PENULISAN KODE JAVASCRIPT DENGAN EMBED

Pada cara ini, kita menggunakan tag <script> untuk menempelkan (embed) kode
Javascript pada HTML. Tag ini dapat ditulis di dalam tag <head> dan <body>. Contohnya
sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascripl</title>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <head>
console.log("Hello JS dari Head");
</script>
</head>
<body>
<p>Tutorial Javascript</p>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <body>
console.log("Hello JS dari body");
</script>
</body>
</html>
Mana yang lebih bagus, ditulis di dalam <head> atau <body>?, Banyak yang
merekomendasikan menuliskannya di dalam <body>, karena akan membuat web di-load lebih
cepat.
9.4.2 PENULISAN KODE JAVASCRIPT INLINE

Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini
biasanya digunakan untuk memanggil suatu fungsi pada event tertentu. Misal: saat link diklik.
Contohnya sebagai berikut :
<a href="#" onclick="alert('Hello..!!')">Klik Link Ini !</a>
Atau bisa juga seperti ini :
<a href="javascript:alert('Hello..!!')">Klik Link Ini !</a>
Hasilnya :
Pada atribut onclick dan href kita menuliskan fungsi javascript di sana. Atribut onclick
merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu
diklik. Pada contoh di atas, kita menjalankan fungsi alert(). Fungsi ini merupakan fungsi untuk
menampilkan dialog.
Lalu pada atribut href, kita juga memanggil fungsi alert() dengan didahului javascript:.
Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL. Karena kita ingin
memanggil kode javascript di sana, maka alamat link tersebut kita ubah menjadi javascript:
lalu diikuti dengan fungsi yang akan dipanggil.
9.4.3 PENULISAN KODE JAVASCRIPT EKSTERNAL

Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML. Cara
ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara ini—dapat
lebih mudah mengelola kode projek. Berikut adalah contohnya, Kita buat dua file, yaitu: file
HTML dan Javascript.
belajar-js/
├── kode-program.js
└── index.html
Isi dari file kode-program.js
alert("Hello, ini adalah program JS eksternal!");
Isi dari file index.html
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<p>Tutorial Javascript</p>


<script src="kode-program.js"></script>
</body>
</html>
Hasilnya :
Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML. Lalu,
pada kode HTML. Kita menyisipkannya dengan memberikan atribut src pada tag <script>.


<script src="kode-program.js"></script>
Maka apapun yang ada di dalam file kode-program.js akan dapat dibaca dari file
index.html. Bagaimana kalau file javascriptnya berada di folder yang berbeda?, Kita bisa
menuliskan alamat lengkap foldernya.
PERTEMUAN 10-11
TIPE DATA DAN OPERASI DASAR JAVASCRIPT
10.1 PENGERTIAN VARIABEL

Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan
berbagai macam nilai seperti string (teks), number (angka), objek, array, dan sebagainya. Kita
bisa ibaratkan, variabel itu seperti wadah untuk menyimpan sesuatu.
10.2 CARA MEMBUAT VARIABEL DI JAVASCRIPT

Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata
kunci var lalu diikuti dengan nama variabel dan nilainya. Contohnya sebagai berikut :
var title = "Belajar Pemrograman Javascript";
Pada contoh di atas, kita membuat variabel bernama title dengan nilai berupa teks
(string): "Belajar Pemrograman Javascript". Contoh selanjutnya :
var siteName = "javascript";

var url = "https://javascript.com";
var visitorCount = 5000000;
Pada contoh di atas, kita menggunakan huruf bersar atau kapital untuk nama variabel
yang terdiri dari dua suku kata. Kenapa tidak menggunakan underscore?, Pada Javascript kita
dianjurkan menggunakan camelCase dalam penamaan. Boleh-boleh saja menggunakan snake
case atau underscore. Hal tersebut tidak akan menjadi masalah, program masih tetap valid.
Namun, mayoritas programmer Javascript menggunakan camelCase. Selain kata kunci var kita
juga bisa membuat variabel dengan kata kunci let atau tanpa awalan apapun. Contohnya
sebagai berikut :
// membuat variabel dengan kata kunci let

let price = 15000;
// membuat variabel tanpa awalan apapun

stock = 12
10.3 MENAMPILKAN ISI VARIABEL
Untuk menampilkan isi variabel, kita bisa memanfaatkan fungsi-fungsi untuk
menampilkan output seperti:
 Fungsi console.log() menampilkan output ke console javascript;
 Fungsi document.write() menampilkan output ke dokumen HTML;
 dan Fungsi alert() menampilkan output ke jendela dialog.
Buatlah file bernama belajar-variabel.html, lalu isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Variabel dalam Javascript</title>
<script>
// membuat variabel
var name = "Javascript";
var visitorCount = 5000000;
var isActive = true;
var url = "https://www.javascript.com";
// menampilkan variabel ke jendela dialog (alert)

alert("Selamat datang di " + name);
// menampilkan variabel ke dalam HTML

document.write("Nama Situs: " + name + "<br>");
document.write("Jumlah Pengunjung: " + visitorCount + "<br>");
document.write("Status Aktif: " + isActive + "<br>");
document.write("Alamat URL: " + url + "<br>");
</script>
</head>
<body>
</body>
</html>
Setelah itu, coba buka dengan browser dan perhatikanlah hasilnya :
Arti simbol plus (+) pada contoh di atas adalah menggabungkan, bukan menjumlahkan.
10.4 MENGISI ULANG VARIABEL

Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya dapat kita isi ulang
(berubah). Berikut adalah contohnya:
// mula-mula kita buat variabel dengan isi seperti ini

var age = 18;
// lalu kita isi ulang

age = 21;
Kenapa saat mengisi ulang nilai variabel tidak menggunakan kata kunci var?, Karena
kata kunci var dibutuhkan saat membuat variabel saja. Sedangkan untuk mengisi ulang, kita
cukup tulis seperti di atas. Apabila kita menggunakan kata kunci var, berarti jadinya kita
membuat variabel baru, bukan mengisi ulang.
10.5 MENGHAPUS VARIABEL

Penghapusan variabel dalam Javascript memang jarang dilakukan. Namun, untuk
program yang membutuhkan ketelitian dalam alokasi memori, penghapusan variabel perlu
dilakukan agar penggunaan memori lebih optimal. Penghapusan variabel dapat dilakukan
dengan kata kunci delete.
Contoh :
bookTitle = "Belajar Pemrograman Javascript";

delete bookTitle;
Maka variabel bookTitle akan menghilang dari memori. Penghapusan variabel hanya
bisa dilakukan pada variabel yang dibuat tanpa awalan. Sedangkan variabel yang dibuat
dengan kata kunci var dan let akan dihapus otomatis.
10.5 TIPE DATA DALAM JAVASCRIPT

Tipe data adalah jenis-jenis data yang bisa kita simpan di dalam variabel. Ada
beberapa tipe data dalam pemrograman Javascript:
 String (teks)
 Integer atau Number (bilangan bulat)
 Float (bilangan Pecahan)
 Boolean
 Object
Javascript adalah bahasa yang bersifat dynamic typing, artinya kita tidak harus
menuliskan tipe data pada saat pembuatan variabel seperti pada bahasa C, C++, Java, dan
sebagainya yang bersifat static typing. Berikut adalah contohnya:
var name = "Dian";

var age = 22;
var single = true;
Javascript akan otomatis mengenali tipe data yang kita berikan pada variabel. Pada
contoh di atas variabel:
 name bertipe data String;
 age bertipe data integer;
 dan single bertipe data boolean.
Hal ini bisa juga kita cek dengan kata kunci typeof. Berikut adalah contohnya:
typeof name;
typeof age;
typeof single;
Hasilnya pada console:
10.6 ATURAN PENULISAN NAMA VARIABEL DI JAVASCRIPT

Ada beberapa aturan penulisan variabel dalam Javascript:
 Penamaan variabel tidak boleh menggunakan angka di depannya. Berikut adalah
contohnya
// salah
var 123nama = "nugroho";
// benar
var nama123 = "nugroho";
 Penamaan variabel boleh menggunakan awal underscore. Berikut adalah contohnya:
var _nama = "nugroho";
 Penamaan variabel dianjurkan menggunakan camelCase apabila tediri dari dua suku
kata. Berikut adalah contohnya:
var fullName = "nugroho";

 Penamaan variabel dianjurkan menggunakan bahasa inggris. Berikut adalah
contohnya:
var postTitle = "Tutorial Javascript";
11.1 PENGERTIAN OPERATOR

Operator merupakan hal dasar yang harus dipahami dalam pemrograman. Karena kita
akan banyak menggunakannya untuk melakukan berbagai macam operasi di dalam program.
Misalkan kita punya dua variabel seperti ini:
var a = 3;
var b = 4;
Bagaimana cara menjumblahkan variabel a dan b?, Jawabannya menggunakan tanda plus (+).
var c = a + b;
Hasil penjumlahannya akan disimpan di dalam variabel c. Tanda plus + adalah sebuah
operator.
Operator adalah simbol yang digunakan untuk melakukan operasi pada suatu nilai dan
variabel. Operator dalam pemrograman terbagi dalam 6 jenis:
 Operator Aritmatika;
 Operator Penugasan (Assignment);
 Opeartor relasi atau perbandingan;
 Operator Logika;
 Operator Bitwise;
 Operator Ternary;
Operator wajib ada di setiap bahasa pemrograman. Ke 6 jenis operator di atas harus
kita pahami.
11.1.1 OPERATOR ARITMATIKA PADA JAVASCRIPT

Operator aritmatika merupakan operator untuk melakukan operasi aritmatika seperti
penjumlahan, pengurangan, pembagian, perkalian, dan sebagainya. Operator aritmatika
terdiri dari:
Nama Operator Simbol

Penjumlahan +
Pengurangan -
Perkalian *
Pemangkatan **
Pembagian /
Sisa Bagi %
Untuk melakukan operasi perkalian, kita menggunakan simbol asterik *. Jangan

gunakan x, karena simbol x bukan termasuk dalam operator di dalam pemrograman. Lalu
untuk pemangkatan kita menggunakan asterik ganda **. Untuk pembagian, kita gunakan
simbol garis miring /. Berikut adalah contohnya:
var a = 5;
var b = 3;
// menggunakan operator penjumlahan

var c = a + b;
console.log(c);
Hasilnya :
Contoh yang lainnya:
<!DOCTYPE html>
<html>
<head>
<title>Operator Aritmatika</title>
</head>
<body>
<script>
var a = 15;
var b = 4;
var c = 0;
// pengurangan
c = a - b;
document.write(`${a} - ${b} = ${c}<br/>`);
// Perkalian
c = a * b;
document.write(`${a} * ${b} = ${c}<br/>`);
// pemangkatan
c = a ** b;
document.write(`${a} ** ${b} = ${c}<br/>`);
// Pembagian
c = a / b;
document.write(`${a} / ${b} = ${c}<br/>`);
// Modulo
c = a % b;
document.write(`${a} % ${b} = ${c}<br/>`);
</script>
</body>
</html>
Hasilnya :
Operator modulo adalah operator untuk menghitung sisa bagi. Misalnya 3 dibagi 2,
maka sisanya adalah 1.
11.1.2 OPERATOR PENUGASAN PADA JAVA SCRIPT

Operator penugasan adalah operator yang digunakan untuk memberikan tugas kepada
variabel. Biasanya digunakan untuk mengisi variabel. Berikut adalah contohnya:
var a = 19;
Variabel a kita berikan tugas untuk menyimpan nilai 19. Operator penugasan terdiri dari:

Pengisian Nilai =
Pengisian dan Penambahan +=
Pengisian dan Pengurangan -=
Pengisian dan Perkalian *=
Pengisian dan Pemangkatan **=
Pengisian dan Pembagian /=
Pengisian dan Sisa Bagi %=
Operator penugasan sama seperti operator aritmatika. Ia juga digunakan untuk

melakukan operasi aritmatika. Berikut adalah contohnya:
var jumlahView = 12;
// menggunakan operator penugasan penjumlahan

// untuk menambah nilai
jumlahView += 1;
Hasilnya, Variabel jumlahView akan bertambah satu. Maksud dari jumlahView += 1

adalah seperti ini:
jumlahView = jumlahView + 1;
Khusus untuk operator penugasan yang dijumlahkan dan dikurangi dengan satu, bisa
disingkat dengan ++ dan -- untuk pengurangan. Berikut adalah contohnya:
var a = 2;
a++;
Maka nilai dari variabel a akan menjadi 3. Berikut adalah contoh operator penugasan:
<!DOCTYPE html>
<html>
<head>
<title>Operator Penugasan</title>
</head>
<body>
<script>
document.write("Mula-mula nilai score...<br>");
// pengisian nilai
var score = 100;
document.write("score = "+ score + "<br/>");
// pengisian dan menjumlahan dengan 5

score += 5;
// pengisian dan pengurangan dengan 2

score -= 2;
// pengisian dan perkalian dengan 2

score *= 2;
// pengisian dan pembagian dengan 4

score /= 4;
// pengisian dan pemangkatan dengan 2

score **= 2;
// pengisian dan modulo dengan 3;

score %= 3;
</script>
</body>
</html>
Hasilnya :
11.1.3 OPERATOR PERBANDINGAN PADA JAVASCRIPT

Operator relasi atau perbandingan adalah operator yang digunakan untuk
membandingkan dua nilai. Operator perbandingan akan menghasilkan sebuah nilai boolean
true dan false. Operator perbandingan terdiri dari:

Lebih Besar >
Lebih Kecil <
Sama Dengan == atau ===
Tidak Sama Dengan != atau !==
Lebih Besar Sama Dengan >=
Lebih Kecil Sama Dengan <=
Berikut adalah hasilnya:
<!DOCTYPE html>
<html>
<head>
<title>Operator Perbandingan</title>
</head>
<body>
<script>
var nilai1 = 20;
var nilai2 = 19;
// sama dengan
var hasil = nilai1 == nilai2;
document.write(`${nilai1} == ${nilai2} = ${hasil}<br/>`);
// lebih besar
var hasil = nilai1 > nilai2;
document.write(`${nilai1} > ${nilai2} = ${hasil}<br/>`);
// lebih besar samadengan

var hasil = nilai1 >= nilai2;
document.write(`${nilai1} >= ${nilai2} = ${hasil}<br/>`);
// lebih kecil
var hasil = nilai1 < nilai2;
document.write(`${nilai1} < ${nilai2} = ${hasil}<br/>`);
// lebih kecil samadengan

var hasil = nilai1 <= nilai2;
document.write(`${nilai1} <= ${nilai2} = ${hasil}<br/>`);
// tidak samadengan
var hasil = nilai1 != nilai2;
document.write(`${nilai1} != ${nilai2} = ${hasil}<br/>`);
</script>
</body>
</html>
Hasilnya :
Apa perbedaan == (dua simbol sama dengan) dengan === (tiga simbol sama dengan)?,
Perbandingan dengan menggunakan simbol == hanya akan membandingkan nilai saja.
Sedangkan yang menggunakan === akan membandingkan dengan tipe data juga. Berikut
adalah contohnya:
// ini akan bernilai true

var a = "4" == 4; //-> true
// sedangkan ini akan bernilai false

var b = "4" === 4; //-> false
Mengapa nilai b bernilai false?, Karena "4" (string) dan 4 (integer). Tipe datanya berbeda.
11.1.4 OPERATOR LOGIKA PADA JAVASCRIPT

Operator logika digunakan untuk melakukan operasi terhadap dua nilai boolean.
Operator ini terdiri dari:

Logika AND &&
Logika OR ||
Negasi/Kebalikan !
Berikut adalah contohnya:
!DOCTYPE html>
<html lang="en">
<head>
<title>Operator Logika</title>
</head>
<body>
<script>
var nilai1 = 20;
var nilai2 = 19;
var benar = nilai1 > nilai2;

var salah = nilai1 < nilai2;
// operator && (and)

var hasil = benar && salah;
document.write(`${benar} && ${salah} = ${hasil}<br/>`);
// operator || (or)
var hasil = benar || salah;
document.write(`${benar} || ${salah} = ${hasil}<br/>`);
// operator ! (not)
var hasil = !benar
document.write(`!${benar} = ${hasil}<br/>`);
</script>
</body>
</html>
Hasilnya :
11.1.5 OPERATOR TERNARY PADA JAVASCRIPT

Operator ternary merupakan operator yang teridiri dari tiga bagian. Operator-
operator sebelumnya hanya dua bagian saja, yaitu: bagian kiri dan kanan. Ini disebut operator
binary. Sementara operator trinary ada bagian kiri, tengah, dan kanan.
bagian kiri <operator> bagian tengah <operator> bagian kanan
Opertor ternary pada Javascript, biasanya digunakan untuk membuat sebuah

percabangan if/else. Simbol operator ternary terdiri dari tanda tanya dan titik dua (?:).
Bentuknya seperti ini:
<kodisi> ? "benar" : "salah"
<kondisi> dapat kita isi dengan ekspresi yang menghasilkan nilai true dan false.
Apabila kondisi bernilai true, maka "benar" yang akan dipilih dan sebaliknya—apabila false—
maka "salah" yang akan dipilih. Opertor ini unik, seperti membuat pertanyaan. Berikut adalah
contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Operator Ternary</title>
</head>
<body>
<script>
var pertanyaan = confirm("Apakah kamu mahasiswa STT Wastukancana?")
var hasil = pertanyaan ? "Selamat datang" : "Kamu tidak dapat mengakses website ini";
document.write(hasil);
</script>
</body>
</html>
Hasilnya :
PERTEMUAN 12
PERCABANGAN PADA JAVASCRIPT
12.1 PERCABANGAN IF
Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat
kondisi bernilai benar. Berikut adalah contohnya:
Flowchart tersebut dapat kita baca seperti berikut, “Jika total belanja lebih besar dari
Rp 100.000, Maka tampilkan pesan Selamat, Anda dapat hadiah”, jika total belanja dibawah
Rp 100.000 maka pesannya tidak ditampilkan. Berikut adalah contoh programnya:
<!DOCTYPE html>
<html>
<head>
<title>Percabangan if</title>
</head>
<body>
<script>
var totalBelanja = prompt("Total belanja?", 0);
if(totalBelanja > 100000){

document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
document.write("<p>Terimakasih sudah berbelanja di toko kami</p>");
</script>
</body>
</html>
Hasilnya :
Perhatikan skrip berikut ini:
if(totalBelanja > 100000){

}
Ini yang disebut blok, blok program pada Javascript diawali dengan tanda buka kurung
kurawal { dan diakhiri dengan tutup kurung kurawal }. Apabila di dalam blok hanya terdapat
satu baris ekspresi atau statement, maka boleh tidak ditulis tanda kurungnya. Berikut
contohnya:
if(totalBelanja > 100000)

12.2 PERCABANGAN IF/ELSE

Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan. Pilihan
pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else). Berikut adalah
contohnya:
Ini adalah flowchart untuk mengecek password. Apabila password benar, pesan yang
ada pada blok hijau akan ditampilkan: “Selamat datang bos!". Tapi jika salah, maka pesan
yang ada di blok merah yang akan ditampilkan: “Password salah, coba lagi!" Kemudian, pesan
yang berada di blok abu-abu akan tetap ditampilkan, karena dia bukan bagian dari blok
percabangan if/else. Berikut adalah contoh programnya:
<!DOCTYPE html>
<html>
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var password = prompt("Password:");
if(password == "123"){
document.write("<h2>Selamat datang bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");

</script>
</body>
</html>
Hasilnya :
12.3 PERCABANGAN IF/ELSE/IF

Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok
pilihan. Berikut adalah contohnya:
Perhatikan blok yang diberi warna, Ini adalah blok untuk percabangan if/else/if. Kita
bisa menambahkan berapapun blok yang kita inginkan. Berikut adalah contoh programnya:
<!DOCTYPE html>
<html>
<head>
<title>Percabangan if/else/if</title>
</head>
<body>
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if(nilai >= 90) grade = "A"

else if(nilai >= 80) grade = "B+"
else if(nilai >= 70) grade = "B"
else if(nilai >= 60) grade = "C+"
else if(nilai >= 50) grade = "C"
else if(nilai >= 40) grade = "D"
else if(nilai >= 30) grade = "E"
else grade = "F";
document.write(`<p>Grade anda: ${grade}</p>`);

</script>
</body>
</html>
Hasilnya:
Pada program di atas, kita tidak menggunaka kurung kurawal untuk membuat blok
kode untuk if/else/if. karena hanya terdapat satu baris perintah saja. Yaitu: grade =. Bila kita
menggunakan kurung kurawal, maka program di atas akan menjadi seperti ini:
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if (nilai >= 90){

grade = "A"
} else if(nilai >= 80) {
grade = "B+"
grade = "B"
grade = "C+"
grade = "C"
grade = "D"
grade = "E"
} else {
grade = "F";
}
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
12.4 PERCABANGAN SWITCH/CASE

Percabangan switch/case adalah bentuk lain dari percabangan if/else/if. Berikut
adalah strukturnya:
switch(variabel){
case <value>:
// blok kode
break;
case <value>:
// blok kode
break;
default:
// blok kode
}
Kita dapat mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.
Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan dengan variabel. Setiap
case harus diakhiri dengan break. Khusus untuk default, tidak perlu diakhiri dengan break
karena dia terletak di bagian akhir. Pemberian break bertujuan agar program berhenti
mengecek case berikutnya saat sebuah case terpenuhi. Berikut adalah contoh programnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan switch/case</title>
</head>
<body>
<script>
var jawab = prompt("Kamu beruntung! Silahkn pilih hadiahmu dengan memasukan angka
1 sampai 5");
var hadiah = "";
switch(jawab){
case "1":
hadiah = "Televisi";
break;
case "2":
hadiah = "Handphone";
break;
case "3":
hadiah = "Kulkas";
break;
case "4":
hadiah = "Motor";
break;
case "5":
hadiah = "Uang Rp 1000.000";
break;
default:
document.write("<p>Opps! anda salah pilih</p>");
}
if(hadiah === ""){

document.write("<p>Kamu gagal mendapat hadiah</p>");
} else {
document.write("<h2>Selamat kamu mendapatkan " + hadiah + "</h2>");
}
</script>
</body>
</html>
Hasilnya :
12.5 PERCABANGAN DENGAN OPERATOR TERNARY

Percabangan menggunakan operator ternary merupakan bentuk lain dari percabangan
if/else. Bisa dibilang bentuk singkatnya dari if/else. Berikut adalah contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var jwb = prompt("Apakah Jakarta ibu kota indonesia?");
var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
document.write(`Jawaban anda: <b>${jawaban}</b>`);

</script>
</body>
</html>
Hasilnya :
Fungsi dari method toUpperCase() untuk mengubah teks yang diinputkan menjadi
huruf kapital semua. Opertor ternary berperan sebagai percabangan if/else:
var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
Apabila kondisi yang ada di dalam kurung—(jwb.toUpperCase() == "IYA")—bernilai

true, maka nanti isi dari variabel jawaban akan sama dengan "Benar". Tapi jika bernilai false,
maka variabel jawaban akan berisi "Salah".
12.6 PERCABANGAN BERSARANG (NESTED)

Kita juga dapat membuat blok percabangan di dalam percabangan. Ini disebut
percabangan bersarang atau nested if. Berikut contoh programnya:
<!DOCTYPE html>
<html>
<head>
<title>Percabangan Bersarang</title>
</head>
<body>
<script>
var username = prompt("Username:");
var password = prompt("Password:");
if(username == "nugroho"){
if(password == "123"){
document.write("<h2>Selamat datang!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
} else {
document.write("<p>Anda tidak terdaftar!</p>");
}
</script>
</body>
</html>
PERTEMUAN 13
PERULANGAN PADA JAVASCRIPT
13.1 PENGERTIAN PERULANGAN

Apa yang akan kita lakukan saat ingin mencetak kalimat berulang-ulang?
Misalnya“ingin menampilkan kalimat "Pelatihan Javascript!" di website kita sebanyak 10 kali”
Mungkin kita bisa menuliskannya dengan fungsi document.write() sebanyak 10 kali seperti ini:
document.write("<p>Pelatihan Javascript!</p>");
Apakah boleh seperti ini?, boleh-boleh saja. Tetapi Bagaimana kalau nanti kita mau
menampilkan sebanyak 1000 kali?. Karena itu, kita harus menggunakan perulangan.
Perulangan akan membantu kita mengeksekusi kode yang berulang-ulang, berapapun yang
kita mau. Ada lima macam bentuk perulangan di Javascript. Secara umum, perulangan ini
dibagi dua, yaitu counted loop dan uncounted loop.
 Counted Loop merupakan perulangan yang jelas dan sudah tentu banyak
perulangannya.
 Sedangkan Uncounted Loop, merupakan perulangan yang tidak jelas berapa kali ia
harus mengulang.
Perulangan yang termasuk dalam Counted Loop:
 Perulangan For
 Perulangan Foreach
 Perulangan Repeat
Perulangan yang termasuk dalam Uncounted Loop:
 Perulangan While
 Perulangan Do/While
13.1.1 PERULANGAN FOR

Perulangan for merupakan perulangan yang termasuk dalam counted loop, karena
sudah jelas berapa kali ia akan mengulang. Berikut adalah contoh flowchart perulangan for:
Bentuknya kodenya seperti ini:
for(let i = 0; i < 10; i++){

document.write("<p>Perulangan ke-" + i + "</p>")
}
Yang perlu diperhatikan adalah kondisi yang ada di dalam kurung setelah kata for.
Kondisi ini akan menentukan:
 Hitungan akan dimulai dari 0 (i = 0);
 Hitungannya sampai berapa? Sampai i < 10;
 Lalu di setiap perulangan i akan bertambah +1 (i++).
Variabel i pada perulangan for berfungsi untuk menyimpan nilai hitungan. Jadi setiap
perulangan dilakukan nilai i akan selalu bertambah satu. Karena kita menentukannya di
bagian i++. Berikut hasil outputnya :
Apakah nama variabelnya harus selalu i? Tidak. Kita juga bisa menggunakan nama lain.
Berikut adalah contoh perulangan for yang lainnya.
<!DOCTYPE html>
<html>
<head>
<title>Perulangan For</title>
</head>
<body>
<script>
for(counter = 0; counter < 20; counter+=2){
document.write("<p>Perulangan ke-"+counter+"</p>");
}
</script>
</body>
</html>
Pada contoh tersebut, kita melakukan perulangan dimulai dari nol 0. Lalu di setiap
perulangan nilai variabel counter akan ditambah 2 (counter+=2). Berikut adalah hasilnya
13.1.2 PERULANGAN WHILE
Perulangan while merupakan perulangan yang termasuk dalam perulangan uncounted
loop. Perulangan while juga dapat menjadi perulangan yang counted loop dengan
memberikan counter di dalamnya. Berikut adalah contohnya:
var ulangi = confirm("Apakah anda mau mengulang?");

var counter = 0;
while(ulangi){
var jawab = confirm("Apakah anda mau mengulang?")
counter++;
if(jawab == false){
ulangi = false;
}
}
document.write("Perulangan sudah dilakuakn sebanyak "+ counter +" kali");
Dapat disederhanakan menjadi:
var ulangi = confirm("Apakah anda mau mengulang?");

var counter = 0;
while(ulangi){
var jawab = confirm("Apakah anda mau mengulang?")
counter++;
if(jawab == false){
ulangi = false;
}
}
Hasilnya :
Perhatikan blok kode while ini:
while(ulangi){
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
}
Perulangan akan terjadi selama variabel ulangi brenilai true. Lalu kita menggunakan
fungsi confirm() untuk menampilkan dialog konfirmasi. Selama kita memilih Ok pada dialog
konfirmasi, maka variabel ulangi akan terus bernilai true. Tetapi jika kita pilih Cancel, maka
variabel ulangi akan bernilai false. Saat variabel ulangi bernilai false, maka perulangan akan
dihentikan.
13.1.3 PERULANGAN DO/WHILE

Perulangan do/while sama seperti perulangan while. Perbedaanya Perulangan
do/while akan melakukan perulangan sebanyak 1 kali terlebih dahulu, lalu mengecek kondisi
yang ada di dalam kurung while. Berikut bentuk kodenya:
do {
// blok kode yang akan diulang
} while (<kondisi>);
Perbedaan do/while dan while yaitu Perulangan do/while akan mengecek kondisi di
belakang (sesudah mengulang), sedangkan while akan mencek kondisi di depan atau awal
(sebelum mengulang). Berikut contoh program do/while:
var ulangi = confirm("Apakah anda mau mengulang?");;

var counter = 0;
do {
counter++;
ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)
Contoh tersebut sama seperti contoh pada perulangan while. Saat perulangan
pertama, cobalah untuk membatalkan perulangannya dengan memilih Cancel Maka hasilnya:
13.1.4 PERULANGAN FOREACH

Perulangan foreach biasanya digunakan untuk mencetak item di dalam array.
Perulangan ini termasuk dalam perulangan counted loop, karena jumlah perulangannya akan
dituentukan oleh panjang dari array. Ada dua cara menggunakan perulangan foreach di
Javascript:
 Menggunakan for dengan operator in;
 Mengguunakan method forEach().
Berikut ini bentuk perulangan “foreach” tanpa menggunakan operator in:
var languages = ["Javascript", "HTML", "CSS", "Typescript"];
for(i = 0; i < languages.length; i++){

document.write(i+". "+ languages[i] + "<br/>");
}
Perulangan ini dapat dibuat lebih sederhana lagi dengan menggunakan operator in seperti ini:
var languages = ["Javascript", "HTML", "CSS", "Typescript"];
for(i in languages){
document.write(i+". "+ languages[i] + "<br/>");
}
Hasilnya :
Cara kedua membuat perulangan foreach adalah dengan menggunakan method

forEach() dari array. Berikut contohnya:
// kita punya array seperti berikut

var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari

// dengan menggunakan method foreach
days.forEach(function(day){
document.write("<p>" + day + "</p>");
});
Method forEach() memiliki parameter berupa fungsi callback. Sebenarnya kita juga
bisa menggunakan arrow function seperti ini:
// kita punya array seperti berikut

var days = ["Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu", "Minggu"];
// Kemudian kita tampilkan semua hari

// dengan menggunakan method foreach
days.forEach((day) => {
document.write("<p>" + day + "</p>");
});
Hasilnya:
PERTEMUAN 14-15
PENGENALAN PHP
14.1 MENGENAL PHP

1. Merupakan singkatan recursive dari PHP : Hypertext Prepocessor
2. Pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1994.
3. Harus ditulis di antara tag :
 <? dan ?>
 <?php dan ?>
 <script language=”php”> dan </script>
 <% dan %>
4. Setiap satu statement (perintah) biasanya diakhiri dengan titik-koma (;)
5. CASE SENSITIVE untuk nama identifier yang dibuat oleh user (berupa variable,
konstanta, fungsi dan lain-lain), namun TIDAK CASE SENSITIVE untuk identifier built-in
dari PHP. Jadi :
 $nama ≠ $Nama ≠ $NAMA
 hitungLuas() ≠ HitungLuas()
 echo = ECHO
 while = WHILE
6. Mudah dipelajari.
14.2 VARIABEL
 Digunakan untuk menyimpan sebuah value, data atau informasi
 Nama variabel diawali dengan tanda $
 Panjang tidak terbatas
 Setelah tanda $ diawali oleh huruf atau under-scrore (_). Karakter berikutnya bisa
terdiri dari huruf, angka, dan karakter tertentu yang diperbolehkan (karakter ASCII dari
127 – 255).
 Bersifat case-sensitive.
 Tidak perlu dideklarasikan.
 Tidak boleh mengandung spasi. Berikut contohnya:
Benar Salah
- $_name - $3name
- $first_name - $name?
- $name3 - $first+name
- $name_3 - $first.name
Berikut adalah contoh program untuk mengisi dan menampilkan variabel di layar:
Hasilnya :
14.3 TIPE DATA

Pada PHP, tipe data variabel tidak didefinisikan oleh programmer, akan tetapi secara
otomatis ditentukan oleh intepreter PHP. Namun demikian, PHP mendukung 8 (delapan) buah
tipe data primitif, yaitu :
1. boolean
2. integer
3. float
4. string
5. array
6. object
7. resource
8. NULL
Berikut adalah contoh program untuk penanganan beberapa tipe data dasar dalam PHP.
<?php
$nim = "081351047" ;
$nama = 'Sadio Mane' ;
$umur = 27 ;
$nilai = 82.25 ;
$status = true ;
echo "Nim : " . $nim . "<br>" ;

echo "Nama : $nama<br>" ;
print "Umur : " . $umur ; print "<br>" ;
printf ("Nilai : %.3f<br>", $nilai) ;
if ($status)
echo "Status : Aktif" ;
else
echo "status : Tidak Aktif" ;
?>
Hasilnya :
15.1 KONSTANTA
Konstanta merupakan variabel konstan yang nilainya tidak berubah-ubah. Untuk
mendefinisikan konstanta dalam PHP, menggunakan fungsi define(). Berikut contoh program
penggunaan konstanta dalam PHP.
<?php
define ("nama", "Steven Gerrard") ;
define ("kota", "Liverpool") ;
echo "Nama : " . nama . "<br>" ;

echo "Kota : " . kota ;
?>
Hasilnya :
15.2 OPERATOR DALAM PHP
Berikut contoh program beberapa operator aritmatika pada PHP:
<?php
$gaji = 1000000 ;
$pajak = 0.1 ;
$thp = $gaji - ($gaji*$pajak) ;
echo "Gaji sebelum pajak = Rp. $gaji <br>" ;
echo "Gaji yang dibawa pulang = Rp. $thp" ;
?>
Hasilnya :
15.3 KOMENTAR PROGRAM

Dalam PHP, komentar program bisa menggunakan :
 /* dan */
 // dan
 #
Berikut contoh program cara memberikan komentar dalam program PHP:
Hasilnya :

Materi Pemrograman Web1

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Pemrograman Web1

Diunggah oleh

Hak Cipta:

Format Tersedia

PERTEMUAN 2

2.1 FORMAT PENULISAN HTML

2.2 MEMULAI MEMBUAT DOKUMEN DENGAN FORMAT HTML

2.3 TAG DASAR DALAM HTML

b) Menggunakan Line Break

e) Membuat Garis Horizontal

b) List Berurut (Ordered Lists)

3. Penggunaan Line Break Dalam HTML

4. Penggunaan Pre Dalam HTML

5. Memformat Tulisan Dalam HTML

6. Menambahkan Garis Horizontal Pada HTML

<hr size="20" width="300" noshade>

<h4>Ordered list dengan type circle</h4>

<h4>Ordered list dengan type square</h4>

8. Penggunaan Ordered List Pada HTML

<h4>Ordered list dengan type a</h4>

<h4>Ordered list dengan type I</h4>

<h4>Ordered list dengan type atribut start</h4>

<A href =url_tujuan> nama_link </A>

3.1.2 MEMBUAT LINK KE DALAM DOKUMEN

<a name=”nama_section”> </a>

<a href=”sebuah_halaman.html#nama_section”>langsung ke nama section</a>

<IMG src=”url_file” width=”img_width” height=”img_height” vspace=”10” hspace=”10”

3.2.1 MEMBUAT OBJEK GAMBAR MENJADI SEBUAH HYPERLINK

<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'>

 Tag <img> adalah tag HTML untuk mendefinisikan sebuah gambar.

1. Membuat Link Antar Dokumen

2. Membuat Link ke Dalam Dokumen

3. Menyisipkan Gambar Pada HTML

4. Membuat Gambar Menjadi Hyperlink

4.1 MENU FORM

<form action=”_url_” method=”get|post” enctype=””>

<form name=”nama_form” method=”post/get” action=”url”> … isi form … </form>

4.2 JENIS-JENIS MEDIA INPUT DALAM FORM

Berikut contoh penggunaan elemen textarea :

Yang akan menghasilkan elemen masukan seperti berikut:

4.2.2 KONTROL BERUPA RADIO BUTTON

<input type="radio" name="jenis kelamin" value="pria"> Pria <br>

4.2.3 KONTROL BERUPA CHECKBOX

<input type="checkbox" name="day" value="senin"> Senin <br>

4.2.4 DROPDOWN LIST

<select name="country" multiple>

Berikut contoh penggunaan elemen dropdown dengan pilihan banyak :

<input type="submit" name="submit" value="Masukkan Form">

<input type="reset" name="reset" value="Kosongkan Form">

4.2.6 ORGANISASI ELEMEN FORM

4.2.7 VALIDASI MASUKAN PADA FORM

<input type="text" name="username" requied>

1. Penggunaan Input Text Dalam Sebuah Form

2. Penggunaan Input Text Berupa Password

3. Penggunaan Input Text Berupa Radio Button

4. Penggunaan Checkbox Dalam HTML

5. Penggunaan Submit, Reset, dan Image Sebagai Button

7. Penggunaan Select Dropdown Dalam Form

5.1.2 MELAKUKAN FORMAT BARIS DAN KOLOM

5.1.3 PEMBAHASAN TABEL LEBIH LANJUT

Berikut adalah atribut yang digunakan dalam frame:

1. Penggunaan Tabel Dalam HTML

2. Penggunaan Formating Baris dan Kolom Dalam Skrip HTML

3. Penyisipan Gambar dan Text Dalam Tabel

4. Contoh Penggunaan Menu Menggunakan Frame HTML

c. Sub Menu Teknik Informatika

<table width="100%" border="1" cellpadding="1" cellspacing="1">