Dynamically Loading Page Content

Loading only Template Content Once

Tutorial Level: Intermediate

One of the largest, and most obvious reason that templates take such a long time to load is that many of the templates used on websites have many large and detailed images that the server must load each time a new page is visited. Logically, to cut down on the amount of time required for a page load, we would need to allow the template to load only once, when a user first visits the page, rather than refresh every time a new page loads. Another advantage of this method is that if a change needs to be made to the template, only one file has to be editted, rather than every page on the website. Although this may sound confusing at first, as we go through the steps of creating this dynamic content, the purpose and effects will become more clear and your website will become more practical as well.

Dividing up the Template

This method of page loading is based around the idea of separating the top part of the template (above where the text of the page is located) and the bottom of the template (directly below where the page text is located), and then calling the page content from a separate file to be displayed in between the two parts. While most templates are much longer than the example below, most also share the same principle of having a top half, a location for page content and a bottom half. Let’s take for instance the following example of a simple template below…

<html>
<head>
<title>A simple Template</title>
</head>
<body>
<center>
<div id=”pagecontent” style=”text-align: center; width: 200px; font-size: 12px;”>
<!– page content –>
This is a simple template used to show the principles of how an HTML template is setup. It includes a header part of the template: the coding above this text, and a footer section: the coding below this text.
</div>
</center>
</body>
</html>

As shown above, the coding above the comment: <!– page content –> is considered the Header of the template. The coding below the the text: …the coding below this text… is considered the Footer. This will be very important when we break the template up into different sections. Now that we know logically how the template is setup, and we have planned out how to divide the template into separate parts, it is time to create the different files.

Please keep in mind that when doing these steps, you can still use your own template, but for the purposes of giving a visual example, the template above will be used in this tutorial. Now let’s get started! Because this can become confusing if mixed with other files, I would suggest creating a new folder. For the sake of the tutorial, let’s call that folder mytemplate. Using the template above, the following files (using the names given) should be created with the content quoted below:

header.php

<html>
<head>
<title>A simple Template</title>
</head>
<body>
<center>
<div id=”pagecontent” style=”text-align: center; width: 200px; font-size: 12px;”>

footer.php

</div>
</center>
</body>
</html>

With the creation of these two files, our new folder (mytemplate), should have the following files located in it (along the way, we will check to make sure that you have all the files in your template folder, to ensure that a step was no skipped by accident)…

  • header.php
  • footer.php

The next step is to create a folder for the pages themselves to go in. To keep is simple, we will call this folder pages (original, I know). To make a page the default page to load, we need to call it idx.php, signifying that it is the index file. Below is what should be contained in that file (NOTE: this file should be saved inside the pages folder)…

idx.php

<!– page content –>
This is a simple template used to show the principles of how an HTML template is setup. It includes a header part of the template: the coding above this text, and a footer section: the coding below this text.

Now that we have created the header and footer files, the pages folder, and added a page (idx.php) into that folder, our folder for the template should look like the following (in tree format)…

  • pages (folder)
    • idx.php
  • header.php
  • footer.php

The last step is to create a file that will tie this system together. The index.php (below) file is used to call the header file, then the page content from the pages folder, and lastly the footer file. By doing this, we create the exact same template as the simple HTML one in the beginning, but now the header and footer files only load when the user first views the page (manually hitting the refresh button in the browser may also refresh the entire template). This is what the index.php file, saved in the normal directory (mytemplate) should look like (this file should be used both for this template and any custom templates, such as a template created by you)…

index.php

<?
include (“header.php”);
//Calls header file
$act = $_GET[‘act’];  //Delcares a variable for the URL
if(!isset($_GET[‘act’]))
{
$act = “idx”;
//If no page is specified, than the idx page is used
}
$page = ‘pages/’. $act .’.php’; //Variable for the filename of the page
if($act)
{
if(!file_exists($page))
{
@include(“pages/404.php”);
//Loads the 404 Error page
}
else
{
@include($page);
//Loads the content of the page
}
}
include(“footer.php”);
//Calls the footer file
?>

Now that we have have created this new file, the directory for the template should have the following files in it…

  • pages (folder)
    • idx.php
  • header.php
  • footer.php
  • index.php

Creating New Pages

With this method of dynamic page loading, creating new pages is also simplified. To create a new page now, you only have to create a file with page content (text and images) and save it under the pages folder, rather add the entire template into each file, just like in the idx.php file. Note that all the files in the pages folder must have the extension .php or the index.php will not recognize them as pages. There is also no extra scripting required, simply drop the file into the folder, and upload it to the server, and the index.php file will automatically recognize it. To view the new page, use the following URL, replacing mywebsite.com with the URL of your website, and page with the name of your page (NOTE: when using the URL, do not add the .php extension to the file)…

http://mywebsite.com/?act=page

By adding the ?act= peripheral to the URL, the server fetches the page and knows to add the .php extension to find the page in the pages folder. That is why you don’t have to add the .php extension, because it is understood when fetching the file.

A Custom Error Page

Another benifit of this method is that you can create a custom error page to be displayed when a page cannot be found in the pages folder. To create this page, simply create a file with text and/or images on it, name it 404.php and place it in the pages folder. When you upload it to the server, the index.php file will call it if there is an error calling a page. If you don’t have a 404.php file, then the server will issue the normal 404 error. The following is an example of an error page…

404.php

<center>
<strong>404 Error!</strong>
<br /><br />
Sorry, there was an error loading the following page:
<br /><br />
<?
$act = $_GET[‘act’];
echo(“” . $act . “.php”);
?>
<br /><br />
Please be sure that this page exists before retrying.
<br /><br />
<a href=”javascript:history.go(0);”>Refresh</a> | <a href=”javascript:history.go(-1);”>Back</a>
</center>

This above example will tell the user that there was a 404 Error (in bold) and then tell them which page they were trying access when the error occurred. It also includes Javascript links to visit the previous page (back) or to refresh the current page. Although very short and simple, it contains some dynamic features that can help the user diagnose the problem and direct him or her to the currect location.

Credit & Recognition

I’d like to mention that the index.php file used in this tutorial was not created from the ground up by me, and I do not take credit for its use or features. The process that makes up this tutorial was also taught to me from the same person, and I have used it for the last few years as a standard on all webpages I create. I am only passing it on after getting comfortable using it and have put it to good use. I was given a basic version of the script, and over the past few years it has been modified to fit the various uses it was applied to. If you have any questions with this file or tutorial in general, I will be happy to help: simply leave a comment below. I would just like to state that I am not the creator of this script, and give recognition to those that it is due. I hope you can also put this script to good use, and most important of all: enjoy!

Advertisements

~ by unseenghost on 22 Jul 2008.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: