Bela Putra Perdana: Pertemuan 3 PHP

FORMULIR DALAM WEB

Form adalah salah satu penampilan interaktif yang memungkinkan pengguna berintegrasi dengan teks, grafik atau yang lain untuk ditampilkan dalam browser. Form dapat digunakan untuk mengumpulkan informasi dari user, menyediakan layanan kepada user dan sebagainya.

Biasanya penggunaan form digunakan secara bersama-sama dengan CGI-script (suatu program yang berjalan di web server dan berfungsi untuk melayanikomunikasi dua arah antara web server dan web browser), misalnya : Active Server Pages, PHP ataupun bahasa pemrograman server side lainnya.

Kegunaan form antara lain :

1. Memperoleh data user, baik nama, alamat atau data lainnya untuk mendaftar pada service yang digunakan

2. Memperoleh informasi pembelian secara online

3. Memperoleh feedback dari user berkaitan dengan website

Sebuah form dibentuk dengan menggunakan pasangan tag <FORM> ... </FORM>. Dalam satu halaman web dapat terdiri dari beberapa form tetapi harus diperhatikan untuk menutup tag FORM agar tidak terjadi pencampuran form yang satu dengan yang lain.

Dalam membuat form ada 3 tag yang harus diperhatikan yaitu :

§ <INPUT>

digunakan untuk membuat kontrol kotak teks yang terdiri dari satu baris check box, radio button, tombol submit dan reset, teks tersembunyi dan password

§ <SELECT>

digunakan untuk membuat menu-menu pilihan dalam suatu daftar pop-up

§ <TEXTAREA>

digunakan untuk memberikan kesempatan pada pembaca untuk memasukkan informasi teks pada lebih dari satu baris

MACAM-MACAM KONTROL

Suatu form dapat mempunyai lebih dari satu kontrol yang merupakan elemen user interface yang dipakai pembaca untuk berinteraksi dengan halaman web anda. Jenis-jenis kontrol form :

§ Teks baris tunggal, yang digunakanuntuk memasukkan data angka dan teks

§ Teks banyak baris, yang digunakan prmbaca untuk memasukkan beberapa baris teks yang dapat digulung naik atau turun

§ Teks password, untuk memasukkan password yang ditampilkan dengan tanda bintang

§ Teks tersembunyi, untuk menyembunyikan teks yang dketikkan dari pandangan pembaca

§ Tombol Submit dan Reset, untuk mengirimkan data yang dimasukkan pembaca ke web atau membatalkannya

§ Checkbox, memungkinkan pembaca untuk menggunakan kotak cek

§ Radio button, memungkinkan pembaca untuk memilih salah satu pilihan dari sekelompok pilihan yang tersedia

§ Daftar menu, memungkinkan pembaca memilih salah satu atau lebih pilihan dari daftar menu

TAG INPUT

Tag ini digunakan untuk membuat kontrol kotak teks yang terdiri dari satu baris check box, radio button, tombol submit dan reset, teks tersembunyi serta password.

Atribut INPUT

NAMA	FUNGSI
CHECKED	Digunakan pada CHECKBOX dan RADIO yang menyatakan suatu item dipilih atau tidak
MAXLENGTH	Menyatakan jumlah maksimal karakter yang dapat dimasukkan
NAME	Memberi nama dari kontrol form
SIZE	Menyatakan ukuran dari kontrol
TYPE	Menyatakan jenis kontrol yang digunakan
VALUE	Menyatakan nilai default untuk suatu nilai kontrol

Kontrol TEXT

Kontrol dalam bentuk teks yang memungkinkan pembaca memasukkan data teks pendek hanya satu baris di dalam form.

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan INPUT </TITLE>

</HEAD>

<BODY>

<H3>Data Pribadi Mahasiswa</H3>

<FORM>

Nomor Induk Mahasiswa :

Nama Mahasiswa :

</FORM>

</BODY>

</HTML>

Hasil :

Kontrol PASSWORD

Digunakan untuk memberikan keamanan dalam pemasukan data dengan menggantikan karakter-karakter yang dimasukkan dengan tanda *.

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan INPUT </TITLE>

</HEAD>

<BODY>

<H3>Silahkan Anda Login </H3>

<FORM>

<PRE>

Nama User : <INPUT TYPE="text" NAME="NAMA" SIZE="30" MAXLENGTH="25">

Password : <INPUT TYPE="password" NAME="PIN" SIZE="8" MAXLENGTH="8">

</PRE>

</FORM>

</BODY>

</HTML>

Tag <PRE> … </PRE> digunakan agar teks yang ditampilkan pada browser sesuai dengan tampilan teks pada program yang dibuat.

Hasil :

Kontrol CHECKBOX

Checkbox adalah kotak kecil yang menampilkan tanda √ jika kotak tersebut di klik. Jika kotak tersebut diklik sekali lagi maka tanda cek akan hilang yang berarti tidak jadi memilihnya. Jika atribut CHECKED ditambahkan maka itemnya akan dipilih secara default.

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan CHECKBOX </TITLE>

</HEAD>

<BODY>

<FORM>

Pilihan Anda : <br>

</FORM>

</BODY>

</HTML>

Hasil :

Kontrol Radio Button

Radio button adalah kontrol yang hanya dapat mempunyai satu nilai.

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan RADIO BUTTON </TITLE>

</HEAD>

<BODY>

<FORM>

Jenis Kelamin : <br>

<INPUT TYPE="radio" NAME="JK" VALUE="Wanita"> Wanita<br>

</FORM>

</BODY>

</HTML>

Hasil :

TAG TEXTAREA

Secara default tag ini ditampilkan dengan panjang 4 baris dan lebar 40 karakter dalam keadaan kosong. Tag ini cocok digunakan untuk field komentar karena mempunyai ruang yang luas untuk memberi komentar.

Atribut TEXTAREA

NAMA	FUNGSI
NAME	Memberi nama pada textarea
ROWS	Mengatur panjang baris/tinggi textarea
COLS	Mengatur lebar kolom textarea

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan TEXTAREA </TITLE>

</HEAD>

<BODY>

<H3>Masukkan Komentar Anda : </H3>

<FORM>

Ketik komentar Anda disini...!

</TEXTAREA>

</FORM>

</BODY>

</HTML>

Hasil :

TAG SELECT

Tag ini digunakan untuk membuat menu-menu pilihan dalam suatu daftar pop-up.

Atribut SELECT

NAMA	FUNGSI
NAME	Mendefinisikan nama untuk daftar pilihan
SIZE	Menyatakan jumlah baris yang muncul pada form
MULTIPLE	Memungkinkan menu bertindak seperti checkbox, sehingga pembaca dapat memilih lebih dari satu pilihan
OPTION	VALUE : menyatakan nilai yang dikembalikan jika suatu item dipilih SELECTED : Menyatakan pilihan pertama / default

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan SELECT </TITLE>

</HEAD>

<BODY>

<H3>Masukkan Pilihan Anda : </H3>

<FORM>

<OPTION SELECTED VALUE="Teknik Informatika">Teknik Informatika

<OPTION VALUE="Sistem Informasi">Sistem Informasi

<OPTION VALUE="Teknik Komputer">Teknik Komputer

</SELECT>

</FORM>

</BODY>

</HTML>

Hasil :

(tanpa MULTIPLE) (dengan MULTIPLE)

Contoh lainnya :

<HTML>

<HEAD>

<TITLE>Penggunaan SELECT </TITLE>

</HEAD>

<BODY>

<H3>Sistem Operasi Anda :</H3>

<FORM>

<OPTION value="1">Windows 98 </OPTION>

<OPTION value="2">Windows XP </OPTION>

<OPTION value="3">Windows 2000 </OPTION>

<OPTION value="4">LINUX Red Hat </OPTION>

<OPTION value="5">LINUX Mandrake</OPTION>

<OPTION value="5">LINUX Trustix</OPTION>

</SELECT>

</FORM>

</BODY>

</HTML>

Hasil :

Elemen form mempunyai dua buah atribut yaitu :

§ ACTION

Adalah URL dari script yang dipanggil oleh form tersebut

§ METHOD

Adalah cara mengirimkan data yang dimasukkan pembaca ke web server. Form ini mempunyai dua metode yaitu :

ü GET, yang mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL.

ü POST, yang mengirim seluruh data dari form yang terpisah dari URL.

Tombol Submit dan Reset

Tombol SUBMIT digunakan jika pembaca ingin mengirimkan pemasukan data. Tombol RESET digunakan untuk menghapus pemasukan data. Dengan demikian data-data yang sudah dimasukkan akan dibersihkan semua. Anda dapat menggunakan atribut VALUE untuk memberikan default teks.

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan SUBMIT dan RESET </TITLE>

</HEAD>

<BODY>

<H3>Data Pribadi Mahasiswa</H3>

Nomor Induk Mahasiswa :

Nama Mahasiswa :

Password :

</BODY>

</HTML>

Setelah program dibuat Anda dapat membuat file DATA.PHP untuk menampilkan hasil yang sudah dikirim dari file program di atas.

Contoh :

<HTML>

<HEAD>

<TITLE>Penggunaan SUBMIT dan RESET </TITLE>

</HEAD>

<BODY>

<H3>Data Login User </H3>

<?php

printf('Nomor Induk Mahasiswa : %s', $NIM);

printf('<BR>Nama Mahasiswa : %s', $NAMA);

printf('<BR>Password : %s', $PIN);

</BODY>

</HTML>

Hasil :

LATIHAN :

1. Buat program PHP untuk menampilkan keluaran sebagai berikut :

yang fudul

Rabu, 09 Mei 2012

Pertemuan 3 PHP

Tidak ada komentar:

Posting Komentar

Mengenai Saya

Twitter

Arsip Blog