OK Langsung saja kita persiapkan dulu file jquery.2.1.1.min.js danjquery.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 danjquery.validate.min.jsdibawah 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.
sumber:http://andeznet.com/
mksih mas, mau tak langsung coba nih scriptny.
ReplyDeleteklo cara membuat input text minimal 5 karakter dengan menggunakan alert eror gmna ??
ReplyDelete