pemrograman basis data berbasis web 04

11S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo

PemrogramanPemrograman Basis Data Basis Data

BerbasisBerbasis WebWeb

PertemuanPertemuan KeKe--44

(HTML (HTML LanjutLanjut))

OlehOleh: : NoorNoor IfadaIfada

S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 22

Sub Sub PokokPokok BahasanBahasan::

• Tabel

• Form

• Frame


TABELTABEL

Fungsi:

• Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca

• Mengatur tampilan homepage agar lebihmenarik


• Tag yang diperlukan: <table>

• Atribut-atribut:

Mengatur spasi antar sel dan spasi dalam selCellspacing dan cellpadding

Menggabungkan beberapa kolomColspan

Menggabungkan beberapa barisRowspan

Mengatur bentuk perataan vertikalValign

Mengatur bentuk perataan horisontalAlign

Untuk mengatur warna suatu sel dalam tabelColor

Menentukan gambar yang digunakan untuk

background tabel

Background

Menentukan background tabelBgcolor

Menentukan tinggi tabelHeight

Menentukan lebar tabelWidth

Menentukan ukuran border/garis tabelBorder

FungsiAtribut


MembuatMembuat tabeltabel sederhanasederhana::

• Tag yang diperlukan:

– Membuat baris: <tr> (table row)

– Membuat kolom: <td> (table data)

Contoh:<table border="1">

<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>

<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>

</table>

Tampilan:


MenambahkanMenambahkan juduljudul tabeltabel::

• Judul tabel: <caption>

• Judul baris/kolom: <th> (table header)Contoh:

<table border="1">

<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>

<tr><th>No</th><th>NPM</th><th>Nama</th></tr>

<tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr>

<tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>

</table>

Tampilan:


MengaturMengatur lebarlebar dandan tinggitinggi suatusuatu tabeltabel::

Atribut: weight dan height

Nilai:– ukuran % (max 100%)

– ukuran pixelContoh:

<table border="1" width=“50%”><caption align="top"> <b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td width=“20”>1.</td><td width=“80” height=50>06.100.001</td><td width=“180” height=“50”>Amin A. Angkasa</td></tr><tr><td width=“20”>2.</td><td width=“80” height=70>06.100.002</td><td width=“180” height=70>Beni B. Bernardi</td></tr>

</table>

Tampilan:


PerataanPerataan dalamdalam tabeltabel::

• horisontal: atribut align � utk <caption>, <tr>, <td> dan <th>

• vertikal: atribut valign � utk <tr>, <td> dan <th>

Contoh:<table border="1" align="center">

<caption align="top"><b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td align="center" width="20">1.</td><td align="center" valign="middle"

width="80" height="50">06.100.001</td><td align="right" valign="top"

width="180" height="50">Amin A. Angkasa</td></tr><tr><td width="20">2.</td><td align="left" valign="top"

width="80" height="70">06.100.002</td><td align="left" valign="bottom"

width="180" height="70">Beni B. Bernardi</td></tr></table>

Tampilan:


MembuatMembuat warnawarna padapada tabeltabel::

• Atribut: bgcolorContoh:<body bgcolor="purple"><font size="3" face="arial" color="yellow"><table border="2" bgcolor="white" align="center">

<caption align="bottom"> <b> Tabel Daftar Mahasiswa </b> </caption><tr bgcolor="yellow">

<th>No</th><th>NPM</th><th>Nama</th></tr><tr bgcolor="cyan"><td align="center" width="20">1.</td><td align="left" valign="middle“

width="80" height="40">06.100.001</td><td align="left" valign="middle“

width="180" height="40">Amin A. Angkasa</td></tr><tr><td bgcolor="blue" width="20">2.</td><td bgcolor="red" align="left" valign="middle"

width="80" height="40">06.100.002</td><td bgcolor="green" align="left" valign="middle"

width="180" height="40">Beni B. Bernardi</td></tr></table>

</body>

Tampilan:


PenggabunganPenggabungan baris/kolombaris/kolom::

• Menggabungkan bbrp kolom menjadi 1: atribut colspan• Menggabungkan bbrp kolom menjadi 1: atribut rowspan

Contoh Tampilan:


<table border="1" bgcolor="white" align="center">

<caption align="top">

<b> Tabel Daftar Nilai Mahasiswa </b> </caption>

<tr bgcolor="gray"><th rowspan="2">No</th>

<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>

</tr>

<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>

<tr><td align="center" width="20">1.</td>

<td align="left" valign="middle" width="80" height="40">06.100.001</td>

<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>

<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>

</tr>

<tr><td width="20">2.</td>


<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>


</tr>

</table>

Script HTML:


CellpadingCellpading dandan cellspacingcellspacing::

• atribut cellpading: mengatur spasi antara border dengantulisan

• atribut cellspasing: mengatur spasi antar 2 buah sel

Contoh Tampilan:


Script HTML:

<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">

<caption align="top">

<b> Tabel Daftar Nilai Mahasiswa </b> </caption>

<tr bgcolor="gray"><th rowspan="2">No</th>

<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>

</tr>

<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>

<tr><td align="center" width="20">1.</td>


<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>


</tr>

<tr><td width="20">2.</td>


<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>


</tr>

</table>


FORMFORMFungsi:

• Menerima informasi atau meminta umpan balik dariuser dan memproses informasi tersebut di server

Standar penulisan:<form method=“post/get” action=“. . .”> . . . </form>

Atribut:

Tipe form yang akan digunakanType

Memberikan nilai suatu masukanValue

Memerikan nama tiap masukanName

Aksi yang akan dilakukan jika user menekan tombol SubmitAction

Metode pengiriman data ke file tujuan (POST atau GET)Method

FungsiAtribut


TextboxTextbox

• Tag: <input>


mengatur lebar field secara horisontal, berapa huruf

maksimal yang dapat ditampilkan

size

menentukan jumlah maksimum huruf (karakter) yang

dapat dimasukkan

maxlength

Memberi nilai suatu inputvalue

Menentukan nama untuk field sehingga dapat dirujuk

nantinya

name

Menentukan jenis field masukan

Text, submit, password

type=["text"|"password"]

FungsiAtribut


Tampilan:

Contoh:<body>

<b>Login: <b> <br>

<form method="post">

<table>

<tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr>

<tr> <td>Password:</td> <td><input type="password" name="password" size="20"></td></tr>

</table>

</form>

</body>


Submit Submit dandan ResetReset

• Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan keserver

• Tombol Reset: digunakan ketika user inginmenghapus/mengosongkan semuamasukan yang ditulis dalam form


Contoh:<body>

<b>Data Pengunjung: <b> <br>

<form method="post" action="data.html">

<table>

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

<tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>

</table>

<input type="submit" value="Simpan" name="t1">

<input type="reset" value="Reset" name="t2">

</form>

</body>

Tampilan:


CheckboxCheckbox

Fungsi:

• Untuk memberi beberapa pilihan kepadauser


Contoh:<form method="post">

Bacaan yang Anda sukai: <br>

<input type="checkbox" name="bacaan" value="novel"> Novel <br>

<input type="checkbox" name="bacaan" value="koran"> Koran <br>

<input type="checkbox" name="bacaan" value="majalah"> Majalah <br>

<input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br>

</form>

Tampilan:


Radio buttonRadio button

Fungsi:

• Untuk memberi (hanya) satu pilihankepada user



Apakah Anda setuju dengan kenaikan SPP: <br>

<input type="radio" name="opsi" value="ya"> Ya <br>

<input type="radio" name="opsi" value="tidak"> Tidak <br>

<input type="radio" name="opsi" value="ragu"> Ragu-ragu <br>

</form>

Tampilan:


DaftarDaftar Drop DownDrop Down

Fungsi:

• Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja)



Jurusan: <br>

<select name="jurusan">

<option value="TInf"> Teknik Informatika <br>

<option value="MI"> D3 Manajemen Informatika <br>

<option value="TI"> Teknik Industri <br>

</form>

Tampilan:


Text AreaText AreaFungsi:• Sebagai field masukan untuk pengunjung (dapat

menerima lebih dari satu baris teks). Biasa disebutsebagai kotak komentar

• Tag: <textarea>


Menentukan fitur word wrappingWrap=["off"|"virtual"|"physical"]

Menentukan tinggi kotak komentarColumns

Menetukan lebar kotak komentarRows

FungsiAtribut


Tampilan:

Contoh:<html>

<head>

<title> Penggunaan Text Area </title>

</head>

<body>

<b>Komentar: <b> <br>

<form method="post"> <textarea rows="10" cols=“40" wrap="physical" name="komentar">

</textarea><br>

</html>


FRAMEFRAME

Fungsi:

• Menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser.


• Standar penulisan: <frameset [cols=“%,%” [rows=“%,%”]> . . . </frameset>


Memberi nama untuk framename

Menentukan fitur scrollingscrolling=["yes"|"no"]

Membuat frame tidak dapat diubah ukurannyanoresize

Menentukan batas antara frameframeborder=["0"|"1“]

Memasukkan dokumen HTML ke dalam frameframe src

Membuat frame horisontal dengan tinggi baris

tertentu

frameset rows

Membuat frame vertikal dengan lebar kolom

tertentu

frameset cols

FungsiAtribut


Frame Frame VertikalVertikal

Contoh:<html>

<head>

<title>

Membuat Frame Vertikal

</title>

</head>

<frameset cols="25%,*">

<frame name="kiri"

src="kiri.html" scrolling="no">

<frame name="kanan“

src="kanan.html">

</frameset>

</html>

Tampilan:


Frame Frame HorisontalHorisontal

Contoh:<html>

<head>

<title>

Membuat Frame Horisontal </title>

</head>

<frameset rows="40%,*">

<frame name="atas" src="atas.html“

scrolling="no">

<frame name="bawah“

src="bawah.html">

</frameset>

</html>

Tampilan:


GabunganGabungan Frame Frame VertikalVertikal--HorisontalHorisontal

Contoh:<html>

<head>

<title>

Membuat Frame Vertikal-Horisontal </title>

</head>

<frameset rows="20%,*">

<frame name="atas" src="atas.html“

scrolling="no">

<frameset cols="40%,*">

<frame name="kiri"

src="kiri.html">

<frame name="kanan"

src="kanan.html">

</frameset>

</frameset>

</html>

Tampilan:


LatihanLatihan dandan TugasTugas??

pemrograman basis data berbasis web 04

Documents