Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (1/15)

TECNÓLOGO: ANÁLISE E DESENVOLVIMENTO DE SISTEMAS Disciplina de Desenvolvimento Web II

Framework Laravel: View / Blade / Componentes /Bootstrap

https://laravel.com/docs/6.x

Modelo MVC – Laravel

Instalando Bootstrap

Comando: composer require laravel/ui

Figura 01: Instalando Bootstrap no Laravel 6.* – UI.

Controle

Visualização Modelo

BD

Solicita: Dados

Resposta: Dados

Requisição: Cliente

Envia: Dados

Resposta: Requisição Cliente

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (2/15)

Comando: php artisan ui bootstrap

Figura 02: Instalando Bootstrap no Laravel 6.* – Bootstrap.

Comando: npm install && npm run dev

Figura 03: Instalando Bootstrap no Laravel 6.* – npm install.

Arquivos Gerados: “/public/css/app.css” e “/public/js/app.js”

Figura 04: Arquivos Bootstrap gerados após instalação – “app.css” e “app.js”.

Passagem de Parâmetros para View – Maneiras

Arquivo: /app/Http/Controllers/Cliente.php Arquivo: /resources/views/cliente/index.blade.php Método de Passagem: “compact()”

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (3/15)

Figura 05: Passagem de Parâmetro para View – Utilizando “compact”

Figura 06: Passagem de Parâmetro para View – Utilizando “compact” com array de dados.

Arquivo: /app/Http/Controllers/Cliente.php Arquivo: /resources/views/cliente/index.blade.php

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (4/15)

Método de Passagem: “with()”

Figura 07: Passagem de Parâmetro para View – Utilizando “with”.

Laravel Blade – Condição Arquivo: /resources/views/cliente/index.blade.php

Figura 07: Condição usando Blade – IF / ELSEIF / ELSE – “/views/cliente/index.blade.php”.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (5/15)

Figura 08: Resultado para codificação da Figura 07 – Condição usando Blade.

Laravel Blade – Laço de Repetição Arquivo: /resources/views/cliente/index.blade.php

Figura 09: Laço usando Blade – FOR – “/views/cliente/index.blade.php”.

“Gil Eduardo” em negrito

“Carlos” em itálico

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (6/15)

Laravel Blade – Criando Templates → Utilizando o recurso @yield(‘nome_secao’) Diretório Criado: /resources/views/templates

Arquivo Criado: /resources/views/templates/main.blade.php

Figura 10: Blade Template – @yield() – “/views/templates/main.blade.php”.

Figura 11: Resultado para codificação da Figura 10 – Blade Template. → Utilizando os recursos @extends(‘nome_template’) e @section(‘nome_secao’)

Define a seção ‘conteudo’ onde novas Views, que herdam esse template, podem adicionar seu conteúdo específico dentro do layout criado.

Define uma seção denominada ‘titulo’.

Cabeçalho definido no Template – padrão para todas as Views.

Seção ‘conteudo’ definida no Template – será preenchida pelas Views que utilizam esse Template.

Rodapé definido no Template – padrão para todas as Views.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (7/15)

Arquivo Modificado: /resources/views/cliente/index.blade.php

Figura 12: Blade Template – @extends() e @yield() – “/views/cliente/index.blade.php”.

Figura 13: Resultado para codificação da Figura 12 – Blade Template.

Herda o layout padrão definido na View main.blade.php

Preenche as seções definidas no template main.blade.php

Texto ‘Clientes’ inserido na seção ‘titulo’

Informações inseridas na seção ‘conteudo’

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (8/15)

Arquivo Modificado: /resources/views/cliente/create.blade.php

Figura 14: Blade Template – @extends() e @yield() – “/views/cliente/create.blade.php”.

Figura 15: Resultado para codificação da Figura 14 – Blade Template.

Bootstrap – Melhorando o Layout das Views

Arquivo Modificado: /resources/views/templates/main.blade.php Componentes Bootstrat: https://getbootstrap.com.br/docs/4.1/components/

Herda o layout padrão definido na View main.blade.php

Preenche as seções definidas no template main.blade.php

Texto ‘Novo Cliente’ inserido na seção ‘titulo’

Informações inseridas na seção ‘conteudo’

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (9/15)

Figura 16: Blade Template – Utilizando Bootstrap – “/views/template/main.blade.php”.

Figura 17: Blade Template – Recebendo Parâmetros – “/views/template/main.blade.php”.

Figura 18: Blade Template – Recebendo Parâmetros – “/views/template/main.blade.php”.

Os arquivos de estilo “app.css” e script “app.js” gerados após a instalação do Bootstrap são referenciados dentro da View de Template. A função “asset()” retorna o caminho (path) para a pasta “public”.

“$tag” é um parâmetro recebido das Views que estendem da “main.blade”. Ele é utilizado para indicar qual item da barra superior deve ficar em destaque.

“$titulo” é um parâmetro recebido das Views que estendem da “main.blade”. Ele define o título que deve ser exibido no cabeçalho do “Card”.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (10/15)

Figura 19: Resultado para codificação das Figuras 16, 17 e 18 – Blade Template com Boostrap.

Arquivo Modificado: /resources/views/cliente/index.blade.php

Figura 20: Blade Template – Estendendo e Enviando Parâmetros – “/views/cliente/index.blade.php”.

Estende do Template “main.blade” e passa como parâmetro um array contendo os valores “titulo” => “Clientes” e “tag” => “CLI”, utilizados pelo Template “main.balde” na configuração do seu layout.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (11/15)

Figura 21: Resultado para codificação da Figura 20 – Blade Template com Boostrap.

Laravel Blade – Criando Componentes Diretório Criado: /resources/views/components

Arquivo Criado: /resources/views/components/tablelist.blade.php

Figura 22: Componente “tablelist” criado –“views/components/tablelist.blade.php”.

Recebe os parâmetros “$header” e “$data” necessários para construção e correta exibição do componente “tablelist”.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (12/15)

Arquivo Modificado: /resources/views/cliente/index.blade.php

Figura 22: Utilizando o Componente “tablelist” na View “índex.balde.php”.

Obs.: os códigos HTML colocados entre as cláusulas @component() e @endcomponent() podem ser utilizados dentro do componente através da variável $slot, ou seja, pela escrita da linha de código {{$slot}}.

Laravel Blade – Criando um Alias para o Componente

Arquivo Modificado: /app/Providers/appServiceProvider.php Descrição: Service Provides ou Provedores de Serviços fornecem um conjunto de

funcionalidades (módulos) carregadas quando a aplicação Laravel é iniciada, tais como rotas, autenticação, etc.

Utiliza a cláusula @component() do Blade para adicionar o componente, passando como parâmetros o nome do componente (“tablelist”) e os dados (“header” e “data”) necessários para sua construção.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (13/15)

Figura 23: Registrando um Alias para o Componente “tablelist” – “ /app/Providers/AppServiceProvider.php”.

Arquivo Modificado: /resources/views/cliente/index.blade.php

Figura 24: Utilizando o Componente “tablelist” – “/view/cliente/índex.blade.php”.

Laravel Blade – Criando Componentes – Versão 7.* Comando: php artisan make:component Tablelist

Arquivo Criado: /app/View/Components/Tablelist.php Arquivo Criado: /resources/views/components/tablelist.blade.php

Efetua a inclusão do pacote Blade e utiliza seu método component() para registrar o Alias “tablelist” para o componente criado.

Após a criação do Alias, basta utilizar a cláusula “@”, padrão do Blade, seguido do Alias definido para o componente criado, nesse caso “tablelist”.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (14/15)

Arquivo Modificado: /app/View/Components/Tablelist.php

Figura 25: Configurando o componente criado para recebimento dos parâmetros –

“/app/View/Components/Tablelist.blade.php”.

Arquivo Modificado: /app/Providers/appServiceProvider.php Descrição: Service Provides ou Provedores de Serviços fornecem um conjunto de

funcionalidades (módulos) carregadas quando a aplicação Laravel é iniciada, tais como rotas, autenticação, etc.

Figura 26: Registrando um Alias para o Componente “tablelist” – “ /app/Providers/AppServiceProvider.php”.

Atributos que receberão os dados vindos como parâmetro.

Configura os atributos com os parâmetros recebidos via construtor.

Define a view que está vinculada ao componente criado.

Efetua a inclusão do pacote Blade e utiliza seu método component() para registrar o Alias “tablelist” para o componente criado.

Gil Eduardo de Andrade

INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (15/15)

Arquivo Modificado: /resources/views/cliente/index.blade.php

Figura 27: Utilizando o Componente “Tablelist” – “/view/cliente/índex.blade.php”.

Obs.: para versão 7.* do Laravel os componentes, após registro, são utilizados da mesma forma que os elementos HTML, como tags. Entretanto, é necessário colocar o marcador “x-” antes do nome do componente criado. Para passagem de parâmetros utilizamos os atributos do elemento, que devem conter o mesmo nome dos atributos definidos na classe do componente criado. Por fim, caso o valor passado para esse atributo não seja estático, como uma variável php, o nome do atributo deve ser iniciado com “:”.