Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

3 Steps Simple PHP Login Without Database

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
Login Page

Step 2
Login Check

Step 3
Protect Pages

Extra
Download & More

Closing
What’s Next?

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.php

      Login Page Example
    

PLEASE SIGN IN

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

login.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

login.js
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 just POST 3 variables to the server – req (the service request), the email, and the password.
  • 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

ajax-login.php
 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 and password 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

index.php

      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.



This post first appeared on Xxxxxxxxx, please read the originial post: here

Share the post

3 Steps Simple PHP Login Without Database

×

Subscribe to Xxxxxxxxx

Get updates delivered right to your inbox!

Thank you for your subscription

×