How to create Basic Login page in Php,MySQL,Bootstrap [part 1]

5:02 PM Unknown 0 Comments


1.Abstract

This tutorial is an attempt to show how to put together a basic user authentication system using PHP and MySQL(bootstrap for the front-end). 

2.Requirements for Sign-In webpage

(Before enter into the code part, You would need special privileges to create or to delete a MySQL database. So assuming you have access to root user, you can create any database using mysql mysqladmin binary)

  • Sublime Edit Text
  • Bootstrap package(for local use else use CDN)
  • Php
  • MySQL
  • Wamp/xampp/Lamp(for linux)/EasyPhp ........


3.Files 

start your Wamp server and then create this files in WWW folder (C:/wamp/www)

menu.php:we w'll include automatically this menu for every new page .
config.php:define the settings for the application

Create DataBase

Database name is :test
table name:login_info

CREATE TABLE IF NOT EXISTS `login_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` text NOT NULL,
  `password` text NOT NULL,
  `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Config.php

<?php
define("host","127.0.0.1");
define("username","_YOUR_USERNAME_");
define("pwd","YOUR_PASSWORD_");
define("db","test");
?>

index.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>MyWebSite</title>
    <!-- Bootstrap CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <style type="text/css">
body{
  background-color: #ffffff;
}

#myjump{
  position: relative;
  top: 50px;
  background-color: #000;
  color: #FFF;
}
  </style>
  <body>
<?php
include("menu.php");
?>
<div class="jumbotron" id="myjump">
  <div class="container" align="center">
    <h1>Hello, world!</h1>
    <p>Contents ...</p>
  
  </div>
</div>
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

menu.php

This is the main menu of the web site ,all the code can be customized in this section(links,brand,website title....) 
 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="menuColor">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
          <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <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="#">MarketPlace</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Updates</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Rules</a></li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
        </div>
<a href="login.php" class="btn btn-large btn-success ">Login/Register</a>
        </form>
      
    </div><!-- /.navbar-collapse -->
    </div>

  </div>
</nav>


<style type="text/css">
  
#menuColor
{
  background-color: #ecf0f1;
}

</style>

login.php

Login PHP is having information about php script and HTML script to do login. 
 
<?php
require("config.php");
$msg="";
if (isset($_POST["btn-login"])) {
  # code...
$email=$_POST["email"];
$password=$_POST["password"];

$conx=new mysqli(host,username,pwd,db);

$req=$conx->query(" select * from login_info where email='$email' and password='$password' ");

if (mysqli_num_rows($req) >0) {
  # code...
header("location:welcome.php");
}
else
{
  $msg='<div class="alert alert-danger">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Check your email/password</strong>
</div>';
}
}
?>

<!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</title>

    <!-- Bootstrap CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<style type="text/css">
  
 #mypannel{
position: relative;
top: 130px;

 }
</style>

  <body>
<?php
include("menu.php");
?>

<div class="container">
<div class="panel panel-default" id="mypannel">
  <div class="panel-body">

<form action="" method="POST" role="form">
  <legend>Login to your session</legend>

  <div class="form-group">
    <label for="">Login</label>
    <input type="text" class="form-control" name="email" placeholder="username/email">

<label for="">Password</label>
    <input type="password" class="form-control" name="password" placeholder="password">

  </div>
<center>
  <button type="submit" class="btn btn-success btn-lg " name="btn-login">Login</button>
  <a href="register.php" class="btn btn-lg btn-primary ">Register</a>
  <button type="submit" class="btn btn-danger btn-lg">Forgot my password</button>
  </center>
</form>


  </div>
<center>
<?php
echo $msg;
?>
</center>

  </div>
  </div>

    <!-- jQuery -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

What is the main difference between include and require ?

This is frequent question .(40% of people asks about that and 60% about get and post :p )

Use include if you don't mind your script continuing without loading the file (in case it doesn't exist etc) and you can (although you shouldn't) live with a Warning error message being displayed.

Using require means your script will halt if it can't load the specified file, and throw a Fatal error.


welcome.php

this is the welcome page of the user, 'profile page ' . In this post we have not ,yet ,set a default session to every user that have been login, to his session ,so, this is like a standard page .
(next post w'll be with session). 
 
<!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>wellcome</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
 <div class="navbar navbar-inverse">
  <div class="container-fluid">
   <a class="navbar-brand" href="#">profile</a>
   <ul class="nav navbar-nav">
    <li class="active">
     <a href="#">Profile</a>
    </li>
    <li>
     <a href="index.php">Logout</a>
    </li>
   </ul>
  </div>
 </div>

<center>
 <h3>Hi ! root </h3>

</center>
  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

What about security !!

this post was too easy to getting started with some coding stuff and create simple application but you should definitely think more about security issues ,because ,here for example the attacker can gaining the access through two basics attack (hack for fun :p ) Sql injection by just typing ' or 1=1; or XSS attack , because the application is not protected.So,you should think about security to take the good risk :D .(next post i w'll post things about security )

ScreenShot




Download the project

https://drive.google.com/file/d/0B-qTMPAUIfdTUXJ5YjRoRmpETzg/view?usp=sharing

Installation 

check this video:

Unknown