Insertion an article on a web page

♠ Posted by Unknown in CMS at 03:46

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

principle

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

The Template

The model used for the demo is a page into two columns with a header and a footer: a common format. You can change the format provided that the identifiers ("content" etc ...) are retained or you can change the name of identifiers in scripts.
Here is the template. This requires exemple.css stylesheet.

Add product demonstration

In this demo, we simply choose a category, we give a title and a small text let's type in a simple text area. In the real application we will use the wysiwyg editor and it will also enter a name and password.

How it works

This page loads the insertion.php file that records the data entered into an XML file, and then load the page template to fill it with the contents of the XML file.

XML File Format

The file used for the demo to contain a single item has a simple format:

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

Insert title and content

The title you have chosen for the item is inserted in the <title> tag in the <head> section, and an <h1> tag within the page and also in the side panel in the chosen category.

At the beginning of the template, PHP code is inserted. It loads the XML file previously created and assigned to the variables in the page.

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

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

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

<div id="content>
     <h1><?php echo $title; ?> </h1>
     <?php echo $content; ?>
</div>

In the sidebar, see the tutorial Dynamic menu. (This demo uses a temporary simplified solution).

The actual application

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

Enter a username and password. This was tested in the demo "Registration".
Using the WYSIWYG editor to create the article. A demo is given for TinyMCE and CKEditor.
Inserting the title in a JSON file with its class. This file will be used as described in the demo "Dynamic Menu".
The generated XML file has a different name for each page (the page name with an XML extension) contrary to the demo.
The name of the XML file will be added to a list and from this list we can manage the site.
Once the text is inserted into the page template, it will be copied to another file, and in a dedicated directory (actually a tree).
Note that this is an option, can also build the page dynamically when the visitor demand.

IT Knowledge Collector