Database Design
the database used in this tutorial is “dbtest” and the table is users, so create dbtest in your phpmyadmin and paste the following sql code to create users table.
--
-- Database: `mysqli_login`
--
-- --------------------------------------------------------
--
-- Table structure for table `tbl_users`
--
CREATE TABLE IF NOT EXISTS `tbl_users` (
`user_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(60) NOT NULL,
`email` varchar(60) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
dbconnect.php
this file contains code for connection using MySQLi extension, here’s how you can use MySQLi an improved extension with your MySQL Database.
<?php
$DBhost = "localhost";
$DBuser = "root";
$DBpass = "";
$DBname = "mysqli_login";
$DBcon = new MySQLi($DBhost,$DBuser,$DBpass,$DBname);
if ($DBcon->connect_errno) {
die("ERROR : -> ".$DBcon->connect_error);
}
register.php
this is our registration/signup page for the new user and it will ask username, email and password to enter, i have skipped here validation part and used HTML5 required client side validations to validate the form and the form was created with bootstrap. password_hash($upass, PASSWORD_DEFAULT); it will make password stronger than MD5.
<?php
session_start();
if (isset($_SESSION['userSession'])!="") {
header("Location: home.php");
}
require_once 'dbconnect.php';
if(isset($_POST['btn-signup'])) {
$uname = strip_tags($_POST['username']);
$email = strip_tags($_POST['email']);
$upass = strip_tags($_POST['password']);
$uname = $DBcon->real_escape_string($uname);
$email = $DBcon->real_escape_string($email);
$upass = $DBcon->real_escape_string($upass);
$hashed_password = password_hash($upass, PASSWORD_DEFAULT); // this function works only in PHP 5.5 or latest version
$check_email = $DBcon->query("SELECT email FROM tbl_users WHERE email='$email'");
$count=$check_email->num_rows;
if ($count==0) {
$query = "INSERT INTO tbl_users(username,email,password) VALUES('$uname','$email','$hashed_password')";
if ($DBcon->query($query)) {
$msg = "<div class='alert alert-success'>
<span class='glyphicon glyphicon-info-sign'></span> successfully registered !
</div>";
}else {
$msg = "<div class='alert alert-danger'>
<span class='glyphicon glyphicon-info-sign'></span> error while registering !
</div>";
}
} else {
$msg = "<div class='alert alert-danger'>
<span class='glyphicon glyphicon-info-sign'></span> sorry email already taken !
</div>";
}
$DBcon->close();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login & Registration System</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="signin-form">
<div class="container">
<form class="form-signin" method="post" id="register-form">
<h2 class="form-signin-heading">Sign Up</h2><hr />
<?php
if (isset($msg)) {
echo $msg;
}
?>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" name="username" required />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="email" required />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" required />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-signup">
<span class="glyphicon glyphicon-log-in"></span> Create Account
</button>
<a href="index.php" class="btn btn-default" style="float:right;">Log In Here</a>
</div>
</form>
</div>
</div>
</body>
</html>
index.php
this is our login page which will ask users to enter email and password to go the home page which is members page, to use database we have to include “dbconnect.php” file. i have used here password_verify($upass, $row[‘password’]) to verify password this is new password hashing functin and you have to use PHP5.5 to use this function.
<?php
session_start();
require_once 'dbconnect.php';
if (isset($_SESSION['userSession'])!="") {
header("Location: home.php");
exit;
}
if (isset($_POST['btn-login'])) {
$email = strip_tags($_POST['email']);
$password = strip_tags($_POST['password']);
$email = $DBcon->real_escape_string($email);
$password = $DBcon->real_escape_string($password);
$query = $DBcon->query("SELECT user_id, email, password FROM tbl_users WHERE email='$email'");
$row=$query->fetch_array();
$count = $query->num_rows; // if email/password are correct returns must be 1 row
if (password_verify($password, $row['password']) && $count==1) {
$_SESSION['userSession'] = $row['user_id'];
header("Location: home.php");
} else {
$msg = "<div class='alert alert-danger'>
<span class='glyphicon glyphicon-info-sign'></span> Invalid Username or Password !
</div>";
}
$DBcon->close();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coding Cage - Login & Registration System</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="signin-form">
<div class="container">
<form class="form-signin" method="post" id="login-form">
<h2 class="form-signin-heading">Sign In.</h2><hr />
<?php
if(isset($msg)){
echo $msg;
}
?>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" name="email" required />
<span id="check-e"></span>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" name="password" required />
</div>
<hr />
<div class="form-group">
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
<span class="glyphicon glyphicon-log-in"></span> Sign In
</button>
<a href="register.php" class="btn btn-default" style="float:right;">Sign UP Here</a>
</div>
</form>
</div>
</div>
</body>
</html>
home.php
if user successfully logged in he will be redirected to this “home.php” page, this is members page only registered users can access this page, contains bootstrap header with menu and one link to logout.
<?php
session_start();
include_once 'dbconnect.php';
if (!isset($_SESSION['userSession'])) {
header("Location: index.php");
}
$query = $DBcon->query("SELECT * FROM tbl_users WHERE user_id=".$_SESSION['userSession']);
$userRow=$query->fetch_array();
$DBcon->close();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['email']; ?></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.codingcage.com">Coding Cage</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="https://codingcage.com/2015/03/simple-login-and-signup-system-with-php.html">Back to Article</a></li>
<li><a href="https://codingcage.com/search/label/jQuery">jQuery</a></li>
<li><a href="https://codingcage.com/search/label/PHP">PHP</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> <?php echo $userRow['username']; ?></a></li>
<li><a href="logout.php?logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" style="margin-top:150px;text-align:center;font-family:Verdana, Geneva, sans-serif;font-size:35px;">
<a href="https://codingcage.com/">Coding Cage - Programming Blog</a><br /><br />
<p>Tutorials on PHP, MySQL, Ajax, jQuery, Web Design and more...</p>
</div>
</body>
</html>
logout.php
simple page to logout the users and redirects to the login/index page. it will destroys the current logged in users session.
><?php
session_start();
if (!isset($_SESSION['userSession'])) {
header("Location: index.php");
} else if (isset($_SESSION['userSession'])!="") {
header("Location: home.php");
}
if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['userSession']);
header("Location: index.php");
}
That’s it, we have covered here a simple login and registration system using PHP and MySQLi, the reason behind posting this tutorial is, i got few emails regarding MySQLi login and signup script, so i have posted it here. if you like it please share it with your social media friends, thank you 🙂