quarta-feira, 20 de julho de 2011

Ajax: Notificando novas mensagens sem dar reload

Ás vezes surge a necessidade de você ter um script que disponibilize de tempo em tempo valores que vão sendo atualizados no banco de dados conforme sua entrada, mas como fazer isso sem dar reload na página? Ajax! 

Vamos supor que você tenha uma tabela chamada:

valorarroba
id int(11)
id_frigorifico int(9)
valor double(12,2)

Agora pense que a cada 30s cada um destes frigoríficos atualizem o valor pago por Arroba de boi conforme os negócios vão sendo fechados, e você quer disponibilizar isso para o usuário de seu sistema web praticamente em tempo real, como se ele estivesse ali ao lado dos compradores, então no script/página php que você irá mostrar esta informação ao usuário disponibilize o seguinte código javascript/Ajax:

 <script type="text/javascript">

 function ValArroba() {
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("mostraValor").innerHTML=xmlhttp.responseText;
   }
  }
  xmlhttp.open("GET","valorarroba.php",true);
  xmlhttp.send();
  setTimeout("doTimer()",30000);
 }
  setInterval("showMSG()", 30000);
</script>


Agora em uma área dentro deste script, que você tem em mãos coloque a DIV que irá mostrar o valor:

<div id="mostraValor"></div>

Bom repare que o valor 30000(trinta mil) é o tempo que será recarregado esse script php dentro da DIV, e onde chamamos o script valorarroba.php, é nome do script que irá trazer estes dados, agora crie este script separadamente, exemplo:

<?php
 $conn=mysql_connect('seu_servidor','usuario','suasenha');
 if(!$conn) {
  echo("Servidor indisponível...".mysql_error());
  die;
 }
 $bd=mysql_select_db('nome_do_seu_banco_dados');
 if(!$bd) {
  echo("Banco de Dados indisponível...".mysql_error());
  die;

 }
 $sql1=mysql_query("select max(id) LastID, valor from valorarroba", $conn);
  if(!$sql1) {
   echo("Erro na consulta: ".mysql_error());
  die;
 }
 $lins = mysql_num_rows($sql1);
 $preco = mysql_result($sql1,0,'valor'); 
 echo $preco;
 unset($preco);
 unset($lins);
 unset($sql1);
 unset($bd);
 mysql_close($conn);
 unset($conn);
?> 

Ta aí, um exemplo simples, prático e aplicável a diversas situações conforme a necessidade.

segunda-feira, 18 de julho de 2011

quarta-feira, 13 de julho de 2011

Javascript

Todo mundo só fala em JQuery, Ajax, Jason... Povo anda vendo muito filme, veja aqui como criar uma verificação de usuário em tempo real sem usar nada disso utilizando apenas o bom e velho Javascript e PHP uma combinação que nem leite com chocolate!

Vamos primeiro criar uma função em PHP que permita gerar uma lista no formato JS:

// codigo em PHP
function ListaJS($conexao, $ins, $campo) {
  $con->query($ins); // aki no ins poderia ir por exemplo select usuario from usuarios where usuario<>'' group by usuario order by usuario
   $sqlUSERS=$con->sql;
   $c=1;
   $lin=mysql_num_rows($sqlUSERS);
   $txt='';
   while($rs=mysql_fetch_array($sqlUSERS)) {
    $txt.='"'.$rs[$campo].'"';
    if($c < $lin) {
     $txt.=',';
    }
    $c++;
   }
   unset($sqlUSERS);
   echo $txt;
 
 }


Agora vamos ao Javascript que utilizará esta função PHP:

<script type="text/javascript">
<!--
 function empty(v){
  if (v==null || v==0 || v=='' || v==""){
   return true
  } else {
   return false
  }
 }

 function verifica() {
  var lista=new Array(<?php ListaJS($conn,$ins,'usuario'); ?>);
  var login=document.frm1.usuario.value;
  if(!empty(login)) {
   document.frm1.info.value = "Verificando...";
   for(i=0; i < lista.length; i++) {
    if(lista[i] == login) {
     document.frm1.info.value = "Indisponível";
     exit;
    }
   }
   if(document.frm1.info.value == "Verificando...") {
    document.frm1.info.value="Ok";
   }
  } else {
   document.frm1.info.value="Preencha o nome do Usuário";
  }
 }

-->
</script>

No seu formulário basta aplicar utilizando o evento onblur:

<form method=post action=seila.php name=frm1>
 Usuario<input type=text name=usuario value="" onblur="verifica();">
            <input type=text name=info value="" disabled>
</form>

Espero que este post seja útil aos colegas, obviamente há vários exemplos em jquery e ajax, mas fica aqui um post em Javascript bem simples e funcional.