Hands on: How to roll your own CMS

How to update your website using a simple content management system

In my last article, we looked at ways to keep a site up to date, allowing non-technical people to add extra information, without requiring them to learn anything about web design or HTML.

Online editing systems are one option, such as Mozile, but there are still some compromises that have to be made in setting up such a system.

A full-blown CMS (content management system) is another alternative, and we’ll look at some of the best-known open source systems at a later date.

This time, though, I’ll look at the ‘middle’ option, which is a ‘roll your own CMS’.

That might sound a bit complicated, but you can put together a basic system that will fit the needs of many smaller sites remarkably easily.

It may even be easier than downloading, configuring and installing a large CMS system, let alone showing your client (or colleagues) how to use it to update their site.

Of course, the devil’s in the detail, and this sort of thing really works well if there aren’t too many different types of information to add to the website.

Otherwise, you’ll find you need lots of options, making it fiddly for people to use, and making the database that drives the site overly complex.

Rolling your own
For my own site, I decided to keep it simple – and ultimately much more straightforward to keep up to date – by having just three areas: one with information about me, one with articles you can read on the site, and one with links to material elsewhere.

That way, there are only three main types of information that can be added. But that, of course, could make things slightly dull.

So there are a couple of twists as well; for each article or link, there’s information about who it was done for, so the entry for PCW, for example, says (naturally) that it’s the best magazine in the UK.

And each page is designed with two parts: the main text; and a right-hand column that has notes explaining the background to the rest of the page, or provide more useful links.

So, although it might not look like the slickest site, it has a fairly straightforward design, and all the different elements can be updated easily by simply making an entry in the database.

Those who are familiar with Dreamweaver will know that the data entry side is pretty straightforward, to the point where you can just say, ‘Make me a web page that puts an entry in this database.’

A way to update entries is helpful, but that can be fairly easily automated as well, so rather than concentrate on that side of things, I will look at the retrieval and display aspect of the site instead.

Do remember, though, that just as we had to consider security in our look at Mozile, if you’re rolling your own CMS, you need to make sure that any management pages can only be accessed by appropriate people, either by coding them to ask for login details, or using controls such as a .htaccess file on the web server.

An alternative, which may be suitable for some users, is to simply use a Windows or Mac front-end program to the database, such as CocoaMySQL on the Mac.

In and out
One of the problems with adding information via a CMS is how exactly do you add it? Do you just allow people to enter text, or do you make provisions for headlines and so on?

Some systems allow you to simply add a headline, and then body text. If you want a subheading, you have to add an extra element, then add another element of body text, and so on, which can be fiddly for a novice.

But then, a block of plain text is awkward too. And what if the original is already formatted, for example, in Microsoft Word?

You could allow users to save pages as HTML from Word, and allow a simple way to upload them.

But what if they have used odd fonts? You could end up with some parts of the site looking truly horrible.

So, the solution I’ve adopted – and remember it might not be suitable for everyone – is to simply allow text to be cut and pasted, and then to use codes to detect when line breaks or headings should appear.

You could, of course, try to detect line breaks with a script, but you then run the risk of them not being consistently used in the original document.

While this is a little more than a straight cut and paste, it’s not too much work.

What I’ve ended up with is something quite simple, where I can enter suitably formatted text into a database field, directly or via a web form.

It’s fairly simple then to change a document, skimming through it and adding the necessary codes.

You could even do a search and replace in Word for the end of paragraph symbol, for instance. But how do you get it onto the web page?

Selecting it from the database is pretty straightforward. Then you need to turn those codes back into something that’s usable for the browser.

To do that, I have a small PHP library included in the pages that need to display database content.

There’s a formatPage function that takes two parameters: the first is the string retrieved from the database, and the second says where on the page it’s going – whether it’s for the right-hand panel, or the main body – so that the correct CSS style names can be used.

In a typical Dreamweaver-style query-based page, all you have to do is say something like:
echo formatPage($row_Content[‘pageText’],’body’) ;

Later in this article, under 'The formatPage function', you will see the code for the formatting function.

As you can see, it’s a simple use of Perl-compatible regular expressions, and you could do the same in your own favourite scripting language.

It’s a touch simplistic too; for example, it doesn’t allow for punctuation in headings, but for many sites something such as this could be a quick solution to making it easy to keep pages up to date.

THE FORMATPAGE FUNCTION
function formatPage( $pageInfo, $where ) {
// format the text with appropriate CSS and HTML tags
// we use @@ to indicate end of para
// links are formatted with WWW:site title,URL:www.whatever
// and headings with %%heading%%
// code is added by using *+ to begin a block
// and *- to end it, with ** as a <br>
if ( $where == ‘panel’ ) {
$para = ‘rhText’ ;
$link = ‘rhLink’ ;
$head = ‘’ ;
$code = ‘’ ;
} else {
$para = ‘body’ ;
$link = ‘bodyLink’ ;
$head = ‘bodyHead’ ;
$code = ‘bodyCode’ ;
}
$pageInfo = ‘<p class=”’ . $para . ‘“>’ . $pageInfo . ‘< /p >’ ;
$pageInfo = preg_replace(‘/\@\@/’,’</p ><p class=”’ . $para . ‘“>’, $pageInfo ) ;
$pageInfo = preg_replace(‘/WWW:([\w\s]+),URL:([^\s]+)\s/’, ‘<a href=”http://$2” target=”_blank” class=”’ . $link. ‘“>$1</a> ‘, $pageInfo ) ;
$pageInfo = preg_replace(‘/\%\%([\w\s,]+)\%\%/’, ‘</p><p class=”’. $head. ‘“ >$1</p><p class=”’ . $para. ‘“>’, $pageInfo ) ;
$pageInfo = preg_replace(‘/\*\*/’, ‘<br/>’, $pageInfo ) ;
$pageInfo = preg_replace (‘/\*\+/’,’</p><p class=”’ . $code . ‘“>’, $pageInfo ) ;
$pageInfo = preg_replace(‘/\*\-/’,’</p><p class=”’ . $para . ‘“ > ’, $pageInfo ) ;
return $pageInfo ;
}

Formatting text
Here are some formattiing examples:
1. %%This is a heading%%
2. Each paragraph is terminated by two at symbols, like this.@@
3. If a new line is all that’s needed, then two asterisks can be used instead, and here’s how we also add a link:**
4. WWW:Personal Computer World,URL:www.pcw.co.uk will be detected and turned into a link

For more articles on web development, click the tag below.