Como integrar Bootstrap e CodeIgniter

Já ouviu a frase? Você quer um site que funcione ou um site bonito?

Pelo menos no meu caso, nunca consegui fazer sistemas ou sites bonitos. Apenas cinzas no meio de tabelas, nada muito criativo, mas que pelo menos funcionavam bem.

Uma dificuldade que eu sempre tive foi na parte de desenvolvimento do lay-out do site, a parte bonita, que atrai o usuário. Meus sites/sistemas sempre eram cinzas, quadrados e horríveis, mas que pelo menos conseguiam entregar o que prometiam.

Porém, hoje em dia, é fundamental entregarmos um site ou sistema que seja agradável aos olhos. Mas como fazer quando você não tem o dom do design?

Uma solução seria a contratação de um designer, mas e quando você não tem orçamento disponível?

Bem, eu acredito que achei a solução para este problema visual.

Já ouviu falar no Bootstrap?

Bootstrap é um framework CSS desenvolvido pela equipe que mantém o Twitter. É um conjunto de botões, janelas, grids, funcionalidades etc, que ajudam você a deixar seu site ou sistema com uma cara bem agradável, e por que não dizer, bonita.

E o mais legal de tudo, é que ele já vem pronto para qualquer tamanho de tela. Ou seja, se você fizer um site para desktop, quando alguém abri-lo em um tablet ou um celular com tela menor, seu lay-out se ajusta automaticamente ao tamanho da nova tela. Fantástico não?

No post de hoje vamos aprender a como integrar  Bootstrap e CodeIgniter e dar uma brincada em algumas telas para você ver como que as coisas funcionam.

Para começar, vamos iniciar uma instalação limpa do CodeIgniter. Após isso, configure-o para carregar o helper ‘url’, que está em application/config/autoload.php. Deixe a linha 67 assim:

Isso serve para carregar umas funções que ajudarão a trabalharmos com as URL do CodeIgniter.

O próximo passo é baixar o bootstrap. Para isto, entre no site e baixe sua última versão. Enquanto escrevo este post, a versão disponível é a 3.1.1.

O download consiste em um arquivo zipado que contém 3 pastas:

Prinscreen do bootstrap

O que você deverá fazer é na raiz do CodeIgniter, criar uma pasta includes e ali dentro outra pasta chamada bootstrap e dentro desta pasta descompactar as 3 pastas da figura acima.

Esta é a estrutura de diretórios que eu costumo usar. Fique à vontade se quiser mudar.

Agora que já temos os arquivos no nosso servidor, temos que importar os arquivos principais do bootstrap para dentro da nossa página.

Os arquivos do Bootstrap têm que ser carregados em todas as páginas do seu site, por isso acrescente as linhas no header da sua página e faça com que este header seja carregado também em outras páginas.

Você precisa inserir apenas 2 arquivos para fazer o Bootstrap funcionar.

O primeiro é o arquivo bootstrap.min.css e o outro arquivo é um javascript, chamado: bootstrap.min.js.

Claro que você precisa inserir também o código jQuery. Neste caso para facilitar, vamos utilizar o jQuery que o Google nos fornece.

Abaixo um exemplo de como ficará a inserção destes arquivos no seu header. Por questões didáticas, vou usar as mesmas páginas fornecidas pelo CodeIgniter, então, abra o arquivo welcome_message.php que está na pasta application/views e antes de fechar a tag head acrescente as linhas abaixo:

Após fazer isto, recarregue sua página inicial e perceba que o visual já mudou um pouco. Isto já é o Bootstrap funcionando.

Veja como que a minha página inicial ficou:

Tela inicial após aplicarmos as classes do bootstrap

A partir de agora já temos disponíveis para uso uma infinidade de funções CSS, JavaScript, Módulos, etc.

Agora, vamos trazer esta tela um pouco para o mundo real.

Imagine que você tem um site ou sistema que você precise de uma barra de menus fixa no topo do site. Para fazer isto, vamos no site do bootstrap e copiar um código exemplo de lá.

Acesse o site do bootstrap, clique no link Components, e navegue até o item Navbar.

No primeiro exemplo ele já te mostra uma barra de navegação padrão e já quase toda estruturada. Copie o código fonte e cole entre as tags <body> </body> do arquivo welcome_message.php, substituindo tudo o que está entre estas tags.

Remova também de dentro das tags head os estilos do CodeIgniter, bastando remover tudo o que está entre as tags <style> </style>.

Não vou colar o código aqui por que ele é muito grande, mas se você fez direitinho, sua tela deverá ter ficado assim:

print da tela com a navbar do bootstrap

Repare que ele acrescentou uma barra de menu fixa no topo do seu site, totalmente funcional, com campos de buscas já com o placeholder e inclusive com menus dropdown perfeitamente operantes.

Agora, basta você olhar o código fonte e adaptar às suas necessidades. Muito simples não?

Mais um truque: Se você quiser deixar a barra de navegação preta, basta alterar a tag navbar e deixar como está abaixo:

Isso vai deixar sua barra de navegação preta.

Vamos ver agora uma outra funcionalidade: formulário.

Para estilizar formulários é muito simples, e o resultado fica bem legal.

Você pode inclusive ter vários tipos de formatação de formulário. Onde a label do campo fica em cima do campo, ou então tudo na horizontal, ou então tudo um pouco menor. etc.

Para testar essa funcionalidade, no site do Boostrap, vá agora até o link CSS, e depois clique em Forms, no menu ao lado direito.

Ali ele já traz alguns exemplos. Vamos pegar o primeiro.

No código abaixo eu coloquei o código do formulário dentro de uma div container, onde eu digo que ela vai ter uma largura de 4 colunas, através da classe col-xs-4. Aqui já estamos usando a funcionalidade de GRID do Bootstrap, que serve para você limitar o conteúdo do seu lay-out. Veja no código abaixo:

Com isso, nosso formulário vai ficar mais estreito, sem pegar a largura total da tela. Veja no print abaixo como ficou:

print do formulário do bootstrap

Veja como é bem simples de entender como que o código funciona. Veja também alguns exemplos de outros tipos de formulário que existem na página do Bootstrap. Você pode fazer vários tipos de formatações.

Por último, vamos dar uma olhada na parte de janelas. No bootstrap você também pode ter mensagens em janelas do tipo modal, para pedir confirmação ao usuário ou simplesmente carregar um texto ou foto em uma div flutuante.

Para isto, vá até o site do Bootstrap e clique no link JavaScript, depois clique no item Modal

Ele vai listar vários exemplos de janelas modais que você pode inserir.

No nosso exemplo, vamos criar um botão na tela que ao ser clicado, ele exibe uma janela flutuante que pergunta ao usuário se ele deseja continuar ou não.

Para isto, copie o código da janela abaixo e cole logo após a tag body:

Este é o código que gera a sua janela. Dentro dele você consegue facilmente alterar o título, conteúdo e botões da janela.

Para mudar o título, basta alterar a frase Modal Title. O conteúdo está dentro das tags com a classe modal-body e os botões são os que estão escrito Close e Save Changes.

Agora, vamos criar um botão na nossa página que quando clicado, abre esta janela.

Para isto, remova o código do formulário que inserimos e troque pela linha abaixo:

Repare que no parâmetro data-target ele está chamando o nome da sua janela modal, que neste caso é ‘myModal’. Então, na linha de criação de nossa janela, temos que atribuir um ID a ela de nome ‘myModal’.

Mude a primeira tag que cria a janela para a linha abaixo:

Aqui nós só acrescentamos o ID para a janela.

Feito isso, ao clicar no botão, você já verá a janela abrindo e totalmente funcional. Faça o Teste!

Bom, não vou me estender muito porque o Bootstrap tem muita coisa. Navegando entre seus exemplos você consegue entender de um jeito bem simples com implementar isso no seu site. Vale muito a pena.

Abraços e até o próximo post!

P.S. Coloque sua dúvida nos comentários abaixo para que eu possa me guiar e trazer conteúdos melhores para você. Não se esqueça também de deixar seu e-mail no campo ao lado para eu lhe enviar um e-mail informando sobre novidades aqui do site.

Fábio S. Reszko

Sou Programador PHP desde 2006 e eu acredito sinceramente que programar usando um Framework PHP é a solução para os problemas de códigos desorganizados, difíceis de entender e de dar manutenção no futuro. Se você também acredita nisto, então fique à vontade em explorar meu blog.

  • Luan

    Boa Tarde muito bom seu post mas estou com um problema

    Ja tenho um sistema funcionando e estava procurando um jeito de fazer modal para confirmação e seu post me ajudou bastante mas estou com uma dúvida.
    Vou por meu código aqui para que você possa ver:

    <a href="id_solicitacao”);?>”>id_solicitacao;?>
    nome;?>
    status;?>
    valor;?>
    Fechar

    ×

    Você deseja mesmo fechar a:
    Solicitação nº id_solicitacao?>
    Cliente: nome?>

    Não
    <button href="id_solicitacao”);?>” class=”btn btn-primary”>Sim

    na minha barra de endereço aparece no final da URI #myModal e não abre o modal ja tentei alterar para “button” ao inves de um “a href” mas sem sucesso.
    Aguardo.
    Obrigado.

  • Olá Luan

    Pelo que entendi no seu código, eu acho que isso deve ser um erro de JavaScript. Pois parece que não está sendo atribuída a função de Modal do Bootstrap ao seu botão. Para saber se é um erro de JS faça assim: abra seu site no Chrome e abra a opção Console de JavaScript através das teclas CTRL+SHIFT+J, e veja na aba Console se há algum erro de javascript. Com esta tela ainda aberta clique no seu botão e veja se algum outro erro surge.

    Abraços.

    P.S. Não se esqueça de assinar o site colocando seu e-mail no campo ao lado.

  • Goethe

    Muito show esse tutorial Fábio, faço Web and Mobile Apps a algum tempo, mas sempre quando não se tem um designer na equipe, o mesmo fica horrível.

    Bem conciso e muito boa a dica de procurar os exemplos direto no source, bootstrap site.

  • Olá Goethe

    Realmente. o Bootstrap me salvou a pele em vários momentos. Existe também um parecido com o boostrap que é muito bom. Se quiser dar uma olhada clique no link: http://www.getuikit.com/index.html.

    Abraços

    Fabio

  • Gisele

    Oi Fábio

    Sabe como faço para acessar um link de um tab pela url ?
    tipo:
    http://sistema/paginaquequero#item3

    Na verdade o que estou tentando fazer é colocar na página principal (home) alguns links, para acessar diretamente o tab respectivo de outra página. Para não ter necessidade de entrar na página, ver o primeiro tab ativo e selecionar o tab que tem o conteúdo desejado,

    Quando abro o endereço:
    http://sistema/paginaquequero#item3

    Vai certinho pra página que esta na url, mas para o #item1, ou seja o primeiro ativo é o que carrega.

    Alguma dica de como acesar os tabs diretamente pela url?
    Agradeço ajuda

  • Olá Gisele

    Uma vez fiz uma aplicação assim. Lembro-me que estava usando a biblioteca jqueryUI para gerar minhas tabs e lembro também que existe você pode inicializar as tabs passando como parâmetro qual tab você deseja que fique selecionada.

    Sendo assim, basta você recuperar via $_GET o parâmetro que indica qual tab deve ser selecionada e passar esta informação para o javascript dentro da área onde você inicializa as tabs.

    Espero ter ajudado.

    Fabio

  • Gisele

    Obrigada Fabio,
    Então ao clicar no tab desejado, a tab correta já fica selecionada.
    O menu de navegação que personalizei esta assim:

    <li class="”>

    Listar Todos

    <li class="”>

    Novo Cadastro

    Ai no arquivo arquivo view para listar todos, e no arquivo view para cadastrar, por exemplo, (mostrando só o inicio, onde esta chamando o tab) esta assim:

    <div id="listar-todos" class="tab-pane fade “>

    e no cadastrar

    <div id="cadastrar" class="tab-pane fade “>

    —————

    Mas ainda não entendi como fazer para recuperar via $_GET para acessar o tab pela url, sou leiga ainda, consigo entender bastante de php mas não aprendi muito bem sobre $_GET e $_POST, por incrível que pareça. Pensei que eram usados mais dentro da tag form.
    Nesse caso como faço para através da variavel get recuperar na url?

  • Gisele.

    Parâmetros via GET são aqueles que aparecem na URL. Exemplo: site.com/index.php?nome=jose&idade=30&cabelo=preto

    No PHP você pode recuperar cada parâmetro desse digitando assim:
    $nome = $_GET['nome'];
    $idade = $_GET['idade'];
    $cabelo = $_GET['cabelo'];

    Utilizando este exemplo, você pode recuperar qual TAB deseja que fique selecionada via GET. Exemplo: site.com/index.php?tab=3.
    Então, você pode atribuir este valor a uma variável dentro do JavaScript. Exemplo:

    < ?php>

    $tab = $_GET['tab'];

    < ?>

    Agora, a variável tab, em javascript, ficará disponível para você usar na sua página. Você só precisa ver como que você faz para selecionar uma TAB via javascript no plugin de tabs que você está usando. Eu usava o JQueryUI TABS.

    Lembre-se que o CodeIgniter não vai aceitar você passar os parâmetros via GET como mostrei no exemplo. Você terá que fazer algo assim:

    http://site.com/index.php/controller/metodo/tab/3

    Onde o número 3, seria o ID da TAB.

    Na view, você recuperaria aquele valor assim:

    $tab = $this->uri->segment(4);

    Dê uma olhada num curso básico de HTML para refrescar alguns conceitos. Sugiro o que existe no site http://www.cursoemvideo.com

    Fabio

  • Gisele

    Fabio, obrigada pela indicação. Sobre o javascript até entendo, já que é do lado do cliente, pois isso acho que há uma forma de fazer sem necessidade de programar no controller.

    http://stackoverflow.com/questions/18251433/get-the-string-comes-after-sign-in-url-by-using-codeigniter

  • Sergio

    boa tarde, sou iniciante no php, apesar de ter experiência com outras linguagens. Achei seu site muito interessante, e gostaria de agradecer por compartilhar seu conhecimento com outras pessoas, o mundo precisa de gente como você! Forte abraço e fique com Deus !

  • Obrigado Sérgio!

  • Ola Fábio,

    Fantástico a sua aula e consegui colocar em prática, estou mudando o meu site atual para um feito totalmente nesta linguagem, não sou profissional mas consigo de certa forma atender a minha necessidade, a maior questão é que é preciso acompanhar a tecnologia responsiva, consegui montar o site novo, coloquei o formulário feito em Bootstrap mas não consigo de jeito nenhum criar os parâmetros de envio, não acho em nenhum lugar onde posso dizer o destino deste formulário.

    Peço muiiiiito esta ajuda.. Abraços

  • Olá Leo

    Você coloca o destino para onde o formulário será enviado na propriedade action do formulário. Assim:

    <form method="post" action="enviar.php">
    <!– Aqui dentro vão os inputs do teu formulário –>
    </form>

    Mas lembre-se que você deverá enviar o conteúdo de um formulário para uma linguagem server side, como PHP por exemplo.
    Formulários sem linguagem server side não funcionam.

    Abraços
    Fabio

  • Ola Fabio, muito obrigado pelo retorno, foi de uma ajuda imensa embora eu não entenda muito, sou bem novo nisso, estou tentando melhorar o meu site, usei o bootstrap para montar o formulário, parecia muito fácil, agora parece que complicou um pouco, não faço a minima ideia de como fazer este enviar.php, mas vou dar uma pesquisada…

    Muito obrigado

  • Leo, aí complicou.

    Quem faz a ação na verdade é o arquivo que vai receber o conteúdo do formulário, no caso que eu dei como exemplo: enviar.php.
    É dentro deste arquivo que você vai programar o que será feito com os dados recebidos: se vai enviar por email, gravar em um banco de dados, dar uma resposta etc.
    Somente um formulário HTML não vai servir pra nada. O máximo que você pode fazer é colocar no action do formulário assim: action=”mailto:email@dominio.com” para enviar um email por exemplo, mas isso só vai abrir o cliente de email no computador da pessoa.
    Depende muito do que você quer fazer com o formulário e pode ser simples ou complexo.
    Fabio

  • No meu site antigo o formulário serve para o cliente preencher os dados e o interesse, tinha: Nome, Empresa. Email. Contato e Mensagem, depois de preencher e enviar eu recebia pelo meu e-mail, não tinha nenhuma programação de resposta e algo simples mesmo, eu até tento usar esta action, mas abrir o programa de email do cliente para poder enviar uma mensagem não pegou muito bem… Preciso mesmo é estudar meu amigo, o negócio é que eu acabei gostando desta dor de cabeça.. kkk Bom! a minha próxima missão é montar este tão de PHP kkk… Valeu pela ajudar, já te considero um amigo. abraços grande

  • Alan Moreti

    Parabéns pelo tutorial e pelo site. Ganhou um novo leitor/seguidor. 🙂

  • Valeu Alan.