1- Create Database "bootstrap" and then create table
CREATE TABLE tbl_users
- userid
- username
- password
2- Insert New Row
INSERT INTO tbl_users(username,password) VALUES('demo@gmail.com',md5('test'));
3- Download Bootstrap
4- Write PHP-MySQL codes for login
Create web directory name or web root 'clogin'
Extract bootstrap with css, js, fonts to clogin
Create folder includes in web root
config.php (Save to includes)
<?php
$mysql_hostname = "localhost";
$mysql_user = "root";
$mysql_password = "";
$mysql_database = "bootstrap";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>
index.php (Save to web root)
<?php
header("location: login.php");
?>
login.php (Save to web root)
<?php
session_start();
include("includes/config.php");
if($_SERVER["REQUEST_METHOD"] == "POST")
{
// username and password sent from form
$myusername = addslashes($_POST['username']);
$mypassword = md5(addslashes($_POST['password']));
$sql = "SELECT userid FROM tbl_users WHERE username='$myusername' and password='$mypassword'";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
// If result matched $myusername and $mypassword, table row must be 1 row
if($count == 1){
//session_register("myusername");
$_SESSION['login_admin']=$myusername;
header("location: http://localhost/clogin/admin/");
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>PHP-MySQL Login Using Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/signin.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input name="username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div> <!-- /container -->
</body>
</html>
logout.php (Save to Web root)
<?php
session_start();
if(session_destroy())
{
header("Location: index.php");
}
?>
Create folder admin in web root
index.php (Save to admin)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse 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="#">Dashboard</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="../logout.php">Log Out</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Dashboard</h1>
<p class="lead">
Dashboard page is under construction
</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Demo
http://downloads.ziddu.com/download/24380544/clogin.zip.html
Read more blog
http://www.freeonlinelecture.com
Follow Us with Facebook
https://www.facebook.com/pages/PHP-Tutorial/782239958529506
1 comments:
commentsHelp ME!
Replyhttp://gyazo.com/9b5674e8d6f69f3f9e89be4aa2bc3065