Tick A Radio Input Element By Clicking On The Text

Have you ever wondered how you can tick a radio input element by clicking on the text near of it. You can try this out if you go to www.primalskill.com/en/contact and click the text of the radios.

This could be done if you are coding your sites by W3C standards and using the label element proprely. “The Label element is used to specify labels for controls that do not have implicit labels” (w3c.org) and using the label element’s for attribute correctly.

“The for attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document.” (w3c.org)

If you associate a label with a radio or a checkbox element then the effect will be like mentioned above.

Example:


<input type="radio" name="gender" value="0" id="gender_0" /><label for="gender_0">Male</label>
<input type="radio" name="gender" value="1" id="gender_1" /><label for="gender_1">Female</label>

By clicking on the text Male or Female it will select the associated radio element. (You can use this with checkbox elements too)

Ryan Singer Talks About Usability of Sign-up Forms

Worth watching…

ScribeFire

I just installed ScribeFire, a blog editor extension for Firefox. Check out www.scribefire.com

PHP: The === Comparison Operator

I have to write this down, because I saw so many times developers making this huge mistake of not evaluating correctly variables. I’d like to show this mistake through an example:


function check_login($username) {

$login = 'gooduser';

if ($username == $login) {

return true;

}

return 'no access';

}

$ret_val = check_login('a user');

if ($ret_val == true)  {

echo 'access granted';

}

else {

echo 'forbidden';

}

Now what’s wrong with this code? There is a huge bug in it, because we incorrectly evaluating the check_login function’s return. The bug is the if ($ret_val == true) because this checks only if two variables ($ret_val and true) are equal, but it doesn’t checks if the two variable are actually identical.

Identical means that are equal and they are of the same type . In PHP strings evaluates true if it contains any character. The check_login function returns ‘bad’ if the user name is incorrect, therefore it’s not enough to only check if the return value is equal. We have to check if they are of the same type. This is done with the triple = operator (===)

This is a correct version of the above example:


function check_login($username) {

$login = 'gooduser';

if ($username == $login) {

return true;

}

return 'no access';

}

$ret_val = check_login('a user');

if ($ret_val === true)  {

echo 'access granted';

}

else {

echo 'forbidden';

}

So be careful how you evaluate your variables, because you will find yourself letting unwanted people to see your restricted pages.

Turn Autocomplete Off For HTML Input Tags

It’s very annoying when the autocompletion is on in your browser and you develop a website where you have to sign up a user. Of course on that form there are different text fields, username field, password field. And it is very very annoying that the autocomplete ’stuff’ fills these textboxes with your sensitive data.

From a web developers point of view it’s good practice to clear all the text boxes when the form is shown. BUT (there’s always have to be a but) of course when we want to do this we face with browser incompatibilities (again!). Let’s see IE and Safari support autocomplete=”off” attribute in html input and form tags, but not Firefox. This is a proprietary attribute, so it fails in standard’s validation.

It seems that Firefox is the black sheep in this case, because it always runs this auto complete after the whole page was rendered. So it’s useless to set a html input’s value to nothing. (value=”")

One solution to this problem is with Javascript. The idea is to load a Javascript function which sets a specified input’s value to null after the whole page was rendered. The code below does this thing. You have to set the tag’s id and it will do the rest.


var genericAutocomplete = {

off : function(srcInputID) {

var tag = document.getElementById(srcInputID)

if (tag) {

tag.value = '';

}

} //end of turnOff

} //end of genericAutocomplete

To load this after the page is rendered we call the setTimeout function like this:


window.setTimeout("genericAutocomplete.off('input_id')",50);

We have to use setTimeout to load this function after the page is fully rendered by Firefox. Loading in the window’s onload event just doesn’t work.

And as a bonus our pages now validates too. :)

Setting up Zend Framework from A to Z Step 1

The main problem with Zend Framework that there is no centralized documentation how to actually set up the framework to use with web applications. There is documentation for the different components and a primitive introduction on the recommended file structure and how to set up the front controller. So my aim is to write a generalized framework setup tutorial. Still learning the framework, I will write down each step to set up a web application.

Step 1:

I’m guessing you already downloaded Zend Framework from their website. Installing it is straightforward, although there are different methods/preferences. I prefer to use a centralized location where the framework is available to all of my projects and not to copy the scripts in each project directory. This makes updating the framework very easy.

When you download the archive file you find a library directory in it. That’s what we’re interrested in,the rest are unit tests, demos, etc.

Simply choose a directory outside your projects directory. For ex. my projects directory is server/www/ also my php and apache folders are in server/php/ and server/apache/. So logically I chose server/frameworks/ for my frameworks directory (I use other frameworks too). I created server/frameworks/zend/ and copy it the library directory, it looks like: server/frameworks/zend/library/ the path to the actual script files is server/frameworks/zend/library/Zend/ which you can find in the library folder.

Next I edited my PHP include_path in the php.ini file. I added this path “Server/frameworks/zend/library; …”

OK. The framework is set up. Now we have to create a project.

Step 2

Let’s say the project is called my_project. I like to set up a virtual directory for each project I create. So I edited httpd.conf file in my apache/conf folder.

This is a basic setup for the general projects folder:

NameVirtualHost *:80
<VirtualHost *:80>
ServerName 127.0.0.1
ServerAlias localhost
DocumentRoot “Server/www”
</VirtualHost>

And this is for the my_project (assuming the directory is server/www/my_project)

<VirtualHost *:80>
ServerName my_project
DocumentRoot “Server/www/my_project/public”
DirectoryIndex index.php
<Directory “Server/www/my_project/public”>
AllowOverride All
Allow from All
</Directory>
</VirtualHost>

Note that my_project/public is the only directory available from the Internet. This I will write in detail in the next post.

Note. I use windows xp as my main development OS. So i have to insert a new route in c:\windows\system32\drivers\etc\hosts file. I inserted a new line: 127.0.0.1 my_project

So when I type in the browser’s address bar http://my_project then it routes to server/www/my_project/ folder and from there (because of the apache DocumentRoot set up earlier) to public folder.

I will be continuing this post very very soon. Until then enjoy.