Blog

ExtJS and Sencha Touch Themes and Templates

Different languages in one place

Mar 16, 2009 | English | By | 2 Comments | Leer en Español

Sometimes we need to create multilingual applications or websites, in this chapter we will see how to detect the language of the browser using PHP and allow the user to change the language with a ComboBox.

Different languages in one place
Author: Crysfel

I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

Resources

For this chapter you need to download the resources, unzip it and copy the files to the Web server we have previously installed in our computer, inside of the folder “language” that we created in the previous chapter.

When you execute the file “multilanguage.php” we can see that it is the exact same example of the last chapter, the only difference is that now we have a ComboBox with some languages.

Detecting the browser language

Let’s go ahead and edit the file “multilanguage.php”. At the beginning of the file we will write the necessary code to detect the language of the browser, we can do this by reading the value of the variable SERVER like this:

$lang = $_SERVER['HTTP_ACCEPT_LANGUAGE'];

With this instruction, in the variable “$lang” we have the browser’s language in formats like: es, en, it, fr, etc… but if the browser has the language configured to a certain country the value of the variable “$lang” is different, for example spanish from Mexico would be es_MX, spanish from Chile es_CL, from Argentina es_AR, english from Great Britain would be en_UK. What we need to do is to retrieve the first two characters of the variable “lang” like this:

$lang = substr($lang,0,2);

After doing this we need to import the file with the appropriate language to the HTML document like this:

<script type="text/javascript" src="../ext-2.2/locale/ext-lang-<?php echo $lang; ?>-min.js"></script>

Remember you have to import it after the file “ext-all.js” in order to overwrite the language that Ext JS has by default; after saving the changes to the document HTML you can test them by updating the browser where we have the example. In the video we show three different browsers with different languages.

Changing the language using ComboBoxes

When you select a language from the ComboBox the page reloads and sets the variable “lang” with the language selected. For this chapter we won’t pay attention on how that is done, later on I will explain how to add events to the elements of the document, for now we will focus only on the language detection.

We need to validate if we’ve received the parameter “lang” since it will be very important because the user has selected a language in the ComboBox. If we have the parameter “lang” in the request, then we will import the language of the translation requested otherwise we will import the language of the browser. In PHP code you will have to do this:

if(!isset($_GET['lang'])){
            $lang = $_SERVER['HTTP_ACCEPT_LANGUAGE'];
            //es, es_MX, en, en_UK
            $lang = substr($lang,0,2);
}else{
            //If the user has selected a language from the ComboBox
}

The next step is to retrieve the parameter “lang” and see if it contains a valid language, in this case we will verify that it contains some of the five languages we will use in this example. To do this I will use a switch block.

$lang = $_GET['lang'];
switch($lang){
            case 'en':
            case 'es':
            case 'it':
            case 'pt':
            case 'ro':
                        break;
            default:
                        $lang = 'en';
}

If the variable “lang” contains en, es, ro, it or pt, it means that the value of the variable is correct, therefor we don’t have to do anything else, but if it doesn’t contain any of these values it means we have an error and we will assign a value by default, in this case will be english (en).

Conclusion

The example we just finished it is enough to make our applications multilingual, as you can see it was very easy. If you have any questions or suggestions don’t forget to leave a comment.

2 Responses to “Different languages in one place”

Leave a Reply







Updates

RSS

Subscribe to our feeds to receive updates of our newest posts and free tutorials.

Site search

Maybe we have what you need, would you like to search first?

Donations

Would you buy me a cup of coffee? I am sharing my knowledge and time with you, help this project grow. Thank you!