How to allow customers to edit their page content?

  Ben Avery 10:39 22 Feb 2006

G'day all,

I've been designing a few websites for a while now but have decided I want to learn how to make a section of the page editabel by the customer.

E.g. I create a website using XHTML and CSS. All pages follow the format below:


Head Section (Not editable)


Body Section:

Div 1: Header (Not Editable)

Div 2: Navigation Bar (Not Editable)

Div 3: Main Content (Customer Editable)

Div 4: Footer (Not Editable)


As you can see, I want the 3rd div (Main Content) to be editable for the customer, so they can change the text and maybe replace images with newer ones.

I will be creating an ftp location for each customer to allow them to upload and delete their page images and the "content" file (htm or txt) which is pulled across from the server (the site pages use Server Side Includes or SSI to pull the "content" file into the page so that they do not have access to destroy the css of page layout). Once they have uploaded a new image they may want to edit the "Main Content" section to include it.

There are a couple of ways I have thought to attempt this (but as I've done nothing like it before, I am as ever, open to your more experienced suggestions!). The options I wish for them to have are to be VERY limited.

Option 1: Have a simple editor created which allows the user to edit the page "Main Content" text and select a picture from their ftp folder which they can choose to be either "left" or "right". I have included the relevant classifiers in the css file to float the image. i.e. the css sheet uses something like the following:


img.left {float:left; margin:0 10px 10px 0;}

img.right {float:right; margin:0 0 10px 10px;}


Therefore when a user clicks on "Insert Image" they are directed to the ftp location and choose the image. They then select "left" or "right" and save the page (a preview would be good too!)

Option 2: The user simply types the text and inserts the images in a similar way to above (selecting "left" or "right" also) and the htm code is generated below (to XHTML standards including all end tags e.g. p> /p> and img />) for them to copy and paste into a .txt file. The SSI can then simply include this new text file and the code will be accurate.

Option 3: Something thought up (likely far more simple too!) by one of you guys or galls!!!

Any thoughts on this would be really welcome as I'd like to allow my customers to simply edit their own pages with no technical knowledge required, thereby saving them my maintenance costs, and no worry for me of them really messing up the pages and it reflecting badly on me!



  harristweed 13:49 22 Feb 2006

I think the easist way to achive what you want, is to have as fourm member suggests, a form that will allow photos to be uploaded along with some text. The text can be stored in a database of a flat text file.

I have something similar on my site.

click here

If it is what you want and you have PHP i'll let you have the code!

  djinn 15:26 22 Feb 2006

There's this which might suit....

click here

  James Herrington 19:25 22 Feb 2006

I'm not an expert on this however i know you can use the loadVariables object in flash to get a variable from a text file. This is very easy to do and you can also save HTML to the variable and setup a dynamic text box that allows HTML rendering so the user can have hyperlinks in there page.

As for the image you can use a scroll pane component and load an image path from a text file which the user saves. The actionscript would look something like the following.

sxcrollpaneinstancename.contentPath = imagepath

To complete the entire thing you would need a flash file containing a dynamic text box which has the variable usertext assigned to it, a scroll pane with the instance name user_picture and a text file containing the following

&usertext=user text here
&image_path=image path here

The actionscript for the first frame would be

loadVariablesNum("textfile.txt", 0);

This should do it however if you have any questions please email me on [email protected]

click here

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

OnePlus 6 review

Razer's Core X GPU enclosure hands on review: It's cheaper, bigger, and even works with Macs

MacBook Pro keyboard issues and other problems

E3 2018 : dates, conférences de presse, billets et plus