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.
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 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.
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 tested with TinyMCE and CKEditor.
- 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 this is an option. We can also build dynamically the page only when it is requested by net surfers.