For part 2 of the articles on the site programming we decided to talk about the Home page.  The reason is that it is the template for all other pages on the site.  The major reason for this was to give a consistent look and feel plus navigation.  One of the biggest mistakes of web site programming is to layer the pages very deep.  This will lose the interest of the user very fast.  In fact if a user can not find what they are looking for in less than 3 clicks they are gone.  If you have not read the First Article it deals with the site in general and the use of databases.

That said it is time to dive into the code for the home page.  Logically the page is divided into 3 sections.  The Top and Side sections are reserved for site navigation, feedback and the email registry.  The menu system located in the top section is by far the most critical part of the entire website.  We are using Sothink's DHTML menu generator and code to create the menus.  We decided to use their generator as it seems to do the correct thing for all browsers that we have tested.  It does this by doing a simple browser check of the user and downloading the appropriate JScript to the user.

Let's now look at the actual template for all the pages:

This is the template used on all the asp pages.  The template does not work with straight html files as they can not do the server side includes without modifying the permissions of the web site.  Back to the details.  All pages start with a standard header block which the first line always defines that this is an html file by using the doctype tag.  This is required and without this tag this file could be anything.  Then comes the standard HTML tag and the Head tag.  In the Header block the first line must always be the Title block.  If that Title block is somewhere else often index engines will never see it (Hint, Hint).  The next 8 lines are Meta information about the page including ICRA rating.  If you are publishing content targeted at youth sports athletes get your site rated.  Newer browsers have the ability to screen content based on the ICRA tag.  If you read through the rest of the meta tags they are fairly self evident.  The last three lines of the head section add the functionality and look to the site.  The first one is the link to the CSS Style Sheet for the site.  The next to last line of the head section is the code that sets up the main navigation menus as far as the code part of it is concerned.  The last line of the head section is a small JScript which controls the DHTML for the collapsible side menu (only works in IE).

The next section is the Body section of the page.  After the Body tag you will notice that there is immediately two includes which has the top sections two menus and formatting and the second has the side menu and layout.  The last thing on that line is a comment stating that now we are ready to add stuff to the third section of the page which really contains the content we want displayed.  The content section continues down the page until you see the comment -End Content-.  After that is the last of the includes which closes out all the formatting.  In this manner it is real easy to create pages that look identical in use from page to page to give the consistency that users like.  It also keeps the complexity down.  One thing you will notice is that navigation is tightly controlled on the top and left side of the page to avoid clutter or so the look is not busy.  Busy looking sites are darn near unusable and confusing and guess what, Not Viewed unless forced to.

The content section of the page starts off with a simple table that has the tab on the left to identify the section of the site and on the right a breif content statement.  This doubly validates as to what the page is about just in case the user discovers themselves there.

Below this table on other pages on the CSI site is a title block for the page and the content we want displayed or computed.  The home page is a little different as it has two main content sections.  The News items is the first and then general content that we want displayed all the time.  The only interesting part of this is the news section.  The news section is read from the database using the general database we set up and talked about in the first article.  Specifically it uses the News table in that database.  It contains only three columns:

When we add a new news item it contains four things, a unique ID for linking, the date the article was added, a Headline and the body of the news items text.  This little table is easily linked to an access database for distribution to those allowed to add news items.  In this way new news items can be added to the site without the author having to know how to mess with the database or get confused by looking at the code on the page and making a big mistake.  What we do to display the news headlines on the home page is simple as well.  A short SQL query is run against the database via a stored procedure.  The Query looks like :

SELECT TOP 6 NewsID, NewsDate, NewsHeadline FROM News ORDER BY NewsDate DESC

Which returns the 6 most recently added items Headlines, the date added and it's ID.  We then have a small code block on the page to display the data.  The entire block looks like this:

<% DIM connOLEDB, rsNews
Set connOLEDB = Server.CreateObject("ADODB.Connection")
connOLEDB.ConnectionString = "PROVIDER=
SQLOLEDB"&_";SERVER=smaug;UID=xxxxxxx;PWD=xxxxxxxxxxxxx;DATABASE=SwimData"

connOLEDB.open
Set rsNews = Server.CreateObject("ADODB.Recordset")
Set rsNews = connOLEDB.Execute("exec LatestNews ")


rsNews.moveFirst
Response.Write "<span class= 'story'><ahref='newsdetail.asp?ID=" & rsNews("NewsID") & "'>" & rsNews("NewsHeadline") & "</a></span> <nobr><span class='pubdate'>( " & rsNews("NewsDate") & ")</span></nobr></td></tr>"
rsNews.MoveNext
Response.Write "<tr><td></td><td ALIGN='middle' valign='top'><img SRC='images/x1red.gif' CLASS='storyBullet' alt='*' HEIGHT='4' WIDTH='4' VSPACE='4'></td><td valign='top'>"
Response.Write "<span class= 'story'><ahref='newsdetail.asp?ID=" & rsNews("NewsID") & "'>" & rsNews("NewsHeadline") & "</a></span> <nobr><span class='pubdate'>( " & rsNews("NewsDate") & ")</span></nobr></td></tr>"
rsNews.MoveNext
Response.Write "<tr><td></td><td ALIGN='middle' valign='top'><img SRC='images/x1red.gif' CLASS='storyBullet' alt='*' HEIGHT='4' WIDTH='4' VSPACE='4'></td><td valign='top'>"
Response.Write "<span class= 'story'><ahref='newsdetail.asp?ID=" & rsNews("NewsID") & "'>" & rsNews("NewsHeadline") & "</a></span> <nobr><span class='pubdate'>( " & rsNews("NewsDate") & ")</span></nobr></td></tr>"
rsNews.MoveNext
Response.Write "<tr><td></td><td ALIGN='middle' valign='top'><img SRC='images/x1red.gif' CLASS='storyBullet' alt='*' HEIGHT='4' WIDTH='4' VSPACE='4'></td><td valign='top'>"
Response.Write "<span class= 'story'><ahref='newsdetail.asp?ID=" & rsNews("NewsID") & "'>" & rsNews("NewsHeadline") & "</a></span> <nobr><span class='pubdate'>( " & rsNews("NewsDate") & ")</span></nobr></td></tr>"
rsNews.MoveNext
Response.Write "<tr><td></td><td ALIGN='middle' valign='top'><img SRC='images/x1red.gif' CLASS='storyBullet' alt='*' HEIGHT='4' WIDTH='4' VSPACE='4'></td><td valign='top'>"
Response.Write "<span class= 'story'><ahref='newsdetail.asp?ID=" & rsNews("NewsID") & "'>" & rsNews("NewsHeadline") & "</a></span> <nobr><span class='pubdate'>( " & rsNews("NewsDate") & ")</span></nobr></td></tr>"
rsNews.MoveNext
Response.Write "<tr><td></td><td ALIGN='middle' valign='top'><img SRC='images/x1red.gif' CLASS='storyBullet' alt='*' HEIGHT='4' WIDTH='4' VSPACE='4'></td><td valign='top'>"
Response.Write "<span class= 'story'><ahref='newsdetail.asp?ID=" & rsNews("NewsID") & "'>" & rsNews("NewsHeadline") & "</a></span> <nobr><span class='pubdate'>( " & rsNews("NewsDate") & ")</span></nobr></td></tr>"
rsNews.close()
set rsNews = nothing
connOLEDB.Close()
set connOLEDB = nothing
%>

This code block opens the database runs the stored procedure and then we build the news headline table line by line to display and then close the database.

Well that is it for this article, be looking for the next one soon.