Tutorial Laravel iniciando com front-end

Continuando a série de posts sobre Laravel iremos agora trabalhar um pouco a parte de iniciando front-end de nosso web site exemplo. Primeiro faremos a instalação do Bootstrap e em seguida customizaremos o template padrão que está disponível no site do projeto.

Resumo do post

De acordo com a documentação do Laravel, este framework não determina qual o pre processador CSS ou JavaScript você deve usar.

Contudo o Laravel fornece vários pacotes que facilitam o uso de CSS e Javascript em conjunto com este framework porque contém geradores de código que fornecem pontos de partida para iniciar front-end de aplicativos mais complexos.




Entre estes recursos presentes no Laravel podemos citar: o pacote laravel/ui e o Laravel Mix. Para maiores detalhes você pode consultar a documentação referente a iniciando front-end no site do Laravel Docs.

Neste tutorial não iremos empregar os recursos citados acima, faremos uso do Bootstrap em nosso exemplo de iniciando front-end, porém a instalação será feita de forma manual sem uso dos pacotes adicionais disponíveis no Laravel.

Caso tenha interesse em aprender como instalar e configurar o Vue.js no Laravel para criar seu front-end, pode ler este outro post :
Vue.js no Laravel

Instalando o Bootstrap

O Bootstrap é um conjunto de ferramentas de código aberto utilizado para desenvolver front-ends para aplicações web e que utiliza HTML, CSS e JavaScript. Voltado para desenvolvimento de interfaces responsivas e com a filosofia mobile first.

Iniciado em 2011, como Twitter Bootstrap, este projeto é hoje um dos mais ativos e bem avaliados no GIT HUB, tendo sido adotado por uma gama enorme de desenvolvedores ao redor do planeta.

Obtendo os arquivos

Iniciaremos nosso tutorial, fazendo o download do Bootstrap, a versão mais recente na época em que escrevo este tutorial é a 4.4.1, e pode ser baixada no site oficial do projeto em:

Ao clicar  em Download, você será levado para uma outra página na qual existirão várias possibilidades de obter o Bootstrap, entre elas: o código fonte, ou a partir de uma CDN (incluindo somente os links em sua página). Em nosso caso escolheremos a opção Compiled CSS e JS, e para isto basta clicar em Download uma segunda vez.

No site citado acima você encontra várias versões do Bootstrap, bem como a respectiva documentação de cada uma delas.

Pode também baixar neste outro site:

  • https://getbootstrap.com.br/ , está em português com documentação traduzida, porém algumas versões ainda não estão disponíveis neste idioma, como por exemplo a 4.4.1 utilizada neste tutorial.

Para nosso exemplo será necessário também fazer o download do arquivo jquery-3.4.1.slim.min.js, para isto utilize o seguinte link: https://code.jquery.com/jquery-3.4.1.slim.min.js

Nota: escolha a opção “Salvar link como” e mantenha o nome original do arquivo.

No template original que utilizamos como base deste exemplo este arquivo é obtido, através de um link, a partir da CDN oficial do JQuery, mas em nosso tutorial optei por baixá-lo e armazenar localmente.

Laravel a pasta /public

A estrutura de pastas do Laravel é um tópico importante a ser estudado, porém um pouco extenso, de forma que não abordaremos este assunto agora.

No momento vou mencionar apenas a pasta /public, esta pode ser encarada como a pasta raiz de seu site web publicado, na verdade, é exatamente isto que ela representa. Inclusive em outros tutoriais, quando formos tratar do deploy de nossa aplicação web, veremos que ao definir a raiz do site para o web server, ela irá apontar para a pasta /public do projeto Laravel.

Ao examinar a pasta public é possível ver que a mesma já contém alguns arquivos de configuração, como o .htaccess (para Apache2) e web.config (para aplicações ASP.NET), e o robots.txt.

Além disso, já existem subpastas como por exemplo: /public/css para armazenar as folhas de estilo CSS, e /public/js para os arquivos JavaScript.

Nesta pasta, também fica localizado o arquivo index.php, que é a página inicial do projeto Laravel, responsável por criar a e inicializar a instância da aplicação web.

Copiando os arquivos

Após descompactar o Bootstrap devemos copiar os arquivos da seguinte forma:

  • “\bootstrap-4.4.1-dist\css\bootstrap.min.css” para a pasta public\css;
  • “\bootstrap-4.4.1-dist\js\bootstrap.bundle.min.js” e “jquery-3.4.1.slim.min.js”  para a pasta public\js do projeto Laravel.




O Template Starter

Conforme mencionei, como base deste exemplo será usado um template disponível no site do Bootstrap. Trata-se do template Starter que está no mesmo site em que foi feito o download. Para ver o original basta selecionar a opção Examples e nesta procurar o exemplo Framework > Starter template, veja na tela abaixo:

Bootstrap template Starter
O template Starte do Bootstrap

Os créditos deste template são para os autores do mesmo: Mark Otto, Jacob Thornton, e outros contribuidores do projeto Bootstrap.

Iniciando o front-end do projeto

Neste tutorial alteraremos o projeto produzido nos tutoriais anteriores, e para isto digitaremos muito código, então mãos a obra.

Nota: o código deste projeto pode ser baixado no GITHUB em: https://github.com/ewertonvaz/meu-site

Arquivo starter-template.css

Vamos agora criar mais um arquivo de estilos, crie um arquivo novo na pasta public\css com o nome de starter-template.css, neste arquivo digite o código abaixo:

Código do arquivo starter-template.css
Código do arquivo starter-template.css

Arquivo main.blade.php

Um outro arquivo que precisaremos criar é o arquivo Blade que será o layout principal de nosso site, assim você deve criar um novo arquivo na pasta /resources/views/layouts com o nome de main.blade.php e nele digitar o código abaixo:

Código do arquivo main.blade.php
Código do arquivo main.blade.php

Alterando o index.blade.php

Prosseguindo com as alterações vamos agora alterar o arquivo que representa a página inicial de nosso aplicativo web, o arquivo index.blade.php,  para isto abra o arquivo em sua IDE e faça as alterações abaixo:

Alterações no arquivo index.blade.php
Alterações no arquivo index.blade.php

Note que agora este layout herda do layout main.blade.php que criamos anteriormente neste tutorial.

Incluímos também a seção ‘titulo’ para que seja incluído no arquivo HTML final, após interpretação do Blade e do PHP, o título desta página inicial.

Uma outra inclusão foi a section ‘lead-text’ que incluíra um texto em um parágrafo definido no layout padrão com a classe ‘lead-text’ o que fará com que seja aplicada a formatação definida no arquivo CSS.

Navbar

A barra de navegação ficará em um arquivo de template separado com o nome de navbarstarter.blade.php.

Neste caso específico, devido ao tamanho do arquivo, em vez digitar você pode fazer o download usando este link, e depois copiar o arquivo para a pasta \resources\views\layouts de nosso projeto.

Este arquivo contém todo o código relacionado com a barra de navegação de nosso aplicativo web. Como já mencionei, este exemplo é baseado no template Starter fornecido no site do Bootstrap, de forma que esta barra de navegação é praticamente idêntica à do modelo original.

Foram feitas somente alterações pequenas, como, por exemplo, incluído código para não exibir a opção início quando estivermos na página raiz do site; e traduzidos a caixa e botão de pesquisa.

Algumas alterações feitas na Navbar do Starter Template original
Algumas alterações feitas na Navbar do Starter Template original

Alterando o about.blade.php

Para finalizar as alterações modificaremos agora o arquivo about.blade.php, para isto basta alterar o arquivo fazendo a mudança destacada abaixo

Alteração no arquivo about.blade.php
Alteração no arquivo about.blade.php

Esta alteração serve para mudar a relação de herança deste layout o qual passa a herdar do arquivo main.blade.php que criamos neste tutorial.




Testando as alterações

Após as alterações iremos agora testar o resultado bastando para isso abrir nosso site exemplo no navegador no endereço:

http://localhost:8000

Nota: assumo que você já está com o seu servidor rodando, ou seja, já executou o comando:

php artisan serve

A figura abaixo ilustra o resultado esperado após as modificações descritas neste tutorial. Caso você não consiga ver uma tela semelhante, revise todos os passos.

Tela do site exemplo após as modificações
Tela do site exemplo após as modificações

Caso tenha ocorrido alguma problema durante as alterações, ou se você simplesmente não queira fazê-las, poderá fazer o download do projeto diretamente do GitHub usando o link abaixo:

https://github.com/ewertonvaz/meu-site

Nota: para o exemplo deste tutorial escolha o Branch front-end.

Como eu disse antes este é um bom ponto de partida para seu aplicativo, pois nesta nova versão de nosso site exemplo já contamos com os recursos do Bootstrap e do JScript.

Desta forma, já é possível fazer alterações e experiências usando os layouts Blade fornecidos no exemplo de maneira a empregar vários recursos de frot-end, entre eles os relacionados com layout responsivo e mobile first.

Modo Mobile

Conforme mencionamos no início o Bootstrap privilegia as interfaces responsivas e com a filosofia mobile first, assim precisamos também testar a aparência de nosso exemplo em um dispositivo de tela pequena, como um celular ou tablet.

Para simplificar esta tarefa os principais navegadores já possuem uma forma de realizar este teste, o modo Mobile, para ativá-lo faça o seguinte:

Firefox pressione CTRL + SHIFT + M para ativar o modo Mobile
Chrome primeiro CTRL + SHIFT + I para entrar
no modo Inspeção, em seguida,  CTRL + SHIFT + M para ativar o modo Mobile.

Em ambos os casos o resultado será parecido com a figura abaixo:

Tela do navegador em modo mobile
Tela do navegador em modo mobile


Esta tela simula um celular ou tablet e permite que você teste como sua aplicação web é exibida nos dispositivos de tela menores do que a de um computador.

Veja que o site que produzimos já está com um layout responsivo, pelo menos as páginas em que aplicamos o layout main.blade.php, nas outras páginas o layout continua o padrão fornecido pelo esqueleto Laravel.

Conclusão

Nesta série de tutoriais foi produzido um esqueleto de aplicação, baseado no esqueleto padrão do Laravel, que pode servir de ponto de partida para aplicações mais complexas utilizando este framework.

A abordagem apresentada neste post é uma alternativa a que é usada normalmente, ou seja, usar os próprios pacotes do Laravel para instalar frameworks de front-end, como o Vue.Js, o Bootstrap e o React.

Neste outro POST escrevi um tutorial de como instalar e configurar o Vue.js para uso em seu projeto Laravel.

Confira os outros tutoriais desta série:

Conheça também:
eBook chatbot usando Laravel Botman e Dialogflow
Vue.js no Laravel

Voltar ao início