Ir para conteúdo
Fórum Script Brasil
  • 0

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


Kharel

Pergunta

Bom dia pessoal! Sou novo aqui no forum, ao menos novo de registro rsrs.

Agradeço muito ao pessoal que tem se dedicado em postar materias e artigos legais, tem ajudado muito a mim e a muitos,

Acho que depois de tanto aprender com a comunidade está na hora de começar a retribuir o tanto que vocês me ajudaram. Afinal não podemos ser chuppins para sempre né?!

Dou inicio de leve, achei legal fazer este artigo, lembro que quando tentei fazer esta função pela primeira vez tive algumas dificuldades com aplicação da lógica, nada que meia hora de ajustes não resolvesse mas.. é meia hora que vocês não precisaram perder mais :rolleyes:

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.

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

Se quiser acessar as páginas utilizadas neste tutorial sem a poluição dos comentários. Elas estão disponíveis em:

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

Artigo:

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

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 não 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 + qualquer 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 não retornou linhas na consulta logo não 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 variá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? Estou 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 último 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 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ê está 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

Está aí gente! Espero que tenham gostado deste artigo!

Abs!

email_khal.jpeg

Editado por Kharel
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...