Friday, 15 March 2013

Creating a Login Page using HTML, PHP, and MySQL

In creating a simple login page we’ll use HTML and the PHP programming language to connect to the MySQL server. What we’re about to do is almost covering the forms and interactive web pages’ built in functions. These technologies used are known as content management system are helpful in interactive web pages.

A few things before we go further:
You’ll need to have XAMPP Control Panel installed and Apache running on port 80 if you’re using Windows. MySQL server should also be running. If you’re using Skype, I recommend you halt its usage while working on this since its using the same port as Apache.

HTML code for the login page

<form name="login" method="post" action="connect.php">

Username: <input type="text" name="username" /><br />
Password: <input type="password" name="password" />
<input type="submit" value="Login">


Just copy and paste this block of code on your notepad, save in html format and run it. I recommend you use the same file names as I did; the same goes for the PHP coding.

PHP Coding to connect the MySQL server


mysql_select_db("database_name",$connect) or
die (mysql_error().":<b> ".mysql_error()."</b>");

       $username = $_POST['username'];
       $password = $_POST['password'];
                   $username = mysql_real_escape_string($username);
                   $password = mysql_real_escape_string($password);
                   $sql = "SELECT * FROM table_name WHERE username='$username' and password='$password'";
       $result = mysql_query($sql);

                   $count = mysql_num_rows($result);
                   if($count == 1)
                                print"<script language='javascript'>alert('Welcome!');</script>";
                                print"<script language='javascript'>alert('Username or Password Incorrect!');</script>";
                                die (mysql_error().":<b> ".mysql_error()."</b>");

  A few tweaks to work on:
You should create a database and have its name replace wherever the code says ‘database_name’ and also create a table in the database to replace ‘table_name’ on the code. The column names used should be the same as the ones used on the code.

The ‘$_POST’ variable names are the names given to the variables on the login page.
There’s however a pitfall on the code, there’s no ‘nextpage.html’ created to display whenever the user logs in, so you will have to create a page that will display and replace ‘nextpage.hmtl’.
I’ve also incorporated the use of JavaScript to alert whenever the login details are correct or otherwise.

I’ve seen a lot of people struggle with launching the form pages on the XAMPP to run them on their localhost. All the pages you’re working on should be saved in the xampp sub-folder called htdocs that is located on most computers in drive C. So, for the login page above just have: localhost/login.html as your address. 

Your browser should display a webpage similar to this one.

Just comment for any queries or anything. Have fun coding!

No comments:

Post a Comment