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
.jpg)
.PNG)
