>Login system with PHP. Today we will continue PHP lessons, and our article will about creating modern php login system. Possible you already saw similar ways to display login forms, and today we will repeat this by self. In result – it will some small element in your page layout, and after clicking on it – will appear some area, where we will see some welcome message, login form and another useful information. All very user friendly. So, its time to try demo.
Here are sample and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is main page code:
main_page.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<div class="example" id="main">
{login_form}
</div>
</body>
</html>
As we can see – all pretty easy here. I just put one key {login_form} here, which we will using after.
login_form.html
<div class="bar">
<a href="#" id="my_userarea">Log In</a>
</div>
<div style="display: none;" id="my_panel">
<div class="column">
<h3>My website title</h3>
<p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p>
<p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p>
</div>
<div class="column">
<form class="login_form" action="index.php" method="post">
<h3>Log In</h3>
<label>Nickname:</label><input type="text" name="username">
<label>Password:</label><input type="password" name="password">
<input type="submit" name="LogIn" value="Login">
<a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a>
</form>
</div>
<div class="column">
<h3>Still not our member? Join us!</h3>
<p>Which gives us a registration? This gives us opportunity to become full member of our website. You can communicate with another member etc..</p>
<p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p>
</div>
<div style="clear:both"></div>
<hr>
<div class="close"><a id="my_close" class="my_close">Hide this panel</a></div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#my_userarea').click(function(){
$('div#my_panel').slideToggle('slow');
return false;
});
$('#my_close').click(function(){
$('div#my_panel').slideUp('slow');
return false;
});
});
</script>
<h3>You can use username "User1" of "User2" and password "qwerty" to login in system</h3>
This file is our floating login form with 3 columns. And, last one file – logout:
logout_form.html
<div class="bar">
<a href="index.php?logout" id="my_userarea">Log Out</a>
</div>
Step 2. CSS
Here are used CSS styles:
css/main.css
body{background-color:#888;margin:0;padding:0}
.example{position:relative;width:980px;height:700px;background-image:url(../images/background.jpg);border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
.bar{background-color:#444;height:24px;padding:10px}
a#my_userarea{font-size:12px;position:relative;display:block;overflow:hidden;color:#909090;-webkit-border-radius:11px;-moz-border-radius:11px;text-decoration:none;border-radius:11px;background:url(../images/button-user-area.gif) repeat-x 0 0;text-shadow:#000 1px 1px;float:right;padding:4px 10px 3px}
#my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px}
#my_panel .column{float:left;width:30%;padding:15px}
#my_panel .column h3{color:#fff}
#my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block}
#my_panel input[type=text],#my_panel input[type=password]{width:200px}
#my_panel input[type=submit]{background:url(../images/button.png) no-repeat scroll right 0 transparent;width:72px;height:30px;color:#fff;border-width:0}
.more{background:url(../images/more-left.png) no-repeat scroll 0 0 transparent;cursor:pointer;display:block;float:right;padding-left:11px;text-align:center;text-decoration:none}
.more span{background:url(../images/more-right.png) no-repeat scroll right 0 transparent;color:#fff;display:block;height:30px;line-height:29px;padding:0 19px 0 8px}
.more:hover{text-decoration:none;background-position:0 bottom}
.more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom}
#my_panel .close{text-align:center}
#my_panel .close a{color:#07BBE2;cursor:pointer}
Step 3. JS
For our demo I require only jQuery for sliding effect – nothing more :)
js/jquery-1.4.4.min.js
Step 4. PHP
Our main part of project – login functionality. Commonly, we will use our old system, but with new changed of course.
index.php
<?php
// set error reporting level
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
error_reporting(E_ALL & ~E_NOTICE);
// initialization of login system and generation code
$oSimpleLoginSystem = new SimpleLoginSystem();
$sLoginForm = $oSimpleLoginSystem->getLoginBox();
echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm));
// class SimpleLoginSystem
class SimpleLoginSystem {
// variables
var $aExistedMembers; // Existed members array
// constructor
function SimpleLoginSystem() {
$this->aExistedMembers = array(
'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4', //Sample: MD5('qwerty')
'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4'
);
}
function getLoginBox() {
ob_start();
require_once('login_form.html');
$sLoginForm = ob_get_clean();
ob_start();
require_once('logout_form.html');
$sLogoutForm = ob_get_clean();
if (isset($_GET['logout'])) {
if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass']))
$this->simple_logout();
}
if ($_POST['username'] && $_POST['password']) {
if ($this->check_login($_POST['username'], MD5($_POST['password']))) {
$this->simple_login($_POST['username'], $_POST['password']);
return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
} else {
return $sLoginForm . '<h2>Username or Password is incorrect</h2>';
}
} else {
if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) {
if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) {
return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>';
}
}
return $sLoginForm;
}
}
function simple_login($sName, $sPass) {
$this->simple_logout();
$sMd5Password = MD5($sPass);
$iCookieTime = time() + 24*60*60*30;
setcookie("member_name", $sName, $iCookieTime, '/');
$_COOKIE['member_name'] = $sName;
setcookie("member_pass", $sMd5Password, $iCookieTime, '/');
$_COOKIE['member_pass'] = $sMd5Password;
}
function simple_logout() {
setcookie('member_name', '', time() - 96 * 3600, '/');
setcookie('member_pass', '', time() - 96 * 3600, '/');
unset($_COOKIE['member_name']);
unset($_COOKIE['member_pass']);
}
function check_login($sName, $sPass) {
return ($this->aExistedMembers[$sName] == $sPass);
}
}
?>
Our system working with cookies, we will check cookies data to determinate, are member logged or not. Of course, you can have your own login system if you already using some own CMS. But you always can use our login system too. One point, this is not necessary to keep whole array of members directly in this file. Possible better solution will keep it separated or in database as example.
Live Demo
Conclusion
Today we prepared new nice login system which you can use in your projects. If this was useful for you – do not forget to thank us. I would be grateful for your interesting comments. Good luck!
Check this form in IE7/8 – bad design – try to improve your CSS
2 Noname
You sure? I have IE9, but I already switched to IE7 and 8 for testing, all was file
You may not want to store sensitive information in cookies. I think you would be better off storing it in the session.
Yes, I know, possible in next lessons we will make sessions-based system
I like what you’ve done here. My only suggestion would be to set focus to the nickname field, so that a user can instantly start typing.
I need help.
I dont know what to do with index.php file, where do I put it in. I tryed some different things but I keep gettin error.
Please help.
Hi Danny,
What error exactly?
hello sir…i need one help…i wanna to login use my phone number…then the phone number is valid na password send to my email…after only i can access my home page…help me
Hi Gopi,
What a problem exactly do you have? Don’t you know how to send emails? Or what?
Hello: Where can I obtain the rest of scripts or code of the example? “registration.php”; “forgot.php”;
Thanks a lot.-
Hi Marcelo,
Unfortunately, such pages were not implemented in this tutorial.
Sorry but, How do you do to connect to mysql?
thanks for all!!
Hi Diego,
This login system is not connected to mysql,
however, you can read about creating the login system which is linked to mysql here:
https://www.script-tutorials.com/powerful-chat-system/
Two tips from a security guy: Don’t roll your own login system and don’t use any login system from tutorials! Using the PHP code from this tutorial will introduce a number of security vulnerabilities into your website. From personal experience, I’ve found that writing a login system that is secure is actually quite hard to do and is an advanced topic not suitable for beginning programmers. The tutorials here should stick to the design and then link to and use a hardened system like this one:
http://barebonescms.com/documentation/sso/
I’ve been using that for a number of projects. The author knows what they are doing in terms of security, it is actively developed, and has a ton of features that I’m not even using.
@gopi – the above system has two-factor authentication support, which seems to be what you are after. I’m not using it personally but it looks very simple to enable.