Jobsheet Pemrograman Web 2

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

| 1

#JOBSHEET 2

HTML: Frame, Form

I. TUJUAN

1. Menguasai sintaks dasar pembuatan web dengan HTML.

2. Memahami dan mampu membuat tabel dalam dokumen HTML

3. Memahami dan mengaplikasikan pembuatan frame dalam dokumen HTML

4. Menguasai dasar pembuatan form dalam dokumen HTML sebelum mampu

memanfaatkan database system

II. DASAR TEORI

1. Membuat Frame

Frame digunakan untuk membagi halaman browser menjadi beberapa bagian, dengan

tampilan yang dapat diatur tersendiri. Sebuah halaman web dengan frame merupakan

halaman web yang khusus mendefinisikan ukuran dan lokasi tiap kandungan frame. Halaman

dengan frame paling sederhana adalah dengan dua frame, yaitu satu untuk menampilkan

daftar hyperlink (atau sering disebut dengan navigasi) dan yang lain untuk menampilkan

halaman yang ditunjukkan oleh daftar hyperlink tersebut. Isi dari frame tidak lain adalah

suatu halaman yang lain.

Tag digunakan untuk membagi halaman website menjadi beberapa bagian

frame

Tag digunakan untuk mendefinisikan sebuah frame dalam sebuah halaman web.

Setiap frame memiliki tinggi (rows) dan lebar (cols)

Beberapa atribut dalam frame

NAME : Menentukan nama dari objek frame, Nama ini dapat di gunakan sebagai tujuan

sebuah link

ROWS : Membuat frame secara mendatar (baris) sekaligus mendefinisikan lebar masing-

masing

COLS : Membuat frame secara vertikal (kolom) sekaligus mendefinisikan lebar masing-

masing

BORDERCOLOR : Mendefinisikan warna bingkai frame

BORDER : Menentukan ukuran bingkai frame

SRC : Menentukan nama file HTML yang digunakan sebagai isi frame

SCROLLING : Menentukan apakah dapat memiliki scroll bar, nilainya adalah yes, no, auto


| 2

NORESIZE : Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya

MARGINHEIGHT : Menentukan batas atas dan bawah antara dokumen dengan bingkai

dalam pixel

MARGINWIDTH : Menentukan batas kiri dan kanan antara dokumen dengan bingkai

dalam pixel

Gambar 3.2. Penggunaan Tag Frame dengan Beberapa Atribut dan Nilai

Yang perlu diingat, apabila hendak membuat frame dengan cara ini minimal diperlukan 2 buah

file *.html. Contoh di atas memerlukan 4 file *.html plus sebuah file *.html khusus untuk

membagi frame tsb. Contoh frame di atas sudah merupakan frame campuran antara frame

baris dan kolom

Contoh Penggunaaan Frame

i) Hasil Pencarian

Untuk mempermudah dan meringankan beban kerja web, maka pada beberapa search

engine menggunakan metode frame untuk menampilkan hasil pencariannya. Sehingga,

form untuk pencarian masih tetap terus muncul, dengan hasil yang akan ditampilkan pada

frame yang lain.Metode ini juga bisa digunakan bila kita ingin menggunakan search engine

yang sudah ada (misalnya Yahoo, Google, HotBot, dan lain-lain) pada halaman kita.

Frame kita bagi dua, atas dan bawah. Bagian atas kita beri form tempat mengisi kata-kata

yang akan dicari, dan bagian bawah untuk hasilnya.


| 3

ii) Banner, menu dan navigasi

Pada beberapa situs, frame digunakan untuk memunculkan banner atau menu pada setiap

halaman di web tersebut. Contohnya adalah beberapa web freemail, seperti Yahoo!Mail.

Pada Yahoo!Mail, menu di frame kiri akan muncul terus, untuk memberikan bantuan link

ke berbagai menu yang ada di web tersebut.

iii) Cloacking page

Cloacking page berarti menyembunyikan halaman. Dengan memanfaatkan frame yang

didefinisikan mengisi sehalaman penuh, maka setiap kali mengunjungi link yang ada pada

halaman tersebut, maka alamat yang ditunjukkan oleh web browser, seperti Internet

Explorer dan Netscape, akan tetap menunjukkan alamat halaman yang menggunakan

frame tersebut.

2. Membuat Form/ input

Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif, karena akan

mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat

buku tamu, formulir pemesanan, survey, meminta komentar, halaman login, halaman

registrasi/ pendaftaran dan lain sebagianya.

Adapun cara untuk membuat form adalah dengan menggunakan elemen FORM kemudian

ditambah dengan komponen-komponen pembentuk form seperti input, checkbox, option dan

sebagainya.

Sebelumnya perlu diketahui bahwa untuk membuat sebuah form yang dapat dikirim dan

diproses di server akan melibatkan PHP dan SQL. Task ini hanya mempelajari dasarnya saja

yaitu bagaimana cara menampilkan sebuah form yang baik.

Sebuah form di tuliskan dalam html dengan tag . Form banyak sekali menggunakan

fungsi input, tag input sendiri di tulis dengan . Untuk diperhatikan: form tidak dapat

berupa nested (bersarang).

Perintah untuk membuat form yaitu :

Method digunakan untuk menentukan bagaimana form diberlakukan, sedang action diisi

dengan URL file yang akan melakukan pemrosesan form selanjutnya. URL adalah lokasi


| 4

dokumen yang akan melakukan proses terhadap input dari form. . Input adalah sesuatu yang

dimasukkan oleh pembaca halaman web misalnya teks. Input dalam form dimasukkan oleh

user dan terdiri dari beberapa tipe. Input yang dimasukkan user ini selanjutnya akan diproses

di lokasi file yang telah dimasukkan dalam atribut action pada tag FORM. Meskipun tag INPUT

ini terdiri dari berbagai macam tipe, namun secara default type dari tag INPUT ini adalah

"text". Suatu form bisa mempunyai beberapa jenis input yang berbeda.

Berikut ini adalah atribut-atribut yang berlaku dalam tag

type = [ text | password | checkbox | radio | submit | reset | file | hidden | image | button ]

o Text - input data berupa text inputan biasa berupa huruf, angka, simbol, dan lain-lain

(seluruh karakter yang berada di keyboard)

Nama : Email :

o Password - input data berupa kata sandi. ketika diketikkan yang tampil adalah berupa

kode *** atau tergantung pada settingan default browser

Nama : Email :

o Checkbox - input data berbentuk pilihan yang dapat dipilih lebih dari satu

Warna fovorit anda ? Merah Biru Hitam

o Radio - input data berupa pilihan (option) yang hanya bisa memilih satu pilihan


| 5

Laki-laki Perempuan

o Submit - input form bebrntuk tombol yang berfungsi untuk mengirim seluruh input form

untuk kemudian di proses oleh file action. Input ini juka tidak diberi value atau nilai

(caption) akan menjadi Submit Query

Submit

Nama :

o Reset - input form berupa tombol juga yang fungsinya untuk mengembalikan nilai input

suatu form ke nilai default. Input ini memiliki value Reset jika Anda tidak

mendefinisikannya

Reset

o File - input berupa file yang dipilih dari drive komputer. Kegunaannya adalah untuk

mengupload file ke server.

o Hidden - input data yang tersembunyi dan tidak tampil atau terlihat di browser

o Image - fungsinya sama seperti submit namun tombol ini berupa objek image yang harus

didefinisikan dengan tag src="lokasi_image"

o Button - input yang hanya berupa tombol. Ketika di klik tidak akan ada aksi apapun.

Berbeda dengan submit dan reset, tipe ini tidak akan memiliki caption jika Anda tidak

mendefinisikannya


| 6

Sebagai tambahan :

Textarea- textarea biasa digunakan untuk memasukan inputan yang membutuhkani kolom

yang lebar. Seperti pada kolom komentar, alamat, dll. berbeda dengan tipe inputan lainya,

text area mempunyai tag tesendiri dengan menuliskan secara langsung dengan tag

tetapi tetap dalam tag

Alamat

Fieldset-kita dapat mempercantik form kita dengan berbagai cara, seperti menambahkan tabel

atau yang lainya. saya akan memberi tahu cara menggukan fieldset. Hasilnya sepertikita

memberi bingkai pada sebuah form.

Nama Anda

Nama Depan

Nama Belakang

>

Select- Input ini berupa dropdown dimana user cukup mengklik salah satu pilihan pada list

yang tersedia. Atribut yang digunakannya sama seperti input-input sebelumnya, namun

khusus untuk size, berfungsi untuk menentukan banyaknya baris yang ditampilkan dalam

dropdown. Secara default input select hanya dapat memilih satu pilihan saja, namun bisa juga

memilih lebih dari satu hanya dengan menambahkan atribut multiple. Bila multiple dipih

dalam tag select, untuk memilih lebih dari satu user harus memilih option sambil menekan

tombol CTRL pada keyboard disarankan untuk memberi size lebih dari 1, misalnya 2 atau 3.

Untuk mendefinisikan pilihan-pilihan yang tersedia dalam input SELECT ini diperlukan tag

...

Option 1

Option 2

Option 3

Option 4


| 7

Option 5

Tabel berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form.

Elemen Atribut Fungsi

INPUT

text

********

TYPE Bentuk input. Diisi dengan TEXT atau PASSWORD

NAME Nama komponen input

VALUE Isi/nilai dari komponen input

SIZE Panjang komponen input

MAXLENGTH Batasan panjang penulisan isi input

INPUT

TYPE Bentuk input. Diisi dengan RADIO atau CHECKBOX

NAME Nama komponen radio atau checkbox

VALUE Isi/nilai dari komponen radio atau checkbox

CHEKED Batasan panjang penulisan isi radio atau checkbox

SELECT

NAME Nama komponen select /pull down list

OPTION Pilihan dalam list

VALUE Isi/nilai dari list

SIZE Ukuran list

SELECTED Option yang dipilih

TEXTAREA

NAME Nama komponen textarea

ROWS Jumlah baris pada textarea

COLS Jumlah kolom pada textarea

INPUT

Submit Reset

TYPE Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET

VALUE Judul pada tombol

III. ALAT

1. Perangkat komputer

2. Sistem operasi

3. Editor teks sederhana (Notepad)

4. Web browser

IV. LANGKAH KERJA

1. Menyiapkan alat praktek.

2. Selalu memperhatikan keselamatan kerja.

3. Jalankan program yang dibutuhkan.

4. Mengorganisasikan dengan baik folder pribadi untuk masing-masing praktikum dengan

menyimpan seluruh hasil latihan dan tugas dalam folder MODUL3, dikumpulkan dalam

folder utama Praktek Teknologi Web.


| 8

V. TUGAS

1. Buat dokumen html yang menampilkan anggota keluarga anda beserta data diri dan foto

silakan berkreasi dengan tabel ataupun frame dan memanfaatkan pengetahuan yang

telah anda dapat dari praktek sebelumnya, beri nama Jobsheet2a.html pada folder

JOBSHEET 2

2. Buat form lamaran kerja pada suatu perusahaan yang harus diisi oleh pelamarnya,

diskusikan data apa saja dan bagaimana bentuknya asisten praktek, simpan dengan nama

Jobsheet2b.html

.

Jobsheet Pemrograman Web 2

Documents

Transcript of Jobsheet Pemrograman Web 2