Javascript

Depois de muito tempo e a paciente espera do Amós Vilarinho Rangel, um representante da classe dos tecelões, disponibilizo a versão 1.0 do Gerador de Padrões – Técnica Repasso.

Sob o aspecto técnico, consiste de programas em PHP, de rotinas em Javascript/AJAX e de um pouco de CSS e XHTML. Contém um formulário para digitação dos campos necessários (os fundamentais são a sequência de pedalagem e as cores da trama e do urdume) para gerar os padrões de tecidos e uma breve explanação de como utilizá-lo.

Além do que, no combobox Exemplos do gerador é relacionado alguns códigos repasso (reais) extraídos da pesquisa com o objetivo de demonstrar a sua funcionalidade. Basta selecionar qualquer um deles e os campos são exibidos após uma consulta a uma tabela MySQL, via AJAX, e clicar no botão “Gerar” na parte inferior do formulário. Neste caso recomendo, apenas, alterações nas cores, se assim o desejar.

Atenção! A versão 1.0 não armazena as informações digitadas no banco de dados do Viche. No entanto, na página com o resultado, elas são exibidas. Sugiro, portanto, anotá-las ou utilizar os famosos Ctrl+C (copiar) antes da execução e o Ctrl+V (colar) no caso de necessidade de um novo experimento.

As paletas de cores são bem simples e não há validação dos campos preenchidos, nesta versão. Deixo para fazê-la após sua avaliação.

Acrescentada uma terceira cor cinza fixa (#666666) em alguns pontos da trama de modo a proporcionar uma melhor visualização do padrão.

E, finalmente, só me resta aguardar as críticas – ou elogios :-) – e as sugestões de melhorias do gerador, que peço sejam registradas nos comentários deste post.

[UPDATE: 17/09/2006]

A modificação básica efetuada no gerador, da versão 1.0 para a 1.01, consistiu em substituir a exibição do padrão no formato de tabela para o formato em folhas de estilos. A nova versão pode ser acionada no link exibido a seguir, onde você observará que houve um ganho significativo na performance se comparada com a versão anterior.

Gerador de Padrões – Técnica Repasso: Versão 1.01

A versão 1.01 foi testada no FF, IE, Netscape e Opera, sendo que neste último o padrão é renderizado com um tamanho maior do que nos demais.

[UPDATE]

powered by performancing firefox

Nos experimentos anteriores, publicados aqui no Viche, utilizei sómente uma das duas propriedades do objeto XMLHttpRequest que permitem acesso às respostas enviadas pelo servidor – a propriedade responseText.

Como o próprio nome indica, são respostas na forma de um texto não padronizado. Em geral é construído em um formato definido pelo desenvolvedor da aplicação, de maneira que possa ser mais facilmente manipulado para gerar conteúdo em uma página. Como por exemplo, em JSON, HTML ou texto simples sem formatação, normalmente para exibir alertas.

Já a segunda propriedade, responseXML, recebe um objeto XML que é padronizado pela W3C e pode ser manipulado pelas propriedades e métodos dos elementos DOM, através de qualquer linguagem de script.

No exemplo que será detalhado a seguir é utilizado o JavaScript para acessar e manipular o documento XML.

O Resultado do Experimento

Veja de imediato o resultado a ser alcançado, que consiste na manipulação de um objeto XML recebido através da propriedade responseXML, como dito, e apresentado na forma de uma tabela.

Se desejar, clique novamente no link acima para fechar a tabela – claro se aberta :-) – e vice-versa.

O Processo de Desenvolvimento

Penso valer a pena detalhar alguns fatos do processo de desenvolvimento, uma vez que tem um papel importante no resultado final do experimento.

Para minha “surpresa” deparei-me, de cara, com um problema no IE. Enquanto nos demais browsers testados por mim (Firefox, Opera e Netscape) obtinha o resultado esperado, no IE o resultado era nulo. Ou seja, não reconhecia a resposta como um documento XML apesar de ter no programa PHP a instrução correta para gerar o cabeçalho HTTP requerido:

header("Content-type: application/xml; charset=UTF-8");

O uso da instrução header é necessária pois o mime-type do Viche é text/html. Diante do fato fui a procura de informações na WWW, via Google, para identificar e corrigir o problema.

Encontrei vários companheiros na mesma situação e uns poucos artigos publicados com a solução. Testei algumas e, talvez por não compreender de forma adequada as explicações encontradas, continuei na mesma.

Lembrei-me, então, que o Analista de Sistemas Nailson Araújo Brito, da empresa em que trabalho, havia recentemente efetuado uma alteração em nossa Intranet com o uso da propriedade em questão e com o funcionamento correto no IE. Ao analisar o código observei que ele utilizava no método open() do objeto XMLHttpRequest, POST ao invés de GET.

Fiz a substituição e acrescentei a propriedade setRequestHeader(“header”) do objeto para alterar o mime-type do pedido, exigido ao se enviar dados através do método POST, conforme indicado abaixo:

xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Como o experimento a ser detalhado em seguida não exigia a passagem de parâmetros, alterei o método send() para:

xmlhttp.send('1')

E … funcionou, tanto no IE como nos demais browsers mencionados no início do artigo.

As Dúvidas

Mesmo com o problema solucionado ficaram dúvidas:

1. É correta a solução, mesmo com o artifício utilizado no método send()?
2. Por que o IE interpretou corretamente o objeto XML com o método POST?
3. Qual seria a solução, nas condições do Viche (text/html), para funcionar com o método GET?

Deixo, as dúvidas, em aberto para quem quiser contribuir nos comentários e vamos, finalmente, ao que interessa.

O Experimento

O experimento consiste:

De um programa simples em PHP que gera o documento XML a partir da tabela Categories do Viche.

Do objeto XML.

De funções em JavaScript apresentadas a seguir com comentários que detalham os principais procedimentos executados.

// Cria o objeto XMLHttpRequest
function criaxmlhttp() {
   try {
      xmlhttp = new XMLHttpRequest();
   } catch(ee) {
      try {
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
         try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch(E) {
            xmlhttp = false;
        }
      }
   }
}

function leXML(url) {
// Verifica se a tabela foi exibida. Se sim, ao clicar
// no link fecha - função limpaResultado()

   if (document.getElementById("cabecalho").hasChildNodes()) {
      limpaResultado();
      return;
   }
   criaxmlhttp();

   document.getElementById("cabecalho").innerHTML = "<img src="%5C%22http:%5C/%5C/www.nghorta.com%5C/wp_aplicacoes%5C/copa2006%5C/progress.gif%5C%22" alt="\"\"" /> Carregando ...";

   xmlhttp.open("POST", url, true);
   xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
   xmlhttp.onreadystatechange=function() {
// Verifica se o servidor enviou a resposta de forma
// correta
      if (xmlhttp.readyState == 4) {
         if (xmlhttp.status == 200) {
            limpaResultado();
            montaResultado();
         }
      }
   }
   xmlhttp.send('1')
}

function limpaResultado() {
//Código HTML utilizado no corpo do artigo para
// exibir a tabela
// <span id="cabecalho"></span>
// <table id="resultado" width="100%">
//     <tbody id="r_body">
//     </tbody>
// </table>
// O uso do elemento tbody é necessário por conta do IE
// que não aceita adicionar o elemento tr a tag table

   var header = document.getElementById("cabecalho");
   while(header.childNodes.length > 0) {
      header.removeChild(header.childNodes[0]);
   }
   var tabela = document.getElementById("r_body");
   while(tabela.childNodes.length > 0) {
      tabela.removeChild(tabela.childNodes[0]);
   }
}

function montaResultado() {
// Cria a linha de título das colunas da tabela
   var tr = document.createElement("tr");
// Cria a célula th
   var celula = document.createElement("th");
// Cria o conteúdo Id da celula
   var textoNode = document.createTextNode('Id');
// Adiciona o conteúdo à célula
   celula.appendChild(textoNode);
// Adiciona a célula th ao elemento tr
   tr.appendChild(celula);
   celula = document.createElement("th");
   textoNode = document.createTextNode('Nome Categoria');
   celula.appendChild(textoNode);
   tr.appendChild(celula);
   celula = document.createElement("th");
   textoNode = document.createTextNode('Posts');
   celula.appendChild(textoNode);
   tr.appendChild(celula);
// Adiciona o elemento tr à tabela
   document.getElementById("r_body").appendChild(tr);
// Adiciona estilo à linha
   tr.style.cssText = "background-color: #404e2a; color: #ffffff; padding: 5px; text-align: center";

// Recebe o objeto XML
   var aDados = xmlhttp.responseXML;
// Recupera todos os elementos categoria do objeto
// XML como uma matriz
   var categorias = aDados.getElementsByTagName("categoria");
   for (var i = 0; i < categorias.length; i++) {
// Atribui a cat cada elemento da matriz
      cat = categorias[i];
// Recupera os valores dos nós id, nome e posts
      id = cat.getElementsByTagName("id")[0].firstChild.nodeValue;
      nome = cat.getElementsByTagName("nome")[0].firstChild.nodeValue;
      posts = cat.getElementsByTagName("posts")[0].firstChild.nodeValue;
// Chama a função que cria as linhas da tabela
      adicionaLinha(id, nome, posts)
   }
// Deste ponto em diante deixo para vocês
   var header = document.createElement("h2");
   var texto_header = document.createTextNode("Resultado: Posts por Categoria");
   header.appendChild(texto_header);
   document.getElementById("cabecalho").appendChild(header);
   document.getElementById("resultado").style.cssText = "border-bottom: 5px solid #404e2a;";
}

function adicionaLinha(id, nome, posts) {
   var linha = document.createElement("tr");
   var celula = criaCelula(id);
   celula.style.cssText = "text-align: center;";
   linha.appendChild(celula);
   celula = criaCelula(nome);
   celula.style.cssText = "padding-left: 5px;";
   linha.appendChild(celula);
   celula = criaCelula(posts);
   celula.style.cssText = "text-align: center;";
   linha.appendChild(celula);
   linha.style.cssText = "color: #404e2a;";
   document.getElementById("r_body").appendChild(linha);
}

function criaCelula(texto) {
   var celula = document.createElement("td");
   var textoNode = document.createTextNode(texto);
   celula.appendChild(textoNode);
   return celula;
}

Observação Final

Para a edição dos códigos JavaScript utilizei a extensão Perfomancing do Firefox (link abaixo) que mantém a indentação ao gravar o artigo.

Mas se você utiliza o excerpt do WP, ou seja, publica apenas um trecho do artigo, e não o artigo todo, cuidado! pois você terá que fazer isto no editor do CMS. E aí, babau, a indentação vai para o espaço. Tema abordado no post Edição de Código no Wordpress

E como resolvi: simplesmente na “marra”, gravei o excerpt direto na Tabela que armazena os posts no MySQL.

Dica da extensão obtida no blog Mr. TheChessMan.

powered by performancing firefox

Uma das coisas que acho trabalhosa no WordPress é editar código.

Visualmente no editor do WP, quando se digita um trecho de código, tudo parece funcionar as mil maravilhas. Os problemas surgem quando se aciona o botão salvar ou publicar do editor. Ele destroi toda a indentação, importante para uma leitura mais adequada do código, e faz uns ajustes automáticos no HTML que geram, as vezes, resultados imprevisíveis.

Esse comportamento, talvez, seja decorrência do fato de o WP ter sido criado, também e principalmente, para quem não conhece a linguagem de marcação.

Questionei algumas pessoas sobre esses fatos e, para minha surpresa, as dificuldades que elas tinham eram muito semelhantes. Utilizo-me bastante do Writely para a edição dos meus posts, mas os problemas permanecem, tanto na publicação a partir desse editor, como através da velha e conhecida técnica de copiar e colar.

Se não me engano, li também, provavelmente por conta dessas deficiências, que outras pessoas utilizam plugins para substituir o editor padrão do WP. Se é de seu conhecimento e funciona, agradeceria se você deixasse a sua indicação nos comentários.

Eu, do lado de cá, fiz uma rotina simples em AJAX para, paliativamente, solucionar os (meus) problemas mencionados e que disponibilizo a seguir para sua apreciação e julgamento.

Veja o código JavaScript AJAX utilizado. Ao clicar no link o código é exibido e ao clicar novamente é fechado. Experimente!

[Update] Os sinais de menor e maior, entre aspas, no código JavaScript AJAX correspondem à &_lt; e &_gt;, respectivamente, sem o concatenado.

Um outro exemplo de uso da mesma rotina, que aciona um programa PHP do lado do servidor e retorna como resposta um arquivo XML.

E, por último, veja o código do programa PHP usado acima.

Pelo menos os códigos ficam mais bonitos e compreensíveis (eu acho). E, por um lado, o texto fica mais condensado, mas por outro exige um clique a mais nos links. E você o que achou?

O detalhamento do código do experimento deve ser encarado como um exercício de um aprendiz em AJAX, como claramente explicitado no post original.

O que me motivou a compartilhar com vocês os detalhes foi a divulgação do experimento no Blog da Visie, pelo Elcio Ferreira, algumas (confesso, não muitas) solicitações enviadas através do formulário de contato do VICHE e, por último, o artigo publicado no Blog do Maujor.

Em função desse artigo, os botões (<input type=”button”>) foram substituídos por ícones (<input type = “image”>). Como consequência houve mudanças no código do experimento que passou a funcionar com múltiplos submit’s no formulário. A abordagem no Blog do Maujor é derecionada especificamente para questões de acessibilidade em que confronta as duas versões do experimento.

Esclareço que os ícones são utilizados em uma aplicação Web da Empresa em que atualmente trabalho, reforçando o comentário postado pelo Maurício em seu artigo. E, além do manual de operação, na maioria de seus formulários tem um ícone de ajuda, que acionado, exibe informações sobre a funcionalidade dos ícones utilizados acrescida das de preenchimento de seus campos (veja um exemplo na figura abaixo).

Sugestões são bem vindas e você pode ver agora, antes das explicações, a nova versão em funcionamento.

Contextualização

O experimento consiste de:

• uma tabela em MySQL;
• rotinas em Javascript AJAX que cria o objeto XMLHttpRequest e faz uso de alguns de seus métodos e propriedades;
• um programa em PHP que executa as requisições desse objeto do lado do servidor e retorna a resposta no formato JSON;
• uma página XHTML, a que você navega, com um formulário e o CSS para renderizá-la;
• códigos em Javascript para a construção dos parâmetros a serem passados para o programa PHP, o tratamento da resposta em JSON e sua exibição no formulário.

A tabela e o CSS, por serem simples, não serão tratados. A quem se interessar, o CSS pode ser visto diretamente no próprio código fonte da página. Do XHTML serão apresentadas apenas os excertos necessários à compreensão do experimento.

Criação do Objeto XMLHttpRequest

A sua criação não é tão complicada como você pode ver abaixo:

try {
xmlhttp = new XMLHttpRequest();
} catch(ee) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(E) {
xmlhttp = false;
}
}
}

O objeto, e consequentemente o experimento, foi testado no Firefox 1.5.0.4, no Opera 8.54, Netscape 7.2 e no IE 6 (os que tenho instalado). Observe que em xmlhttp teremos o objeto de acordo com o navegador em uso, ou em caso de não ter suporte, lhe é atribuído o valor false.

O Formulário

Os detalhes do experimento serão explicados com base nos elementos e campos do formulário.

a) Código inicial do elemento form

<form class="form-cadastro" name="form_cad" action=""
onsubmit="verifica(document.form_cad.opc.value); return false;" method="get">

Ao submeter o formulário, clicando em qualquer dos ícones, é chamada a função verifica() com o parâmetro correspondente à operação selecionada – incluir, alterar, excluir ou consultar. O parâmetro é setado em um <input type=”hidden”> antes de enviar o formulário.

O return false bloqueia o submit, uma vez que todo o processo é efetuado pelo objeto XMLHttpRequest, evitando-se o refresh da página. A função verifica() e outros detalhes são explicados abaixo.

b) O campo id e o link buscar

Funcionalidade:

Preencher o campo id e clicar no link buscar para realizar uma pesquisa na tabela.

Código XHTML:

<label id="lbl_cad" for="id_cad">Id:
<input type="text" id="id_cad" name="id_cad" size="8" value="" maxlength="12" />
<a xhref="javascript:busca(document.form_cad.id_cad.value)" mce_href="javascript:busca(document.form_cad.id_cad.value)"   >buscar</a></label><br />

Executa a função busca() ao se acionar o link, passando como parâmetro o valor digitado no campo id.

c) a função busca():

Será explicada por partes. A visão geral da função pode ser vista no corpo da página XHTML.

Inicialmente, a função recebe em param o valor digitado no campo id (linha 1), exibe a mensagem “Aguarde …” no campo nome (linha 2) e verifica se esse valor é numérico (linha 3). Caso contrário, exibe um alerta (linha 4), retorna o foco ao campo id (linha 5) e limpa o campo nome do formulário (linha 6).

01 function busca(param) {
02   document.getElementById("id_nome").value="Aguarde ...";
03   if (isNaN(param)) {
04      alert("VICHE! Tem algo de Errado");
05      get_focus('id_cad');
06      document.form_cad.elements[1].value = '';
07      return;
08   }

O método open é constituído de três parâmetros – método = “GET”, url = “rotina2.php?id=”+param e async = “true” – e tem como função preparar o objeto XMLHttpRequest para uma requisição. Quando ativado, requisita o programa PHP passando como parâmetro o valor informado no campo id através do método GET, de forma assíncrona.

   xmlhttp.open("GET", "rotina2.php?id="+param,true);

A função onreadystatechange (veja código abaixo) dispara um evento quando o estado da requisição muda. O if (linha 2) verifica se a requisição foi finalizada com sucesso (= 4) utilizando-se da propriedade readyState do objeto. Se sim, recebe o retorno de rotina2.php em formato JSON, através da propriedade responseText (linha 3) do objeto XMLHttpRequest. O alerta comentado no código, foi utilizado para checagem da resposta durante o processo de desenvolvimento.

Através da função eval() (linha 3) do JavaScript o formato JSON é convertido na matriz aDados, onde aDados[0] indica o resultado da pesquisa/operação e aDados[1] se foi realizada com sucesso.

O if (linha 4) verifica se nenhum registro foi encontrado na tabela. Em caso positivo, limpa os campos do formulário (linhas 5-8), habilita o ícone incluir e desabilita os ícones alterar e excluir (linhas 9-14). A classe imgfull exibe a imagem original do ícone e imgfade a imagem com opacidade para indicar que estão desabilitados. Funcionam sómente no IE e navegadores Mozilla, e foi colocada apenas a título de ilustração (encontram-se no CSS da página).

O else (linha 16) é executado quando o registro é localizado. As instruções (linhas 17-25) habilita os ícones alterar e excluir, desabilita o ícone incluir e exibe os dados no formulário a partir da matriz aDados (linhas 23-25).

A função get_focus() (linha 28) posiciona o foco no campo nome do formulário.

E, finalmente, o método send dispara a requisição (linha 31).

01 xmlhttp.onreadystatechange=function() {
02    if (xmlhttp.readyState==4) {
//     alert(xmlhttp.responseText);
03       var aDados=eval((xmlhttp.responseText));
04       if (aDados[0] == '0' && aDados[1] == 0) {
05          var campos = document.getElementsByTagName('input');
06        for (i=1;i<7;i++) {
07           campos[i].value = '';
08          }
09          document.getElementById("b_incluir").attributes["class"].value = "botao imgfull";
10          document.getElementById("b_incluir").disabled = false;
11          document.getElementById("b_alterar").attributes["class"].value = "botao imgfade";
12          document.getElementById("b_alterar").disabled = true;
13          document.getElementById("b_excluir").attributes["class"].value = "botao imgfade";
14          document.getElementById("b_excluir").disabled = true;
15      }
16      else {
17         document.getElementById("b_incluir").attributes["class"].value = "botao imgfade";
18         document.getElementById("b_incluir").disabled = true;
19         document.getElementById("b_alterar").attributes["class"].value = "botao imgfull";
20         document.getElementById("b_alterar").disabled = false;
21         document.getElementById("b_excluir").attributes["class"].value = "botao imgfull";
22         document.getElementById("b_excluir").disabled = false;
23         for (var i=0;i<aDados.length;i++) {
24            aDados[i]=unescape(aDados[i]);
25            document.form_cad.elements[i].value = aDados[i];
26         }
27      }
28      get_focus('id_nome');
29   }
30 }
31 xmlhttp.send(null)
}

d) Os ícones incluir, alterar, excluir e consultar

Código XHTML:

01 <input name="incluir" id="b_incluir" class="botao imgfade" type="image" disabled="disabled"
value="" title="Incluir Registro" alt="Incluir Registro" xsrc="inclui.gif" mce_src="inclui.gif"   onclick="seta_opc(1)" />

02 <input name="alterar" id="b_alterar" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="modifica.gif" mce_src="modifica.gif"   title="Alterar Registro" alt="Alterar Registro" onclick="seta_opc(2)" />

03 <input name="excluir" id="b_excluir" class="botao imgfade" type="image" disabled="disabled"
value="" xsrc="elimina.gif" mce_src="elimina.gif"   title="Excluir Registro" alt="Excluir Registro" onclick="seta_opc(3)" />

04 <input name="consultar" id="b_consultar" class="botao" type="image" xsrc="pesquisa.gif" mce_src="pesquisa.gif"
title="Consulta Registros" alt="Consulta Registros" onclick="seta_opc(4)" />

05 <input name="opc" type="hidden" id="opc" />

Os ícones incluir, alterar e excluir são inicialmente exibidos desabilitados e com opacidade (conforme rapidamente já explicado). O ícone consulta fica sempre habilitado e com sua imagem original.

O evento onclick em todos eles aciona a função seta_opc() cujo código é apresentado a seguir e que dispensa comentários por sua simplicidade:

function seta_opc(opc) {
document.form_cad.opc.value = opc;
}

e) A função verifica()

Executada quando o formulário é enviado, conforme mostrado no item a). Recebe como parâmetro a variável opc, checa qual ícone foi clicado e chama as funções executa() e consulta(), conforme o valor de opc.

function verifica(x) {
if (x == 1) executa('1');
if (x == 2) executa('2');
if (x == 3) executa('3');
if (x == 4) consulta();
}

f) A função consulta()

Quando o ícone consultar é clicado a função seta_opc(4) é executada e, em seguida, a função verifica(4), quando o formulário é submetido.

As instruções contidas na função já foram descritas anteriormente. Cabe apenas observar que a resposta é exibida na forma de um alerta do navegador e é passado o parâmetro con com valor 1.

function consulta() {
xmlhttp.open("GET", "rotina2.php?con=1",true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null)
}

g) A função executa()

Executada quando os ícones incluir, alterar e excluir são clicados, de forma semelhante à explicada no item f).

Inicia com a simples verificação de preenchimento dos seis primeiros campos do formulário (linhas 2-10). Em seguida, é montada a string que será passada para o programa PHP, com base nos dados informados nos campos do formulário (linhas 11-15) e da operação selecionada (op). Faz a requisição (linha 16), dispara o evento (linha 17) e checa se a requisição foi realizada com sucesso (linha 18).

Armazena a resposta no formato JSON em aDados (linha 19), verifica qual a operação realizada e se teve sucesso e exibe um alerta (linhas 20-22), limpa os campos do formulário (linhas 24-26) e seta o foco para o campo id (linha 28).

01 function executa(op) {
02   var erro = 0;
03   for (i=1;i<6;i++) {
04      if (document.form_cad.elements[i].value == '') { erro = 1; }
05   }
06   if (erro == 1) {
07      alert("VICHE! Tem Campo em Branco");
08      get_focus('id_nome');
09      return;
10   }
11   var dados = '';
12   for (i=0;i<7;i++) {
13      dados = dados + "c" + i + "=" + document.form_cad.elements[i].value + "&";
14   }
15   var dados1="rotina2.php?op="+op+"&"+dados;
16   xmlhttp.open("GET", "rotina2.php?op="+op+"&"+dados,true);
17   xmlhttp.onreadystatechange=function() {
18      if (xmlhttp.readyState==4) {
19         var aDados=eval((xmlhttp.responseText));
20     if (aDados[0] == 1 && aDados[1] == "OK") { alert("Registro Incluído") };
21     if (aDados[0] == 2 && aDados[1] == "OK") { alert("Registro Alterado") };
22     if (aDados[0] == 3 && aDados[1] == "OK") { alert("Registro Deletado") };
23      }
24      var campos = document.getElementsByTagName('input');
25      for (i=0;i<7;i++) {
26           campos[i].value = '';
27      }
28      get_focus('id_cad');
29   }
30   xmlhttp.send(null)
31 }

h) A função get_focus()

function get_focus(campo) {
document.getElementById(campo).focus();
}

O Programa PHP

Para não se extender muito, serei breve na explicação do programa cujo trecho inicial é apresentado abaixo.

• linha 2: são extraídos os parâmetros;
• linhas 4-5: conecta e seleciona o banco;
• linhas 6-9: verifica se a requisição partiu do link buscar e executa a função checa_entrada();
• linhas 10-37: verifica se a requisição partiu de um dos ícones incluir, alterar e excluir, substitui os caracteres “[", ' e "," utilizados no formato JSON, antes de gravar na tabela, e executa a função executa();
• linhas 38-41: verifica se a requisição partiu do ícone consultar e executa a função consulta();
• linhas 42-54: checa se o registro existe na tabela. Se não, retorna como resposta "['0','0']“. Se sim, retorna uma string semelhante em formato JSON com os dados do registro selecionado;
• A função consulta(), cujo código não é apresentado, seleciona os primeiros 50 registros da tabela e retorna um texto com o id dos registros;
• E a função executa(), idem, constitui-se dos comandos SQL – INSERT, UPDATE e DELETE -, conforme o ícone selecionado.

01 <?php
02 extract ($_GET);
03 extract ($_POST);
04 $conn = mysql_connect("localhost","usuário","senha") or die ("Erro de Acesso");
05 mysql_select_db ("banco");
06 if ($id) {
07    $resposta = checa_entrada($id);
08    echo $resposta;
09 }
10 if ($op) {
11    $c1 = str_replace(',', '', $c1);
12    $c2 = str_replace(',', '', $c2);
13    $c3 = str_replace(',', '', $c3);
14    $c4 = str_replace(',', '', $c4);
15    $c5 = str_replace(',', '', $c5);
16    $c6 = str_replace(',', '', $c6);
17    $c1 = str_replace('[', '', $c1);
18    $c2 = str_replace('[', '', $c2);
19    $c3 = str_replace('[', '', $c3);
20    $c4 = str_replace('[', '', $c4);
21    $c5 = str_replace('[', '', $c5);
22    $c6 = str_replace('[', '', $c6);
23    $c1 = str_replace(']', '', $c1);
24    $c2 = str_replace(']', '', $c2);
25    $c3 = str_replace(']', '', $c3);
26    $c4 = str_replace(']', '', $c4);
27    $c5 = str_replace(']', '', $c5);
28    $c6 = str_replace(']', '', $c6);
29    $c1 = str_replace("'", '', $c1);
30    $c2 = str_replace("'", '', $c2);
31    $c3 = str_replace("'", '', $c3);
32    $c4 = str_replace("'", '', $c4);
33    $c5 = str_replace("'", '', $c5);
34    $c6 = str_replace("'", '', $c6);
35    $resposta = executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6);
36    echo $resposta;
37 }
38 if ($con) {
39    $resposta = consulta();
40    echo $resposta;
41 }
42 function checa_entrada($id_c) {
43    $SEL = mysql_query("SELECT * from cadastro1 WHERE id = '$id_c'");
44    $res = mysql_fetch_object($SEL);
45    if (!$res) {
46       $resposta = "['0','0']";
47    }
48    else {
49       $v = "','";
50       $resposta = "['".$res->id.$v.$res->nome.$v.$res->nome_mae.$v.$res->nome_pai
51       $resposta .= $v.$res->cidade_nasc.$v.$res->pais.$v.$res->telefone."']";
52    }
53    return $resposta;
54 }
55 function executa($op, $c0, $c1, $c2, $c3, $c4, $c5, $c6) {
56 ...
57 }
58 function consulta() {
59 ...
60 }
61 ?>

O VICHE entrou definitivamente no espírito da Copa. Primeiro com pequenas mudanças no layout padrão – o qual pode ser “recuperado” na barra lateral de navegação no rótulo Temas -, e agora com um experimento que disponibiliza a tabela de jogos da primeira fase da competição, feito com a ferramenta AJAX.

O experimento é composto de consultas que se utilizam:

• do CSS Framework de Mike Stenhouse, com adaptações;
• de três tabelas MySQL (seleções, jogos e fases);
• de um programa em PHP; e
• de uma rotina bem simples em AJAX.

Os dados e os ícones das bandeiras dos países, apresentados no experimento, foram obtidos no site oficial da FIFA. A única mudança foi a dos horários dos jogos, com a redução de 5 horas correspondente ao fuso entre o Brasil e a Alemanha.

BRASIL HEXA!!! A emoção vai começar e a nossa torcida também.

Para atender os leitores jovens que têm visitado o VICHE a procura de tabuada com as operações aritméticas, desenvolvi uma nova rotina em javascript.

Agora você pode obter a tabuada da multiplicação, da divisão, da adição ou soma e a da subtração de um número entre -999.999.999 e 9.999.999.999, e tudo isto em um mesmo lugar. Caso tenha dificuldade para conseguir os resultados que você deseja solicite auxílio à sua mãe, a seu pai ou outra pessoa.

Para ver como funciona clique no link abaixo:

Tabuada de multiplicar, dividir, subtrair e somar

Registro e submeto às críticas e sugestões meu primeiro experimento com a ferramenta AJAX. Atualmente, sou aluno do módulo AJAX I do curso online da Visie Treinamentos Web.

O experimento tem como objetivo demonstrar algumas funcionalidades dessa ferramenta sem a preocupação de um tratamento rigoroso de alguns procedimentos normalmente exigidos em uma aplicação comercial.

Trata das velhas e conhecidas operações de manutenção de uma tabela de dados – incluir, alterar, excluir e consultar -, bem simples, onde utilizo a técnica de passagem de parâmetros através da URL (“?’ e “&”) para um programa PHP que se encarrega de operacionalizar, do lado do servidor, essas tarefas. É claro que poderia ser adotado outros mecanismos para a passagem de parâmetros.

As respostas do programa PHP são retornadas no formato JSON. Por esta razão os caracteres “[", "]“, ‘ e “,” são eliminados dos campos antes da gravação na tabela.

Pela simplicidade da rotina desenvolvida não vale a pena me alongar em explicitar detalhes. Veja funcionando e dê o seu feedback. Fico na esperança de que tenha alguma utilidade.

Artigo especialmente escrito para a moçada que tem nos visitado a partir de pesquisas no Google sobre o assunto.

Clique no link abaixo para obter a tabuada da multiplicação do número que você quer:

Tabuada

Trata-se de uma rotina simples, escrita em javascript, que apresenta como resultado a tabuada de um número. Para isso é necessário apenas digitar o número desejado no campo do formulário e clicar onde indicado para obter o resultado.

Qualquer dúvida, problema, sugestão ou dificuldade que você tenha deixe (ou peça para seus pais ou amigos) seu comentário.

Antes do boom em torno do AJAX utilizava, e ainda utilizo, uma rotina em PHP (veja funcionando aqui), gerando código javascript visando:

1. Evitar o refresh da página e a pesquisa ao banco de dados a cada digitação de um campo de uma tabela, para exibir a sua descrição ou uma mensagem de erro no caso de não existir;
2. Carregar permissões de acesso, após o usuário se logar, em aplicações disponibilizadas na Web.

Citando um exemplo para clarear as idéias (assim espero):

Um aplicativo multiusuário que permite alterar, incluir e excluir dados, entre outras funcionalidades, relativos à uma determinada modalidade de contrato com vários termos (número dos contratos). Cada usuário tem o seu login e senha e são cadastradas as modalidades de contratos e os termos que podem ser manipulados por ele. Ao se logar no aplicativo estas informações são carregadas do banco de dados para uma ou mais matrizes (array’s) e, a partir daqui, toda a digitação feita nos campos modalidade e termo é checada diretamente no cliente via javascript, inviabilizando acessos a contratos não permitidos sem a necessidade de pesquisa ao banco de dados a cada transação, evitando, ainda, o refresh da página.

Note que nesse exemplo real é necessário a utilização de matrizes com 2 dimensões. A rotina apresentada neste post utiliza-se de matrizes 1 x n (vetor) e trabalha com a tabela wp_categories do VICHE. O código em PHP da rotina é apresentado abaixo e as explicações dos pontos chaves colocadas entre /* e */. O XHTML é simples e não será explicado aqui.

Não é recomendado utilizar esta rotina para carregar tabelas com muitos dados (já fiz uso em tabelas com 400 registros e funcionou muito bem).

/*
…

conexão e seleção do banco (mysql_connect e mysql_select_db)

…
*/

<head>
<? php
echo “<script type=\”text/javascript\”>\n”;

/*
Definição da função categorias com os parâmetros cat (o campo id_cat do formulário), i e j (id dos campos onde serão exibidas as informações do nome da categoria e da quantidade de posts. Veja a chamada utilizada no html do exemplo:

<input name=”id_cat” id=”id_cat” type=”text” size=”4″ maxlength=”4″ onblur=”categorias(this.value, ‘desc_categoria’, ‘num_posts’)” /><br />
*/

echo “function categorias(cat , i, j) {\n

/*
Definição das matrizes onde serão armezanadas as informações do nome da categoria e da quantidade de posts publicados
*/

var categoria = new Array();
var num_posts = new Array();\n”;

/*
Leitura da tabela wp_categories e alimentação das matrizes
*/

$SEL_categoria = mysql_query (‘SELECT cat_ID, cat_name, category_count FROM wp_categories ORDER BY cat_ID’);
while ($rs = mysql_fetch_object($SEL_categoria)){
$cat_id = $rs->cat_ID;
$cat_nome = $rs->cat_name;
$num_posts = $rs->category_count;
echo ” categoria[$cat_id] = ‘$cat_nome’;\n”;
echo ” num_posts[$cat_id] = ‘$num_posts’;\n”;
}

/*
Crítica e display das informações nos campos correspondentes do formulário se informado corretamente. Caso contrário será exibida uma mensagem de erro.
*/

echo “if (categoria[cat]) { “;
echo ” document.forms[0].elements[i].value=categoria[cat];\n”;
echo ” document.forms[0].elements[j].value=num_posts[cat];\n”;
echo ” } else {“;
echo ” document.forms[0].elements[i].value=’Categoria não Cadastrada’;\n”;
echo ” document.forms[0].elements[j].value=”;\n”;
echo “}\n”;
echo ” document.forms[0].id_cat.focus();\n”;
echo ”
}\n”;
echo “</script>\n”
?>
</head>

Espero que tenham gostado e tenha alguma utilidade, apesar do uso cada vez mais frequente do AJAX, que ainda estou começando a aprender.