Publicidade   
 você está aqui: phpbrasil.com    artigos    artigo  
 
:: novos artigos ::

:: recomendado ::

Fundamentos de PHP

Compre esse livro no Submarino.com.br

:: publicidade ::


:: novos scripts ::

:: elenco phpbrasil ::

Cézar Ayran
Pontos: 3952

Visite a página de perfil de Marcio MuziProgramando com Prototype (JavaScript) e PHP
por Marcio Muzi
Lista de Categorias  |  Contribua um Novo Artigo  |  Entre em Contato Conosco

Neste artigo veremos de forma simples e objetiva como fazer um sistema de pesquisa utilizando os recursos da biblioteca Prototype, que vai desde funções especificas para manipular o DOM, até funções para desenvolver com a metodologia AJAX, que é tão popular atualmente.
Vote aqui!
Média de Votos Atual: 9.09
Total de Votos: 11
Nota:   

Neste artigo veremos de forma simples e objetiva como fazer um sistema de pesquisa utilizando os recursos da biblioteca Prototype.

Visite o site oficial do Prototype em http://prototype.conio.net. A documentação não é um ponto forte do site, mas você pode ler uma boa referência da biblioteca no site do Sérgio Pereira: http://www.sergiopereira.com/articles/prototype140.js.ptBR.html.

Com o Prototype é possível desenvolver de forma simples e direta. Essa biblioteca encapsula diversas funções do Javascript. Neste artigo daremos ênfase aos métodos $(), $F(), Event.observe e principalmente à classe Ajax.Request.

Começaremos pela tela do usuário, página totalmente em HTML, onde há a inclusão dos arquivos prototype.js e request.js. No arquivo resquest.js estão as funções construídas para realizar a busca de livros.



Figura 1.1 Interface com o usuário, a primeira parte do sistema a ser construída.

Repare que no botão de pesquisa (Linha 16) não há o “onclick”, comumente utilizado para chamadas de funções Javascript. Isso é possível porque o sistema está utilizando Javascript não-obstrutivo. Em outras palavras você não precisa modificar seu código html para fazer chamadas a funções Javascript. A função responsável em iniciar o processo de busca ao clicarmos no botão de pesquisa está no arquivo request.js.


<< Anterior 1 2 3 Próxima >>

 
Imprimir  |  Enviar para um Amigo


Comentários de Usuários

PArabens
publicado por rafaelsilva - 2006-12-27 10:01:56

Artigo simples e interessante, meus parabens!

Perfeito
publicado por lando - 2006-12-27 13:48:18

Excelente.. so faltou mesmo um ZIP com o exemplo para evitar digitação do código ;-)
Espero que haja novos artigos com ajax.. tratando de formulários. Obrigado pelo artigo.

Re: Rafael Silva / Lando
publicado por Marcio Muzi - 2006-12-28 02:18:39

Rafael e Lando, muito obrigado pelo incentivo, são comentários como o de vocês que incentiva a publicação de novos artigos e que fortalece nossa comunidade de desenvolvedores.

Lando, publiquei essa matéria também no iMasters (http://www.imasters.com.br/artigo/5231/) onde o script completo está disponível para download: http://conteudo.imasters.com.br/5231/scripts_artigo_marciomuzi.rar

Abraços

Bom
publicado por J0K3R - 2006-12-29 04:03:54

o artigo ficou excelente principalmente pela ilustração dada, parabéns.

o uso do prototype é indispensável para quem utiliza com muita frequência o javascript nas aplicações, eu uso e recomendo, muito bom.

vale lembrar também que existe uma lib mt boa também q se chama "Jquery", similar ao prototype porém com documentação oficial.

mais uma vez, parabéns pelo artigo Marcio.

Bacana
publicado por Cau Guanabara - 2007-01-10 09:48:34

Um bom exemplo para quem, como eu, não está familiarizado com frameworks, parabéns.

Apenas um aparte...
O formulário de pesquisa, sobre o qual aplica-se o Javascript não obstrutivo (de fato, a lógica é essa), não funcionaria sem Javascript, pois não possui action nem submit, portanto (se o html não funciona sozinho) não deveria ser considerado um exemplo de uso correto do JS não obstrutivo. A página deve funcionar sem JS, que seria usado para melhorar, adicionando recursos.

Abraço, Cau

RE: Bacana
publicado por Marcio Muzi - 2007-01-10 10:37:59

Cau,

Quando li sobre o conceito do JS não obstrutivo em alguns lugares na internet, dizia que era apenas não ter JS no código HTML.
Pelo visto as pessoas não conhecem bem esse conceito. Se você tiver alguma referência confiável sobre esse assunto, pode enviar para meu e-mail? (marcio.muzzi@gmail.com)

Obrigado pela contribuição!

Abraços,
Marcio

Artigo
publicado por Francis Perini - 2007-01-11 09:36:22

Muito bom, parabéns pelo artigo.

Parabéns!
publicado por nels0n - 2007-02-03 08:01:32

Sinceramente, o melhor tutorial que eu li aqui na phpbrasil.

Muito boa as ilustrações. Não forneceu o código, ou seja quem quiser ter o código terá que digitar letra por letra(aquela coisa de ctrl+c ctrl+v não é bom).
Uma coisa é que no caso, se o navegador não suportar JS, não vai acontecer nada (o que é muito ruim).

Porém parabéns. Espero que coloque mais artigos/tutoriais nesse estilo. :-)

Re: Parabéns
publicado por Marcio Muzi - 2007-02-04 09:55:24

Olá nelsOn, obrigado pelo elegio.

O código fonte está disponível no iMasters:
http://conteudo.imasters.com.br/5231/scripts_artigo_marciomuzi.rar

Sobre o navegar estar configurado para não aceitar Javascript, além de ser raro, o usuário simplesmente não vai conseguir fazer nada na internet se fizer isso.
Quer um exemplo? Imagine um infeliz que não habilita o javascript no navegador, nem o GMail vai consegue utilizar!

Abraços

Upload
publicado por Leandro Lages - 2007-02-05 07:07:57

você sabe como esta biblioteca se comporta ao usar UPLOAD de arquivos em Ajax? Tem suporte?

Parabens
publicado por Fabrício Nogueira Magri - 2007-02-21 19:46:45

Parabéns pelo artigo!

Problemas com caracteres acentuados.
publicado por NetoX - 2007-03-01 05:51:59

Gostaria primeiro de parabenizar pelo artigo.
Implemetei com uma página com o form e outra com o php mas sem DB. só que o retorna o código no browser IE vem com problema nos caracteres acentuação exemplo Brasília retorna Bras?a. Como resolver ? Sereia no Prototype

Re: Problemas com caracteres acentuados
publicado por Marcio Muzi - 2007-03-01 06:43:20

Neto, faltou na página de busca a linha abaixo:

header("Content-type: application/xml; charset=iso-8859-1");

A forma correta de renderizar nosso português é simplesmente usando o charset ISO-8859-1 e não o UTF-8. Você deve enviar cabeçalhos do servidor para o navegador, informando que você usará ISO-8859-1.

[]s
Marcio
www.marciomuzi.eti.br

AJAX
publicado por NetoX - 2007-03-01 11:41:27

É isso mesmo Marcio Muzi!
Só que na hora de enviar pelo form.php eu não consigo fazer com que
<?header("Content-type: application/xml; charset=iso-8859-1");?> que coloquei como a primeria linha da página funcione, ele envia para a página em php que faz o processamento e que também coloquei o header e nesta funcionou. Exemplo no form digito Brasília e ele envia brasília para a página em php que faz o processamento. E se eu no form.php digito Brasilia, sem o acento, aí ele manda para o php que faz o processamento e retorna somente os resultados que também não tem acentos no caso Brasilia sem acento.

Re: AJAX
publicado por Marcio Muzi - 2007-03-01 14:46:38

Neto, talvez resolva colocando sua string que está retornando da requisição dentro da função utf8_decode()

Para saber mais, veja os exemplos no manual do PHP:
http://br.php.net/manual/pt_BR/function.utf8-decode.php

[]s

Publique os seus Comentários

Nome:
Email:
Título:
Comentário:

NOTA: Cadastre-se no site para poder publicar comentários.

 
webmaster: João Prado Maia   © 2000 - 2005 phpbrasil.com
Gerado em 1.199 segundos