Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Today we are going to build a registration system that keeps track of which users are admin and which
are normal users. The normal users in our application are not allowed to access admin pages. All users
(Admins as well as normal users) use the same form to login. After logging in, the normal users are
redirected to the index page while the admin users are redirected to the admin pages.
Recommended Udemy course: The Complete PHP MySQL Professional Course with 5 Projects
So let's start with creating the files, shall we? Navigate to the folder on your machine that is accessible to
the server (that is, htdocs if you are using xampp and www if you're using wampp), and create the following
files and folders:
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
</head>
<body>
<div class="header">
<h2>Register</h2>
</div>
<form method="post" action="register.php">
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="">
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label>Confirm password</label>
<input type="password" name="password_2">
</div>
<div class="input-group">
1
<button type="submit" class="btn" name="register_btn">Register</button>
</div>
<p>
Already a member? <a href="login.php">Sign in</a>
</p>
</form>
</body>
</html>
Then open up style.css file and spit out this css code in it:
2
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
#user_type {
height: 40px;
width: 98%;
padding: 5px 10px;
background: white;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
.profile_info img {
display: inline-block;
width: 50px;
height: 50px;
margin: 5px;
3
float: left;
}
.profile_info div {
display: inline-block;
margin: 5px;
}
.profile_info:after {
content: "";
display: block;
clear: both;
}
This css code will be used for styling our entire application.
If we refresh the register.php page on the browser, we get this beauty:
What we want now is for the user to fill the form and press the register button so that the info can be saved
in the database. So we move on to the next step.
Let's create a database called multi_login. In multi_login database, create a table called users with the
following fields:
id - int(10)
username - varchar(100)
email - varchar(100)
user_type - varchar(100)
password - varchar(100)
That's all we need for our database.
Let's move over to our register.php file once again and do some modifications.
First we should make sure the form's method attribute is set to post and that the action attribute is set
to register.php meaning that when the register button is clicked, the form values are submitted to the same
page.
Let's now write the code to receive these values and stores them in the database. But it is my custom to
avoid, as much as possible, mixing up php code in html so I'll go ahead and create a functions.php file to
put this code inside and then make this code available in the register.php file.
At the very top (first line) of register.php file, add this line of code:
4
//...
Also, we want that when the user doesn't enter the form values correctly, error messages should be
displayed guiding them to do it correctly. In the same register.php file, right after the opening <form> tag,
add this code
<?php
session_start();
// connect to database
$db = mysqli_connect('localhost', 'root', '', 'multi_login');
// variable declaration
$username = "";
$email = "";
$errors = array();
// REGISTER USER
function register(){
// call these variables with the global keyword to make them available in function
global $db, $errors, $username, $email;
// receive all input values from the form. Call the e() function
// defined below to escape form values
$username = e($_POST['username']);
$email = e($_POST['email']);
$password_1 = e($_POST['password_1']);
$password_2 = e($_POST['password_2']);
5
array_push($errors, "Email is required");
}
if (empty($password_1)) {
array_push($errors, "Password is required");
}
if ($password_1 != $password_2) {
array_push($errors, "The two passwords do not match");
}
if (isset($_POST['user_type'])) {
$user_type = e($_POST['user_type']);
$query = "INSERT INTO users (username, email, user_type, password)
VALUES('$username', '$email', '$user_type',
'$password')";
mysqli_query($db, $query);
$_SESSION['success'] = "New user successfully created!!";
header('location: home.php');
}else{
$query = "INSERT INTO users (username, email, user_type, password)
VALUES('$username', '$email', 'user', '$password')";
mysqli_query($db, $query);
$user = mysqli_fetch_assoc($result);
return $user;
}
// escape string
function e($val){
global $db;
return mysqli_real_escape_string($db, trim($val));
}
function display_error() {
6
global $errors;
Easy right?
If you observe keenly you can now see the difference between a user and an admin. In the register()
function, the user is being saved as admin if the user_type variable was sent in the post request or
as user, if no user_type was sent. Since our form doesn't have any field for the user_type, it is obvious that
the user we are creating will be saved as user and not admin.
When a user is registered, we get the last inserted id (id of the registered user) and log them in. From the
user's id, we are able to get all the other attributes of the user using the getUserById() function. After getting
the user, we put them in the session variable as an array called user.
Storing the user in a session variable means that the user is available even if you refresh and navigate to
other pages (where session has been started). The user variable in the session doesn't get lost; it can only
be lost by unsetting it (this is how we log the user out. Coming soon...).
Now back to our registration form, you notice that when you input values and click the register button, you
are redirected to the index.php page. But it's blank. So let's make it look like an index page.
Open up index.php file in your text editor and put the following code in it.
<?php
include('functions.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h2>Home Page</h2>
</div>
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<!-- logged in user information -->
<div class="profile_info">
<img src="images/user_profile.png" >
7
<div>
<?php if (isset($_SESSION['user'])) : ?>
<strong><?php echo $_SESSION['user']['username'];
?></strong>
<small>
<i style="color: #888;">(<?php echo
ucfirst($_SESSION['user']['user_type']); ?>)</i>
<br>
<a href="index.php?logout='1'" style="color:
red;">logout</a>
</small>
Now if you register a new user, it logs them in and redirects them to an index page that looks like this:
function isLoggedIn()
{
if (isset($_SESSION['user'])) {
return true;
}else{
return false;
}
}
This function when called, tells you if a user is logged in or not by returning true or false.
8
Open the index.php file (or any file you want accessible only to logged in users) and paste this code right
after the include statement at the top of the file:
<?php
include('functions.php');
if (!isLoggedIn()) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}
//...
If the user is not logged in and tries to access this page, they are automatically redirected to the login page.
To log the user out, let's add this code in the functions.php file:
<div class="input-group">
<label>Username</label>
<input type="text" name="username" >
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password">
</div>
<div class="input-group">
<button type="submit" class="btn" name="login_btn">Login</button>
</div>
<p>
Not yet a member? <a href="register.php">Sign up</a>
</p>
9
</form>
</body>
</html>
One last thing, add this if statement and this function inside functions.php:
// LOGIN USER
function login(){
global $db, $username, $errors;
$_SESSION['user'] = $logged_in_user;
$_SESSION['success'] = "You are now logged in";
header('location: admin/home.php');
}else{
$_SESSION['user'] = $logged_in_user;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}
}else {
array_push($errors, "Wrong username/password combination");
}
}
10
}
Basically what this does is: if the login button is clicked, the login() function is called which logs the user in.
Notice that when the user is logged in, it also does a check: if the user is admin, it redirects them to the
admin/home.php page. If however, it is just a normal user, he/she is redirected to the index.php page.
Now let's get to work on the admin site. We are going to be using the files in the admin folder (create_user
and home.php). These files are available only to admin users, which means only an admin can create
another admin.
Open up create_user.php and paste this code in it:
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="<?php echo $username;
?>">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="<?php echo $email; ?>">
</div>
<div class="input-group">
<label>User type</label>
<select name="user_type" id="user_type" >
<option value=""></option>
<option value="admin">Admin</option>
<option value="user">User</option>
</select>
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password_1">
</div>
11
<div class="input-group">
<label>Confirm password</label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn" name="register_btn"> + Create
user</button>
</div>
</form>
</body>
</html>
Besides styling, the main difference between this page and the register page is the option-select field in the
create_user.php page that permits the admin to specify the user type. Therefore an admin can create a
normal user as well as an admin.
I'll just go ahead and paste the complete code of home.php inside the file. Here it is:
<?php
include('../functions.php');
if (!isAdmin()) {
$_SESSION['msg'] = "You must log in first";
header('location: ../login.php');
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['user']);
header("location: ../login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<style>
.header {
background: #003366;
}
button[name=register_btn] {
background: #003366;
}
</style>
</head>
<body>
<div class="header">
<h2>Admin - Home Page</h2>
</div>
<div class="content">
<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
12
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>
<div>
<?php if (isset($_SESSION['user'])) : ?>
<strong><?php echo $_SESSION['user']['username'];
?></strong>
<small>
<i style="color: #888;">(<?php echo
ucfirst($_SESSION['user']['user_type']); ?>)</i>
<br>
<a href="home.php?logout='1'"
style="color: red;">logout</a>
<a href="create_user.php"> + add user</a>
</small>
At the top of this file, there is an if statement that checks if the user is admin (using the isAdmin() function).
Let's add that function to our functions.php file:
// ...
function isAdmin()
{
if (isset($_SESSION['user']) && $_SESSION['user']['user_type'] == 'admin' ) {
return true;
}else{
return false;
}
}
Now you might say, if only an admin can create another admin, then who creates the first admin. Well to
create the first admin, you can create a normal user using the registration form, then use any mysql client
like phpmyadmin or the mysql command prompt and change the user_type to admin. That way you will be
able to log in as admin and create other admins.
As simple as that, we are done with building a system that manages normal users alongside admin users.
13