Building the Login System
In this section we'll build a login system that allows users to access his existing account by giving your credential. if the username and password match, the user is authorized and granted access to the site, otherwise the login attempt will be rejected. But, first we need to create a table that will hold all the user data.
Step 1: Creating the Database Table
Execute the following SQL query to create the users table inside your MySQL database.
CREATE TABLE users (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
Step 2: Creating the connect.php File
After creating the table, we need create a PHP script in order to connect to the MySQL database server. Let's create a file named "connect.php" and put the following code inside it.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'db_user');
$con=mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
Note: Replace the credentials according to your MySQL server setting.
For connecting your mysql database with php refer this link Connect mysql database with php.
Step 3: Creating the LogIn Form
Let's create another PHP file "login.php" and put the following example code in it. This example code will create a web form that allows user to login themselves.
This script will also generate errors if a user tries to submit the form without entering any value, or if username and password entered by the user is not registered in table. if the username and password match, the user is authorized and granted access to the site, otherwise the login attempt will be rejected.
<?php
session_start();
include ("connect.php");
$username_err='';
$password_err='';
$msg = "";
$username = '';
$password ='';
if(isset($_POST["submit"]))
{
if(empty(trim($_POST["username"]))){
$username_err = "Please enter your username.";
}
if(empty(trim($_POST["password"]))){
$password_err = "Please enter your password.";
}
if(empty($username_err) && empty($password_err))
{
$username = $_POST["username"];
$password = $_POST["password"];
$username = mysqli_real_escape_string($con, $username);
$password = mysqli_real_escape_string($con, $password);
$sql="SELECT id FROM `users` WHERE username='$username' and password='$password'";
$result=mysqli_query($con,$sql);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if(mysqli_num_rows($result) == 1)
{
$_SESSION['id'] = $row['User_Id'];
header("Location: ../Demo/Welcome.php"); /* Redirect browser */
exit();
}
else
{
echo "Sorry..! Invalid UserName and Password";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign In</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body{ font: 14px sans-serif; }
.wrapper{ width: 350px; padding: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<h2>Sign In</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<label>Username</label>
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo $username_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<label>Password</label>
<input type="password" name="password" class="form-control" value="<?php echo $password; ?>">
<span class="help-block"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Log In">
</div>
</form>
</div>
</body>
</html>
— The output of the above example (i.e. signin form) will look something like this:
We've used the Bootstrap framework to make the form layouts quickly and beautifully.
In this section we'll build a login system that allows users to access his existing account by giving your credential. if the username and password match, the user is authorized and granted access to the site, otherwise the login attempt will be rejected. But, first we need to create a table that will hold all the user data.
Step 1: Creating the Database Table
Execute the following SQL query to create the users table inside your MySQL database.
CREATE TABLE users (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
Step 2: Creating the connect.php File
After creating the table, we need create a PHP script in order to connect to the MySQL database server. Let's create a file named "connect.php" and put the following code inside it.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'db_user');
$con=mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
Note: Replace the credentials according to your MySQL server setting.
For connecting your mysql database with php refer this link Connect mysql database with php.
Step 3: Creating the LogIn Form
Let's create another PHP file "login.php" and put the following example code in it. This example code will create a web form that allows user to login themselves.
This script will also generate errors if a user tries to submit the form without entering any value, or if username and password entered by the user is not registered in table. if the username and password match, the user is authorized and granted access to the site, otherwise the login attempt will be rejected.
<?php
session_start();
include ("connect.php");
$username_err='';
$password_err='';
$msg = "";
$username = '';
$password ='';
if(isset($_POST["submit"]))
{
if(empty(trim($_POST["username"]))){
$username_err = "Please enter your username.";
}
if(empty(trim($_POST["password"]))){
$password_err = "Please enter your password.";
}
if(empty($username_err) && empty($password_err))
{
$username = $_POST["username"];
$password = $_POST["password"];
$username = mysqli_real_escape_string($con, $username);
$password = mysqli_real_escape_string($con, $password);
$sql="SELECT id FROM `users` WHERE username='$username' and password='$password'";
$result=mysqli_query($con,$sql);
$row=mysqli_fetch_array($result,MYSQLI_ASSOC);
if(mysqli_num_rows($result) == 1)
{
$_SESSION['id'] = $row['User_Id'];
header("Location: ../Demo/Welcome.php"); /* Redirect browser */
exit();
}
else
{
echo "Sorry..! Invalid UserName and Password";
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign In</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<style type="text/css">
body{ font: 14px sans-serif; }
.wrapper{ width: 350px; padding: 20px; }
</style>
</head>
<body>
<div class="wrapper">
<h2>Sign In</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<label>Username</label>
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
<span class="help-block"><?php echo $username_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<label>Password</label>
<input type="password" name="password" class="form-control" value="<?php echo $password; ?>">
<span class="help-block"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Log In">
</div>
</form>
</div>
</body>
</html>
— The output of the above example (i.e. signin form) will look something like this:
We've used the Bootstrap framework to make the form layouts quickly and beautifully.
0 Comments