Inserting an Article into a Web Page

Once we are able to use a wysiwyg editor to create article online, the other main part of our CMS is the insertion of the article into a template, a model of page common to all articles in the site.

Principle

The model of the page is a standard HTML page designed by yourself. The system makes profit of the <div> tags in HTML to insert data at the right place.
In this simplified demo, we will insert directly a title into a category in the menu of the template, and a text into the div tag with the "content" ID.

The template

The model used for the demo is the template of a CSS tutorial in the series of tutorials about JavaScript and CSS.
This is a two-columns page with a header and a footer: a very common format. You can change the format proving the identifiers ("content" etc...) are kept or you can change the name of identifiers in the scripts.
Here is the template. This requires the example.css stylesheet.

Adding an article, demo

In this demo, you have just to select the category, give a title and enter a small text into a simple textarea. In the real application we will use the wysiwyg editor and you have also to enter a login and a password.

Select a tag, and enter a short title for the menu:

Enter a small text, this is the content of the article:

How this works

This page loads the file insert.php that stores the data entered into an XML file, and then loads the model of page to fill with the content of this XML file.

Format of the XML file

The file used for the demo to hold a single article, has a simple format:

<?xml version="1.0">
<articles>
     <article tag="x" title="y">
       ...content of the article...
     </article>
</articles>

Inserting the title and the content

The title you have chosen for the article is inserted into the <title> tag inside the <head> section, and into a <h1> tag inside the content of the page and also into the sidebar, in the category you have selected .

At the top of the template, a PHP code is inserted. It loads the XML file previously created and assigns the variables in the page.

These variables are a part of the template. For the meta-tag:

<title><?php echo $title; ?> </title>

For the title and the content, the template holds two PHP statements inside the <div id="content"> tag:

<div id="content>
     <h1><?php echo $title; ?> </h1>
     <?php echo $content; ?>
</div>
For the sidebar, see at the Dynamic Menu tutorial. (This demo makes use of a temporary and simplified solution).

The real application

The final CMS will be more developed, and will require more steps:
- Entering a login and a password. This will be tested as in the "Authentication" demo.
- Using the wysiwyg editor to create the article. This has been described on the "Using a wysiwyg editor" demo.
- Inserting the title into an JSON file with the category. This file will be used as described in the "Dynamic menu" demo.
- The XML file created has a different name for each page (the name of the page with an XML extension), unlike in the demo.
- The name of the XML file is added to a list, and from this list we can manage the content of the site.
- Once the text is inserted into the model of page, the page is copied into another file, into a dedicated directory (a tree in fact).
  Note that this is an option. We can also build dynamically the page only when it is requested by net surfers.

(c) 2007 Denis Sureau and Sandrine Takis. Scriptol.com
Licence: You are free to use the code of this tutorial to motorize your own site. Please do not put the tutors and other files on another website, add a link to the article instead. But you can print the pages and distribute them along with the code for educational purpose.