Loading...

The blog is being migrated and merged with multiple Imphenzia blogs so the format and content will be inconsistent for a while.

Protecting the site & AJAX

It's been  a long time since I've spent so many hours on something producing such a small visible result. First of all I had to learn all about protecting PHP code and form fields that are inserted into the database when logging in with mysql_real_escape_string and the joys of some servers having magic_quotes_gpc enabled and when stripslashes should and shouldn't be used. I've finally protected the code enough from malicious visitors - I don't want to end up like the old imphenzia forums once were if you remember those days. Since I already developed the login / logout / remember me features of the new sites yesterday, the 4 hours I spent on just protecting the code was just plain boring - but not wasted as the result is good and I learned something very useful.

Originally I used a javascript called "Live Validation" to verify the contents of form fields as you type in them and the result was quite cool - what it didn't support, however, was verifying on the fly that a username already existed or if invalid characters were entered. A friend of mine advised me about AJAX (Asynchronous JavaScript and XML) and this is something I find very exciting (sadly enough!). What AJAX enabled me to do (amongst a million other things) is to verify if a username exists in the database as a user is typing into the form field. If the user enters a username while registering that already exists, the web page will warn you that the name is taken - this all without submitting the form or using the tedious back button etc. Now then you might think - why waste so much time on learning this stuff as I may never have a huge amount of registered users on imphenzia.com - but my reply is that learning this stuff is extremely useful as fast and intelligent websites is the future.

I found out that when troubleshooting javascripts, FireFox with the extension 'firebug' is very useful for debugging when things go wrong. Firebug will display error messages and scripts neatly and in my case the AJAX feed that is returned. At the same time, I must admit that I very much prefer IE as a browser - mainly because it renders web pages much nicer and - and also because so many sites look incorrect in FireFox... and if you are a true FireFox fan you will probably explode now and say that all these sites look horrible because they were incorrectly developed, the fact is that they still look horrible regardless of who's fault it is hence me prefering IE :)

Well, I still have some work left to do with the validation method tomorrow and the easter weekend is nearly over. Once validation is finally taken care of I can move on to more fun stuff on the site such as the music section.

Themes and registration

Music Site 1
I've completed the theme functionality on the new site. Changing the look (and width) of the site is extremely easy and fast. The screenshots that you can see demonstrate this functionality although changes to templates are only minor for testing - in the end result the themes will be quite different from each other.

Music Site 2In addition to themes I've completed a user registration process with live java validation of the form fields as you type. This will simplify the process making sure that your passwords match up and that your address is valid etc. The registration process also features validation by e-mail to ensure you don't get unsolicited spam.

 Finally - the most important thing I've learned so far is KEEP YOUR CONTENT AND DESIGN SEPARATED. This is the best way to work as changing a theme or page content is super simple once the framework is in place. It's 4:14am now so I'm going to eat something and watch some TV now... then off to sleep.

Thoughts about fixed width vs. liquid layout

I'm in the process of planning the new Music and Games sites and I am currently batteling whether to use "fixed width" rather than "liquid layout" on the site. Today I use liquid as you can see the content adjusting automatically to the width of the browser window, but you can achieve better design (in my opinion) and also better readability with fixed width of the page. Statistics from a 2006 (yes I know, old info) show that about 60% are using a resolution of 1024x768 and up and only about 17% use the resolution 800x600. I would like to use a width of 960 pixels of the new web sites. I may do some testing with what I feel may be the optimal solution, that is a maximum width of 960 pixels but a fluid layout to accomodate for users still using lower resolutions. More on this topic later.