Fala galera, tudo beleza? Hoje estaremos dando continuidade com nosso tutorial utilizando nosso querido framework Codeigniter. Na parte 2 conseguimos retornar a informação do banco de dados, porém ela está um pouco feia. Hoje estaremos utilizando framework front-end mais conhecido e utilizado no mercado atualmente, o Bootstrap.
Bootstrap
O Boostrap a grosso modo é um conjunto de componentes front-end prontos para utilização, poupando assim grandes esforços na criação de um layout. Então vamos por a mão na massa!
Já com a parte 2 do projeto em mãos, devidamente configurada no seu ambiente de desenvolvimento, vamos baixar o Bootstrap acessando o link http://getbootstrap.com.
Clicamos no botão “Download Bootstrap” e baixamos a versão mostrada na imagem abaixo.
Ao finalizar o download descompactamos o arquivo .zip e teremos as seguintes pastas:
Configurando Bootstrap em nossa aplicação
Na pasta do nosso projeto que está no caminho C:\wamp\www\blog criamos uma pasta chamada dist e copiamos as pastas do bootstrap para dentro dela. Nosso projeto então ficará da seguinte forma:
Já com os arquivos do Bootstrap no nosso projeto, iremos agora configurar aquela nossa view de artigos que criamos nos tutoriais anteriores. Abrimos nosso projeto no sublimeText, que é o editor que estamos utilizando. E abrimos o arquivo artigos.php que está no caminho blog->apllication->views->artigos.php e nosso artigo atualmente está da seguinte forma:
Vamos começar a alterar colocando o doctype é a maneira de você dizer para qualquer navegador como ele deve agir ao ler seu código HTML. E criamos nosso head, onde iremos colocar os links com os arquivos css da nossa aplicação. Em seguida colocamos o link com o caminho do arquivo do bootstrap.min.css. Nosso código ficará desta forma:
Porém ao acessarmos nossa aplicação, é possível ver que nem uma alteração aconteceu. Para entender o que ocorreu utilizaremos o inspecionador do Google Chrome, basta clicar com o botão direito na página de nosso blog no navegador, e clicar em inspecionar elemento(ou simplesmente clicar em f12). Clicamos na aba Network e recarregamos nossa página clicando em F5. O Network nos mostra que o arquivo bootstrap.min.css não foi carregado corretamente.
O helper url do Codeiniter
Isto acontece pois o Codeigniter por questões de segurança não permite acessar uma pasta através do caminho “../” que no html seria para acessar uma pasta pai. Para resolver isso iremos utilizar um helper do codeigniter chamado url. Em nosso projeto acessamos o caminho blog->application->config->autoload.php, como já vimos anteriormente o arquivo autoload.php serve para carregar helpers, libraries etc de forma automática, ou seja, ao iniciar a aplicação ela será carregada. Então inserimos em helper o url como no exemplo a seguir:
E alteramos nosso código do arquivo artigos.php da seguinte maneira utilizando a função base_url da biblioteca url.
Melhorando o visual de nossa listagem de artigos
Ao acessarmos nossa aplicação novamente, notamos que a fonte ficou um pouco diferente, vamos melhorar nossa tabela com uma classe do bootstrap, a classe table. Usaremos então uma borda em nossa tabela através da classe table–bordered, para ficar melhor a visualização de nossos artigos na listagem. Alteramos nosso código para que fique da seguinte forma:
Como resultado temos uma tabela um pouco mais bonita e organizada em nossa aplicação, podemos ver acessado http://localhost/blog/.
Nossa tabela está muito encostada nas bordas do navegador, vamos colocar uma div para dar uma pequena margem tanto na esquerda quanto na direita de nossa tabela? Para isso usaremos a classe container do Bootstrap.
O resultado que temos é o seguinte:
Agora nossa aplicação está começando a tomar uma forma mais bonita!
No próximo post iremos criar um formulário com ajuda do Bootstrap e inserir nossos artigos através desse formulário no banco de dados ! Não deixe de acompanhar nosso blog.
Até a próxima.
Excelente artigo !