Nov 1, 2012

Php tutorial, Login script with Jquery

View Demo Download
On today's tutorial were gonna build an Php and Jquery login script.
To make it more easy i separated the article in 4 parts:
  1. Html Form
  2. Adding Php
  3. Jquery checks
  4. Final code
First of all we are goind to make the html form which it is well designed in css3
<html>
<head>
<title>Php And Jquery Login tutorial</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="code.js" type="text/javascript"></script>
</head>
<body>
<div id="alert">Please type something.</div>
<div id="box">

<form action="submit.php" method="post" id="ContactForm">
<input type="text" name="user" value="Username.." id="user"><br />
<input type="password" name="pass" value="passwd" id="pass"><br />
<input type="submit" value="Login" class="button">
<div class="form_result"> </div>
</form>

</div>
</body>
</html>

The php backend, just a simple login script for demonstration

<?php
if(isset($_POST['user']) && !empty($_POST['pass'])){
$uid = "mikel";
$pid = "thecodertips";
if($_POST['user'] != $uid){
die("Wrong username..");
}
if($_POST['pass'] != $pid){
die("Wrong password..");
}
echo 'Welcome.';
}
?>

Then the css part
input{
outline: none; /* removes google chrome outline */
}

#box{ /* the login box design */
width: 190px;
background-image: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:    -moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:     -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:      -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:         linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 0px 20px 0px 20px;
display: inline-block;
font-size: 15px;
line-height: 32px;
color: rgba(51,51,51,1);
}

#user, #pass{
padding: 8px;
color:gray;
margin: 10px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}

#user:hover, #pass:hover{
border:1px solid #00BFFF;
color: black;
}

.button {
background-image:-webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-moz-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:-o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
background-image:linear-gradient(top, rgba(252,252,252,1) 0%,rgba(243,243,243,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(255,255,255,1)inset, 0px -16px 0px 0px rgba(237,237,237,1)inset;
border: solid 1px #5E5E5E;
border-color: #5E5E5E #888888 #696969 #888888;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 0px 20px 0px 20px;
display: inline-block;
font-size: 15px;
line-height: 32px;
color: rgba(51,51,51,1);
margin-left: 25%;
}
.button:active {
background-image: -webkit-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:    -moz-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:     -ms-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:      -o-linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
background-image:         linear-gradient(top, rgba(167,199,225,1) 0%,rgba(124,176,222,1) 100%);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 2px 0px rgba(0,0,0,0.15), 0px -2px 3px 0px rgba(182,226,244,1)inset, 0px -16px 0px 0px rgba(99,165,219,1)inset;
border: solid 1px #323D9F;
border-color: #323D9F #3365B4 #3365B4 #3365B4;
}

#alert{ /* alert box */
margin-left: 80%;
width: 200px;
background: #333;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
animation: animate-bg 5s linear infinite;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
text-align: center;
font-weight: bold;
}

Here comes the jquery part, i added some validations and a post method handled by php
$(document).ready(function(){
// hide alert boxes

$('#alert').hide();

// empty() function used when there is nothing entered


   // lets declare the variables for easier usage
 
   var user = $('#user');
   var pass = $('#pass');
   var button = $('.button');
 
   // checking if there is nothing submitted
 
    $(button).click(function(){

if(user.val().length < 3){
$('#alert').fadeIn();
return false;
}
if(pass.val().length < 3){
$('#alert').fadeIn();
return false;
}

$.ajax({type:'POST', url: 'submit.php', data:$('#ContactForm').serialize(), success: function(response) {
    $('#ContactForm').find('.form_result').html(response);
}});

return false;

   });
 
 });

NOTE! The php script contains security holes, it is used just as an example for the tutorial.
ב-
תוויות: , , , , ,

3 comments:

  1. AnonymousMay 27, 2013 at 10:38 AM

    demo is not working

    ReplyDelete
  2. AnonymousAugust 28, 2013 at 1:49 PM

    It works barely...the code is spaghetti code, it is incomplete, and not well formed.

    ReplyDelete
  3. UnknownDecember 15, 2014 at 8:43 AM

    Nice tutorial here is also a way to findlogin script php

    ReplyDelete

Subscribe to: Post Comments (Atom)