[Básico] Exibição de busca + JavaScript(popup) para detalhes do item b

[Kharel 0]

Bom dia pessoal! neste artigo veremos como fazer uma busca em PHP e retornar um resultado limpo. Com uma opção de ver mais, que te levará a um popup exibindo todos os dados da linha de busca em questão. Resolvi fazer este artigo em específico porque a primeira vez que precisei exibir dados de busca, achei a busca muito feia e tive que quebrar um pouco a cabeça em encaixar os popup, como não encontrei nada que falasse em busca mais exibição em popups, achei que seria um artigo legal pra comunidade.

 

 

Está ai meu primeiro Artigo, espero que gostem. Como pretendo criar mais deles, estou abrindo junto com meu primeiro artigo um blog para armazena-lo.

 

http://valtingojer.com.br/blog_do_khal/?p=4

[Matias Rezende 50]

Kharel

 

Quando postar artigos, poste o conteúdo também, senão o fórum só servirá de ponte para o seu blog, que não é o objetivo nem mesmo permitido. Pode manter a fonte, mas o conteúdo deve ficar aqui, para o caso do seu blog sair do ar ou mudar de endereço a referência não ficar perdida.

 

Carlos Eduardo

[Kharel 0]

Perfeitamente meu querido! Não achei um @edit ali

-----

Nos conformes agora =) e próximos estarão em conformidade!

-----

 

Bom dia pessoal! Neste artigo veremos como fazer uma busca em PHP e retornar um resultado limpo. Com uma opção de ver mais, que te levará a um popup exibindo todos os dados da linha de busca em questão.

 

Para execução deste Artigo criaremos 3 páginas em PHP e um banco de dados. Este artigo presume que você saiba criar um banco de dados e fazer as suas interações básicas. Mas não fiquem bravos... Em artigos futuros veremos também como realizar esta operação.

 

Páginas a serem criadas.

pesquisa.php //página com nosso conteúdo de estudo para este artigo;

artigos.php // página para conexão com o banco.

popup.php // página onde serão exibidos todos os dados do seu contato

 

Para facilitar a postagem de novas matérias e minha organização pessoal mantenho o arquivo artigos.php como meu arquivo de conexão padrão para esta matéria e para as próximas. Ainda para facilitar a publicação de matérias utilizo o banco de dados padrão "blog_do_khal_artigos" localizado em "localhost" com o usuário "root" e sem senha.

 

O banco de dados criado foi:

CREATE TABLE `blog_do_khal_artigos`.`contatos` (

`id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`nome` VARCHAR( 100 ) NOT NULL ,
`descricao` VARCHAR( 255 ) NOT NULL ) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT = 'Artigo1'

A banco foi populado com os dados:

INSERT INTO `blog_do_khal_artigos`.`contatos` (

`id` ,
`nome` ,
`descricao` )
VALUES ( NULL , 'Blog do Khal', 'De quem esta aprendendo para quem quer aprender!' ), ( NULL , 'Valtingojer Sistemas Inteligentes', 'Sistemas existem muitos, mas poucos podem ser chamados de inteligentes' ), (NULL , 'AgendaNet', 'Agende suas tarefas, organize seus contatos e favoritos envie seus emails, tudo em um unico lugar');

Legal! estamos de Banco de dados feito e populado!

 

Agora vamos por a mão na massa.

 

vamos criar o arquivo de conexão com o banco de dados:

Criei o meu pelo dreamweaver, sabe.. nada paga uma praticidade :)

 

ele ficou assim:

 

(artigos.php)

<?php
$hostname_artigos = "localhost"; // endereço do banco de dados
$database_artigos = "blog_do_khal_artigos"; // nome da base de dados
$username_artigos = "root"; // nome do usuário
$password_artigos = ""; // senha no caso sem senha
$artigos = mysql_pconnect($hostname_artigos, $username_artigos, $password_artigos) or trigger_error(mysql_error(),E_USER_ERROR); //função para conectar no banco
mysql_select_db ($database_artigos); // seleciona o banco de dados utilizado
?>

Agora vamos para o arquivo busca.php !

 

Vamos fazer passo a passo para facilitar a compreensão da lógica usada.

 

Código da caixa de busca.

<form id="busca" name="busca" method="post" action="busca.php?result">
<input type="text" name="nome" id="nome" />
<input type="submit" name="buscar" id="buscar" value="buscar" />
</form>

Aqui no form temos para destacar:

method="post" // esta é a maneira como serão enviados os dados.

action="busca.php?result" // esta é a página que receberá e tratará os dados de nossa busca, no caso é nossa página de busca mesmo! a página que busca sendo a mesma página que exibe os dados da busca além de mais visual por preencher melhor a tela, fica mais prático pro usuário fazer uma nova busca! Adicionamos o parâmetro "?result" através desse parâmetro poderemos identificar quando a página foi usada para pesquisa e assim executar as funções e consultas ao banco apenas quando necessário.

 

Apenas para reforçar o nosso conhecimento e recordar de alguns conceitos, no input do nome, temos name="nome" - isso significa que nosso campo se chama nome, e por esta chamada poderemos identifica-lo.

 

Agora que temos nosso form, sabemos os nomes de nossos campos e sabemos qual página irá processar nosso resultado. Vamos criar nossa consulta ao banco de dados com os comandos abaixo.

<?php
if (isset($_POST['nome'])) {
$nome = $_POST['nome'];
$consulta = mysql_query ("SELECT * FROM contatos WHERE nome like '%$nome%' ORDER BY nome") or die (mysql_error());
$linhas = mysql_num_rows($consulta);
$resultado = mysql_fetch_assoc($consulta);
}
?>

linha a linha:

 

Linha1>

if (isset($_POST['nome'])) { - Aqui faço minha primeira verificação, if é um comando de condição, isset verifica se algo existe e $_POST['nome'] guarda os dados enviados do formulário com método POST no campo nome.

Vamos ler esta linha de duas maneiras para facilitar o entendimento.

 

Se(existir(Metodo POST['no campo nome'])) {

 

Podemos ler de outra maneira também!

 

Se foi enviado um formulário em metodo POST começa uma nova ação

 

Reafirmando o que foi dito, estamos falando SERVIDORRRRR escuta aqui! Se eu NÃO digitar nada no campo nome então você esquece essas linhas !!

 

Abrimos chaves "{" para caso a condição acima seja verdade.

Caso a página não receba essa condição, será ignorado tudo que está entre as chaves.

 

Linha2

$nome = $_POST['nome']; - Aqui estou criando uma variável chamada nome, $ indica ser uma variável. Neste caso chamada de nome, como visto no parágrafo acima $_POST['nome'] guarda o valor enviado em formulário no metodo POST no campo nome. Basicamente estou falando "Olha servidor tudo aquilo que o camarada digitou no campo nome do formulário, agora você vai guardar na variavel $nome, assim eu posso utilizar esses dados facilmente!!"

 

Linha3

$consulta = mysql_query ("SELECT * FROM contatos WHERE nome like '%$nome%' ORDER BY nome") or die (mysql_error()); - Ixii essa linha é grande :). Em primeiro criamos a variável consulta, e atribuimos a ela uma consulta ao banco de dados.

mysql_query é usado sempre que você quer consultar o banco de dados mysql com PHP.

dentro da consulta utilizamos:

SELECT selecione <> FROM de / origem <> WHERE onde / condição <> like parecido <> ORDER ordene / organização.

 

Resumindo os atributos acima.

 

Estamos falando o seguinte

 

Querido Banco MySQL - Pega TUDO da tabela contatos onde o campo nome seja parecido com %tudo que o usuário digitou% e me ordena isso pelo nome.

 

Analizando o % antes e depois da variável nome. O usuário nao lembra o nome do contato mas sabe que no meio a palavra deiv, com o parâmetro %$nome% ele vai procurar por nomes onde podem ter letras antes e depois da palavra digitada, no caso o nome poderia ser Edeivison (e acredite esse cara existe!!)

 

Se eu colocar $nome% ele vai procurar por palavra digitada + qlquer coisa como.... João... ele vai achar João da Silva e João de Souza.

 

já o %$nome encontraria palavras que encaixem antes do digitado.. esse caso encaixa bem caso você esteja procurando por sobrenomes! poderia procurar por Valtingojer e me encontrar Kharel Valtingojer.

 

Para finalizar essa linha

or die (mysql_error()); - Esse final é um tratamento a erros, caso tenha algum erro na consulta ele usa o OR (ou) DIE (morre) e mostra o mysql_error(). Então ele para a execução do script e mostra o erro gerado. Muito bom para saber onde você errou!

 

Linha4:

$linhas = mysql_num_rows($consulta); - Aqui fazemos uma variavel chamada linhas, o comando mysql_num_rows conta quantas linhas retornou em uma consulta mysql, no nosso caso a consulta foi a variável $consulta.

 

$resultado = mysql_fetch_assoc($consulta); - Com o comando mysql_fetch_assoc, podemos guardar o resultado de uma consulta MySql em uma variável, no caso estamos pegando a consulta feita na variavel $consulta e guardando dentro da $resultado como array, assim sempre que eu usar $resultado['nome_do_campo'] terei o resultado registrado nesse campo do banco de dados.

 

 

 

Agora que já fizemos nossa consulta vamos compor o resultado de nossa pesquisa !!

Como este código é maior vou comentando ele durante o código. Essa parte do código é bom por depois do form de busca, assim podemos exibir os itens buscados abaixo da caixa de pesquisa.

<?php

if (isset($_GET['result'])) { //aqui verifico se recebi informações em get,
// no caso esse get é o parâmetro que usamos no form, lembram? action="busca.php?result


if($linhas == 0 || empty($nome)) //aqui fazemos duas verificações, se a consulta retornou 0 linhas e se o campo nome está vazio.
//Mas porque verificar as linhas? se o sql nao retornou linhas na consulta logo nao teve resultado na pesquisa ;)
{
echo "Nenhum resultado encontrado"; //caso a condição acima aconteça ele avisa que nenhum resultado foi encontrado
//se você quiser ainda pode fazer 2 tratamentos um só´para as linhas e outro só para o campo vazio :)
}
else //caso contratrio, ou seja caso tenha resultado válido da pesquisa e o campo tenha sido preenchido.
{
$n=0; //ele cria uma varável chamada n com o valor 0, vamos usa-la como contador
echo "O resultado da pesquisa é. <br>"; //mostra na tela essa informação
do { //aqui começamos um loop, para exibir todos os resultados da pesquisa, do = FAÇA
$n++; //lembra de nosso contador? aqui eu faço o valor dele +1
echo $resultado['nome']; //Nesta linha estou pedindo para exibir o resultado da pesquina no campo nome.
?>//aqui estou interrompendo meu código PHP, preste bem atenção!
<script language='JavaScript'> //começo um código JavaScript
function popup<?php echo $n; ?>() //crio uma função chamada popup vê que comecei um codigo php no meio do nome da função?
//Aqui estou fazendo o seguinte, para que cada "ver mais" de minha busca tenha um numero único, criei um contador
//e o PHP adiciona 1 a esse contador e fala o numero atual sempre como uma nova função
//ele fará isso sempre que tiver uma linha a mais na consulta, nesse caso teremos popup1()popup2()popup3()popup4()
//e quanto forem necessários
{
open("popup.php?id=<?php echo $resultado['id']; ?>","DefaultWindow", "width=300,height=200,toolbar=no,scroll=no,status=no");
//nessa linha pucho o comando open, para abrir uma nova janela, passo o parâmetro ?id=<?php echo $resultado['id']; ?> viu que
//abri e fechei um php novamente? to falando nele que o id é igual ao id atual do resultado da consulta que fizemos ao sql.
//como complemento definimos o tamanho da janela e perfumarias como sem toolbar, sem scroll e sem statusbar.
}
</script> <!---- fechei meu java script ---->

<a href="#" onClick="popup<?php echo $n; ?>();"> Ver Mais...</a><br /> <!----aqui criei um link chamado "ver mais.."---->
<!---- Nesse link atribui a função onClick, ou seja QUANDO CLICAR, será puxada a função popup numerada pelo---->
<!---- nosso contador---->

<?php
}while ($resultado = mysql_fetch_assoc($consulta)); //voltando ao tão amado PHP, se lembra que iniciamos um do{ lá encima ?
//bom se você não lembra vou refresca sua memória
//@cote ""do { //aqui começamos um loop, para exibir todos os resultados da pesquisa, do = FAÇA""
//O while é o complemento dessa função, while significa enquanto, então faremos { função } enquanto.... no nosso caso será
//enquanto a função $resultado tiver resultados de nossa consulta (mysql_fetch_assoc) a função $consulta
}
}
?>

Uffa, achei que não acabava mais :)

 

agora por ultimo para que nossa consulta funcione, precisamos chamar a página de conexão com o banco.

no topo da página coloque.

<?php require("artigos.php"); ?>

Aqui estamos falando o seguinte, Olha servidor pega o arquivo artigos.php, nesse arquivos foi onde definimos usuário e senha do banco. Acho que dispensa maiores explicações né ?

 

nossa página busca.php está criada!

Vamos rever o código de maneira limpa e sem comentários?

 

busca.php

<?php require("artigos.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<?php
if (isset($_POST['nome'])) {
$nome = $_POST['nome'];
$consulta = mysql_query ("SELECT * FROM contatos WHERE nome like '%$nome%' ORDER BY nome") or die (mysql_error());
$linhas = mysql_num_rows($consulta);
$resultado = mysql_fetch_assoc($consulta);
}
?>

<p> </p>
<form id="busca" name="busca" method="post" action="busca.php?result">
<input type="text" name="nome" id="nome" />
<input type="submit" name="buscar" id="buscar" value="buscar" />
</form>
<p> </p>

<?php

if (isset($_GET['result'])) {


if($linhas == 0 || empty($nome))
{
echo "Nenhum resultado encontrado";
}
else
{
$n=0;
echo "O resultado da pesquisa é. <br>";
do {
$n++;
echo $resultado['nome'];
?>
<script language='JavaScript'>
function popup<?php echo $n; ?>()
{
open("popup.php?id=<?php echo $resultado['id']; ?>","DefaultWindow", "width=300,height=200,toolbar=no,scroll=no,status=no");
}
</script>

<a href="#" onClick="popup<?php echo $n; ?>();"> Ver Mais...</a><br />

<?php
}while ($resultado = mysql_fetch_assoc($consulta));
}



}

?>

<p> </p>
</body>
</html>

Vamos lá! o mais duro já passou! agora precisamos apenas criar a página popup.php para que nossa janela popup seja aberta !

E essa é mole!! ainda mais que agora você ta manjando tudo !!

<?PHP
$id = $_GET['id']; // Aqui recebo o parâmetro que foi passado no link "ver mais..." lembra? "?id=<?php echo $resultado['id']; ?>"
$consulta = mysql_query ("SELECT * FROM contatos WHERE id='$id'") or die (mysql_error()); //Fazemos a consulta com base no id do contato
$resultado = mysql_fetch_assoc($consulta); //guardamos o resultado da consulta na variável

//Abaixo mostramos o resultado com todos os dados do nosso contato

echo "<b>ID do contato: </b>" . $resultado['id'] . "<br>";
echo "<b>Nome do contato: </b>" . $resultado['nome'] . "<br>";
echo "<b>Descrição: </b>" . $resultado['descricao'];

?>

<?php require_once('artigos.php'); ?> // coloque isso no início da página, para poder conectar no banco

Agora vamos ver o código limpo dessa página

 

popup.php

<?php require_once('artigos.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<?PHP
$id = $_GET['id'];
$consulta = mysql_query ("SELECT * FROM contatos WHERE id='$id'") or die (mysql_error());
$resultado = mysql_fetch_assoc($consulta);

echo "<b>ID do contato: </b>" . $resultado['id'] . "<br>";
echo "<b>Nome do contato: </b>" . $resultado['nome'] . "<br>";
echo "<b>Descrição: </b>" . $resultado['descricao'];

?>

</body>
</html>

Está ai gente! espero que tenham gostado desse artigo!

----

 

Kharel M. Valtingojer