Basic PHP MySQL Login

In this tutorial we’re going to make basic login script using PHP and MySQL.

Basic PHP mysql login


The Data Source

We have following users in users table.

id username password
1 yssyogesh 12345
2 sona 123456
3 vishal 32145
4 vijay 147526

Contents

  1. HTML
  2. CSS
  3. PHP

 


1. HTML

First, we’re creating our HTML structure. We created a <div>  and add class='container' to it inside div a form and div with id='div_login' created. Set <form method='post'> and inside <div id='div_login'> created two text type elements for input, one for username and other for password in both we added class='textbox' and a submit button.

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>

2. CSS

Applying CSS to our HTML structure. Add border: 1px solid gray; to #div_login and fixed its width: 470px and height: 270px. Added box-shadow: 0px 2px 2px 0px gray to it.

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

Adding background-color: cornflowerblue to #div_login h1 and font color: white. We using font-family: sans-serif on it.

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

Setting width: 96% and padding: 7px of class 'textbox'. Setting submit button width: 100px we using lightseagreen as its background-color.

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

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

Completed Code

/* 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;
}

3. PHP

In PHP code we are going to check user input and if user input is correct, then we create session for it and redirect to home page. In homepage we have a logout button from there we can destroy session for the user and send it to the index page. Let’s implement all these steps by step.

Connection

In first step, we are going to make a connection to Database for these we are creating new config.php file that we use to include in the index.php file.  Because we are going to use session in our pages for that we need to first start the session using session_start();. In this tutorial we are using tutorial database.

session_start();

$host = "localhost";    /* Host name */
$user = "root";         /* User */
$password = "";         /* Password */
$dbname = "tutorial";   /* Database name */

$con = mysql_connect($host, $user, $password) or die("Unable to connect");

// selecting database
$db = mysql_select_db($dbname, $con) or die("Database not found");

Login script

When submit button is getting clicked, then we take out username and password from textbox and store it in PHP variables $uname and $password.

$uname = mysql_real_escape_string($_POST['txt_uname']);
$password = mysql_real_escape_string($_POST['txt_pwd']);

Now we check that user not submitted a blank entry if not, then we execute our SQL select query. We are using users table in this table we, count rows on the bases of username and password. If user found then it will return 1 otherwise 0.

$sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
$result = mysql_query($sql_query);
$row = mysql_fetch_array($result);

If row found then we create session variable uname in which we store username and redirect to home.php page.

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

Complete Code (PHP script in index.php)

include "config.php";

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

    $uname = mysql_real_escape_string($_POST['txt_uname']);
    $password = mysql_real_escape_string($_POST['txt_pwd']);


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

        $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
        $result = mysql_query($sql_query);
        $row = mysql_fetch_array($result);

        $count = $row['cntUser'];

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

    }

}

Authenticate

In home.php we first check that user login or not by using a session variable uname which we are setting in login. If user is not logged in then we redirect it to index.php.

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

Logout script

In home.php we created a <h1> and<form>. In <form> we created a submit button name=”but_logout”.

<h1>Homepage</h1>
<form method='post' action="">
    <input type="submit" value="Logout" name="but_logout">
</form>

When but_login button is clicked then destroy the session and redirect to index.php page.

// logout
if(isset($_POST['but_logout'])){
    session_destroy();
    header('Location: index.php');
}

Complete Code (home.php)

<?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>
Spread the love

Related Post

One Comment

Leave a Reply

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