Jul 04 2005

Master pages in ASP - free template engine

Posted by admin under ASP

We are here gonna create a three page website - all pages should use a "template" for layout. This will enable us to easily keep a consistent layout for all our pages and also, it sure brings  structure to your code. I have used this technique for 5 years or so, one larger example can be free downloaded (AdMentor ASP).

Our basic idea: Create a different asp file for each page. Somehow we want the different files to just specify their special/unique content. Therefore lets start with the template file - which should contain the overall html code and structure (be a "master file" if talking ASP.NET 2.0). This will let us do GUI changes in one single spot.

I have chosen to use a free template from openwebdesign.org (just click the view the design)

template.asp



<% 
Function Template_Write()
 %>
<!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=iso-8859-1" />
<title>Invention Template</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="content">
    <div id="header">
      <div id="logo">
        <h1>logo here</h1>
        <h4>have your punchline here</h4>
      </div>
...
<%
End Function
 %>

In other words - we have pasted the whole html file inside the Function so to speak. Now, if we create all our pages (page1.asp, page2.asp, page3.asp, page4.asp) like this:



<%
OPTION EXPLICIT
Response.Buffer = True
%>

<!--#include file="template.asp"-->
<%
Template_Write 
%>

When browsing to page1.asp that page will load - which includes template.asp and calls the function Template_Write - which will output the html defined in template.asp.

Now we should define our changable spots. Cause as it is right now all pages have the exakt same content.

Lets start with the title. <title>Invention Template</title>

We open up template.asp and modifies our Template_Write like this:



<% 
Function Template_Write(sTitle)
 %>
 <!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=iso-8859-1" />
<title><%=sTitle%> %></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
...

Now we need to change our pages as well - the call to Template_Write must be modified to include the title - and here's the cool thing:
page1.asp



<%
OPTION EXPLICIT
Response.Buffer = True
%>

<!--#include file="template.asp"-->
<%
Template_Write "This is page 1"
%>

page2.asp



<%
OPTION EXPLICIT
Response.Buffer = True
%>

<!--#include file="template.asp"-->
<%
Template_Write "And this is no 2"
%>

And that's the whole idea. Now we just use it for a very simple scenario, just putting some texts to the template. But as you can understand we can define spots wherever we want in the template html - and our pages can create HTML (for example open a connection to database, read data, create a <table>  and have that put into a string ) -  and then sent into the template.

Lets look at a slightly more advanced example: Change the template like this:



<% 
Function Template_Write(sTitle, sMainContent, sRightColumn)
 %>
 <!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=iso-8859-1" />
<title><%=sTitle%> %></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
...
    <div id="contentarea">
      <div id="leftbar">
        <%=sMainContent%>
      </div>
      <div id="rightbar">
        <%=sRightColumn%>
      </div>
    </div>
...

Here we have replaced what was inside the leftbar/rightbar with our variables. Now, we need to modify page1.asp and page2.asp (this way of working might not be optimal - often you start by defining the changeable spots instead of adding them one at a time like this) but I will show you page3.asp for the sake of the example:



<%
OPTION EXPLICIT
Response.Buffer = True
%>

<!--#include file="template.asp"-->
<%

Dim sMainContent
Dim sSideContent
sMainContent = "<h2>Hello and most welcome to page 3</h2>"
sSideContent = "<h2>And what have we here</h2>Some bla bla bla bla bla bla bla bla bla bla bla bla"

Dim oConn 
Dim oRS 
Set oConn = Server.CreateObject("ADODB.Connection")
oConn.Open "enter your dbconn string"

sMainContent = sMainContent & "<table>"
Set oRS = oConn.Execute("select * from yourtable")
While Not oRS.EOF
    sMainContent = sMainContent & "<tr>"
    sMainContent = sMainContent & "<td>"
    sMainContent = sMainContent & oRS("column")
    sMainContent = sMainContent & "</td>"
    sMainContent = sMainContent & "<td>"
    sMainContent = sMainContent & oRS("column2")
    sMainContent = sMainContent & "</td>"
    sMainContent = sMainContent & "</tr>"
Wend

sMainContent = sMainContent & "</table>"

oRS.Close
Set oRS = Nothing
oConn.Close
Set oConn = Nothing 

Template_Write "Welcome to page3", sMainContent, sSideContent
%>

 So, download the example file - it is this three page site described here. You will need to change the page3.asp database stuff, but that's most as an example on how to build the html from your actual pages.

Also, for a larger example, as I mentioned, please download AdMentor ASP