..:: Arian-Cyber ::..: Membuat Form Register Berbasis jQuery dan PHP

Tuesday 12 November 2013

Membuat Form Register Berbasis jQuery dan PHP

18:41 | Posted by Arian |

Bagaimana cara untuk membuat Form Register yang ada di halaman Facebook ? Jika anda bertanya demikian anda sudah tepat membaca postingan saya kali ini.
Pada pembahasan kali ini saya akan membahas bagaimana pembuatan Form Register seperti yang ada di halaman Facebook. Sekilas pada gambar disamping memang tampak sederhana tapi tidak sederhana pembuatannya he he. Adapaun sourcenya saya ambil dari www.wadahmaya.com dan saya edit dan posting dengan versi saya.

Sebelum ke pembuatan atau pembahasan berikut saya jelaskan Logika jalannya Form Register ini:

Silahkan isi Form di mulai dari First name sampai dengan Birthday.
Klik Button Sign Up untuk memproses data.
Klik Button Cancel untuk membatalkan Registrasi

Baik langsung saja ke pembahasan atau pembuatannya, sebelumnya siapakan Text Editor anda bisa pakai Notepad, Sublime Text dll.

Pertama Instal jQuery dulu, bisa anda Download Disini
Letakkan jQuery diantara tag <head>###</head>
Buat halaman Indexnya atau halaman utama, anda bisa tuliskan code dibawah ini dan simpan dengan nama Index.php.

<?php
 define('INCLUDE_CHECK',1);
 require "functions.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register Form Like FB</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="div-regForm">
<div class="form-title">REGISTER</div>
<div class="form-sub-title">REGISTER FOR FREE !</div>
<form id="regForm" action="submit.php" method="post">
<table>
  <tbody>
  <tr>
    <td><label for="fname">First Name:</label></td>
    <td><div class="input-container"><input name="fname" id="fname" type="text" placeholder="Nama Awal" /></div></td>
  </tr>
  <tr>
    <td><label for="lname">Last Name:</label></td>
    <td><div class="input-container"><input name="lname" id="lname" type="text" placeholder="Nama Akhir" /></div></td>
  </tr>
  <tr>
    <td><label for="email">Email:</label></td>
    <td><div class="input-container"><input name="email" id="email" type="text" placeholder="Email Kamu" /></div></td>
  </tr>
  <tr>
    <td><label for="pass">Password:</label></td>
    <td><div class="input-container"><input name="pass" id="pass" type="password" placeholder="Password Kamu" /></div></td>
  </tr>
  <tr>
    <td><label for="sex-select">Gender :</label></td>
    <td>
    <div class="input-container">
    <select name="sex-select" id="sex-select">
    <option value="0">Pilih:</option>
    <option value="1">Pria</option>
    <option value="2">Wanita</option>
    </select>
    </div>
    </td>
  </tr>
  <tr>
    <td><label>Birthday:</label></td>
    <td>
    <div class="input-container">
    <select name="month"><option value="0">Bulan:</option><?=generate_options(1,12,'callback_month')?></select>
    <select name="day"><option value="0">Tanggal:</option><?=generate_options(1,31)?></select>
 <select name="year"><option value="0">Tahun:</option><?=generate_options(date('Y'),1900)?></select>
    </div>
    </td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  <td><input type="submit" class="greenButton" value="Sign Up" /> <input type="reset" class="greenButton" value="Cancel" />
  <img id="loading" src="img/ajax-loader.gif" alt="working.." />
</td>
  </tr>
  </tbody>
</table>
</form>
<div id="error">
&nbsp;
</div>
</div>
</body>
</html>

Selanjutnya form pada Index.php akan mengirim datanya ke Script.js dan Submit.php untuk Validasi. Setelah itu halaman Script.js akan menerima data dari Index.php seperti ini :

$(document).ready(function(){
 $('#regForm').submit(function(e) {
  register();
  e.preventDefault();  
 });
});
function register()
{
 hideshow('loading',1);
 error(0);
 $.ajax({
  type: "POST",
  url: "submit.php",
  data: $('#regForm').serialize(),
  dataType: "json",
  success: function(msg){
   
   if(parseInt(msg.status)==1)
   {
    window.location=msg.txt;
   }
   else if(parseInt(msg.status)==0)
   {
    error(1,msg.txt);
   }
   
   hideshow('loading',0);
  }
 });
}
function hideshow(el,act)
{
 if(act) $('#'+el).css('visibility','visible');
 else $('#'+el).css('visibility','hidden');
}
function error(act,txt)
{
 hideshow('error',act);
 if(txt) $('#error').html(txt);
}

Pada Script.js data yang ada pada Index.php diambil dari id yang sudah dibuat sebelumnya di form tersebut sehingga pada Script.js bisa menerima data yang dimasukkan dari form Index.php. Jika berhasil maka data dari Script.js akan dikirm ke Submit.php untuk validasi lagi. Berikut scriptnya:

<?php
if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['pass']))
{
 die(msg(0,"All the fields are required"));
}
if(!(int)$_POST['sex-select'])
{
 die(msg(0,"You have to select your sex"));
}
if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
 die(msg(0,"You have to fill in your birthday"));
}
if(!(preg_match("/^[.A-z0-9_-+]+[@][A-z0-9_-]+([.][A-z0-9_-]+)+[A-z]{1,4}$/", $_POST['email'])))
 die(msg(0,"You haven't provided a valid email"));
//Put the Database Here !
echo msg(1,"registered.html");
function msg($status,$txt)
{
 return '{"status":'.$status.',"txt":"'.$txt.'"}';
}
?>

Jika berhasil submit pada Submit.php, maka akan meredirect ke registered.html

Untuk Script lengkapnya bisa klik

Jasa Pembuatan Website Murah, dengan tampilan elegan, ArianCyber

Untuk melihat Demonya bisa klik

//.D /* Life runs on Codes */

Sekian pembahasan atau postingan saya mengenai Membuat Form Register . Apabilla ada kesalahan dalam pembahasan atau postingan saya mohon untuk dibenarkan karena saya masih dalam tahap belajar bukan Expert. Apabila ada Saran atau kritik silakan anda tulis di kotak komentar yang sudah di sediakan atau bisa kontak langsung ke saya. Semoga bermanfaat.
Apabila ada dari anda ingin memposting halaman ini harap cantumkan sumbernya dan dengan bahasa anda sendiri, jadilah blogger yang baik dan mempunyai Etika dalam dunia maya.

http://arian-tales.blogspot.com/2013/11/membuat-form-register-berbasis-jquery.html

3 comments:

Unknown13 March 2015 at 08:37
Membuat form registrasi dengan Jquery dan PHP

makasih
ReplyDelete
Replies
ambar24 March 2015 at 10:07
kak, demonya gak bisa tuh :(
ReplyDelete
Replies
Unknown13 June 2016 at 13:45
Postingannya keren
MEMBUAT FORM REGISTRASI DENGAN PHP DAN JQUERY
ReplyDelete
Replies

Add comment

..:: Arian-Cyber ::..

Being Bad Is Good, But Being Good Is Better !!!

Welcome

Search

Category

Popular Post

Membuat Form Register Berbasis jQuery dan PHP

3 comments:

Me on G+

Colleger

Blog Arsive

Translate

Visitor Total

This Yours