9. Log In & Password Recovery
login.php
In this step we're going to create the login page, and the password recovery page.
First we're going to create login.php. So open login.php. If you haven't made it yet, open index.php and SAVE AS login.php. Now you have two pages that are the exact same.
Now let's start to disect this page and create a base for it.
Change the <title></title> to:
<title>Log In | Facebook</title>
Next, remove the login form and div.
Select <div id='indexRight'> and everything inside it. It should look like this:
All the highlighted code should be deleted
Now do the same thing with <div class='mt40'> ...... </div>. Delete the whole thing!
So now you're entire login.php should look like this:
Open styles/global.css and find "#indexContents".
Copy and paste it right below itself.
Rename it to #indexContentsW and remove the background styling from it.
(We call it indexContentsW because it's the same as indexContents but it's white instead of having the gradient.)
In short, it should look like this:
#indexContents { background-color:#f9fafc; background-image:url(../images/index/gradient_bg.png); background-repeat:repeat-x; height:480px; width:100%; }
#indexContentsW { background-color:#fff; height:400px; width:100%; }
Inside login.php find <div id='indexContents'>. It's line 18 in the above image and change it to <div id='indexContentsW'>. This will eliminate the gradient background and keep it white, keep it wide, and change the min-height to 400px rather than 480px.
Let's create the facebook© subheader now.
Add this HTML directly above the <div id='indexContentsW'>
Go back to styles/global.css and add these new classes & id's tot he bottom of your CSS.
#underBlueTop { height:54px; line-height:54px; font-size:12px; color:#203360; border-bottom:1px solid #d8dfea; background-color:#edeff4; text-align:left; vertical-align:middle; font-weight:bold; margin:0 0 26px 0; }
.signupSmall { width:auto; padding:4px 7px; text-align:center; color:#FFF; font-weight:bold; cursor:pointer; background-color:#6faa55; outline:1px solid #3b6e22; border:0; border-top:1px solid #98c286; vertical-align:middle; font-size:12px; line-height:23px; vertical-align:middle; margin:5px 0 9px 0; font-family:"lucida grande", tahoma, verdana, arial, sans-serif; }
.mr14 { margin-right:14px; }
.noUnderline { text-decoration:none; }
#underBlueTopContents { width:72%; min-width:900px; margin:0 auto 0 auto; padding-left:38px; }
Now lets add the HTML for the Facebook Login page.
Back to login.php, add this code INSIDE <div id='indexGuts'> </div>
You'll notice near the bottom, inside <div id='login_page_footer'> we have nothing in there. I left this open for a couple reasons.
1) We won't be adding multiple languages to this site.
2) You can do whatever you like with this area. Create your own login footer, or require()/include() another file - whatever you like.
OR
Keep it blank and you won't see it in the page (only the source).
Now we need to style this page! Otherwise this is a poor looking page.
Open global.css once again, and add this to the bottom of the style sheet:
Also, we have an if statement in our new login.php html that uses the variable $error. Before we try out our page and have it produce an error, let's add that $error variable real quick.
At the top of the page, expand our first syntax a few lines and add
$error = 0;
Looking like:
Try out your page. The incorrect password <div> should not show up.
Now for the fun part! Let's make this page actually log us in.
Open libs/fb_functions.php and add this function.
We'll use LoggedIn() to check if the user is logged in or not and to keep strangers out of the Facebook Feed page, AND to keep signed in users away from index.php and login.php. Those pages are useless to the users once they are logged in.
We need to add our library to login.php, and turn this page into the login page itself. We'll kill two birds with one stone with login.php. It will host the log in form itself AND try to log in users from other pages.
Go to login.php again, remove the first php syntax completely, and replace it with this:
What we did there was:
.. Include our DataBase (DB) connection
.. Inlcude our PHP Library
.. Check if we're logged in. If we are, we are redirectged to home.php (home.php does not exist yet!!)
.. If our page is from one of our login forms, it will run the code inside it.
.. .. Looks for our email and password.
.. .. If we typed in the right info, assuming you registered on your own Facebook already, it will create your user session.
.. .. If your info was incorrect, the error will display.
Simply enough hey?
Having a problem? Download everything including this class (minus inc/load.inc.php)
If you log in successfully, you should be redirected to home.php. To get rid of this redirection, you can do a quick log out.
Simply add
session_destroy();
exit();
Below require_once("inc/load.inc.php"); and reload login.php. This will destroy your session and stop the redirected. AKA: Logging out.
recover.php
We need a couple images first.
Save this one as: icons.png inside the images folder.
saved as images/icons.png
And save this one as: email_icon.gif also inside the images folder.
saved as images/email_icon.gif
Now we need to create a new column in our Users table with this info:
OR
Do it through PHP (after you connect to your database).
$sql = "ALTER TABLE `Users` ADD `newPassCode` INT(11) NULL DEFAULT NULL AFTER `Pass`, ADD INDEX (`newPassCode`) ";
We keep this NULL because it's not needed unless someone requests a new password. In which case, we will create a new code in this box, and email it to the user.
How we'll do this is simple and efficient. We'll set the newPassCode value as time()+60*60*24. This is right now, plus one day. This way we can also give the user 24 hours to respond to the email. If no response, we'll remove it. We'll get to this later though.
We'll make this part fast. Copy this code into a new php file and save it as recover.php.
There's quite a bit in there, and it can get a little bit confusing. If you have the time, read through it - pick it a part, and have fun with it! The source code will always be here to grab if you mess it up and can't fix it.
The main thing you need to know about recover.php is that it uses the mail() function.
mail($to, $subject, $message [,addition headers [,additional parameters]])
This function will send an email.
php.net
IMPORTANT!
Inside recover.php, new the top (starting at line 77 through 95) is the email we'll send people. You'll need to change
http://www.your_facebook.com
to
http://www.your_real_domain_or_localhost.com/
Our recover.php page will also check if a Code has been inserted in the newPassCode column. It will match your email and your entered code. If it's right, it'll bring you to the new password page. If it's wrong, it will ask you to check your input. Pretty basic stuff so far.
Next, open up styles/global.css and add these to the bottom of your CSS.
#recover_frame { border:1px solid #ccc; width:515px; height:auto; margin:26px auto 0 auto; padding:20px 21px 32px 21px; border-radius:6px; border-bottom-left-radius:0; border-bottom-right-radius:0; }
#recover_form_email { width:70%; }
#recover_page_footer { height:auto; margin:0 auto 0 auto; font-size:12px; line-height:16px; border:1px solid #ccc; border-top:0; width:535px; padding:5px 11px 5px 11px; background-color:#f2f2f2; border-bottom-left-radius:6px; border-bottom-right-radius:6px; }
#recover_form_container { margin:0 auto 0 auto; width:372px; padding:27px 0 15px 0; width:60%; border-bottom:1px solid #808080; font-size:11px; }
.fleft { float: left; }
.fright { float:right; }
.pad5 { padding:5px; }
.bold { font-weight:bold; }
.disBlock { display:block; }
.buttonConfirm { height:20px; outline:1px solid #29447e; border:0; border-top:1px solid #8a9cc2; font-weight:bold; color:#FFF; background-color:#5973a8; font-family:"lucida grande", tahoma, verdana, arial, sans-serif; font-size:11px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); padding:2px 6px; margin:2px; line-height:15px; cursor:pointer; }
.buttonCancel { font-family:"lucida grande", tahoma, verdana, arial, sans-serif; background-image: url('../images/icons.png'); background-repeat: no-repeat; background-position: 0 -49px; color:#000; background-color: #EEE; outline: 1px solid #999; border:0; border-top:1px solid #fff; border-bottom-color: #888; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1); cursor: pointer; font-size: 11px; line-height:15px; font-weight: bold; padding: 2px 6px; text-align: center; height:20px; margin:2px; }
.grey { color:#666; }
.textRight { text-align:right; }
.width150 { width:150px; }
Save global.css and close it.
Now let's open up libs/java.lib.js. We don't need to do a whole lot right now. We're just going to add two new jQuery functions.
Below the
$('#signup').click(function(){....
....
)};Add this:
$('#recover_pass_cancel').click(function(){
window.location='./';
});
$('#recover_pass_not_my_account').click(function(){
window.location='./recover.php';
});
Upload and wa-la! Done the password recovery page.
A couple notes however:
- We did not add any password validation to this page. We did not set a minimum character for new passwords. At this point you should be able to do that - we did it once already. If you have a hard time with that, post a comment below and I'll add that in there for you.
The reason we didn't go over recover.php at all, is it's all very basic HTML and CSS with some PHP in there. Nothing very advanced, just a few mysql queries, lots of variable cleaning, and some confusing variables with some very very minor JS/jQuery. Soon we'll be getting into the more advanced stuff with many many more database tables & columns. This is where everything gets much more fun! :)
If anybody has any input, questions, or comments - feel free to leave them below!