Popular Post
Tuesday, 5 January 2016
 |
| Tampilan Input |
Pada kesempatan kali ini, saya akan membahas tentang langkah-langkah membuat Form buku tamu yang sederhana. Kenapa saya katakan sederhana ? karena Form ini hanya terdiri dari 3 Object saja yaitu Textfield, Textarea dan Objek Button.
Bisa Anda lihat pada gambar di samping pada bagian Email Textfieldnya berbeda, karena di situ ada proses Validasi Email. Secara umumnya format penulisan email adalah USER@HOST contoh arian@yahoo.com. Jika Anda menuliskan alamat email tidak sesuai format tersebut maka akan ada pesan kesalahan di samping Textfield tersebut. Nah ini dia yang dimaksud dengan Validasi Email. Untuk lebih detail apa itu Spry saya sudah membahasnya pada postingan sebelumnya mengenai Membuat Validasi Text Field dengan Objek Spry.
Jadi cara kerja Spry Textfield seperti ini:
- Input alamt email Anda
- Terjadi pengecekan, apakah alamat email yang Anda masukkan sesuai format.
- Jika tidak sesuai format maka akan muncul pesan kesalahan.
- Input nama
- Input email
- Input pesan
- Klik button Simpan maka data akan tersimpan di Database dan Batal untuk membatalkan pengisian.
 |
| Tampilan Output |
- Buat terlebih Databasesnya.
Field | Type | Length/Values | Keterangan |
IdTamu | INT | 3 | AI dan PK |
NamaTamu | VARCHAR | 25 | |
EmailTamu | VARCHAR | 30 | |
Pesan | Text |
- Kemudian buat file Input.php. Untuk kodingnya sebagai berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body background="">
<form action="output.php" method="post">
<h1 align="center"> Buku Tamu </h1>
<table align="center" width="300" border="0" cellspacing="1" cellpadding="2">
<tr>
<td>Nama</td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td>Email</td>
<td><span id="sprytextfield1">
<input type="text" name="textfield2" id="textfield2" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></td>
</tr>
<tr>
<td>Pesan</td>
<td><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Simpan" />
<input type="reset" name="button2" id="button2" value="Batal" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "email", {validateOn:["blur"]});
</script>
</body>
</html>Untuk file lengkapnya silakan anda
Jasa Pembuatan Website Murah, dengan tampilan elegan, ArianCyber
Sekian pembahasan atau postingan saya mengenai Membuat Buku Tamu Sederhana dengan Textfield Spry . Apabilla ada kesalahan dalam pembahasan atau postingan saya mohon untuk dibenarkan karena saya masih dalam tahap belajar bukan Expert. Apabila ada Saran atau kritik silakan anda tulis di kotak komentar yang sudah di sediakan atau bisa kontak langsung ke saya. Semoga bermanfaat.
Apabila ada dari anda ingin memposting halaman ini harap cantumkan sumbernya dan dengan bahasa anda sendiri, jadilah blogger yang baik dan mempunyai Etika dalam dunia maya.
//.D
Subscribe to:
Post Comments
(Atom)
Colleger
This Yours
0 comments:
Post a Comment