Create Simple Login Page with PHP and MySQL

Using login page registered users sign in to the website and manage its account.

On the user successful login attempt need to define $_SESSION.

This helps to detect the user is actually logged in or not when going to another web pages and it also helps to display content according to the user.

In this tutorial, I show how you can create a Login page with PHP and MySQL.

Create simple login page with PHP and MySQL


Contents

  1. Table structure
  2. Configuration
  3. HTML
  4. CSS
  5. PHP
  6. Demo
  7. Conclusion

 


1. Table structure

I am using users table in the tutorial example.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `name` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Configuration

Create a new config.php file.

Completed Code

<?php
session_start();
$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
 die("Connection failed: " . mysqli_connect_error());
}

3. HTML

Create a login page layout which has two input type elements for entering username and password and a button to submit the form.

Completed Code

<div class="container">
    <form method="post" action="">
        <div id="div_login">
            <h1>Login</h1>
            <div>
                <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
            </div>
            <div>
                <input type="password" class="textbox" id="txt_uname" name="txt_pwd" placeholder="Password"/>
            </div>
            <div>
                <input type="submit" value="Submit" name="but_submit" id="but_submit" />
            </div>
        </div>
    </form>
</div>

4. CSS

/* Container */
.container{
    width:40%;
    margin:0 auto;
}

/* Login */
#div_login{
    border: 1px solid gray;
    border-radius: 3px;
    width: 470px;
    height: 270px;
    box-shadow: 0px 2px 2px 0px  gray;
    margin: 0 auto;
}

#div_login h1{
    margin-top: 0px;
    font-weight: normal;
    padding: 10px;
    background-color: cornflowerblue;
    color: white;
    font-family: sans-serif;
}

#div_login div{
    clear: both;
    margin-top: 10px;
    padding: 5px;
}

#div_login .textbox{
    width: 96%;
    padding: 7px;
}

#div_login input[type=submit]{
    padding: 7px;
    width: 100px;
    background-color: lightseagreen;
    border: 0px;
    color: white;
}

5. PHP

On form submit check the username and password entered or not. If entered then execute a SELECT query to count records on the basis of username and password.

If query returns greater than 0 then initalize $_SESSION['uname'] = $uname and redirect to home.php.

If it returns 0 then display the "Invalid username and password message".

Complete Code

<?php
include "config.php";

if(isset($_POST['but_submit'])){

    $uname = mysqli_real_escape_string($con,$_POST['txt_uname']);
    $password = mysqli_real_escape_string($con,$_POST['txt_pwd']);

    if ($uname != "" && $password != ""){

        $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
        $result = mysqli_query($con,$sql_query);
        $row = mysqli_fetch_array($result);

        $count = $row['cntUser'];

        if($count > 0){
            $_SESSION['uname'] = $uname;
            header('Location: home.php');
        }else{
            echo "Invalid username and password";
        }

    }

}

Homepage

Create new home.php file.

First, check whether the user is logged or not by checking the $_SESSION['uname'] variable. If its not set then redirect the user to index.php for login.

Created a logout button which destroy the $_SESSION['uname'] variable and redirect to index.php web page on click.

Complete Code

<?php
include "config.php";

// Check user login or not
if(!isset($_SESSION['uname'])){
    header('Location: index.php');
}

// logout
if(isset($_POST['but_logout'])){
    session_destroy();
    header('Location: index.php');
}
?>
<!doctype html>
<html>
    <head></head>
    <body>
        <h1>Homepage</h1>
        <form method='post' action="">
            <input type="submit" value="Logout" name="but_logout">
        </form>
    </body>
</html>

6. Demo

Here, are some valid usernames – yssyogesh, bsonarika, vishal, vijay and all have the same password – 12345. Open in a new tab.


7. Conclusion

In this tutorial, I showed how you can create a simple login page with PHP and MySQL.

You must have to initialize the $_SESSION variable to detect the user when traversing to other pages and destroy it when the user clicks the logout buttons.

Related Post

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

3 Comments

  1. Max McMahon said:

    Maybe also offer a NOT zipped file for download. it would help a lot.

    June 28, 2018
    Reply
  2. emmanuel said:

    i find this code interesting great work but please can you provide a register.php? i visitors to sign up by them self

    July 2, 2018
    Reply
  3. Arun said:

    really nice work, i can understand easily…………. 🙂

    September 4, 2018
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *