Home Tutorial Mods Configurator Bookstore Links Email JPDeni

Tutorial -- Fancier formatting -- Page Layout

At this point, you should have a perfectly acceptable database that accepts input and displays search results. And it doesn't look too bad, either. But maybe you'd rather have it look a little different to match the rest of your website.

If you already have pages on your site, you can start with one of them. Make a copy of one of your html pages and take out the content of the page, leaving yourself just the background, link colors and any links to other parts of your site that you want to have on every page. You can even have things like Javascript on the page, if you are so inclined.

If you don't have any pages on your site, now is the time to decide what you want them to look like. Take a little break from DBMan and create a page that has the basics of your site on it. You'll be able to use this page as a template later on for creating your other pages, too.

A little word of caution: I have seen a lot of people use html editors like NetObjects and maybe some others to create their web pages. The editors are easy to use, but they create a mass of nested tables that are really unnecessary and can cause problems. For one thing, nested tables take a long time to load. For another, the more complex your page is the harder it will be to edit later on.

If you're comfortable with HTML code, just use your text editor to create the page. If you're not so comfortable with HTML, you might want to use a simple HTML editor.

Try not to use any | characters on your page. If you remember from the Some basics of Perl page, the | character is being used as a quotation mark. If you really have to use a | character, be sure to "escape" it by placing a \ in front of it.

Whether you had a page already or are just now creating one and whether you used an editor or did your coding by hand, you should now have a blank page with all of your desired formatting on it.

Look to the <title>...</title> tags on your template page. Insert the following between the tags:

$html_title: $page_title

Now, create a table on your template page. Make it 1 column wide and 2 rows high.

In the first row, center the following, in whatever color and font you want for a title on the page:

$html_title: $page_title

In the second row, again centered, add

<$font_title><b>$page_title</b></font>

Add a line break and then add another table, this time with 1 row and 1 column.

At this point, the code for your page should look something like this: 

<HTML>
<HEAD>
<TITLE>$html_title: $page_title</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff" LINK="#009999" VLINK="#FF99CC" 
BACKGROUND="graphics/001-bdbk.jpg">
<TABLE border=1 bgcolor="#FFFFFF" cellpadding=5 cellspacing=3 width=500 
align=center valign=top>
  <TR><TD align=center>$html_title: $page_title</td></tr>
  <TR><TD align=center>$page_title<BR>
          <TABLE><TR><TD></TD></TR></TABLE>
</TD></TR></TABLE></BODY></HTML>

If you have any links to other pages on your site or elswhere, or if you have any graphics, expand the relative paths to absolute paths. In my example above, I would change 

BACKGROUND="graphics/001-bdbk.jpg">

to 

BACKGROUND="http://www.jpdeni.com/dbman/graphics/001-bdbk.jpg">

Check your html template page by opening it in your browser. Make sure it is the way you want it to be. If you have both Netscape and Internet Explorer, check it in both browsers, because they do look different.

From here on out, I'm going to assume that you are using my "user-friendly html.pl" mod. Don't worry about the fact that you have already created your forms and displays in the other script. You'll be able to transfer them directly. The reason I'm suggesting this is that it's much easier to edit the page format on my mod than it is to adjust it in the default html.pl file. Why don't you go pick it up now right here.

Open up the old html.pl file and copy from print qq| to the last |; in both sub html_record_form and sub html_record. Switch to the new file, and paste the code from the two subroutines directly over the code in the subroutines of the same names. You will notice that the subroutines you're looking for are further down in the new script because there are some other things before it.

You'll also want to change the line 

$html_title  = 'Database Manager Demo';

at the beginning of the script to match your database name.

Save the newly edited file as html.pl and upload it to your server, just to be sure everything's okay. (You might want to rename the other html.pl file and keep it in a safe place, just for a little insurance.)

If all is going well, now it's time to make this thing look like you want it to.

Open up both html.pl and your html template file. In html.pl look towards the top of the script for the section labeled 

##########################################################
##                     Page Layout                      ##
##########################################################

Just below that, you will see 

sub html_page_top {
# --------------------------------------------------------
# some comment lines

    &html_print_headers;

    print qq|
      <html><head><title>$html_title: $page_title</title></head>

The subroutine ends with 

    |;

}

Copy your html template page from the very top up to (but not including) the beginning of the second table. 

<HTML>
<HEAD>
<TITLE>$html_title: $page_title</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff" LINK="#009999" VLINK="#FF99CC" 
BACKGROUND="http://www.jpdeni.com/dbman/graphics/001-bdbk.jpg">
<TABLE border=1 bgcolor="#FFFFFF" cellpadding=5 cellspacing=3 width=500 
align=center valign=top>
  <TR><TD align=center>$html_title: $page_title</td></tr>
<TR><TD align=center>$page_title<BR>

Paste the html code into sub html_page_top, between print qq| and |;

If you used any | characters within your template page, go through and find each one and add a \ before the |.

Save html.pl (Just in case. You never know when something will happen and you might lose everything!)

Skip over the next subroutine and scroll down to 

sub html_page_bottom {
# --------------------------------------------------------
# some comments
  print qq|	
  <table border=0 width=100%>
  <tr>
   <td align=left><$font>Copyright 1998 
    <A HREF="http://www.gossamer-threads.com">Gossamer Threads Inc.</A></font></td>
   <td align=right>
    <a href="http://www.gossamer-threads.com/scripts/dbman/">
      <img src="http://www.gossamer-threads.com/images/powered.gif" 
        border=0 width=100 height=31 
        alt="Database Powered by Gossamer Threads Inc."></a>
      </td></tr>
      </table>
    |;

    print qq|
      </td></tr></table></center></body></html>
    |;
}

The first print qq| ... |; statement is the logo for Gossamer Threads. You must leave it in there, if you have not paid the shareware fee for the script. Also, be sure to save the logo graphic to your own hard drive and change the <img src... URL to point to the logo on your server.

The second print qq|...|; statement is the one we're going to change. Go back to your html page template and copy the code starting just after the end of the second table and continuing to the end. 

</TD></TR></TABLE></BODY></HTML>

In this case, it's pretty much the same as what's already there.

Paste the code from the end of the html template in the second print qq|...|; statement.

Save html.pl and upload it to your server. When you run DBMan, you should have nicely formatted pages, complete with your own graphics and colors. If things aren't quite right, do some adjusting now.

I would suggest that you test the script with Netscape first. Netscape is much less forgiving about html errors than Internet Explorer is, especially when it comes to tables. If you are missing some table tags, you will see a blank screen in Netscape. If you use Internet Explorer, things might look just fine to you, but some of your visitors will see nothing at all. Once things look okay in Netscape, then go to Internet Explorer to see how they look.

If you do any changing of the code, check it to make sure it's the way you want it before you go any further.

In order to maintain the look of the original DBMan distribution, I used a separate format for the top of page formatting in case there was an error. If you want the error pages to look exactly like the other pages, copy the code from sub html_page_top and paste it into sub html_error_page_top. If you want the error pages to look different, make the changes in your html template page and copy the code into sub html_error_page_top just like you did in the first one.

Either way, again save the file, upload and test it. You will have to intentionally make an error, such as performing a search for a record you know is not in the database or not defining any search terms.
The basic tools

Some basics of Perl
Install the demo

Create your own forms and displays
Create your own configuration

Fancier formatting part two
Set permissions

How to install a mod

If you need help

Home Tutorial Mods Configurator Bookstore Links Email JPDeni

Text-only site map

Background by Windy