Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade...

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

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



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()”



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



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”.



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



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.



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’



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’

https://getbootstrap.com.br/docs/4.1/components/



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”.



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


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.



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”.




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.



Figura 23: Registrando um Alias para o Componente “tablelist” – “ /app/Providers/AppServiceProvider.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”.



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.




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 “:”.

Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade...

Documents

Transcript of Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade...