pemrograman basis data berbasis web 04
Post on 04-Feb-2022
2 Views
Preview:
TRANSCRIPT
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 33
TABELTABEL
Fungsi:
• Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca
• Mengatur tampilan homepage agar lebihmenarik
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 44
• 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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 55
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 66
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 77
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 88
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 99
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1010
PenggabunganPenggabungan baris/kolombaris/kolom::
• Menggabungkan bbrp kolom menjadi 1: atribut colspan• Menggabungkan bbrp kolom menjadi 1: atribut rowspan
Contoh Tampilan:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1111
<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="80" height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
</table>
Script HTML:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1212
CellpadingCellpading dandan cellspacingcellspacing::
• atribut cellpading: mengatur spasi antara border dengantulisan
• atribut cellspasing: mengatur spasi antar 2 buah sel
Contoh Tampilan:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1313
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="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="80" height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
</table>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1414
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1515
TextboxTextbox
• Tag: <input>
• Atribut-atribut:
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1616
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1717
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1818
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 1919
CheckboxCheckbox
Fungsi:
• Untuk memberi beberapa pilihan kepadauser
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2020
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2121
Radio buttonRadio button
Fungsi:
• Untuk memberi (hanya) satu pilihankepada user
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2222
Contoh:<form method="post">
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2323
DaftarDaftar Drop DownDrop Down
Fungsi:
• Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 pilihan saja)
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2424
Contoh:<form method="post">
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2525
Text AreaText AreaFungsi:• Sebagai field masukan untuk pengunjung (dapat
menerima lebih dari satu baris teks). Biasa disebutsebagai kotak komentar
• Tag: <textarea>
• Atribut-atribut:
Menentukan fitur word wrappingWrap=["off"|"virtual"|"physical"]
Menentukan tinggi kotak komentarColumns
Menetukan lebar kotak komentarRows
FungsiAtribut
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2626
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>
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2727
FRAMEFRAME
Fungsi:
• Menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser.
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2828
• Standar penulisan: <frameset [cols=“%,%” [rows=“%,%”]> . . . </frameset>
• Atribut-atribut:
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
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 2929
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 3030
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 3131
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:
S1 Teknik Informatika S1 Teknik Informatika -- UnijoyoUnijoyo 3232
LatihanLatihan dandan TugasTugas??
top related