TUTORIAL:CREATE A LOGIN FORM VALIDATED WITH PHP AND JQUERY

CREATE  TABLE CALLED members WITH 5 FIELDS id firstname lastname email password
INDEX.PHP

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

function login(){
  var email = $('#email').val();//$('#email').val() is the value of the input field with id = email so we are goning to say var email will equal the value of that input
  var pass = $('#pass').val();//$('#pass').val() is the value of the input field with id = pass so we are goning to say var pass will equal the value of that input
  var URL = "parse.php";

  $.post(URL,{action:"login",logname:email,logpass:pass},function(data){
  $("#result").html(data).show();
  });
 }

</script>
<style type="text/css">
<!--
.font {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
}
.result{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 color: #CC0000;
}
.txtstyle{
 height: 25px;
 width: 200px;
 border-top-width: 2px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #DDDDDD;
 border-right-color: #DDDDDD;
 border-bottom-color: #DDDDDD;
 border-left-color: #DDDDDD;
}
.loginbutton {
 clear: left;
}
-->
</style>

<table width="458" border="0" align="center" cellpadding="5" cellspacing="0">
  <tr>
    <td width="261" height="117" align="left" valign="bottom">log in </td>
    <td width="291" align="left" valign="bottom">sgin up</td>
  </tr>
  <tr>
    <td height="155" align="left" valign="top"><span class="font">Email</span><br />
      <input class="txtstyle" type="text" id="email" />//CREATE INPUT WITH TYPE=TEXT AND ID=EMAIL
      <br />
      <span class="font">Password</span><br />
      <input class="txtstyle" type="password" id="pass" />//CREATE INPUT WITH TYPE=PASSWORD AND ID=PASS
      <br />
      <input type="button" class="loginbutton" id="login" onclick="return false" onmousedown="javascript:login();" value="login"/>//CREATE INPUT WITH TYPE=BUTTON AND ONECE THE BUTTON IS CLICKED JAVASCRIPT:LOGIN() WILL RUN
      <br />
      <div id="result" class="result"></div></td>
    <td width="291" align="left" valign="top">SIGN UP FORM WILL BE HERE</td>
  </tr>
</table>
PARSE.PHP
<?php
include_once "mysql.php";

if($_POST['action']=="login"){

$email1 = $_POST['logname'];//$email1 = $('#email').val();
$pass = $_POST['logpass'];//$pass =  $('#pass').val();

if($email1 ==""){echo'Please enter your email'; }//if $email1 has no value show Please enter your email
else{//if $email1 has value
$sql = mysql_query("SELECT * FROM members WHERE email='$email1'");
$email_check = mysql_num_rows($sql); //check if $email1 value exist in the table
if($email_check == 1){//if exist proceed
  
while($row = mysql_fetch_array($sql)){

$password = $row["password"];//get the password

if($pass == ""){echo 'Please enter your password';}//if $pass has no value show Please enter your password

else if(md5($pass) != $password){echo 'Your password is incorrect';}//if encrypted $pass value not equal to
$password show Your password is incorrect

else{//if encrypted $pass value equal to $password the proceed

 //create sessions for the table values
$_SESSION['id']; 
$_SESSION['firstname']; 
$_SESSION['lastname'];  
$_SESSION['email']; 
echo'<script>window.location = "profile.php"</script>';
exit(); 
     }
    }
   }
   else if($email_check != 1){//if doesnt exist show Email is incorrect
   echo 'Email is incorrect';
   }
  }
}

else{echo'<script>window.location = "index.php"</script>';}

?>
PROFILE.PHP
<?php
session_start(); // Must start session first 
include_once "mysql.php";

if (isset($_SESSION['id'])) {  
$id = $_SESSION['id']; 
echo'you are logged in';
 }
else {echo 'you are not logged in';}
?>