Hey Guys in this tutorial i will show you how to make your own login and signup page with PHP and MySQL. It comes in handy when we have any secret or important page that we want only allowed users to access it with a username and password.

Well the basic idea is that, when a user enters his credentials in the login page, we query our database that a user with username=’something’ or password=’something ‘ exists. If our database return 1 row that means user has provided correct credentials and is authentic. So next we start a session (session_start()) and store all the details in the respective variables and then we can redirect to index.php page or whichever page you want to redirect. Now comes index.php which checks the session is started or not( empty($_SESSION)), so if it is empty then redirect the user to login page, if is started then he can access the index page.

Visit My New Website! Tutoid

Table structure

create table users
(
  id int(6) unsigned auto_increment PRIMARY  KEY,
  username VARCHAR(200) not NULL,
  password VARCHAR (50) not null,
  name VARCHAR (200) not null
)

-So first start with Login and Signup Forms.

Style.css

#form {
    box-sizing: border-box;
    padding: 20px;
    width: 300px;
    height: auto;
    margin: 200px auto ;
    background: #e3dfd7;
    border-radius: 10px;
    border:1px solid grey;
}
#form h1{
    font-size: 28px;
    color: #212121;
}
#form input {
    font-size: 18px;
    color:#424242;
    padding:10px;
    width: 100%;
    margin-bottom: 5px;
}
#center-main {
    box-sizing: border-box;
    width: 70%;
    position: absolute;
    left: 15%;
    top: 0px;
    border-radius:10px;
    padding:50px;
    background: #e3dfd7;
    font-size:24px;
    text-align: center;
}
#logout
{
    position: absolute;
    right:0;
    top:0;
    box-sizing: border-box;
    padding:10px 20px;
    background:#bdbdbd;
    font-size:16px;
}

Login 

<title>Login</title>
	<link href="style.css" rel="stylesheet">
<div id="form">
<h1>Login</h1>
<form method="POST">
        <input type="text" name="username" placeholder="Your Username">
        <input type="password" name="password" placeholder="Your Password">
        <input type="submit" name="password" >
        <a href="signup.php">Sign Up Here!</a>
    </form></div>

Signup 

<title>Signup</title>
	<link href="style.css" rel="stylesheet">
<div id="form">
<h1>Signup</h1>
<form method="POST">
        <input type="text" name="username" placeholder="Your Username">
        <input type="text" name="name" placeholder="Your Name">
        <input type="password" name="password" placeholder="Your Password">
        <input type="submit" name="password" >
        <a href="login.php">Login Here!</a>
    </form></div>

Now we want users to register to our website. So here is the signup php script

<?php
if($_POST) // To check if the user submits the form
{
    $username = $_POST['username'];
    $name = $_POST['name'];
    $replace = array('<','>','/'); // remove any shit that user enters eg. <script> tags etc
    $name = str_replace('$replace','',$name);
   $username = str_replace('$replace','',$username);
    $password = md5($_POST['password']);
    $conn = mysqli_connect('localhost','root','','work'); // To connect to my database
    $query = 'select username from users where username = ?';
    $statement = $conn->prepare($query);
    $statement->bind_param('s',$username);
    $statement->execute();
    $statement->store_result();
    if($statement->num_rows() == 1){
        echo 'Ah Snap... User Already registered!';
        $statement->close();
        $conn->close();
    }
    else
    {
        $statement = $conn->prepare("insert into users (username,name,password) values (?,?,?)");
        $statement->bind_param('sss',$username,$name,$password);
        $statement->execute();
        $statement->close();
        $conn->close();
        header('location:login.php');

    };

};
?>

And Login page php script

<?php
if($_POST)
{
    // First get all the data therough POST
    $username = $_POST['username'];
    $password = md5($_POST['password']); // Encryption to secure the password
    $conn = mysqli_connect('localhost','root','','work'); //create connection to database .. there is no password in my case
    $query = 'select username,name,password from users where username = ? and password = ?';
    $statement = $conn->prepare($query); // Executing query through prepared statements as it is a secure way
    $statement->bind_param('ss',$username,$password);
    $statement->execute();
    $statement->store_result(); // important to store result
    if($statement->num_rows() == 1){
        $statement->bind_result($newusername,$newname,$password);
        $statement->fetch();
        session_start();
        $_SESSION['loggedin'] = ['name'=>$newname,'username'=>$newusername];
        header('location:index.php');
    }
    else
    {
        echo 'Ah Snap...Wrong username or password!';
    };

};
?>

In login.php when user enters correct information. we start a session and set a session variable ‘loggedin’ and create an associative array to store information about users. Here i have only username,name and password fields but you can have various like e-mail,registration date, or whether the user have verified his email address  or not or he is disabled to access the page or login to website.

So here we are ready with login and signup scripts part. Now comes the index page or the page we want authenticate users. First thing to do on a index  page is to start a session.

<?php
session_start(); //first thing to do on index page
if(empty($_SESSION)) // To check if the session is empty or not. If empty, then redirect to login
{
    header('location:login.php');
};

?>
	<link href="style.css" rel="stylesheet">
<?php
    echo '
<div id="center-main">Welcome '.$_SESSION["loggedin"]["name"].'..!! To Your Homepage
'.$_SESSION["loggedin"]["username"].' Is your username</div>
'; // Print the Welcome message

?>
<a href="logout.php">
<div id="logout">Logout here</div>
</a>

So we display a message ‘Welcome $name to your homepage’. You can add as many things you like on your homepage(index.php).

*TIP : Set different session variables like ‘admin’,’subscriber’ or ‘moderator’ to show or restrict the content you would like to show to users. You can check it through $_SESSION[‘admin’] is empty or not as we did in index.php page.

So, for users to logout from the website we create a logout script.

<?php
session_start();
session_unset();
session_destroy();
header('location:login.php');
?>

It is important to start a session before destroying it.

So now you are ready with your project.

Download a sample project.

Watch a Video Tutorial on YouTube

Advertisements