How to:A Simple PHP Login Form Using Mysql

Step 1:  Go to  following link  and click PhpmyAdmin is which under Tools menu

Step 2 : Create Database ‘test_db’

Step 3 : Create table ‘user’ with three fields .

CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Step 4: Till step3 we have created Database and table name . Next we are going to insert the values in the table.(username and password).

We can insert in two ways :

  • One way is directly which is same as we created the table .
  • Second way is by inserting the SQL query.

Step 5 :Create four PHP files as mentioned below &  Open notepad ++ and paste following php codes into it . Finally dont forget to save these files into htdocs folder .(It is present in XAMMP folder)

  • main_login.php
  • check_login.php
  • login_success.php
  • logout.php

Let’s create a folder say Login in htdocs folder , in which we will save all these php files which is mentioned above

main_login.php

<table width=”300″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”1″ bgcolor=”#CCCCCC”>
<tr>
<form name=”form1″ method=”post” action=”check_login.php”>
<td>
<table width=”100%” border=”0″ cellpadding=”3″ cellspacing=”1″
bgcolor=”#FFFFFF”>
<tr>
<td colspan=”3″><strong>Login Form  </strong></td>
</tr>
<tr>
<td width=”78″>Username</td>
<td width=”6″>:</td>
<td width=”294″><input name=”myusername” type=”text” id=”myusername”/>
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name=”mypassword” type=”text” id=”mypassword”/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type=”submit” name=”Submit” value=”Login”/></td>
</tr>
</table>
</td>
</form>
</tr>
</table>

check_login.php

<?php
$host=”localhost”; // Host name
$username=””; // Mysql username
$password=””; // Mysql password
$db_name=”test”; // Database name
$tbl_name=”test”; // Table name

// Connect to server and select database.
mysql_connect(“$host”, “$username”, “$password”)or
die(“cannot connect”);
mysql_select_db(“$db_name”)or die(“cannot select DB”);

// username and password sent from form
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];

// To protect MySQL injection (more detail about MySQL injection)
$myusername = stripslashes($myusername);
$mypassword = stripslashes($mypassword);
$myusername = mysql_real_escape_string($myusername);
$mypassword = mysql_real_escape_string($mypassword);

$sql=”SELECT * FROM $tbl_name WHERE username=’$myusername’ and
password=’$mypassword'”;
$result=mysql_query($sql);

$count=mysql_num_rows($result);

if($count==1){
session_register(“myusername”);
session_register(“mypassword”);
header(“location:login_success.php”);
}
else {
echo “Wrong Username or Password”;
}
?>

login_success.php

< ?
session_start();
if(!session_is_registered(myusername)){
header(“location:main_login.php”);
}
?>
<html>
<body>
Login Successful
</body>
</html>

logout.php

< ?
session_start();
session_destroy();
?>

 

FInally run your script .

Jquery The $.proxy()

One of the drawbacks to using callback functions in jQuery has always been that when they are executed by a method of the library, the context is set to a different element. For example, if you have this markup:

<div id="panel" style="display:none">
    <button>Close</button>
</div>

And you try to execute this code:

$('#panel').fadeIn(function(){
    // this points to #panel
    $('#panel button').click(function(){
        // this points to the button
        $(this).fadeOut();
    });
});

You will run into a problem – the button will disappear, not the panel. With $.proxy, you can write it like this:

$('#panel').fadeIn(function(){
    // Using $.proxy to bind this:

    $('#panel button').click($.proxy(function(){
        // this points to #panel
        $(this).fadeOut();
    },this));
});

Which will do what you expect. The $.proxy function takes two arguments – your original function, and a context. It returns a new function in which the value of this is always fixed to the context. You can read more about $.proxy in the docs.

Jquery Keep Selectors Simple

Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById()getElementsByTagName() andgetElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.

$('li[data-selected="true"] a')	// Fancy, but slow
$('li.selected a')	// Better
$('#elem')	// Best

Selecting by id is the fastest. If you need to select by class name, prefix it with a tag – $('li.selected'). These optimizations mainly affect older browsers and mobile devices.

Accessing the DOM will always be the slowest part of every JavaScript application, so minimizing it is beneficial. One of the ways to do this, is to cache the results that jQuery gives you. The variable you choose will hold a jQuery object, which you can access later in your script.

var buttons = $('#navigation a.button');

// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

Another thing worth noting, is that jQuery gives you a large number of additional selectors for convenience, such as:visible:hidden:animated and more, which are not valid CSS3 selectors. The result is that if you use them the library cannot utilize querySelectorAll(). To remedy the situation, you can first select the elements you want to work with, and later filter them, like this:

$('a.button:animated');	// Does not use querySelectorAll()
$('a.button').filter(':animated');	// Uses it

The results of the above are the same, with the exception that the second example is faster.