5

Estou desenvolvendo um WebApp utilizando o Codeigniter e preciso que tenha vários idiomas, no PHP tranquilo, meu problema é como organizar as traduções dos plugins Javascript.

Exemplo, tenho na aplicação plugins como DataTables e Datepicker e ambos tem traduções que vem da pasta do Bower, mas como puxar dinamicamente usando minha variável PHP que muda o idioma no sistema?

Em muitos sistemas notei que tem váriaveis globais em JS que são colocadas no head com as traduções. Existe uma técnica para trabalhar com isso?

1 Resposta 1

2

Em muitos sistemas notei que tem váriaveis globais em JS que são colocadas no head com as traduções. Existe uma técnica para trabalhar com isso?

Que fique claro: isso aqui não é um tutorial. Vc já deve ter noção do framework, e eu apenas vou exemplificar a passagem de uma variável da $_SESSION para o JavaScript usando as ferramentas nativas do CodeIgniter. Também não me preocupei muito com segurança, mas creio que não haja falha grosseira nesse código.

O objetivo é que vc perceba como atribuir os dados da sessão do PHP a uma variável JavaScript, o que, se entendi direito, responde à sua pergunta. Ou seja, vamos manipular o valor da variável JavaScript conforme ela for alterada no PHP.

Assim, use sessions, hooks e helpers. O hook vai definir o valor de sessão padrão para a variável. O helper vai recuperar esse valor para o JavaScript e imprimir no documento HTML.

  • Habilitar o uso da biblioteca de sessão:

Eu gosto de autoload: entre em application/config/autoload.php e insira session no array correspondente: $autoload['libraries'] = array('session').

  • Definindo idiomas disponíveis:

Esses dados podem, logicamente, ser carregados do seu banco. No exemplo eu definirei o array $config['langs'] pra servir como referência. Entre em application/config/config.php e insira isso: $config['langs'] = ['pt-br','en','es'];.

Assim, essas serão as únicas hipóteses disponíveis para o método set_lang_var() que define o idioma.

  • Habilitar e criar um hook:

Habilite o uso de hooks definindo $config['enable_hooks'] = TRUE; no arquivo application/config/config.php;

Dentro de application/config/hooks.php insira o seguinte:

$hook['post_controller_constructor'][] = array(
    'function' => 'set_lang',
    'filename' => 'set_lang.php',
    'filepath' => 'hooks'
);

Agora crie o hook application/hooks/set_lang.php e insira o seguinte:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

function set_lang() {

    $ci = & get_instance();
    //$ci->session->unset_userdata('lang');
    if(NULL == $ci->session->userdata('lang')){
        //Se nao houver idioma na session, define o idioma padrao
        $userdata = ['lang'=>'pt-br'];
        $ci->session->set_userdata($userdata);
    }
    //Caso contrario, o metodo teste/set_lang_var() pode ser usado para mudar o idioma
}

A partir deste ponto o PHP já sabe qual é o idioma padrão. Agora será necessário fazer o sistema repassar os dados da $_SESSION do PHP para uma variável JavaScript legível.

  • Habilitando e criando um helper:

Para usar os helpers vc deve carregá-los. Eu gosto de usar autoload: dentro de application/config/autoload.php adicione o helper string ao array apropriado: $autoload['helper'] = array('string');

É uma boa prática não alterar os scripts originais do framework, então estenda o helper pra poder trabalhar sem medo: crie o arquivo application/helpers/MY_string_helper.php e insira o seguinte:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

if (!function_exists('string_lang')) {
    function string_lang(){
        $ci = & get_instance();
        echo '<script type="text/javascript">';
        echo "var lang='".$ci->session->lang."'";
        echo "</script>\n";
    }
}
  • Controlador, métodos e view:

O controller application/controllers/Teste.php tem dois métodos bem simples:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Teste extends CI_Controller {

    function get_lang_var(){
        $data['title'] = 'get_lang_var()';
        $this->template_action = strtolower(__CLASS__."/".__FUNCTION__);
        $this->load->view($this->template_action, $data);
    }

    function set_lang_var(){
        $lang = $this->uri->segment(3, 0);
        $userdata = ['lang'=>$lang];
        if(in_array($lang, $this->config->item('langs'))){
            $this->session->set_userdata($userdata);
            redirect('teste/get_lang_var');
        } 
        else{
             redirect('teste/set_lang_var/pt-br');
        }
    }

}

A view application/views/teste/get_lang_var.php também é bastante simples:

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?= doctype('html5'); ?>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title><?= $title ?></title>
        <base href="<?= config_item('base_url') ?>">
        <?=string_lang()?>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        <style>body{padding-top: 20px;}</style>
    </head>
    <body>
        <div class="container">
            <p>Mude o idioma: <?=$_SESSION['lang']?></p>
            <?=anchor('teste/set_lang_var/pt-br', 'pt-br')?>
            <?=anchor('teste/set_lang_var/en', 'en')?>
            <?=anchor('teste/set_lang_var/es', 'es')?>
        </div>
    </body>
</html>

Observando o console do navegador (ou o código-fonte da página) vai ser possível perceber que a variável <script type="text/javascript">var lang='pt-br'</script> muda de valor sempre que vc escolhe um idioma novo.

É isso. Estude este código e vc vai ter a noção de como fazer isso de outras maneiras, ou aplicar o conceito às bibliotecas que está usando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .