Artigos PHP Primeiros passos com Laravel
Por que eu devo ler este artigo:O Laravel é um framework de desenvolvimento com uma curva de aprendizado baixa, pois tem como objetivo facilitar as etapas de criação e publicação de uma aplicação PHP. Para isso as tarefas mais comuns no desenvolvimento de uma aplicação, que vão desde consultas ao banco de dados, autenticação, e-mail e cache são abstraídas pelos componentes que o framework fornece.

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

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 que se refere a rotas, / corresponde a raiz do seu projeto.

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';

});
Código 1. Exemplo de rota
Nota: Os arquivos do diretório routes serão carregados automaticamente pelo Laravel.
  • 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>
Código 2. Declaração da view

É 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');

});
Código 3. Retornando um view

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
Código 4. Criando o primeiro controller

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 {

}
Código 5. Controller padrão gerado

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!';
    }
}
Código 6. Exemplo de controller simples

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');
Código 7. Rota para o controller simples

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
Código 8. Criando o primeiro model

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
}
Código 9. Arquivo model padrão

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
Código 10. Criação do projeto 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');
Código 11. Definição das rotas

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>
Código 12. View - consumo.blade.php

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.

Nota: URL() é uma função do Laravel usada para gerar URLs arbitrárias para sua aplicação. Ela faz parte de um conjunto chamado helpers.

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>
Código 13. View - resultado.blade.php

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.

Nota: A função asset() é utilizada para referenciar o caminho do tema, que pode ser composto por arquivos CSS, JavaScript e imagens.

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; 
}
Código 14. Criando o model da aplicação

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
Código 15. Criando o model da aplicação

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;
       
    }
}
Código 16. Criando o model da aplicação

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 CombustivelController
Código 17. Criando o controller da aplicação

No 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]);
    }
}
Código 18. Criando os métodos do controller

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 serve
Código 19. Executando a aplicação

Com 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:

Slide 1 Slide 2
#PraCegoVer - Transcrição dos Slides Página principal da aplicação, com as instruções no topo e abaixo os campos "Distâncias em Quilômetros a ser percorrida" e "Consumo de combustível do veículo", além do botão calcular
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.

Confira também

Introdução ao PHP

Introdução ao PHP

Curso
Curso de Laravel

Curso de Laravel

Curso
Bate-papo sobre PHP

Bate-papo sobre PHP

Vídeo