Advertisement

[Exercício] Utilizando AJAX


1- Introdução

Nesse exercício iremos entender melhor como é possível utilizar o AJAX para tarefas de programação do cotidiano. Além disso, ele mostrará claramente como as requisições são feitas a medida que você precisa delas, representando um ganho significativo no desempenho da sua aplicação.
Para construir o sistema que esse exercício propõe utilizaremos o Jquery como framework. Essa ferramenta irá te auxiliar a fazer as requisições e permitir um ganho de desempenho ao escrever o código JavaScript. Você pode acessar a documentação do Jquery aqui:


A primeira ação que você precisará é construir o seu ambiente com as bibliotecas que irá utilizar. O Jquery não precisa ser baixado em sua máquina, podemos usar uma versão armazenada nos servidores da Google apenas adicionando o seguinte código ao seu HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Para construir esse exemplo, você pode usar CSS da forma que você quiser. No entanto, para ajudar no desenvolvimento você também pode utilizar o Bootstrap:


Para adiciona-lo ao seu código basta colar o código abaixo dentro da tag <head> da sua página:

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">



2- Entendendo o serviço

Em geral, quando falamos de AJAX, temos um serviço que provê informações ao programador. Esse serviço geralmente é construído na intenção de melhorar a compatibilidade de aplicações. Em geral esses serviços são “chamados” e eles “retornam” um objeto JavaScript (JSON) ou então um XML.
Para esse exercício, o serviço já foi construído e pode ser encontrado no arquivo “servico.php”. Ao início desse arquivo você encontrará a declaração de 2 classes: Produto e Descricao.


class Descricao{
    public $idProduto;
    public $precoProduto;
    public $marcaProduto;
    public $descricaoProduto;
}

class Produto{
    public $idProduto;
    public $imagem;
    public $nomeProduto;
}

Você irá perceber que nesse arquivo um array simples é declarado e preenchido com os dados de produtos aleatórios. Esses dados serão utilizados como retorno para requisições do usuário.
A seguir é possível perceber também que esse serviço verifica se alguns parâmetros foram passados via URL ($_GET[‘’]). Caso eles tenham sido passados, o serviço retornará uma resposta ao usuário.
Os parâmetros disponíveis são:

todosProdutos = 1 → Retorna todos os produtos cadastrados
produto = [id do Produto] → retorna os dados do produto
descricaoProduto = [id do Produto] → retorna a descrição do produto.

Veja um exemplo de funcionamento (usando o XAMPP como servidor – o projeto está dentro da pasta HTDOCS com o nome “ajax”):


3- Requisitos da aplicação

Considerando o serviço que foi descrito anteriormente, você deverá construir uma aplicação que seja capaz de:
  1. Mostrar todos os produtos em uma página.
  2. Cada produto deverá conter um botão “ver mais detalhes” – Esse botão deverá mostrar em uma parte separada da tela os detalhes do produto.
  3. A tela de detalhes será preenchida com os dados retornados pelo serviço utilizando a URL corretamente. Por exemplo: localhost/ajax/servico.php?descricaoProduto=1.
  4. Para mostrar os detalhes deve-se utilizar Jquery para fazer as requisições assim como o exemplo mostrado em aula
  5. É opcional a utilização de CSS para estilizar a página.


Veja um exemplo de como sua aplicação pode ficar:



a)Tela mostrando os produtos – (sem descrição).



b)Tela mostrando os produtos após clicarmos em “ver descrição” do produto Pepsi Twist.


Nenhum comentário

Conta pra mim sua opinião!

Fale comigo