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.

Designing input fields using Jquery

To make a website look more professional it is imtortant to use the latest programing languages like Html5 and Css3 and of course Jquery.

First of all we will start with css, making it beautiful then we will use jquery to handle user clicks.

Download Create 3 files, index.html, style.css and script.js
Open index.html and write
<html>
<head>
<title>Jquery input fields | thecodertips.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<center><a href="http://thecodertips.com" id="tut" title="Read the tutorial">&#187;&#187; Tutorial &#171;&#171;</a><br /><br />
<input type="text" id="box" value="Type something..">
</center>
</body>
</html>
Now open style.css and write
#box{
outline: none; /* remove default borders */
padding: 5px; /* zoom it by 5px */
border: 1px solid gray; /* set an black border */
color: gray; /* text in the box is set to gray */
/* set border radius */
-webkit-border-radius: 3px; /* to work with google chrome and safari */
-moz-border-radius: 3px; /* to work with firefox */
border-radius: 3px; /* other browsers like ie */
}

/* when the user is typing in the box */
#box:focus{
border: 1px solid #0066FF;
color: #333;
}

/* to style the tutorial link */
#tut{
text-decoration: none;
color: #0066FF;
}
Now open script.js and write
$(document).ready(function(){

// set a variable to the box
var box = $("#box");

// once box get's clicked
box.click(function(){
box.val(""); // set it to empty
});

});

JQuery - open multiple url at same time

Im gonna show a quick tip on how to open multiple url using jquery.
Lets get into point 
The code is simple
$(function(){ 
window.open('http://twitter.com/PHPTutorials2'); 
window.open('http://twitter.com/teknologji.el'); 
}); 

Beautiful Jquery mail form using Php and Css

Huh, more than 1 hour of work and i finished it now.
An amaizing Jquery Form to send an email.

Once someone clicks on any of the boxes they get empty.
Input data first get filtered for empty or same text of the input default box.

Enough talking!

Note! Downloaded version is much cooler.

View Demo Download


This is index.html

<html>
<head>
<title>Less4us ~ Mail form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<!-- http://less4us.blogspot.com -->
<span id="sucess">Success! Mail sent succsesfuly</span>
<span id="error">Error! Mail not sent, please check details</span>
<center><h2>Jquery email form</h2></center>
<div id="box">
<span>Name:</span><br>
<input type="text" value="Your name.." name="name" id="name"><br>
<span>Email:</span><br>
<input type="text" value="email@something" name="email" id="email"><br>
<span>Subject:</span><br>
<input type="text" value="Mail subject.." name="subject" id="subject"><br>
<span>Body:</span><br>
<textarea name="body" id="body">Reason of contacting..</textarea><br>
<input type="submit" id="submit" value="Contact">
</div>
</body>
</html>


I included jquery on the file downloads, if you want this script for your website i suggest replacing:


<script type="text/javascript" src="jquery.js"></script>

With

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Now the style.css


#box{
margin-left: 10px;
}
#box span{
color: #999;
font-size: 13px;
}
#box input[type="text"], #box textarea{
outline: none;
color: gray;
border: 1px solid #6495ED;
}
#box input[type="text"]:focus, #box textarea:focus{
color: gray;
border: 1px solid gray;
}
#box input[type="text"]:hover, #box textarea:hover{
border: 1px solid green;
color: #009999;
}
#box input[type="text"]{
padding: 5px;
-webkit-border-radius: 5px;
}
#box textarea{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 350px;
height: 100px;
}
#box input[type="submit"]{
color: gray;
padding: 5px;
border: 1px solid gray;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
#box input[type="submit"]:hover{
color: white;
background: black;
border: 1px solid black;
}
#sucess{
margin-left:25%;
margin-right:25%;
background: #7FFF00;
display: block;
padding: 10px;
text-align: center;
font-size: 15px;
color: green;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#error{
margin-left:25%;
margin-right:25%;
background: #FA8072;
display: block;
padding: 10px;
text-align: center;
font-size: 15px;
color: red;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

And submit.php file, i made it simple just to show the idea of the tutorial


<?php

// send the email

$data = " Name --> ".$_GET['name']. "
Body --> ".$_GET['body']."
-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-0-
";

mail( $_GET['email'],  $_GET['subject'] ,  $data);
?>



Thats it, and dont forget, sharing is caring :)

Jquery plugin Think Box | Amaizing jquery tooltip

This plugin was one of my latest developements.
Due to the fact that moving to a new blog i did not spend anymore time with it.
In fact is an amaizing jQuery plugin called Think Box.

Live example on PHP Tutorials (not avaiable)

Note, this plugin must be uploaded on a real server for jquery.cookie to work.
If there will be any interest on it, i may publish future versions.

Download at PHP Tutorials