handout pemrograman berbasis web - alihtinarsaputra's blog · handout pemrograman berbasis w...

HANDOUT PEMROGRAMAN BERBASIS WEB

SINTAX DASAR HTML Berikut ini adalah sintax dasar dari bahasa HTML :

<html>

<head> <title>Selamat datang di website kami</title> </head>

<body>

Halo…. ini adalah website kami …

</body>

</html>

Hasil dari coding di atas adalah sebagai berikut :

Jika kita perhatikan gambar di atas, pada bagian yang berwarna biru adalah hasil dari coding

<title>Selamat datang di website kami</title>

Kemudian tulisan yang muncul di layar browser adalah hasil dari coding

<body>

Halo…. ini adalah website kami …

</body>

Sintax dasar HTML memuat elemen-elemen yang dibuka dengan tag buka, dan ditutup dengan tag tutup. Tag buka dituliskan dengan format <nama tag>, sedangkan tag tutup ditulis dengan format </nama tag>. Elemen-elemen utama yang ada pada bahasa HTML adalah <head> dan <body>. Pada elemen <head> diisi dengan konfigurasi yang berhubungan dengan browser, misalnya elemen <title> atau elemen <meta>. Sedangkan elemen <body> memuat semua elemen yang akan ditampilkan pada browser, misalnya elemen <font>, <img>, <table>, <form>, dan sebagainya. Untuk penggunaan elemen-elemen ini akan dijelaskan lebih jauh pada bagian berikutnya. File HTML disimpan dengan extenssion .htm atau .html (contoh : index.htm atau index.html).

FFOORRMMAATT DDOOKKUUMMEENN

Pada bagian ini kita akan mengenal lebih jauh bagaimana coding tentang format dokumen pada HTML, ASP, dan PHP. Format dokumen yang akan dibahas di sini adalah :

� Format teks (paragraf, heading, font size, font color, dan sebagainya).

� List atau daftar terstruktur.

� Link.

� Gambar atau image.

FORMAT TEKS

Paragraf Perhatikan gambar berikut ini :

Pada gambar di atas terdapat dua bagian yang berbeda, di mana pada bagian dari ketiga ayat yang pertama terdapat jarak atau spasi satu sama lain, sedangkan pada bagian berikutnya tidak terdapat jarak antar ketiga ayat. Bagaimana sintaxnya ? Dalam bahasa HTML, codingnya adalah sebagai berikut :

<html>

<head>


</head>

<body>

<p>

Ayat-ayat Alkitab

</p>

<p>

Amsal 17 : 17

</p>

<p>

Filipi 4 : 13

</p>

<p>

Amsal 30 : 7 - 9

</p>

<p>

Amsal 17 : 17<br>

Filipi 4 : 13<br>

Amsal 30 : 7 - 9

</p>

</body>

</html>

Jika kita perhatikan, bagian yang terdapat jarak merupakan hasil dari tag paragraf <p> dan </p> di mana setiap pasangan tag tersebut akan menghasilkan satu paragraf baru. Sedangkan pada bagian yang tidak berjarak merupakan hasil dari tag <br> di mana tag tersebut membuat kata atau karakter berikutnya berada pada baris selanjutnya (pindah baris di bawahnya).

Preformatted Text Bagaimana jika kita ingin menampilkan hasil apa adanya sesuai dengan apa yang kita tulis, tanpa berubah karena pengaruh format dari browser ? Kita dapat menggunakan elemen HTML yang lain yaitu Preformatted Text. Perhatikan gambar berikut ini :

Codingnya dalam bahasa HTML adalah sebagai berikut :

<html>

<head>


</head>

<body>

<pre>

Ayat-ayat Alkitab

Amsal 17 : 17

Filipi 4 : 13

Amsal 30 : 7 - 9

</pre>

</body>

</html>

Blockquote Elemen <blockquote> digunakan untuk menampilkan kutipan teks yang diambil dari teks lain. Perhatikan gambar berikut ini :

Elemen blockquote secara otomatis akan membuat jarak dari tepi browser untuk menampilkan hasil kutipan. Dalam HTML ditulis sebagai berikut :

<html>

<head>


</head>

<body>

Ayat favorit :

<blockquote>

"Dua hal aku mohon kepada-Mu, jangan itu Kautolak sebelum aku mati, yakni :<br>

Jauhkanlah dari padaku kecurangan dan kebohongan.<br>

Jangan berikan kepadaku kemiskinan atau kekayaan.<br>

Biarkanlah aku menikmati makanan yang menjadi bagianku.<br>

Supaya, kalau aku kenyang,<br>

aku tidak menyangkal-Mu dan berkata : Siapa Tuhan itu ?<br>

Atau, kalau aku miskin,<br>

aku mencuri, dan mencemarkan nama Allahku"

</blockquote>

Sumber : Amsal 30 : 7 - 9

</body>

</html>

Perataan Paragraf Lalu, bagaimana jika kita ingin mengatur perataan dari paragraf yang kita buat ? Perhatikan gambar berikut ini :

Untuk mendapatkan hasil seperti yang ditampilkan browser di atas, perhatikan coding HTML berikut ini :

<html>

<head>


</head>

<body>

<p align=left>

Amsal 17 : 17

</p>

<p align=center>

Filipi 4 : 13

</p>

<p align=right>

Amsal 30 : 7 - 9

</p>

</body>

</html>

Jika kita perhatikan dari coding di atas, perataan paragraf diatur dengan attribut align seperti yang tampak dari kode <p align=left> di atas. Jika kita menginginkan paragraf rata ke kiri, maka kita gunakan align=left. Sedangkan jika kita ingin mengatur kerataan tengah dan kanan, maka kita gunakan align=center dan align=right.

Atribut Font Kita dapat menambahkan beberapa atribut pada huruf yang kita buat, seperti merubah ukuran huruf, membuatnya menjadi tebal, miring, bergaris bawah, maupun berwarna. Perhatikan gambar berikut ini :

Sintaxnya dalam HTML adalah :

<html>

<head>


</head>

<body>

<p>

<font size=10>

Huruf berukuran sepuluh

</font>

</p>

<p>

<font color=#FF0000>

<b>

Huruf berwarna merah dan tebal

</b>

</font>

</p>

<p>

<i>

Huruf ditulis miring

</i>

</p>

<p>

<u>

Huruf bergaris bawah

</u>

</p>

</body>

</html>

Mari kita perhatikan, jika kita ingin merubah ukuran huruf yang kita gunakan, maka kita menggunakan sintax <font size=10>. Ukuran default huruf adalah 3. Jika kita ingin lebih besar hurufnya, maka kita bisa menggunakan ukuran 4, 5, dan seterusnya. Sedangkan untuk membuat huruf lebih kecil, kita gunakan ukuran lebih kecil dari 3, yaitu 2 atau 1. Kemudian untuk membuat huruf menjadi berwarna, kita gunakan sintax <font color=#FF0000> dan ditutup dengan tag </font>. Warna merah kita tulis dengan kode RGBnya, yaitu #FF0000. Untuk kode RGB, kita bisa melihatnya di halaman belakang buku ini. Untuk membuat tulisan menjadi tebal, kita gunakan tag <b> dan ditutup dengan tag </b>. Untuk huruf dicetak miring, digunakan tag <i> dan ditutup dengan </i>, sedangkan huruf bergaris bawah dibuka dengan tag <u> dan ditutup dengan tag </u>. Untuk coding dalam ASP dan PHP menggunakan aturan yang sama dengan coding-coding sebelumnya.

LIST Ada 2 macam list atau urutan yang sering digunakan, yaitu Ordered List (numbering) dan Unordered List (bullets). Perhatikan gambar berikut ini :

Sintax penulisan codingnya sebagai berikut :

<html>

<head>


</head>

<body>

<p>

Contoh Ordered List :

</p>

<p>

<ol type=A>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ol>

</p>

<p>

<ol type=a>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ol>

</p>

<p>

<ol type=1>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ol>

</p>

<p>

<ol type=I>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ol>

</p>

<p>

<ol type=i>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ol>

</p>

<p>

<ol type=1 start=15>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ol>

</p>

</body>

</html>

Ordered List ditulis dengan menggunakan tag <ol> dan ditutup dengan tag </ol>. Dalam tag ini kita dapat mendefinisikan tipe daftar yang kita inginkan, misalnya 1 2 3, A B C, dan sebagainya dengan menuliskan atribut type=1 atau type=A dalam tag <ol>. Selanjutnya untuk point-pointnya digunakan tag <li> dan ditutup dengan tag </li>. Sedangkan untuk Unordered List dapat kita lihat contohnya di bawah ini :

Sintaxnya dalam HTML adalah sebagai berikut :

<html>

<head>


</head>

<body>

<p>

Contoh Unordered List :

</p>

<p>

<ul type=disc>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ul>

</p>

<p>

<ul type=circle>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ul>

</p>

<p>

<ul type=square>

<li>Point 1</li>

<li>Point 2</li>

<li>Point 3</li>

</ul>

</p>

</body>

</html>

Untuk Unordered List, kita membukanya dengan tag <ul> dan menutupnya dengan tag </ul>. Atribut type yang disediakan adalah square (kotak), circle (bulat putih), dan disc (bulat hitam). Sedangkan point-pointnya dimasukkan ke dalam tag <li></li>.

LINK Link adalah object yang dikenal dalam web-based application, di mana jika object tersebut di-klik dengan mouse (pointer), maka kita akan dibawa ke bagian yang dituju oleh link tersebut. Link dapat berupa teks atau image (gambar). Berikut ini sintax dasar dalam HTML untuk link yang berupa teks dan image :

<html>

<head>

<title>Title Anda</title>

</head>

<body>

<p>

<a href=”halaman_tujuan.html”>Ini link berbentuk teks</a>

</p>

<p>

<a href=”halaman_tujuan.php”><img src=”image_pilihan.jpg” alt=”Ini link dengan image”></a>

</p>

<p>

<a href=mailto:[email protected]>Link ke sebuah alamat email</a>

</p>

</body>

</html>

Sebuah link berupa teks akan tampil dengan warna biru dan bergaris bawah, sedangkan untuk link berupa image maka pada image akan terdapat border (garis tepi) berwarna biru. Jika pointer mouse melewati sebuah object link, maka pointer akan berubah menjadi gambar jari telunjuk. Link ditulis dengan tag <a href=””> dan ditutup dengan tag </a>. Atribut yang dapat kita tambahkan dalam tag <a> adalah halaman web tujuan, misalnya <a href=”halaman_tujuan.html”> atau sebuah alamat email. Jika tujuannya adalah sebuah alamat email, maka saat pointer di-klik, maka akan membuka aplikasi email dengan alamat tujuan seperti yang tercantum dalam tujuan link. Contohnya <a href=mailto:[email protected]>. Kita juga dapat membuat link yang mengarah ke bagian tertentu dalam halaman web yang sama. Untuk itu kita menggunakan atribut name dalam tag <a>. Perhatikan coding berikut ini :

<html>

<head>

<title>Title Anda</title>

</head>

<body>

<p>

<a name=”bagian_tujuan”>Ini bagian yang akan dituju oleh link</a>

</p>

<p>

<a href=”#bagian_tujuan”>Ini link yang akan menuju ke bagian tujuan</a>

</p>

</body>

</html>

Bagian yang akan kita jadikan tujuan, kita tuliskan dalam tag <a name=””>. Kemudian linknya kita tulis dengan <a href=”#bagian_yang_dituju”>. Perhatikan penggunaan tanda kres (#) di atas.

Penggunaan link dalam coding ASP dan PHP dapat dilakukan seperti contoh-contoh yang telah kita pelajari sebelumnya, yaitu dengan menambahkan sintax response.write “” pada ASP atau sintax echo “”; pada PHP.

GAMBAR ATAU IMAGE Untuk menampilkan gambar, kita dapat menggunakan sintax standar yang disediakan HTML sebagai berikut :

<img src=”gambar.jpg”>

Jika gambar yang ingin kita tampilkan berada di direktori parent (direktori yang tingkatnya lebih tinggi dari direktori di mana file coding kita berada), maka sintaxnya menjadi :

<img src=”../gambar.jpg”>

Sedangkan jika gambar tersebut berada di direktori child (direktori yang tingkatannya berada di bawah direktori tempat coding kita berada) misalnya di direktori image, maka sintaxnya menjadi :

<img src=”/image/gambar.jpg”>

KKOOMMEENNTTAARR

Dalam menulis program atau coding, seringkali kita perlu memberikan komentar untuk menandai action-action atau bagian program yang memerlukan perhatian kita. Komentar ini sekedar menjadi catatan saja, dan tidak perlu ikut diproses oleh komputer. Dalam HTML, kita dapat memberikan komentar dengan menuliskan sintax sebagai berikut :

<!- -

Komentar ditulis di sini

- ->

Jika kita ingin menulis komentar dalam script ASP, maka sintaxnya kita gunakan tanda petik tunggal (‘) seperti berikut ini :

‘ Komentar ditulis di sini

‘ Komentar ditulis di sini (per baris)

Sedangkan dalam PHP, ditulis seperti ini :

// Komentar ditulis di sini

// Komentar ditulis di sini (per baris)

atau bisa juga ditulis seperti ini :

/*

Komentar ditulis di sini

*/

FRAME Apakah Anda pernah melihat sebuah halaman web yang terbagi menjadi beberapa bagian yang saling terpisah ? Contohnya seperti gambar berikut ini :

Gambar di atas menunjukkan sebuah halaman web yang terbagi menjadi 3 frame berdasarkan baris (rows). Sintax HTMLnya adalah sebagai berikut :

<html>

<head>


</head>

<frameset rows="20%,30%,50%">

<frame src="x.html">

<frame src="y.html">

<frame src="z.html">

</frameset>

</html>

Mari kita perhatikan bersama. Untuk membuat frame kita menggunakan tag <frameset> dan ditutup dengan tag </frameset>. Untuk membuat frame berdasarkan baris, kita menggunakan atribut rows, kemudian diikuti dengan jumlah baris dan lebar masing-masing baris seperti contoh <frameset rows= ”20%,30%,50%”>. Kemudian untuk menampilkan halaman untuk masing-masing baris frame, digunakan tag <frame src=””>. Pada contoh di atas, baris frame pertama menampilkan isi dari file x.html, baris frame kedua menampilkan isi dari file y.html, dan baris frame ketiga menampilkan isi dari file z.html. Sedangkan untuk membuat frame berdasarkan kolom, kita dapat menggunakan atribut <frameset cols=””> seperti contoh berikut ini :

<html>

<head>


</head>

<frameset cols="20%,30%,50%">




</frameset>

</html>

Hasilnya seperti yang terlihat di gambar berikut ini :

Bagaimana kalau kita ingin menggabungkan antara baris dan kolom menjadi satu halaman web ? Perhatikan sintax berikut ini :

<html>

<head>


</head>



<frameset cols="20%,30%,50%">




</frameset>


</frameset>

</html>

Sintax di atas akan menghasilkan halaman web seperti berikut ini :

ATRIBUT MARGIN Kita dapat mengatur jarak isi dari frame terhadap garis tepi samping dan garis tepi atas/bawah dari frame. Perhatikan contoh sintax berikut ini :

<html>

<head>


</head>



<frame src="y.html” marginwidth=50 marginheight=50>


</frameset>

</html>

Sintax di atas akan menghasilkan halaman web seperti di bawah ini :

Kalau kita perhatikan, baris frame kedua memiliki jarak dengan garis tepi frame sebanyak 50 pixel. Ini adalah akibat dari penggunaan atribut margin seperti yang muncul pada sintax <frame src=”y.html” marginwidth=50 marginheight=50>. Atribut marginwidth mengatur tentang jarak dari sisi kiri dan kanan, sedangkan marginheight mengatur jarak dari tepi atas dan bawah. Kita dapat menggunakan marginwidth saja, marginheight saja, atau menggunakan keduanya secara bersamaan.

ATRIBUT FRAMEBORDER Bagaimana kalau kita tidak menginginkan adanya garis tepi yang mengganggu tampilan dari masing-masing frame ? Kita dapat menggunakan atribut frameborder untuk menjawabnya. Perhatikan sintax berikut ini :

<html>

<head>


</head>

<frameset rows="20%,30%,50%" frameborder=no>


<frame src="y.html”>


</frameset>

</html>

Sintax di atas akan menghasilkan halaman web seperti yang terlihat di bawah ini :

Jika kita perhatikan, sudah tidak muncul lagi garis yang membatasi antar frame yang mengganggu tampilan halaman web kita.

ATRIBUT SCROLLING Kemudian, bagaimana caranya jika kita ingin menghilangkan tombol scrolling yang ada di tepi kanan tiap-tiap frame ? Perhatikan gambar berikut ini :

Mari kita perhatikan bersama-sama. Fasilitas scrolling pada frame kedua sudah tidak muncul lagi. Akibatnya kita tidak dapat menggulung frame kedua ke bawah dan melihat isinya. Sintaxnya adalah sebagai berikut :

<html>

<head>


</head>



<frame src="y.html” scrolling=no>


</frameset>

</html>

ATRIBUT TARGET Jika sebuah frame memuat isi dari file yang berupa link, maka kita harus mendefinisikan ke bagian mana link tersebut akan dibuka. Perhatikan gambar berikut ini :

Pada gambar di atas, frame kedua memuat sebuah link. Pertanyaannya, jika link di-klik, di bagian mana halaman yang akan dibuka link itu ditampilkan ? Untuk itu kita dapat mendefinisikan bagian yang akan menampilkan tujuan sebuah link. Perhatikan sintax di bawah ini :

<html>

<head>


</head>



<frame src="y.html” name=”frame2”>


</frameset>

</html>

Pada bagian frame kedua, kita tambahkan atribut name, kemudian kita beri nama bagian tersebut, misalnya “frame2”. Selanjutnya, pada file y.html, kita tambahkan sintax sebagai berikut :

<html>

<head>


</head>

<body>

<font size=5>

<a href="tujuan.html" target="frame2">

Ini link ke frame2

</a>

</font>

</html>

Dalam sintax <a href> kita tambahkan atribut target, dan diisi dengan nama bagian yang sudah kita set di halaman frame sebelumnya. Akibatnya, jika kita klik link yang ada, maka halaman tujuan akan ditampilkan di bagian yang kita inginkan. Dalam menentukan target sebuah link pada frame, kita dapat menggunakan ekspresi yang disediakan oleh HTML. Jika kita isikan target dengan “_blank” maka link tersebut akan membuka halaman tujuan di halaman baru yang dibuka secara terpisah. Jika target diisi dengan “_top” maka link akan membuka halaman tujuan di halaman yang sama, tapi meniadakan seluruh struktur frame yang ada. Jika diisi dengan “_self” maka link akan membuka halaman tujuan di bagian yang sama dengan link yang memanggilnya. Sedangkan jika diisi dengan “_parent”, maka akan ditampilkan di halaman sebelumnya.

IFRAME Kita juga dapat membuat frame yang berada di tengah-tengah halaman web kita. Perhatikan gambar berikut ini :

Untuk membuat frame seperti gambar di atas, sintax yang digunakan adalah sebagai berikut :

<html>

<head>


</head>

<p>

<iframe align=left src="x.html">

</iframe>

</p>

</html>

Sintax dibuka dengan tag <iframe> dengan atribut align untuk posisinya (kita bisa pilih left, center, atau right), atribut src untuk memanggil halaman tujuan, dan ditutup dengan tag </iframe>.

TABEL Dalam menyajikan data di halaman web, kita sering melakukannya dalam bentuk tabel-tabel yang memuat data secara informatif dan statistikal. HTML membantu kita dalam membuat tabel sesuai yang kita butuhkan. Perhatikan gambar berikut ini :

Sintaxnya dalam HTML adalah sebagai berikut :

<html>

<head>


</head>

<body>

<table border=1 width=80%>

<tr>

<td></td>

<th>HTML</th>

<th>ASP</th>

<th>PHP</th>

</tr>

<tr>

<th>Kelas A</th>

<td align=left valign=top>Kosong <br>

(Masih tersedia 14 kursi)</td>

<td align=center valign=top>Penuh</td>

<td align=right valign=top>Penuh</td>

</tr>

<tr>

<th>Kelas B</th>

<td align=left valign=middle>Penuh</td>

<td align=center valign=middle>Kosong<br>


<td align=right valign=middle>Penuh</td>

</tr>

<tr>

<th>Kelas C</th>

<td align=left valign=bottom>Penuh</td>

<td align=center valign=bottom>Penuh</td>

<td align=right valign=bottom>Kosong<br>


</tr>

<caption valign=bottom>

Tabel 1. Contoh penggunaan tabel dengan perataan sel

</caption>

</table>

</body>

</html>

Mari kita pelajari bersama-sama. Pembuatan tabel dibuka dengan tag <table> dan ditutup dengan tag </table>. Lebar tabel dapat kita definisikan sendiri sesuai dengan kebutuhan kita dengan menambahkan sintax width pada tag <table>, contohnya <table width=80%>. Ini artinya lebar tabel yang akan ditampilkan adalah 80% dari lebar layar monitor. Kemudian untuk garis pembatas antar sel, kita gunakan sintax border, contohnya <table border=1 width=80%>. Jika kita menginginkan garis yang lebih besar, maka kita bisa gunakan angka 2, 3, atau yang lebih besar lagi. Untuk menampilkan data, kita gunakan tag <tr></tr> yang artinya table row. Kemudian di dalamnya kita gunakan tag <td></td> yang artinya table data. Di dalam tag <td> inilaha data ditempatkan dan diatur tampilannya. Untuk mengatur tampilan data, kita dapat menggunakan beberapa atribut, yaitu align (untuk mengatur posisi horizontalnya) dan valign (untuk mengatur posisi vertikalnya). Align dapat diisi dengan left, center, atau right, sedangkan valign bisa diisi dengan top, middle, atau bottom. Jika kita ingin menampilkan data dengan tulisan yang agak berbeda, kita dapat melihat contoh sintax berikut ini :

<table>

<tr>

<td>

<font face=arial size=10 color=#FF0000>

<b><I>

Ini contoh tulisan yang berbeda

</I></b>

</font>

</td>

</tr>

</table>

Semua atribut tentang font (huruf) kita tempatkan di dalam tag <td></td>. Demikian juga jika kita ingin menampilkan gambar (image) dalam tabel kita. Contohnya sebagai berikut :

<table>

<tr>

<td>

<img src=”gambar.jpg” alt=”Ini contoh gambar dalam tabel”>

</td>

</tr>

</table>

Selanjutnya untuk menampilkan header kolom dan header baris, kita gunakan tag <th></th> yang artinya table header. Anda dapat melihat contohnya seperti sintax di atas. Terakhir, untuk membuat judul tabel, kita gunakan tag <caption></caption> dengan atribut valign=top (untuk penempatan judul di atas tabel) atau valign=bottom (untuk penempatan judul di bawah tabel). Dalam ASP dan PHP, penulisan coding untuk tabel dapat dilakukan dengan sintax dasarnya, yaitu dengan menggunakan sintax response.write “ ” untuk ASP dan sintax echo “ ”; untuk PHP. Perlu diingat, jika bertemu dengan dua pasang tanda kutip (“) yang berbeda, kita harus menempatkannya pada level yang berbeda. Level pertama ditulis dengan tanda kutip ganda (“), dan level kedua ditulis dengan tanda kutip tunggal (‘). Jika tidak memungkinkan, kita harus memisahnya menjadi 2 baris perintah atau lebih (lihat kembali contoh pada bagian blockquote).

WARNA SEL DAN PENGGABUNGAN SEL Jika kita ingin menggabungkan beberapa baris dan kolom, memberikan warna pada tabel kita, dan mengatur penulisan tiap selnya, kita dapat melakukannya sesuai dengan kebutuhan kita. Perhatikan gambar berikut ini :

Sintax dari gambar di atas adalah sebagai berikut :

<html>

<head>


</head>

<body>


<tr>

<td></td>

<td></td>

<th colspan=3 bgcolor=#EE82EE>MATERI</th>

</tr>

<tr>

<td></td>

<td></td>

<th bgcolor=#FFFF00>HTML</th>

<th bgcolor=#008000>ASP</th>

<th bgcolor=#F0FFF0>PHP</th>

</tr>

<tr>

<th rowspan=3 bgcolor=#EE82EE>KELOMPOK</th>

<th bgcolor=#FFFF00>Kelas A</th>

<td align=left valign=top>Kosong <br>


<td align=center valign=top>Penuh</td>

<td align=right valign=top>Penuh</td>

</tr>

<tr>

<th bgcolor=#008000>Kelas B</th>

<td align=left valign=middle>Penuh</td>

<td align=center valign=middle>Kosong<br>


<td align=right valign=middle>Penuh</td>

</tr>

<tr>

<th bgcolor=#F0FFF0>Kelas C</th>

<td align=left valign=bottom>Penuh</td>

<td align=center valign=bottom>Penuh</td>

<td align=right valign=bottom>Kosong<br>


</tr>

<caption valign=bottom>

Tabel 1. Contoh penggunaan tabel dengan colspan dan rowspan

</caption>

</table>

</body>

</html>

Mari kita pelajari bersama-sama. Untuk menampilkan background yang berwarna pada tiap-tiap sel, kita dapat gunakan sintax bgcolor yang artinya background color kemudian diikuti dengan kode RGB dari warna yang kita pilih (kode RGB dapat dilihat di halaman terakhir buku ini). Contohnya <td bgcolor=#F0FFF0>.

Kemudian, jika kita ingin menggabungkan beberapa kolom menjadi satu seperti pada contoh di atas, kita dapat menggunakan atribut colspan yang artinya column span. Atribut colspan ini diikuti dengan jumlah kolom yang akan digabungkan, contohnya <td colspan=3>. Berarti ada 3 kolom yang akan digabungkan. Secara default, isi dari tag <td colspan> akan ditampilkan dengan atribut align=center. Kita dapat mengubahnya menjadi rata kiri atau kanan dengan menambahkan atribut align, contohnya <td colspan=3 align=right>. Jika kita tidak menambahkan atribut align, maka defaultnya adalah align=center. Lalu, jika kita ingin menggabungkan beberapa baris menjadi satu, kita dapat menggunakan atribut rowspan dan diikuti dengan jumlah baris yang akan digabungkan, contohnya <td rowspan=3>. Secara default, atribut rowspan akan menambahkan atribut valign yang bernilai middle. Jika kita ingin mengubahnya, kita dapat menambahkan atribut valign dan memberikan nilai top atau bottom, contohnya <td rowspan=3 valign=top>. Jika tidak, maka defaultnya adalah valign=middle.

WRAPPING Kadangkala kita butuh untuk melakukan wrapping dan non-wrapping. Wrapping adalah menuliskan data dalam sel tabel yang mengikuti ukuran sel yang tersedia. Perhatikan gambar berikut ini :

Sel bagian kiri sebenarnya hanya 20% saja lebarnya, sama persis dengan sel sebelah kanan. Namun karena sel sebelah kiri tidak menggunakan wrapping, maka data ditampilkan semuanya dalam satu baris tanpa memperdulikan lebar sel yang tersedia. Sedangkan sel sebelah kanan menggunakan wrapping, sehingga data ditampilkan sesuai dengan lebar sel yang tersedia. Berikut ini sintaxnya :

<html>

<head>


</head>

<body>


<tr>

<td width=20% nowrap>Yang ini ukuran cuma 20% tapi No-Wrap</td>

<td width=20%>Yang ini 20% tapi menggunakan wrap</td>

</tr>

</table>

</body>

</html>

Jika dalam tag <td> kita tidak menambahkan atribut wrapping, maka defaultnya adalah wrap. Jika kita tidak ingin menggunakan wrapping, maka kita harus menambahkan sintax nowrap pada tag <td> seperti contoh di atas.

FORM Form adalah fasilitas yang paling banyak digunakan dalam sebuah aplikasi berbasis web yang interaktif. melalui form ini user dapat memberikan masukan dan nilai-nilai tertentu yang selanjutnya akan diproses oleh server untuk diberikan hasilnya. Dengan kata lain, user dan server (mesin) berinteraksi dengan menggunakan form ini.

FORM DALAM HTML Form dalam HTML memiliki sintax dasar sebagai berikut :

<html>

<head>


</head>

<body>

<form name=”nama_form” method=post action=”tujuan.html”>

</form>

</body>

</html>

Penggunaan form dibuka dengan tag <form> dan ditutup dengan tag </form>. Di dalam tag <form> ditambahkan tiga atribut penting yang harus ada, yaitu name, method, dan action. Atribut name digunakan untuk identifikasi yang akan dilakukan di file tujuan, form manakah yang akan diproses isinya. Dengan menggunakan atribut name ini, setiap isian dari form akan diproses berdasarkan nama formnya. Selanjutnya adalah atribut method. Atribut ini menjelaskan metode apa yang digunakan form untuk mengirimkan isiannya. Ada dua macam metode yang digunakan, yaitu post dan get. Dalam metode post, semua data isian form dikirimkan ke server tanpa bisa dilihat oleh user. Sedangkan metode get, server akan meminta isian dari form, dan user dapat melihat secara detail isian yang dimasukkan dalam form. Penggunaan metode post dan get ini tergantung dari kebutuhan kita, apakah user diperkenankan melihat isian form atau tidak. Namun demikian, kebanyakan programmer menggunakan metode post untuk memproses data isian dari form yang mereka buat dengan alasan keamanan data dan coding. Kemudian, atribut ketiga yang harus ada pada form adalah action. Atribut ini menunjukkan file tujuan dari form yang akan memproses isian dari form tersebut.

TIPE INPUT DALAM FORM Untuk mengisikan isian yang ingin kita kirimkan ke server kita dapat menggunakan tag <input>. Ada 9 jenis input yang tersedia dalam HTML, yaitu text, password, hidden, checkbox, radio, select, textarea, submit, dan reset.

Input Tipe Text Input jenis ini sering digunakan untuk meminta isian dari user yang berupa teks, angka, atau sembarang karakter. Sintax dasarnya adalah sebagai berikut :

<input type=text name=”nama_input” size=15 maxlength=50>

Jika kita ingin memberikan isian yang standar sesuai yang telah kita tetapkan sebelumnya, kita juga dapat menambahkan atribut value seperti contoh berikut ini :

<input type=text name=”nama_input” size=15 maxlength=50 value=”Budhi”>

Mari perhatikan bersama-sama. Atribut name digunakan untuk mengenali input yang akan diproses. Berhubung dalam sebuah form biasanya terdapat banyak sekali masukan dengan nama input yang berbeda-beda, maka penggunaan atribut name ini sangat penting. Selanjutnya, atribut size menentukan ukuran dari input yang akan ditampilkan. Sedangkan atribut maxlength adalah jumlah karakter maksimal yang dapat diisikan ke dalam input ini. Jumlahnya terserah kita. Kemudian atribut value digunakan jika kita ingin isian ini secara otomatis berisi sesuatu, sehingga user tidak perlu menuliskannya. Sebagai contohnya sintax di atas. Karena atribut value disi dengan “Budhi”, maka saat ditampilkan, input tersebut sudah berisi dengan kata “Budhi” sehingga user tidak perlu

menulisnya lagi. Namun demikian, user dapat merubah apa yang telah ditampilkan dengan karakter lain, misalnya “Ahmad”.

Input Tipe Password Input tipe password sebenarnya sama dengan input tipe text. anya saja ada perbedaan dari segi tampilan. Jika pada input tipe text, apa saja yag diisikan oleh user akan terlihat sesuai aslinya, maka pada input tipe password, apa yang diisikan oleh user akan ditampilkan dengan “ *********** ”. Atribut yang digunakan juga sama dengan tipe text, yaitu size, maxlength, dan value. Sintax dasarnya adalah sebagai berikut :

<input type=password name=”nama_input” size=15>

Input Tipe Hidden Input tipe hidden digunakan untuk menambahkan data yang sifatnya rahasia untuk diproses oleh server. Data yang ada di input tipe hidden tidak dimunculkan di browser, sehingga user tidak tahu adanya input ini. Sintax dasarnya :

<input type=hidden name=”nama_input” value=”Budhi”>

Input Tipe Checkbox Input checkbox merupakan input yang menyajikan pilihan dengan nilai yang berbeda, yang dapat dipilih lebih dari satu pilihan. Sintaxnya adalah :

<input type=checkbox name=”nama1” value=”value1”>Value 1

<input type=checkbox name=”nama2” value=”value2”>Value 2

dan seterusnya

Input Tipe Radio Input tipe radio merupakan lawan dari input tipe checkbox. Jika input tipe checkbox memberikan kebebasan pada user untuk memilih lebih dari satu pilihan, input tipe radio hanya memberikan satu pilihan saja kepada user. Sintaxnya adalah :

<input type=radio name=”nama” value=”HTML” checked>HTML

<input type=radio name=”nama” value=”PHP”>PHP

<input type=radio name=”nama” value=”ASP”>ASP

Jika diperhatikan, nama yang diberikan di atas adalah sama, sehingga nilai (value) yang diambil hanya satu saja. Atribut checked digunakan untuk memberikan nilai pilihan awal pada input.

Input Tipe Select Input tipe select memberikan tampilan yang berbeda kepada user. Input ini sama seperti input radio, yaitu hanya memberikan peluang kepada user untuk memilih satu nilai di antara nilai-nilai lain yang ditawarkan. Berikut ini sintax dasarnya :

<select name”program”>

<option value=”HTML” selected>HTML

<option value=”PHP”>PHP

<option value=”ASP”>ASP

</select>

Input ini diawali dengan tag <select> dan diakhiri dengan tag </select>. Semua nilai yang ditawarkan disimpan di dalam tag <option>. Sedangkan atribut selected digunakan untuk memberikan nilai pilihan awal kepada user.

Input Tipe Textarea Input tipe textarea digunakan untuk memberikan kesempatan kepada user untuk memberikan masukkan berupa kalimat-kalimat yang cukup panjang, misalnya komentar. Sintax dasarnya adalah sebagai berikut :

<textarea name=”nama” rows=20 cols=50>

</textarea>

Input ini dibuka dengan tag <textarea> dan ditutup dengan tag </textarea>. Atribut yang digunakan adalah rows, untuk menentukan banyaknya baris yang disediakan, dan cols untuk menentukan banyaknya karakter yang dapat ditulis dalam satu baris.

Input Tipe Submit Input ini berupa tombol yang bila ditekan akan mengirimkan seluruh isian form ke alamat yang dituju. Sintax dasarnya adalah sebagai berikut :

<input type=submit value=”Kirim”>

Input ini akan menghasilkan sebuah tombol dengan tulisan “Kirim” yang bila ditekan akan mengirimkan semua isi form ke alamat tujuan.

Input Tipe Reset Input ini adalah kebalikan dari input tipe submit, di mana input ini akan menghapus seluruh isian form yang mempersilahkan user untuk mengisi ulang form yang ditampilkan. Sintax dasarnya adalah :

<input type=reset value=”Batal”>

Input ini akan menghasilkan sebuah tombol yang bertuliskan “Batal” yang bila ditekan akan menghapus semua isian form seperti semula.

Contoh Penggunaan Input Pada Form Sekarang kita akan mencoba menggabungkan semua elemen input dalam sebuah form yang interaktif. Perhatikan gambar berikut ini :

Sintax dari hasil di atas adalah :

<html>

<head>


</head>

<body>

<b>Isilah form ini dengan lengkap !</b>

<p>

<form name="form1" method=post action="tujuan.html">

<table border=0>

<tr>

<td>NIM</td>

<td>:</td>

<td><input type=text name="nim" size=10></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type=text name="nama" size=20></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type=text name="alamat" size=30></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

<td>:</td>

<td><input type=radio checked name="kelamin" value="Laki-laki">Laki-laki</td>

</tr>

<tr>

<td></td>

<td></td>

<td>

<input type=radio name="kelamin" value="Perempuan"> Perempuan

</td>

</tr>

<tr>

<td>MK yg diambil</td>

<td>:</td>

<td><input type=checkbox name="basis_data">Basis Data</td>

</tr>

<tr>

<td></td>

<td></td>

<td><input type=checkbox name="logika_matematika">Logika Matematika</td>

</tr>

<tr>

<td></td>

<td></td>

<td><input type=checkbox name="makro">Pemrograman Makro</td>

</tr>

<tr>

<td></td>

<td></td>

<td><input type=checkbox name="web_programming">Web Programming</td>

</tr>

<tr>

<td></td>

<td></td>

<td><input type=checkbox name="pbo">Pemrograman Berbasis Object</td>

</tr>

<tr>

<td>Kelompok</td>

<td>:</td>

<td><select name="kelompok">

<option selected value="pagi">Pagi

<option value="malam">Malam

</select>

</td>

</tr>

<tr>

<td>Status</td>

<td>:</td>

<td><select name="status" multiple>

<option value="baru">Baru

<option value="ulang">Ulang

<option value="transfer">Transfer

</select>

</td>

</tr>

<tr>

<td>Keterangan</td>

<td>:</td>

<td><textarea name="kelompok" rows=5 cols=30></textarea></td>

</tr>

<tr>

<td align=right><input type=submit value="Kirim"></td>

<td>:</td>

<td><input type=reset value="Batal">

</td>

</tr>

</table>

</form>

</body>

</html>

CONTOH FORM UNTUK MENGIRIM EMAIL Seringkali kita menemukan halaman web yang berisi form untuk dikirimkan ke sebuah alamat email. Bagaimana sintax untuk membuat halaman web seperti itu ? Caranya hanya dengan mengganti tujuan formnya. Perhatikan sintax berikut ini :

<html>

<head>


</head>

<body>

<b>Isilah form ini dengan lengkap !</b>

<p>

<form name="form1" method=”post” action=”mailto:[email protected]” enctype=”text/plain”>

<table border=0>

<tr>

<td>NIM</td>

<td>:</td>

<td><input type=text name="nim" size=10></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type=text name="nama" size=20></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><input type=text name="alamat" size=30></td>

</tr>

<tr>

<td align=right><input type=submit value="Kirim"></td>

<td>:</td>

<td><input type=reset value="Batal">

</td>

</tr>

</table>

</form>

</body>

</html>

handout pemrograman berbasis web - alihtinarsaputra's blog · handout pemrograman berbasis w...

Documents