Ahã... programando...!

dotProject, aquietando os Erros, Warnings e Deprecateds

Leonir Zimmermann — Fri, 12 Nov 2010 11:11:04 +0000

Este é um post rápido e pontual. Não sou usuário (pelo menos por enquanto) da ferramenta dotProject em PHP. Mas um amigo solicitou ajuda por que ao instalar e usar o dotProject se deparou com um monte de mensagens que informam problemas de sessão e funções depreciadas. Inicialmente tentamos modificar a apresentação de mensagens de erro no php.ini do servidor… mas nada. “Ô bixinho rabujento esse dotProject”. Mas então decidi instalar o dotProject na minha máquina e “mexeriquiar “. Descobri que a solução é bem simples: basta abrir o arquivo base.php, e modificar o primeiro parâmetro encontrado dentro dele. Então se vc estiver enfrentando este problema também, abra este arquivo e onde encontrar:
ini_set(‘display_errors’, 1);
troque o 1 por 0 (numero zero), assim:
ini_set(‘display_errors’, 0);
isto acaba com toda a anarquia!

Para encerrar, deixo claro que este poderá ser o único posto sobre o assunto, normalmente não estou prestando suportes sobre o dotProject.

Abraço

Editor PHP gratuito Netbeans 6.8

Leonir Zimmermann — Sat, 02 Jan 2010 23:20:06 +0000

Até a pouco tempo eu estava usando como ferramenta gratuita para edição WEB o APTANA. Que na versão 1.5 tinha bom suporte a PHP e Javascript. Todavia da versão 2.0 pra diante, o pessoal do APTANA abandonou o suporte nativo a PHP. Só percebi depois de desinstalar a versão 1.5 e instalar a 2.0.

Temporariamente retomei a utilização do Dreamweaver 8 (não é gratuíto) e que apesar de ser uma versão desatualizada, continua com algumas opções mais completas que os editores gratuítos que temos à disposição.

Mas retomei minha busca por editores gratuitos, e fiquei surpreso com o Netbeans 6.8 customizado para PHP. Pra começar… o tamanho do arquivo de Download: 25MB contra os 135MB do Aptana 2.0. Eu disse míseros 25 Megalhões de Bytes! Veja com seus próprios olhos no site de Download: http://netbeans.org/downloads/index.html (na opção de download Netbeans para PHP).

De cara deu pra perceber que também não é tão pesado para abrir o programa, instalei-o em um note Intel Dualcore 1.8Ghz com 2GB de RAM e Windows Vista. Para ser mais preciso… não abre tão rápido quanto o bloco de notas hahaha mas também perde para o Dreamweaver 8.

Recursos encontrados:

Interface em Português
(dispensa comentários)

Search e replace em todo o projeto

Este é um recurso que me era muito útil no Dreamweaver, mas que não estava disponível no Aptana. Necessário quando vc quer modificar o nome de uma variável, função ou método que vc criou, e está sendo chamada em diversos arquivos. Talvez vc nem lembre todos os locais que será necessário modificar. Nesta hora a ferramenta detona.

Sugestão para comandos PHP e Javascript, incluíndo detalhes sobre as funções

Este recurso é encontrado tanto no Dreamweaver quanto no Aptana. E o Netbens faz bonito.

O mesmo vale para Javascript, HTML e CSS.

Localiza os métodos e atributos da Classe em que vc está trabalhando
Já trabalhei com java, e meu ambiente de trabalho era justamente o Netbeans. Apreciava o recurso oferecido por ele, em que dentro de uma classe vc pode digitar “this.” e ele suge os métodos e atributos disponíveis na classe. Tal recurso está inteiramente disponível na versão do ambiente Netbeans para PHP.

Perceba na figura acima, que ao selecionar um dos métodos de minha classe, ele apresenta inclusive a documentação do método. Claro… vc precisa seguir o padrão de documentação PHP, e informar antes de cada método seu propósito e parâmetros, como no exemplo abaixo:

Suporte a TAGs HTML

Vc pode escrever código HTML tranquilamente, que ele oferece sujestão para nomes das TAGs e também para os atributos. Se vc escrever a tag body como esta: pode localizar a propriedade style, e nos valores para o atributo, virão também automaticamente as sugstões de comandos CSS, como color e após selecionar este colocando dois pontos “:” será apresentada uma modesta lista de cores. Achei pobre a lista de cores neste caso, mas funciona amigavelmente.

Suporte avançado a CSS

Não utilizei o recurso ainda por tempo suficiente para afirmar que seja excelente, ou apontar possíveis defeitos. Porém percebi que possui recursos interessantes. Quando um arquivo “.css” é aberto, um painel é apresentado com ferramentas para manutenção dos parâmetros do CSS.

Mais detalhes na figura abaixo:

Dá pra notar que ele mostra inclusive um exemplo de texto com a formatação a direita. Neste quesito o APTANA era o mais pobre… oferecia como grande recurso uma cubo de 216 cores para ajudar na escolha das cores para atributos CSS.

Pontos Negativos

1) Falta uma interface WYSIWYG para delinear interfaces HTML. Aliás quanto a este recurso, dos programas que experimentei só o Dreamwever oferece algo realmente satisfatório. Sei que para o bom desenvolvedor, aquele que conhece os recursos de HTML e CSS, até não faz muita falta. Mas acho interessante por exemplo para preparar rapidamente uma página estática em HTML com textos e figuras. Principalmente para copiar com a formatação um texto que vc copia do Writer Open Office, ou no Office Word. Facilita também para colar uma lista de valores no HTML, pois com WYSIWYG é rapidinho e intuitivo preencher uma tabela.

2) [Ponto de vista Pessoal] Não oferece suporte nato a bibliotecas javascript mais conhecidas como Jquery e Dojo. Seria interessande em meio a um código JavaScript digitar “dojo.” e ele oferecer as opções da API Dojo. Talvez até haja uma forma de acrescentar um plugin de terceiros ou coisa parecida, investiguei superficialmente e não tive um resultados satisfatórios. Neste ponto o APTANA faz bonito e o Dreamweaver 8 também é isento.

Conclusão

Temos aí um editor WEB para PHP, HTML, JAVASCRIPT e CSS de ótimo nível entre os da categoria FREEWARE, fácil de instalar, arquivo de Download relativamente pequeno, bons recursos. Vale a pena testar!

Grande Abraço

Ajax – Enviar Conteúdo de Formulário via POST com DOJO

Leonir Zimmermann — Mon, 27 Apr 2009 15:30:57 +0000

Ajax (aquela maneira genial de atualizar conteúdo em uma página) tem sido a sensação nos últimos anos de desenvolvimento WEB. Lembro das minhas primeiras investidas na área em 2005, naquela época ainda um terreno desconhecido (pra mim) e bastante pedregoso. Anos mais tarde temos diversas ferramentas prontas e gratuitas para desenvolver tarefas em Ajax.
Mas nem só para atualizar conteúdo na página serve o famigerado recurso, pois Ajax é como um portal na quarta dimensão que pode ser aberto no browser e que permite tráfego de dados nas duas direções [servidor > cliente] e [cliente > servidor]. No presente artigo vamos tratar do último caso: “como enviar dados de um formulário para o servidor sem recarregar a página toda após o envio?”

Nas minhas primeiras empreitadas nesta área vi que o terreno era árduo e acabei desistindo, mas a biblioteca dojo oferece uma solução com estilo.

Se vc ainda não conhece a biblioteca Javascript Dojo, recomendo uma olhada no artigo “Como funciona a biblioteca Javascript Dojo”, será de grande valia

Um pouco de Teoria

Vejamos o que ocorre em uma situação de envio tradicional. Na figura 1, podemos identificar 2 arquivos principais, o da página index, ao qual foi incluso um formulário, e o arquivo que recebe os dados. Nestas circunstâncias o envio dos dados é definido simplesmente pelo atributo “action” da tag

e o método de envio (geralmente ”post”) é definido no atributo “method” da mesma tag. A tarefa é acionada quando o usuário clicar no botão definido pela tag .

No protocolo HTTP, o browser envia alguma informação ao servidor, e este precisa retornar uma resposta ao browser.

No momento do envio, a página toda sai de cena, e o browser envia uma requisição via HTTP ao servidor, para que o arquivo recebe_dados.php entre em ação.

Figura 1 - Envio de dados via post pelo método tradicional

Este arquivo efetua as tarefas subseqüentes como gravar as informações no Banco de Dados, e após envia um cabeçalho (header) ao browser, com uma diretiva para que o browser peça ao servidor novamente o carregamento de index.php. A URL desta diretiva pode conter uma variável com a resposta dizendo “Ok tudo ocorreu bem!”, ou “Heitaaa, deu problema!”.

Ex do código:

//tarefas
…
//retorno
header(“location:index.php?resposta=”.$resposta);
?>

Bom, este é o cenário tradicional que todo WEB designer com experiência de formulários conhece.

A proposta deste post (aqui post significa artigo do blog hahaha), como dito anteriormente, é utilizar Ajax para que a página não saia de cena enquanto os dados são enviados para recebe_dados.php.

Tenha em mente que Ajax é um método de transferência de dados todo manipulado via Javascript.

A figura 2 ilustra o esquema que vamos utilizar com a API do Dojo, o xhrPost.

Figura 2 - Envio de dados com dojo xhrPost

Nesta figura procurei deixar claro que os dados contidos no Formulário agora pegam outro trajeto. Veja que agora, o xhrPost, dentro da própria página index.php é quem captura os dados contidos no formulário, e os envia para recebe_dados.php. Ele é uma espécie de agente atravessador que negocia a transferência dos dados, digamos… por debaixo dos panos, e ninguém vê que algo está indo para o servidor, pois index.php não sai de cena.

Assim, se faz necessário também uma modificação na forma do envio da resposta que recebe_dados.php deseja devolver a index.php. Veja que quem está em contado com o servidor neste momento não é o browser todo, mas apenas o objeto xhrPost, ele mesmo fica aguardando a resposta, a qual pode ser um outro HTML, ou um TEXTO qualquer. Mas não desejamos um simples texto, porém uma variável contendo um texto de resposta. Quando vc quer codificar variáveis com valores em um meio textual, geralmente se utiliza XML, JSON, CSV ou coisa parecida. Neste caso, o dojo oferece uma ferramenta simples para codificar as variáveis em JSON.

Quando o xhrPost recebe a resposta, ele a pode entregar para funções Javascript específicas que vão decodificar o resultado em JSON e por fim apresentar a mensagem na tela do usuário.

Enfim este é o efeito que desejamos. Vamos ás instruções?

Material necessário:

Básico:

Arquivo HTML com formulário básico ( index.php )
Arquivo para receber os dados e devolver uma resposta (recebe_dados.php)
Biblioteca Javascript Dojo (veja como instalar aqui mesmo no Ahã… Programando…: instalacao-da-biblioteca-dojo)

Ferramentas pertencentes ao dojo:

dijit.dijit (layouts dojo)
dijit.form.Button (widget button)
dojo.parser (farejador que procura widgets no meio do HTML para ativar)
xhrPost (Api dojo para envio de dados via Ajax pelo método Post)
tundra.css (folha padrão da biblioteca dojo)
classe de conversão Json PHP (já vem de brinde com o Dojo)
alguns scripts adicionais pra organizar as coisas

Mãos á obra:

Nosso maior trabalho será com o arquivo index.php no qual precisamos adicionar as devidas funcionalidades do dojo.

Abaixo o código de index.php, desculpem a endentação que não é das melhores, por que foi adequada à largura disponível de área para textos do blog.

php
//charset
header(“Content-Type: text/html; charset=ISO-8859-1″,true);

//modifique aqui o caminho da url do dojo
//em seu servidor
$DOJO_URL=“http://localhost/dojo-release-1.3.0-src/”;

?>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
_<title>TESTE xhrPosttitle>
_<link
__id=“themeStyles”
__rel=“stylesheet”
__href=“dijit/themes/tundra/tundra.css”>
_<script type=“text/javascript”
_________src=“dojo/dojo.js”
_________djConfig=“isDebug:false, parseOnLoad: true”
_________charset=“utf-8″>script>
_<script type=“text/javascript” charset=“utf-8″>

__//carrega layer dijit para interfaces
__dojo.require(“dijit.dijit”);

__//botao do dojo p engatilhar o xhrPost
__dojo.require(“dijit.form.Button”);

__//varre o HTML em busca de widgets dojo__
__dojo.require(“dojo.parser”);

__//função [sendForm] para estabelecer o envio
__//dos dados via xhrPost. Esta função é executada
__//uma única vez quando a página é carregada, para
__//que seja estabelecida a comunicação entre o
__//FORM e o xhrPost, bem como colocar o gatilho
__//do xhrPost no botão “botao_submit_dojo” que é um
__//widget Dojo. Não funfa com botões tradicionais.

__function sendForm() {
___var button = dijit.byId(“botao_submit_dojo”);
___dojo.connect(
____button,
____“onClick”,
____function(event){
_____//para (stop) o evento submit original
_____event.preventDefault();
_____event.stopPropagation();
_____var deferred = dojo.xhrPost({
______//”form_teste” – id do formulário HTML
______//por este id o dojo localiza o FORM
______form: dojo.byId(“form_teste”),
______handleAs: “text”,
______load:resJsonOk,
______error:resJsonError
_____});//xhrPost
____});//function(event)
__}//function sendForm()

__//mensagem erro de comunicação com o servidor
__function resJsonError(data,ioArgs){
___var msg = ‘Nenhuma resposta do servidor.’;
___if(data)
____msg += ‘Ocorreram os seguintes erros em ‘;
____msg += ‘recebe_dados.php:
‘ + data;
___dojo.byId(“ct_msgs”).innerHTML = msg;

__}//function resJsonError(…)
__//recepção da MSG de retorno OK, recebe o conteúdo
__//JSON devolvido do recebe_dados.php, e extrai as
__//variáveis (status e msg) com seus respectivos valores

__function resJsonOk(data,ioArgs) {
___if(data){
____var d = dojo.fromJson(data),
____conteudo_msg = “STATUS: ["+d.status+"]
”;
____conteudo_msg += d.msg + “
”;
____dojo.byId(“ct_msgs”).innerHTML = conteudo_msg;
___}//if
__}//function resJsonOk(…)

__//executa sendForm quando a página for carregada
___dojo.addOnLoad(sendForm);
_script>
head>
<body class=“tundra”>
_<div id=“ct_msgs”>div>
_<div id=“ct_geral”>
__
__
__<form id=“form_teste” method=“post”
___action=“recebe_dados.php”>
__
__
___<label>Nome:label>
___<input type=“text” name=“txt_nome” />
___<label>Endereço:label>
___<input type=“text” name=“txt_endereco” />
___
___<button dojoType=“dijit.form.Button”
____id=“submitButton”>Enviarbutton>
__form>
_div>
body>
html>

Abaixo o código para recebe_dados.php que será utilizado em nosso teste. O código está bem comentado, dispensando maiores… comentários hehehe.

php

//endereço dojo no File System
$DFS=“c:/apache2.2/htdocs/dojo-release-1.3.0-src”;

//classe JSON PHP do dojo
require($DFS.“/dojo/tests/resources/JSON.php”);

/*
* Neste espaço poderiam haver tarefas para
* salvar os dados em BD
*
*/

//monta uma string com os dados recebidos
$dr =“Dados recebidos:”;
$dr.=” ['nome': ".$_POST["txt_nome"].“, “;
$dr.=“‘endereço’: “.$_POST["txt_endereco"];
$dr.=“]
”;

//Prepara a resposta de retorno em JSON, para
//cada variável a + adicionar um item no array
//com o nome da variável e seu respectivo valor

$ar = array(‘status’ => “ok”,
____________‘msg’ => $dr);

//cria o objeto manipulador de JSON
$json = new Services_JSON();

//gera uma string com o conteúdo do vetor
//codificado em JSON
echo $json->encode($ar);
?>

Podemos observar que recebe_dados.php, efetua a simples tarefa de receber os dados enviados, e devolvê-los através de variáveis codificadas em Json. É claro que recebe_dados.php poderia efetuar muitas outras tarefas, como por exemplo: verificar a validade dos dados recebidos, gravá-los no banco de dados, analisar o status da gravação no banco e gerar uma resposta e devolver. Porém vamos primar pela simplicidade por que o foco de nosso estudo é o funcionamento do xhrPost. Uma vez efetuadas as tarefas, o array PHP com as variáveis de resposta é lançado para o método encode do objeto $json, o qual retorna uma string JSON. Sempre que um browser roda um arquivo no servidor, e este possui um echo ou equivalente, uma strig de texto é devolvida para o browser automaticamente, e esta é exibida na tela. Porém em nosso caso o solicitante não foi diretamente o browser, porém o agente xhrPost que o fez enviando dados para o arquivo recebe_dados.php, naturalmente xhrPost aguarda alguma string de retorno vinda deste arquivo, pelo protocolo HTTP (veja novamente a figura 2). Juntando tudo isto, a resposta recebida virá em JSON, como no exemplo abaixo:

Variáveis:

“status” = ok,
“msg” = Dados recebidos: ['nome': Leonir, 'endereço': Rua Ah\u002e002e. Programando...!]

String Json:

{“status”:”ok”,”msg”:”Dados recebidos: ['nome': Leonir, 'endereço': Rua Ah\u002e002e. Programando...!]“}

Salve index.php, e recebe_dados.php na mesma pasta, de forma que vc possa acessar index.php através de seu servidor local. Aí é só colocar para rodar, estes códigos estão funcionando perfeitamente, foram testados, e copiados diretamente do editor PHP e Javascript que utilizo o APTANA.

Observação Importante: Ao copiar o código, e colar em seu editor substitua todas as aspas redigitando-as, ou através do search replace do editor. Isto devido ao fato que o wordpress substitui as aspas normais por umas mais bonitinhas porém inúteis, os interpretadores de código PHP e Javascript não as reconhecem.

É isto, experimente e deixe seu comentário.

Abraço e até o próximo post.

Instalação da Biblioteca Dojo

Leonir Zimmermann — Sun, 26 Apr 2009 18:56:09 +0000

Como frequentemente tenho escrito algum post direcionado a utilização das ferramentas dojo, decidi criar um tutorial enxuto dedicado apenas a instalação e testes do dojo. Posso adiantar que trata-se de uma tarefa muito simples!

O Dojo é um conjunto de ferramentas javascript (dojo toolkit – por conveniência em português gosto de chamar biblioteca dojo) cheio de recursos para enriquecer a experiência do usuário. Sei que já falei sobre o assunto em outro post, mas vale a pena reforçar. Para encontrar o Dojo Toolkit acesse:

http://www.dojotoolkit.org/downloads

localize o link “All Downloads” e acesse-o, a seguir escolha (bem no topo) o link “Download latest Stable Releaze x.x.x” (atualmente na versão 1.3.0, a qual adotaremos neste exemplo). Neste ponto vc irá se deparar com uma página abarrotada de links para download, que são diversas versões da biblioteca em compactações tar, zip, com os arquivos fontes já compactados pelo shrinksafe, outras com toda a bilbioteca com os arquivos fontes (abertos e comentados). Nos interessam apenas 2 downloads, a saber:

dojo-release-1.3.0-src.zip – versão totalmente aberta, na qual vem exemplos junto, e vc pode acessar o código fonte. É a ideal para suas experiências na máquina local onde vc desenvolve seus projetos. Tamanho: 22 M.Bytes (43 MBytes descompactado)

dojo-release-1.3.0.zip – versão enxuta, sem exemplos e sem os comentários nos códigos. Ideal para fazer upload ao servidor. Tamanho: 3.4 MBytes ( 8,67 MBytes descompactado)

Baixe sua versão para desenvolvimento, e descompacte-a para a pasta do localhost (no meu servidor Apache a pasta fica em c:\Apache2.2\htdocs\, de forma que ao ter baixado e descompactado fica: C:\Apache2.2\htdocs\dojo-release-1.3.0-src.

Testando 1…2…3…

A partir daí vc pode se divertir com os exemplos que acompanham a biblioteca. É um show, tem até arte de computação gráfica direto no browser sem usar Flash. Puxa… se não fosse uma ferramenta gratuita eu cobraria do Dojo por frases como esta hahaha.

Para encontrar os exemplos, abra com o windows explorer a pasta raiz do dojo (dojo-release-1.3.0-src) e faça uma pesquisa por “test_*.html”. Uma lista com mais de 350 exemplos é apresentada nesta versão. Basta abrir o arquivo HTML.

Figura 1 - Pesquisando arquivos de teste

Para abrir um deles clique (ex: test_Tooltip.html) e abra com o browser, o endereço: file:///C:/Apache2.2/htdocs/dojo-release-1.3.0-src/dijit/tests/test_Tooltip.html será apresentado. Substitua o caminho até htdocs pelo endereço do servidor http://localhost/dojo-release-1.3.0-src/dijit/tests/test_Tooltip.html e pronto o exemplo estará rodando certinho.

Passar array de PHP para Javascript, e de Javascript para PHP

Leonir Zimmermann — Sat, 29 Nov 2008 14:51:26 +0000

Nenhum post deste blog fez tanto sucesso quanto: “Como passar valores do PHP para o Javascript e vice versa?”. Porém tenho recebido solicitações para informar como efetuar esta tarefa com um array de valores. Demorou mas a hora chegou!

Em primeiro lugar precisamos ter em mente que array consta de uma coleção de dados em uma única variável. E o acesso ao seu conteúdo é gerenciado pela ENGINE da linguagem, associando um endereço a cada item na memória do computador. Não adianta em PHP por exemplo, dar um echo $array_dados e esperar que todas as posições desta variável sejam mostradas, pois estamos falando de uma variável complexa, que possui um endereço específico para cada informação nela contida. Neste caso, para ver o conteúdo da variável, ou se faz uso de uma tradicional varredura com looping’s, ou de um recurso muito útil para debug quando há arrays envolvidos, o print_r($array_dados).

Enviando um Array do PHP para um código JavaScript presente na página:

Não vou me deter aqui nos fundamentos sobre PHP e Javascript, já que este assunto foi exaustivamente abordado em outros posts. Todavia para quem deseja conhecer mais sobre o comportamento destas linguagens em servidores e browsers visite estes posts:

PHP ou Javascript? Qual a diferença?

Como passar valores do PHP para o Javascript e vice versa?

Continuando…

Não podemos esquecer portanto, que o trafego de dados via protocolo HTTP entre browser e servidor é sempre textual, e que enquanto o PHP está trabalhando no lado do servidor, o Javascript faz suas tarefas no cliente (browser). Logo se desejamos enviar o conteúdo de um array que está presente em um arquivo PHP, para um código em Javascript, este conteúdo precisa trafegar do servidor ao browser junto com o HTML e códigos javascript. Sendo assim é necessário transformar o conteúdo deste array em uma string (lembre-se: via protocolo HTTP só trafega texto). Então, se o array possuir 10 itens endereçados de 0 a 9, basta construir uma string separando os elementos por algum caractere que nunca vá ser usado no conteúdo dos ítens. Por exemplo: se meu array tem 2 posições com o conteudo: 0=>“tic-tac”,1=>“bla-bla-bla”, fica claro que não convém criar uma string com os 2 elementos separando-os por ífem “-”. Geralmente os desenvolvedores usam vírgula com o fim de separar os elementos. Particularmente prefiro o caractere pipe “|”, devido ao fato que este não consta nas regras da língua portuguesa para qualquer função, ocasionando que não estará presente em textos normais. Assim o resultado da string com elementos delimitados para um array com o conteúdo de 2 itens (0=>“tic-tac”,1=>“bla-bla-bla”) seria transformado em uma simples string:
“tic-tac|bla-bla-bla”.

Ok, qual a melhor maneira de fazer isto ?

No manual do PHP encontramos:
implode
(PHP 4, PHP 5)

implode — Junta elementos de uma matriz em uma string

Descrição
string implode ( string $agrupador, array $elementos )

Retorna uma string contendo os elementos da matriz na mesma ordem com uma ligação entre cada elemento.

Beleza já sabemos como fazer o trabalho no PHP. Então mãos à obra: Suponhamos que nossa página pertence a uma loja (que por sinal oferece produtos bastante diversificados), e de alguma forma temos em PHP um array com a lista de produtos. E precisamos dispor esta lista em uma variável javascript, para que alguma tarefa seja feita em Javascript, poderia ser o preenchimento de um list por exemplo.

php
//array com a lista de produtos
$produtos = array(0 =>“relogio digital”,
1 =>“mouse”,
2 =>“arame para cerca”,
3 =>“bateria de celular”,
4 =>“doce de abobora”,
5 =>“tv de plasma”,
6 =>“pacote de pregos”,
7 =>“peneu de caminhao”,
8 =>“polvora”,
9 =>“prato de porcelana”);

//criando a string com a versátil função php implode
$string_array = implode(“|”, $produtos);
?>

A essa altura um simples echo $string_array mostraria o resultado. Agora precisamos fazer que a string seja recebida em uma variável javascript, muito simples, basta um php echo $string_array; ?> no meio do código Javascript. Ora, este é o mesmo método para enviar valores do PHP para o meio do HTML.

Depois disto esta string deve ser convertida em um array Javascript. Uma consulta rápida:

Em JavaScript Bilbe 5th (Danny Goodman with Michael Morrison) encontramos a função:

string.split(“delimiterCharacter” [, limitInteger])
Returns: Array of delimited items.
Compatibility: WinIE4+, MacIE4+, NN3+, Moz1+, Safari1+, testei também no Chrome e funfa!!!

Aplicar é fácil (perceba que o código PHP de linhas atrás e o que vem a seguir estão presentes no mesmo arquivo) :

Uma beleza não? E vice-versa também é possível? Vejamos:

Agora se vc possui um array que está no código JavaScript e deseja enviar para o PHP a fins de salvamento em banco de dados e tal, segue a mesma forma: transformar array em string, e para envio segue a via ilustrada no post sobre troca de dados entre JavaScript e PHP.

Mais um Help na bíblia do Javascript:

array.join(separatorString)
Returns: String of entries from the array delimited by the separatorString value.
Compatibility: WinIE4+, MacIE4+, NN3+, Moz1+, Safari1+, no Chrome testei e tá blz!!

“post” action=“recebe.php” >
“hidden” id=”send_string_array” name=“send_string_array” value=“” />
“submit” value=“Enviar” />

Agora basta receber a string que será enviada via POST, e transformá-la em array:

No manual do PHP:

(PHP 4, PHP 5)

explode — Divide uma string em strings

Descrição
array explode ( string $separator, string $string [, int $limit] )

Retorna uma matriz de strings, cada uma como substring de string formada pela divisão dela a partir de fronteiras presentes nela separator. Se limit está definido, a matriz retornada conterá o máximo de limit elementos com o último elemento contendo o resto da string.

Note que o código a seguir está em um arquivo separado, destinado a receber dados enviados por um fomulário, ou seja este é o recebe.php:

//transforma a string de itens separados em array
$array_produtos = explode(“|”, $_POST['send_string_array']);
//mostra o conteúdo do array
print_r($array_produtos);

É isto, todo este código foi testado antes de escrever o POST.
Grande Abraço.

[15/01/2009 - Edição] - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados. Não desista! Tente novamente

Obs: O blog Ahaprogramando é informativo, e não tem responsabilidade em dar suporte a dúvidas relacionadas ou não ao conteúdo apresentado, encontrar bugs em arquivos do leitor, ou auxiliá-lo em projetos pessoais.

Galeria de Fotos LightBox com Dojo (sem escrever código js)

Leonir Zimmermann — Sat, 13 Sep 2008 15:44:38 +0000

Tenho estado um pouco afastado dos desenvolvimentos WEB, por que em fevereiro deste ano mudei o foco do meu trabalho ao entrar na área de TI de uma empresa, mas agora tenho um laboratório de experiências para incrementar e colocar coisinhas “Jasvascriptáveis”, trata-se da página www.ligazimmermann.com.br . Como o próprio nome pode informar, o intuito do site é ser um informativo sobre a liga da família Zimmermann. Ok continuando com WEB development… Se eu sonhasse a alguns anos atrás que um dia seria tão fácil colocar efeitos legais em um página de internet. Vibrava com o resultado de semanas de programação Javascript para adicionar um menu-pop up, ou fazer um sistema de ordenar fotos. Pois bem… hoje existe um recurso poderoso para fazer coisas “fantáhhhdicas” sem sequer escrever uma linha de Javascript. Volto (é claro…) a bater na tecla do Dojo, pois nesta semana adicionei na página de eventos (http://www.ligazimmermann.com.br/?imnu=2) do site uma galeria de fotos usando uma das ferramentas presentes no Dojo: o widget LightBox . LightBox é uma forma de apresentar imagens em um quadro modal, ou seja, ele toma conta de toda a tela do browser e não permite que as demais áreas do site estejam acessíveis, e já incorpora controles de avanço e retrocesso do grupo de imagens.

O efeito é legal, porém não é o que mais me impressiona, o que causa realmente impacto para o WEB designer é a facilidade de adicionar este recurso. Precisamos lembrar que o Dojo é uma biblioteca Javascript gratuíta que tem como principal vantagem não precisar programar recursos básicos. Basta configurar os requisitos mínimos e adicionar tag’s HTML marcadas como pertencentes a algum utilitário (widget) Dojo, e ele fará o restante do trabalho encima destas tags.

No caso em questão, eu já tinha efetuado todas as configurações para que funcionassem os “Tooltips” na página. E para adicionar o widget “LightBox” basicamente precisei incluir 2 linhas, uma invocando o arquivo: Javascript “dojox/image/Lightbox.js” e outra para adicionar o CSS que deixa no LightBox tudo em seu lugar: “dojox/image/resources/image.css”. Vamos ver aqui na íntegra todas as configurações que estão na página em questão.

Analisando os ítens da receita…

Na linha abaixo invoca o núcleo da biblioteca “dojo.js”, e configura pra não mostrar o debug na página (isDebug:false), e para que o Dojo procure por tag’s com Wigets ao carregar toda a página (parseOnLoad: true)

<script type=“text/javascript”
src=“/dojo-release-1.1.1/dojo/dojo.js”
djConfig=“isDebug:false, parseOnLoad: true”>script>

Agora devem ser especificadas configurações como os includes necessários e configuração da classe css que será utilizada, o Dojo possui algumas “skins” que vc pode escolher para modificar a aparência de seus widgets. No caso ficamos com “tundra”.

<script type=“text/javascript”>
//aplica classe CSS “tundra” na TAG body do site
dojo.addOnLoad(function(){dojo.addClass(dojo.body(),“tundra”);});
dojo.require(“dijit.Tooltip”);//include para o Tooltip
dojo.require(“dojo.parser”);//este deve estar sempre
script>

E como estamos falando do LightBox, aqui se adiciona o javascript da biblioteca que é responsável pelo recurso:

<script type=“text/javascript”
src=“/dojo-release-1.1.1/dojox/image/Lightbox.js”>script>

No que tange a Javascript até aqui tá concluído, agora vamos aos arquivos css básicos da página mais os que que pertencem ao dojo. Ah e já falei sobre @import usado para linkar o arquivos css em outro artigo do Ahã… Programando…, é uma forma de carregar os arquivos CSS com um código mais limpo .

<style type=“text/css”>
@import url(“/css/style.css”);
@import url(“/dojo-release-1.1.1/dijit/themes/tundra/tundra.css”);
@import url(“/dojo-release-1.1.1/dojo/resources/dojo.css”);
@import url(“/dojo-release-1.1.1/dojox/image/resources/image.css”);
style>

O último @import feito é para o CSS utilizado pelo widget LightBox.

Feitooo, agora temos todos os recursos prontos para serem utilizados, quantas linhas de código Javascript serão necessárias para adicionar as fotos? Nenhuma! Pera aê… não tem que criar os eventos onclick ou coisa parecida para navegar entre as fotos? Nope! Como escrevi em linhas atrás, o Dojo fará tudo por vc se ele encontrar um tag HTML que pertenca a um brinquedo dele (Widget). Assim fica fácil incluir quantas fotos forem necessárias e com um código HTML limpíssimo:

Tudo explicadinho nos mínimos detalhes…

A tag <a> é básica para links, o atributo href de um link tradicional recebe o endereço URL para o qual vc quer apontar. Mas aqui o novo atributo: dojoType, define que esta tag <a> deixa de ser uma tag tradicional para se tornar um widget Dojo, que em nosso caso será o da classe “dojox.image.Lightbox“.

O atributo group serve para indicar que a foto representada pela tag <a> pertence a um grupo, de forma que todas as fotos que pertencem a este devem ser identificadas com o mesmo nome de grupo. Assim se existirem na página 20 fotos em 2 grupos, ou seja 10 fotos para cada grupo, o LightBox saberá que quando estiver navegando nas fotos do primeiro grupo não deverá invadir a lista de fotos do segundo grupo.

E por fim o atributo title onde deve ser especificado um comentário sobre a foto. Se quiser dá pra incrementar o visual e entre <a> e a> colocar um <img> com um thumb da foto, fica massa!

É isso… se quiser ver o LlightBox funcionando visite o link: http://www.ligazimmermann.com.br/?imnu=2

Reforcei aqui a idéia de que não precisa nem programar para usar a maioria dos widgets Dojo, mas quero deixar claro que não ignoro o fato de que o Dojo ofereça suporte a programação de recursos avançados. O que é ótimo para quem quer tornar as coisas mais dinâmicas, tratando eventos, ligando widgets com outras funcionalidades… etc. Basta investigar e ver que o Dojo é forte nesta parte também, inclusive existe uma lista das classes da API Dojo que pode ser conhecida no link: http://api.dojotoolkit.org/jsdoc/dojo.

Abraço e até o próximo artigo!

[15/01/2009 - Edição problema grave no wordpress] - Ao copiar trechos de código, dos posts do Ahã Programando, substitua todas as aspas redigitando-as. Pois o WordPress substitui as aspas originais por algumas que são inúteis em programação. E os testes acabam não funcionando, deixando os entusiastas da programação web frustrados. Não desista! Tente novamente

Sessão / Sessões em PHP

Leonir Zimmermann — Sat, 21 Jun 2008 04:15:56 +0000

Em primeiro lugar vc precisa sacar por que elas são necessárias. Quando um browser termina de carregar determinada página, a conexão entre ele e o servidor é desfeita. Não confunda conexão de internet com a conexão entre browser e servidor, esta última refere-se a comunicação entre eles. Assim após o carregamento browser e servidor ficam separados, um não sabe o que o outro está fazendo. Então, quando vc solicitar outra página, o servidor não tem nem idéia mais do que vc fez na última conexão, pois para pedir esta nova página o browser se reconecta ao mesmo endereço do servidor e pede a outra página, detonando com a conexão assim que esta também carregar. Digo isto levando em consideração que as 2 páginas são do mesmo site e pertencem ao mesmo servidor.

A sessão não é uma coisa do PHP, mas do servidor. É uma área na memória do servidor que guarda o IP, da máquina que a acessou e qual browser que se conectou, a esta área de memória podem ser associadas outras informações que vc queira guardar, no estilo de variáveis. O PHP, é claro, possui uma ferramenta para manipular sessões do servidor. Assim, em um caso de login por exemplo, vc se loga e guarda numa sessão informações que indiquem aquele usuário está logado. Aí mesmo que a conexão seja desfeita, ao reconectar para carregar a próxima página, o servidor pode recorrer a sessão e ver que informações estão lá guardadas, como no caso, esta informação, pode dizer ao servidor: “sim ele está logado, e pode acessar esta página”.

Exemplo:

Para manipular sessoes no PHP:

arquivo1.php
session_start();//inicializa o serviço da sessão

//cria uma variável do tipo sessão com a informação “sim”
$_SESSION['esta_logado'] = “sim”;
?>

arquivo2.php
session_start();//inicializa o serviço da sessão
echo $_SESSION['esta_logado'];//vai imprimir: “sim”

?>
Isto gera a ilusão de que a variável “esta_logado” foi passada de uma página para a outra, porém ela foi buscada da sessão no servidor. Simples, fácil… mas uma ferramenta útil e poderosa!

Até a próxima!

PHP ou Javascript? Qual a diferença?

Leonir Zimmermann — Sat, 05 Apr 2008 03:15:46 +0000

Em perguntas que tenho recebido de leitores do Ahã… Programando… tenho percebido que alguns tem dificuldade de perceber a diferença de trabalho do PHP e do Javascript. Em linhas gerais quero tentar lançar alguma luz sobre o entendimento das funcionalidades destas ferramentas.

Em primeiro lugar vamos entender a internet:

O browser – Este tem as conexões com o servidor restritas ao momento de receber o conteúdo solicitado pelo usuário. Após a página ser carregada por completo a conexão é desfeita. Assim não há conhecimento por parte do servidor quanto ao que o usuário está fazendo com a página carregada no browser. E após o carregamento da página o servidor somente entrará em cena novamente quando o usuário clicar em um link, um botão de enviar ou coisa semelhante, aí novamente o browser irá localizar o servidor na web e solicitar a execução de algum serviço que traga outro conteúdo.

HTML – Hypertext Markup Language (linguagem de marcação de texto). Em sua essência o HTML é texto, só que com marcações denominadas TAG’s, delimitadas pelos caracteres “<” e “>”. Toda a página que for buscada no servidor deve trafegar pelo protocolo HTTP (Hypertext Transfer Protocol) que é o protocolo perfeito para transferência de HTML entre servidor e browser no cliente.

O interesse do browser por sua vez recai em interpretar estas tags, e classificar cada uma de acordo com sua serventia em um espaço reservado na memória do computador. Esta classificação se dá em estrutura de objetos. Nesta organização fica bem mais fácil de o browser “saber” o que é um botão, uma caixa de texto, saber dentro de quais tags estes componentes se encontram, monitorar seus eventos, renderizar os componentes na tela relacionando com CSS e tal.

Com o fim de que programadores WEB como nós pudéssemos acessar e manipular estes OBJETOS, a netscape criou uma linguagem de script que por fim foi denominada Javascript (nossa amiga). Assim, no mesmo texto que provém do servidor e compõe o HTML podemos dar comandos Javascript para controlar os objetos criados a partir do HTML, e modificar a forma como estes são apresentados ou trabalhados. Vc já deve ter observado que Javascript não manipula as tags HTML como se fossem simples strings, mas objetos. Com propriedades, métodos e eventos.

Por exemplo, veja o HTML a seguir:

Supondo que se queira adicionar um texto qualquer dentro da div coisa utilizando Javascript, utilizaríamos a seguinte sintaxe:

Como isto funciona?

Primeiramente o objeto correspondente a id coisa precisa ser instanciado para uma variável através de getElementById. A instância (cópia, referência) é colocada na variável objeto_coisa. A partir desta variável podemos chamar métodos (funções) e propriedades (variáveis) do objeto. No caso apenas um texto foi lançado na propriedade innerHTML (Html interno) da tag referida pela variável objeto_coisa. Isto não modificou o HTML original colocando o texto no meio da tag. Mas modificou o objeto da div coisa que está na memória, e fez com que o browser apresentasse na tela o texto que foi atribuído para coisa.

Este teste pode ser reproduzido em sua máquina com a simples cópia dos 2 trechos de código anteriores, e a seguir colando em um arquvo “.html” e testar, eu testei e funciona hehehe.

Javascript precisa de alguma instalação ?
Não, da mesma forma que um Navegador de Internet tem suporte a interpretação de HTML por natureza, o mesmo ocorre com a linguagem Javascript. É preciso porém verificar se o browser está com o Javascript ativado. Por alguma medida de segurança tomada o Javascript de seu navegador pode estar desativado, e aí não funciona.

E o PHP como funciona?

Já o PHP é executado no lado servidor. Este geralmente é utilizado para criar ou complementar o HTML que é enviado do servidor para o BROWSER de forma dinâmica. E no caso do PHP, como sua única função é criar o HTML sem monitorar eventos, ele trata o HTML puramente como string. Ou seja, ao utilizar um echo, ele está apenas acrescentando algo que será enviado através do protocolo HTTP para o browser. E é isto. Ao digitar uma url como: http://pagina.com.br/lista.php no browser, este receberá apenas texto (seja HTML, Javascript, CSS…). Ninguém jamais viu código PHP no fonte de uma página, pois este apenas é interpretado no servidor, e se não houver echo nada virá do servidor para o browser.

Veja como ficaria o problema anterior resolvido com PHP:

Se o código HTML + PHP acima fosse acessado pelo browser, a única coisa que este receberia constaria do HTML já preenchido pela tarefa em PHP que foi interpretada e executada pelo servidor, assim:

um texto qualquer

PHP precisa Instalação?
Sim. E quando utilizado para fins de WEB, obviamente ele deve estar instalado em um servidor HTTP com suporte e PHP. Não significa que você não possa instalar e fazer suas experiências localmente. Existem pacotes como o WAMP, que com poucos cliques transformam sua máquina em um servidor local instalando Apache (servidor HTTP), PHP, MySQL (sistema gerenciador de Banco de Dados), PHPMyAdmin (front-end WEB para MySQL). Onde o endereço acessado para suas experiências WEB locais será http://localhost.

Em resumo:

Javascript:

1 – É interpretado e executado pelo browser, não pelo servidor.
2 – Não trata o HTML como string, mas cada tag individualmente como um objeto que pode possuir métodos, propriedades (ou atributos) e eventos.

É recomendado para tratar de assuntos que não devam consultar o servidor, mas que possam ser executados diretamente no browser sem perda de tempo, e também no caso de tratamento de eventos (onclick por exemplo).

PHP:

1 – É executado no servidor, e nada “sabe” do que está acontecendo no browser. Somente responde quando o usuário solicitar através de links, botões, ou códigos AJAX que efetuem chamadas para tarefas no servidor.
2 – Trata o HTML puramente como string (texto).

É recomendado para fazer tarefas como buscar dados em banco de dados e complementar ou gerar HTML encima destes dados, ou para diversas outras tarefas que possam ser melhor tratadas no servidor.

É preciso ter em mente também que, quando um usuário solicitar algo do servidor uma conexão do browser com o servidor será estabelecida, e assim que o browser receber todo o HTML referente a esta página, a conexão é desfeita. Por isso não há como o servidor saber o que o usuário está fazendo com a página que recebeu. Pois o servidor apenas recebe ordens do browser, não podendo fazer nada além do solicitado pelo usuário. O Javascrript tem contribuído para o enriquecimento das aplicações web, por que pode ficar o tempo todo executando rotinas no browser e estar por dentro do que o usuário está fazendo. Então o programador da página pode fazer com que uma função detecte as necessidades do usuário e faça requisições ao servidor em momentos diferentes dos tradicionais, e mais, pode fazer isto escondido sem recarregar toda a página. Aí entra o AJAX, que pode fazer uma solicitação para o servidor digamos por debaixo dos panos (sem que o usuário tenha clicado nos tradicionais botões ou links). Mas uma tarefa pode ser escrita em Javascript para por exemplo monitorar objetos que estejam sendo arrastados na tela (Drag and Drop) e a medida que isto aconteça enviar ou buscar informações no servidor via AJAX.

É isto… ahhh e se ainda não entende AJAX leia o post “Desmistificando o Temível Ajax”

Como funciona a bilblioteca JAVASCRIPT DOJO?

Leonir Zimmermann — Mon, 04 Feb 2008 19:30:16 +0000

Graças a Deus pela criatividade dos Web Designers programadores neste mundo! E principalmente por aqueles que criam códigos reutilizáveis e os compartilham gratuitamente. É o caso da biblioteca Javascript DOJO que vem com uma montanha de utilitários (widgets) para que os web designers criativos não precisem gastar dias ou meses programando para adicionar funcionalidades Javascript nos seus projetos WEB. Não vou usar minha capacidade de ignorância para transmitir a idéia de que exista apenas o DOJO com esta finalidade, sei que paralelamente estão em atividade as bibliotecas MochiKit, YUI, JQuery, EXT, GWT… Porém apenas posso comentar e dizer que é boa aquela que conheço e utilizo .

Legal… mas o que o dojo faz?

Como dito anteriormente o dojo traz um cargamaço de widget‘s (utilitários de interface) e funcionalidades que podem ser facilmente adicionados às páginas HTML. O melhor de tudo, com uma dúzia de linhas de código Javascript você pode instalar um widget à página, com um código limpo, nada de misturanga de scripts e HTML. A figura abaixo mostra um exemplo de widget que gera um quadro que pode ter o conteúdo dividido por Abas. Uma boa parte destes recursos são úteis em ferramentas da área administrativa, ou para a implementação de WEB services.

No que tange a funcionalidades, tenho utilizado o serviço de ajax do DOJO, que funciona muito bem e é compatível com os browsers que aceitam objetos xmlHttpRequest. Em outra oportunidade poderemos ver como utilizá-lo, particularmente achei muito prático poder enviar dados via POST com o ajax do dojo. Se você ainda não conhece AJAX e seus benefícios visite nesta página o link: Desmistificando o temível AJAX!.

Usar o DOJO requer:

Download da biblioteca, existem várias opções em http://dojotoolkit.org/downloads

As principais são a versão compacta, e a versão com os fontes (src). Sempre opto pela opção src, assim posso dar uma olhada nos fontes quando tenho dúvidas. Mas na hora de colocar no servidor, aí é claro que convém utilizar a versão compacta. Localize a última versão em:

downloads > All downloads > Download latest Stable Release (1.2.3) >

dojo-release-1.2.3-src.zip [versão com fontes]

dojo-release-1.2.3.zip [versão sem fontes]

Nos exemplos acima considerei a versão 1.2.3, quando for atualizado óbviamente constará diferente disso.

A biblioteca pode ser descompactada em qualquer diretório do computador. Para quem já tem servidor instalado na máquina, recomendo extrair para htdocs ou www.

Uma vez “downloadeado”, pode-se acessar diretamente nas pastas os diversos testes de exemplo que estão previamente preparados para experimentos iniciais de quem pretende utilizar a biblioteca. Tais exemplos estão dispostos em arquivos HTML e distribuídos em uma série de diretórios dentro da pasta principal que contém os arquivos do dojo, quando de-zipada. A maneira mais prática de encontrá-los é através de uma pesquisa pelo sistema de arquivos, solicitando apenas aqueles com extensão “.html”, e com nome iniciado por “test_”. Veja na figura 2 um exemplo de pesquisa executada no windows vista que retornou os arquivos desejados. No resultado desta pesquisa bastaria um clique duplo sobre o arquivo test_Calendar.html para abrir no browser o exemplo de uma interface de calendário muito amigável gerada pelo DOJO.

Estes exemplos não somente proporcionam uma clara visão do resultado como permitem que o usuário abra o código fonte para entender a estrutura HTML e Javascript da interface.

Na prática… ô parte boa!

Para nosso estudo de um widget vou escolher o arquivo de exemplo “test_Tooltip.html”. Tooltip é o utilitário usado para criar aqueles balões estilosos que descrevem algum objeto presente na página. Na figura 3 é mostrado um tooltip em ação que traz comentários sobre a caixa de texto #1. Infelizmente a seta do mouse não foi capturada no printscreen, mas ela estava posicionada sobre a caixa de texto à esquerda do balão.

Examinando detalhadamente o arquivo “test_Tooltip.html” vamos encontrar no cabeçalho o seguinte script:

Passo a passo:

O atributo djConfig recebe configurações de comportamento que definem como o dojo vai interpretar este arquivo. O primeiro parâmetro parseOnLoad que é setado como true, informa que o dojo precisa “farejar” o HTML em busca de widgets. Ou seja, quando a página for carregada o dojo irá varrer todo o HTML da página, e identificar quais tags lhe pertencem, quais são as que contém widgets dojo. As tags identificadas precisam ser trabalhadas dinamicamente para que o comportamento delas se altere segundo as definições para o widget nela contido. O segundo parâmetro isDebug, se for setado como true irá acrescentar um console de erros a página para identificar possíveis problemas com os widgets. Este console é precioso para quem estiver trabalhando com Internet Explorer, pois até a versão 7 do IE as informações sobre erros de Javascript são bastante incompletas. Antes de publicar a página não esqueça de desativar o console do dojo (isDebug:false), para evitar que ele fique aparecendo inconvenientemente ao público geral.

Aqui trata-se de um script específico para o teste do tooltip.

Acima é criada uma função javascript, que será executada quando a página estiver toda carregada. Esta função cria dinamicamente um tooltip e informa no console se a criação foi bem sucedida. O mais interessante de tudo aqui, é a ferramenta dojo.addOnLoad. Com ela pode-se criar qualquer função dentro de addOnLoad que precise ser executada quando a página for carregada. Experimente algo assim:

dojo.addOnLoad(function(){ alert(“oii”); });

Isto faria que alert(“oii”) fosse executado assim que a página terminasse de ser carregada.

Agora o HTML dos WIDGET’S:

tooltip para a caixa 1

A primeira tag “id “id1″. Logo abaixo a tag “id1. Por que as duas tags estão ligadas pela referência no atributo connectId da tag span. É importante perceber que aqui, no meio do html não foi requerido nenhum script especial, pois o dojo já efetua todas as tarefas de montagem quando a página for carregada, e depois fica aguardando apenas que os eventos (click, mouseover…) aconteçam. Assim, se fossem atribuídos 10 tooltip’s para outras 10 tag’s input, nenhuma nova linha de javascript seria requerida para isto.

Bom, por hoje é só.

Desmistificando o temível AJAX!

Leonir Zimmermann — Sun, 27 Jan 2008 20:40:03 +0000

O termo AJAX não provém do latim “Acessarium Javascriptum Atloren Xmelum”, não, mas da expressão da língua inglesa “Asynchronous JavaScript And XML” ou Javascript e XML assíncronos.

Um parêntesis teórico:

Esta questão de atividade assíncrona está para Javascript assim com THREAD’S estão para JAVA. Ou seja, a execução assíncrona ocorre em um tempo diferente da execução do script original. De modo que, se no meio de um looping for chamada a execução de uma tarefa assíncrona, o programa não irá aguardar a conclusão desta tarefa para então passar ao próximo passo do looping. Assim ao concluir a execução de um looping de 10 iterações, em que todas executam uma nova tarefa assíncrona, a nona tarefa pode estar sendo aberta e a primeira não ter sido concluída ainda, mas a terceira tarefa já pode ter retornado um resultado.

O que realmente interessa, prática!

Vamos partir de um layour HTML ultra básico:

“geral”>

“coluna_menu”>

“coluna_principal”>

Para incluir dados dinamicamente via PHP poderíamos proceder da maneira tradicional:

“geral”>

“coluna_menu”>
“index.php?arquivo=lista.php”>

“coluna_principal”>

include($_GET['arquivo']); ?>

Tudo certo até aqui?

Bom, existe uma maneira de se carregar um conteúdo para dentro da div “coluna_principal”, sem usar frames ou recarregar a página utilizando includes.

Trata-se da técnica entitulada de AJAX (Asynchronous JavaScript And XML). Serve basicamente para carregar dados (xml, html, texto) em uma página, abrindo um portal no “espaço tempo” do browser e indo buscar novo conteúdo no servidor, sem desfazer todo o HTML que já tinha sido previamente carregado no browser, ao acessar a página.

Um parêntesis de programação javascript:

Em primeiro lugar, gostaria de explicar como funciona o atributo innerHTML do javascript. Atenção innerHTML não é AJAX. Serve apenas para alterar dinamicamente o HTML contido dentro de uma tag. É preciso ter em mente que o Javascript vê as tags do browser de uma maneira diferente do PHP. Em Javascript, todas as tags HTML podem ser referenciadas como um objeto (com métodos e atributos), ligado ao objeto principal document. Em PHP, porém, todas as tag’s são tratadas puramente como texto, basta fazer echo de alguma coisa no meio do html e tá realizado. Claro, isto por que o PHP faz a sua parte lá no servidor, e o servidor apenas tem interesse em fornecer TAG’s HTML, e não em interpretá-las. Já o Javascript, é executado no browser, juntamente com o HTML. Logo, estando o HTML interpretado pelo browser, este HTML fica na memória do computador, e o browser não mais o enxerga como um texto, mas como objetos que tem propriedades e comportamentos. Por exemplo, um botão não pode ser visto como um texto, mas deve ser visto como um programa, um objeto que reage ao click do usuário. Continuando:

var container = document.getElementById(‘coluna_principal’);
//getElementById localiza um objeto no meio do html,
//pelo seu ID, e retorna uma referência para este objeto.

Agora, a variável container se tornou um objeto com referência para a tag “coluna_principal”. E ele tem propriedades que podem ser acessadas a partir desta variável. Tipo, poderíamos descobrir que tag é esta:

alert(container.tagName); //isto mostraria “div” , pois div é o nome da tag

//que é identificada pelo id “coluna_principal”.

Aqui é que entra o innerHTML.

container.innerHTML = “
oi

bla bla bla”;

//com isto o texto e o HTML entre aspas foram adicionados dentro da tag div com id “coluna_principal”.

Bom esta é a maneira de escrever um HTML novo dentro de uma tag já existente, de forma dinâmica (DHTML – Dynamic HTML).

Então… como o Ajax funciona?

Ajax nada mais é do que a técnica para carregar conteúdo no browser, que utiliza funções javascript para buscar dados de um arquivo presente no servidor. Esta tarefa é executada por um componente do browser (XMLHttpRequest), que pode ser acessado através de funções Javascript para buscar no servidor um novo HTML ou XML.

Pronto! Lembra daquele trecho básico de html?

“geral”>

“coluna_menu”>

“coluna_principal”>

Para inserir um conteúdo HTML, no div de id “coluna_principal”, basta invocar a função carrega passando como parâmetro o id da div, e o endereço da página que contém os dados que devem ser carregados via AJAX. Ex:

Quando carrega for chamado com os devidos parâmetros é que ocorre a tarefa de carregamento que se dá assincronamente, ou seja, não há como prever o tempo que levará para ela ser concluída, uma vez que este tempo depende de diversos fatores como: a velocidade da conexão de rede naquele momento, a quantidade de dados que serão carregados, a disponibilidade do servidor de atender etc…

E como fazer para um link ativar o carregamento de uma página usando AJAX?

“geral”>

“coluna_menu”>“javascript:carrega(‘coluna_principal’, ‘dados.php’);”>acessar dados

“coluna_principal”>

Bom, como podemos ver, AJAX nada mais é do que uma técnica de carregamento de dados. O exemplo acima funciona, porém por tratar-se de um código exemplar de extrema simplicidade, não pode ser utilizado para aplicações sérias. Nele faltam diversos recursos, que talvez em outra análise sobre AJAX possamos aprofundar.

Por hoje é só! E como prometido, quero dedicar este pequeno artigo à minha amiga Web Designer Cristina Otto, abração Cris!!