In this tutorial, I will show you how to quickly prepare a login screen to your PHP/MySQL web-application. You will be introduced to Sessions, PHP functions, SQL query, MD5 encryption and PHPMyAdmin.
Prerequisites: Some basic knowledge of the C programming language or the PHP scripting language, a fully functional development environment (see WAMP Server Setup Guide) and basic understanding of SQL.
[tabs tab1=”Step 1. Database Setup” tab2=”Step 2. Project Setup” tab3=”Step 3. Creating Core Files” tab4=”Step 4. Creating index.php & Testing “]
[tab]
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.
[/tab]
[tab]
Step 2. Setting up the project directory structure.
- Navigate to your WAMP install directory c:wamp64www
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.
[/tab]
[tab]
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.
[/tab]
[tab]
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’.
[/tab]
[/tabs]
Hope you enjoyed this article. Please do give us your feed-back.
– Girendra Persaud (November 2012, Update August 2017)
[nrelate-related]
