CMS/site project status

1149 lines of code so far. That's not including and database file initialization code or other things such as the css for the public site.

Completed ("somewhat tested"):
- Add/edit main page links
- Add/edit/delete main page basic html content blocks
- Visual template system and the final visual look of the site.
- Public index.php looks "done" visually. The main links work and display all basic - content blocks when clicked (ordered by 'zorder'). It's just lacking sub links (articles and galleries).

To Be Completed:
- Delete main page links (I haven't decided if I want it to do a recursive deletion of all content associated with it or not).
- Add/edit/delete articles (aka. multipage basic html content blocks).
- Add/edit/delete image galleries.
- Make the admin pages secure.
- Testing, testing, and more testing!

I've been thinking of not bothering with an image gallery aspect. The multi page articles would have similar abilities to a photo gallery. The only difference is that it could not support the thumbnail->large image functionality.

Edit: I was thinking of adding a global error handler that pipes all errors into a 50 - 100 item large database table. This table would be viewable from one of the admin pages. It would save a lot of effort debugging second-hand problem information.



Here is a sample of the site:

Accessing page content from the front and back-end of a site

As I'm programming this database driven website, I've come into a few irritating little issues. Today I'll talk about a few methods to access page content (images) from the back-end.

I've created a way to create and edit page content with a browser based WYSIWYG editor. The problem is after the first time the data is submitted to the server, all images are set with a path that now only works from the root directory of the website. So when a user tries to edit some page content with images in the WYSIWYG editor they see broken images (aka. "The dreaded Red X").

I thought of a few ways to fix the problem. I'll also mention which method I actually used in the end.

1. Have the PHP script handle the path conversions. This would mean two functions or so with a few replacements using regular expressions. So when the fetched data is sent to the user all of the html image tags are modified. When or if the user sends the data back they are remodified (excluding any new images the user is submitting). This is probably the safest bet.

2. Create a synaptic link if the server is on Linux/Unix. For example if the site root is www/, the site editor is in www/editor, and the content is in www/images. You would create the synaptic link in the www/editor directory linking to www/images directory. Probably the easiest solution by far, but I want my site to work on both Windows and Linux/Unix servers if possible. I'm developing the site on Windows, so I did not try this, but I'm pretty sure it would work. I also know that windows has a way to create similar links, but it seems like a pain to use so I didn't bother.

3. Use JavaScript to handle the temporary conversion. This is the route I picked. I was just looking for something quick that worked and this was it. Well it wasn't exactly quick because I spent a few minutes researching what function I needed to use and exactly how it works. The tutorials I saw were lacking...

Here is an example of the code that will do the initial edit, so the user can see the images in the WYSIWYG editor:

function fixImagePaths(textAreaId)
{
  var tempHtmlData = document.getElementById(textAreaId).value;
  tempHtmlData = tempHtmlData.replace(/(<img\s.*src=")(images\/[^"]*"\s.*>)/gi, '$1/../$2');
  document.getElementById(textAreaId).value = tempHtmlData;
}

The KEY problem that took me a few minutes to figure out was that the first parameter (the regular expression) in the replace function can't have any type of quotes around it. If you've never heard of regular expressions, I highly suggest that you read up on them. They are extremely useful in a multitude of applications. Anyways, what that function does is take data from a wysiwyg html textarea and search through the whole thing for img tags. When it finds one that has a src directory that starts with "images/" it replaces it with "/../images", this gets the browser to jump back a directory to find the right path to the image folder.

I have this function execute on the body onload event. I'll also have a second similar function execute on the form onsubmit event. This solution seemed a bit easer then the php one. Well that's it for now!