INTRODUCTION
NO HASSLE LOGIN
Welcome to a tutorial on how to create a simple PHP login without a database. So you just want a login page without a difficult database? Yes, that is possible, and this guide will walk you through the steps on how to create a pure PHP login system – read on!
I have included a zip file with all the source code at the end of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
CONFESSION
AN HONEST DISCLOSURE
Quick, hide your wallets! I am an affiliate partner of Google, eBay, Adobe, Bluehost, Clickbank, and more. There are affiliate links and advertisements throughout this website. Whenever you buy things from the evil links that I recommend, I will make a commission. Nah. These are just things to keep the blog going, and allows me to give more good stuff to you guys - for free. So thank you if you decide to pick up my recommendations!
NAVIGATION
TABLE OF CONTENTS
Step 1 | Step 2 | Step 3 |
Extra | Closing |
STEP 1
CREATE LOGIN PAGE
First, let us start by creating the HTML login page itself, and a short Javascript that will handle the login/logout process via AJAX.
THE LOGIN PAGE
Login Page Example
This should be pretty straightforward and easy to understand:
- Always start the user session first – That is where we will determine if the user is signed in or not.
- If the user is already signed in, we will redirect him/her to the home page.
- If not, we will display the login page. Which is nothing more than just a simple HTML login form.
THE CSS
html, body, input {
font-family: arial;
}
#login-form {
padding: 20px;
background: #f2f2f2;
max-width: 320px;
margin: 0 auto;
}
#login-form h1 {
font-size: 1.5em;
margin: 0;
color: #9b9b8d;
}
#login-form label, #login-form input {
display: block;
margin-top: 10px;
width: 100%;
}
#login-form input[type=email], #login-form input[type=password] {
padding: 5px;
font-size: 1em;
box-sizing: border-box;
}
#login-form input[type=submit] {
background: #ad4343;
color: #fff;
font-size: 1em;
padding: 10px 0;
border: 0;
}
Just some cosmetics here to make the login page look nicer. Feel free to change these to fit your project’s theme.
THE JAVASCRIPT
function login () {
// APPEND FORM DATA
var data = new FormData();
data.append('req', 'in');
data.append('email', document.getElementById("login-email").value);
data.append('password', document.getElementById("login-password").value);
// INIT AJAX
var xhr = new XMLHttpRequest();
xhr.open('POST', "ajax-login.php", true);
// WHEN THE PROCESS IS COMPLETE
xhr.onload = function () {
if (this.response=="OK") {
window.location.href = "index.php";
} else {
alert("Invalid email/password");
}
};
// SEND
xhr.send(data);
return false;
}
function logout () {
// APPEND FORM DATA
var data = new FormData();
data.append('req', 'out');
// INIT AJAX
var xhr = new XMLHttpRequest();
xhr.open('POST', "ajax-login.php", true);
// WHEN THE PROCESS IS COMPLETE
xhr.onload = function () {
if (this.response=="OK") {
window.location.href = "login.php";
} else {
alert("Error signing out");
}
};
// SEND
xhr.send(data);
}
Finally, we create a Javascript that will fire AJAX calls to the server for login and logout requests.
- The
login
function will practically justPOST
3 variables to the server –req
(the service request), theemail
, and thepassword
. - The server should respond “OK” on a successful login, which we will redirect the user to the home page thereafter.
- If the email/password is wrong, we will simply display an error message.
- The
logout
function does pretty much the same.POST
a logout request to the server, and redirects the user back to the login page after a successful logout.
STEP 2
LOGIN CHECK
Next, we will create the server-side script to properly process the login and logout requests.
THE AJAX HANDLER
Password
// ADD MORE OF YOUR OWN HERE!
$users = [
"[email protected]" => "123456",
"[email protected]" => "654321"
];
// Check given email & password
if ($_POST['password'] == $users[$_POST['email']]) {
$_SESSION['user'] = [
"email" => $_POST['email']
];
echo "OK";
} else {
echo "ERR";
}
break;
// Sign out
case "out":
unset ($_SESSION['user']);
echo "OK";
break;
}
?>
How this script works is pretty simple as well.
- It checks
$_POST['req']
to determine if it is a login or logout request. - The login process is as simple as checking the
email
andpassword
POST
variables against the$users
array – Where you keep the user emails and passwords. - Please do feel free to change the emails and passwords to your own.
- The user is then recorded into user session on a successful password match.
- Finally, the logout request will simply remove the user from the user session.
STEP 3
PROTECT THE PAGES
For this last step, we simply have to protect all the other pages, and also provide a logout button.
THE INTERNAL PAGES
Login Example
Successfully Signed In!
To protect the pages that require a valid login:
- Start the session.
- Do a simple check if
$_SESSION['user']
exists – If it does not, that will mean that the user is not signed it. - Redirect the user back to the login page if not signed in.
EXTRA
DOWNLOAD & MORE
That’s it for all the code, and here is the download link as promised – Plus a small extra that may be useful to you.
VANILLA AJAX
Not sure what AJAX is and how it works? Here is a quick guide:
Vanilla Javascript AJAX Tutorial (Learn With Examples)
LOGIN WITH DATABASE
A PHP login system with a database is not really that difficult. Check out my other guide if you decide to “upgrade”:
3 Steps to Create a Simple PHP Login Page (Free Script)
SOURCE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
CLOSING
WHAT’S NEXT?
Thank you for reading, and we have come to the end of this short guide. I hope that it has helped you in your project, and if you have anything to share, please feel free to comment below. Good luck and happy coding!
The post 3 Steps Simple PHP Login Without Database appeared first on Code Boxx.