tecnÓlogo: anÁlise e desenvolvimento de sistemas ... · criando modal bootstrap ... mesma...
TRANSCRIPT
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (2/15)
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (3/15)
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (4/15)
Configurando Ajax → X-CSRF-TOKEN
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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()”
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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()”.
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 12: Renomeando e aprimorando a função “novaRaca()” → “criar()”.
Invocando a API Laravel via Ajax → Cadastrando uma nova Raça
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (6/15)
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.
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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()”
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (7/15)
Atualizando a Tabela de Raças após um novo registro
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (8/15)
Codificando os métodos para Alteração – Classe de Controle “CRaca”
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (9/15)
Arquivo Alterado: “/resources/views/components/tablelist.blade.php”
Figura 25: Alterando as chamadas da função JS “editar()” para passar o “id” da raça – Componente “TableList”.
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (10/15)
Arquivo Alterado: “/app/Http/Controllers/CRaca.php”
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.
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 “update()”.
Mesma codificação utilizada na aula anterior, apenas modificando o retorno.
Retorna o código de estado HTTP “404” que indica “Não Encontrado”.
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 29: Alterando o registro da raça Bull Terrier – Exemplo prático.
Criando uma Nova Modal Bootstrap – Remoção de Raça
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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()”.
Arquivo Alterado: “/resources/views/components/tablelist.blade.php”
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.
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 Alterado: “/resources/views/raca/index.blade.php”
Figura 34: Codificando a função JS “remove()” para deletar o registro do banco.
Arquivo Alterado: “/app/Http/Controllers/CRaca.php”
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.
Mesma codificação utilizada na aula anterior, apenas modificando o retorno.
Retorna o código de estado HTTP “200” que indica “Sucesso”.
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 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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (14/15)
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
Arquivo Alterado: “/resources/views/raca/index.blade.php”
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.
Gil Eduardo de Andrade
INSTITUTO FEDERAL DO PARANÁ | Paranaguá Rua Antônio Carlos Rodrigues, 453 - Porto Seguro, Paranaguá - PR | 83215-750 – Brasil (15/15)
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’);.
Arquivo Alterado: “/app/Http/Controllers/CRaca.php”
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.