Para este exemplo vamos utilizar o template de administração Bootstrap 5 Dark Admin (click no link para fazer o Download).

O primeiro passo será criar o nosso projeto em Laravel. Utilize a seguinte linha de comando:

composer create-project laravel/laravel adminSistem

Entre na pasta do projeto, adminSistem, utilizando a linha de comandos:

cd adminSistem

Em seguida,  execute o projeto. Na linha de comandos digite o seguinte comando: 

php artisan serve

Abra uma janela no seu browser, com o endereço localhost:8000 que lhe irá mostrar o conteúdo do projeto acabado de criar.

Chegou a altura de começar a desenvolver a nossa aplicação. Abra o seu projeto no seu editor de preferência.

Avançando, vamos agora reutilizar o layout de administração que descarregámos anteriormente.

Para isso, vamos seguir os seguintes passos:

• Editamos o ficheiro web.php, que se encontra na pasta routes, o modificamos a rota de raiz para login:

• Em seguida, vamos à pasta do layout que descarregamos e copiamos o ficheiro login.html para a pasta resources/views e alteramos a extensão para .blade.php:

Neste momento, se atualizarmos o nosso browser já podemos ver o resultado destas alterações:

Podemos observar que os ficheiros CSS não estão a produzir efeito. Este é o foco da presente aula: o que fazer para resolver esta questão?

No Laravel, os ficheiros de estilo CSS são geralmente colocados na pasta public/css. A pasta public é destinada a ficheiros que podem ser acedidos diretamente pelo browser, tornando-a numa escolha lógica para ficheiros estáticos, como CSS, JavaScript e imagens.

Portanto, o que vamos fazer é copiar da pasta de download as pastas css, img, js e vendor para a pasta public do nosso projeto:

Este simples processo já permite ter uma nova visão da nossa página de login:

No entanto, nem sempre o processo é tão simples. Depois de organizarmos os nossos ficheiros, devemos referenciá-los nas nossas páginas usando a função asset:

Esta função gera o caminho completo para o ficheiro, considerando a configuração de URL da sua aplicação Laravel.

Nota: Para ver melhor o conteúdo das imagens, pressione o botão direito do rato e Abrir imagem num novo separador