Article - How to create editable websites in PHP.

You are seeing this very light version of the page, as you are using an outdated browser!

Onlinetools.org is done in XHTML 1.0 and supports CSS 2.0, please upgrade your browser if you want a better version of this site.

Thank you, please help us developers keep up with the industry rather than patching our code for outdated applications.

How to create editable web sites in PHP

written by:Christian Heilmann on 26.04.2002

Table of contents:

Introduction, what is this about?
Separation is necessary
The template with the script
What the script does
Adding secured interactivity
Goodies and limits

Introduction, what is this about?

This short tutorial explains how to create webpages that can be edited by someone directly on the server. This person does not need to have any scripting knowledge. To create a page like this let's use PHP, although the same stunt is possible in Perl or ASP.

But first of all, what is the neat thing about editable pages? Well, whoever worked freelance for others, knows how tiring it can be to get an email or a call, just because there is a full stop in the page that should not be there. Creating a site for a customer also means caring for him, and by providing him with an editable page, you took a big step to help you and him:

He does not need you for minor changes.
You both do not need to fiddle with FTP and edit-tools to make the small changes he requested.
You have your mind free to focus on improving the site, rather than doing copy tweaks.
The customer has a "feeling" for his site, he changes content, adds news, it's his baby.

Enough of the chit chat. How to do it?

Separation is necessary

The key to create editable websites is to seperate content from display. This is an absolute must, here or when you create pages from a database or from XML.

What you do is create an HTML document with all the design definitions, like tables, fonts and colors. Where the copy text is supposed to be, you add a small php script.

You put the copy text in a ".txt" file with a catchy name, and save your HTML document as a php file for the time being.

Now, what our script will do is to read the .txt document and print it in the HTML Template.

Ok, that displays it, but it does not make it editable yet, right? Well, wait on, you'll be surprised how easy it is.

The template with the script

Let's take this as a demotext:

mytext.txt

This is my cool content, I am a born copywriter.

Believe me!

This is our demo template.

mypage.php

Now save both to your server and set the file attributes of the .txt file to 666, to allow script to manipulate it.

To see it in action, click here.

Now, what does all this mean?

What the script does

1    $filelocation = "mytext.txt";
2    if (!file_exists($filelocation)) {
3    echo "Couldn't find datafile, please contact administrator!";
4    }
5    else {
6    $newfile = fopen($filelocation,"r");
7    $content = fread($newfile, filesize($filelocation));
8    fclose($newfile);
9    }
10    $content = stripslashes($content);
11    $content = htmlentities($content);
12    $content = nl2br($content);
13    echo $content;

Line 1 defines the name of the text file, in line 2-4 the script checks if the file is there and displays a message, when there is no datafile.

If there is a datafile, then the lines 6-8 read it's content into the variable $content.

Lines 10-12 manipulate the content, the backlslashes php adds to quotationsmarks are removed, umlauts and special characters are replaced by their html equivalent and every linebreak becomes a <br />.

Now, we're halfway there, we only need to add the tool that changes the content of the textfile.

Adding secured interactivity

What we need to add some security is a password-check so not anyone can edit the file, and we need a form to display the text.

The trick is just to change line 12 and 13, and write a <textarea> tag around the display:

0    if ($_POST['pw']!="") {$pw=$_POST['pw'];}else{$pw=$_GET['pw'];}
1    $newcontent=$_POST['newcontent'];
2    $filelocation = "mytext.txt";
3    if (!file_exists($filelocation)) {
4    echo "Couldn't find datafile, please contact administrator!";
5    }
6    else {
7    $newfile = fopen($filelocation,"r");
8    $content = fread($newfile, filesize($filelocation));
9    fclose($newfile);
10    }
11    $content = stripslashes($content);
12    $content = htmlentities($content);
13    $pass="password";
14    if (!$pw || $pw != $pass){
15    $content = nl2br($content);
16    echo $content;
17    }
18    else {
19        if ($newcontent){
20            $newcontent = stripslashes($newcontent);
21            $newfile = fopen($filelocation,"w");
22            fwrite($newfile, $newcontent);
23            fclose($newfile);
24            echo 'Text was edited.<form><input type="submit"
            value="see changes" /></form>';
25            }
26                else{
27                echo '<form method="post">
28         <textarea name="newcontent" cols="50"
                rows="15" wrap="virtual">';
29                echo $content;
30                echo "</textarea>
31                <input type="hidden" name="pw"
                value="'.$pass.'" />
                <br /><input type="submit" value="edit" />
32 </form>';
33                }
34        }

HUH??? Calm down, it looks complicated, but it isn't...

In line 13 we define the password, line 14 checks if there was a password submitted, and if it was the correct one.

If there is no password or a wrong one, the text is displayed in lines 15-16 (that was the old script).

Line 18 requires the correct password.

Line 19 checks for a new content to be stored in the text file. If there is a new content, lines 20-24 overwrite the old textfile, display a message that the text was edited and show a button to go back to the page.

If there is no new content yet, the lines 27-32 display a form with the textfile in a editable textarea. When this form is submitted, it submits the password and the new content to trigger the change in lines 18 and 19.

That's all you need! 35 lines of code and editable pages are not a myth anymore. To edit the page you simply add a ?pw=password to the url and you will get your form. Try it here.

Now all that is left to know is the pros and cons of this trick.

Goodies and limits

Ok, now you know how to create a page that can be edited in PHP. This trick is no rocket science but is has some advantages:

It does not require any database
It's all in one script - displayer, editor and content change routine
It's small and easy to include
It's safe, as the password is only in the document and never printed

Limits:

This trick only allows people to enter copy that is plain text and do linebreaks. Any other layout functionality has to be coded seperately, or if you remove the "$content = htmlentities($content);" line you can allow people to use HTML in their text.

Furthermore it can get nasty when more than one user writes in this editor at the same time, the text can get truncated or storing it might not be possible.

To download the files of this example as a zip click here.

Search:

Font:

Text-colour:

Background: