HTML Lanjut_1

Download Report

Transcript HTML Lanjut_1

Pemrograman Basis Data Berbasis Web

Pertemuan Ke-3 (HTML Lanjut [1])

S1 Teknik Informatika - Unijoyo 1

Sub Pokok Bahasan:

Tabel

      

Membuat tabel sederhana Menambahkan judul tabel Mengatur lebar dan tinggi suatu tabel Perataan dalam tabel Membuat warna pada tabel Penggabungan baris/kolom Cellpading dan cellspacing (mengatur spasi antar

sel dan dalam sel)

Form

     

Textbox

Submit dan Reset

Checkbox Radio button

Daftar Drop Down

Text Area

S1 Teknik Informatika - Unijoyo 2

TABEL

Fungsi:  Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca  Mengatur tampilan homepage agar lebih menarik S1 Teknik Informatika - Unijoyo 3

  Tag yang diperlukan:

Atribut-atribut:

Border Width Color

Atribut

Height Bgcolor Background Align Valign Rowspan Colspan

Cellspacing dan cellpadding

Fungsi

Menentukan ukuran border/garis tabel Menentukan lebar tabel Menentukan tinggi tabel Menentukan background tabel Menentukan gambar yang digunakan untuk background tabel Untuk mengatur warna suatu sel dalam tabel Mengatur bentuk perataan horisontal Mengatur bentuk perataan vertikal Menggabungkan beberapa baris Menggabungkan beberapa kolom Mengatur spasi antar sel dan spasi dalam sel S1 Teknik Informatika - Unijoyo 4

Membuat tabel sederhana:

Tag yang diperlukan:   Membuat baris:

(table row) Membuat kolom:

<

/table

>

Tampilan:

S1 Teknik Informatika - Unijoyo 5

Menambahkan judul tabel:

  Judul tabel:

, , S1 Teknik Informatika - Unijoyo 9

Penggabungan baris/kolom:

 Menggabungkan bbrp kolom menjadi 1: atribut colspan  Menggabungkan bbrp baris menjadi 1: atribut rowspan

Contoh Tampilan:

S1 Teknik Informatika - Unijoyo 10

Script HTML:

(table data)

Contoh:

<

table

border="1">

Basis DataMatematika Diskrit
PBD WEBADBO
 Judul baris/kolom:
(table header)

Tampilan:

S1 Teknik Informatika - Unijoyo 6

Mengatur lebar dan tinggi suatu tabel:

Atribut:

width

Nilai:  

dan

height

ukuran % (max 100%) ukuran pixel

Tampilan:

S1 Teknik Informatika - Unijoyo 7

Perataan dalam tabel:

  horisontal: atribut align  dan

vertikal: atribut valign  utk
,
utk
dan

Contoh:

Tampilan:

align="top"

> DAFTAR MAHASISWA

NoNPMNama

align="center"

width="20">1.

align="center" valign="middle"

width="80" height="50">06.100.001

align="right" valign="top"

width="180" height="50">Amin A. Angkasa

2.

align="left" valign="top"

width="80" height="70">06.100.002

align="left" valign="bottom"

width="180" height="70">Beni B. Bernardi

S1 Teknik Informatika - Unijoyo 8

Membuat warna pada tabel:

 Atribut: bgcolor

Tampilan: Contoh:

bgcolor="purple"

>

bgcolor="white"

align="center">

bgcolor="yellow"

>

bgcolor="cyan"

>

Tabel Daftar Mahasiswa
NoNPMNama
1. 06.100.001 Amin A. Angkasa

bgcolor="blue"

width="20">2.

bgcolor="red"

align="left" valign="middle" width="80" height="40">06.100.002

bgcolor="green"

align="left" valign="middle"

width="180" height="40">Beni B. Bernardi
Tabel Daftar Nilai Mahasiswa

rowspan="2"

>No

rowspan="2"

>NPM

rowspan="2"

>Nama

colspan="2"

>Nilai
UTS UAS
1. 06.100.001 Amin A. Angkasa 70 80
2. 06.100.002 Beni B. Bernardi 70 80
S1 Teknik Informatika - Unijoyo 11

Cellpading

dan

cellspacing

:

  atribut cellpading : mengatur spasi antara border dengan tulisan atribut cellspasing : mengatur spasi antar 2 buah sel

Contoh Tampilan:

S1 Teknik Informatika - Unijoyo 12

Script HTML:

>

Tabel Daftar Nilai Mahasiswa
No NPM Nama Nilai
UTS UAS
1. 06.100.001 Amin A. Angkasa 70 80
2. 06.100.002 Beni B. Bernardi 70 80
S1 Teknik Informatika - Unijoyo 13

FORM

Fungsi:  Menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server Standar penulisan:

. . .

Atribut:

Atribut Method Action Name Value Type Fungsi

Metode pengiriman data ke file tujuan (POST atau GET) Get : data akan dikirim dengan menggunakan query string pada URL Post : data akan dikirim ke server sebagai block data ke skrip.

Aksi yang akan dilakukan jika user menekan tombol Submit Memerikan nama tiap masukan Memberikan nilai suatu masukan Tipe form yang akan digunakan S1 Teknik Informatika - Unijoyo 14

 

Textbox

Tag: Atribut-atribut:

Atribut type=["text"|"pass word"] name value size maxlength Fungsi

Menentukan jenis field masukan Text, submit, password Menentukan nama untuk field sehingga dapat dirujuk nantinya Memberi nilai suatu input mengatur lebar field secara horisontal, berapa huruf maksimal yang dapat ditampilkan menentukan jumlah maksimum huruf (karakter) yang dapat dimasukkan S1 Teknik Informatika - Unijoyo 15

Contoh:

Login:

User:

type="text"

name="user" size="20">

Password:

type="password"

name="password" size="20">

Tampilan:

S1 Teknik Informatika - Unijoyo 16

Submit

dan

Reset

  Tombol

server Submit

: digunakan ketika user mengisi form dan ingin mengirimkan ke Tombol

Reset

: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form S1 Teknik Informatika - Unijoyo 17

Contoh:

Data Pengunjung:

Nama:
Alamat:

type="submit"

type="reset"

value="Simpan" name="t1"> value="Reset" name="t2">

Tampilan:

S1 Teknik Informatika - Unijoyo 18

Checkbox

Fungsi:  Untuk memberi beberapa pilihan kepada user

Contoh:

Bacaan yang Anda sukai:

type="checkbox"

name="bacaan" value="novel"> Novel

type="checkbox"

name="bacaan" value="koran"> Koran

type="checkbox"

name="bacaan" value="majalah"> Majalah

type="checkbox"

name="bacaan" value="tabloid"> Tabloid

Tampilan:

S1 Teknik Informatika - Unijoyo 19

Radio button

Fungsi:  Untuk memberi (hanya) satu pilihan kepada user

Contoh:

Apakah Anda setuju dengan kenaikan SPP:

type="radio"

name="opsi" value="ya"> Ya

type="radio"

name="opsi" value="tidak"> Tidak

type="radio"

name="opsi" value="ragu"> Ragu-ragu

Tampilan:

S1 Teknik Informatika - Unijoyo 20

Daftar

Drop Down

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

Jurusan:
<

select

name="jurusan"> <

option

value="TInf"> Teknik Informatika
<

option

value="MI"> D3 Manajemen Informatika
<

option

value="TI"> Teknik Industri
<

/select

>

Tampilan:

S1 Teknik Informatika - Unijoyo 21

 Fungsi:

Text Area

Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar   Tag:
name="komentar">

Tampilan:

S1 Teknik Informatika - Unijoyo 23

Summary

  Pemakaian Tabel dalam halaman web dapat membuat informasi tampil secara terstruktur, ringkas dan mudah dibaca serta membuat tampilan web menjadi lebih menarik.

Form digunakan untuk menerima informasi

atau meminta umpan balik dari user dan memproses informasi tersebut di server.

S1 Teknik Informatika - Unijoyo 24

Daftar Pustaka

    Chris Bates [2006]. Web Programming: Building Internet Applications, Third Edition, John Wiley & Sons Ltd, England. Husni [2007]. Pemrograman Database Berbasis Web, Graha Ilmu, Yogyakarta.

Sebesta, R.W. [2002], Programming the World Wide Web, Addison Wesley.

Sutarman, S.Kom [2003]. Membangun Aplikasi Web dengan PHP dan MySQL, Graha Ilmu, Yogyakarta.

S1 Teknik Informatika - Unijoyo 25