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");
}
?>
