Home / login template
Showing posts with label login template. Show all posts
Showing posts with label login template. Show all posts

Apr 7, 2018

Bootrstrap 4 Login with MySQL Database

2 Komentar
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.
Bootrstrap 4 Login with MySQL Database

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
Bootrstrap Login with MySQL Database

Bootrstrap 4 Login with MySQL Database

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>

Bootrstrap 4 Login with MySQL Database

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>

PHP Login with MySQL Database

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 .
Read More

Jan 18, 2017

Flat Portfolio Login Template

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
Read More

Jan 14, 2017

Bootstrap Login with mysql database tutorial

4 Komentar
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.

Read More

Jan 10, 2017

Sunflower Bootstrap Login Template

Komentar
Sunflower Bootstrap Login Template

Download Sunflower Login Template. Login template with bootstrap featuring a bright display with a cool atmosphere like in nature. "The sun will not make you sick, gusts of wind would come throw all anxiety in your heart". hahaha ... hope you like it..

Just sample admin page after loggin success


Features Availability
Responsive OK
Session OK
Bootstrap OK
Sample DB OK
Read More
Subscribe to: Posts (Atom)