Create your own facebook

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

5. The Master File

When we create websites with many pages, we always want ti be able to update every page as quickly and efficiently as possible. This is one good reason why we use PHP.
PHP has 2 functions; require() and include().

include($filename)
This will bring an external file into the webpage. If the file is not found, and error is displayed but the page tries to continue anyways.
php.net

require($filename)
Same thing as include, but the page will stop loading after it displays this error. Good for debugging, bad for functionality.
php.net

Those are very important functions in creating a very dynamic website.

Open up index.php, and re-save it as master.php. Now master.php should be open. We won't actually be accessing this page, as this is simple the master page we'll start every page from. This way we don't have to add all the extras every time we want a new page.

Create a new blank file, save it as "load.inc.php" inside your "inc" folder. Add the following code to load.inc.php

<?
    if(!isset($_SESSION))
    {
         session_start();
    }
?>

Close load.inc.php for now, and open master.php.

With master.php open, delete everything inside the <head></head> tags. Add the following two lines to the inside of the <head></head> tags.

<title>PAGE TITLE</title>
<? require_once("inc/head.inc.php"); ?>

Also add

<? require_once("inc/load.inc.php"); ?>

At to the VERY top of master.php, before the <!DOCTYPE> is declared. This will make sure every page we use allows sessions, which is what every user needs to acccess his or her own account. We can also add extra php functions to load.inc.php, but we have to remember that everything that goes in this file will be used on every page - logged in or not!

The reason we use require_once() here, is because this file only ever needs to be required once - incase another file tries to call it. And because it's so important we need to know if it's working correctly or not. If it isn't, the page won't display and you know what you have to fix ASAP.

If you were to save this, upload it, and try to view it - it wouldn't work. The file in the "inc" folder called "head.inc.php" does not exist. Lets make it exist.
Open a new blank file (no text in it at all, 100% blank!), and save it as head.inc.php inside your "inc" folder. It's ok that there is nothing in it, as long as the file exists - this way our require_once() will not error.
But while head.inc.php is open, let's add to it anyways.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<noscript> <meta http-equiv="refresh" content="0; URL=/index.php?fb_noscript=1" /> </noscript>
<meta name="robots" content="noodp,noydir" />
<meta name="description" content="Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet." />
<link rel="shortcut icon" href="images/Icon.ico">
<meta name="copyright" content="<?=date("Y");?> Facebook.com" />
<meta name="keywords" content="Facebook, social networking, friends, connect, pictures, videos, links, status update" />
<link href="styles/global.css" type="text/css" rel="stylesheet" />
<script src="libs/jquery-1.6.4.min.js" type="text/javascript"></script>
<? require_once("libs/fb_functions.php"); ?>

If you read through that briefly, you'll see we added jQuery 1.6.4 in there. You can get that from this link. If your browsers opens up like a regular page with a bunch of code, save the page as "jquery-1.6.4.min.js" inside your "libs" folder. This is for the JavaScript we'll be using in the future.
We also require_once() a file called "fb_functions.php". Open up a new blank file and save it as "fb_functions.php" inside your "libs" folder. Again, it just has to exist. We'll come back to this one quite often, as we add more and more to it. fb_functions.php is the file we will be putting all of our PHP functions in.
And we added the Facebook F© Logo. Icon files (.ico) can be tricky when manipulating them in Photoshop, so I made it easier for you guys. Open it, save it as "Icon.ico" inside your "images" folder.

Now we're done with the header area. If you're wondering why we did all that, it's so we can change things on every page super fast. If we wanted to update our jQuery, or change a description or spelling mistake in the description, we can easily change it on all pages by doing it on one page. Nothing sucks more than having to open every single file (could be over 50, depending on your site) and changing one line at a time.

Next, we'll add a required file after the <body> tag.
So you're entire <body></body> area should look like this:

<body>
    <? require_once("inc/afterbody.inc.php"); ?>
</body>

Just for good practise, create a new blank php file called "afterbody.inc.php" and place it inside your "inc" folder. So require_once() doesn't give us a hard time.
The reason we're adding this one, is because we might add our own JS Lightbox, or if we have a changing PHP variable that could change the way the page is displayed, or we want some extra in-page JS. It's a good safety net.

Every page has a footer. Something that says the copyright, links to other places or pages, and sometimes language options. So lets make a footer.
Open a new blank file, save it as "footer.inc.php" inside your "inc" folder.
Just to keep things simple for now, and to make sure it works, we're going to only add the copyright text and leave out the other links that FB displays.. for now!
Go a head and require the footer. You're full body should look like this:

<body>
    <? require_once("inc/afterbody.inc.php"); ?>


    <? require_once("inc/footer.inc.php"); ?>
</body>

I like to leave a space between the afterbody.inc and the footer.inc, this way I'll always know where to put the contents of my page.
Your footer.inc.php will need to actually hold some content. If it's not open, open footer.inc.php and add the following to it:

<div id='footer'>
    Facebook &copy; <?=date("Y");?>
</div>

Soon we'll be getting into the styling side of things. In my opinion, this is what takes the longest. Facebook looks good in all 5 major browsers - IE, Opera, Chrome, Fire Fox, and Safari. So we have to try our best to make our CSS 100% compatable with each browser.
Before we do any "fun" styling, we need to Zero out everything, so every browser will see this page the same way.
Open "styles/global.css", and copy this into it, don't worry about writing this all out - copy & paste will do.

@charset "utf-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 11px;
    font: inherit;
    vertical-align: baseline;
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif;
}
input, select { vertical-align: middle; }

Just to quickly go over what we have...
@charset "utf-8"; is our character set. Always good for CSS validation.
html, body, div........audio, video { } we just set the margin & padding to 0, no borders, 100% font size, and a verticle-align.
And the "input, select { }" is just to make our text show in the middle of the area it's in, rather than the bottom or top.

In our footer above, we have "<div id='footer'>". We need to add the #footer style now. Just add this after the "inpute, select { }" line.

#footer { color:#808080; border-top:1px solid #ccc; margin:18px auto 41px auto; padding:10px; width:72%; font-size:11px; }

Our directories and file layout should look like this:
ajax
images
    -Icon.ico
inc
    -load.inc.php (session_start() only)
    -afterbody.inc.php (empty)
    -footer.inc.php
    -head.inc.php
libs
    -fb_functions.php (empty)
    -jquery-1.6.4.min.js
styles
    -global.css
index.php
master.php

And our master.php page should look like this:

<? require_once("inc/load.inc.php"); ?>
<!DOCTYPE HTML>
<html>
<head>
<title>PAGE TITLE</title>
<? require_once("inc/head.inc.php"); ?>
</head>

<body>
<? require_once("inc/afterbody.inc.php"); ?>

 

<? require_once("inc/footer.inc.php"); ?>
</body>
</html>

Obviously we're going to change the <title> of the page when we use this file.
For now, keep this as master.php, and do not change it at all unless we have to! This is our new default template. In future classes, we will be opening up almost every file again and adding or removing components.

That sums up the Master File class! If you managed to get through this without any problems, good job to you! If you had a few problems... good! No better way to learn!
Any questions you have can be posted here as well. Either myself or someone else will help you.

 

Task Discussion