Simple PHP User Login / SignUp Script Tutorial
(You can download complete “Simple PHP User Login / SignUp Script Tutorial” from the right sidebar.)
In this tutorial we are going to create simple php user login / signup script tutorial using php and mysql as database. In this script, a form will be displayed with two fields, username and password. When user is submitting with valid username and password, then he can access authenticated (my-account) page. Otherwise user again has to fill in the form.
Here are the files and directories that we are going to create.
- css
- style.css- inc
- connection.php- functions.phpindex.phpsignup.phplogin.phpmy-account.phplogout.php
We will be including connection.php and functions.php file at the top of each file. In connection.php file, we will store our databae info and create MYSQL Connection. functions.php file will contain our simple and mostly used functions.
let’s Create MySQL Table
Simple table with 3 columns named as ‘users’. You can also use your table as well if you have already created.
CREATE TABLE IF NOT EXISTS `users` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `username` varchar(50) CHARACTER SET utf8 NOT NULL, `password` varchar(42) CHARACTER SET utf8 NOT NULL, PRIMARY KEY (`id`) )
MYSQL Connection File connection.php
<?php
session_start();
$db_username = 'root'; // Your MYSQL Username.
$db_password = ''; // Your MYSQL Password.
$db_name = 'database_name_here'; // MYSQL Database Name.
$db_host = 'localhost';
$conDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('Error: Could not connect to MySQL database.');
?>If you notice we are using PHP mysqli_query() here, not regular mysql_connect(), i = stands for improved extension, developed to take advantage of new features found in newer MySQL systems. PHP encourages everyone to use mysqli_* instead of regular mysql_* extensions, which will be totally removed in the future PHP versions.
Index Page: index.php
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Welcome - OTallu.com</title> <link type="text/css" rel="stylesheet" href="css/style.css" media="all"> </head> <body> <div class="wrap"> <h2>Welcome to My Website</h2> <p>This is the main index page.</p> <a href="login.php">Login</a> / <a href="signup.php">Signup</a> </div> </body> </html>
Sign Up Page: signup.php
<?php
include_once('inc/connection.php');
include_once('inc/functions.php');
if (isset($_POST['signup_submit'])) : // If form is submitted
$username = mres($_POST['username']);
$password = mres($_POST['password']);
$confirm_password = mres($_POST['confirm_password']);
$hashed_password = sha1($password);
// Check if all fields are empty.
if ($username == '' || $password == '' || $confirm_password == '') $error[] = "All fields are required.";
// Check if that username is already exists.
$find_user = mysqli_query($conDB,"SELECT * FROM `users` WHERE `username` = '".$username."'");
if (mysqli_num_rows($find_user) != 0) $error[] = "That username is already exist.";
// Check if confirm password did not match.
if (empty($error) && $confirm_password != $password) $error[] = "Confirm Password did not match.";
// If no errors then go ahead.
if (empty($error)){
$result = mysqli_query($conDB," INSERT INTO `users` (
`username`,
`password`
) VALUES (
'".$username."',
'".$hashed_password."'
)");
if(confirm_query($result)) {
redirect('login.php?signup=1');
}
}
endif;
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up - OTallu.com</title>
<link type="text/css" rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div class="wrap">
<h2>Sign Up</h2>
<?php display_error(); ?>
<form action="signup.php" method="post">
<input type="text" name="username" placeholder="Username" value="<?php echo (isset($username))? $username : ''; ?>" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="password" name="confirm_password" placeholder="Confirm Password" required><br>
<input type="submit" name="signup_submit" value="Sign Up"><br>
</form>
<a href="login.php">Already have an account?</a>
</div>
</body>
</html>
Login Page: login.php
<?php
include_once('inc/connection.php');
include_once('inc/functions.php');
if (isset($_GET['login_required'])) $error[] = "You must be logged in to access this page.";
if (isset($_POST['login_submit'])) : // If form is submitted
$username = mres($_POST['username']);
$password = mres($_POST['password']);
// Check if all fields are emptyy.
if ($username == '' || $password == '') $error[] = "All fields are required.";
if (empty($error)){
$hashed_password = sha1($password);
// Check if submitted info is correct or not.
$check = mysqli_query($conDB,"SELECT * FROM `users` WHERE `username` = '".$username."' AND `password` = '".$hashed_password."'");
if (mysqli_num_rows($check) == 1) {
// User found, now set session and proceed to my-account page.
$_SESSION['loggedin_user'] = $username;
redirect('my-account.php');
} else {
$error[] = "Incorrect username or password.";
}
}
endif;
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Login - OTallu.com</title>
<link type="text/css" rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div class="wrap">
<?php
// Will display this message if returning from signup page.
if (isset($_GET['signup'])) echo '<div class="message">Thank you for signing up.</div>';
?>
<h2>Login</h2>
<?php display_error(); ?>
<form action="login.php" method="post">
<input type="text" name="username" placeholder="Username" value="<?php echo (isset($username))? $username : ''; ?>" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="submit" name="login_submit" value="Login"><br>
</form>
<a href="signup.php">Don't have an account?</a>
</div>
</body>
</html>
My Account Page: my-account.php
This is the main user’s account page where user will be redirect to after login. That page cannot be accessed directly without login.
<?php
include_once('inc/connection.php');
include_once('inc/functions.php');
// if user is not logged int then redirect to login page.
if (!isset($_SESSION['loggedin_user'])) redirect('login.php?login_required=1');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My Account - OTallu.com</title>
<link type="text/css" rel="stylesheet" href="css/style.css" media="all">
</head>
<body>
<div class="wrap">
<h2>Hello <?php echo $_SESSION['loggedin_user']; ?>!</h2>
<p>This is your main account page which cannot be accessed directly without login.</p>
<hr>
<a href="logout.php">Logout</a>
</div>
</body>
</html>
Logout Page: logout.php
That page is fairly simple. We are just unsetting session variable which was set when user was logged in. Mostly people use session_destroy(); function which destroys all the session variables. But, I prefer to unset only specific variables like this one used in this file below.
<?php
session_start();
include_once('inc/functions.php');
// unset user_login session.
unset($_SESSION['loggedin_user']);
// Go back to index page.
redirect('index.php');
?>
Here is the style.css file
Finally add little styling to our pages.
body {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
background:#f8f8f8;
}
h2 {
margin-top:0;
}
.wrap,.footer {
width:300px;
background:#fff;
text-align:center;
margin:0 auto;
padding:20px;
}
input {
min-width:250px;
margin:5px 0;
padding:5px;
}
div.error {
color:#900;
margin:15px 0;
}
div.message {
color:#060;
margin:15px 0;
}
In case you are wondering, here is what functions.php file looks like
<?php
function mres($var){
if (get_magic_quotes_gpc()){
$var = stripslashes($var);
}
return mysql_real_escape_string(trim($var));
}
function confirm_query($result_set) {
if (!$result_set) {
die("Database query failed: " . mysql_error());
} else {
return true;
}
}
function redirect($locaiont, $delay = 0){
echo "<meta http-equiv='REFRESH' content='".$delay."; url=".$locaiont."'>";
exit;
}
function display_error(){
global $error;
$br = '<br>';
if (count($error) == 1) $br = '';
if (!empty($error)){
echo "<div class='error'>";
foreach($error as $er):
echo $er . $br;
endforeach;
echo "</div>";
}
}
?>
You can download “Simple PHP User Login / SignUp Script Tutorial” from the right sidebar.