Form Registrasi dengan Validasi AJAX dan PHP

Standar

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

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

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

     

    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

    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.

Form Registrasi dengan Validasi AJAX dan PHP

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s