How to Make your own Content Management System (CMS)

I have recently had the need to use CMS for one of my sites. In the past I have used CMS Made Simple which is a free and very good Content management system. However, in this case, I need something alot more simple and I dont want to transfer everything over to the CMS Made Simple Package... So I decided to create my own.

I must say that this is a work in progress; firstly at the time of writing (06/09/2008) this code is not secure - the nature of CMS means that you are potentially opening up your web-server to malicious attack (and I have yet to implement security).

The Requirement

The basic elements of a CMS system are the ability to edit text and the ability to edit images. This means that somehow you need to be able to input text directly onto the webpage, and this text needs to be uploaded to your web server. The easiest way to do this is with php.

Using CMS to Edit Text

The foundations

First of all I created a blank html page that contained a div element (with a border to make things easy to see). Next I created a text file containing the information that I wanted to display in my div element:

My Div Element


<div style="float: left; border:1px solid; width: 400px; height: 400px; padding: 10px;">
<h2>A Simple Div</h2>

<p>

</p>

My text file


Some text
some more text
and so on...

Displaying the text file on the webpage

Now I needed to include the text from the file inside my div element, I achieved this with the php command "fgets" (anything after // is notation and will be ignored by the PHP engine, but please note that where there is a line break, you will need another //):


<?php 

$filename = "edit/text.txt"; // This sets the name of the text file and assigns it to $filename so it can be called later on

$fp = fopen($filename, "r") or die("couldnt open $filename"); // this opens the file for reading (hence the r)

while (!feof($fp)) {

$line = fgets($fp, 1024); // This instructs the php engine to read 1024 bytes of data until it hits a line break or the end of the document

echo $line."<br />"; //This prints the contents on screen and includes appropriate line breaks

}

?>

Editing the text-file

So now I can read the contents of a text file and include this into my html document. The next step is to make this text editable. This needs to be done in two stages; firstly we use "file_get_contents" to once again read the text from the file, then we display it on screen using the textarea element:


<?php

$file = file_get_contents ('text.txt');

?>

<form method=post action="save.php">

<textarea name=one

  value="" rows='15' cols='50'> <?php echo $file; ?></textarea><br>


<br>

<input type=submit>

</form>

This will display as follows:

Uploading the edited text

Now we have a platform whereby we can display and edit the text from the file. So the next thing we need to do is upload the file. To do this we create an external php script called save.php with the following code:


<?php

 

$fh = fopen("text.txt","w"); //opens the file (w means the file will be over-written which is what we need)

fwrite($fh,$HTTP_POST_VARS["one"]. //this writes whatever was in our form textarea to the file

  "\n");

fclose($fh); //closes the session

header ("Location: http://www.ds32.com/read/index.html"); //redirects us

exit(); 

?>

So basically we edit the text in the textarea, click on submit and the form sends whatever data is in the textarea to save.php - which then opens our text file for editing, saves the data it received from our form to the file and closes it. When we go back to our home page, the contents of the text file will be added into our div and there we have a very simple content management system.

Forcing the page to refresh

One issue with this code is that once you update the text file (and therefore the content in the div element, when you go back to your homepage, the browser will use the cached version of the page and therefore wont immediately display the updated text. Similarly, if you go back to re-edit the text, because of browser caching the current text may not be shown.

To get round this problem we can use some javascript that will force the browser to download a fresh copy of the page if it has changed (this code should be placed after the head of the document and before the body:


<script language="JavaScript"><!--

function forceReload() {

    if (document.images)

        location.replace(location.href + '?' + (new Date()).getTime());

    else

        location.href = location.href + '?' + (new Date()).getTime();

}



var lastTime = location.search.substring(1) - 0;

if ((new Date()).getTime() - lastTime > 1000)

  forceReload();

//--></script>

Using CMS to Upload Images

Coming Soon.

Adverts