Tuesday, July 19, 2016

Design a Website for login & registration system using PHP and MySQL.

If anyone plans to design a website for his institute or organisation, then first he would like to design a page for user login and registration system. Everyone wants that only registered users may access features of the website. So I am going to design a very simple login and registration form using PHP & MySQL.
So to start designing login & registration form for users first create a database for users.
First run the XAMPP server, and then start Apache and MySQL services from the XAMPP Control Panel.
Now go to your favorite browser and type: http://localhost/phpmyadmin/
A page will open like this:


Now click on new to create a new database, under the caption Create Database, give the name of your database, for example dbtest and select Collation accordingly. Now click on create to create a new database. After creating database, create a table for the database. Let the table name be users and required number of columns be 4.  Now give the name to columns created in the table as id, name, email, and password. Select the type and give length for each columns name. After giving name to each column and filling other fields click on save.
 
When you click on save new database is created for users.  

 

Now close the browser.
Now after creating database, it’s time to create index, signup, login and logout pages. We also need a dbconnect file to connect to our database whenever needed.

Code for dbconnect.php is:
<?php
//connect to mysql database
$con = mysqli_connect("localhost", "root", "", "dbtest") or die("Error " . mysqli_error($con));
?>
_____________________________________________________________________________________

The code for index.php file is:                                                                         
<?php
session_start();
include_once 'dbconnect.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Login & Registration form</title>
</head>
<body>
<center><?php if (isset($_SESSION['usr_id'])) { ?>
<li><p class="navbar-text">Signed in as <?php echo $_SESSION['usr_name']; ?></p></li>
<li><a href="logout.php">Log Out</a></li>
<?php } else { ?>
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Sign Up</a></li>
<?php } ?></center>                                     
</body>
</html>

_____________________________________________________________________________________
Code for register.php:
<?php
session_start();

if(isset($_SESSION['usr_id'])) {
header("Location: index.php");
}
include_once 'dbconnect.php';

//set validation error flag as false
$error = false;

//check if form is submitted
if (isset($_POST['signup'])) {
$name = mysqli_real_escape_string($con, $_POST['name']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$password = mysqli_real_escape_string($con, $_POST['password']);
$cpassword = mysqli_real_escape_string($con, $_POST['cpassword']);
               
//name can contain only alpha characters and space
if (!preg_match("/^[a-zA-Z ]+$/",$name)) {
$error = true;
$name_error = "Name must contain only alphabets and space";
                }
if(!filter_var($email,FILTER_VALIDATE_EMAIL)) {
$error = true;
$email_error = "Please Enter Valid Email ID";
                }
if(strlen($password) < 6) {
$error = true;
$password_error = "Password must be minimum of 6 characters";
                }
if($password != $cpassword) {
$error = true;
$cpassword_error = "Password and Confirm Password doesn't match";
                }
if (!$error) {
if(mysqli_query($con, "INSERT INTO users(name,email,password) VALUES('" . $name . "', '" . $email . "', '" . md5($password) . "')")) {
$successmsg = "Successfully Registered! <a href='login.php'>Click here to Login</a>";
} else {
$errormsg = "Error in registering...Please try again later!";
                                }
                }
}
?>

<!DOCTYPE html>
<html>

<body>
                                <!-- menu items -->       

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 well">
<form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="signupform">
<fieldset>
<legend>Sign Up</legend>

<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" placeholder="Enter Full Name" required value="<?php if($error) echo $name; ?>" class="form-control" />
<span class="text-danger"><?php if (isset($name_error)) echo $name_error; ?></span>
</div>
                                                                               
<div class="form-group">
<label for="name">Email</label>
<input type="text" name="email" placeholder="Email" required value="<?php if($error) echo $email; ?>" class="form-control" />
<span class="text-danger"><?php if (isset($email_error)) echo $email_error; ?></span>
</div>

<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" placeholder="Password" required class="form-control" />
<span class="text-danger"><?php if (isset($password_error)) echo $password_error; ?></span>
</div>

<div class="form-group">
<label for="name">Confirm Password</label>
<input type="password" name="cpassword" placeholder="Confirm Password" required class="form-control" />
<span class="text-danger"><?php if (isset($cpassword_error)) echo $cpassword_error; ?></span>
</div>

<div class="form-group">
<input type="submit" name="signup" value="Sign Up" class="btn btn-primary" />
</div>
</fieldset>
</form>
<span class="text-success"><?php if (isset($successmsg)) { echo $successmsg; } ?></span>
<span class="text-danger"><?php if (isset($errormsg)) { echo $errormsg; } ?></span>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">       
Already Registered? <a href="login.php">Login Here</a>
</div>
</div>
</div>
</body>
</html>


_____________________________________________________________________________________


Code for login.php:
<?php
session_start();

if(isset($_SESSION['usr_id'])!="") {
                header("Location: index.php");
}

include_once 'dbconnect.php';

//check if form is submitted
if (isset($_POST['login'])) {

$email = mysqli_real_escape_string($con, $_POST['email']);
$password = mysqli_real_escape_string($con, $_POST['password']);
$result = mysqli_query($con, "SELECT * FROM users WHERE email = '" . $email. "' and password = '" . md5($password) . "'");

if ($row = mysqli_fetch_array($result)) {
$_SESSION['usr_id'] = $row['id'];
$_SESSION['usr_name'] = $row['name'];
header("Location: index.php");
                } else {
$errormsg = "Incorrect Email or Password!!!";
                }
}
?>

<!DOCTYPE html>
<html>

<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 well">
<form role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" name="loginform">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="name">Email</label>
<input type="text" name="email" placeholder="Your Email" required class="form-control" />
</div>

<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" placeholder="Your Password" required class="form-control" />
</div>

<div class="form-group">
<input type="submit" name="login" value="Login" class="btn btn-primary" />
</div>
</fieldset>
</form>
<span class="text-danger"><?php if (isset($errormsg)) { echo $errormsg; } ?></span>
</div>
</div>
<div class="row">           
<center>New User? <a href="register.php">Sign Up Here</a></center>
</div>
</div>
</div>


</body>
</html>

_____________________________________________________________________________________

Code for logout.php:
<?php
session_start();

if(isset($_SESSION['usr_id'])) {
                session_destroy();
                unset($_SESSION['usr_id']);
                unset($_SESSION['usr_name']);
                header("Location: index.php");
} else {
                header("Location: index.php");
}
?>

_____________________________________________________________________________________


Put all the above files in the htdocs folder. After that open your favorite browser and type 127.0.0.1, your login & registration website will open. You can test your website on your local computer before making it live.

2 comments:


  1. Thank you for the useful blogs. This really helps me a lot.I have also made my site for beginners. Please do check my website too.
    https://www.codingtag.com
    btw, if ANY IDE in ANY language Please suggestso that I could try to explain it on my website.
    Just sayin... :D

    ReplyDelete
  2. Learn How to create a nested webpage in HTML with a step-by-step guide using iframe and embed tag.

    ReplyDelete