Producing Web Pages of the Same Directory Automatically with PHP

Introduction
If for a web site you have many web pages in the same directory you can use PHP to produce the pages automatically. Web pages of the same directory at the server, even of the whole web site, usually have the same layout. It is because of this same layout issue that you can use a PHP program to produce the web pages automatically. By the word, "layout" here, I am referring to the major (overall) layout. You have major layouts like the "Left Stripe and Content" layout and the "Header and Content" layout. There are other major layouts.

I will not concentrate on layout in this article. However, I will use the "Left Stripe, Header and Content" layout for illustration. This is a popular layout. I will only talk about the production of web pages, which have the same layout and are of the same directory in the web server.

You need basic knowledge in HTML, PHP and PHP File Handling in order to understand this article. When some people study PHP, they neglect PHP File Handling. If you have not studied PHP File Handling, then read the article titled, PHP File Handling Basics, which I wrote for this site. To access the article, just type the title and my name, Chrys in the Search box of this page and click Search. If you have the Google Search Box, use it.

It is true that there are software packages, you can get off-the-shelf (already written and in software stores) and use to produce web page templates. These templates are similar to what I show you in this article. A problem with some of the packages is that they produce unwanted code in the template. When you have code that you do not want, modification of the individual HTML final documents becomes difficult. What I show you in this article produces only the HTML code that you want (for the templates).

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

A Simple Web Page
This is the web page we shall use:

The title goes here.

Math Made Easy - Simple explanations - Interactive learning and teaching online

body {background-color:MediumTurquoise}
div#D0 {display:inline; width:100%}
div#D1 {display:inline; width:19%; float:left}
div#D2 {display:inline; width:79%; float:right; padding:1%}

The Page Heading goes here

Link 1 for this directory

Link 2 for this directory

Link 3 for this directory

Link">http://www.somewebsite.com/dirA/fileA.htm">Link A for this directory

Link">http://www.somewebsite.com/dirB/fileB.htm">Link B for this directory

The page content goes here.

As you can see, there are three DIV elements for the web page. One is for the heading of the page; another is for the hyperlinks; and the third is for the main content of the page. When you have pages of the same layout in a directory, what are the things that change (are different) as the user clicks the links to see the different HTML pages in the directory? The titles in the HTML title tag are different for the different pages. The headings for the different pages are different. The main content for the different pages are different. At least these three things are different. For the sake of simplicity, let us limit our design here, to these three changes.

In practice, you would have a logo or a main heading and sub heading in each page, and it is the sub heading that will be changing (different for the different pages); even the links of the different pages may not point to the same directory. But as I said, let us limit the changing aspects to the three features mentioned above. With the knowledge you gain here, you will be able to write code that will have more changing features.

String Nature of an HTML Document
An HTML document like the code above, is actually one long string. You see the code above as consisting of lines, but from the browser's point of view, it is one long string. The second line follows the first; the third line follows the second, etc. forming one long string.

Portions of the HTML Document String
For pages of the same directory, there are certain portions of code that are the same for all the pages, and certain portions that are different. So looking at the HTML document as a string, there are certain sections of the string that are the same for the different pages and certain sections that are different for the different pages. For our example, the parts of the string that are different are the title text for the title tag, the Heading, and the main content. The rest of the parts of the string are the same for the different pages.

Template for the different Pages
What you will use PHP to do is to come up with one template for the different pages of the same directory. Each time you want a page, you run your PHP code which gives you the template, then you can copy the three changing sections individually from elsewhere and paste them into their respective positions of the HTML document template.

You can buy software that will produce these changing sections, especially the main web page content; but such software may also produce unwanted code. If your main content is essentially text, then you have an immediate solution, which I have an article for. To arrive at the article, type, "Converting Text to HTML with PHP, Chrys" in the Search box of this page and click Search. If you have the Google Search Box, use it. Hey, if you are good in PHP, then you can modify the code for that article to include images and have some esthetics for the main web page content. The code will produce the main web page content as text file. You just copy the content from the text file into your template, produced by the PHP code of this article. Before you can paste any text into this template, the template has to be displayed as a text document (see below).

Files involved
For simplicity the files involved for the purpose of this article are limited to a minimum. You have the PHP code in one file. The section of the HTML document string, from the beginning to the start TITLE tag will be saved as a text file. The section of the string from the end TITLE tag to the tag will be saved as another text file. The section of the string from the tag to the tag will be saved as another text file; and the section of the string, from the tag after the main page content to the end of the HTML document string will be saved as a text file. In other words, each of the sections of the HTML document string that is the same for the different web pages is saved in its own text file. You can save these in a database, but for simplicity, let us have them in text files. Note that the fixed portions include part of the tags the defined the changing content in the final HTML document. For example, the first fixed portion includes the start tag of the title. So far as the title is concerned, to form the final web page, you will only have to include the title text in the template.

Your PHP program simply assembles the contents of all these text files into one HTML document, which is the template. This template has the tag for the title, but does not have the text for the title. It has the tags for the Heading, but does not have the text for the heading. It has the tags of the DIV element for the main content, but does not have text for the main content. You can copy these three items from elsewhere and past them in their respective positions in the template. Alternatively, you can write an elaborated PHP program that will copy these three items from a form, files or databases and join them with the template; however, I will not go into that. In this article, I only talk about a PHP program that produces the template.

The Project
I would like you to carry out the project outline here. The aim is to produce a template for the above HTML document and other HTML documents, with the same layout, in the same directory at the web server. You need a text editor, a web server and PHP installed to work with the web server to carry out the project.

Project Directories
For simplicity, the PHP file will be in the home directory. You will create two directories in the home directory called, temp and templates. These directories are just one level below the home directory. The temp directory will have the sub HTML document strings as text files. When the template is produced it will be saved as an HTML file in the templates directory.

The Text Files
You will copy and paste the following sub HTML document string into a text file. Before you copy, note that it has four empty lines at it end. This is the first HTML document string. The four empty lines at its end will appear as space (three blank lines) in the template, when opened in a text editor. You will then easily identify it as the space to which you will type or paste in the title text.

After copying and pasting the above code with its four blank lines into the text editor, save the result as a text file in the directory, temp, with the name, part1.txt. The following is the second sub HTML document string. It has four blank lines at its end for a similar reason.

Math Made Easy - Simple explanations - Interactive learning and teaching online

body {background-color:MediumTurquoise}
div#D0 {display:inline; width:100%}
div#D1 {display:inline; width:19%; float:left}
div#D2 {display:inline; width:79%; float:right; padding:1%}

Copy this into a text editor and save the file with the name, part2.txt into the directory, temp (the opened text editor should not have any initial content). Copy and paste the following sub HTML document string into the text editor. Save the result as a file with the name, part3.txt, into the temp directory. Note that there are four blank lines at the end of the code:

Link 1 for this directory

Link 2 for this directory

Link 3 for this directory

Link">http://www.somewebsite.com/dirA/fileA.htm">Link A for this directory

Link">http://www.somewebsite.com/dirB/fileB.htm">Link B for this directory

The following code is the last sub HTML document string. It does not have blank lines at its end.

Copy and paste this code into the text editor. Save the result into the directory, temp, with the name, part4.txt.

The PHP Program
As I said above, the PHP program is saved in the home directory. This is the code:

Copy and paste the code in a text editor. Save the result in the home directory with any name you want, but end it with, ".php".

The first four lines of the code use the PHP file_get_contents() function. This function takes as argument, the path and file name of a file. It returns the file content as a string. This function opens and closes a file on its own. You do not need extra statements to open and close the file. So the first four lines of the PHP code copies the content of the different sub HTML document strings into the string variables, $subStr1, $subStr2, $subStr3 and $subStr4 accordingly. The fifth line, joins the strings into one string value and assigns the value to the variable, $templateStr.

The sixth line echoes the content of the join string to the browser, so that you see the result and be confident that the program is working. What you see at the browser will not have the changing texts, (title, heading, and main content). The four blank lines are not displayed, because the browser does not display text blank lines. However, the blank lines are still there.

The last line in the PHP code saves the joined string in the directory, templates, as an HTML file with name, pagetemplate.htm. The file_put_contents() function creates the file before saving the content. So, it opens a file for writing and closes the file, on its own. You do not need extra statements for this. For our case, the function takes as arguments, the path and new file name and the string content of the file. To have the content saved as an HTML file, in our case, all you need do, is to give it the "htm" file name extension, as in the function argument above.

Now, run the PHP file. Using your browser, type the URL of the file in your browser and click Go. In a while, you should see the template web page on the browser window. What you see will not have the title text; it will not have the heading text; and it will not also have the main content text. These three items have to be fitted as explained below. However, the display of the template page shows you that things are working.

Now, go to the directory, templates, and you will see, the file, pagetemplate.htm, that has been created and saved; it is the template. Open it as a text file, (not as an HTML file). When it is opened as a text file, you should then see the blank lines you had in the sub string text files. Each set of blank lines will now be three, not four. Each set of blank lines will have HTML code above and below it. You can now copy the changing texts (title, heading and main content) from elsewhere and paste in the different sets of blank lines accordingly.

After including the changing texts, the page is complete. You can now save the result with the actual name you want for the web page file, in a web directory. This file saved in the web directory, should have the extension, "htm" or "html". You give the web page file name and extension as you save the text file, using the File|Save_As commands of the text editor.

The software packages, people buy for producing web page templates and content go through a similar process when producing their templates. The problem is that they would produce extra code, and you are not really in the position to modify the templates their produce. This article is for a do-it-yourself approach and offers all the flexibility you want.

Producing all the Pages
I have illustrated how you can produce one of the web page pages. To produce the other pages, go to the templates directory and open the pagetemplate.htm as a text file. Copy the changing texts for the next page and paste them in the blank spaces (sets of blank lines) accordingly. Save the resulting text document as an HTML file in the web directory, giving it the web page name and the extension, "htm" or "html". Repeat this for all the web pages you want for the ultimate web server directory.

Remarks
What I have shown you in this article, is more of an illustration than a complete set of instructions on how to build web page templates, for the same directory, automatically. In the program I designed for myself, there is an HTML form. I fit in information into the form, type the URL of the PHP program in the address bar of the browser and click Go. This would produce the template. In fact my program does much more than this; there are many more changing texts and many other features.

At the end of the day you would want a program that will do more than what I have shown you in this article. You can develop the ideas of this article to come up with a more elaborated program with many features. Remember, the main differences with my approach and that of other available software packages are that you do not have extra code in my template and my template code is easily available for modification of individual web page files. Do-it-yourself gives you all the flexibility you want. So, as you develop the ideas of this article, bear the advantages in mind.

You might want a PHP program that would produce the templates for all the pages of a site. As a web site developer, you should know that there are different major web page layouts (they are not many). You might want a program that would produce a template based on a chosen layout. In this case you should first learn how the different layouts are created with DIV elements (you can do layout with frames, but search engines do not work well with frames). The article I wrote titled, "Layout with DIVs instead of Frames for HTML" may help here. To access the article, just type the title and my name, Chrys in the Search box or Google Search box of this page and click Search.

So to come with an elaborated program, you need to develop the ideas of this article and maybe learn a bit more outside this article. If you have an elaborated project at hand and you cannot do it or you do not have the time to do it, just contact me at, forchatrans@yahoo.com .

Chrys