Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / jquery / php

Tutorial Membuat Form Registrasi User Dengan jQuery Ajax, Bootstrap, MySQL

Oleh Web Posting Komentar



PHP - Tutorial Membuat Form Registrasi User Dengan jQuery Ajax, Bootstrap, MySQL , Tutorial Ajax Bootstrap Signup Form dengan JQuery PHP and MySQL
Pada kesempatan yang baik kali ini saya akan bagikan sebuah script yang bisa dijadikan referensi dan belajar membuat Ajax Bootstrap Signup Form dengan JQuery PHP and MySQL, script ini saya dapatkan dari berbagai sumber yang saya tulis lagi untuk teman-teman semuanya. Dengan bantuan JQuery ajax nantinya proses registrasi akan lebih mudah dan bagus. Dan dalam artikel ini kita akan mengenal tentang adanya JSON Response. Berikut ini beberapa file dan script yang ada, silahkan copy dan simpan dalam folder project sobat.

Silahkan download source codenya di sini : Download

Persiapan Database

Buat database pada phpmyadmin dengan nama "db_latihan".
Selanjutnya buat tabel dengan nama "admin" lalu jalankan script ini di phpmyadmin sobat. Berikut ini scriptnya.


CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `email` varchar(60) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Koneksi.php

Buat koneksi.php yaitu script untuk mengkoneksikan antaran database dengan server php
database ini dibuat dengan PDO extension.


<?php

 define('DBhost', 'localhost');
 define('DBuser', 'root');
 define('DBPass', '');
 define('DBname', 'db_latihan');
 
 try{
  
  $DB_con = new PDO("mysql:host=".DBhost.";dbname=".DBname,DBuser,DBPass);
  
 }catch(PDOException $e){
  
  die($e->getMessage());
 }

Ajax_singup.php


Script ini dibuat untuk merespon dari php ke dalam bentuk data JSON, jadi data dalam bentuk JSON yang akan menampilkan pesan dari hasil registrasi juga. Berikut ini scriptnya silahkan copy.



<?php

 header('Content-type: application/json');

 require_once 'koneksi.php';
 
 $response = array();

 if ($_POST) {
  
  $name = $_POST['name'];
  $email = $_POST['email'];
  $pass = $_POST['cpassword'];
  
  $stmt = $DB_con->prepare('INSERT INTO users(name,email,password) VALUES(:name, :email, :pass)');
  $stmt->bindParam(':name', $name);
  $stmt->bindParam(':email', $email);
  $stmt->bindParam(':pass', $pass );
  $stmt->execute();
  
  // mengecek apakah registrassi berhasil
        if ($stmt->rowCount() == 1) {
   $response['status'] = 'success';
   $response['message'] = '<span class="glyphicon glyphicon-ok"></span> &nbsp; register berhasil, silahkan login';
        } else {
   
            $response['status'] = 'error'; // 
   $response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> &nbsp; register gagal';
        } 
 }
 
 
 echo json_encode($response);


Check-email.php

Silahkan script ini digunakan untuk mengecek email yang masuk sudah terdaftar di database atau belum. Berikut ini scriptnya silahkan copy dan pastekan di text editor sobat.



<?php

 require_once 'koneksi.php';

 if (isset( $_POST['email'] ) && !empty($_POST['email'])) {
  $email = $_POST['email'];
  $query = " SELECT email FROM users where email = :email ";
  $stmt = $DB_con->prepare($query);
  $stmt->execute(array(':email'=>$email));
  
  if ($stmt->rowCount() == 1) {
   echo 'false'; // email sudah terdaftar
  } else {
   echo 'true'; 
  }
 }



Register.js

Buat file register.js untuk mengirim Json ke server php yaitu ajax_singup dan check-email.php, berikut ibi scriptnya, silahkan bisa sobat copy dan simpan dengan nama regsiter.js


// JavaScript Validation For Registration Page

$('document').ready(function()
{      
   // name validation
   var nameregex = /^[a-zA-Z ]+$/;
   
   $.validator.addMethod("validname", function( value, element ) {
       return this.optional( element ) || nameregex.test( value );
   }); 
   
   // valid email pattern
   var eregex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   
   $.validator.addMethod("validemail", function( value, element ) {
       return this.optional( element ) || eregex.test( value );
   });
   
   $("#register-form").validate({
     
    rules:
    {
    name: {
     required: true,
     validname: true,
     minlength: 4
    },
    email : {
    required : true,
    validemail: true,
    remote: {
     url: "check-email.php",
     type: "post",
     data: {
      email: function() {
       return $( "#email" ).val();
      }
     }
    }
    },
    password: {
     required: true,
     minlength: 8,
     maxlength: 15
    },
    cpassword: {
     required: true,
     equalTo: '#password'
    },
     },
     messages:
     {
    name: {
     required: "Name is required",
     validname: "Name must contain only alphabets and space",
     minlength: "your name is too short"
       },
    email : {
    required : "Email is required",
    validemail : "Please enter valid email address",
    remote : "Email already exists"
   },
    password:{
     required: "Password is required",
     minlength: "Password at least have 8 characters"
     },
    cpassword:{
     required: "Retype your password",
     equalTo: "Password did not match !"
     }
     },
     errorPlacement : function(error, element) {
     $(element).closest('.form-group').find('.help-block').html(error.html());
     },
     highlight : function(element) {
     $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
     },
     unhighlight: function(element, errorClass, validClass) {
     $(element).closest('.form-group').removeClass('has-error');
     $(element).closest('.form-group').find('.help-block').html('');
     },
      
    submitHandler: submitForm
    
     }); 
     
     
     function submitForm(){
      
      $.ajax({
    
          type : 'POST',
       async: false,
       url  : 'ajax-signup.php',
       data : $('#register-form').serialize(),
       dataType : 'json',
           
       success : function(data){
        
        
         console.log(data);
         
         
         $('button').html('<img src="ajax-loader.gif" /> &nbsp; signing up...').attr('disabled', 'disabled');
          
          setTimeout(function(){
           
           if ( data.status==='success' ) {
            
            $('#errorDiv').slideDown(200, function(){
           $('#errorDiv').html('<div class="alert alert-info">'+data.message+'</div>');
           $('#errorDiv').delay(3000).slideUp(100);
           $("#register-form")[0].reset();
           $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
           $('#btn-signup').removeAttr('disabled');
                 });
            
           } else {
            
             $('#errorDiv').slideDown(200, function(){
            $('#errorDiv').html('<div class="alert alert-danger">'+data.message+'</div>');
            $('#errorDiv').delay(3000).slideUp(100);
            $('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign Me Up');
            $('#btn-signup').removeAttr('disabled');
           });
           }
          
          },3000);
          
          
       },
       error: function(){alert('Error!')}
       
      });
      
      return false;
     }
});


Index.html

Sekarang buatlah file index.html untuk melihat bagian awal dari register ini, berikut ini scriptnya silahkan sobat copy dan pastekan dengan nama index.html





<html>
<head>
<title>Tutorial Membuat Form Registrasi User Dengan jQuery Ajax, Bootstrap, MySQL </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/signup-form.css" type="text/css" />
</head>

<body>

 <div class="container">

    <div class="signup-form-container">
    
         <!-- form start -->
         <form method="post" role="form" id="register-form" autocomplete="off">
         
         <div class="form-header">
          <h3 class="form-title"><i class="fa fa-user"></i><span class="glyphicon glyphicon-user"></span> Sign Up</h3>
                      
         <div class="pull-right">
             <h3 class="form-title"><span class="glyphicon glyphicon-pencil"></span></h3>
         </div>
                      
         </div>
                  
         <div class="form-body">
         
            <!-- json response will be here -->
              <div id="errorDiv"></div>
              <!-- json response will be here -->
                      
            <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                   <input name="name" type="text" class="form-control" placeholder="Name">
                   </div>
                   <span class="help-block" id="error"></span>
              </div>
                        
              <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                   <input name="email" id="email" type="text" class="form-control" placeholder="Email">
                   </div> 
                   <span class="help-block" id="error"></span>                     
              </div>
                        
              <div class="row">
                        
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="cpassword" type="password" class="form-control" placeholder="Retype Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
             </div>
                        
                        
            </div>
            
            <div class="form-footer">
                 <button type="submit" class="btn btn-info" id="btn-signup">
                 <span class="glyphicon glyphicon-log-in"></span> Sign Me Up !
                 </button>
            </div>


            </form>
            
           </div>
           
 </div>
    
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/jquery-1.11.2.min.js"></script>
    <script src="assets/jquery.validate.min.js"></script>
    <script src="assets/register.js"></script>
   
</body>
</html>




Silahkan download source codenya di sini : Download

Proses registrasi dengan menggunakan Ajax ini dapat membantu kita dan menampilan form lebih interaktif. Sekian artikel Tutorial Membuat Form Registrasi User Dengan jQuery Ajax, Bootstrap, MySQL, semoga bermanfaat bagi sobat semua, jangan lupa share ke yang lain. sobat juga bisa download source code ini.


Posting Komentar untuk "Tutorial Membuat Form Registrasi User Dengan jQuery Ajax, Bootstrap, MySQL "