 Creating modern looking login system on PHP jQuery
jQuery
> Creating modern looking login system on PHP jQuery
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
download in package
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
01 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 02 <head> 03 <link rel="stylesheet" href="css/main.css" type="text/css" media="all" /> 04 <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> 05 </head> 06 <body> 07 <div class="example" id="main"> 08 {login_form} 09 </div> 10 </body> 11 </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
01 <div class="bar"> 02 <a href="#" id="my_userarea">Log In</a> 03 </div> 04 <div style="display: none;" id="my_panel"> 05 <div class="column"> 06 <h3>My website title</h3> 07 <p>My website description. Our website was created for anybody. Here we can read recent news, tutorials, and find many useful information. Welcome !</p> 08 <p><a class="more" href="#about.php" rel="nofollow"><span>Read more</span></a></p> 09 </div> 10 <div class="column"> 11 <form class="login_form" action="index.php" method="post"> 12 <h3>Log In</h3> 13 <label>Nickname:</label><input type="text" name="username"> 14 <label>Password:</label><input type="password" name="password"> 15 <input type="submit" name="LogIn" value="Login"> 16 <a class="more" href="#forgot.php" rel="nofollow"><span>Forgot password?</span></a> 17 </form> 18 </div> 19 <div class="column"> 20 <h3>Still not our member? Join us!</h3> 21 <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> 22 <p align="center"><a class="more" href="#registration.php" rel="nofollow"><span>Registration</span></a></p> 23 </div> 24 <div style="clear:both"></div> 25 <hr> 26 <div class="close"><a id="my_close" class="my_close">Hide this panel</a></div> 27 </div> 28 29 <script language="javascript" type="text/javascript"> 30 $(document).ready(function() { 31 $('#my_userarea').click(function(){ 32 $('div#my_panel').slideToggle('slow'); 33 return false; 34 }); 35 $('#my_close').click(function(){ 36 $('div#my_panel').slideUp('slow'); 37 return false; 38 }); 39 }); 40 </script> 41 42 <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
1 <div class="bar"> 2 <a href="index.php?logout" id="my_userarea">Log Out</a> 3 </div> Step 2. CSS Here are used CSS styles:
css/main.css
01 body{background-color:#888;margin:0;padding:0} 02 .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} 03 04 .bar{background-color:#444;height:24px;padding:10px} 05 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} 06 #my_panel{background-color:#272727;border:1px solid #444;color:#999;font-size:.85em;z-index:1001;padding:15px;position:absolute;width:948px} 07 #my_panel .column{float:left;width:30%;padding:15px} 08 #my_panel .column h3{color:#fff} 09 #my_panel .login_form input,#my_panel .login_form label{margin-bottom:5px;display:block} 10 #my_panel input[type=text],#my_panel input[type=password]{width:200px} 11 #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} 12 .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} 13 .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} 14 .more:hover{text-decoration:none;background-position:0 bottom} 15 .more:hover span,#my_panel input[type=submit]:hover{background-position:right bottom} 16 #my_panel .close{text-align:center} 17 #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, I will using our old system, but with new changed of course.
index.php
01 <?php 02 03 // set error reporting level 04 if (version_compare(phpversion(), "5.3.0", ">=") == 1) 05 error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED); 06 else 07 error_reporting(E_ALL & ~E_NOTICE); 08 09 // initialization of login system and generation code 10 $oSimpleLoginSystem = new SimpleLoginSystem(); 11 $sLoginForm = $oSimpleLoginSystem->getLoginBox(); 12 echo strtr(file_get_contents('main_page.html'), array('{login_form}' => $sLoginForm)); 13 14 // class SimpleLoginSystem 15 class SimpleLoginSystem { 16 17 // variables 18 var $aExistedMembers; // Existed members array 19 20 // constructor 21 function SimpleLoginSystem() { 22 $this->aExistedMembers = array( 23 'User1' => 'd8578edf8458ce06fbc5bb76a58c5ca4', //Sample: MD5('qwerty') 24 'User2' => 'd8578edf8458ce06fbc5bb76a58c5ca4' 25 ); 26 } 27 28 function getLoginBox() { 29 ob_start(); 30 require_once('login_form.html'); 31 $sLoginForm = ob_get_clean(); 32 33 ob_start(); 34 require_once('logout_form.html'); 35 $sLogoutForm = ob_get_clean(); 36 37 if (isset($_GET['logout'])) { 38 if (isset($_COOKIE['member_name']) && isset($_COOKIE['member_pass'])) 39 $this->simple_logout(); 40 } 41 42 if ($_POST['username'] && $_POST['password']) { 43 if ($this->check_login($_POST['username'], MD5($_POST['password']))) { 44 $this->simple_login($_POST['username'], $_POST['password']); 45 return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>'; 46 } else { 47 return $sLoginForm . '<h2>Username or Password is incorrect</h2>'; 48 } 49 } else { 50 if ($_COOKIE['member_name'] && $_COOKIE['member_pass']) { 51 if ($this->check_login($_COOKIE['member_name'], $_COOKIE['member_pass'])) { 52 return $sLogoutForm . '<h2>Hello ' . $_COOKIE['member_name'] . '!</h2>'; 53 } 54 } 55 return $sLoginForm; 56 } 57 } 58 59 function simple_login($sName, $sPass) { 60 $this->simple_logout(); 61 62 $sMd5Password = MD5($sPass); 63 64 $iCookieTime = time() + 24*60*60*30; 65 setcookie("member_name", $sName, $iCookieTime, '/'); 66 $_COOKIE['member_name'] = $sName; 67 setcookie("member_pass", $sMd5Password, $iCookieTime, '/'); 68 $_COOKIE['member_pass'] = $sMd5Password; 69 } 70 71 function simple_logout() { 72 setcookie('member_name', '', time() - 96 * 3600, '/'); 73 setcookie('member_pass', '', time() - 96 * 3600, '/'); 74 75 unset($_COOKIE['member_name']); 76 unset($_COOKIE['member_pass']); 77 } 78 79 function check_login($sName, $sPass) { 80 return ($this->aExistedMembers[$sName] == $sPass); 81 } 82 } 83 84 ?> 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.
 |
