Assim, criei ontem um novo blog, Programador Prático, onde pretendo postar com uma frequência quase diária, ao contrário desse, que foi quase anual!

Principais assuntos do Programador Prático:

• Ruby e Ruby on Rails
• MAC OS X
• Desenvolvimento web num todo (Javascript, SQL e noSQL, AJAX, etc)
• Programação de jogos (em breve)
• Agile
• Livros, tutoriais e artigos relacionados

Enfim, visite agora mesmo em www.auriumsoft.com.br/programadorpratico!

Porém, como tudo que é novo, as dificuldades surgiram, em especial uma que causa muita dor de cabeça em usuários do Windows, quem diria Mac (pelo menos como no meu caso, os “Mac switchers”): fazer funcionar um ambiente de desenvolvimento PHP.

O Leopard vem com Apache e PHP 5 funcionais, inclusive com todas as extensões tradicionais (GD, Curl, MySQL, etc), o problema surgiu quando vi que não existia a extensão do PostgreSQL em nenhum lugar.

O fato é que essa instalação padrão do PHP tem que ser recompilada. Para quem a vida toda usou Windows, isso é algo totalmente novo*. Tentei, tentei, tentei e nada, não consegui fazer funcionar um novo PHP, mesmo seguindo mais de 5 artigos diferentes.

Até que me deparei com um artigo que explica sobre a instalação da stack de desenvolvimento com MacPorts. BINGO!

Guia de Instalação

O passo-a-passo da instalação.

1. Download MacPorts: http://www.macports.org/install.php
2. Após instalar, atualize o MacPorts:
   sudo port -v selfupdate
3. Instale a stack de desenvolvimento (demora uns 10 minutos):
   sudo port install php5 +apache2 +php5-mysql +php5-postgresql +php5-gd +php5-curl +php5-mcrypt +php5-gettext
4. Edite o httpd.conf que estará localizado em
   /opt/local/apache2/conf/httpd.conf

   Adicionar as linhas nas seções correspondentes:
   LoadModule php5_module modules/libphp5.so

   DirectoryIndex index.html index.php

   AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

   Obs: Adicione, ironicamente, os Mime Type do PHP fora da condicional <IfModule mime_module>.

5. Crie o php.ini
   cp /opt/local/etc/php5/php.ini-development /opt/local/etc/php5/php.ini
6. Edite o php.ini, agora localizado em /opt/local/etc/php5
7. Aponte o diretório de extensões:
   extension_dir = "/opt/local/lib/php/extensions/no-debug-non-zts-20090626/"
8. Adicione a lista de extensões:
   extension=gd.so
extension=mysql.so
extension=mysqli.so
extension=pdo_mysql.so
extension=pdo_pgsql.so
extension=pgsql.so
extension=curl.so
extension=mcrypt.so
extension=gettext.so

9. Configure a Timezone:
   date.timezone = 'America/Sao_Paulo'
10. Adicione o Apache ao startup:
    sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist
11. Baixe e instale o package do PostgreSQL: http://www.postgresql.org/download/macosx
12. Baixe e instale o package do MySQL: http://dev.mysql.com/downloads/mysql/. O usuário padrão da instalação será root e nenhuma senha.
13. Reinicie o Apache:cd /opt/local/apache2/bin/
sudo ./apachectl restart

Fontes:

• http://2tbsp.com/content/install_apache_2_and_php_5_macports
• http://drupal.org/node/68133
• http://www.macports.org/install.php
• http://www.tech-recipes.com/rx/2621/os_x_change_path_environment_variable/

Procurei bastante e achei! É um programa mágico chamado WampServer! Basta efetuar o download dele, instalar e você terá funcionando:
APACHE 2.2.6, PHP 5.2.6 and PECL, MYSQL 5.0.45, PHPMYADMIN 2.11.2.1, SQLITEMANAGER 1.2.0!

Resolvi apagar o Apache, PHP e MySQL do meu computador e testar o WampServer para ver se é verdade.
E é sim! Gastei em média 4 minutos para efetuar o download, e executar a instalação.

Para o download: http://www.wampserver.com/en/download.php

Fora que ele fornece uma interface bem amigável para controle dos serviços, individualmente:

Vale a pena conferir. Estou há 8 anos na área e conheci ali ferramentas que nunca tinha ouvido falar antes e que poderiam me economizar tempo em várias tarefas.

Nessa nuvem de tags (ou cloud tags, em inglês) existem mais textos "taggado" com curiosidades, depois com bloppers e assim vai.

Vamos criar uma nuvem de tags bem básica, que retorna as palavras de modo aleatório (não organizada por nome ou freqüência). Primeiramente obtenha os códigos e depois explicação passo a passo:

- class.nuvemtags.php
- nuvemExemplo.php

Veja o exemplo em execução.

Dissecando o código:

1. Devemos criar uma função para adicionar palavras à biblioteca. addPalavra serve para isso, e aceita uma string ou array de palavras. O nosso "banco de dados" de palavra fica no membro $listaPalavras.
   
   Cada palavra adicionada recebe um ponto ($this->listaPalavras[$palavras]++;), que é somado a cada aparição dela. Os "pontos" nada mais são que a quantidade de vezes que a palavra aparece.
2. O modo como cada palavra será exibida de um tamanho é baseado no percentual. De acordo com o percentual ele recebe um número de classificação. Esse número, pode ser usado como classe CSS.

   if($pecentualUso >= 99)
   $classe = 10;
else {
   $classe = floor(($percentualUso / 10));
}

   Nesse caso o número é obtido da seguinte maneira: caso a palavra apareça 99% ou mais, ela recebe classificação 10. Caso receba entre 1 e 98%, a classificação é o valor da dezena do percentual. Como assim?
   Digamos que o percentual seja 32%. O retorno será 3. Caso seja 7%, o retorno é 0 (não tem dezena).

   E o que você faz com esse número? Crie classes CSS contendo esses números, conforme coloquei em nuvemExemplo.php:
   .tag10 contém o maior tamanho de fonte, tag9 um pouco menor e assim de modo decrescente, até chegar em tag0.

3. function misturaPalavras()
Coloca as palavras de modo aleatório no array. Como dito no começo do artigo, essa é uma nuvem de exibição aleatória.
4. E finalmente, a função de retorno da nuvem: mostraNuvem().

   Como cada palavra contém a soma de vezes que aparece, obtemos a quantidade total das vezes que as palavras aparecem: $quantidadePresencas = array_sum($this->listaPalavras); . Lembrando que array_sum soma todos os elementos de um array. Depois as palavras são misturadas: $this->misturaPalavras(); .

   E entramos no loop de criação da nuvem:
   foreach($this->listaPalavras as $palavra => $presenca)
{
    $aparecimentoPercentual = 
      ((100 * $presenca) / $quantidadePresencas);
    $classeCss = $this->obtemCss($aparecimentoPercentual);

       $nuvemTags[] = array(
        ‘palavra’    =>    $palavra,
        ‘classe’    =>    $classeCss,
        ‘percentual’=>  floor($aparecimentoPercentual)
    );
}.
   Primeiro é calculado o percentual que uma palavra aparece. Pura regra de três:
   [Quantidade de Vezes Total que as Palavras Aparecem (obtido acima com array_sum - $quantidadePresencas) = 100%]
   X
   [Quantidade de Vezes que a palavra apareceu ($presenca) = Percentual dessa palavra ($aparecimentoPercentual)].
   Assim, $aparecimentoPercentual é passado para obtemCss, que obtem a classificação da palavra.

   Cada palavra é inserida na nuvem com a classe css (na verdade apenas o número de classificação) e o percentual (caso você queira usar para algum debug ou outro cálculo).

5. A impressão da nuvem, como no exemplo, é iterando no array:
   $NuvemTags = $Nuvem->mostraNuvem();
foreach($NuvemTags as $Tag)
{
   echo '<span class="tag' . $Tag['classe'] . '">' . $Tag['palavra'] . '</span> ';
}

Veja o exemplo em execução.

Como pode ver, nuvem de tags não tem nenhum segredo, é baseada em percentual. Em artigo futuro, criaremos uma nuvem de tag com ordenação baseada em nome ou peso, bem como adaptada de banco de dados. Se bem que por essa classe você já pode obter as palavras do banco de dados, basta obter suas categorias e passar para o objeto.

• É um framework JavaScript, contido em um pequeno e único .js;
• Possui funções de DHTML, shortcuts (exemplo: em vez de document.getElementById(’elementoId’), simplesmente diga $(’elementoId’));
• Uma das abstrações de AJAX mais completas e rápidas de implementar;
• etc.

Bom, faça já o download.

Nesse primeiro artigo da série, uma busca muito, muito simples, com retorno em HTML, para você entender como é a interação da Prototype com o PHP. Na verdade não existe interação (a Prototype é apenas esse pequeno JS!), e sim, uma série de Chamadas (feita por ela) -> Respostas (pelo PHP ou qualquer outra linguagem do lado de servidor que você utilize). Vamos ao código:

busca.php

formulario.html

Passo-a-passo

1. Como é de se esperar, sempre inclua a prototype: <script type="text/javascript" src="prototype.js"></script>.
2. A função $ é um atalho para document.getElementById. Agora acostume-se. Use e abuse!
3. Não é necessário declarar nem instanciar nada. Você só chama a prototype quando for utilizá-la. No nosso caso, ela é chamada dentro da função Buscar. A chamada AJAX é simplesmente feita pelo comando: new Ajax.Request e, assim inserindo os variados parâmetros. São dezenas deles, que tentarei explicar no decorrer de toda a série. Você pode ver a lista completa na documentação oficial.
4. Primeiro defino o modo de envio: method:‘get’, (pode ser ‘post’) .
5. Os dados que envio: parameters: $(‘formBusca’).serialize(true), . Nesse caso eu envio todos os campos do formulário. No PHP eles são recebidos simplesmente dentro da variável $_GET (ou $_POST). Exemplo: se no formulário há um campo nome e email, o PHP receberá: $_GET[’email’] e $_GET[’nome’].
6. Defino como o retorno será tratado:
   onSuccess: function(transport) {
  var response = transport.responseText || "Nada Encontrado";
  $(‘retorno’).innerHTML = response;
}, . Nesse exemplo o PHP imprime texto com "echo", logo a resposta vem como texto puro, dentro de response.Text. Caso não venha nada, o || é tratado, e a resposta fica "Nada encontrado". O que quer que seja a resposta, eu passo para o div retorno.
7. E defino um tratamento de erro (caso ocorra perda de conexão, por exemplo): onFailure: function(){ alert(‘Something went wrong…’).
8. Logo acima do Request, temos a criação de "Responders". O que fazem? Eles executam uma ação quando um Request é criado e outra quando o Request é destruído. Através dos Responders você pode criar mensagens de "loading" por exemplo, ou alguma outra interação necessária.
   Ajax.Responders.register({
  onCreate: function(){
     $(‘loading’).className = ‘ativo’;
  }, 
  onComplete: function(){
     $(‘loading’).className = ‘oculto’;
  }
});
   Veja que na criação, ele exibe o div de loading, e na destruição do objeto, ele oculta.
9. Simples, não? Veja o PHP como fica limpo. E o JavaScript mais limpo ainda.

Veja esse exemplo em funcionamento. Digite "dinheiro" e aperte TAB, digite "cidade", e depois qualquer coisa.

Referências

1. Documentação da API do objeto AJAX: http://www.prototypejs.org/api/ajax
2. Introdução ao objeto AJAX, com exemplos: http://www.prototypejs.org/learn/introduction-to-ajax

Não responderei mais as dúvidas postadas nesse artigo, por favor conferir o texto sobre instalação WampServer, indicado acima.

Após receber centenas de e-mails referente ao meu artigo Instalando Apache 2, PHP 5 e MySQL no Windows que foi publicado em vários sites, com dúvidas, pois a maioria não estava conseguindo instalar, eu resolvi revisar o artigo. Removi tudo do meu computador e instalei o trio parada dura (Apache, PHP e MYSQL), seguindo o artigo à risca.

Resultado? Tudo funcionou perfeitamente.

Por essa razão, irei atualizando esse tópico com as dúvidas e problemas mais freqüentes do pessoal. Inclusive se você tiver alguma, não hesite em dizer, que ajudarei.

Leia o artigo em uma de minhas colunas:

• Linha de Código
• Plug Masters

Soluções, Perguntas e Respostas:

1. Links atualizados para download dos softwares necessários.
   Disponibilizo o caminho da fonte. E não mais o link direto para uma versão:

   APACHE - http://httpd.apache.org/download.cgi. Clique em “Other Files”, “binaries”, “win32″ e selecione o arquivo que tiver a maior versão. Normalmente é o penúltimo da lista de arquivos. No caso quando escrevi isso, a maior versão era 2.26, logo o arquivo que baixei: apache_2.2.6-win32-x86-no_ssl.msi.

   PHP - http://www.php.net/downloads.php. Faça download do primeiro item logo após a seção Windows Binaries. Exemplo: PHP 5.2.4 zip package [9,702Kb] - 30 August 2007.

   MySQL - http://dev.mysql.com/downloads/mysql/5.0.html#win32. Na linha Without installer (unzip in C:\), clique em “Pick a Mirror”. Ele mostrará tela de cadastro. É opcional, se não quiser cadastrar, logo abaixo clique em » No thanks, just take me to the downloads!, e selecione um mirror.

2. O arquivo http://www.apachelounge.com/download/mods/php5apache2.dll-php5.1.x.zip não existe mais? Ele não é mais necessário, ignore esse passo do tutorial.
3. Modificações ao adicionar o Apache Handler A linha deve ser LoadModule php5_module “c:/php5/php5apache2_2.dll”. Note o “_2″ no final e não somente “apache2.dll”
4. O Apache inicia e fecha logo em seguida.
   Se a sua instalação prosseguiu sem erro, é normal que isso aconteça, pois o Apache executa em segundo plano. Verifique, abrindo seu navegador e acesse http://localhost. Caso apareça uma mensagem “It Works!”, tudo foi bem sucedido.
5. Ainda tem problemas? Envie seu httdp.conf para meu e-mail alfred.baudisch@gmail.com especificando qual o problema que ocorre!

Inclusive, a segunda parte já está pronta e logo estará publicada no Linha de Código e Plug Masters.

O que é AJAX e como aplicá-la com PHP, parte 1

O uso de AJAX está se proliferando cada vez mais pela internet, justamente por trazer mais interatividade e usabilidade para as aplicações – ou até mesmo, mais “glamour”. Junto disso, surgem inúmeras maneiras de implementar essa combinação (AJAX não é uma tecnologia, é um uso conjunto de tecnologias), algumas complicadas e com recursos demais, outras simplificadas, mas deficientes de recursos. A classe CPAINT é uma classe completa e permite incluir AJAX eficientemente em suas aplicações web. Nessa série de artigos, entenda o que é AJAX, as características da CPAINT, bem como uma explicações por meio de códigos exemplo.

• Faça já o download do PDF com o artigo completo e do código fonte.
• Artigo também disponível no Linha de Código e Plug Masters.