You are here : / / / / Bootstrap Login with mysql database tutorial

Jan 14, 2017

Bootstrap Login with mysql database tutorial

Bootstrap Login with mysql database tutorial

Bootsrap Login with mysql database is one of the security methods for accessing your web systems (applications). This step is a link between the user to be able to access the system. The following is a tutorial to make a simple  login page using Bootstrap and mysql database.

Create database:
Open phpmyadmin, create database login-test
Create database on phpmyadmin

Run the sql code below for create user_login table or you can import them with the following sql file

CREATE TABLE `user_login` (
  `id` int(20) NOT NULL,
  `email` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  `full_name` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `user_login` (`id`, `email`, `password`, `full_name`) VALUES
(1, 'admin@system.com', 'admin123', 'Admin 01');


ALTER TABLE `user_login`
  ADD PRIMARY KEY (`id`);


ALTER TABLE `user_login`
  MODIFY `id` int(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

Create database on phpmyadmin

Create the application
db_con.php as a connector between applications with mysql database
<?php 
$hostname = "localhost";
$username = "root";
$password = "";
$database = "login-test";

mysql_connect($hostname,$username,$password) or die ("connection failed");
mysql_select_db($database) or die ("error connect database");
?>

login.php (this file need style.css and style.js)
<!DOCTYPE HTML>
<html>
<head>
    <title>Bootstrap Login</title>
    <!-- bootstrap-3.3.7 -->
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <!-- JQUERY -->
    <script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
    <link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="style/style.js"></script>
</head>
<body>
    <div class="container">
        <div class="card card-container">
            <img id="profile-img" class="profile-img-card" src="img/avatar_2x.png" />
            <p id="profile-name" class="profile-name-card"></p>
            <form class="form-signin" action="" method="POST">
                <span id="reauth-email" class="reauth-email"></span>
                <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
                <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
                <br>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="login">Sign in</button>
            </form>
        </div>
    </div>
</body>
</html>
<?php
include "db_con.php";
IF(ISSET($_POST['login'])){
$email = $_POST['email'];
$password = $_POST['password'];
$cek = mysql_num_rows(mysql_query("SELECT * FROM user_login WHERE email='$email' AND password='$password'"));
$data = mysql_fetch_array(mysql_query("SELECT * FROM user_login WHERE email='$email' AND password='$password'"));
IF($cek > 0)
{
 session_start();
 $_SESSION['email'] = $data['email'];
 $_SESSION['name'] = $data['full_name'];
 echo "<script language=\"javascript\">alert(\"welcome \");document.location.href='index.php';</script>";
}else{
 echo "<script language=\"javascript\">alert(\"Invalid username or password\");document.location.href='login.php';</script>";
}
}
?>

login page


index.php if the login process successfully then direct to this page
<?php 
session_start();
IF(ISSET($_SESSION['name'])){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Bootstrap Login</title>
<!-- bootstrap-3.3.7 -->
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- JQUERY -->
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
</head>
<body>
    <div class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="container">
           <div class="navbar-header">
               <a class="navbar-brand" href="index.php">Home </a>
               <a class="navbar-brand" href="#">Navbar 2</a>
               <a class="navbar-brand" href="#">Navbar 3</a>
               <a class="navbar-brand" href="#">Navbar 4</a>
               <a class="navbar-brand pull-right" href="logout.php?destroy"> <span class="glyphicon glyphicon-off"></span> Logout </a>
               <a class="navbar-brand pull-right"><span class="glyphicon glyphicon-user"></span> <?=$_SESSION['name'];?> </a>
           </div>
        </div>
     </div>
     <div class="container">
         <h2>Hallo </h2>
         <br>
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, 
             leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. <br> 
             Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, 
             consectetur nec nisi vitae, laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, 
             ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
         </p>
         <br>
     </div>
</body>
</html>
<?php 
}else{
echo "<script language=\"javascript\">alert(\"Please login\");document.location.href='login.php';</script>"; 
}
?>

after login process success drirrect to this page

logout.php destroy session then redirect to login page
<?php 
IF(ISSET($_GET['destroy'])){
 session_start();
 session_destroy();
 header('Location:login.php');
}
?>

That's all for the tutorial create Bootstrap Login form with mysql database, for a more complete code (and file) can be downloaded at the download link. hope you like it.

Share this post

Related Post

Bootstrap Login with mysql database tutorial
4/ 5
Oleh
4 Komentar

Subscribe via email

Like the above article? Add your email to subscribe.

4 comments

Tulis comments
avatar
Unknown
September 22, 2017 at 5:00 PM

"I very much enjoyed this article.Nice article thanks for given this information. i hope it useful to many pepole.php jobs in hyderabad.
"

Reply
avatar
Suruchi Pandey
October 4, 2018 at 1:05 PM

This article turned out to be genuinely beneficial for me. I was looking all around for this piece of code, and you made my search simple. Thank you for the share. Continue blogging and keep us updated.
Website Design Agency | Website design company

Reply

Short Code, use <i rel="code"> ... the code ... </i>
long code, use <i rel="pre"> ... the code ... </i>
insert image, use <i rel="image"> ... image source(URL) ... </i>

Subscribe to: Post Comments (Atom)