Facebook style login system using Mysqli and CSS

Facebook style login system. Facebook provide login username accepted by 3(username,email,phone number) types, its very simple concept, just we written sql query to check whether that data is there or not to the database.

Live Demo Download

Flow chart Design

Flow chart description :

"SELECT * FROM `login` WHERE '$user' IN (username,email,phone) AND `password` =  md5('$password')"

Above query checking 3 column values (username,email,phone)

Database

CREATE TABLE IF NOT EXISTS `login` (
  `m_id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `email` varchar(50) NOT NULL,
  `phone` varchar(100) NOT NULL,
  `image` varchar(1000) NOT NULL
)

Functionality files
1.index.php
2.login.php
3.Welcome.php
4.logout.php

Index.php

<form id="login_form" action="login.php" method="post">
  <table style="color:#fff;" cellspacing="0">
    <tbody>
      <tr>
        <td class="maintext">
          <label for="email">Email or Phone</label>
        </td>
        <td><label for="pass">Password</label></td>
      </tr>
      <tr>
        <td><input type="text" class="inputtext" name="user" id="user"></td>
        <td><input type="password" class="inputtext" name="password" id="pass"></td>
        <td>
          <input value="Log In" class="subbutton" name="login" type="submit">
        </td>
      </tr>
      <tr>
        <td>
          <div>
            <input type="checkbox" name="keepme" value="1" checked="1">
            <label for="persist_box">Keep me logged in</label>
          </div>
        </td>
        <td>
          <a href="#">Forgot your password?</a>
        </td>
      </tr>
    </tbody>
  </table>
</form>

login.php

<?php 
session_start();
$db = new mysqli('localhost', 'root', '', 'facebook');// change the db connections
if(isset($_POST['login']))
{
  extract($_POST);
    if($user!="" and $password!=""):
     $checkdb2=$db->query("SELECT * FROM `login` WHERE '$user' IN (username,email,phone) AND `password` =  md5('$password')");
     $count=mysqli_num_rows($checkdb2);
      if($count!=""):
         $row=mysqli_fetch_object($checkdb2);
         $_SESSION['users']= $row->username;
         $_SESSION['images']= $row->image;
         $_SESSION['phone']= $row->phone;
         $_SESSION['m_id']= $row->m_id;    
         header("Location:welcome.php");  
      else:
         echo "<script>window.location='index.php?login_failed=1'</script>";
      endif;
    else:
         echo "<script>window.location='index.php?login_failed=1'</script>";
    endif;
}
?>

welcome.php

<html>
  <head>
    <title>mostlikers | welcome</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div  style="border:#CCC solid 1px; width:892px; margin:auto; margin-top:100px;">
      <table width="891" height="288" border="0">
        <tr>
          <td colspan="2">
            <div align="center">
              <h2>Welcome.! <?php echo $_SESSION['users'] ?> Click here <a href="logout.php">logout Page</a></h2>
            </div>
            <hr/>
          </td>
        </tr>
        <tr>
          <td width="389" height="185">
            <div style=" width:181px; height:181px; margin-left:10px; border:#CCC solid 2px;">
              <img src="uploade/a.png" width="180" height="180" />
            </div>
          </td>
          <td width="492">
            <h3>
            <p>Username : <?php echo $_SESSION['users'] ?><br/><br>
              Role     : Web Developer </br>
            </p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

logout.php

<?php
session_start();
session_destroy();
header('Location:index.php');
?>

I hope this concept helpful for you. Above i have posted PHP and HTML better download and use this concept. If you have any doubt or correction comment it below.

Menu Link

18 March, 2014