Insert an article into a web page

Now we know how to use the wysiwyg editor to create an article, another essential part of our CMS is inserting an article into a template, a page template common to all articles on the site.

Principle

The page template is a standard HTML page developed by us. The system uses <div> HTML tags to insert data in the desired location.
In this simplified demonstration, we will directly insert the title in the template menu and the text in the div tag, the identifier of which is "satisfied ."

Template

The template used for the demo is a two-page header and footer: a very common format. You can change the format as long as the identifiers are saved ("content," etc.) or change the name of the identifiers in the scripts.
Here's the template. This requires the style sheet example.css.

Add Article, Demo

In this demo, we just choose a category, give a title and enter a small text into a simple text area. In the real application, we will use the wysiwyg editor and will also need to enter a name and password.

Select a keyword and enter a short title for the menu:

Enter a small text - here is the content of the article:

How does it work

This page loads the insertion.php file, which saves the data to an XML file, and then loads the page template to fill it with the contents of the XML file.

XML file format

The file used for the demonstration contains only one article, has a simple format:

<?xml version="1.0">
<articles>
     <article tag="x" title="y">
       ...contenu de l'article...
     </article>
</articles>

Insert Title and Content

The title selected for the article is inserted in the <title> tag of the <head> section, as well as in the <h1> tag within the page, as well as in the sidebar in the selected category.

PHP code is inserted at the beginning of the template. It loads the previously created XML file and assigns variables to the page.

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

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

For header and content, the template contains two PHP statements in the <div id = "content"> tag:

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

Actual application

The final CMS will be more developed, and will require additional steps:

  1. Please enter your user ID and password. This was tested in the "Record" demo.
  2. Use the wysiwyg editor to create an article. Demonstration given for TinyMCE and CKEditor.
  3. Inserts a header into the JSON file with its category. This file will be used as described in the Dynamic Menu demo.
  4. The generated XML file will have a different name for each page (the name of the page with the XML extension), unlike the demo.
  5. The XML file name is added to the list and you can manage the site from the list.
  6. After the text is pasted into the page template, it will be copied to another file, and to the selected folder (actually a tree).
    Note that this is an option, you can also dynamically build the page when the visitor requests it.