Step 1. Setting up the database with PHPMyAdmin.

The first task is to setup the database, the users table and the user records.

• Open your favorite browser (Firefox recommended) and go to http://localhost/phpmyadmin
• Click on the tab ‘Databases ‘ and type ‘myapp‘ where it says ‘Create new database’ and click ‘Create‘
  

• Select the new database that you have created and create the table  ‘users‘ with 5 fields and hit ‘Go‘
  
• on the ‘Create Table‘ screen, fill in the fields and click on ‘Save‘
  •     id INT( 3) PRIMARY AUTO INCREMENT
  •     name VARCHAR(100)
  •     username VARCHAR(20)
  •     password VARCHAR(60)
  •     type VARCHAR(20)
    
• In the navigation area (left), click on the table ‘users‘ and click on ‘Insert‘ on the control pane (right)
• Fill values for the fields (without the quotes) and click on ‘Go‘
  id ‘1’, name ‘Mr. Tom Jones’,  username ‘admin’, password ‘somepassword’, type ‘administrator’
  
• The equivelent SQL command would be
  “INSERT INTO `myapp`.`users` (`id`, `name`, `username`, `password`, `type`) VALUES (‘1’, ‘Mr. Tom Jones’, ‘admin’, MD5(‘somepassword’), ‘administrator’);“
• To quickly add another user you can run the query
  “INSERT INTO `myapp`.`users` (`id`, `name`, `username`, `password`, `type`) VALUES (‘2’, ‘Ms. Tessa Hinds’, ‘tessa’, MD5(‘someotherpassword’), ‘officer’);“
• Now click on the table ‘users’ and it should look like the following image.
  

• Move to Step 2.

Step 2. Setting up the project directory structure.

• Navigate to your WAMP install directory c:\wamp64\www
  Tip: you can get this quickly by going to the WAMP tray icon and click on the ‘www directory‘
  
• Create a directory  ‘myapp‘
• Inside of the directory ‘myapp‘, create the folders: ‘scripts‘, ‘includes‘ and ‘css‘
  

• Move to Step 3.

  Step 3. Creating the core application files.

• Open your favorite code editor (maybe NotePadd++), create a file called ‘constants.php‘  and insert the following code and save in the directory ‘includes‘:

<?php
// Database Constants - should match those on your development machine
define("DB_SERVER", "localhost");
define("DB_USER", "root");
define("DB_PASSWORD", "yourmysqlpassword");
define("DB_NAME", "myapp"); 
?>

• Create a new file called ‘get_sel_db.php‘ in the ‘includes‘ directory and save the following code:

<?php
require("constants.php");

try{
 $db = new PDO("mysql:host=" . DB_SERVER . ";dbname=" . DB_NAME , DB_USER, DB_PASSWORD);
}
catch(PDOException $e){
 echo $e->getMessage();
}
?>

• Create a new file called ‘close_db.php‘ in the ‘includes‘ directory and save the following code:

<?php
 //destroying the object.... 
 $db = null
?>

• Create a file called ‘functions.php‘ in the ‘includes‘ directory and save with the following code:

<?php
 function query($query) {
 require_once("get_sel_db.php");
 $st = $db->query($query);
 $success = $st->fetchAll(PDO::FETCH_ASSOC);

require_once("close_db.php");
 return $success;
 }
?>

• Create a file called ‘session.php‘ in the ‘includes‘ directory and save with the code:

<?php
    session_start();
    function logged_in() {
        return isset($_SESSION['logged_in_user_id']);
    }
?>

• Move to Step 4.

 Step 4. Creating & Testing the Login Screen

• Create a file called ‘index.php‘ in the ‘myapp‘ (application root directory) and save it with the following code:

<?php
 //setting up the needed includes files
 require_once("includes/session.php");
 require_once("includes/functions.php");
?>
<?php
 if (isset($_GET['logout'])) {
 session_destroy();
 $message = "You have logged out of the system. Hope to see you again.";
 print "<meta http-equiv=\"refresh\" content=\"0;URL=?message={$message}\">";
 } else {
?>
<?php
 if (isset($_GET['login'])) {
 // process the login request
 if (isset($_POST['username'])) $username = $_POST['username'];
 if (isset($_POST['password'])) $password = MD5($_POST['password']);

$result = query("SELECT * FROM users WHERE username = '{$username}' AND password = '{$password}' LIMIT 1");

if (!empty($result)) {
 // user is authenticated
 $user = $result[0];
 $_SESSION['logged_in_user_id'] = $user['id'];
 $_SESSION['name'] = $user['name'];
 $_SESSION['type'] = $user['type'];

// bounce to the index file with message
 $message = "You have successfully logged in!";
 print "<meta http-equiv=\"refresh\" content=\"0;URL=?message={$message}\">";
 } else {
 // bounce to the index file with a message
 $message = "Please check your username and password and try again";
 print "<meta http-equiv=\"refresh\" content=\"0;URL=?message={$message}\">";
 }
 }
 else {
 //render the document
?>
<!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>My App</title>
 <link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<?php if (!logged_in()){
 // render login screen
 if (isset($_GET['message'])) echo $_GET['message'];
?>
 <div align="center">
 <h1>Welcome to My App</h1>
 <p>To proceed, please login.</p>
 <form action="?login=yes" method="post" enctype="multipart/form-data" name="login" target="_self">
 <label>Username: </label><input name="username" id="username" type="text" />
 <label>Password: </label><input name="password" id="password" type="password" />
 <input name="submit" type="submit" value="Login" />
 </form>
 </div>

<?php
} // end if not logged in
 else {
 /// show the user that they have logged in and now can use the app
 if (isset($_GET['message'])) echo $_GET['message'];
 ?>
 Welcome <?php echo $_SESSION['name']; ?> You have logged in as <?php echo $_SESSION['type']; ?> | [<a href="?logout=yes">logout</a>]<br />

<!--here you can place you application content, menu etc... -->
 <hr/>
 <h1>Select you access level from the following:</h1>
 <div>
 [<a href="#">Do Something</a>]
 </div>
 <div>
 [<a href="#">Do Something Else</a>]
 </div>
 <div>
 [<a href="#">Do Something Else</a>]
 </div>
<?php
 } // end if successfully logged in...
?>

</body>
</html>
<?php
 } // end if not processing a login request
} // end if not loggin out
?>

Your application setup is now complete, open your favorite browser (Firefox) and go to http://localhost/myapp to test your application. You can test the login as ‘admin’ and as ‘tessa’.