Índice
Muitas vezes, ao programar páginas com pHp e fazer consultas a um banco de dados, devemos atualizar a página web para que o php seja processado no servidor, consultar o banco de dados e depois retornar o resultado.Esse redirecionamento da web, geralmente leva alguns segundos em alguns casos, mostrando ao usuário uma página em branco enquanto os dados estão sendo processados e exibidos. Para conseguir uma interface mais transparente para o usuário na hora de fazer solicitações ao servidor, podemos usar AJAX, que é a tecnologia que nos permitirá fazer consultas em uma página da web que precisa de uma resposta do servidor sem recarregá-la. Começaremos um exemplo com uma listagem na web para gerenciar uma Agência de Veículos.
Vamos primeiro criar o banco de dados em Mysql para fazer isso nos use Phpmyadmin. Abaixo de Código SQL.
1) Nós criamos o banco de dados
CREATE DATABASE auto_agency;
2) Em seguida, vamos criar as tabelas
- a) Estrutura da tabela para a tabela de veículos
CRIAR TABELA SE NÃO EXISTIR `veículos` (` id` int (10) NÃO NULO AUTO_INCREMENT, `veículo_type` int (255) PADRÃO NULO, texto de` características`, `marca` varchar (255) PADRÃO NULO,` modelo` varchar ( 255) DEFAULT NULL, `normal_price` decimal (10,2) DEFAULT NULL,` description` varchar (255) DEFAULT NULL, `photo1` varchar (255) DEFAULT NULL,` photo2` varchar (255) DEFAULT NULL, PRIMARY KEY ( `id`)) ENGINE = CHARSET PADRÃO MyISAM = latin1 AUTO_INCREMENT = 1;
- b) Estrutura da tabela para a tabela de marcas
CRIAR TABELA SE NÃO EXISTIR `marcas` (` id` int (11) NÃO NULO AUTO_INCREMENT, `veículo_type` int (10) PADRÃO NULO,` marca` varchar (200) PADRÃO NULO, CHAVE PRIMÁRIA (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- c) Nós inserimos as marcas registradas
INSERIR EM `marcas` (` id`, `veículo_tipo`,` marca`) VALORES (1, 1, 'HONDA'), (3, 1, 'AUDI'), (4, 1, 'BMW'),
- d) Estrutura da tabela para a tabela de modelos
CRIAR TABELA SE NÃO EXISTIR `modelos` (` id` int (11) NÃO NULO AUTO_INCREMENT, `Vehicle_type` int (200) PADRÃO NULO,` marca id` int (200) PADRÃO NULO, `modelo` varchar (255) PADRÃO NULO , PRIMARY KEY (`id`)) ENGINE = MyISAM DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- e) Inserimos alguns dados na tabela de modelos
INSERT INTO `models` (` id`, `vehicle_type`,` brand id`, `model`) VALORES (1, 1, 1, 'ACCORD'), (2, 1, 1, 'JAZZ'), (3 , 1,1, 'CIVIC');
- f) Estrutura da tabela para a tabela type_vehiculo
CRIAR TABELA SE NÃO EXISTIR `Vehicle_type` (` id` int (10) NOT NULL AUTO_INCREMENT, `Vehicle_type` varchar (200) DEFAULT NULL, PRIMARY KEY (` id`)) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1;
- g) Inserimos alguns dados na tabela type_vehiculo
INSERT INTO `Vehicle_type` (` id`, `Vehicle_type`) VALUES (1, 'Cars'), (2, 'Motorcycles')
Até agora, criamos todo o banco de dados.
1) Conecte-se ao banco de dados Mysql criando o arquivo config.php
Vamos criar uma página web que se chamará index.php onde teremos o código para mostrar a lista de veículos e então filtrar a lista com jquery. O layout que usamos para o tutorial é bastante direto.
Em seguida, criamos o painel superior:
| Veículos | Marcas Registradas | Modelos |
| Selecionar | Selecionar | Selecionar |
Então virá o código da lista com as consultas sql, o div servirá para mostrar a lista filtrada:
| Veículo | Marca | Modelo | foto | Ações | |
 | Modificar | ||||
Agora que temos a lista funcionando devemos criar o filtro com o Jquery e programar a funcionalidade relacionada ao select. Na primeira seleção de Veículo, adicionamos uma consulta e modificamos a seleção da seguinte maneira:
Selecionar
Ao executar, o select será carregado com os veículos:
Criaremos um arquivo chamado functions.js para armazenar o código Jquery e adicioná-lo à página abaixo do script anterior da seguinte maneira:
O primeiro script será aquele que ao selecionar um tipo de veículo ativa o select com as marcas
$ (function () {$ ("# veículo"). change (function () {// o script é ativado quando eu seleciono o veículo selecionado = $ (this) .val () // Eu tomo o valor selecionado / / enviar para uma página que fará a consulta sql e retornará os dados para colocar no select $ .get ("http: //localhost/proyectos/agenciaautos/marcas.php? idvehiculo =" + veículo, função (dados) { $ ("#mark"). html (data); // Eu pego o resultado e insiro os dados na marca de seleção});});}); Criamos o arquivo marks.php que será quem fará a consulta que será carregada no Select Brands:
Assim, ao selecionar um tipo de veículo, são ativadas as marcas selecionadas correspondentes ao tipo de veículo.
$ (function () {$ ("# marca"). change (function () {brand = $ (this) .val () // Valor selecionado $ .get ("http: // localhost / projects / autoagency / model .php? markid = "+ mark, function (data) {$ (" # model "). html (data); // Eu pego o resultado da página e insiro os dados no select});});}); Criamos o arquivo models.php para realizar a consulta:
Finalmente, ao selecionar o modelo, adicionaremos no mesmo script que nos mostra a lista mas filtrada de acordo com as opções selecionadas e atribuiremos o resultado ao div id = "list"
O script juqery que ativa a lista do modelo selecionado será
$ (function () {$ ("# model"). change (function () {model = $ (this) .val () // Valor selecionado $ .get ("http: // localhost / projects / autoagency / listagem .php? idmodel = "+ model, function (data) {$ (" # listing "). html (data); // Eu pego o resultado da página e insiro os dados na lista div});});}); O arquivo listagem.php que realizará a consulta do filtro:
| Veículo | Marca | Modelo | foto | Ações | |
| Modificar | ||||
Por fim, como é o exemplo com os filtros funcionando, faltaria restaurar a lista ao original e cadastrar o veículo que veremos em outro tutorial.
