Pertemuan 06

PEMROGRAMAN WEB I

Oleh:

I Wayan Simpen

By I Wayan Simpen

Agenda

• Form

By I Wayan Simpen

FORM

• Form digunakan untuk mendapatkan masukkan dari pengguna

• Form tidak boleh berbentuk nested

• Sintak:

<FORM [ACTION=“_url_” METHOD=“get|post”NAME=“Nama_Form”]></FORM>

By I Wayan Simpen

• ACTION = Tempat menspesifikasikan URL yang akan digunakan sbg pemroses field input form.

• URL = Lokasi dokumen yang akan melakukan proses terhadap input dari form.

• METHOD digunakan untuk menyatakan bagaimana data yang berasal dari FORM dikirim kepada program CGI

By I Wayan Simpen

Jenis Masukkan dari FORM

• TextText

• RadioRadio

• Check boxCheck box

• ListList

• ButtomButtom

• Text Area Text Area

By I Wayan Simpen

Tag Text

• Bentuk:

<INPUT TYPE=“TEXT” NAME=“variabel” SIZE=nMAXLENGTH=n>

Nama : <INPUT NAME="NAMA" SIZE="23"> E-mail : <INPUT NAME="EMAIL" SIZE="30">

Contoh:

Hasil:

By I Wayan Simpen

Tag Radio

• Bentuk:<INPUT TYPE=“radio” NAME=“variabel” VALUE=“nilai" checked>

Keterangan: NAME = untuk menentukan variabel yang dipakai

menerima data VALUE = untuk memberi nilai pada variabel

yang disebutkan pada NAME CHECKED = pilihan diberikan secara langsung

By I Wayan Simpen

Penilaian Anda Tentang <I>HomePage</I> ini : <INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Baik" checked>Baik - <INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Cukup">Cukup -<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Kurang">Kurang

Hasil:

Contoh:

By I Wayan Simpen

Tag Checkbox

<INPUT NAME=“variabel" TYPE="checkbox" VALUE=“nilai" checked>


menerima data VALUE = untuk memberi nilai pada variabel

yang disebutkan pada NAME CHECKED = pilihan diberikan secara langsung

• Bentuk:

By I Wayan Simpen

Contoh:

Yang Menarik Perhatian Anda dalam Situs Ini :<BR><INPUT NAME="INTEREST" TYPE="checkbox" VALUE="EmailGratis" checked> E-mail Gratis<INPUT NAME="INTEREST" TYPE="checkbox" VALUE="WebSpaceGratis"> Web Space gratis<INPUT NAME="INTEREST" TYPE="checkbox" VALUE="ImageEditorGratis"> Image Editor Gratis

Hasil:

By I Wayan Simpen

Tag Select

<SELECT NAME=“variabel"> <OPTION SELECTED value=“nilai”>Text1</option> <OPTION>Text2 … …</SELECT>


menerima data OPTION = Menentukan teks yang akan

ditampilkan pada daftar (list) SELECTED = Nilai default

• Bentuk:

By I Wayan Simpen

Contoh:<SELECT NAME="ASAL" SIZE=1> <OPTION SELECTED>Makassar <OPTION>Semarang <OPTION>Yogyakarta <OPTION>Surabaya <OPTION>MEDAN <OPTION>Kalimantan <OPTION>Sulawesi</SELECT>

Hasil:

By I Wayan Simpen

Tag Textarea

<TEXTAREA NAME=“Variabel" ROWS=n COLS=m></TEXTAREA>


menerima data ROWS = Menentukan maksimum jumlah baris COLS = menentukan maksimum jumlah kolom

• Bentuk:

By I Wayan Simpen

Contoh:

KOMENTAR ANDA TENTANG HOME PAGE INI :<BR><TEXTAREA NAME="Komentar" ROWS=5 COLS="50"></TEXTAREA>

Hasil:

By I Wayan Simpen

Tag Buttom

<INPUT TYPE="submit | reset | button " VALUE=“Teks">

Keterangan: TYPE = untuk menentukan TYPE tombol VALUE= Menentukan Teks dari tombol

• Bentuk:

By I Wayan Simpen

Contoh:

<INPUT TYPE="submit" VALUE="KIRIM DATA"> <INPUT TYPE="reset" VALUE=" RESET ">

Hasil:

By I Wayan Simpen

Contoh Lengkap

<HTML><HEAD>

<TITLE>SURVEI PENGUNJUNG</TITLE></HEAD>

<BODY BGCOLOR="#c0c0c0"><CENTER><H2><U>DATA PENGUNJUNG</U></H1><FORM METHOD="post" ACTION="[email protected]"><B>Nama : <INPUT NAME="NAMA" SIZE="23"> E-mail : <INPUT NAME="EMAIL" SIZE="30">

By I Wayan Simpen

Penilaian Anda Tentang <I>HomePage</I> ini : <INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Baik" checked>Baik - <INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Cukup">Cukup -<INPUT NAME="PENILAIAN" TYPE="radio" VALUE="Kurang">Kurang

By I Wayan Simpen

Yang Menarik Perhatian Anda dalam Situs Ini :<BR><INPUT NAME="INTEREST" TYPE="checkbox" VALUE="EmailGratis" checked> E-mail Gratis<INPUT NAME="INTEREST" TYPE="checkbox" VALUE="WebSpaceGratis"> Web Space gratis<INPUT NAME="INTEREST" TYPE="checkbox" VALUE="ImageEditorGratis"> Image Editor Gratis<P>

By I Wayan Simpen

DARI MANA ANDA BERASAL :<SELECT NAME="ASAL" SIZE=1> <OPTION SELECTED>Makassar <OPTION>Semarang <OPTION>Yogyakarta <OPTION>Surabaya <OPTION>MEDAN <OPTION>Kalimantan <OPTION>Sulawesi

By I Wayan Simpen

</SELECT><P>KOMENTAR ANDA TENTANG HOME PAGE INI :<BR><TEXTAREA NAME="Komentar" ROWS=5 COLS=“50"></TEXTAREA>

<P><INPUT TYPE="submit" VALUE="KIRIM DATA"> <INPUT TYPE="reset" VALUE=" RESET "></FORM></body></html>

By I Wayan Simpen

Hasil

Pertemuan 06

Documents

Transcript of Pertemuan 06