Configurando aplicação multitema no CodeIgniter

Configurando aplicação multitema no CodeIgniter

É bastante comum encontrarmos a necessidade de desenvolver aplicações multi-idioma com CodeIgniter, mas multitema tem um baixo índice de ocorrência. Nesse post eu vou mostrar como configurar a estrutura de arquivos para poder implementar o recurso de multitema, de modo semelhante ao que é feito no WordPress.

Criando o projeto

Para iniciar, crie um projeto CodeIgniter usando o Composer – para ser mais rápido – em um diretório de sua escolha no seu servidor de desenvolvimento.

composer create-project bcit-ci/codeigniter aplicacao-multitema --prefer-dist

Após criado o projeto, vamos organizar os diretórios.

Organizando os diretórios e arquivos para a estrutura multitema

Crie um diretório chamado assets na raiz do diretório do projeto. Dentro dele crie outros 2 diretórios chamados light_theme e dark_theme.

Esses diretórios serão utilizados para armazenar os arquivos css, javascript e imagens de cada tema. Você pode criar os diretórios para os tipos de arquivos dentro deles conforme achar mais conveniente, não há problema algum, desde que eles estejam agrupados dentro de um diretório específico para o tema.

Em seguida, crie os diretórios light_theme e dark_theme dentro do diretório application/views e em seguida copie o arquivo welcome_message.php para dentro de cada um desses diretórios.

Ao criar os diretórios light_theme e dark_theme dentro do diretório das views no CodeIgniter você está iniciando a estrutura de tema, podendo assim criar quantos temas quiser, com o nome que quiser.

Por padrão o CodeIgniter chama a view welcome_message na raiz do diretório application/views então vai ser preciso alterar o controller Welcome para que ele passe a chamar a view a partir do tema escolhido.

Abra o arquivo application/controllers/Welcome.php e atualize o código conforme apresentado a seguir:

Com o controller atualizado é hora de atualizar as views, para que seja possível testar a implementação. Abra o arquivo welcome_message de cada um dos temas (light_theme e dark_theme) e recorte deles o conteúdo CSS que está dentro do cabeçalho head, conforme apresentado abaixo.

Para cada uma das view, recorte o bloco de código CSS e cole em um arquivo chamado theme.cssdentro do diretório assets/css de cada tema.

Para o black_theme altere a propriedade background-color do body para #000000 e a propriedade color para #ffffff. Para o light_theme mantenha como o arquivo original.

Nas views, onde você removeu o código CSS, adicione a chamada para o arquivo CSS que foi criado, e que está sendo definido no controller Welcome.

<link href="<?=$theme_style?>" rel="stylesheet">

O conteúdo das views é o mesmo, somente a estilização delas é que será diferente, conforme o tema escolhido.

Veja a seguir como ficará o arquivo da view welcome_message.php:

Agora que as configurações foram feitas e a estrutura de arquivos está organizada, é hora de você testar. Acesse a url do projeto que você criou no seu browser e veja se a página carregada será como a da imagem a seguir:

Configurando aplicação multitema no CodeIgniter

Resultado da view usando o tema “dark_theme”

 

Para testar o light_theme acesse o controller Welcome e altere o valor da variável $theme para light_theme. Em seguida volte ao browser e atualize a página. Você deverá ter uma tela como a mostrada na imagem a seguir:

Configurando aplicação multitema no CodeIgniter

Resultado da view usando o tema “light_theme”

 

Viu como é fácil configurar uma aplicação para utilizar multitema?

A seguir vou dar 2 dicas para fazer um melhor uso do que você acabou de aprender.

 

Dica #1 – Crie temas que compartilhem da mesma regra de negócio

Se você criar temas que precisem de regras de negócio específicas o processo de configuração de desenvolvimento vai ficar bem complexo, pois você terá que modificar os controllers de modo a verificar qual o tema está sendo utilizado para então executar a respectiva regra de negócio.

Tome por base o modo como o WordPress funciona, onde você tem as variáveis pré-definidas, funções e outros recursos e então pode utilizá-los em qualquer parte do layout, sem a necessidade de modificar a regra de negócio da aplicação.

Por exemplo, se você tem um portal de notícias, então no mínimo terá uma página para listar as notícias e outra para que seja possível ler a notícia, sendo assim o controller que chama a página de listagem deve sempre retornar a lista das notícias, contendo todas as informações dela para que essas possam ser utilizadas no tema da maneira como desejar; essa mesma lógica serve para a página de leitura da notícia.

 

Dica #2 – Se o usuário puder escolher o tema através de um painel, utilize uma função em um helper para obter o tema a ser utilizado

Assim como utilizamos uma variável no exemplo desse tutorial para definir o tema a ser aplicado, sua aplicação pode dar a opção de escolhar do tema para o usuário, a partir de um painel de gerenciamento de conteúdo. Tendo essa possibilidade, crie um helper para auxiliar nessa tarefa e dentro dele coloque uma função que vai se conectar no banco de dados e recuperar essa informação.

Fazendo assim você vai estar centralizando a regra de negócio para obtenção do tema, e se precisar modificá-la posteriormente, fará em um único arquivo, já que a informação de qual tema deve ser utilizado vai ser utilizada em controllers e views.

 

Gostou do tutorial? Tem sugestões ou dúvidas? Então use os comentários para interagir conosco.

Até o próximo tutorial!