Arquivo para Agosto, 2009

Sim. Você agora pode ter um textarea daqueles!

Esse não foi de minha autoria não, eu só estive procurando até achar mesmo. A idéia era ter um editor destes assim:

 img_textarea_rico

Ele precisava ser:

  • De graça;
  • Mais ou menos rico de recursos
  • Funcional
  • Fácil de customizar

Esse é o tipo da coisa – imaginei eu – que nesse mundo Web rico de conteúdo dos dias atuais deve existir escondido em algum lugar, por isso eu jamais construiria um troço assim porque não é um objetivo meu na vida. Então… Google pra cá, Google pra lá, Google pra cá, Google pra lá… Opa!

Vejam, a solução que mais respondeu aos pré-requisitos foi Cross-Browser Rich Text Editor (RTE). Dá pra ver na tela o código gerado pelo campo, dá pra enviar para um banco de dados, enfim, manipular a saída como bem entender. Eu baixei, instalei, configurei e traduzi para o português, mas distribuí-lo traduzido por conta e risco não é legal. Portanto baixem em: http://www.kevinroth.com/rte/

Veja um demo aqui

Sucesso galera!

Site da TV Record invadido

Eu estava voltando pra casa de um game na casa de um amigo (Val – ele tem esse nome mas é Hetero) que inclusive não ocorreu porque o provedor do jogo furou com a gente. Aí logei no meu Twitter, bom, acreditem, eu sigo a Adriane Galisteu – de verdade –  e lendo as novidades dos últimos minutos olha o que ela publicou:

site_record_invadido

Fonte: Twitter da Adriana Galisteu (http://twitpic.com/e2us1)
(Clique para ver maior)

Como profissional da Web seria anti-ético de minha parte concordar com invasões à sites ou de qualquer gênero, e o problema do Edir Macedo é somente dele e dos fiéis de sua igreja,  por outro lado esta aí foi a forma encontrada pelo grupo hacker para expelir seu protesto contra esse escândalo. 

Vamos em frente né…

Curso de AJAX de uma aula só

Ok! Já chega dessa história de evitar usar esse negócio que é tão comentado hoje em dia, e que você só conheceu “por cima” por achar engenhoso e complicado de meter a mão. Vamos aprender (ou pelo menos tentar)! E pra você que já sabe, vai confirmar o aprendizado ou até mesmo me ensinar ;)

Eu já havia comentado sobre ele aqui  mas meu objetivo agora é começar do 0 (zero), passo-a-passo, um exemplo da aplicabilidade de PHP + AJAX + MYSQL, pra fazer você entender cada linha de código e o que cada coisa faz.

Pronto(a)? Go!

1. O que faremos?

Para os viajantes criativos este exemplo será uma base parar a criação de vários outros brinquedos úteis em suas páginas apartir de agora. Faremos um campo auto-sugestão. Apartir de um campo de texto simples, à medida que um usuário vai entrando com um texto, a página vai mostrando o que provavelmente ele está procurando.

 1.1 E vou precisar de que?

Um bloco de notas, um banco de dados MYSQL ou outro, e um servidor que rode PHP de qualquer versão.

2. Começando…  (azul: código, verde: comentário)
 

  • Crie: form.html

Insira lá o código abaixo e vamos aos comentários:

<html>
<script type=”text/javascript”>
var http = false;

/*
Este bloco IF é necessário antes de começar qualquer implementação do AJAX. Ele cria os objetos específicos de cada navegador para manipulação das solicitações ao servidor. Os navegadores Mozilla Firefox, Safari, Opera e Konqueror atualmente usam XMLHttpRequest, que é com um objeto JavaScript nativo. O Internet Explorer foge desta regra e implementa o recurso ActiveX. É por isso que a forma de se iniciar uma implementação de AJAX nas páginas acontece de  forma diferente.
*/

if(navigator.appName == “Microsoft Internet Explorer”) {
  http = new ActiveXObject(“Microsoft.XMLHTTP”);
} else {
  http = new XMLHttpRequest();
}

/*
Esta aqui é a função da nossa mini lógica de negócio. Ela vai receber a entrada do usuário através do campo texto chamado “nome”. Lá no campo “nome’, à medida que uma tecla é digitada a função “procurar()” vai ser acionada (onKeyUp=”procurar(this.value)”), ou seja, a cada entrada do usuário o Javascript será acionado e enviará de forma totalmente rápida e transparente os dados para a função PHP, que faremos logo adiante; assim, em milissegundos a coisa vai acontecer.
*/

function procurar(nome) {
  http.open(“GET”, “buscaPessoas.php?nome=” + nome, true);
  http.onreadystatechange=function() {
    if(http.readyState == 4) {
      document.getElementById(‘labelNome’).innerHTML = http.responseText;
    }
  }
  http.send(null);
}

/*

Explicando o código de forma mais técnica:

 O objeto (http) criado acima vai receber os parametros semelhantes à um formulário normal <form>: método  de submissão e página que receberá os dados do form. O “onreadystatechange” manipula eventos na página, normalmente uma chamada qualquer a uma função JavaScript. O “readystate” determina a situação atual da solicitação. Varia de 0 a 4, sendo 0 não-iniciada; 1 carregando, 2 carregada, 3 em processamento, 4 concluída. Iremos passar portanto, quando a página estiver concluída (status 4) o resultado da nossa futura função php no “labelNome”. Daí o “http.send” envia a solicitação ao servidor, podendo passar algum parâmetro, o que não é o nosso caso, já que estamos fazendo um “GET”  e passando parâmetro via URL (“nome”).

*/
</script>

<!– Aqui nosso campo nome e o método que acionará a função procurar() que criamos acima. A cada tecla digitada a função Javacript vai ser acionada, que consequentemente fará a página buscaPessoas.php enviar o valor do campo para ser consultado… isso veremos ali na frente. –>

Buscar um nome: <input type=”text” name=”nome” size=”12″ onKeyUp=”procurar(this.value)”> <span id=”labelNome”></span>

</html>

 
Ok. Já temos o formulário e as funções necessárias ao nosso Auto-sugestão do lado do cliente. Agora vamos ao código “server-side” que magicamente parecerá “client-side” pra você.

  • Crie agora: buscaPessoas.php

Insira nela o código abaixo e vamos aos comentários:

<?php

/*
Se você tem um banco MYSQL à disposição, vamos usá-lo. Teste se consegue conectar, e vamos em frente…

*/
function sugerir($nome) {
 
 //crie a sua conexão php ao seu banco, neste exemplo usei MYSQL:
 mysql_connect(“enderecodoseubanco”,”login”,”senha”);
 mysql_select_db(“nomedoseubanco”);
 
 /*
crie uma tabela “usuario” e uma coluna “nome”. Daí você insere uns nomes lá para utilizarmos aqui. Então, faz um Select procurando por nomes que contenham o que foi digitado lá no formulário pelo usuário. Entendeu né?. Ah, o “like” do SQL significa: com o termo, e as porcentagens descartam início e fim deste trecho, podendo ele estar no meio de uma palavra.

*/
 $sql = “SELECT nome FROM usuario where nome like ‘%” . $nome . “%’” ;
 
 $qry = mysql_query($sql); //faz a consulta...
 $linha = mysql_fetch_array($qry); //joga o conjunto de resultados numa variável  
  $num = mysql_num_rows($qry); //traz o número de linhas retornadas
 
 
 /*
 Se nada for digitado no campo ou a consulta não retornar resultados, mostra-se uma mensagem (opcional – você pode deixar em branco se quiser). Se conseguiu encontrar um registro que bateu lá no banco, então mostra pra o usuário.

 */
 if($nome == “” || $num == 0) {
  return ‘Ops! nada encontrado.’;
 } else {
  return $linha['nome'];   
 }
 
}

//Aqui mandamos o php utilizar o que chegou pela URL (nossa função “procurar(nome)” , lembra?)
echo sugerir($_REQUEST['nome']);
?>

E é só. Rápido, não? Agora o que falta é você ler tudo, entender direitinho e testar. Vai por mim, ler tudo neste caso aqui vai te ajudar a virar um verdadeiro conhecedor de AJAX e consequentemente ter sucesso criando futuras aplicações. Ah, eu prometi nunca publicar o meu projeto final de curso na rede, mas uma situação como essa eu acho merecedora de um material de apoio escrito à próprio punho pelo papai aqui. Então, agora vamos aos links:

Não esquece de vir contar o que é que deu nesta sua jornada, ok?


Esse aí na foto...

Yeah! Este sou eu!

Henrique Eduardo Araujo

Twitter

Categorias

Leituras Importantes:

Dias p/ o Aniversário do Blog

Aniversário deste blog

Catraca

  • 26,321 visitantes
Licença Creative Commons