article

Thursday, July 12, 2012

Login Register jquery ajax

Login Register jquery ajax

 Download




//Index.php
<?php
include 'conf.php';
function secure()
{
 $username = sql_secure($_COOKIE['login_u']);
 $password = sql_secure($_COOKIE['login_p']);
 $sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";
 $query = mysql_query($sql);
 $num_rows = mysql_num_rows($query);
 if ($num_rows == '0')
 {
   $url = $_SERVER['REQUEST_URI'];
   header("location:login.php?url=$url");  
   exit();     
 }
}
secure();
?>
If you see this text you have logged in
conf.php
<?php
$mysql_host     = 'localhost';
$mysql_username = 'root';
$mysql_password = 'ednalan';
mysql_connect("$mysql_host","$mysql_username","$mysql_password");
mysql_select_db("dbname");
#A function to secure SQL queries in the script.
function sql_secure($string) {
  if (get_magic_quotes_gpc()) {
   $string = stripslashes($string);
  }
  $string = mysql_real_escape_string($string);
 return $string;
}
?>
login.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
html,body {
 margin :0px;
 padding:0px;
}
.login_wrap {
 position: absolute;
 top: 0px;
 left: 40px;
 font-family: Arial, Helvetica, sans-serif;
 color: #95B841;
}
.login_button {
 background-color: #E5E5E5;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #95B841;
 border-bottom-color: #95B841;
 border-left-color: #95B841;
 padding-top: 5px;
 padding-right: 10px;
 padding-bottom: 5px;
 padding-left: 10px;
 float: left;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 cursor:pointer;
 color:#0099FF;
 font-weight:bold;
}
input {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 background-color: #FFF;
 font-weight: bold;
 padding: 3px;
 margin: 2px;
 color: #0099FF;
 font-family: Arial, Helvetica, sans-serif;
 border: 3px solid #95B841;
}
.login_error {
 color: #0099FF;
 padding: 20px;
 width: 200px;
 margin-top: 100px;
 margin-right: auto;
 margin-left: auto;
 background-color: #E5E5E5;
 border: 2px solid #95B841;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 font-weight: bold;
}
.register, .cancel {
 color: #0099FF;
 font-size: 10px;
 text-decoration: none;
 padding-top: 3px;
 border-bottom-width: 1px;
 border-bottom-style: dotted;
 border-bottom-color: #95B841;
}
.registration_box_wrap {
 z-index: 888;
 height: 100%;
 width: 100%;
 background-color: #E5E5E5;
 position: absolute;
 filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
 top: 0px;
}
.registration_box {
 background-color: #E5E5E5;
 height: auto;
 width: 200px;
 margin-top: 70px;
 margin-right: auto;
 margin-left: auto;
 border: 5px solid #95B841;
 z-index: 999;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 filter:alpha(opacity=100);
 -moz-opacity:1;
 -khtml-opacity: 1;
 opacity: 1;
 position: relative;
 padding: 20px;
 color: #95B841;
 font-family: Arial, Helvetica, sans-serif;
 color: #0099FF;
}
.registration_box h2 {
 color: #0099FF;
 font-family: Arial, Helvetica, sans-serif;
}
.registration_error {
 font-size: 14px;
 padding: 5px;
 border: thin solid #95B841;
 margin: 5px;
 text-align: center;
}
.login_box {
 background-color: #E5E5E5;
 padding: 5px;
 margin-bottom: -3px;
 border-right-width: 3px;
 border-bottom-width: 3px;
 border-left-width: 3px;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #95B841;
 border-bottom-color: #95B841;
 border-left-color: #95B841;
 -webkit-border-bottom-right-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 border-bottom-right-radius: 5px;
}
.right_box {
 float: right;
 top: 0px;
 right: 20px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 24px;
 position: absolute;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
 $('.login_box').hide();
    $('.login_button').click(function () {
        $('.login_box').toggle();
        this.hide();
    });
    $('input[type="text"]').focus(function () {
        if (this.value == this.defaultValue) {
            this.value = '';
        }
        if (this.value != this.defaultValue) {
            this.select();
        }
    });
    $('input[type="text"]').blur( function () {
  if (this.value == "") {
   this.value = this.defaultValue;
  }
 });
    $('#password_1').focus(function () {
        $('#password_1').remove();
        $('#password').show();
  $('#password').val() = "";
        $('#password').focus();
    });
    $('#submit').click(function () {
        var str = $('#login_form').serialize();
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: str,
            success: function (msg) {
                if (msg.length == "") {
            $('.login_error').html("Success, redirecting...").fadeIn().delay(3000).fadeOut(
      function() { window.location.replace('<?php echo $_GET['url'];?>'); }
      );
                     
                } else {
                    $('.login_error').html(msg).fadeIn().delay(3000).fadeOut();
                }
            }
        });
  return false;
    });
 $('#Register').click(function () {
        var str = $('#register_form').serialize();
        $.ajax({
            type: "POST",
            url: "register.php",
            data: str,
            success: function (msg) {
                if (msg.length == "") {
    $('.registration_error').html("You Have Successfully Registered.")
    .fadeIn()
    .delay(3000)
    .slideUp();
    $('.registration_box_wrap,.registration_box').delay(1500).fadeOut();
                } else {
                    $('.registration_error').html(msg)
     .fadeIn()
     .delay(3000)
     .slideUp();
                }
            }
        });
  return false;
    });
    $('.register').click(function () {
        $('.registration_box_wrap').fadeIn(500);
        $('.registration_box').fadeIn(200);
    });
    $('.cancel').click(function () {
        $('.registration_box_wrap').fadeOut(500);
        $('.registration_box').fadeOut(200);
    });
});
</script>
<div class="login_error" style="display:none;"></div>
<div class="login_wrap">
 <div class="login_box" style="display:;">
    <br />
    <form id="login_form" name="login_form" method="post" action="">
  <input name="username" type="text" id="username" value="Username" />
  <br />
  <input name="password_1" type="text" id="password_1" value="Password" />
  <input name="password" type="password" id="password" style="display:none;" /><br />
  <input name="Button" type="button" value="Login!" id="submit" />
    </form>
    <a class="register" href="#">Not Registered? Click Here!</a><br />
 </div>
    <div class="login_button">Login</div>
</div>
<div class="registration_box" style="display:none;">
  <h2>Register</h2>
  <div class="registration_error" style="display:none;"></div>
  <form id="register_form" name="form1" method="post" action="">
    Username<br />
    <input type="text" name="username" id="username" />
    <br />
    Password<br />
    <input type="password" name="password" id="textfield2" />
    <br />
    Email<br />
    <input type="text" name="email" id="email" />
    <br />
    <br />
    <input type="submit" name="Register" id="Register" value="Register" />
 or <a class="cancel" href="#">cancel</a>
  </form>
</div>
<div class="registration_box_wrap"  style="display:none;"></div>
Register.php
<?php
include 'conf.php';
$username = sql_secure($_POST['username']);
$password = sql_secure($_POST['password']);
$email    = sql_secure($_POST['email']);
#Create a unique code which will be used to confirm user accounts.
$confirm_code = md5(rand(0,99999).rand(0,999999));
#Check if data is of required lenght.
if (strlen($username) < 3 || strlen($password) < 3 || strlen($email) < 3)
{
 die("All Fields Must Be At Least 3 Characters");
}
if (!preg_match('/^[a-zA-Z0-9&\'\.\-_\+]+\@[a-zA-Z0-9.-]+\.+[a-zA-Z]{2,6}$/', $email)) { 
 die("Email Address Not Vaild.");
}
#Check if username or email is already in use.
$password = md5($password);
$query = mysql_query("SELECT * FROM users WHERE username = '$username' OR email = '$email'");
if (mysql_num_rows($query) >= '1')
{
 die("Username Or Email Already In Use"); 
}
#Insert the user's information into the database.
$sql = mysql_query("INSERT INTO users (
username,
password,
email,
confirm_code,
reg_date) VALUES
('$username', '$password', '$email', '$confirm_code', now())");
if (!$sql) {
 die("Something Has Gone Wrong");
}
?>

Related Post