Code With Design

A few months ago I posted an old project on the old blog. The project was entitled “Browser Friendly Feed Reader.” This project consisted of three simple pages. The first was the submitting form where users could enter their rss or xml feed. The contents of this feed could be output in the web browser to displaying it inside of the site framework that was created.

Process.php
Forum.php
View.php

The site was very simple but it was more built for the idea behind viewing a feed in the browser. Since then I wanted to create a more advanced version of the site that relied on a database and the ability to subscribe to the feeds. This is when I decided to restart to the old project and completely rework how everything is set from the ground up.

Working With The Framework

When starting to create a new project or just recreating one the first thing that you will need is a frame work. The frame work is a quick drawing of how you would like to have everything setup. Some people like to create theirs with programs such as In Design or Illustrator but I prefer to use a graphing set, a notepad and whatever pen is closest to me. I should be using pencil but I normally have a plan in my head prior to starting something.

Once you have the general idea of how things are going to work it is a good idea to draw out how you would like to store the key components of a site. I use a notepad throughout the whole process and it usually starts with me laying out something that looks like this.

Contents of index

Header (include not secure page)
Main image
Nav bar (include)

Sidebar (include)
Sidebar components (include single and double width items)
Navigation (include)

Main content (not included)
Post data

Footer (include)
Blocks of meta and links (include)
Bottom strip (include)

Order of Operations When Designing the Index

Once this has been worked up I then head into Adobe Dreamweaver to begin the process of changing my framework into an actual css ready site with all of the divs. This process takes a fair amount of time and the content usually created in this order. First note that Dreamweaver automatically creates the untitled.php page and the css page. At this point I only have the two items on my testing server. Back to showing you the order of operations.

1. Change the CSS page to create the proper widths for main content, sidebar, and post.
2. Change padding properties, select fonts, change margin properties.
3. Create the divs within the untitled document ie the divs in the header that hold link menus.
4. Add the div id and classes to the CSS file. (remember to work down the content as it appears within your page. Start with the header then go to sidebar, etc.)
5. Create and fill the pages with fake content and see if this is how you would like the pages to be displayed.
6. Go through and tweak anything that makes you unhappy.

Pulling Apart the Index.php Page

Now that you have created your base index page and you are somewhat happy with the content you can go ahead and begin to pull the page apart. This is where the layout of includes will come in handy. This process consists of cutting and pasting section of code into new php files. The naming of these files is up to you but I normally go with “pt_” as a prefix for “Part” which is a part of a page and “pg_” which stands for “Page” meaning that it is a whole page. An example of this is “pg_authors.php” or pg_feeds_addfeed.php” The next section of naming a page comes from the actual section that is within the page. On the friendly browser feed viewer project I started there are sections of pages that relate to feeds. If I wanted to create a page where users could subscribe to a feed I would name it “pg_feed_subscribe” this tells me what the php file is, its subject and what the page is for. Another type of file I often contain is the prefix “process_” This is a page that requires a form to post to or backend piece of date. The page naming is completely up to you I just wanted to share how I go about naming my webpages.

Now we will go through pulling the pages apart. Now that we have gone through a little lesson on proper page names it is now time to actually pull something apart. For this I will not be using the rss.skorg.org site but a new site with no content instead.

Here is the full index.php page that we will be working with.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixRtHdr #sidebar1 { width: 220px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixRtHdr #sidebar1 { padding-top: 30px; }
.twoColFixRtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Now we are going to pull this page apart and change some things so the include will work properly. The first thing we are going to want to do is change how the header information is setup. We want the content that can be thrown into one file to stay at the very top. The rest that we need for the page is going to be below that.

1
2
3
4
5
6
7

<title>Test</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<!– end #header –></div>

Take note of where this section of code is and what has changed. The title tags have been moved below the IE exceptions. This is so it is not included in the new “pt_head_req_top.php” file. Now we are going to cut the bottom part of the header code will have a separate required field for the transition tags. This is important so if you wanted to add class to the divs you could do it to everything based on one file change.

1
2
3

<?php include('pt_head_req_top.php'); ?>
<title>Test</title>
<?php include('pt_head_main.php'); ?>

Inside the two sections is where you want the head data that will change for each page. The following code is what pt_head_main.php consists of.

1
2
3
4
5
6

</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>

Because we are now pulling sections of the page together with php the load times will be a little bit quicker and we have decreased the code of the index by an incredible amount. The index.php code now looks like this when we are done with it.

1
2
3
4
5
6
7
8
9
10
11

<?php include('pt_head_req_top.php'); ?>
<title>Test</title>
<?php
include('pt_head_main.php');
include('pt_sidebar_main.php');
?>
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<?php include('pt_footer_main.php');?>

Now you should be able to create a site that is fully based off of your index. If you need to change things around like the css link based on different pages there is always PHP code for things like that.

Continue on to read part 2

By: Caleb Jonasson