PHP Login Project (PHP Login script tutorial)

In web development, we want to secure our pages from unauthorized users.
so we need a secure log in system to protect our data from other users.
here i show you that how to implement secure log in project via help of Php &  MySQL.
in this project we use following files:
1. index.html (this is main interface of our project & also include a  log in form)
2.loginproc.php (this is processing file to check  username & password correct or not)
3.config.inc (this is used for database connection)
4.logout.php (this is used for log out process)
5.main_page_after_login.php (the page we want to secure from others)
6.wrong_password.html  (if the user enter wrong password )

First we create the database table
2. users.sql
-- phpMyAdmin SQL Dump 
-- version 3.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Jul 03, 2014 at 05:39 AM
-- Server version: 5.5.24-log
-- PHP Version: 5.3.13

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `phplogin`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `username` varchar(220) NOT NULL,
  `password` varchar(220) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`username`, `password`) VALUES
('admin', '123'),
('govind', '123');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


1. index.html
<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <title>Log in form Designed by Govind Prajapat</title>
        <meta name="description" content="Custom Login Form Styling with CSS3" />
        <meta name="keywords" content="css3, login, form, custom, input, submit, button, html5, placeholder" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/modernizr.custom.63321.js"></script>
		<!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
                
               
            </div><!--/ Codrops top bar -->
			
			<header>
			
				<h1><strong>Simple Login</strong>Based on php</h1>
				<h2>Developed By-<a href="http://grprajapat.blogspot.com"><font color="red">Govind Prajapat</font></a>.</h2>
				
				

			 	<div class="support-note">
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main">
				<form class="form-1" form method="POST" action="loginproc.php">
					<p class="field">
						<input type="text" name="username" placeholder="Username or email">
						<i class="icon-user icon-large"></i>
					</p>
						<p class="field">
							<input type="password" name="password" placeholder="Password">
							<i class="icon-lock icon-large"></i>
					</p>
					<p class="submit">
						<button type="submit" name="submit" value="Login"><i class="icon-arrow-right icon-large"></i></button>
					</p>
				</form>
			</section>
		
        </div>
    </body>
</html>
2. loginproc.php
<?php
//file created by govind prajapat
//file download from www.grprajapat.blogspot.com
// Inialize session
session_start();

// Include database connection settings
include('config.inc');

// Retrieve username and password from database according to user's input
$login = mysql_query("SELECT * FROM users WHERE (username = '" . mysql_real_escape_string($_POST['username']) . "') and (password = '" . mysql_real_escape_string(($_POST['password'])) . "')");

// Check username and password match
if (mysql_num_rows($login) == 1) {
// Set username session variable
$_SESSION['username'] = $_POST['username'];
// Jump to secured page
header('Location: main_page_after_login.php');
}
else {
// Jump to login page
header('Location: wrong_password.html');
}

?>
3. config.inc
<?php

//file created by govind prajapat
//file download from www.grprajapat.blogspot.com
$hostname = 'localhost';        // Your MySQL hostname. Usualy named as 'localhost', so you're NOT necessary to change this even this script has already online on the internet.
$dbname   = 'phplogin'; // Your database name.
$username = 'root';             // Your database username.
$password = '';                 // Your database password. If your database has no password, leave it empty.

// Let's connect to host
mysql_connect($hostname, $username, $password) or DIE('Connection to host is failed, perhaps the service is down!');
// Select the database
mysql_select_db($dbname) or DIE('Database name is not available!');

?>
4. logout.php
<?php

// Inialize session
session_start();

// Delete certain session
unset($_SESSION['username']);
// Delete all session variables
// session_destroy();

// Jump to login page
header('Location: index.html');

?>
5. main_page_after_login.php
<?php
//file created by govind prajapat
//file download from www.grprajapat.blogspot.com
// Inialize session
session_start();

// Check, if username session is NOT set then this page will jump to login page
if (!isset($_SESSION['username'])) {
header('Location: index.html');
}

$secretword = $_SESSION["username"] ;
		
?>
<body background="images/bg.jpg">
</body>
		<p style="color: #708090; background-color: #FFFFFF" align="center" > <font size="6">This page show after the successfully login </font><font size="3" align="right">welcome <font color="red"><?php echo $secretword ?></font></font></p>
 <p><a href="logout.php">Click here to Logout</a></p>

6. worng_password.html
<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
         <title>Log in form Designed by Govind Prajapat</title>
        <meta name="description" content="Custom Login Form Styling with CSS3" />
        <meta name="keywords" content="css3, login, form, custom, input, submit, button, html5, placeholder" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/modernizr.custom.63321.js"></script>
		<!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
                
               
            </div><!--/ Codrops top bar -->
			
			<header>
			
				<h1><strong>Simple Login</strong>Based on php</h1>
				<h2>Developed By-<a href="http://grprajapat.blogspot.com"><font color="red">Govind Prajapat</font></a>.</h2>
				
				

			 	<div class="support-note">
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main">
			<h3> <font color="red">Please check your username & password!</font></h3>
				<form class="form-1" form method="POST" action="loginproc.php">
					<p class="field">
						<input type="text" name="username" placeholder="Username or email">
						<i class="icon-user icon-large"></i>
					</p>
						<p class="field">
							<input type="password" name="password" placeholder="Password">
							<i class="icon-lock icon-large"></i>
					</p>
					<p class="submit">
						<button type="submit" name="submit" value="Login"><i class="icon-arrow-right icon-large"></i></button>
					</p>
				</form>
			</section>
		
        </div>
    </body>
</html>



Source Code of this project




Live Demo of this project
click here to live demo




Linux Installation Guide