Membuat Form Registrasi dengan Validasi Jquery dan PHP

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 :

Source code

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 :

Source code

<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.

Source code

<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.

Source code

<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 :

Source code

<?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:

Source code

<?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/