tecnÓlogo: anÁlise e desenvolvimento de sistemas ... · criando modal bootstrap ... mesma...

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: API / Java Script / Ajax

https://laravel.com/docs/6.x Arquivos de aula: download

Criando Seção para Código Java Script – Template Arquivo Alterado: “/resources/views/templates/main.blade.php”

Figura 01: Nova seção para codificação JavaScript - “/resources/views/templates/main.blade.php”.

Obs.: é preciso corrigir o código utilizado nas aulas anteriores, trocar a aspas simples pela aspas duplas. A seção “script” será utilizada para adicionar os códigos JavaScript, que deixará de utilizar a submissão de formulário. Arquivo Alterado: “/resources/views/raca/index.blade.php”

Figura 02: Botão de cadastro incovando função JavaScript - “/resources/views/raca/index.blade.php”.

Figura 03: Seção JavaScript, função novaRaca() - “/resources/views/raca/index.blade.php”.

Corrigir: Trocar ‘ → “

Botão Invoca uma função JS.

Função invocada pelo botão de cadastro das Raças.

Referencia o componente “modalRaca” e invoca o método show para sua exibição.

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

http://www.gileduardo.com.br/ifpr/dwii/downloads/dwii_exdoc08.zip



Criando Modal Bootstrap – Cadastro e Alteração de Raça

Arquivo Alterado: “/resources/views/raca/index.blade.php”

Figura 04: Modal de cadastro contendo formulário - “/resources/views/raca/index.blade.php”.

Figura 05: Modal de cadastro sendo exibida - “/resources/views/raca/index.blade.php”.

Ao clicar no botão “Cadastrar Nova Raça” a modal criada é exibida.



Adicionando as Entradas do Formulário de Cadastro e Alteração Arquivo Alterado: “/resources/views/raca/index.blade.php”

Figura 06: Modal de cadastro, incluindo as entradas do formulário - “.../raca/index.blade.php”.

Figura 07: Modal de cadastro sendo exibida, já com as entradas definidas - “.../raca/index.blade.php”.

Mesmo código usado na aula anterior – copiar e colar – adicionado do atributo “id” para manipulação do

componente via codificação Java Script.



Configurando Ajax → X-CSRF-TOKEN


Figura 08: Configuração Inicial do Ajax – Token CSRF do Laravel.

Configurando API – CRUD Raças

Arquivo Alterado: “/routes/api.php”

Figura 09: Configuração as rotas “/raca” na API.

Codificando os métodos para Inserção – Classe de Controle “CRaca”

Arquivo Alterado: “/app/Http/Controllers/CRaca.php”

Figura 10: Classe de Controle “CRaca” – métodos “create()” e “store()”.

Aprimorando a função Java Script “novaRaca()” → “criar()”


Figura 11: Modificando o nome da função invocada pelo botão de cadastro de raças.

Necessário, por questões de segurança, para manipulação de formulário no Laravel.

Define as rotas para as URLs com formato “/raca” – dentro da API.

Não é mais necessário, visto que o formulário de cadastro agora encontra-se dentro de uma Modal.

Mesma codificação utilizada na aula anterior, apenas modificando o retorno.

Retorno é enviado no formato “Json” para a função JS que invocou o método “store()”.



Figura 12: Renomeando e aprimorando a função “novaRaca()” → “criar()”.

Invocando a API Laravel via Ajax → Cadastrando uma nova Raça


Figura 13: Função que trata a submissão do formulário “formRaca” contido na Modal.

Figura 14: Função contendo código Ajax para invocar a API Laravel e inserir os dados no banco.

Figura 15: Inserindo um novo registro no banco como teste para codificação efetuada.

Obs.: como a requisição de cadastro foi feita a API via Ajax, não havendo um novo carregamento da página, a raça inserida não aparece na listagem da tabela. Contudo, é possível visualizar na tabela que a rotina de inserção ocorreu como

Configura o título da Modal.

Limpa os campos do formulário da Modal

Método que trata a submissão do formulário “formRaca”.

Invoca o método “insert” e depois fecha a Modal.

Monta um objeto “Json” com os dados dos campos do form.

Efetua uma requisição POST à API do Laravel,

passando o objeto “raca” criado.



esperado. A atualização da tabela (componente TableList), para exibição do novo registro logo após seu cadastro, será efetuada na sequência da aula.

Figura 15: Novo registro inserido via acesso a API do Laravel.

Modificando o componente TableList → Eventos de Exibição, Alteração e Remoção

Arquivo Alterado: “/resources/views/components/tablelist.blade.php”

Figura 16: Altera o componente TableList para trabalhar com JS.


Figura 16: Funções JS invocadas pelo componente TableList.

Figura 17: Funções JS invocadas pelo componente TableList – exemplo de funcionamento.

Adiciona um atributo “id” necessário para o JS.

Modifica os eventos de exibição, alteração e remoção para invocar métodos JS.

Ao clicar no ícone de Informações da Raça o método “visualizar()” é invocado com o “alert()”



Atualizando a Tabela de Raças após um novo registro


Figura 18: Função “getLin()” que monta o HTML necessário para inserir um novo registro na tabela.

Figura 19: Função “getLin()” que monta código HTML para nova linha na tabela.

Figura 20: Tabela pós inserção – recebendo novo registro – exemplo.

Recebe e converte os dados inseridos, invoca o método

“getLin()” e insere novo registro na tabela.

Monta o código HTML para inserir uma nova linha na tabela via Java

Script.

Linha inserida, Tabela atualizada



Codificando os métodos para Alteração – Classe de Controle “CRaca”


Figura 21: Incluindo <input> contendo o “id” da raça que sofrerá alteração – Modal “modalRaca”.

Figura 22: Alterando a função JS “form-submit()” para suportar inserção e atualização.

Figura 23: Alterando a função JS “editar()” para receber o “id” e obter os dados da raça que será alterada.

Figura 24: Alterando as chamadas da função JS “editar()” para passar o “id” da raça – Função JS “getLin()”.

Entrada que recebe o “id” da raça.

Verifica se o input “id” possui um valor configurado. Se sim, chama o método “update()”.

Caso contrário, invoca o método “insert()”.

Configura o título da Modal.

Função “editar()” recebe o “id” da raça.

Efetua requisição HTTP à API, obtém os dados da raça em “data”

Configura os campos de entrada da Modal com os dados recebidos.

Passa o “id” da raça para os métodos JS.




Figura 25: Alterando as chamadas da função JS “editar()” para passar o “id” da raça – Componente “TableList”.


Figura 26: Codificando a função JS “update()” para alterar os dados da raça no banco.

Passa o “id” da raça para os métodos JS.

Monta um objeto “Json” com os dados dos campos do formulário.

Efetua uma requisição PUT à API do Laravel, passando o objeto “raca” criado.

Obtém as linhas do componente “TableList”.

Utiliza função “filter()” para

encontrar a linha alterada.

Atualiza os dados da linha que foi

modificada.

Insere um campo novo na tabela que armazena o “id” da raça. Utilizado para atualizar a linha da tabela quando uma

alteração é efetuada.




Figura 27: Classe de Controle “CRaca” – método “show()”.

Obs.: método que será invocado pela função JS “editar()” via requisição Ajax → $.getJSON('/api/raca/'+id, function(data){}).

Figura 28: Classe de Controle “CRaca” – métodos “edit()” e “update()”.

Não é mais necessário, já que o formulário de alteração agora encontra-se dentro de uma Modal.


Retorno é enviado no formato “Json” para a função JS que invocou o método “update()”.


Retorna o código de estado HTTP “404” que indica “Não Encontrado”.



Figura 29: Alterando o registro da raça Bull Terrier – Exemplo prático.

Criando uma Nova Modal Bootstrap – Remoção de Raça


Figura 30: Modal de remoção de raça – confirmar se usuário realmente deseja deletar o registro.

Figura 31: Codificando a função JS “remover()” para deletar o registro de uma raça do banco.

Figura 32: Alterando as chamadas da função JS “remover()” para passar o “nome” da raça – Função JS “getLin()”.


Figura 33: Alterando a chamada da função JS “remover()”, passando o “nome” da raça – Componente “TableList”.

Identificador da raça a ser removida.

Se o usuário selecionar a opção “Sim” a função JS “remove()” é invocada.

Apaga o conteúdo da Modal e insere a mensagem de confirmação de remoção.

Configura o identificador da Modal com “id” da raça

Define um novo parâmetro para o nome da raça.




Figura 34: Codificando a função JS “remove()” para deletar o registro do banco.


Figura 35: Figura 28: Classe de Controle “CRaca” – método “destroy()”.

Efetua uma requisição DELETE à API do Laravel, passando o “id” da raça.

Obtém as linhas do componente “TableList”.

Obtém o “id” do <input> da Modal.

Utiliza função “filter()” para encontrar a linha removida.

Remove linha que foi deletada.


Retorna o código de estado HTTP “200” que indica “Sucesso”.



Figura 36: Exemplo de execução – função JS “remove()” – deletando um registro do banco.

Criando uma Nova Modal Bootstrap – Informações de Raça Arquivo Alterado: “/resources/views/raca/index.blade.php”

Figura 37: Modal de informações da raça.

Figura 38: Codificando a função JS “visualizar()” para exibir as informações da raça.

Ao clicar no ícone de remover raça o método “remove()” é invocado e o registro é removido.



Figura 39: Exemplo de execução – função JS “visualizar()” – exibindo informações da raça.

Extra: Invocando API/Obtendo Dados ao carregar a página


Figura 40: Codificando as funções JS “$(function())” e “loadRacas” – Invocando a API ao carregar a página.

Ícone Informação → método “visualizar()” invocado.

Função JS invocada automaticamente quando a página é carregada. Nela é chamada a função que carrega os dados.

Efetua requisição a API para obter os dados da raça que serão adicionados ao campo de busca, localizado na parte superior da janela.



Figura 41: Removendo codificação “Blade” – preenchimento será feito pela função JS “loadRaca”.

Arquivo Alterado: “/routes/api.php”

Figura 42: Adiciona rota para obter dados durante o carregamento da página.

Obs.: a nova rota deve ser adicionada antes da codificação Route::resource(‘raca’,

‘CRaca’);.


Figura 43: Classe de Controle “CRaca” – método “loadJason()”.

Figura 44: Exemplo de execução – função JS “loadRacas()” – preenche o campo de busca.

Define uma nova rota: “/raça/load”.

Retorna os dados em formato “Json”.

Dados obtidos durante o carregamento da página.

tecnÓlogo: anÁlise e desenvolvimento de sistemas ... · criando modal bootstrap ... mesma...

Documents