facebook style login system
Today i posted on facebook style login form using PHP and CSS 3. facebook login form username accept on 3 types email id, Phone number, facebook email id this are 3 ways to login to facebook if user can enter wrong password search to the databasse to fetch the matching username to display image in login form. similar like i make this coding.
Flow chart Design
Flow chart description :
user enter username and password its check to the login table. after user confirmation allow to welcome page else page go login.php page if username or phone number correct password only error page going on login error.php.
Database
CREATE TABLE `login`
(
`m_id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(150) NOT NULL,
`password` varchar(150) NOT NULL,
`phone` varchar(150) NOT NULL,
`image` varchar(150) NOT NULL,
)
Functionality files
1.index.php
2.login.php
3.Welcome.php
4.logout.php
index.php
<?php
session_start();
ob_start();
if(isset($_SESSION['m_id'])!="")
{
header('Location:welcome.php');
}
if(isset($_SESSION['users'])!="")
{
header('Location:login.php');
}
else
{
}
$db = new mysqli('localhost', 'root', '', 'facebook');// change the database connections
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mostlikers</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="topBar">
<div>
<div class="clearfix logout_menubar">
<a class="toptitle" href="http://karthickinfotech.blogspot.in/" title="Mostliker">
<img src="logos.png">
</a>
<div class="menu_login_container rfloat _ohf">
<form id="login_form" action="login.php" method="post">
<table 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="email" id="email" value="" tabindex="1"></td>
<td><input type="password" class="inputtext" name="password" id="pass" tabindex="2"></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>
</div>
</div>
</div>
</div>
<div class="mostlikers-bottom">
<h3><a href="karthickinfotech.blogspot.in/p/chat.html">
Click more mostlikers Demos</a></h3></div>
</body>
</html>
login.php
<?php
session_start();
$db = new mysqli('localhost', 'root', '', 'facebook');// change the database connections
?>
<?php
if(isset($_POST['login']))
{
$email=$_POST['email'];
$pwd=$_POST['password'];
if($email!="" and $pwd!="")
{
$checkdb2=$db->query("select * from login where username='$email' and password='$pwd' ");
$check=mysqli_num_rows($checkdb2);
if(empty($check))
{
$checkdb2=$db->query("select * from login where phone='$email' and password='$pwd' ");
$check=mysqli_num_rows($checkdb2);
if(empty($check))
{
$checkdb2=$db->query("select * from login where phone='$email' and password!='$pwd' ");
$check2=mysqli_num_rows($checkdb2);
if(empty($check2))
{
$checkdb2=$db->query("select * from login where username='$email'");
$check2=mysqli_num_rows($checkdb2);
}
}
}
}
else {
echo "<script>window.location='login.php?login_failed=1'</script>";
}
if($check)
{
while($image=mysqli_fetch_object($checkdb2))
{
$_SESSION['users']= $image->username;
$_SESSION['images']= $image->image;
$_SESSION['phone']= $image->phone;
$_SESSION['m_id']= $image->m_id;
}
echo "<script>window.location='welcome.php'</script>";
}
else {
}
if($check2)
{
while($image=mysqli_fetch_object($checkdb2))
{
$_SESSION['users']= $image->username;
$_SESSION['images']= $image->image;
$_SESSION['phone']= $image->phone;
}
echo "<script>window.location='login.php?login_failed=1'</script>";
}
else {
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mostlikers</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="topBar">
<div>
<div class="clearfix logout_menubar">
<a class="toptitle" href="http://karthickinfotech.blogspot.in/" title="Mostliker">
<img src="logos.png">
</a>
</div>
</div>
</div>
<div class="logbox">
<div class="logbox2">
<h2>Mostlikers Login</h2>
<hr>
<div id="Logbox3">
<?php
if(isset($_GET['login_failed'])=='1')
{
?>
<div class="Error_box" style="color:#000; text-align:center; background:#FFEBE8; border:#F00 solid 1px;">
<span><p><h4>Invalid user login</h4></p>
<p>Check your username and password</p>
</span>
</div>
<?php
}
else
{
}
?>
<div id="logtable">
<form method="post">
<table width="449" align="center" border="0">
<?php
if(isset($_SESSION['users'])!="")
{
?>
<tr>
<td class="logtable_con" width="94" height="100">Login as :</td>
<td width="165">
<div style="width:165px; margin-top:20px;">
<div style="float:left; width:60px; height:55px;" class="image_error">
<img src="uploade/<?php echo $_SESSION['images'] ?>" width="50" height="50" /><p>
<a href="logout.php">Not <?php echo $_SESSION['users']; ?> </a></p>
</div>
<div style="float:left; width:60px; height:55px;" class="user_error">
<div style="font-size:13px; font-weight:bold;"><?php echo $_SESSION['users']; ?></div>
<div><?php echo $_SESSION['phone']; ?></div>
</p>
</div>
</div>
<input type="hidden" class="inputtext2" name="email" id="email" value="<?php echo $_SESSION['users']; ?>" size="30"></td>
</tr>
<?php
}
else
{
?>
<tr>
<td width="94" height="49">Login us</td>
<td width="165"><input type="text" class="inputtext2" name="email" id="email" value="" size="30"></td>
</tr>
<?php } ?>
<td height="38">Password</td>
<td><input type="password" class="inputtext2" name="password" id="email" size="30" value="" tabindex="1"></td>
</tr>
<tr>
<td height="22"> </td>
<td><input id="persist_box" type="checkbox" value="1" name="persistent" class="uiInputLabelInput uiInputLabelCheckbox"><label>
Keep me Logeed in</label>
</td>
</tr>
<tr>
<td height="53"> </td>
<td><input value="Log In" name="login" tabindex="4" type="submit" class="subbutton"></td>
</tr>
<tr>
<td height="21"> </td>
<td><a href="#">For get your password ?</a></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="mostlikers-top">
<a href="http://karthickinfotech.blogspot.in/">
<img name="mostlikers" style="border:none; margin-left:60px;" height="80" src="logos.png" title="mostlikers" alt="mostlikers" /></a>
<div class="logbox">
<div class="userbox">
<p><label>Email or Phone</label></p>
<p><input type="text" name="email" size="15" /></p>
<p>Keep me logged in</p>
</div>
<div class="passbox">
<p><label>Password</label></p>
<p><input type="text" name="email" size="15" /></p>
<p>Keep me logged in</p>
</div>
</div>
</div>
<div class="login">
<div class="comment_box">
<div>
<hr />
</div>
</div>
<div class="clear"></div>
<div class="comment_box">
</div>
<!--client side add information-->
<div class="addnew">
</div>
</div>
</div> <div class="mostlikers-bottom">
<h3><a href="karthickinfotech.blogspot.in/p/chat.html">Click more mostlikers Demos</a></h3></div>-->
</body>
</html>
Welcome.php
<?php
session_start();
ob_start();
$db = new mysqli('localhost', 'root', '', 'facebook');// change the database connections
?>
<html>
<head>
<title>mostlikers</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>Thanks to Login 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/<?php echo $_SESSION['images'] ?>" width="180" height="180" /></div></td>
<td width="492">
<h3> <p>Username : <?php echo $_SESSION['users'] ?><br/><br>
Role : Web Developer </br><br>
Link : <a href="http://karthickinfotech.blogspot.in/">Mostlikers.com</a></p></h3>
</td>
</tr>
<tr>
<td colspan="2"><hr/><div align="center"><h3><a href="http://karthickinfotech.blogspot.in/">Click Here More Live Demos code developer Karthick</a></h3></div></td>
</tr>
</table>
</div>
</body>
</html>
Logout
<?php
session_start();
session_destroy();
header('Location:index.php');
?>
style.css
body {
background: #fff;
color: #333;
line-height: 1.28;
margin: 0;
padding: 0;
text-align: left;
direction: ltr;
unicode-bidi: embed;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 11px;
overflow-y: scroll;
}
#topBar {
background-color:#f2f2f2;
border-bottom: 1px solid #CCC;
min-width: 981px;
position: relative;
z-index: 300;
}
.clearfix {
zoom: 1;
}
.loggedout_menubar {
margin: 0 auto;
width: 980px;
padding-top:13px;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
.toptitle {
float: left;
}
.clearfix {
zoom: 1;
}
a {
color: #3b5998;
cursor: pointer;
text-decoration: none;
}
form {
margin: 0;
padding: 0;
}
user agent stylesheetform {
display: block;
margin-top: 0em;
}
body, button, input, label, select, td, textarea {
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 11px;
}
input[type="hidden"], input[type="file"] {
-webkit-appearance: initial;
padding: initial;
background-color: initial;
border: initial;
}
input[type="password"] {
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
input, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
table[Attributes Style] {
border-spacing: 0px;
}
table {
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
._ohf {
float: right;
}
.maintext {
padding-bottom: 4px;
color:#333;
}
.menu_login_container table tr td {
padding: 0 0 0 14px;
}
td, td.label {
text-align: left;
}
th {
display: table-cell;
vertical-align: inherit;
}
.subbutton {
background-color: #5b74a8;
border-color: #29447e #29447e #1a356e;
color:#CCC;
}
.inputtext, .menu_login_container .inputpassword {
border-color: #1d2a5b;
margin: 0;
width: 142px;
}
.inputtext2, {
border-color: #6699FF;
margin: 0;
width: 400px;
}
.inputtext, .inputpassword {
padding-bottom: 4px;
}
textarea, .inputtext, .inputpassword {
border: 1px solid #bdc7d8;
margin: 0;
padding: 3px;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
input, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
input[type="submit"], input[type="reset"] {
-webkit-appearance: push-button;
-webkit-user-select: none;
white-space: pre;
}
.logbox
{
width:625px;
height:auto;
border: solid #CCC 1px;
border-radius:5px;
margin:0 auto;
margin-top:80px;
}
.logbox2
{
width:575px;
margin:0 auto;
}
.Logbox3
{
clear: left;ss
margin: auto;
padding: 20px 0 0 10px;
text-align: left;
width: 380px;
}
.logtable_con
{
font-weight:bold;
color: #666;
text-outline:#9C9;
}
.logtable
{
margin:auto;
}
.mostlikers-bottom
{
height:40px;
font-size:18px;
background:#f2f2f2;
text-align:center;
}
No comments:
Post a Comment