View Demo DownloadOn today's tutorial were gonna build an Php and Jquery login script.
To make it more easy i separated the article in 4 parts:
- Html Form
- Adding Php
- Jquery checks
- Final code
First of all we are goind to make the
html form which it is well designed in
css3
Php And Jquery Login tutorial
Please type something.
The php backend, just a simple login script for demonstration
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.
We appreciate you for reading our post, but we think it will be better you like our facebook fanpage and also follow us on twitter below.
Title :
Php tutorial, Login script with Jquery
Description : View Demo Download On today's tutorial were gonna build an Php and Jquery login script. To make it more easy i separated the art...
Rating :
5