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.

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.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!