Posted on December 9th, 2010
3864 views Hi there And thank you for using this tutorial. This is my first tutorial/script! I'm not going to explain everything, since i guess that you already got the basic understanding of HTML/CSS
EDIT: I've had some problems with the layout of this tutorial, if you got the same problems, then download my tutorial as PDF: Download PDF Index:
Creating our front page The first thing we need to do,, is create our first page, lets call it "index.php" <?PHP session_start(); $path_to_login = 'login/'; include($path_to_login.'login.inc.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Jobbe's Login Script v1.0</title> <style>* {margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;color:#000;}a {color:#F00;}#wrapper {margin:0 auto;width:500px;} </style> </head><body> <div id="wrapper"><h1>Hi <?PHP echo $_SESSION['username']; ?>!</h1><h2>You just accessed a secret page!</h2> </div> </body> </html> This is just a basic html page, with a little PHP. It's the first 5 lines that is interesting: <?PHP session_start(); $path_to_login = 'login/'; include($path_to_login.'login.inc.php'); ?> Basicly what this code does, is tell the browser to start a session, and then include our next file. Creating out PHP logon script The next file you should create is the "login.inc.php" file - I've commented each line in the source code, so I don't have much to say about this: <?PHP ini_set('display_errors','Off');//Use MySQL or not? //This value can be "true" or "false" - "true" = yes, use mysql - and "false" = no, don't use MySQL. $use_mysql = false;//IF ?logout isset then logoutif(isset($_GET['logout'])){//Destroy our sessionunset($_SESSION['username']);//Unset our sessionsession_unset ();//Destroy our sessionsession_destroy ();}if(empty($_SESSION['username'])) {//include user database file//if use_mysql is true, include mysql fileif($use_mysql == false){include($path_to_login.'login.users.php');}if($use_mysql == true){include($path_to_login.'login.users.mysql.php');}//Count users in database$count_users = count($username);//Set some variables$username_set = strtolower($_POST['username']);$password_set = md5($_POST['password']);$match = 0;//Run check on each userfor ($i = 1; $i <= $count_users; $i++) {//Compare login post data with userdatabaseif($username_set == strtolower($username[$i]) && $password_set == $password[$i]){//If we got a match, set match value to 1$match = 1;//set $i to highest user number, so we dont have to wait till the check is done//We dont need to wait, because we got out match$i = $count_users;//If no match,}}//If match value is 1, as it would be set above, if user exist in database, then proceedif($match == 1){//Set session username to POST value$_SESSION['username'] = $username_set;}//If user dont exist/no match then show the login formulaelse{//Include header - first part of login page (Before the login form)include($path_to_login.'login.header.php');//Include the actual forminclude($path_to_login.'login.form.php');//Include footer - the part after the login forminclude($path_to_login.'login.footer.php');//Exit the script, so we wont get the rest of our page, we need to login first!exit;} } ?> Please note this file should be created in a subdir - my subdir is "login"
Create login form files The next step is to create 3 more files: login.header.php:
login.form.php:
<div id="logonbox"> <form action="<?PHP echo $_SERVER["PHP_SELF"] ?>" method="post"> <table border="0"><tr><td class="headline">Username:</td><td><input type="text" name="username" class="input"/></td></tr><tr><td class="headline">Password:</td><td><input type="password" name="password" class="input"/></td></tr><tr><td></td><td><input type="submit" name="submit" value="Logon"/></td></tr> </table> </form> </div> login.footer.php
<br /> <br /> <p class="headline">Example logins:</p> <table border="0"> <tr><td class="headline">Username:</td><td class="content">admin</td></tr><tr><td class="headline">Password:</td><td class="content">admin</td></tr><tr><td class="headline"></td><td class="content"></td></tr><tr><td class="headline">Username:</td><td class="content">guest</td></tr><tr><td class="headline">Password:</td><td class="content">guest</td></tr> </div> </body> </html> I split the login file into 3 files, to make it easier to manage. Setting up Users
Now we will add our users, it's quite simple: Create a 5th file named login.users.php, and put this in it:
<?PHP
// ##################################################################################################################################### //
// This is our userdatabase file, it's allmost plain.
// I've added a few exambles of users, so your should have figgured that by now.
// Please note the passwords, they're stores in a MD5 hash key, if you don't know hot to make one, then use my md5.php file
// Open that file in a browser and it will create your MD5 hash of your password
// I wrote the passwords for my two test users, I DO NOT RECOMMEND that you do the same for your users - the only reason I did it was so you know the password.
// ##################################################################################################################################### //$username[1] = 'admin';//The MD5 password I used for this user is: admin$password[1] = '21232f297a57a5a743894a0e4a801fc3';$username[2] = 'guest';//The MD5 password I used for this user is: guest$password[2] = '084e0343a0486ff05530df6c705c8bb4';
?>
I've created two users, admin and guest
If you want to add another user with the name "Gregory" then you have to write: $username[3] = 'gregory'; $password[3] = '084e0343a0486ff05530df6c705c8bb4'; Note: i changed the [2] to [3] - since this is our 3rd user. I use MD5 hashed passwords for safety, I included a file (In my source zip file), that will convert a password to an MD5 Hash string. Preparing our script for MySQL Here comes the tricky part! If you want the login script to work with a MySQL database, then you should change the $use_mysql value in "login.inc.php" from false to true. And add our final 6th file: <?PHP // Since you opened this file then I guess you want to use MySQL for this login script // First of all, see the "SQL.txt" file, in that you got the SQL dump to create the SQL Userdatabase, with two users //Once thats done then lets move on....// Please specify the server you want to use $server = "SERVER NAME HERE"; // What is the username? $dbusername = "DATABASE USERNAME HERE"; // And the users password ? $dbpasswrd = "DATABASE PASSWORD HERE"; // Finally, lets specify the database we want to use $database = "DATABASE NAME HERE"; // Here we will specify our logon options $con = mysql_connect($server,$dbusername,$dbpasswrd);// If everything goes well then the next line should connect to our databaseif (!$con){die('Could not connect: ' . mysql_error());}//If connected, then lets select our databasemysql_select_db($database, $con);// Lets define our query, so we can create our userdatabase$result = mysql_query("SELECT * FROM users");//And lets create our username and password arrays!$n=1;while($row = mysql_fetch_array($result)){$username[$n] = htmlspecialchars($row['username']);$password[$n] = htmlspecialchars($row['password']);$n++;} // Now that we created our arrays, then we don't need our// database connection anymore,therefore lets disconnect mysql_close($con); ?> Name this file "login.users.mysql.php" (No quotes) Change the logon info for the database, you should also create the database first. Here's an SQL file, that will create the necessary table, and users.
CREATE TABLE `users` (
`id` int(4) NOT NULL AUTO_INCREMENT, `username` text NOT NULL, `password` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; INSERT INTO `users` VALUES(1, 'admin', '21232f297a57a5a743894a0e4a801fc3'); INSERT INTO `users` VALUES(2, 'guest', '084e0343a0486ff05530df6c705c8bb4');
This SQL file will create two users:
Username: admin Password: admin Username: guest Password: guest Once you done all the steps above, you should have a directory tree like this:
And thats basically it! You can download the source code here: login_script_v1.zip (12 kb) |