Creating the header

DATABASE

Open your phpMyAdmin (or other service if you're using a different one) and add a new column to the profiles table with the following information:

or do it through PHP:

$sql = "ALTER TABLE `Profiles` ADD `Pic` VARCHAR(16) NULL DEFAULT NULL";

Now your Profiles table should look like this:

IMAGES

Before anything, lets grab a few images.
Download and save female_small.gif AND male_small.gif and save it to:
images/profiles/female_small.gif
images/profiles/male_small.gif

Note: You must create the profiles folder inside the images folder.

Also download and save loading_med.gif into your images folder.
images/loading_med.gif


We will need one of Facebook's sprite image's as well. Get the sprite_a.png. Save it to your images folder.
images/sprite_a.png

CSS

This time, we'll add the CSS first. Open styles/global.css and add this to the bottom:

Copy CSS from Codepad.org

Save and close global.css

HEADER FILE

Now open a new blank file and save it as header.inc.php inside your inc folder.
inc/header.inc.php

Note: We have to be careful with head.inc.php and header.inc.php - they are spelled very similar but are VERY different.

Inside header.inc.php add the following code:

Copy PHP & HTML from Codepad.org

Now that all that code is in header.inc.php, save and close it.

JQUERY

Open libs/java.lib.js and add the following code to the bottom of your scripts, but inside the $(document).read(function() { .... });

Copy jQuery Code from Codepad.org

So now your full jQuery library should look like this.

HOME.PHP

Everything we've done so far is great and all, but it won't actually show up. So now we need to open home.php. If home.php is not already made, open a new blank file and save it as home.php inside your default directory.
localhost/home.php

With home.php open, add this code to your page:

or Copy Code from Codepad.org

MASTER LOGGED IN FILE

Instead of wasting our time ripping apart and cleaning other files in the future, just to get the base header in a page - we're going to create a master logged in file.
This file will display the header with your notifications, requests, search, account options, etc with absolutely no body what so ever. We keep it this way because many Facebook pages are different from eachother, and require different styling.

To create this file, open home.php and SAVE IT AS a new file called master_logged_in.php. You do not need to upload this file. DO NOT delete home.php because we will be modifying it heavily in the future.

From here on out, it will be best if you have an editor that can display every line of code, like this:

Save, and upload the following files:
styles/global.css
inc/header.inc.php
libs/java.lib.js
home.php
images/sprite_a.png
images/profiles/female_small.gif
images/profiles/male_small.gif
images/loading_med.gif

SUMMARY

If you attempt to get to home.php, you will find that it will bring you to login.php. If you haven't created an account on your own Facebook, do so now. Once you have it, log in with it! It should bring you to a blank page that only has the header.

NOTES

When you click the Requests Jewel, Messages Jewel or the Notifications Jewel - it will show the loading animation with no end. DO NOT WORRY. We have not added the ajax to our jQuery just yet, so it will not show anything.
When you click your Profile Link at the top right, it will bring you to profile.php?id=#### - this page does not exist yet. We will get there eventually.
When you click the Account Drop down menu at the top right, it will show 3 options: Acc. Privacy, Acc. Settings, and Log Out. Only Log Out Works!! User Settings can get advanced and confusing, and we will tacke these issues continuously throughout the rest of the class.
When you try to search, nothing will happen! When you click the Submit button, it will bring you to search.php?q=#######. This page does not work either, we are not at this step just yet!
With all of this not working yet, do not worry even a little bit. Step by step we will create the #2 most popular website on Earth!