How to Login Multi-Level User using PHP MySQLi and Bootstrap
Do not forget to create a new database with a name up to you and table names up to you as well , or you can run the sql script is below.
CREATE DATABASE IF NOT EXISTS `biodata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `biodata`;
CREATE TABLE IF NOT EXISTS `login` (
`id_login` int(11) NOT NULL,
`name_login` varchar(45) NOT NULL,
`username` varchar(100) NOT NULL,
`password` varchar(100) NOT NULL,
`type_login` varchar(45) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
INSERT INTO `login` (`id_login`, `name_login`, `username`, `password`, `type_login`) VALUES
(1, 'Ghazali Samudra', 'admin', '21232f297a57a5a743894a0e4a801fc3', 'admin'),
(2, 'T Ghazali Pidie', 'user', 'ee11cbb19052e40b07aac0ca060c23ee', 'user');
ALTER TABLE `login`
ADD PRIMARY KEY (`id_login`);
ALTER TABLE `login`
MODIFY `id_login` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=3;
login.php
<!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">
<title>Login Session</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>
</p>
<div class="container">
<?php
$username=$_POST['username'];
$password=md5($_POST['password']);
$login=$_POST['login'];
if(isset($login)){
$mysqli = new mysqli("localhost", "root", "pidie", "biodata");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli->connect_error;
}
$res = $mysqli->query("SELECT * FROM login where username='$username' and password='$password'");
$row = $res->fetch_assoc();
$name = $row['name_login'];
$user = $row['username'];
$pass = $row['password'];
$type = $row['type_login'];
if($user==$username && $pass=$password){
session_start();
if($type=="admin"){
$_SESSION['mysesi']=$name;
$_SESSION['mytype']=$type;
echo "<script>window.location.assign('admin.php')</script>";
} else if($type=="user"){
$_SESSION['mysesi']=$name;
$_SESSION['mytype']=$type;
echo "<script>window.location.assign('index.php')</script>";
} else{
?>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Maaf!</strong> Tidak sesuai dengan type user.
</div>
<?php
}
} else{
?>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<strong>Warning!</strong> This username or password not same with database.
</div>
<?php
}
}
?>
<div class="panel panel-default">
<div class="panel-body">
<h2>Login Session</h2>
<form role="form" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" name="login" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
index.php
<?php
session_start();
if (!isset($_SESSION['mysesi']) && !isset($_SESSION['mytype'])=='user')
{
echo "<script>window.location.assign('login.php')</script>";
}
?>
<!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">
<title>Login Session</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>
</p>
<div class="container">
<div class="jumbotron">
<h1>Welcome, hi <?php echo $_SESSION['mysesi'] ?></h1>
<p>This is application login session</p>
<p><a class="btn btn-primary btn-lg" href="logout.php" role="button">Logout</a></p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
admin.php
<?php
session_start();
if (!isset($_SESSION['mysesi']) && !isset($_SESSION['mytype'])=='admin')
{
echo "<script>window.location.assign('login.php')</script>";
}
?>
<!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">
<title>Login Session</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p>
</p>
<div class="container">
<div class="jumbotron">
<h1>Welcome, hi <?php echo $_SESSION['mysesi'] ?></h1>
<p>This is application login session</p>
<p><a class="btn btn-primary btn-lg" href="logout.php" role="button">Logout</a></p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
logout.php
<?php
session_start();
echo "<script>window.location.assign('login.php')</script>";
session_destroy();
?>
