How to create a simple CMS without DB access

A Content Management System (CMS) allows you to update your website easily without touching anything in the backend. If you are a non-IT person, you will almost always want a CMS for your website because it makes you less dependent on your web designers or developers to add, edit or delete contents in your website.

There are many good CMS out there but most of them require some sort of database access in the backend. Many PHP CMS uses mysql or postgres database which resides in the server. Installation and troubleshooting of CMS might require some technical knowledge and server configuration could be daunting for some.

I was creating a website for a client recently when he requested a CMS for him to update the web pages during his free time. I was tempted to install a popular ready made CMS such as joomla but on futher thoughts, joomla on a small business website could be an overkill. The website would most likely not utilise many features of joomla and furthermore, his hosting package does not include a database (amazing). Given a short time frame to come up with a solution, I created a simple PHP script for him to do the job, ie to edit the content of a few web pages only.

In this example, we are going to create a simple CMS in PHP without the use of MYSQL, POSGRESQL or any other databases.

Simple Login Form

In a form, I added 2 fields, the username and password. The form is to post its data back to the same page so that we can verify whether the username and password fits with a preset value. The html code for the form is shown below:

<form method=”post” action=””>
<table width=”400″ border=”0″ align=”center” cellpadding=”2″ cellspacing=”2″>
<tr>
<td>Username: </td>
<td><input type=”text” name=”username”></td>
</tr>
<tr>
<td>Passwd: </td>
<td><input type=”password” name=”passwd”></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”submit” name=”Submit” value=”Submit”>&nbsp;&nbsp; <input type=”reset” name=”reset” value=”Reset”>
</td>
</tr>
</table>
</form>

Once the username and password are verified, a username session will be triggered to remember that the administrator has logged into the system. We will prompt the user if they enter the wrong details.

if (isset($_POST[‘Submit’])) {
if (($_POST[‘username’] == ‘admin’) && ($_POST[‘passwd’] == ‘yourpassword’)) {
$_SESSION[‘username’] = ‘login’;
}
else {
echo “<b>You login details is not correct. Pls login again</b>”;
}
}

If everything goes well as expected, a quick menu will be displayed. The menu consists of a few links to the files that are editable. In this case, the links are pointing to the home and contact us page. There is also a link to logout from the system.

if ($_SESSION[‘username’]==’login’) {
echo “<p align=’center’>
<a href=”?file=../index.html”>Home Page</a><br/>
<a href=”?file=../contact_us.html”>Contact Us</a><br/>
<br/>
<em>Click on the links above to edit the files.</em><br/>
<a href=”?logout”>logout</a></p>”;
}

Creating Start and End Points in the HTML Files

Before we can start editing the content, we have to tell the CMS which part of the content is editable. In order to do that, we need to create a unique marking in the HTML file. The HTML code for my home page may look like this:

<html>
<body>
<div class=’header’>
This is my header
</div>
<div class=’main’>
Contents written here can be edited
</div>
</body>
</html>

If I want all the contents within the <div class=’main’> to be editable, I need to add my own unique code just for the sake of marking the editable region. So the new HTML code might look like this:

<html>
<body>
<div class=’header’>
This is my header
</div>
<div class=’main’>
<!– EDITABLE –>
Contents written here can be edited
<!– EDITABLE –>
</div>
</body>
</html>

The Decoding Engine

What we have done in the previous step is really to encode the HTML file with the <!– EDITABLE –> tag. We now need to decode it. Thanks to the PHP explode function, we can now strip out the <– EDITABLE –> tag and get the contents.

if (isset($_REQUEST[‘file’])) {
$fc = file_get_contents($_REQUEST[‘file’]);
$text = explode(“<!– EDITABLE –>”,$fc);
echo “<form method=’post’ action=”><textarea name=’content’>$text[1]</textarea>”;
echo “<p><input type=’hidden’ name=’file’ value='”.$_REQUEST[‘file’].”‘ />
<input name=’submitUpdate’ type=’submit’ value=’Update Page’></form>”;
}

The variable $text is an array. $text[0] and $text[2] corresponds to the content before and after the tag <!– EDITABLE –>. Therefore $text[1] is the editable text we want and we display it in the textarea.

Capturing the Edited Content

The edited content is passed again back to the same page via the $_POST variable. If the submit button has been clicked, we will update the home page content. The way we do it is similar to how we strip the <!– EDITABLE –> tag using the explode function. Because we are actually writing to a file, not to a database, we need not add escape characters to the content. PHP version 4.x has magic_quotes turned on by default which happens to escape all our $_POST variables. So if magic_quotes is turned on, we need to unescape the $_POST variables.

if (isset($_POST[‘submitUpdate’])) {
if (get_magic_quotes_gpc()) {
$_POST = array_map(‘stripslashes’,$_POST);
}

$fc = file_get_contents($_POST[‘file’]);
// truncate file
$fw = fopen($_POST[‘file’], ‘w+’);
$text = explode(“<!– EDITABLE –>”,$fc);

$newText = $text[0].”<!– EDITABLE –>”.htmlentities($_POST[‘content’]).”<!–EDITABLE ->”.$text[2];
if (fwrite($fw, $newText)===FALSE) {
die(“Cannot write to file.”);
}
fclose($fw);
exit(“<div><span class=’redText’>The file has been updated. Click <a href=\”index.php\”>here</a> to go back to admin page.</div>”);
}

In the function “file_get_contents”, we get the contents of the file to be edited and strip them into 3 parts again. Noticed that I need to clear my original file with a fopen($_POST[‘file’], ‘w+’).

Now, we rejoin the 3 parts back again. Our edited content is actually in $_POST[‘content’] but it might consists of some illegal characters which has certain meaning in PHP. So we need to convert them into the HTML equivalent using the htmlentities function. We then close the file.

The codes may seem complicated but the logic should be simple enough. One thing to note though is that the content is displayed in a textarea. This means that the user has to put in their own html tag such as <b>, <p> …etc if they want any text formating. You can also add in a HTML editor to make the text formatting easier. I actually used fckeditor with this content management system in my client’s website.

The full source code at my website – PHP CMS.

Like it.? Share it:
Tags: ,

9 Responses to How to create a simple CMS without DB access

  1. Roger

    Thanks for the post, but your link is broken.

  2. bpeh

    tks for pointing that out. it is now fixed.

  3. Frank

    I like your solution and tried it. Logging works, but for some strange reason the <a href='?file= part doesn't work and always returns me to the login page…

    any suggestions?

  4. Frank

    session_start() was missing from the top of my .php file
    ahhsss It works! Nice script, does the job in so little lines!

  5. cactus

    Hi I tried out your code and the login is fine but when I click on a page to edit it doesn’t give me the option to edit it. I copied your code exactly and changed the filenames which are correct.
    Any ideas?

  6. Fordinary

    That log-in method is completely insecure, since both the username and password are plain text.

  7. metalsniper

    i have done everything right i can even edit the page. But i started using CKEditor and every time i Update the webpage the codes shows instead of formatting the text

  8. andrew

    i cant even load the page probably because of an error.
    can you check the code please ?

  9. DZ

    I already have a secure log in for my site, and I have been trying to implement this method to create a CMS for my site, but the page is completely blank each time!