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
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> register berhasil, silahkan login'; } else { $response['status'] = 'error'; // $response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> 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" /> 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> 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> 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.
Suka sekali menulis dan mempelajari source code open source lisensi GNU di Github dll. Bisa pemrogramman web karena sering belajar dari contoh program yang ada di Github dll.
0 comments:
Post a Comment