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 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:

  1. Entering a login and a password. This will be tested as in the "Authentication" demo.
  2. Using the wysiwyg editor to create the article.
    This has been tested with TinyMCE and CKEditor.
  3. Inserting the title into an JSON file with the category. This file will be used as described in the "Dynamic menu" demo.
  4. The XML file created has a different name for each page (the name of the page with an XML extension), unlike in the demo.
  5. The name of the XML file is added to a list, and from this list we can manage the content of the site.
  6. 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 this is an option. We can also build dynamically the page only when it is requested by net surfers.