Elemen
Form
Form Anda yang Pertama
Seperti orang bijak pernah berkata, “Setiap
perjalanan diawali dengan satu langkah kecil”. Untuk mengawali perjalanan ini,
Anda perlu fokus pada setiap form. Form ini hanya memuat satu bidang teks dan
sebuah tombol submit. Skript yang memproses hanya akan menampilkan nilai yang
dimasukkan pada bidang teks.
|
Contoh
|
Sebutkan
nama saya
|
1.
Ciptakanlah
form1.html dengan editor teks Anda.
2. Masukkan kode
berikut:
<html>
<head>
<title> Sebut Nama Saya
</title>
</head>
<body>
<form action="prosesform1.php"
method="post">
<table>
<tr>
<td> Nama </td>
<td> <input
type="text" name="nama" /> </td>
</tr> <tr>
<td colspan="2"
style="text-align: center;">
<input type="submit"
name="submit" value="Submit" /> </td>
</tr>
</table>
</form>
</body>
</html>
3. Ciptakanlah sebuah
file prosesform1.php, dan masukkan
kode berikut:
<html>
<head>
<title> Sebut Nama Saya
</title>
</head>
<body>
<?php
echo '<h1>
Hallo ' . $_POST['nama'] . '! </h1>';
?>
<pre>
<strong> DEBUG:
</strong>
<?php
print_r($_POST);
?>
</pre>
</body>
</html>
4.
Bukalah
form1.html dengan browser Anda.
5.
Ketikkan
nama Anda dalam kotak teks nama (seperti ditampilkan pada gambar berikut), dan
klik tombol Submit.
Elemen Form
Elemen HTML kedua yang dicakup di sini adalah
input. Elemen ini merupakan basis
bagi hampir semua form dan dapat dipakai dalam pelbagai cara untuk mengumpulkan
berbagai informasi. Pada kasus ini, Anda menggunakan dua tipe input: tipe text dan tipe submit.
Berikut merupakan tipe input text:
<input type=”text” name=”nama” />
Tipe input
text merupakan kotak teks satu-baris
standar. Sama seperti semua kontrol form, tipe ini memerlukan nama sehingga
skript pemroses dapat mengakses kontennya menggunakan sintaks berikut:
<?php
echo $_POST[‘nama’]; // akan
menampilkan apa yang diketikkan
?>
Dan ini merupakan tipe input submit:
<input type=”submit” name=”submit”
value=”Submit” />
Seperti yang diindikasikan oleh namanya,
elemen submit menampilkan sebuah
tombol yang menyebabkan browser untuk menyerahkan form ketika tombol tersebut
ditekan. Teks tombol ditetapkan melalui atribut value. Sama seperti untuk kontrol text input, kontrol form ini memerlukan sebuah nama untuk
pemrosesan.
Pemrosesan Form
Pada skript tersebut, Anda pasti
memperhatikan beberapa fungsi baru dan beberapa sintaks baru, dan Anda mungkin
tertarik untuk mengetahuinya.
Anda telah mengetahui perintah echo, jadi
Anda perlu pula mengetahui tentang $_POST[‘nama’].
Array global $_POST memuat semua data form yang diserahkan dengan metode POST. Indeks array dari bidang adalah
namanya. Sebentar lagi, Anda akan melihat bagaimana memeriksa isi dari array $_POST menggunakan fungsi print_r().
<?php
echo ‘<h1> Hallo ‘ . $_POST[‘nama’] . ‘!
</h1>’;?>
Pada contoh ini, $_POST[‘nama’] akan menampilkan apa yang Anda masukkan pada bidang
nama.
Anda mungkin bertanya-tanya apa yang
dilakukan oleh print_r($_POST).
Fungsi ini ‘menupahkan’ isi dari array global $_POST ke keluaran. Array $_POST,
sama seperti semua array, memiliki indeks yang bersifat case-sensitive.
Menyetir Masukan Pengguna
Form pada contoh ini dipakai untuk
mengarahkan pengguna untuk memilih nilai dari himpunan nilai yang Anda
sediakan. Pendefinisian himpunan nilai dilakukan melalui penggunaan
elemen-elemen HTML, seperti kotak list, tombol radio, dan kotak periksa.
|
Contoh
|
Membatasi
pilihan
|
1.
Ciptakanlah
sebuah file teks dengan nama form2.html, dan bukalah dalam editor teks Anda:
2.
Masukkan
kode berikut:
<html>
<head>
<title> Ucapan Selamat </title>
</head>
<body>
<form action="prosesform2.php" method="post">
<table>
<tr>
<td> Nama </td>
<td><input type="text" name="nama"
/></td>
</tr><tr>
<td> Selamat </td>
<td>
<select name="selamat">
<option value="Hello"> Hello </option>
<option value="Hola"> Hola </option>
<option value="Bonjour"> Bonjour </option>
</select>
</td>
</tr><tr>
<td></td>
<td>
<input type="checkbox"
name="debug" checked="checked"/>
Tampilkan Info Debug
</td>
</tr><tr>
<td colspan="2" style="text-align: center">
<input type="submit" name="submit"
value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
3.
Ciptakanlah
sebuah file prosesform2.php, dan
masukkan kode berikut:
<html>
<head>
<title> Ucapan Selamat </title>
</head>
<body >
<?php
echo '<h1>' .
$_POST['selamat'] . ' ' . $_POST['nama'] . '! </h1>';
if
(isset($_POST['debug'])) {
echo '<pre><strong> DEBUG:
</strong>' . "\n";
print_r($_POST);
echo '</pre>';
}
?>
</body>
</html>
4.
Simpan
file prosesform2.php.
5.
Jalankan
form2.html dari browser Anda untuk
menampilkan berikut:
6. Ketikkan nama Anda
dalam kotak teks nama (seperti ditampilkan pada gambar berikut), dan klik
tombol Submit.
Satu Form, Pemrosesan Jamak
|
Contoh
|
Tombol
radio dan kotak list baris-jamak
|
1.
Ciptakanlah
sebuah teks dengan nama form3.php,
dan buka dengan editor teks Anda. Kemudian ketikkan kode berikut:
<html>
<head>
<title> Tambah/Cari Entri
</title>
<style type="text/css">
<!--
td {vertical-align:
top;}
-->
</style>
</head>
<body>
<form action="prosesform3.php"
method="post">
<table>
<tr>
<td> Nama </td>
<td><input
type="text" name="nama" /></td>
</tr><tr>
<td> Tipe Film </td>
<td>
<select
name="tipe_film">
<option value="">
Pilih satu tipe film... </option>
<option
value="Aksi"> Aksi </option>
<option
value="Drama"> Drama </option>
<option
value="Komedi"> Komedi </option>
<option value="Sci-Fi">
Sci-Fi </option>
<option
value="Perang"> Perang </option>
<option
value="Lainnya"> Lainnya... </option>
</select>
</td>
</tr><tr>
<td> Tipe Item </td>
<td>
<input type="radio" name="tipe"
value="film" checked="checked" /> Film <br/>
<input type="radio"
name="tipe" value="aktor" /> Aktor <br/>
<input type="radio"
name="tipe" value="sutradara"/> Sutradara <br/>
</td>
</tr><tr>
<td></td>
<td><input
type="checkbox" name="debug" checked="checked"
/>
Tampilkan Info Debug
</td>
</tr><tr>
<td colspan="2"
style="text-align: center;">
<input type="submit"
name="submit" value="Cari" />
<input type="submit"
name="submit" value="Tambah" />
</td>
</tr>
</table>
</form>
</body>
</html>
2.
Ciptakanlah
file lain dengan nama prosesform3.php,
dan masukkan kode berikut:
<?php
if ($_POST['tipe'] ==
'film' && $_POST['tipe_film'] == '') {
header('Location: form3.php');
}
?>
<html>
<head>
<title> <?php echo
$_POST['submit'] . ' ' . $_POST['tipe'] . ': ' . $_POST['nama'];
?></title>
</head>
<body>
<?php
if
(isset($_POST['debug'])) {
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
$nama =
ucfirst($_POST['nama']);
if ($_POST['tipe'] ==
'film')
{
$foo = $_POST['tipe_film'] . ' ' .
$_POST['tipe'];
} else {
$foo = $_POST['tipe'];
}
echo '<p> Anda
sedang ' . $_POST['submit'];
echo
($_POST['submit'] == 'Cari') ? ' tentang ' : '';
echo 'seorang/sebuah
' . $foo . ' bernama ' . $nama . '</p>';
?>
</body>
</html>
3.
Bukalah
form3.php dengan browser Anda. Form
akan ditampilkan sebagai berikut:
4.
Ketikkan
Mark Whalberg pada bidang nama. Jika
Anda mengklik tombol Cari, maka akan
ditampilkan sebagai berikut:
Elemen INPUT Radio
Tombol radio merupakan sebuah elemen sangat
sederhana. Secara default, jika tidak ada tombol radio yang dispesifikasi
sebagai CHECKED, maka tidak ada pilihan yang dibuat. Ingat selalu bahwa
pemilihan nilai default merupakan bagian yang sangat penting dalam pembuatan
suatu form. Pengguna seringkali membiarkan nilai-nilai default dalam form, dan
pada kasus itu, jika Anda tidak menetapkan nilai default, Anda tidak akan
menerima informasi apapun untuk bidang tersebut ketika form disubmit.
<input type="radio" name="tipe"
value="film" checked="checked" /> Film <br/>
<input type="radio"
name="tipe" value="aktor" /> Aktor <br/>
<input type="radio"
name="tipe" value="sutradara"/> Sutradara <br/>
Tombol Submit Jamak
Sama seperti tombol radio, tombol submit
memiliki nama sama dengan nama yang berbeda. Dengan mengklik salah satu tombol
tersebut, browser akan menyerahkan form. Seperti yang dapat Anda lihat pada
blok DEBUG, tombol submit mengirimkan informasinya sendiri ke skript. Dengan
membaca nilai ini, skript membolehkan Anda untuk memiliki beberapa tombol
submit untuk form yang sama, dan melakukan aksi pemrosesan yang berbeda
tergantung dari tombol mana yang ditekan.
<input type="submit"
name="submit" value="Cari" />
<input type="submit"
name="submit" value="Tambah" />
Dasar Pengujian Masukan
Kode berikut memeriksa apakah tipe item
adalah film, dan jika ya, maka ia akan memeriksa apakah pengguna telah memilih
sebuah tipe film yang valid. Jika belum, maka pengguna akan diredireksi ke
halaman form.
Pengujian tersebut merupakan sebuah
perbandingan if yang menggunakan operator && (operator And Boolean). Jika tipe item adalah
film dan tipe film tidak ditetapkan, maka Anda kembali ke halaman form. Jika
sebaliknya, skript akan berlanjut memproses.
if ($_POST['tipe'] == 'film' &&
$_POST['tipe_film'] == '') {
header('Location: form3.php');
}
Fungsi header
dipakai untuk mengirim header HTTP. Ini berguna ketika berhubungan dengan
pengimplementasian pembatasan akses dan ketika peredireksian pengguna ke skript
lain. Pada kasus ini, pengguna diredireksi ke halaman form3.php.
Menghubungkan Form
|
Contoh
|
Menggabungkan
semuanya
|
1.
Ciptakanlah
sebuah file dengan nama form4.php,
dan masukkan kode berikut:
<html>
<head>
<title> Form Multiguna </title>
<style type="text/css">
<!--
td {vertical-align:
top;}
-->
</style>
</head>
<body>
<form action="form4a.php"
method="post">
<table>
<tr>
<td> Nama </td>
<td><input
type="text" name="nama" /></td>
</tr><tr>
<td> Tipe Item </td>
<td>
<input type="radio" name="tipe"
value="film" checked="checked" /> Film <br/>
<input type="radio"
name="tipe" value="aktor" /> Aktor <br/>
<input type="radio"
name="tipe" value="sutradara"/> Sutradara <br/>
</td>
</tr><tr>
<td> Tipe Film <br/> <small> (if applicable)
</small></td>
<td>
<select
name="tipe_film">
<option value="">
Pilih satu tipe film... </option>
<option value="Aksi">
Aksi </option>
<option
value="Drama"> Drama </option>
<option
value="Komedi"> Komedi </option>
<option
value="Sci-Fi"> Sci-Fi </option>
<option
value="Perang"> Perang </option>
<option
value="Lainnya"> Lainnya... </option>
</select>
</td>
</tr><tr>
<td></td>
<td><input
type="checkbox" name="debug" checked="checked"
/>
Tampilkan Info Debug
</td>
</tr><tr>
<td colspan="2"
style="text-align: center;">
<input type="submit"
name="submit" value="Cari" />
<input type="submit"
name="submit" value="Tambah" />
</td>
</tr>
</table>
</form>
</body>
</html>
2.
Ciptakanlah
sebuah file dengan nama form4a.php,
dan masukkan kode berikut:
<?php
// Memastikan pengguna memilih
sebuah tipe film ketika menambahkan suatu
// film. Jika tidak, maka kirim
kembali ke form pertama.
if ($_POST['submit'] == 'Tambah')
{
if ($_POST['tipe'] == 'film' &&
$_POST['tipe_film'] == '') {
header('Location: form4.php');
}
}
?>
<html>
<head>
<title> Form Multiguna </title>
<style type="text/css">
<!--
td{vertical-align: top;}
-->
</style>
</head>
<body>
<?php
// Menampilkan sebuah form untuk
mengumpulkan informasi jika
// pengguna menambahkan sesuatu
if ($_POST['submit'] == 'Tambah')
{
echo '<h1> Tambah ' .
ucfirst($_POST['tipe']) . ' </h1> ';
?>
<form action="form4b.php" method="post">
<input type="hidden"
name="tipe" value=" <?php echo $_POST['tipe']; ?>
"/>
<table>
<tr>
<td> Nama </td>
<td>
<?php echo $_POST['nama']; ?>
<input type="hidden" name="nama"
value=" <?php echo $_POST['nama']; ?> "/>
</td>
</tr>
<?php
if ($_POST['tipe'] == 'film') {
?>
<tr>
<td> Tipe Film </td>
<td>
<?php echo $_POST['tipe_film'];
?>
<input type="hidden" name="tipe_film" value="
<?php echo $_POST['tipe_film']; ?> "/>
</td>
</tr><tr>
<td> Tahun </td>
<td><input type="text"
name="tahun" /></td>
</tr><tr>
<td> Deskripsi Film </td>
<?php
} else {
echo ' <tr><td> Biografi
</td> ';
}
?>
<td><textarea
name="extra" rows="5" cols="60">
</textarea></td>
</tr><tr>
<td colspan="2"
style="text-align: center;">
<?php
if (isset($_POST['debug'])) {
echo ' <input type="hidden"
name="debug" value="on" />';
}
?>
<input type="submit"
name="submit" value="Add" />
</td>
</tr>
</table>
</form>
<?php
// Pengguna melakukan pencarian
terhadap sesuatu
} else if ($_POST['submit'] ==
'Cari') {
echo ' <h1> Cari ' . ucfirst($_POST['tipe']) . ' </h1> ';
echo ' <p> Cari ' . $_POST['nama'] . '... </p> ';
}
if (isset($_POST['debug'])) {
echo ' <pre> ';
print_r($_POST);
echo ' </pre> ';
}
?>
</body>
</html>
3.
Ciptakanlah
sebuah file lain dengan nama form4b.php,
dan masukkan kode berikut:
<html>
<head>
<title> Form Multiguna </title>
<style type="text/css" >
<!--
td {vertical-align:
top;}
-->
</style>
</head>
<body>
<?php
if ($_POST['tipe'] ==
'film') {
echo ' <h1> Baru: ' .
ucfirst($_POST['tipe_film']) . ': ';
} else {
echo ' <h1> Baru ' .
ucfirst($_POST['tipe']) . ': ';
}
echo $_POST['nama'] .
' </h1> ';
echo ' <table>
';
if ($_POST['tipe'] ==
'film') {
echo ' <tr> ';
echo ' <td> Tahun </td> ';
echo ' <td> ' . $_POST['tahun'] . '
</td> ';
echo ' </tr> <tr> ';
echo ' <td> Deskripsi Film
</td> ';
} else {
echo ' <tr><td> Biografi
</td> ';
}
echo ' <td> ' .
nl2br($_POST['extra']) . ' </td> ';
echo ' </tr> ';
echo ' </table>
';
if
(isset($_POST['debug'])) {
echo ' <pre> ';
print_r($_POST);
echo
' </pre> ';
}
?>
</body>
</html>
4.
Bukalah
form4.php pada browser Anda. Form
baru akan ditampilkan sebagai berikut:
5.
Masukkan
nama film yang Anda inginkan: Terminator 2 (misalnya).
6.
Klik
tombol Tambah, sehingga ditampilkan berikut:
7. Masukkan tanggal,
misalnya (2005).
8. Pilih Aksi pada
daftar tipe film.
9. Ketikkan sebuah
deskripsi singkat, pastikan Anda memasukkan beberapa baris dan menekan kunci
ENTER pada tiap baris.
10.Klik tombol Tambah,
dan lihat bagaimana informasi ditampilkan.
No comments:
Post a Comment