Pages

Wednesday, June 8, 2016

How to create a login screen using php/css tutorial

Here is a simple tutorial on how to create a login page using php and some css. The login page hase username and password. It uses mysql database validate the login form. The database name is db while the table name is users5050. It contains three filed the id which is auto increment, the username and password which is given bellow:
Copy and paste this sql in your phpMyAdmin.

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `users` (`id`, `username`, `password`) VALUES
(1, 'Tacman', '12345');

ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

We are going to create five pages

index.php
login.php
connection.php
auth.php
home.php
Copy the following code and paste it in each page then run your index page
index.php
The index page contains the username and password. Session is unset at first but starts as soon as you try to login. It takes the value you entered and compare it with the one stored in the database we just created. Here is the index.php code:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
   <?php
//Start session
session_start();
//Unset the variables stored in session
unset($_SESSION['SESS_MEMBER_ID']);
unset($_SESSION['SESS_FIRST_NAME']);
unset($_SESSION['SESS_LAST_NAME']);
?>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form name="loginform" action="login.php" method="post">
<table width="309" border="0" align="center" cellpadding="2" cellspacing="5">
  <tr>
    <td colspan="2">
<!--the code bellow is used to display the message of the input validation-->
<?php
if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
echo '<ul class="err">';
foreach($_SESSION['ERRMSG_ARR'] as $msg) {
echo '<li>',$msg,'</li>'; 
}
echo '</ul>';
unset($_SESSION['ERRMSG_ARR']);
}
?>
</td>
  </tr>
  <tr>
    <td width="116"><div align="right">Username</div></td>
    <td width="177"><input name="username" type="text" /></td>
  </tr>
  <tr>
    <td><div align="right">Password</div></td>
    <td><input name="password" type="password" /></td>
  </tr>
  <tr>
    <td><div align="right"></div></td>
    <td><input name="" type="submit" value="login" /></td>
  </tr>
</table>
</form>
    </body>
</html>
login.php

<?php
//Start session
session_start();

//Include database connection details
require_once('connection.php');

//Array to store validation errors
$errmsg_arr = array();

//Validation error flag
$errflag = false;

//Function to sanitize values received from the form. Prevents SQL injection
function clean($str) {
$str = @trim($str);
if(get_magic_quotes_gpc()) {
$str = stripslashes($str);
}
return $str;
}

//Sanitize the POST values
$username = clean($_POST['username']);
$password = clean($_POST['password']);

//Input Validations
if($username == '') {
$errmsg_arr[] = 'Username missing';
$errflag = true;
}
if($password == '') {
$errmsg_arr[] = 'Password missing';
$errflag = true;
}

//If there are input validations, redirect back to the login form
if($errflag) {
$_SESSION['ERRMSG_ARR'] = $errmsg_arr;
session_write_close();
header("location: index.php");
exit();
}

//Create query
$qry="SELECT * FROM users WHERE  username='$username' AND password='$password'";
$result=mysqli_query($connect,$qry);

//Check whether the query was successful or not
if($result) {
if(mysqli_num_rows($result) > 0) {
//Login Successful
session_regenerate_id();
$member = mysqli_fetch_assoc($result);
$_SESSION['SESS_MEMBER_ID'] = $member['id'];
$_SESSION['SESS_FIRST_NAME'] = $member['username'];
$_SESSION['SESS_LAST_NAME'] = $member['password'];
session_write_close();
header("location: home.php");
exit();
}else {
//Login failed
$errmsg_arr[] = 'user name and password not found';
$errflag = true;
if($errflag) {
$_SESSION['ERRMSG_ARR'] = $errmsg_arr;
session_write_close();
header("location: index.php");
exit();
}
}
}else {
die("Login failed");
}

?>
connection.php

<?php
//database details
$DB_server = "localhost";
$DB_user   = "root";
$DB_pass   = "";
$DB_name   = "db";

//connevt to database
$connect = mysqli_connect($DB_server, $DB_user, $DB_pass, $DB_name);
if(mysqli_connect_errno($connect)){
echo "Cannot establish connection with server";
}


auth.php

<?php
//Start session
session_start();
//Check whether the session variable SESS_MEMBER_ID is present or not
if(!isset($_SESSION['SESS_MEMBER_ID']) || (trim($_SESSION['SESS_MEMBER_ID']) == '')) {
header("location: index.php");
exit();
}

?>

home.php

<?php
require_once('auth.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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
font-size: 36px;
font-weight: bold;
}
-->
</style>
</head>

<body>
<p align="center" class="style1">Login successfully </p>
<p align="center">This page is the home, you can put some stuff here......</p>
<p align="center"><a href="index.php">logout</a></p>
</body>

</html>

Results/Screen Shoots.



If you are a newbie don't worry l will post a tutorial on how to create,drop,update tables in mysql database. For more enquires contact me at tacticshustle@gmail.com

No comments:

Post a Comment