Formulário de busca

Algo relativamente comum em páginas de internet e outras interfaces é o uso de formulários para busca de alguma coisa em determinada cidade em um determinado período. Os dados estão em um banco de dados, mas como fazer a busca de uma forma segura e acessível a partir de qualquer navegador web?

Tela de busca por estado/cidade e datas inicial/final, com resultado em tabela - sem CSS

Tela de busca por estado/cidade e datas inicial/final, com resultado em tabela - sem CSS

Abaixo segue um modelo usando HTML, PHP e Javascript (com jQuery e JSON) usando consulta em um banco de dados MySQL. Como o código ficou meio grande, ele está em um arquivo compactado junto com os outros scripts: busca_cidades.zip (baixe os arquivos e acompanhe a explicação nos códigos comentados).

Busca de cidade em uma lista dividida por estado

Não é indicado deixar um campo de texto livre para o usuário digitar o nome da cidade, devido a erros de digitação, nem procurar o nome em uma lista gigantesca de nomes. Uma opção muito adotada é a de escolher o estado em um lista para então abrir uma segunda lista só com os nomes das cidades desse estado.

Primeiramente, é necessário criar uma database com duas tabelas: uma com sigla e nome de estado e outra com os códigos, cidades e seu respectivo estado. O script SQL abaixo (cria_tabelas.sql) escolhe a database, apaga tabelas que existam com esse nome (caso existam), cria as tabelas e as popula. A lista de cidades vem de um arquivo CSV, gravado em UTF-8.

O sinal de crase serve para evitar confusão com caracteres estranhos e palavras reservadas - por exemplo, somente é possível criar e manipular uma tabela chamada "TO" quando estiver dentro de crases. O script deve ser executado no terminal Linux do PC com o banco de dados como:

$ mysql -u USUARIO -pSENHA < cria_tables.sql

No PHP, primeiro é feita uma consulta ao banco de dados para montar a lista (do tipo "select") de siglas de estados. Com a escolha, ela é usada como argumento para construir um objeto JSON com as cidades desse estado, montando assim a segunda lista. O código desse script (cidades.ajax.php) chama o arquivo "DBconn.php", que contém as credenciais para conexão ao banco de dados.

Como os nomes das cidades foram gravados usando UTF-8, a consulta também deve usar "COLLATE utf8_general_ci".

Essa parte foi uma adaptação dos códigos disponíveis no site do Davi Ferreira, onde a relação entre cidade e estado se dá através de um código em vez da própria sigla do estado. Para criar a tabela, foi utilizado um arquivo CSV com outros códigos de cidade, em vez de criar diretamente na rotina SQL.

Busca por data usando calendários

Dois campos de texto recebem as datas de início e término da busca, no formato "dd/mm/YYYY". Uma aplicação jQuery monta um calendário com selects de mês e ano, além de setas de navegação, para facilitar a escolha do dia. No "head", uma função específica para a classe "calendario" possui os nomes e siglas em português para os dias da semana e meses. Uma verificação em JavaScript coloca as datas do dia atual e três dias antes nos campos, caso não tenha recebido nenhuma variável via POST ou GET.

Resultados da busca ao banco de dados (formulário)

Um formulário HTML enviar a cidade, data de início e data final de busca em três variáveis de sessão via POST - tanto o envio quanto o recebimento acontecem no mesmo arquivo (busca_cidades.php). O PHP recebe as variávaies "estado", "cod_cidade", "start_date" e "end_date", sendo que as datas devem ser tratadas para mudar para o formato "YYYY-mm-dd" presente no banco de dados. Montada a query para consulta, basta realizar a consulta e imprimir linha a linha o resultado em uma tabela HTML construída no própriio código PHP.

Compartilhe o link desse texto, mas se for copiar algum trecho, cite a fonte. Valorize nosso trabalho.
Mais informações na licença de uso do site.