Este artigo é uma apresentação ao framework PHP Laravel e aos seus componentes fundamentais. Primeiro falaremos sobre esses componentes com exemplos de uso. Depois criaremos uma aplicação que calcula o combustível necessário para uma viajem como forma de praticar o que foi aprendido.
Guia do artigo:
- Laravel é um framework MVC
- Rotas
- Views
- Controllers
- Model
- Criando um projeto com o Laravel
- Criando a rota
- Criando as views
- Criando o model
- Criando o controller
Laravel é um framework MVC
Uma aplicação web tem como função essencial receber requisições de um cliente, tratá-las enviando alguma respostas de volta, geralmente utilizando o HTTP como protocolo de comunicação.
No Laravel, essas funções são desempenhadas por componentes que seguem a arquitetura MVC, model-view-controller. Isso significa que para criar uma aplicação web com esse framework precisamos definir as rotas, endereços para os recursos, bem como seus controllers e as views com as quais o usuário vai interagir.
Conhecendo os componentes do Laravel
Rotas
Rotas são endereços para recursos, que por sua vez podem ser qualquer coisa no servidor, desde de um PDF até um ou mais dados armazenados em algum banco. Por exemplo, localhost/ é a rota para a página inicial da aplicação. Já localhost/pagina_2 é a rota para um outro recurso, provavelmente a segunda página da aplicação.
No Laravel, iniciamos a declaração de rotas utilizando o arquivo routes/web.php. Veja no Código 1 um exemplo de uma rota que contém uma função que devolve para o cliente o texto "Hello World" quando executada.
Route::get('/', function(){
return 'Hello World';
});
- Na Linha 1 acessamos o método estático get do objeto Routes. Veremos mais à frente o motivo para a utilização de um verbo na definição de uma rota. / é o endereço que acessaremos, referente a página inicial da aplicação. Podemos acessar essa rota pelos endereços localhost:8000, localhost:8000/ e http://127.0.0.1:8000/, note a ausência e presença da barra /.
- Ainda na Linha 1, function () é a declaração de uma função anônima (sem nome).
- Na Linha 3 return retornará o texto "Hello World" quando a rota for acessada.
Agora que compreendemos as rotas vamos seguir com os conceitos de view, controller e model.
Views
As views são as respostas devolvidas para o cliente. Geralmente uma view é um documento, que pode ser do tipo texto puro, como vimos acima, JSON ou, mais comumente, HTML.
No Laravel o mais comum de início é utilizamos uma engine de template como o Blade em nossas views, o que nos permitirá usar HTML/PHP no mesmo arquivo de forma mais organizada. Para isso os arquivos que conterão as views devem possuir a extensão [nome].blade.php para que o Blade faça a interpretação do conteúdo do mesmo. Do contrário, se salvarmos o arquivo com a extensão [nome].php, o PHP cuidará da renderização e ele não sabe interpretar a linguagem de template do Blade.
Depois de carregar uma view, uma rota pode retorná-la e exibir assim seu conteúdo, como vemos no Código 2 e Código 3 a view ola e a rota.
<!DOCTYPE html>
<html>
<head>
<title>Olá mundo</title>
</head>
<body>
<h1>Olá mundo</h1>
</body>
</html>
É criada uma view chamada ola.blade.php no diretório view que ao ser acessada exibirá o seu conteúdo
Route::get('/', function() {
return view('ola');
});
Ao acessar a rota / será retornado o conteúdo presente na view ola.
Controllers
Os controllers são essencialmente classes que contém a lógica para o tratamento das requisições. Eles têm como tarefa principal receber a requisição, transmitindo os dados contidos nela para a classe de modelo apropriada. Essa classe de modelo, por sua vez, contém alguma lógica.
Para entendermos melhor vamos criar o nosso primeiro controller. Para isso usaremos o Artisan, que é uma ferramenta de linha de comando com a qual fazemos quase tudo em uma aplicação Laravel, por exemplo, criar controllers.
Veja como criar um controller com o Artisan no Código 4.
php artisan make:controller PrimeiroController
Isso criará um novo arquivo chamado PrimeiroController.php no app/Http/Controllers, como mostrando no Código 5.
namespace App \ Http \ Controllers;
use Illuminate \ Http \ Request;
use App \ Http \ Requests;
class PrimeiroController extends Controller {
}
Por meio de uma rota conseguimos executar um método de um controller, mas para isso precisamos configurará-la. Veja no Código 6 a definição do método hello do controller, que passaremos a usar na página inicial da aplicação.
namespace App \ Http \ Controllers;
use Illuminate \ Http \ Request;
use App \ Http \ Controllers \ Controller;
class PrimeiroController extends Controller {
public function hello () {
return 'Olá, mundo!';
}
}
Agora, para executar esse método do controller quando o usuário acessar uma rota vamos codificar uma nova rota (Código 7), onde não será necessário utilizar uma closure, mas sim indicar o controller a ser utilizado.
//rotas/web.php
Route::get ('/', 'PrimeiroController@hello');
Acessando a rota / será retornado o texto Olá, mundo!, resultado da execução do método hello do controller.
Esta rota possui uma estrutura diferente daquela vista no Código 1. A principal diferença é que não usamos uma closure para retornar um valor ou uma view, mas sim a referência para um controller. A referência é feita:
- Declara-se o nome do controller, nesse caso PrimeiroController;
- Utilizando o @ seguido do nome do método do controller que será executado;
Com essa estrutura definida, sempre que a rota for acessada, o método do controller definido será executado.
Model
O modelos são o coração de uma aplicação MVC. Até o que vimos foi como utilizar a infraestrutura do Laravel para fazer com a aplicação funcione na web, mas nos modelos programamos as regras de negócio da aplicação e que justificam a sua existência.
Podemos criar um modelo via Artisan, com o comando que vemos no Código 8.
php artisan make:model PrimeiroModel
Após a execução do comando será inserido no diretório App/ o arquivo PrimeiroModel.php, com uma estrutura padrão, que está presente no Código 9.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class PrimeiroModel extends Model
{
//código a ser definido
}
Como vimos foi criado um arquivo model com um estrutura padrão automaticamente gerada pelo Laravel.
Agora que vimos o que são rotas, views, controllers e models, veremos o funcionamento de uma aplicação Laravel de cálculo de consumo de combustível, onde são feitas requisições ao controller e por meio do model serão exibidas na view as informações requisitadas.
Criando um projeto com o Laravel
O primeiro passo será a criação de um projeto e como já vimos no artigo de Hello World utilizaremos o Código 10.
composer create-project --prefer-dist laravel/laravel calculo_consumo Agora criaremos duas views para a aplicação, que serão a forma de interação do usuário com a aplicação. A primeira delas será a página principal que conterá um formulário onde o usuário poderá inserir a distância percorrida e qual é o consumo de combustível por um veículo. Enviaremos essas informações para serem processadas no back-end e as retornaremos numa segunda página.
Criando a rota
No arquivo routes/web.php criaremos duas rotas, que serão essenciais para o funcionamento da aplicação: a rota / e /gastos. Veja no Código 11 sua declaração.
Route::get('/', 'CombustivelController@index');
Route::get('/gasto', 'CombustivelController@gasto');Definimos as duas rotas, que possuem o direcionamento para o controller Combustivel_Controller.
Criando as views
No diretório resource/views criaremos o arquivo consumo.blade.php contendo um formulário HTML, como mostrado no Código 12.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculo de Consumo de Combustível</title>
<link rel="stylesheet" href="{{asset('css/style.css')}}" type="text/css">
</head>
<body>
<main>
<div class="painel">
<h2>Instruções</h2>
<div class="conteudo-painel">
<p>Esta aplicação tem como finalidade demonstrar os valores que
serão gastos com combustível durante uma viagem, com base no
consumo do seu veículo, e com a distância determinada por você!</p>
<p>Os combustíveis disponíveis para este cálculo são:</p>
<ul>
<li><b>Gasolina - R$ 4,80</b></li>
</ul>
</div>
</div>
<div class="painel">
<h2>Cálculo do valor (R$) do consumo</h2>
<div class="conteudo-painel">
<form action="{{url('/gasto')}}" method="get">
<label for="distancia">Distância em Quilômetros a ser percorrida</label>
<input type="number" class="campoTexto" name="distancia" required/>
<label for="autonomia">Consumo de combustível do veículo (Km/L)</label>
<input type="number" class="campoTexto" name="autonomia" required/>
<button class="botao" type="submit">Calcular</button>
</form>
</div>
</div>
</main>
</body>
</html>
Veja que mesmo sendo um arquivo .php ele possui toda a estrutura HTML para criação de um formulário. Note que diferentemente de outros projetos em PHP, onde no form é inserido um arquivo .php ou um caminho para determinado arquivo, usamos uma nova sintaxe. Utilizamos o método URL() do Laravel que ao ser enviado, o formulário apontará a rota /gasto.
A segunda view que criaremos será resultado.blade.php (o retorno do formulário), que exibirá o resultado do cálculo realizado, como mostra o Código 13.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Calculo de Consumo de Combustível</title>
<link rel="stylesheet" href="{{asset('css/style.css')}}" type="text/css">
</head>
<body>
<div class="painel">
<h2>Resultado do cálculo de consumo</h2>
<div class="conteudo-painel">
<div class='sucesso'>
<h3>O valor total gasto será de</h3>
<ul>
<li><b>Gasolina:</b> R$ {{$valor}}</li>
</ul>
</div>
<a class="botao" href="{{URL('/')}}" title="voltar">Voltar</a>
</div>
</div>
</body>
</html>
Como no Código 13 criamos um view como a estrutura HTML, o resultado do consumo de gasolina será exibido por meio da variável $valor. Note que no botão Voltar foi utilizado o helper url(), indicando a rota / para retornar a view consumo.blade.php.
Na linha 8 é refenciado o arquivo style.css no diretório public\css por meio da função asset() aplicando assim o estilo as views. Veremos no Código 14 seu conteúdo.
.campoTexto {
width: 100%;
padding: 8px 8px;
margin: 5px 0;
box-sizing: border-box;
border-color: #D9EDF7;
border-radius: 4px;
}
h2 {
background-color: #D9EDF7;
color: #286090;
margin: 0;
padding: 12px;
text-align: center;
font-weight: bold;
font-size: 16px;
}
.botao {
background-color: #286090;
color: #FFFEFA;
text-align: center;
border-radius: 4px;
padding: 10px 20px;
margin-top: 10px;
margin-bottom: 10px;
width: 100px;
display: block;
}
.painel {
margin-right: 10px;
border-width: thin;
border-style: solid;
border-color: #D9EDF7;
flex-grow: 1;
border-radius: 8px;
max-width: 500px;
}
.conteudo-painel {
padding: 15px;
}
.sucesso {
padding: 10px;
border-collapse: collapse;
border-color: #DFF0D8;
background-color: #DFF0D8;
color: #3C763D;
}
No Código 14 são declarados todos os estilos CSS que serão aplicados em ambas as views para torná-las páginas mais amigável.
Criando o model
Criaremos agora o model do nosso projeto que conterá a lógica para calcular o consumo de combustível de um determinado veículo. Dentro da pasta do nosso projeto utilizamos o comando do Código 15 para criar o arquivo CalculoDeCombustivel.php.
php artisan make:model CalculoDeCombustivel
Após a execução deste comando o arquivo CalculoDeCombustivel.php será criado dentro da pasta app. Com nosso arquivo gerado vamos criar o método que conterá a lógica da nossa aplicação, presente no Código 16.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class CalculoDeCombustivel extends Model
{
public function calcular(){
$distancia = $_GET['distancia'];
$autonomia = $_GET['autonomia'];
$valorGasolina = 4.80;
$consumoGasolina = ($distancia / $autonomia ) * $valorGasolina;
return $consumoGasolina;
}
}
Como já havíamos visto na criação de um model, apenas inserimos em sua estrutura o método Calcular(),onde criamos as variáveis que receberão os dados vindos do formulário, uma variável com um valor padrão, a operação que realiza o cálculo do consumo e o retorno deste método.
Criando o controller
Acessando a pasta do projeto utilizando o terminal, criaremos o controller da nossa aplicação inserindo o comando do Código 17.
php artisan make:controller CombustivelControllerNo Código 15 o comando artisan criará dentro do nosso projeto o arquivo CombustivelController.php com a estrutura padrão de um controller em Laravel.
As rotas da aplicação estão direcionadas ao controller criado, referenciando dois métodos: index() e gasto(). Veja no Código 18 a declaração de ambos os métodos.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\CalculoDeCombustivel;
class CombustivelController extends Controller
{
public function index(){
return view('consumo');
}
public function gasto(){
$CalculoDeCombustivel = new CalculoDeCombustivel();
$valor = $CalculoDeCombustivel->calcular();
return view('resultado',['valor'=>$valor]);
}
}
Na linha 11 criamos o primeiro método chamado index(), que apenas contém como retorno a view consumo.blade.php. Com isso podemos concluir que ao acessarmos a rota Route::get('/', 'Combustivel_Controller@index') o método index() será executado e nos retornará a view consumo.blade.php..
Na linha 15 definimos o segundo método gasto() e nele criamos um objeto da classe CalculoDeCombustivel() referente ao model da aplicação. A variável $valor armazenará o retorno da função calcular() e como retorno do método gasto() definiremos a view resultado.blade.php.
Note que diferentemente do retorno do método index(), a variável $valor é passada como parâmetro deste retorno. Desta forma, quando a view for carregada $valor exibirá o retorno da função calcular().
Agora com nossos arquivos criados, com as devidas declarações e referências feitas, podemos executar nossa aplicação com o comando via terminal:
php artisan serveCom a execução do comando do Código 19 poderemos acessar o endereço localhost:8000 e testar nossa aplicação, como vemos a seguir:
Página com o resultado do cálculo de consumo, onde informa o valor total gasto
Conclusão
Analisando a estrutura criada vemos a aplicação do padrão MVC onde ao acessarmos as rotas, que possuem o direcionamento para o controller, serão retornadas as views da aplicação com dados vindos do model. Com isso vimos como criar uma aplicação em Laravel e seus fundamentos para seu funcionamento.
