CMS Design Using PHP and jQuery
 |
Build and improve your in-house PHP CMS by enhancing it with jQuery
|
(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:
<ul>
<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:
<?php
require ‘pages.php’;
Next, let’s get started on the Pages section.
First, we will create /ww.admin/pages.php:
<?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:
<h2>FORM GOES HERE</h2>
And now we can create the page menu. Use the following code to create the file /ww.admin/pages/menu.php:
<?php
echo ‘<div id=”pages-wrapper”>’;
$rs=dbAll(‘select id,type,name,parent from pages order by ord,name’);
$pages=array();
foreach($rs as $r){
if(!isset($pages[$r[‘parent’]]))$pages[$r[‘parent’]]=array();
$pages[$r[‘parent’]][]=$r;
}
function show_pages($id,$pages){
if(!isset($pages[$id]))return;
echo ‘<ul>’;
foreach($pages[$id] as $page){
echo ‘<li id=”page_’.$page[‘id’].'”>’
.'<a href=”pages.php?id=’.$page[‘id’].'”‘>’
.'<ins> </ins>’.htmlspecialchars($page[‘name’])
.'</a>’;
show_pages($page[‘id’],$pages);
echo ‘</li>’;
}
echo ‘</ul>’;
}
show_pages(0,$pages);
echo ‘</div>’;
That will build up a <ul> 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).
- 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.
- 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:
