Pada tutorial ini, kita akan membuat sebuah form yang nantinya apabila user mengirim isian form tersebut maka halaman form tidak akan merefresh (meloading). Pada kasus ini, kita hanya menggunakan plugin jQuery untuk mengirim isian form tanpa merefresh halaman web.
Langkah 1
Buatlah database dengan field id,nama,email,pesan dan tanggal.
CREATE TABLE contact (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
nama VARCHAR(255) unique key,
email VARCHAR(100),
pesan TEXT,
tanggal INT(11)
);
Langkah 2
Buatlah file PHP db.php untuk melakukan konfigurasi koneksi database.
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "percobaan";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Maaf, database Anda belum terkoneksi");
mysql_select_db($mysql_database, $bd) or die("Maaf, database Anda belum terkoneksi");
?>
Langkah 3
Buatlah form sederhana yang terdiri dari isian nama,alamat email dan pesan.
<div id="kotakform">
<form id="form" action="submit.php" method="post">
Nama
<input type="text" name="nama" />
Email
<input type="text" name="email" />
Pesan
<textarea name="pesan"></textarea>
<input type="submit" value="Kirim">
</form>
</div>
Langkah 4
Kemudian, buatlah file submit.php (misal) untuk menginputkan isian dari form ke dalam database. Pada file ini pula, Anda dapat menentukan pesan yang akan tampil apabila user telah mengirim isian formnya. Silahkan ganti teks “Terima Kasih!” pada syntax dibawah.
<?php
include("db.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
$nama=mysql_real_escape_string($_POST['nama']);
$email=mysql_real_escape_string($_POST['email']);
$pesan=mysql_real_escape_string($_POST['pesan']);
if(strlen($nama)>0 && strlen($email)>0 && strlen($pesan)>0)
{
$waktu=time();
mysql_query("INSERT INTO contact (nama,email,pesan,tanggal) VALUES('$nama','$email','$pesan','$waktu')");
echo "<h1>Terima Kasih!</h1>";
}
}
?>
Langkah 5
Terakhir, tambahkan syntax jQuery dan plugin untuk memberikan efek pada form tersebut. Pada syntax ini pula, Anda dapat menentukan pesan yang ingin ditampilkan apabila user tidak mengisi isian form.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#form').validate({
rules:{
"nama":{
required:true,
maxlength:40
},
"email":{
required:true,
email:true,
maxlength:100
},
"pesan":{
required:true
}},
//Untuk menampilkan pesan apabila form tidak diisi
messages:{
"nama":{
required:"Mohon diisi"
},
"email":{
required:"Mohon diisi",
email:"Masukkan alamat email yang benar"
},
"pesan":{
required:"Mohon diisi"
}},
submitHandler: function(form){
$(form).ajaxSubmit({
target: '#tampilanform',
success: function() {
$('#kotakform').slideUp('fast');
}
});
}
})
});
</script>
Kesimpulan
Pada contoh diatas, untuk mengirim isian form tanpa merefresh halaman web digunakan bantuan jQuery. Anda bisa meng-implementasikan konsep ini di aplikasi web yang Anda kembangkan nantinya. Terus bereksperimen untuk mendapatkan hasil yang maksimal. Selamat mencoba.
