controle - gil eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfgil eduardo de andrade...
TRANSCRIPT
![Page 1: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/1.jpg)
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
![Page 2: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/2.jpg)
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()”
![Page 3: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/3.jpg)
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
![Page 4: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/4.jpg)
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”.
![Page 5: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/5.jpg)
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
![Page 6: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/6.jpg)
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.
![Page 7: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/7.jpg)
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’
![Page 8: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/8.jpg)
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’
![Page 9: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/9.jpg)
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”.
![Page 10: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/10.jpg)
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.
![Page 11: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/11.jpg)
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”.
![Page 12: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/12.jpg)
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.
![Page 13: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/13.jpg)
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”.
![Page 14: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/14.jpg)
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.
![Page 15: Controle - Gil Eduardogileduardo.com.br/ifpr/dwii/downloads/dwii_aula05.pdfGil Eduardo de Andrade INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto](https://reader036.vdocuments.us/reader036/viewer/2022070801/5f02617e7e708231d403fda6/html5/thumbnails/15.jpg)
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 “:”.