If this CMS will ever be produced, then it will probably be written in PHP with MySQL as a database back end.  All of this is a rough draft and I can’t promise any idea written here will ever be put in practice but we’ll see how fare we can get?! Here we go…

Basics

The basic structure goes like this: a Widget gives XML, a Panel contains one or more widgets, a Page is a set of Panels.

Widget -> Panel -> Page

Widgets

Widget gives information based on the given options. Each widget has its own format of output.
Widgets produce XML code based on there content, it is possible to read XML code with any type of application.

See following examples:

News widget

• WidgetID
• News item:
  • ItemID
  • Title
  • Text (without HTML)
  • HTML
  • Published datetime
  • Publisher name
  • Publisher ID
  • Category IDs

Category widget

• WidgetID
• Category item:
  • ItemID
  • WidgetID
  • Title

Content widget

• WidgetID
• Content item:
  • ItemID
  • Title
  • Text (without HTML)
  • HTML
  • Published datetime
  • Publisher name
  • Publisher ID

Comment widget

• WidgetID
• Comment item:
  • WidgetID
  • ItemID
  • Name
  • Email
  • Text (without HTML)
  • HTML
  • Website

Menu widget

• WidgetID
• Generates menus from the different pages
• Oriented for web applications

Panels

Panels contain one or more widgets. Panels also produce XML code, possible to read XML code with any type of application.

Sidebar panel:

• PanelID
• Search box widget
• Category widget for news (lists all categories of the news widget)

News panel:

• PanelID
• News widget (lists latest news)

News item panel:

• PanelID
• News widget (displays single news item)
• Comment widget

Menu panel:

• PanelID
• Menu widget

Page

A page is a set of Panels. Front end reads Page XML, implements the panels as fit. Pages are mainly oriented for web applications.

News page:

• PageID
• News panel
• Sidebar panel
• Menu panel

Pages:

• PageID (unique)
• Page related options

Page panels:  (see news page)

Almost half a year ago I’ve done a face lift for the website of ‘Jeugdhuis de PUT’. It is a youth organization for youth and by youth. I work there as a volunteer since 2006 and I became board member in 2009. This website is again in dutch because its target group is localized in that language area.

The design is build up with only 3 images: background image, header/menu image and rounded corners of the dropdown. If CSS3 would be supported in all browsers, it would take only 2 images. The dropdowns are realized with jQuery and the video’s page runs embed player of YouTube. On the frontpage is something called a Live Feed; it gives you all the posts made to the website. In ‘Kalender’ you get the upcoming activities. The website currently contains more information than ever before: the vision, the rules, information about the active volunteers and the prices. A great amount of work went into the photo gallery, it currently holds more than 1000 pictures.

Also the back-end got an upgrade, I’ve switched from CMS Made Simple to Wordpress. It uses some very nice plugins, some of them also used by the blog you are reading now. To sum up: the standard Akismet for stopping spam, Blogroll-links plugin for the Links page, Google Map Shortcode, Google XML Sitemaps, my own Contactform Plugin and the awesome NextGEN Gallery with the Lightbox plugin.

Plakzuilen.be, the most recent project I’ve been working on. This is a website in dutch for the Flemish area and in the future maybe for the Netherlands. The tool is targeted at the Belgian youth whom tries to promote their gigs via publicity columns or simply ‘Plakzuilen’ in dutch. There seems to exist no exact translation on the word so if anyone can help me out, I would appreciate it. This website should form an overview between the many different regulations and widely spread locations.

It utilizes the MediaWiki software from the Wikimedia Foundation. This makes it possible to build a nice community of youth, youth organizations and municipalities working together on a single project. A wiki page is simple to create, easy to learn and the result gives a nice overview of all the information. For my Flemish readers, just check the page on how to create and edit a page.

In the short period that the website is online, a lot of people have asked me how I came to the idea. Well, the youth in Flanders has never been more active then now. They organize parties and concerts every weekend and every club is full. In their promotional tour, these young people do their best to be noticed between the mayor clubs with professional promotors. In many cases, there is abundant use of the publicity columns, publicity boards and in some cases also on houses, shacks and electricity cabins. The latter are usually illegal. An Internet search for publicity columns had very little result. If there is anything it is an ambiguous explained place with reduced or no rules.

A wiki is an excellent way to collect the various locations and regulations and make them available to the public. Just like the famous Wikipedia, Plakzuilen.be is open for everyone (municipality workers, promotion teams, youth centers ,…). Anyone can add locations and regulations and adapt the information at will.

Before I forget, Plakzuilen.be has also linked into the various available networks online. Check us out at Twitter, Facebook and Netlog. Also Plakzuilen.be is entering at a contest for Youthwork site of the Year 2010, you can vote here. This website has been made possible with hosting and support from Jeugdwerknet.be.

Let’s get started. First we’ll need a domain name of course. You can find them at several places. Don’t buy any hosting at all, just make sure you can change the name servers of the domain. I can help you to get a cheap domain name, please contact me personally for more information.

Next part is to create an account on ZoneEdit.com. ZoneEdit is a free DNS service and domain manager. At first Signup, you can choose for a free trial of  5 zones(=5 domains). I recommend you to use accurate information. You’ll receive an e-mail with your login information. After you login, you can start adding zones, look for the link ‘Add Zones’. Now enter your domain name and click ‘Add Zone’. It will create a default configuration with a MailForward™ so all e-mail traffic will get redirected to your account.

To give ZoneEdit the control over your domain, we need to change the name servers of your domain. Most likely the name servers given by ZoneEdit will be ns4.zoneedit.com and ns8.zoneedit.com, to be sure just just check the box on top of the configuration page. You probably have to ask your provider (where you’ve bought your domain) to do that for you, if not they should explain how you can. When the name servers get set, it still can take a few hours until it is propagated.

In the mean time, we’ll set up our hosting. I’ve chosen My3gb.com to handle this. First of all because of the obvious 3GB of space with FTP access and second because they have support for PHP and MySQL. They are Ad-free. The only limit they have is a 1MB maximum file size, but most files for regular websites don’t reach that size. Now go and register yourself, you’ll receive an e-mail with your information if everything went correct. Next you can login and go to ‘Account settings’. Here you can add an extra domain to this hosting, just fill in your domain here. If you’ve read the extra information given, you’ll notice they ask you to change the name servers to the ones from my3gb. Don’t do this, it is not needed. By adding your extra domain here, My3gb will listen to that domain and show the correct website.

Let’s get back to ZoneEdit now, hopefully the name servers are propagated by now. If not, no worries, it can take some time. We can already set the WebForward and an Alias. First we’ll do a WebForward, just pick the menu item or click on ‘WebForwards’ in the overview. Put in as destination ‘http://www.domain.tld’ where domain.tld is your actual domain. and click ‘Add New’. After this you will be asked to redirect ‘http://www.domain.tld’ to ’http://www.domain.tld’ but that is just ridiculous, just go for the ‘not recommended’ because that is what we want to accomplish. Now ‘http://domain.tld’ will forward to ‘http://www.domain.tld’. Go back to ‘View’ and verify your actions. Next is the Alias (or CNAME) to your hosting. Click on ‘Aliases’ in the menu or in the overview. Enter ‘www’ in the ‘Alias’ box and the URL to your hosting (accountname.my3gb.com) in the ‘Actual Name’ box and click ‘Add New Alias’. Go back to ‘View’ and again verify your actions.

This is basically it, you’ve set up your domain in ZoneEdit.com and your hosting at My3gb.com. Your files can be uploaded to the ftp server of your My3gb account. A MailForward™ can be set via MailForwards, which is self explanatory, a tutorial on setting up your mail account with this will follow soon.

Here is a part of  the applications I  use almost daily.

Netbeans

My main IDE, a essential tool for any PHP developer. Although this open source program is written as a Java IDE, it has native support for C/C++, PHP, JavaScript and many more. It has an excellent project manager to easily manage a lot of websites, this includes support for adding libraries and automatic FTP uploads.

And that is just a fraction of its possibilities, the editor has live parsing, refactoring and terribly good code completion (configurable to your needs). Also version control systems are available like CVS and Subversion and a really nice diff viewer that compares files per line or even per sign.

This piece of software runs on Windows, Linux, Mac OS X and even Solaris. I recommend Netbeans to any Dreamweaver user who works in code mode, give it a spin and if you like it you’ll save a lot of money.

Website: www.netbeans.org

Geany

This tool runs quite often next to Netbeans (or sometimes instead of Netbeans). It is accualy a lightweight GTK2 based text editor and, like many editors on linux, it has syntax highlighting for a zillion languages and automatic code completion. In my latest projects, I’ve used it mainly as a Python editor/debugger and I also took my first steps in C++ with it a few months ago.

It has build-in support for using the compilers installed on your system and you can use any terminal you prefer. Recently they also have released some Windows builds, more info on there website, although I’d recommend using Notepad++ on Windows.

Website: www.geany.org

GIMP

GIMP is the GNU Image Manipulation Program, in other words, the replacement for Adobe Photoshop on Linux. Probably the only, such advanced and well known, open source photo manipulation program. I mostly use it as an addition to Inkscape and recently Scribus to preform web design tasks like creating buttons and simple backgrounds.

Like with Netbeans, you’ll save a lot of money if you are willing to try something different. If you can’t get used to the interface, than check GIMPshop, it is a hack that imitates Adobe’s Photoshop interface including menu structure. Both applications are available on Windows, Linux and Mac OS X.

Website: www.gimp.org

Inkscape

Another essential program for creating graphical designs. It has, for only being at version 0.46, a very nice set of tools on board. Most of the stuff in Advertising is made with this program and also the menu structures you see on this website. This program is a replacement for Adobe Illustrator and is available for Mac OS X, Windows and Linux. The program sometimes has its quirks and you’ll notice it is still not complete.

Website: www.inkscape.org

Scribus

Scribus is fairly new to me. I’ve heard about people using Adobe’s InDesign but didn’t really know what it was. After some research and finding out it is one of the many applications from Adobe that costs too much and doesn’t even run on Linux, I’ve found Scribus as a alternative.

At first, it was a little confusing what the program actually did but then I found the light. Immediately I started trying out both the trial from InDesign and Scribus and tried to reproduce the design of this website. I got stuck in InDesign fairly quick because I needed to install a third party plugin or another program for just doing something essential like pattern fill, I didn’t even found usable documentation on the net. Scribus on the other hand had a quick manual which put me on the right path instant.This gave me enough courage to learn Scribus first and drop InDesign until a later point in time.

Like most popular open source software, this program is available on Mac OS X, Linux and Windows, there is even a build for OS/2.

Website: www.scribus.net

rdesktop

If you need to manage Windows servers from your workstation, this tool is a necessity. It has support for any server reaching from Windows 2000 and NT 4.0 till Windows 2008. The program is very flexible and can be used at almost any resolution. It is all command line, but some GUI clients are around. This program is available from source and is included in most linux distributions repositories. It is also known to build on Mac OS X, but Microsoft has released a RDP client for Mac. An RDP client is included by default on almost any Windows disc.

Website: www.rdesktop.org

VirtualBox

At last we have VirtualBox. An easy way to simulate testing environments on your computer. This is useful for both web developers as for offline application engineers. You can test your program and make or break the system without harming your main operating system. Web developers probably use it mostly to run all kinds of web browsers on a wide variety of operating systems. It is another Sun Microsystems application that fits in the row or Netbeans (see above), OpenOffice.org and MySQL.

Conclusion

I can continue for a long time, talking about the wonderful world of open source. I’ll stop now and give you a chance to explore all of these great projects. In the end, you just have to make the decision which program you like most and think is the right one for the job and go for it. I doesn’t matter if it is open source, as long as you can see it as equals to commercial projects.

Validating of an email address mostly begins with a good regular expression which represents any possible email address. Searching on Google lead me to Ian Dunn, he made a nice list on possibilities an email address can have and gathered all attempts for a regex and tested it on this list. The most accurate, near perfect, regular expression came from Alexandre De Dommelin, which I used in my script.

I wasn’t fully pleased with the regular expression, so I wanted to validate the domain even more. A function in PHP 4+ allows to check whether MX records on a certain domain, just what I needed. Now the validation is perfect, I hope. The function is described below, it should be reusable in any project using PHP 4 or newer, please include credits. Code released under Creative Commons Attribution-Share Alike 2.0 Belgium License

function check_email($email) {
	//Function written by Jeroen Op 't Eynde - XprsYrslf.be
	//Creative Commons Attribution-Share Alike 2.0 Belgium License
	//Pattern from: http://fightingforalostcause.net/misc/2006/compare-email-regex.php
	$pattern = "/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|asia|cat|jobs|tel|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i";
	if (function_exists('checkdnsrr')){
		$domain=strstr($email,'@');
		if(preg_match($pattern,$email) && checkdnsrr($domain,"MX")) return $email; //Linux: PHP 4.3.0 & Windows: PHP 5.3.0
		else return false;
	} else {
		if(preg_match($pattern,$email)) return $email; //PHP 4 or 5
		else return false;
	}
}

Please report any bugs/comments here or via the contact form.

Update:
On debugging a project, PHP threw some notices on the  split() function. It seems to be a deprecated function. I simply replaced it with the strstr() function. Below is the line I took out.

list($user,$domain) = split('@',$email);

You can download it from here.

The code generated in the captcha will only contain alphabetic capitals between A & Z, which is stronger, I’m not a security expert but 26⁶ is a higher number than 10⁶. Instead of the javascript validation, it only uses server side validation. The boxes will get a red border to indicate if there was something wrong in there. This indication can be easily expanded in the source, maybe I’ll add that later. The code comparison will happen in a session, so no client side hacking possible.

Next big thing I did was the email validation check with regular expressions, I’ll talk more about that later. This validation should be foolproof and even checks if the domain has MX records. Check out the function, it should be reusable in any project using PHP 4 or newer, please include credits. Code released under Creative Commons Attribution-Share Alike 2.0 Belgium License

function check_email($email) {
	//Function written by Jeroen Op 't Eynde - XprsYrslf.be
	//Creative Commons Attribution-Share Alike 2.0 Belgium License
	//Pattern from: http://fightingforalostcause.net/misc/2006/compare-email-regex.php
	$pattern = "/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|asia|cat|jobs|tel|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i";
	if (function_exists('checkdnsrr')){
		list($user,$domain) = split('@',$email);
		if(preg_match($pattern,$email) && checkdnsrr($domain,"MX")) return $email; //Linux: PHP 4.3.0 & Windows: PHP 5.3.0
		else return false;
	} else {
		if(preg_match($pattern,$email)) return $email; //PHP 4 or 5
		else return false;
	}
}

I thank Alexandre De Dommelin & Ian Dunn for the regex research.

As I said, I’ve added a few features to the email that makes it more usable for different website’s. List of features:

• Date of Submission
• Server’s Name (or Website’s Name)
• IP address of person using the form
• URL of page containing the form

Like in the original plugin by Eazeenet, you can add <!–contact form–> anywhere you want to put it. But now it puts it exactly where you put the tag and not only below the text of that page.

That’s it. You can see an example of the contact form here. You are free to test it with any hate mail you want. Any bugs and/or features can be reported as a reply to this post or via the contact form, of course.

Fortunately, there was a simple plugin that solved this quickly:  XHTML to XML plugin. You can find more about the above issues on that page. For use in this website, I added 2 lines of my own, to turn onclick=”this.target=’something’”  in  onclick=”this.target=’something’”.

<?php
  ...
  $xhtml[5] = '/target="([_A-Za-z]+)"/';
  ...
  $html[5] = 'onclick="this.target=\'$1\'"';
  ...
?>

Thanks and credits go to John Kilroy.

Apparently we used max-width (and max-height) on the image in a table ‘td’:

table td img {
max-height: 255px;
max-width: 345px;
}


This piece of code won’t get applied by IE8, so it seems…
But google found the solution right here, thanks to the forum user AsraiLight.
To let IE8 apply the max-width/max-height, you have to use a fixed table layout:

table{
table-layout: fixed;
}


This made it look like it is supposed to: