how to create a login form using html, css, javascript, php and ajax

Sequel to the last tutorial we posted, click here to view, we will be creating a login page that will access the database and authenticate users using PHP and AJAX. Let's start by creating two PHP files index.php and login.php, and we will be accessing the database folder we created in our Registration tutorial.

Now we add our HTML,  CSS, and JavaScript codes in our index.php file. 

HTML

In our Html code, we will be including input options for username and password. 

<div class="forms-out">
  <div class="forms-in">
    <div id="registration-page">
      <h3>Sign In</h3>
      
      Username <br />
      <input type="text" id="registration-user" maxlength="10"/><br />
      
     
      Password <br />
      <input type="password" id="registration-password" /><br />
       
      <button id="login" onclick="login()">Sign Up</button>
    </div>

  </div>
</div>

After typing our code, our page will look like the image shown below

CSS

Now we add styles to our HTML code to improve the form

.forms-out {
margin: 0 auto;
font-family: "Fira Sans", sans-serif;
padding: 15px 0;
}

.forms-in {
width: 93%;
margin: 0 auto;
color: white;
padding: 15px 0;
}

.forms-in div {
padding: 30px 20px;
max-width: 350px;
margin: 0 auto;
background: #168ab8;
border-radius: 5px;
margin-bottom: 15px;
}

.forms-in h3 {
text-align: center;
}

.forms-in input {
border: none;
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border-radius: 3px;
}

.forms-in button {
border: none;
padding: 7px 20px;
background: #e8f8ff;
color: #168ab8;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}

.forms-in button:hover {
opacity: 0.7;
}

.hide {
display: none;
}

#forgot-password {
text-align: center;
font-size: 13px;
cursor: pointer;
}

#forgot-password:hover {
opacity: 0.7;
}

Our page now looks like this

JAVASCRIPT

In our JavaScript code, we first use the login() function to get all the details from the form and validate them to make sure the information passed by user is complete and in the right format. Then we pass it over to the sendLoginDetails() function, thats where we pass the data to the backend using Ajax without refreshing the page. If want to learn more about ajax you can visit W3Schools for more details on how ot use ajax  connections.

function login(){
    const username = document.getElementById("login-user").value.toLowerCase().trim();
    
    const password = document.getElementById("login-password").value;
    
    
      
    if(username==""){
        alert("No username entered");
    }else if(password==""){
        alert("No password entered");
    }else{
        sendLoginDetails(username, password);
    }
}

function sendLoginDetails(username, password){
    const xmlhttp = new XMLHttpRequest();
  const url = "login.php?username="+username+"&password="+password;
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        if(this.responseText.trim()!=""){
          
          let response = this.responseText;
          alert(response);
    
        }
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

PHP

in our PHP code, the data is received and checked to see if the username already exists by checking if the file exists. If a file does not exist with the same name then we alert the user to enter the right username or password. If the username is right and the passwords do not match, we also alert the user to enter the right username or password.

<?php 
    $username = $_REQUEST['username'];
    $password = $_REQUEST["password"];
    
    
    if(file_exists("database/".$username.".txt")){
        
        $file = fopen("database/".$username.".txt","r");
        $username = fgets($file);
        $email = fgets($file);
        $password2 = trim(fgets($file));
        fclose($file);
        
        if($password == $password2){
            echo "Login Successful";
        }else{
            echo "Password or Username is incorrect";
        }
        
    }else{
        
        echo "Password or Username is incorrect";
    }
    
    

?>

CONCLUSION

We've come to the end of the tutorials, feel free to tweak the code, you can add things like forgot password, session, and lots more. Click on this link to download the source code of this tutorial.