HTML: Frame, Form #JOBSHEET 2 I. TUJUAN DASAR TEORI

JOBSHEET PRAKTEK PEMROGRAMAN WEB 2012/2013

#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 masingmasing COLS : Membuat frame secara vertikal (kolom) sekaligus mendefinisikan lebar masingmasing 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 |1


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. |2


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 |3


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

|4


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

_cke_saved_name="nama" _cke_saved_name="nama" _cke_saved_name="nama"

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

|5


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 <form> Alamat<br /> <form> <textarea name=text> 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

<select

size="1" 2 3 4

|6


Tabel berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form. Elemen INPUT text ********

INPUT

SELECT

TEXTAREA

INPUT Submit

Atribut TYPE NAME VALUE SIZE MAXLENGTH TYPE NAME VALUE CHEKED NAME OPTION VALUE SIZE SELECTED NAME ROWS

Fungsi Bentuk input. Diisi dengan TEXT atau PASSWORD Nama komponen input Isi/nilai dari komponen input Panjang komponen input Batasan panjang penulisan isi input Bentuk input. Diisi dengan RADIO atau CHECKBOX Nama komponen radio atau checkbox Isi/nilai dari komponen radio atau checkbox Batasan panjang penulisan isi radio atau checkbox Nama komponen select /pull down list Pilihan dalam list Isi/nilai dari list Ukuran list Option yang dipilih Nama komponen textarea Jumlah baris pada textarea

COLS

Jumlah kolom pada textarea

TYPE Reset

VALUE

Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET 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’.

|7


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

.

|8

HTML: Frame, Form #JOBSHEET 2 I. TUJUAN DASAR TEORI

Recommend Documents