Een registratieformulier maken met JQuery-validatie en PHP
Hai All Ketemu lagi bersama saya pria ganteng asli sunda hehe, tutorial kali ini adalah Membuat Form Registrasi dengan Validasi Jquery dan PHP pada kasus kali ini kita akan membuat form validasi yang ada di Aplikasi Sms Gateway Andeznet (SAGA) yang sudah saya SHARE sebelumnya.
OK Langsung saja kita persiapkan dulu file jquery.2.1.1.min.js dan jquery.validate.min.js dan bootstrap.css untuk pemanis tampilannya klo engak ada bisa cari di Om Google, setelah itu kita buat database baru dengan nama apa aja boleh lalu buat tabel baru seperti ini :
CREATE TABLE IF NOT EXISTS `tbl_user` (
`id_user` int(10) NOT NULL,
`username` varchar(100) NOT NULL,
`pass` varchar(100) NOT NULL,
`level_user` int(5) NOT NULL,
`email` varchar(50) NOT NULL,
`status` int(5) NOT NULL,
`w_login` datetime NOT NULL,
`photo` varchar(100) NOT NULL,
`nohp` varchar(15) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
Setelah tabel selesai kita Buat sintak HTML nya seperti dibawah ini :
<form name="form" id="validation-reg" method="post" action="" class="form-login">
<h2 class="form-login-heading">REGISTER S.A.G.A</h2>
<div id="loading" style="text-align: center"></div>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="username" name="username" class="form-control" placeholder="Username" autofocus>
</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password" name="password" class="form-control" placeholder="Password">
</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="password" id="password2" name="password2" class="form-control" placeholder="Confirm Password">
</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
</div>
</div>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="text" id="nohp" name="nohp" class="form-control" placeholder="Masukan No Handphone Anda">
</div>
</div>
<br>
<br>
<br>
<br>
<label class="checkbox">
<span class="pull-right">
<a href="index.php">Back to Login</a>
</span>
</label>
<br>
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-theme btn-block"><i class="fa fa-lock"></i> REGISTER</button>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<footer class="site-footer">
<div class="text-center">
2015 <a href="http://andeznet.com">AndezNet</a>
</div>
</footer>
</form>Perhatikan script <div id=”loading” style=”text-align: center”></div> diatas, nantinya script ini akan kita gunakan untuk menampilkan hasil validasi dari jquery.
Sekarang kita sisipkan file jquery.2.1.1.min.js,bootstrap.min.js dan jquery.validate.min.js
dibawah systax Html yang tadi kita buat.
<script src="jquery.2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.validate.min.js">Nah skarang kita buat script untuk menjalankan validasi nya.
<script type="text/javascript">
jQuery(function($) {
$.validator.setDefaults({
submitHandler: function () {
register();
}
});
$().ready(function () {
//
$("#validation-reg").validate({
errorElement: 'div',
errorClass: 'help-block',
focusInvalid: false,
rules: {
email: {
required: true
},
username: {
required: true
},
password: {
required: true,
minlength: 5
},
password2: {
required: true,
minlength: 5,
equalTo: "#password"
},
nohp: {
required: true
}
},
messages: {
password: {
required: "Please specify a password.",
minlength: "Please specify a secure password."
},
username: "Mohon isi username anda",
nohp: "Mohon isi no handphone anda"
},
highlight: function (e) {
$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
},
success: function (e) {
$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
$(e).remove();
}
})
});
function register() {
$("#loading").html('<div class="alert alert-block alert-success">Mohon Tunggu....</div>');
$.post('daftar.input.php', $("form").serialize(), function (hasil) {
$('form input[type="text"],form input[type="password2"],form input[type="email"],form input[type="text"]').val('');
$("#loading").html(hasil);
});
};
});
</script>
Perhatikan script diatas (#validation-reg) untuk memangil nya ada di syntax HTML yang sudah kita buat tadi <form name=”form” id=”validation-reg” method=”post” action=”” class=”form-login”>
Sekarang kita buat script koneksi.php seperti dibawah ini :
<?php
$server = "localhost";
$usermysql = "root";
$password = "12345";
$database = "db_saga";
// Koneksi dan memilih database di server
$mysqli= new mysqli ($server,$usermysql,$password,$database);
if ($mysqli->connect_error){
echo "Gagal terkoneksi ke database : (".$mysqli->connect_eror.")";
}
?>Lalu kita buat script daftar.input.php seperti dibawah ini:
<?php
error_reporting(0);
include "config/koneksi.php";
$username = $_POST['username'];
$password = $_POST['password2'];
$email = $_POST['email'];
$enkrip_pass= md5($password);
$nohp = $_POST['nohp'];
$cek_username=mysqli_num_rows(mysqli_query
($mysqli,"SELECT username FROM tbl_user
WHERE username='$username'"));
$cek_email=mysqli_num_rows(mysqli_query
($mysqli,"SELECT email FROM tbl_user
WHERE email='$email'"));
if ($cek_username > 0) {
echo "<div id='gagal' class='alert alert-danger'>Maaf Username sudah terdaftar<button type='button' class='close' data-dismiss='alert'><i class='fa fa-times'></i></button></div>";
}
else if ($cek_email > 0){
echo "<div id='gagal' class='alert alert-danger'>Mohon maaf Email anda sudah terdaftar<button type='button' class='close' data-dismiss='alert'><i class='fa fa-times'></i></button></div>";
}else {
$input = mysqli_query($mysqli, "INSERT INTO tbl_user(id_user,username,
pass,
email,
level_user,photo,nohp)
VALUES('','$username',
'$enkrip_pass',
'$email',
'1','assets/img/logosaga.png','$nohp')");
if ($input > 0) {
echo "<div class='alert alert-success'><button type='button' class='close' data-dismiss='alert'><i class='fa fa-times'></i></button><strong><i class='fa fa-check'></i> BERHASIL </strong>Silahkan <a href='index.php'>Login</a><br/></div>";
} else {
echo "<div class='alert alert-danger'><button type='button' class='close' data-dismiss='alert'><i class='fa fa-times'></i></button><strong><i class='fa fa-times'></i> MAAF! </strong>" . mysqli_error($mysqli) . "<br/></div>";
}
}Nah jika sudah berhasil maka akan muncul validasi seperti ini
Apabila Username / Email sudah terdaftar maka akan muncul seperti dibawah ini :
Nah sekian Tutorial kali ini mudah-mudahan akan bermanfaat, untuk download script nya anda bisa langsung download Aplkasi SAGA / aplikasi ASKA di website ini, untuk script validasi register sudah ada di dalam nya. Happy Coding & Programing.
Terima kasih codenya, ntar saya coba ya. Kalau modul untuk chat ada nga ya mas, saya perlu ini buat komunikasi sesama user.
Next artikel deh klo untuk modul chat
terimaksih banyal ilmunya.. baru baca langsung tertarik ama semua artikel di blog ini.. oiya pak saya lagi belajar bootstrap. bagi tutorial bikin form yang pake datepicker dong. aku dah coba coba belum berhasi
masukinya ke form ama database.. mohon pencerahanya..
pak, yang form registrasinya sudah saya coba, muncul error,”Uncaught TypeError: Cannot read property ‘setDefaults’ of undefined” klu begini apa yang harus saya lakukan ya pak? mohon bantuannya
SCript nya ada yang dirubag dari saya?
Mantap gan saya coba dulu 😀
Silahkan…
gan kalo pake css buatan sendiri bisa tidak gan jadi tidak pake bootstrap.css?
Terima kasih
Bisa digabungin sama boostrap