Form Registrasi dengan Validasi AJAX dan PHP

Posted by Giman on

Saturday, August 29, 2015

Anda mungkin sering jengkel dengan form yang telah Anda buat. Berharap form input email hanya diisi dengan email, tapi ternyata orang yang iseng memasukkan data bukan email, jengkel bukan? Belum lagi ketika pengunjung tidak mengisi data dan yang muncul hanya pesan error dari SQL. Panjang password dan username yang harusnya 6 karakter tapi ternyata banyak user yang memasukkan 4 karakter.

Lalu bagaimana memberikan filter pada form yang Anda buat sehingga data yang diinput mendekati akurat? Note: Tutorial ini ditujukan bagi pengguna CS4 ke atas.

Tutorial ini akan mengkombinasikan fungsi Spry (AJAX) yang dimiliki oleh Dreamweaver dan script PHP untuk memfilter data yang diinput oleh user. Dari tutorial ini Anda diharapkan dapat:

1. Membuat form registrasi dengan filter AJAX/JavaScript
2. Mengaktifkan form Insert Record
3. Memfilter data sebelum masuk ke database

Sebelum masuk ke tutorial ini, pastikan Anda telah mempelajari kedua tutorial ini:

1. Membuat Site Definition di Dreamweaver CS5, dan
2. Membuat koneksi database PHP MySQL dengan Dreamweaver CS5

Kebutuhan database MySQL

Dalam contoh ini, Anda akan membuat tabel users dengan kolom-kolom berikut ini:

• id, merupakan primary key
• nama, field untuk menyimpan data nama
• email, field untuk menyimpan data email
• username, field untuk menyimpan data email. Diharapkan panjang username minimal 6 karakter.
• password, field untuk menyimpan data password. Diharapkan panjang password minimal 6 karakter dan enkripsi SHA1.
• tanggal, untuk menyimpan tanggal update data

Berikut ini adalah SQL dari tabel users.

CREATE TABLE IF NOT EXISTS `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `nama` varchar(64) NOT NULL,
 `email` varchar(64) NOT NULL,
 `username` varchar(64) NOT NULL,
 `password` varchar(64) NOT NULL,
 `tanggal` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Struktur File dan Form registrasi

Tutorial ini menggunakan file yang disimpan dengan nama validasi_data.php. Sedangkan file style.css disimpan dalam folder css. Berikut struktur folder dan file tutorial kali ini:

• Connections, folder untuk menyimpan file koneksi database: koneksi.php.
• css, folder untuk menyimpan file style.css
• validasi_data.php adalah file yang akan digunakan untuk latihan.

Java Web Media: Web Design Course Depok

Koneksi database: koneksi.php

File ini berfungsi untuk mengkoneksikan database:

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_koneksi = "localhost";
$database_koneksi = "tutorial_blog";
$username_koneksi = "root";
$password_koneksi = "";
$koneksi = mysql_pconnect($hostname_koneksi, $username_koneksi, $password_koneksi) or trigger_error(mysql_error(),E_USER_ERROR);
?>

File style.css untuk mengatur tampilan halaman web

Berikut adalah file tersebut:

body {
 background-color: #063;
 margin: 0px;
 padding: 0px;
}
form {
 background-color: #E7E7E7;
 padding: 20px;
 border: thin solid #CECECE;
 border-radius: 5px;
}
label {
 font-size: 14px;
 font-weight: bold;
 text-transform: capitalize;
 display: block;
}
input {
 padding: 5px 10px;
}
h1 {
 padding-bottom: 10px;
 border-bottom: solid thin #D4D4D4;
 font-size: 18px;
}
a, a:visited {
 text-decoration: none;
}
a:hover {
 color: #900;
}
#wrapper {
 font-family: Tahoma, Geneva, sans-serif;
 background-color: #FFF;
 margin: auto;
 padding: 20px 30px;
 height: auto;
 width: 960px;
 border-right-width: 5px;
 border-right-style: solid;
 border-right-color: #CCC;
 border-bottom-width: 5px;
 border-left-width: 5px;
 border-bottom-style: solid;
 border-left-style: solid;
 border-bottom-color: #CCC;
 border-left-color: #CCC;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
}
img {
 max-width: 900px;
 padding: 10px;
 border: solid thin #F9F;
 background-color: #FFC;
 height: auto;
}
.warning {
 background-color: #FCF;
 color: #900;
 padding: 5px 10px;
 border: solid thin #900;
 border-radius: 5px;
}

File latihan validasi_data.php

File ini adalah file utama yang akan dikerjakan dalam tutorial ini, berikut adalah script file tersebut:

Java Web Media: Graphic Design Course Depok

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
 <h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">About Java Web Media</a> | <a href="http://www.javawebmedia.com">Course</a> | <a href="http://www.javawebmedia.com">Contact Us</a></h1>
 <h2>Registration form</h2>
 <p>Form registrasi ada di sini</p>
</div>
</body>
</html>

Membuat form input data

Langkah selanjutnya adalah membuat form untuk memasukkan data. Lihat gambar di atas.

1. Ubah tampilan Workspace Anda menjadi Design View. Lihat gambar di atas
2. Seleksi tulisan Registrasi form ada di sini. Hapus tulisan tersebut.
3. Klik Insert > Form > Form
4. Klik Insert > Spry > Spry Validation Textfield.
5. Pada kolom ID: nama dan Label: Nama Anda:. Klik OK.
   

   Java Web Media: Web Programming Course Depok
   
   
   

   Java Web Media: Web Programming Course Depok
6. Letakkan kursor Anda di samping kanan form input nama lalu tekan Enter.
7. Klik Insert > Spry > Spry Validation Textfield. Pada kolom ID: email dan Label: Alamat email Anda:. Klik OK.
8. Letakkan kursor Anda di samping kanan form input email, lalu tekan Enter.
9. Klik Insert > Spry > Spry Validation Textfield. Pada kolom ID: username dan Label: Username Anda:. Klik OK.
10. Letakkan kursor Anda di samping kanan form input username, lalu tekan Enter.
11. Klik Insert > Spry > Spry Validation Password (fitur ini baru ada pada Dreamweaver CS4 ke atas). Pada kolom ID: password dan Label: Password Anda:. Klik OK.
12. Letakkan kursor Anda di samping kanan form input password, lalu tekan Enter.
13. Klik Insert > Form > Button. Pada kolom ID: submit. Biarkan Label tetap kosong lalu klik OK.
14. Klik pada tombol Submit yang sudah muncul lalu copy dan letakkan di samping tombol Submit.
    

    Web Design in Depok? Java Web Media
15. Klik tombol Submit kedua yang baru saja Anda paste, lalu melalui panel Properties ubah menjadi Reset form.
16. Simpan hasil pekerjaan Anda. Jika ada pop-up menu keluar untuk menanyakan apakah file Spry akan disimpan, klik OK.

Java Web Media: Your Web Solution

Memilih type dan panjang data yang ingin difilter menggunakan AJAX/Spry

Pada langkah ini, Anda akan belalajar menggunakan fasilitas Spry yang disediakan oleh Dreamweaver. Fitur spry ini bekerja selayaknya AJAX. Ketika Anda bekerja menggunakan mode Design View, maka setiap kali Anda melakukan hover (atau mengarahkan kursor di atas form yang tadi Anda beri fasilitas spry, maka Dreamweaver akan langsung menampilkan notifikasi berwarna biru pada masing-masing spry.

Fitur spry tidak terlalu susah untuk dipelajari, dan mudah untuk Anda gunakan.

Klik Notifikasi atau Pop-up menu tersebut, maka fasilitas pengaturan Spry akan muncul di jendela Properties yang terletak di bagian bawah work space Anda. Pada contoh di bawah dipilih pada Spry Textfield2.

Java Web Media: Your Web Solution

Beberapa fitur yang harus Anda pahami antara lain:

• Type, adalah type data yang akan Anda validasi. Dalam contoh ini Email Address
• Format, adalah format penulisan. Dalam contoh ini tidak digunakan
• Patern, pola dari teks. Dalam contoh ini tidak digunakan
• Hint, akan menampilkan teks panduan bagi pengunjung web tentang type dan format data seperti apa yang ingin dimasukkan.
• Min chars, minimal karakter yang harus diketik
• Max chars, maksimal karakter yang boleh dimasukkan.
• Validate on, adalah kapan validasi data harus diaktifkan. Secara Default Dreamweaver akan memilih Submit. Dalam contoh ini dipilih ketiganya (Blur danChange) juga diaktifkan. Ini artinya fitur spry akan langsung menampilkan pesan error meskipun data yang Anda ketik belum selesai.
• Required, artinya wajib atau harus diisi. Jika form input tidak wajib diisi, maka Anda bisa memilih untuk meng-Unchecked-nya.

Java Web Media: Web Design Company in Depok

Dengan menggunakan fitur spry di atas, lakukan pengaturan filter data seperi berikut ini. Dalam contoh ini, berikut beberapa filter data yang akan diberikan di setiap form input data:

• nama, minimal 5 huruf dan harus diisi (Required). Validate on: Blur and Changeaktif.
• email, type harus alamat email, dan hint-nya: contact@javawebmedia.com. Validate on: Blur and Change aktif.
• username, minimal menggunakan 6 karakter/huruf dan maximal 16 karakter/huruf. Validate on: Blur and Change aktif.
• password, minimal 6 karakter dan maximal 32 karakter. Validate on: Blur and Change aktif.
• Simpan kembali pekerjaan Anda

Mengubah tampilan Spry melalui CSS

Jika Anda perhatikan, lay out bawaan Spry sangatlah tidak menarik. Pesan peringatan muncul dengan warna merah dan bingkai merah. Pada langkah ini, Anda akan belajar melakukan kustomisasi tampilan CSS.

SpryValidationTextfield.css

Java Web Media: Web Design Company in Depok

Jika Anda menggunakan Dreamweaver CS4 ke atas, klik file SpryValidationTextfield.css yang ada pada menu related file. Lalu pada baris kode ke-33 lakukan perubahan sehingga menjadi:

textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
 display: block;
 color: #CC3333;
}

Lalu pada baris ke-73 yang semula adalah sebagai berikut:

.textfieldHintState input, input.textfieldHintState {
 /*color: red !important;*/
}

Ubah menjadi:

.textfieldHintState input, input.textfieldHintState {
 /*color: red !important;*/
 color: #CCC;
}

Simpan kembali file SpryValidationTextfield.css Anda. Anda dapat melakukan perubahan pada SpryValidationPassword.css dengan cara yang kurang lebih sama. Berikut hasil kustomisasi dari layout file Spry tadi.

Java Web Media: Web Design Company Depok

Mengaktifkan form Insert Record

Anda telah membuat filter data yang akan dientry pada tingkat dasar. Fitur Spry ini akan sangat berguna jika user tidak mematikan fitur JavaScript pada browser yang mereka gunakan. Jika fitur JavaScript mereka disable atau dinonaktifkan, maka fungsi Spry tidak akan ada gunanya.

Java Web Media: Web Design Course Depok

Langkah selanjutnya adalah mengaktifkan form Insert Record. Berikut langkah-langkahnya:

1. Klik kembali pada file Source code di Dreamweaver Anda (lihat gambar).
2. Klik Insert > Data Objects > Insert Record > Insert Record
3. Submit values from: form1
4. Connections: koneksi
5. Insert table: users
6. Columns:, pastikan hanya id dan tanggal yang tidak mendapatkan value.
7. After inserting, go to: validasi_data.php
8. Klik OK
9. Simpan kembali hasil pekerjaan Anda.

Anda telah berhasil mengaktifkan form Insert Record.

Validasi Server Side menggunakan PHP

Validasi atau filter Server Side adalah langkah kedua setelah validasi JavaScript/AJAX Anda didisable oleh user.

Di sekitar baris kode ke-37, Anda akan menemukan kode ini:

$editFormAction = $_SERVER[‘PHP_SELF’];
if (isset($_SERVER[‘QUERY_STRING’])) {
$editFormAction .= “?” . htmlentities($_SERVER[‘QUERY_STRING’]);
}

Tekan Enter setelah kode tersebut, lalu tambahkan kode ini:

$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

//Chek jika terjadi error
$error = array();
$MM_flag="MM_insert";
// Validasi input 
if (isset($_POST[$MM_flag])) {
 //Check panjang nama, jika kosong atau kurang dari 5 ERROR
 if((strlen($_POST['nama']) < 5)) {
 $error['nama'] = "Nama harus diisi dengan minimal 5 karakter";
 }
 // Check alamat email
 $checkEmail = '/^[^@]+@[^\s\r\n\'";,@%]+$/';
 if (!preg_match($checkEmail, trim($_POST['email']))) {
 $error['email'] = "Alamat email salah";
 }
 //Check panjang username
 $_POST['username'] = trim($_POST['username']);
 if(strlen($_POST['username']) < 6 || strlen($_POST['username']) > 16) {
 $error['username'] = "Username minimal 6 karakter dan maksimal 16 karakter";
 }
 // Check password
 $_POST['password'] = trim($_POST['password']);
 if(strlen($_POST['password']) < 6 || strlen($_POST['password']) > 32){
 $error['password'] = "Password 6 karakter dan maksimal 32 karakter";
 }
}
// Jika tidak terjadi error
if(!$error) {
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {

Lalu pada baris ke-82 yang semula seperti ini:

}
 header(sprintf("Location: %s", $insertGoTo));
}

Lalu ubah menjadi:

header(sprintf("Location: %s", $insertGoTo));
}
$_POST = array();
}

Simpan kembali hasil pekerjaan Anda

Menampilkan pesan error

Langkah selanjutnya adalah menampilkan pesan error jika type data yang dikirimkan oleh pengunjung ternyata tidak memenuhi kriteria yang Anda tetapkan.

Cari kode di bawah ini:

<h2>Registration form</h2>
 <form name="form1" method="POST" action="<?php echo $editFormAction; ?>">

Lalu ubah menjadi:

<h2>Registration form</h2>
 
 <?php if($error) { ?>
 <p class="warning">
 <strong>Ada kesalahan dalam proses pengisian data:</strong><br/>
 <?php foreach($error as $peringatan) { ?>
 - <?php echo $peringatan; ?><br/>
<?php } ?>
</p>
<?php } ?>

<form name="form1" method="POST" action="<?php echo $editFormAction; ?>">

Untuk melakukan pengetesan pada level Server Side ini, pastikan Anda mendisable fungsi JavaScript, lalu klik tombol Submit.

Java Web Media: Web Design Company in Depok

Anda telah menyelesaikan paket dasar tutorial validasi data. Selamat mencoba.

Hasil akhir Script adalah sebagai berikut:

<?php require_once('Connections/koneksi.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
 if (PHP_VERSION < 6) {
 $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
 }

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
 case "text":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break; 
 case "long":
 case "int":
 $theValue = ($theValue != "") ? intval($theValue) : "NULL";
 break;
 case "double":
 $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
 break;
 case "date":
 $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
 break;
 case "defined":
 $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
 break;
 }
 return $theValue;
}
}

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
 $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

//Chek jika terjadi error
$error = array();
$MM_flag="MM_insert";
// Validasi input 
if (isset($_POST[$MM_flag])) {
 //Check panjang nama
 if((strlen($_POST['nama']) < 5)) {
 $error['nama'] = "Nama minimal 5 karakter";
 }
 // Check alamat email
 $checkEmail = '/^[^@]+@[^\s\r\n\'";,@%]+$/';
 if (!preg_match($checkEmail, trim($_POST['email']))) {
 $error['email'] = "Alamat email salah";
 }
 //Check panjang username
 $_POST['username'] = trim($_POST['username']);
 if(strlen($_POST['username']) < 6 || strlen($_POST['username']) > 16) {
 $error['username'] = "Username minimal 6 karakter dan maksimal 16 karakter";
 }
 // Check password
 $_POST['password'] = trim($_POST['password']);
 if(strlen($_POST['password']) < 6 || strlen($_POST['password']) > 32){
 $error['password'] = "Password 6 karakter dan maksimal 32 karakter";
 }
}
// Jika tidak terjadi error
if(!$error) {
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
 $insertSQL = sprintf("INSERT INTO users (nama, email, username, password) VALUES (%s, %s, %s, %s)",
 GetSQLValueString($_POST['nama'], "text"),
 GetSQLValueString($_POST['email'], "text"),
 GetSQLValueString($_POST['username'], "text"),
 GetSQLValueString($_POST['password'], "text"));

mysql_select_db($database_koneksi, $koneksi);
 $Result1 = mysql_query($insertSQL, $koneksi) or die(mysql_error());

$insertGoTo = "validasi_data.php";
 if (isset($_SERVER['QUERY_STRING'])) {
 $insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
 $insertGoTo .= $_SERVER['QUERY_STRING'];
 }
 header(sprintf("Location: %s", $insertGoTo));
}
$_POST = array();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
 <h1><a href="http://www.javawebmedia.com">Home</a> | <a href="http://www.javawebmedia.com">About Java Web Media</a> | <a href="http://www.javawebmedia.com">Course</a> | <a href="http://www.javawebmedia.com">Contact Us</a></h1>
 <h2>Registration form</h2>
 
 <?php if($error) { ?>
 <p class="warning">
 <strong>Ada kesalahan dalam proses pengisian data:</strong><br/>
 <?php foreach($error as $peringatan) { ?>
 - <?php echo $peringatan; ?><br/>
<?php } ?>
</p>
<?php } ?>

<form name="form1" method="POST" action="<?php echo $editFormAction; ?>">
 <span id="sprytextfield1">
 <label for="nama">Nama Anda:</label>
 <input type="text" name="nama" id="nama">
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span></span>
 <p><span id="sprytextfield2">
 <label for="email">Alamat email Anda:</label>
 <input type="text" name="email" id="email">
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
 <p><span id="sprytextfield3">
 <label for="username">Username Anda:</label>
 <input type="text" name="username" id="username">
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
 <p><span id="sprypassword1">
 <label for="password">Password Anda:</label>
 <input type="password" name="password" id="password">
 <span class="passwordRequiredMsg">A value is required.</span><span class="passwordMinCharsMsg">Minimum number of characters not met.</span><span class="passwordMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
 <p>
 <input type="submit" name="submit" id="submit" value="Submit">
 <input type="reset" name="submit2" id="submit2" value="Reset">
 </p>
 <input type="hidden" name="MM_insert" value="form1">
 </form>
 <p>&nbsp;</p>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {minChars:5, validateOn:["blur", "change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur", "change"], hint:"contact@javawebmedia.com"});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {minChars:6, maxChars:16, validateOn:["blur", "change"]});
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1", {minChars:6, maxChars:32, validateOn:["blur", "change"]});
</script>
</body>
</html>

Labels: Form Registrasi dengan Validasi AJAX dan PHP

Thanks for reading Form Registrasi dengan Validasi AJAX dan PHP. Please share...!