Page Management – Part One in CMS Design

6 min read


CMS Design Using PHP and jQuery

CMS Design Using PHP and jQuery

Build and improve your in-house PHP CMS by enhancing it with jQuery

  • Create a completely functional and a professional looking CMS
  • Add a modular architecture to your CMS and create template-driven web designs
  • Use jQuery plugins to enhance the “feel” of your CMS
  • A step-by-step explanatory tutorial to get your hands dirty in building your own CMS

        Read more about this book      

(For more resources on this subject, see here.)

How pages work in a CMS

A “page” is simply the main content which should be shown when a certain URL is requested.

In a non-CMS website, this is easy to see, as a single URL returns a distinct HTML file. In a CMS though, the page is generated dynamically, and may include features such as plugins, different views depending on whether the reader was searching for something, whether pagination is used, and other little complexities.

In most websites, a page is easily identified as the large content area in the middle (this is an over-simplification). In others, it’s harder to tell, as the onscreen page may be composed of content snippets from other parts of the site.

We handle these differences by using page “types”, each of which can be rendered differently on the frontend. Examples of types include gallery pages, forms, news contents, search results, and so on.

In this article, we will create the simplest type, which we will call “normal”. This consists of a content-entry textarea in the admin area, and direct output of that content on the front-end. You could call this “default” if you want, but since a CMS is not always used by people from a technical background, it makes sense to use a word that they are more likely to recognize. I have been asked before by clients what “default” means, but I’ve never been asked what “normal” means.

At the very least, a CMS needs some way to create the simplest of web pages. This is why the “normal” type is not a plugin, but is built into the core.

Listing pages in the admin area

To begin, we will add Pages to the admin menu. Edit /ww.admin/header.php and add the following highlighted line:

<li><a href="/ww.admin/pages.php">Pages</a></li>
<li><a href="/ww.admin/users.php">Users</a></li>

And one more thing—when we log into the administration part of the CMS, it makes sense to have the “front page” of the admin area be the Pages section. After all, most of the work in a CMS is done in the Pages section.

So, we change /ww.admin/index.php so it is a synonym for /ww.admin/pages.php. Replace the /ww.admin/index.php file with this:

require 'pages.php';

Next, let’s get started on the Pages section.

First, we will create /ww.admin/pages.php:

require 'header.php';
echo '<h1>Pages</h1>';
// { load menu
echo '<div class="left-menu">';
require 'pages/menu.php';
echo '</div>';
// }
// { load main page
echo '<div class="has-left-menu">';
require 'pages/forms.php';
echo '</div>';
// }
echo '<style type="text/css">
@import "pages/css.css";</style>';
require 'footer.php';

Notice how I’ve commented blocks of code, using // { to open the comment at the beginning of the block, and // } at the end of the block.

This is done because a number of text editors have a feature called “folding”, which allows blocks enclosed within delimiters such as { and } to be hidden from view, with just the first line showing.

For instance, the previous code example looks like this in my Vim editor:

What the page.php does is to load the headers, load the menu and page form, and then load the footers.

For now, create the directory /ww.admin/pages and create a file in it called /ww.admin/pages/forms.php:


And now we can create the page menu. Use the following code to create the file /ww.admin/pages/menu.php:

echo '<div id="pages-wrapper">';
$rs=dbAll('select id,type,name,parent from pages order by ord,name');
foreach($rs as $r){
function show_pages($id,$pages){
echo '<ul>';
foreach($pages[$id] as $page){
echo '<li id="page_'.$page['id'].'">'
.'<a href="pages.php?id='.$page['id'].'"'>'
echo '</li>';
echo '</ul>';
echo '</div>';

That will build up a &ltul> tree of pages.

Note the use of the “parent” field in there. Most websites follow a hierarchical “parent-child” method of arranging pages, with all pages being a child of either another page, or the “root” of the site. The parent field is filled with the ID of the page within which it is situated.

There are two main ways to indicate which page is the “front” page (that is, what page is shown when someone loads up http://cms/ with no page name indicated).

  1. You can have one single page in the database which has a parent of 0, meaning that it has no parent—this page is what is looked for when http://cms/ is called. In this scheme, pages such as http://cms/pagename have their parent field set to the ID of the one page which has a parent of 0.
  2. You can have many pages which have 0 as their parent, and each of these is said to be a “top-level” page. One page in the database has a flag set in the special field which indicates that this is the front page. In this scheme, pages named like http://cms/pagename all have a parent of 0, and the page corresponding to http://cms/ can be located anywhere at all in the database.

Case 1 has a disadvantage, in that if you want to change what page is the front page, you need to move the current page under another one (or delete it), then move all the current page’s child-pages so they have the new front page’s ID as a parent, and this can get messy if the new front-page already had some sub-pages—especially if there are any with equal names.

Case 2 is a much better choice because you can change the front page whenever you want, and it doesn’t cause any problems at all.

When you view the site in your browser now, it looks like this:


Please enter your comment!
Please enter your name here