In this section i am creation a login page using bootstrap ,mysql and php. For that first create a database in phpmyadmin .For that start your local server xampp or wamp .Then open your browser enter URL shown below
http://localhost/phpmyadmin/Then create a database name it has Mydb .After that execute below code in sql section
CREATE TABLE IF NOT EXISTS `user` (
`uid` int(11) NOT NULL,
`username` varchar(200) NOT NULL,
`password` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
--
-- Dumping data for table `user`
--
INSERT INTO `user` (`uid`, `username`, `password`) VALUES
(1, 'junaid', '987456');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `user`
--
ALTER TABLE `user`
ADD PRIMARY KEY (`uid`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
MODIFY `uid` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;Then you can see the below table.
After that you need to connect data base using some code .for that create db.php add blow code in to it
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'Mydb');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
?>Above code localhost your local server host name .root is username defaultly used in xampp server.If your using password add password in the blank space .Mydb is the database name.After that you need to create a login form in index.php .Add code that shown below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<form class="form-horizontal" method="POST" action="check_login.php">
<div class="form-group">
<label class="control-label col-sm-2" for="username">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="Enter username" name="username" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" name="login" class="btn btn-default">Login</button>
</div>
</div>
</form>
</div>
</body>
</html>We are using POST method in above form and form action will pass the value to the check_login.php. Other actions are take place in check_login.php
<?php
session_start();
error_reporting(0);
include_once 'db.php';
if (isset($_POST['login'])) {
$username=$_POST['username'];
$password=$_POST['password'];
if ((!empty($username)) && (!empty($password))) {
$query=mysql_query("SELECT * FROM `user` WHERE `username` ='$username' AND `password`='$password'");
$obj=mysql_fetch_object($query);
$uid=$obj->uid;
if ($uid) {
$_SESSION['uid']=$uid;
$_SESSION['username']=$username;
$url='home.php';
header("location:$url");
}
else{
echo "<h2 style='color:red;'>Wrong username Or Password</h2> <a href='index.php'>Login Again</a>";
}
}else
{
echo "Fill all the fields";
}
}
?>Above code we are checking form submit values are by using !empty() condition .
SELECT * FROM `user` WHERE `username` ='$username' AND `password`='$password'using this mysql query we are fetching data from database table .using mysql_fetch_object() we can get each data from it .if the login in successful we can get the value $uid then the page will redirect to home.php
<?php
session_start();
include_once 'session.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Welcome <?php echo $_SESSION['username']; ?></h2>
<div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Your Logined successfully
</div>
<a href="logout.php">Log Out</a>
</div>
</body>
</html>Above code we can see including a page session.php .this page will the check the session of users for that we need to add some code to session.php
<?php
$session_uid=$_SESSION['uid'];
// Session Private
if(empty($session_uid))
{
$url='index.php';
header("location:$url");
}
?>Then we need to create a logout page .on that age session will destroyed and redirect to index.php.For that create logout.php
<?php
session_start();
$_SESSION['uid']='';
$_SESSION['username']='';
session_destroy();
header('location:home.php');
?>After creating all pages .open your browser and execute you url.For example
http://localhost/demo/Output
