Praktikum Pemograman Berorientasi Objek

Pertemuan ke-2

A. Membuat Link
Hyperlink ke Halaman Web
Untuk membuat link ke halaman lain, dapat menggunakan tag <A>…</A>.
Format : <A HREF = “URL”>Label</A>

Code :

Link ke Situs Web lain

Hyperlink tidak terbatas ke halaman-halaman web yang berada pada satu system yang sama,
seringkali ditujukan ke situs web pada web server yang berbeda.

Code :

Link Dengan Gambar

Sebuah gambar dapat dijadikan sebagai link ke halaman lain. Dengan menggunakan tag
<IMG> diantara pasangan tag <A>..</A>.

Code :

B. Menggunakan Tabel
Dasar Penggunaan Tabel
Tag yang biasa digunakan dalam pembuatan table, sebagai berikut :
Tag Keterangan
<TABLE>…</TABLE> Mengawali dan mengakhiri sebuah table
<CAPTION>…</CAPTION> Membentuk judul pada table
<TR>…</TR> Membuat sebuah baris dalam table
<TH>…</TH> Membuat judul kolom
<TD>…</TD> Membuat sebuah sel data

Code :

Menggabungkan Cell
Untuk menggabungkan beberapa baris cell, dapat menggunakan atribut ROWSPAN pada tag
<TD>.Sedangkan untuk menggabungkan beberapa cell dalam satu baris dapat menggunakan
atribut COLSPAN pada tag <TH> atau <TD>
Code :

Output :
 Code :

Output :

Mengatur Tabel
Atribut ALIGN pada tag <TR> <TH> <TD> dapat digunakan untuk mengatur peletakkan teks
rata kiri, rata kanan ataupun tengah. Untuk mengatur tinggi cell dapat menggunakan atribut
HEIGHT pada tag <TABLE> dengan suatu nilai yang dinyatakan dengan satuan pixel. Di
dalam sebuah cell, teks dapat di atur menurut posisi vertical, yaitu atas, tengah, dan bawah.
Untuk melakukannya dapat menggunakan atribut VALIGN pada tag <TH> dan <TR> dan
<TD>. Atribut WIDTH pada tag <TABLE> dapat digunakan untuk mengatur lebar table tanpa
tergantung oleh ukuran window browser.

C. Menggunakan Formulir
Formulir dientuk dengan menggunakan pasangan tag <FORM> dan </FORM>. Dua atribut
yang umum digunakan pada tag <FORM> adalah ACTION dan METHOD.
• ACTION
Menentukan URL yang akan dijalankan dan menerrima semua masukkan pada formulir.
Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman
web itu sendiri.
• METHOD
Digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam
ACTIOn. Nilai umum untuk atribut ini adalah GET dan POST. POST membuat informasi
dikirim secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim
menjadi satu dengan URL.

Memasukkan Data Dengan INPUT

Tag <INPUT> digunakan untuk melakukan pemasukkan data dan letaknya berada dalam
pasangan tag <FORM>. Ada banyak macam tipe pemasukkan data seperti kotak teks, kotak
password, radio botton, check list, tombol SUBMIT dan RESET.

Atribut Fungsi
NAME Menentukan nama data. Diperlukan oleh semua jenis masukkan,
kecuali SUBMIT dan RESET
SIZE Menentukan ukuran kotak masukkan yang tampil untuk teks dan
password
 MAXLENGTH Menentukan jumlah karakter yang dapat dimasukkan dalam kotak
password dan kotak teks
VALUE Menentukan nilai awal untuk kotak input
CHECKED Mengatur agar kotak cell dalam keadaan terpilih apda keadaan awal
TYPE Menentukan tipe kotak masukkan

Contoh :

Tombol SUBMIT dan RESET

Tipe SUBMIT pada tag <INPUT> akan membentuk tombol Submit, yaitu tombol yang
menyebabkan URL yang disebutkan pada ACTION pada tag <FORM akan dimuat. Sedangkan
tombol RESET berfungsi untuk mengosongkan atau mengembalika nilai field teks ke nilai
bawaan.

Code :

Output :

File info.htm :

Keterangan : Coding diatas merupakan contoh sederhana dari formulir, tombol Reset sudah
dapat berfungsi, namun untuk tombol submit tidak akan mengeluarkan respon jika tidak
membuat file info.htm. perlu diketahui, code tersebut belum dapat menangkan nilai masukan
dari kedua field.
Perbedaan GET dan POST
Code di atas menggunakan method POST, berikut ini code dengan menggunakan GET,
perhatikan perbedaan yang terjadi pada alamat URL.
Code : dengan GET

Output : perhatikan alamat URL

Tipe PASSWORD
Tipe Password yang dinyatakan pada atribut TYPE pada tag <INPUT> akan membat setiap
karakter yang diinputkan akan disembunyikan.

Code :

Output :
Tipe CHECKBOX
Berfungsi untuk membuat kotak cek, yaitu bentuk masukkan yang memungkinkan pemakai
men-checklist. Tipe ini melibatkan atribut NAME, sedangkan atribut CHECKED bersifat
optional, yang digunakan untuk memberikan nilai awal berupa tanda checklist.

Code :

Output :

Tipe RADIO BUTTON

Tipe ini digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya
memilih satu dari sekian tombol. Dengan menggunakan tag <INPUT> dengan atribut TYPE =
RADIO.

Code :

Output :
Tipe TEXTAREA
Menggunakan pasangan tag <TEXAREA>…</TEXAREA> yang berfungsi untuk membentuk
suatu masukkan yang panjang dan dapat mencakup banyak baris.

Atribut Fungsi
NAME Menentukan nama untuk Textarea
ROWS Menentukan jumlah baris yang tampil di layar
COLS Menentukan jumlah kolom yang tampil pada layar
WRAP Menentukan text secara otomatis akan dilipat jika baris tidak cukup menampung
text.

Code :

Output :

Tipe SELECT
Menggunakan pasangan tag <SELECT>…</SELECT> yang berfungsi untuk membentuk
kotak kombo (drop down) atau daftar pilihan tergantung pada tag <SELECT>.

Code :
 Output :

D. Tugas
1. Dengan menggunakan html, buat table berikut ini :
Fakultas

Mahasiswa Sains dan Teknologi Ekonomi Kedokteran

Jenis Kelamin Laki-laki 300 500 100

Perempuan 200 400 100

Notes :
• Format file : NIM_NAMA_TI5A_T1.doc (source code dan print screen output)
• Date line : 12 Oktober 2010 (Hari ini)