Coding Cheese: bootstrap

Home / bootstrap

Showing posts with label bootstrap. Show all posts

Apr 7, 2018

Bootrstrap 4 Login with MySQL Database

Bootrstrap 4 Login with MySQL Database. In this tutorial we will create login system using database and bootstrap 4 frame work. So follow the steps well and Happy coding!!

1. Create Database

Create a new database for example abc_database . You can create it using phpMyAdmin, SQLyog, or similar applications.

Then create a table users with columns like the picture below and fill with login data. Important !! for password is using md5 algorithm, so make sure your password has been converted in md5 format.

You can make the conversion through the http://www.miraclesalad.com/webtools/md5.php

In addition to the above steps, the process of creating tables can use the import sql that has been included in the download file. in this file, I have input some data for login process:
username: admin, password: admin;
username: member, password: member;

2. Create Application
Login Page (index.php) created using template you can get at https://startbootstrap.com/template-overviews/coming-soon/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>ABC Corp</title>
 <link rel="icon" type="image/png" href="img/favicon.ico"/>
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/coming-soon.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="overlay"></div>
    <div class="masthead">
      <div class="masthead-bg"></div>
      <div class="container h-100">
        <div class="row h-100">
          <div class="col-12 my-auto">
            <div class="masthead-content text-white py-5 py-md-0">
              <h1 class="mb-3"><i class="fa fa-adn"></i> ABC Corp</h1>
  <form method='post' action="login-process.php">
  <div class="input-group input-group-newsletter" style="padding:10px 0;">
  <input type="text" name="username" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon" required autofocus>
  </div>
  <div class="input-group input-group-newsletter" style="padding:10px 0;">
  <input type="password" name="password" class="form-control" placeholder="Password" aria-label="Username" aria-describedby="basic-addon" required autofocus>
  </div>
  <div class="input-group input-group-newsletter" style="padding:10px 0;">
  <button class="btn btn-secondary" type="submit" name="login">Login</button> 
  </div>
  </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="social-icons">
      <ul class="list-unstyled text-center mb-0">
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
      </ul>
    </div>
    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- Plugin JavaScript -->
    <script src="vendor/vide/jquery.vide.min.js"></script>
    <!-- Custom scripts for this template -->
    <script src="js/coming-soon.min.js"></script>
  </body>
</html>

Login Check (login-process.php)

This file used to continue the process after the login button is pressed. username and password data that has been entered in the login page will be checked on the database. If data is valid it will be directed to the main page (main_pages folder). when the data is invalid then the process will be redirected back to the login page.

<?php
session_start();
// db config -------------------------------------------------
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "abc_database";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 
//----------------------------------------------------------
if ( isset($_POST['login'])){
    $username = $_POST['username'];
 $password = md5( $_POST['password']);

    $sql_query = "SELECT name, email, username, id FROM users 
                  WHERE username='$username' AND password='$password'
                  LIMIT 1"; //sql query
    $result = $conn->query($sql_query);
    if ($result->num_rows > 0) {
    // data valid
       while($row = $result->fetch_assoc()) {
        //retrieve data from database and stored in session;
        $_SESSION['name']= $row["name"]; 
 $conn->close();
 header('location:main_pages/index.php');//dirrect to main page folder
 exit();
 }
     } else { //data invalid
 //alert then back to login page
 echo "<script language=\"javascript\">alert(\"Invalid username or password\");
 document.location.href='index.php?error_login';</script>";
 exit();
     }
} else {
    header('location:index.php');
    exit();
}
?>

Main Page (index.php)
This file is the main page that can be accessed when the login is successful. This file is located inside a different folder (in the example: main_pages folder).

<?php 
session_start();
if ( !isset($_SESSION['name'])){// handling if dont'have session

 header('location:../index.php'); 
 exit();
} 
$name = $_SESSION['name'];
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>ABC Corp</title>
 <link rel="icon" type="image/png" href="../img/favicon.ico"/>
    <!-- Bootstrap core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom fonts for this template -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../css/coming-soon.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="overlay"></div>
    <div class="masthead">
      <div class="masthead-bg"></div>
      <div class="container h-100">
        <div class="row h-100">
          <div class="col-12 my-auto">
            <div class="masthead-content text-white py-5 py-md-0">
              <img src="../img/profile-icon.png" class="rounded-circle" width="240px" height="240px" style="padding:20px;">
  <h2 class="mb-3"><?php echo $name; ?></h2>
  <p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  In eros leo, fermentum a pellentesque non, sollicitudin a ipsum.
  <strong>Pellentesque venenatis </strong> nunc vestibulum, laoreet ipsum ac, ultricies mauris.</p>
  <div class="input-group input-group-newsletter" style="padding:10px 0;">
  <a href="logout.php" class="btn btn-secondary">Logout</a> 
  </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="social-icons">
      <ul class="list-unstyled text-center mb-0">
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-facebook"></i>
          </a>
        </li>
        <li class="list-unstyled-item">
          <a href="#">
            <i class="fa fa-instagram"></i>
          </a>
        </li>
      </ul>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="../vendor/jquery/jquery.min.js"></script>
    <script src="../vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="../vendor/vide/jquery.vide.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="../js/coming-soon.min.js"></script>

  </body>

</html>

Logout Process (logout.php)

When logout button is pressed, the process will be directed to this file. Function of this file is to delete a session that has been successfully logged. After that the process will be directed to the login page.

<?php
session_start();
session_destroy();
header('location:../index.php');//goto login page
?>

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

Download Source Code

May 14, 2017

bootstrap jquery library

Using Bootstrap Daterange Picker

Nina Dee 4:22 PM Komentar

Using Bootstrap daterange picker. Hello.., on this occasion, I want to share tutorials using date range picker in your web application. This starts when I search for jquery related daterange picker which I will use as data in my database.

If you plan will require input data in terms of time (date and time or both) then this jquery you should try. All information related to the use of this component has been described on the website and its use is not too difficult. Date Range Picker relies on Bootstrap, jQuery and Moment.js. So don't forget to include the required scripts and stylesheet in your page.

The following is an example of using the date range picker for bootstrap.

<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>PHP Search Mysql data</title>

    <!-- Bootstrap Core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <!-- jQuery -->
    <script src="bootstrap/js/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
 <!-- Date Range Picker -->
 <link href="daterangepicker/daterangepicker.css" rel="stylesheet">
 <script src="daterangepicker/moment.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="http://coding-cheese.blogspot.com/">Coding Cheese</a>
  </div>
   <ul class="nav navbar-nav">
    <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
   <span class="caret"></span></a>
   <ul class="dropdown-menu">
     <li><a href="#">Page 1-1</a></li>
     <li><a href="#">Page 1-2</a></li>
     <li><a href="#">Page 1-3</a></li>
   </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
            
  </div>

</div>

<div class="container">
<form class="form-horizontal" method="post" enctype="multipart/form-data">
 <fieldset>
  <div id="legend">
   <legend class=""><i class="glyphicon glyphicon-plus"></i>&nbsp; Add Data</legend>
  </div>  
  <div class="form-group">
    <label class="col-md-4 control-label" for="fullname">Full Name</label>  
    <div class="col-md-6">
    <input id="fullname" name="fullname" placeholder="Full Name" class="form-control input-md" required="" type="text" required >
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="email">Email</label>  
    <div class="col-md-6">
    <input id="email" name="email" placeholder="Email" class="form-control input-md" required="" type="email" required >
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="schedule">Schedule</label>  
    <div class="col-md-6">
    <input id="schedule" name="schedule" placeholder="Schedule" class="form-control input-md" type="text" required >
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-4 control-label" for="jobdesk">Jobdesk</label>  
    <div class="col-md-6">
   <select id="jobdesk" name="jobdesk" class="form-control" required >
    <option value="Animation Design">Animation Design</option>
    <option value="Application Testing">Application Testing</option>
    <option value="Hardware Maintenance">Hardware Maintenance</option>
    <option value="Network Maintenance">Network Maintenance</option>
    <option value="Quality Control">Quality Control</option>
    <option value="Developt Application">Developt Application</option>
   </select>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-md-4 control-label" for="add_data"></label>
    <div class="col-md-4">
   <button id="add_data" name="add_data" class="btn btn-success">Add</button>
    </div>
  </div>
  
 </fieldset> 
<form>
</div>

<script src="daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
  $("#schedule").daterangepicker({ //date range picker
   "drops": "down",
   locale: {
    format: 'DD/MM/YYYY'
   }
  });
    });
</script>

</body>
</html>

For the complete source code (with sql file) you can get it at this link below:

Jan 20, 2017

bootstrap tutorial

Trigger Bootstrap Modal with Java Script / PHP Code

Nina Dee 2:23 AM Komentar

Trigger Bootstrap Modal with Java Script / PHP Code- Hello readers, today I would like explain about how to create bootstrap modal controller from java script/php. Some things will make us to use this method, such as error handling, alerts (success, warning, etc), and input form that uses data stored in java script or php. This following is examples I use in error handling in Flat Portfolio Login Template

Flow

if username or password not right, check-login.php will be send the error message to login page.

then after login page receive error massage , we have to get the message to be used as a trigger in displaying the modals. this code is part to call the modal (errModal)

 <?php
 if (isset($_GET['error'])) : ?>
 <!-- open modal-->
 <script type="text/javascript">
     $(window).load(function(){
       $('#errModal').modal({
          show: true
       });
     });
 </script>
 <?php endif;?>

<!-- Modal -->
  <div class="modal fade" id="errModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Error</h4>
        </div>
        <div class="modal-body">
          <p>You have entered an invalid login </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
        </div>
      </div>
      
    </div>
  </div>

Don't forget to include latest jquery lib . because the basic of this function is located in javascript.
Ok, thats all for the explanation. If you have a question, feel free to comment here!

Jan 19, 2017

bootstrap tutorial

Setting Boostsrap Modal Position on Center Display

Nina Dee 6:26 AM Komentar

Setting Boostsrap Modal Position on Center Display - Bootstrap component that is often used to interact with the user is Modal. Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.

The default view of Modal is the top center as shown below:

But sometimes this position is not as I wanted. So, If you want to change the position is just insert this css code to your <head> html.

<style type='text/css'>
 body.modal-open .modal {
  display: flex !important;
  height: 80%;
 } 

 body.modal-open .modal .modal-dialog {
  margin: auto;
 }
</style>

and then the result is like this:

Ok, thats all for the tutorial to Setting Boostsrap Modal Position on Center Display. Happy Coding...

Jan 18, 2017

bootstrap login template

Flat Portfolio Login Template

Nina Dee 6:54 AM Komentar

Flat Portfolio Login Template - Login template with bootstrap and portfolio design that will provide its own preoccupations in conducting the login process.

Yesterday I had the idea to create a login page with a portfolio view. so I decided to make it. And then the result is something like this:

Features	Availability
Responsive	OK
Session	OK
Bootstrap	OK
Sample DB	Download Here

Jan 14, 2017

bootstrap login template tutorial

Bootstrap Login with mysql database tutorial

Nina Dee 9:07 PM 4 Komentar

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

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 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>";
}
}
?>

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.

Coding Cheese