Categories
PHP

Responsive/Bootstrap PHP Login form with MySQL database

php-login-form-bootstrap-responsive

By inspired from my recent post for Basic Registration form in PHP with MySQL database connectivity, Again I am connecting the node of basic functionality behind Registration process. If a user gets registered on your site you also have to have a functionality of Login/Sign in. Hope this article meets your requirements of Login functionality. The finest feature in this login form are; its Responsive and made with Bootstrap 3.0.2 framework, it’s very easy to understandable for a beginner, its ready to use code just Get the Code Snippets download here and implement in your system. We also want to show you the test/demo HTML page for just your responsive test.

View Demo

Implementation Process

[divider]

STEP:-1 Create database

Create database class;
mysql> use student
mysql> create table student(id int,name varchar(40),email varchar(80),password varchar(40));
mysql>insert into student(id,name,email,password) values(1,’john’,’john.doe@gmail.com’,’12345’);

STEP:-2. Create a file for database connection (named as connect.php)

<?php
$hostname="localhost"; //local server name default localhost
$username="root";  //mysql username default is root.
$password="daknet";       //blank if no password is set for mysql.
$database="class";  //database name which you created
$con=mysql_connect($hostname,$username,$password);
if(! $con)
{
die('Connection Failed'.mysql_error());
}
mysql_select_db($database,$con);
?>

STEP:-3. Create HTML Structure for Responsive/Bootstrap layout

<div>
  <div style="margin-top:20px">
    <div>
      <form name="form_login" method="post" action="login.php" role="form">
        <fieldset>
          <h2>Please Sign In</h2>
          <hr>
          <div>
            <input name="user_id" type="text" id="user_id" placeholder="Email Address">
          </div>
          <div>
            <input type="password" name="password" id="password" placeholder="Password">
          </div>
          <span>
          <button type="button" data-color="info">Remember Me</button><!-- Additional Option -->
          <input type="checkbox" name="remember_me" id="remember_me" checked="checked">
          <hr>
          <div>
            <div>
              <input type="submit" name="Submit" value="Login">
            </div>
            <div> <a href="http://creativealive.com/basic-registration-form-php-mysql-database-connectivity/" target="_blank">Register<small>- Read Article</small></a> </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>

STEP:-4. Convert the HTML file in to PHP and add PHP code below

<?php     //start php tag
//include connect.php page for database connection
Include('connect.php');
//if submit is not blanked i.e. it is clicked.
if (isset($_REQUEST['Submit'])) //here give the name of your button on which you would like    //to perform action.
{
// here check the submitted text box for null value by giving there name.
    if($_REQUEST['user_id']=="" || $_REQUEST['password']=="")
    {
    echo " Field must be filled";
    }
    else
    {
       $sql1= "select * from student where email= '".$_REQUEST['user_id']."' &&  password ='".$_REQUEST['password']."'";
      $result=mysql_query($sql1)
        or exit("Sql Error".mysql_error());
        $num_rows=mysql_num_rows($result);
       if($num_rows>0)
       {
//here you can redirect on your file which you want to show after login just change filename ,give it to your filename.
           //header("location:filename.php"); 
 //OR just simply print a message.
         Echo "You have logged in successfully";    
        }
        else
        {
            echo "username or password incorrect";
        }
    }
}    
?>

Download Zip

By Akshma Sharma

Web & PHP Developer, with a zeal experience of web and application development on various platform like Android, iOS, PHP, MySQL, CMS, Wordpress, Joomla, Magento and Drupal.

7 replies on “Responsive/Bootstrap PHP Login form with MySQL database”

Nice post. I was checking continuously this weblog and I am impressed! Very helpful info specifically the final phase 🙂 I take care of such information much. I used to be seeking this particular info for a long time. Thanks and best of luck.

This web site certainly has all the information I needed concerning this subject and didn’t know who to ask.

just a quick question, how do you make your sites pages check that you have logged in ie stop someone bypassing the login page just by knowing the the path of the pages on your site?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.