Note: this is part of a series. The first part is here: Building a Big Project, Part 1
As you move from planning to coding, you will need to take some time for testing. As an example, consider the following bit of code:
index.html
This bit of monstrosity was a quick mock-up done in Kompozer (I use the version from PortableApps.com - Portable software for USB drives), then cleaned up in Jedit . It was done with Sybil next to me for two purposes: first, to make sure the colors look good. Second, to make sure all the menu elements were done. It's a mock-up of the main screen when you arrive at the site, and serves to help focus attention on some of the early details.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Myfiction</title>
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="width: 100%; color:#FFFFFF; background-color: #FF9640;">
<div style="position: relative; width: 80%; z-index: 1;">
Welcome to MyFiction.net!
</div>
<div style="position: relative; left: 80%; z-index: 1;">
[login . sign up][welcome userX]
</div>
</div>
<div style="position: relative; background-color: #A64B00; color:#FF7400;">
Home | New Fiction | Forums | Writers' Resources | Search
<br />
Profile
Miriam Webster's
<br />
Beta
Wikipedia
<br />
OpenOffice.org
<br />
MLA
<br />
APA
<br />
Google
</div>
<div style="position: relative;">
Welcome to MyFiction.net!
Please use the menu to
navigate this site.
<br />
<br />
[who we are and what were about goes here]
<br />
<br />
[announcements here]
<br />
<br />
Feedback/Ideas/Suggestions
<br />
</div>
<br />
<div style="position: relative;background-color: #009999; color:#006363;">
Sourpuss authors
</div>
<br />
<div style="position: relative;background-color: #A64B00; color:#FF7400;">
CodeCall Shoutout!
</div>
</body>
</html>
The one advantage of something like this is that you can get a very quick sense for what you've accomplished without having anything in place. To do real development, we're going to need Apache, MySQL, and PHP. WAMP or XAMPP are both available for this if you're on Windows. XAMPP even has a portable version (at PortableApps.com - Portable software for USB drives)!
In addition to the server software needed for testing, you will also need browser tools. For example, it is a sad reality that about 40% of the corporate market uses... IE6! If you want people to surf your website from work, you have to test your site. We'll do that with IETester. It will let us go all the way back to IE5.5 for testing! The tool is a little flaky, but it works well overall.
I prefer FireFox for web-development testing because of its plugins. You better have Adblock Plus installed. Some of your users well, so know what they're seeing. Firebug is almost a necessity, as is Web Developer. FireFTP will allow you to handle uploads to your real server once you get to that point. You will also want to use HTML Validator. I know, we're all perfect with our HTML, but it's worth having a second set of eyes.
So far, I haven't done a blasted thing with PHP. I'll fix that, starting now. If you actually open index.html in a browser, you'll see that there are four major sections: the header, the menu, the body, and the footer. When you work on a project that will be as large as this one, the worst thing you can do is try to cram all the logic into one file. It will never work. With that in mind, let's look at index.php:
That's it. My website is now complete. Thanks for reading! And what's better, it's much smaller than the previous file! OK, being more serious. I made the decision to use XHTML for this site, thus the DOCTYPE. I have a stylesheet that will be used through the site. I make sure I have a session before doing processing, and then all the logic of the site will be handled in the four included files.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Myfiction.net</title>
<link rel="stylesheet" type="text/css" href="Myfiction.css" />
</head>
<body>
<?php session_start(); ?>
<?php include("header.php");?>
<?php include("menu.php");?>
<?php include("body.php");?>
<?php include("footer.php");?>
</body>
</html>
Let's look at the header first. header.php:
I'm using three div's for the header row, with classes to handle the color and positioning. The relevant section from MyFiction.css is:Code:<div class="header">
<div class="upper left">
Welcome to MyFiction.net!
</div>
<div class="upper right">
<?php
if ($_SESSION["user"]<>"") echo "Welcome Back ".$_SESSION["user"];
elseif ($_REQUEST["page"]=="login") echo "Please Enter user name and password";
elseif ($_REQUEST["page"]=="join") echo "Thank you for joining";
else echo "<a class=\"white\" href=\"index.php?page=login\">login</a> or <a class=\"white\" href=\"index.php?page=join\">sign up</a>";
?>
</div>
</div>
The result is white text on an orange background, with everything on a single row of text. The critical piece, however, is the snippet of PHP that controls the text in the upper-right-hand corner. If you've ever logged in to Unleash Your Imagination - FanFiction.Net, you'll know that you can log in, browse to a story, and you'll see a prompt to log in again! That's a tiny detail that just annoys me. It's little details that make a site look sloppy.Code:div.header { position:relative; width:100%; min-width:546px; color:#FFFFFF; background-color: #FF9640; height:20px; } div.left { left:0; } div.right { right:0; } div.upper { position:absolute; top:0; }
As a result, we're going to be careful to address that. If the user has logged in, we want a friendly greeting (just like here at CodeCall). Otherwise, if the user is logging on, we want a friendly prompt. Otherwise, if the user is in the process of joining, we want to say thanks. If none of those is the case, we want to give the option to log in or join.
Notice, I'm using parameters on the address bar for navigation. That is very much on purpose. Since the goal of the site is to host stories, it will be important that spiders be able to effectively index the site. To accomplish that, we will be using clear links throughout the site that can take a user directly to any page.
menu.php is about as simple:
This is just a simple CSS menu (that does NOT work in IE6). To get the formatting, we use the rest of the CSS from MyFiction.CSS:Code:<div class="menu">
<ul>
<li><a href="index.php?page=home">Home</a>
<ul>
<li><a href="index.php?page=profile">Profile</a></li>
<li><a href="index.php?page=beta">Beta</a></li>
</ul>
</li>
<li><a href="index.php?page=newfiction">New Fiction</a></li>
<li><a href="index.php?page=forums">Forums</a></li>
<li><a href="index.php?page=resources">Writer's Resources</a>
<ul>
<li><a href="http://www.merriam-webster.com/">Miriam Webster's</a></li>
<li><a href="http://www.wikipedia.org">Wikipedia</a></li>
<li><a href="http://www.openoffice.org">OpenOffice.org</a></li>
<li><a href="http://www.mla.org">MLA</a></li>
<li><a href="http://www.apa.org">APA</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</li>
<li><a href="index.php?page=search">Search</a></li>
</div>
<!--[if lt IE 7]> <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'> <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div> <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'> <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div> <div style='width: 275px; float: left; font-family: Arial, sans-serif;'> <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div> <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div> </div> <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div> <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div> <div style='width: 73px; float: left;'><a href='http://www.apple.com/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div> <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div> </div> </div> <![endif]-->
a.white gets used in the footer, the rest is for our menu. Odds are I can clean some of this CSS up, but I haven't bothered for now. Again, notice the very deliberate construction of the links on the menu. The last line is from IE6 No More - Home. I've dealt with coding around IE6 once. I'm not doing it again.Code:a.white { color:#FFFFFF; } div.menu { position:relative; width:100%; min-width:546px; color:#FFFFFF; background-color: #FF7400; height:20px; z-index:100; } .menu ul { background-color: #FF7400; list-style-type:none; margin:0; padding:0; } .menu ul ul { width:109px; background-color: #FF7400; } .menu li { float:left; position:relative; width:109px; background-color: #FF7400; } .menu a, .menu a:visited { background:none repeat scroll 0 0; border-color:#000000; border-style:solid; border-width:1px 1px 1px 1px; color:#FFFFFF; display:block; font-size:12px; height:18px; line-height:20px; padding-left:10px; text-decoration:none; width:99px; } .menu ul ul { height:0; left:0; position:absolute; top:20px; visibility:hidden; width:109px; } .menu ul ul a, .menu ul ul a:visited { background:none repeat scroll 0 0; border-width:0 1px 1px; color:#FFFFFF; height:auto; line-height:1em; padding:5px 10px; width:88px; } * html .menu ul ul a, * html .menu ul ul a:visited { width:99px; } .menu a:hover, .menu ul ul a:hover { background:none repeat scroll 0 0; color:#FFFFFF; } .menu :hover > a, .menu ul ul :hover > a { background:none repeat scroll 0 0; color:#FFFFFF; } .menu ul li:hover ul, .menu ul a:hover ul { visibility:visible; } .menu ul :hover ul ul { visibility:hidden; } .menu ul :hover ul :hover ul { visibility:visible; }
The body of our page is where all the goody is located. body.php:
This page is just another include engine, much like index.php. Again, with a wide variety of different pages out there, I want to keep this organized, and the code separated. Notice that we default to include home.php:Code:<?php
if ($_REQUEST["page"]=="home") include("home.php");
elseif ($_REQUEST["page"]=="profile") include("profile.php");
elseif ($_REQUEST["page"]=="beta") include("beta.php");
elseif ($_REQUEST["page"]=="newfiction") include("newfiction.php");
elseif ($_REQUEST["page"]=="forums") include("forums.php");
elseif ($_REQUEST["page"]=="resources") include("resources.php");
elseif ($_REQUEST["page"]=="search") include("search.php");
elseif ($_REQUEST["page"]=="login") include("login.php");
elseif ($_REQUEST["page"]=="join") include("join.php");
elseif ($_REQUEST["page"]=="confirm") include("confirm.php");
elseif ($_REQUEST["page"]=="feedback") include("feedback.php");
elseif ($_REQUEST["page"]=="tos") include("tos.php");
else include("home.php");
?>
This is my typical place-holder page. I've used pages like this to help me verify that navigation is working correctly. As we move to individual pages, they will be filled in with actual content. In addition, MyFiction.css will get updated as needed.Code:<h3>Home</h3>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
<p>alkjf;laksjdf;lkajsd;flkjasdlfkjas;ldkf;jasldkfja;sldkfj;</p>
The final piece of the puzzle is footer.php:
Simple, elegant, using the same style as the header. I wanted to keep the text of the anchor white. You guys all rock, and deserve a shout-out!Code:<div class="header">
Thanks, <a class="white" href="http://www.codecall.net">CodeCall.net</a>!
</div>
Part 3 will be going into the details of creating the MySQL database. We can't do much more until that exists.
Wow, looks like you made a lot of progress! I can't believe that Kompozer produced such awful looking HTML. That looks hideous. You mentioned FF for the development tools, which are great, but you may also want to try a webkit browser (Safari or Chrome). It has a JavaScript console similar to Firebug but also resource tracking which allow you to see how long each component of your site take to load. Great for reducing load time, however, I'm sure FireFox already has an addon similar to it.
Anyway, great read!
You're right, I've got an addon for tracking how long to the first byte and to the last byte for download times. I have it at work, though.
Kompozer is great for quick prototyping, but does about the same as any WYSIWYG designer: you get crappy code for your effort. I frequently use FireBug or Web Developer to edit code within FF so I can immediately see the effect of changes.
I think it's important for people to spend the time it takes to get the ugly prototypes up, though. Having a vision to work towards makes a big differences as you start getting into ugly details.
That addon is actually called FireBug. FireBug is my single FireFox development tool - it has even taken the place of Web Developer.Originally Posted by Jordan
Yup, I see it: Firebug and Network Monitoring
Doesn't really matter though. FireFox is a horrid browser next to Chrome.
Have you tried AdSweep for Chrome?
nice.
moving on to part3
yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"
www.amrosama.com | the unholy methods of javascriptCode:eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks
Reply With Quote
Bookmarks