ASP.NET AJAX RC 1.0 liberado

ASP.NET AJAXASP.NET AJAX RC 1.0 ha sido lanzado en esta semana y pues el nombre lo dice todo. Se trata de un framework que permite hacer uso de AJAX con páginas ASP.NET. Con el cual, de manera rápida, podemos crear aplicaciones web eficientes, interactivas y personalizadas para todo tipo de navegador web. Aunque la página oficial de ASP.NET esta disponible en español, no lo está la de ASP.NET AJAX. Esperemos que con el tiempo también lo esté.

La página oficial cuenta con una descripción de los pasos (3 para ser exactos) que debemos dar para hacer uso de este framework, como también muestra ejemplos. Por supuesto es necesario tener instalado en nuestro computador Visual Studio 2005 ó Visual Web Developer 2005 Express Edition antes de instalarlo.

Eliminar Datos con AJAX y POO en PHP

Veremos el artículo final de esta serie de artículos relacionados con AJAX y Clases con PHP: Eliminar datos de la tabla Empleados, empezemos entonces:

Agregando un nuevo método

Trabajaremos con la misma Clase cEmpleado que se encuentra en el archivo cEmpleado.php, pero agregaremos un método más: eliminar(), que acepta como parámetro el Codigo del Empleado. Esto con el objetivo de eliminar un solo dato, el que nosotros especificaremos. No mostraremos todo el código del archivo cEmpleado.php, solo el método que vamos a agregar:

//elimina un empleado en la base de datos
function eliminar($cod){
 $con = new DBManager;
 if($con->conectar()==true){
  $query = "DELETE FROM empleados WHERE idempleado=$cod";
  $result = @mysql_query($query);
  if (!$result)
   return false;
  else
   return true;
  }
}

Consultando datos

Ahora realizaremos una consulta de todos los empleados y los listaremos haciendo uso de una tabla HTML. Los elementos de la columna Dato tienen dentro de la etiqueta <a></a> el evento onclick especificamos la función eliminarDato(parametro), donde parametro es el código del empleado. Esta función JavaScript se encargará en enviar el código al archivo que realizará el proceso de eliminación. Está función la describeremos mas adelante. A este archivo de consulta lo llamamos consulta.php.

<?php
 include_once("cEmpleado.php");
 
 //consulta todos los empleados
 $objempleado = new cEmpleado;
 $consulta=$objempleado->consultar();

 //muestra los datos consultados
 //haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Codigo</td>
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
 while($row=mysql_fetch_array($consulta)){
  echo "<tr>";
 
  //mediante el evento onclick llamaremos a la funcion PedirDatos(), la cual tiene como parametro
  //de entrada el ID del empleado
  echo "<td><a style="text-decoration:underline;cursor:pointer;" onclick="eliminarDato('".$row['idempleado']."')">".$row['idempleado']."</a></td>";
  echo "<td>".$row['nombres']."</td>";
  echo "<td>".$row['departamento']."</td>";
  echo "<td>".$row['sueldo']."</td>";
  echo "</tr>";
 }
?>
</table>

Proceso Principal

Este es el archivo que realizará el proceso de eliminación. Creamos el objeto a partir de la Clase y hacemos uso del método eliminar() donde, como parametro, especificamos el código del empleado. Este valor lo recibimos mediante el método GET el cual la función JavaScript eliminarDato() nos enviará. Este archivo, eliminacion.php, queda así:

<?php
 include_once("cEmpleado.php");

 //variable GET
 $idemp=$_GET['idempleado'];
 sleep(2);

 //creamos el objeto $objempleados
 //y usamos su método eliminar
 $objempleados=new cEmpleado;
 if ($objempleados->eliminar($idemp)==true){
  echo "Registro eliminado correctamente";
 }else{
  echo "Ocurrio un error";
 }
 include('consulta.php');
?>

Funciones en JavaScript

En este archivo, ajax.js, irán dos funciones: 1) la que siempre hemos usado en estos tutoriales, que sirve para usar el objeto XMLHttpRequest y 2) la función de la que hemos venido hablando antes eliminarDato(), que se encargará de enviar el código del empleado para que el archivo eliminacion.php se encarge de eliminarlo.

function objetoAjax(){
 var xmlhttp=false;
 try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch(e){
  try{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch(E){
   xmlhttp = false;
  }
 }
 if(!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function eliminarDato(idempleado){
 //donde se mostrará el resultado de la eliminacion
 divResultado = document.getElementById('resultado');
 
 //usaremos un cuadro de confirmacion 
 var eliminar = confirm("De verdad desea eliminar este dato?")
 if ( eliminar ) {

  //instanciamos el objetoAjax
  ajax=objetoAjax();

  //uso del medoto GET
  //indicamos el archivo que realizará el proceso de eliminación
  //junto con un valor que representa el id del empleado
  ajax.open("GET", "eliminacion.php?idempleado="+idempleado);
  divResultado.innerHTML= '<img src="anim.gif">';
  ajax.onreadystatechange=function() {
   if (ajax.readyState==4) {
    //mostrar resultados en esta capa
    divResultado.innerHTML = ajax.responseText
   }
  }
  //como hacemos uso del metodo GET
  //colocamos null
  ajax.send(null)
 }
}

Finalmente...

En el archivo index.php incluimos el archivo JavaScript que usaremos y colocaremos dentro de las etiquetas <div id="resultado"></div> un include al archivo consulta.php. Esto con el fin de cuando empezemos a ejecutar nuestra aplicación se muestren todos los empleados.

<html>
<head>
<title>Eliminacion de registros con AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h2>Eliminar registros de la tabla empleado</h2>
<p>Clic en el c&oacute;digo del empleado para eliminar el registro. </p>
<div id="resultado">
<?php
 include('consulta.php');
?>
</div>
</body>
</html>

Así terminamos 4 artículos relacionados con los procesos principales a una Tabla en una Base de Datos: Consultar, Insertar, Actualizar y Eliminar registros. Y todos estos trabajado con Clases, una buena práctica que todo programador debe tener en cuenta al desarrollar sus aplicaciones. Pueden ver el ejemplo final o descargar los archivos para que los prueben en su servidor local.

Un agradecimiento de parte de Jesús Liñán (jesusvld) a Javier Luna por la ayuda en la publicación de estos prácticos Artículos y Ejemplos.

Actualización de Datos con AJAX y POO con PHP

Siguiendo con el tema de Programación Orientada a Objetos en PHP y AJAX, nos toca ahora abordar el tema de Actualización de Datos (UPDATE SET ...) . Hemos venido recalcando y enfatizando que programar así nos ahorra tiempo y mucho código, y permite que nuestro código esté disponible para otros desarrollos.

Empezemos

Hacemos uso de la tabla Empleado, cuya estructura está en el primer artículo de esta serie de artículos, y también usamos la clase DBManager que se encuentra en el archivo DBManager.php.

Nuevamente vamos a agregar algunas funcionalidades a la Clase cEmpleado que se encuentra en el archivo cEmpleado.php. Primero, agregamos el método actualizar() que aceptará parámetros de entrada relacionados con los datos del Empleado, como son: CodEmpleado, Nombre, Departamento, Sueldo. Esta vez si incluimos en los parámetros el CodEmpleado pues cuando hagamos un UPDATE a la tabla Empleado debemos especificar el ID del registro. Luego agregamos el método consultarid() que aceptará como parámetro de entrada el Codigo del Empleado. Veamos como queda el archivo:

<?php 
 //referenciamos la clase DBManager
 include_once("DBManager.php");

 //implementamos la clase empleado
 class cEmpleado{
  //constructor 
  function cEmpleado(){
  } 
 
  // consulta los empledos de la BD
  function consultar(){
   //creamos el objeto $con a partir de la clase DBManager
   $con = new DBManager;
   //usamos el metodo conectar para realizar la conexion
   if($con->conectar()==true){
    $query = "select * from empleados order by nombres";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }

  //inserta un nuevo empleado en la base de datos
  function crear($nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "INSERT INTO empleados (nombres, departamento, sueldo) 
    VALUES ('$nom','$dep',$suel)";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }

  // actualizar un nuevo empleado en la base de datos
  function actualizar($cod,$nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true) {
    $query = "UPDATE empleados SET nombres='$nom', departamento='$dep', sueldo='$suel' 
    WHERE idempleado=$cod";
    $result = mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }

  // consulta empleado por su codigo
  function consultarid($cod){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "SELECT * FROM empleados WHERE idempleado=$cod";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }
 }
?>

Un par de consultas

Vamos a crear dos archivos: 1) para la consulta de todos los empleados y 2) para la consulta de un empleado en particular. Empezemos con el primero, al cual llamaremos consulta.php. Notemos que en cada celda de la primera columna, donde va el Codigo del empleado, los elementos hacen referencia a la función JavaScript PedirDatos() que recibe como parámetro el ID del empleado, los detalles de esta función aparecen mas abajo.

<?php
include_once("cEmpleado.php");

//creamos objeto
$objempleado = new cEmpleado;
$consulta=$objempleado->consultar();

//muestra los datos consultados
//haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Codigo</td>
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
while($row=mysql_fetch_array($consulta)){
   echo "<tr>";
   //mediante el evento onclick llamaremos a la funcion PedirDatos(), la cual tiene como parametro
   //de entrada el ID del empleado
   echo "<td><a style="text-decoration:underline;cursor:pointer;" onclick="pedirDatos('".$row['idempleado']."')">".$row['idempleado']."</a></td>";
   echo "<td>".$row['nombres']."</td>";
   echo "<td>".$row['departamento']."</td>";
   echo "<td>".$row['sueldo']."</td>";
   echo "</tr>";
}
?>
</table>

Ahora el segundo archivo, que realiza un consulta de un empleado en particular según su código o ID y lo muestra en un formulario, a este archivo le llamaremos consulta_por_id.php:

<?php
 include_once("cEmpleado.php");

 //capturamos el valor del id del empleado
 $idemp=$_POST['idemp'];

 //creamos el objeto
 $objempleado = new cEmpleado;
 $consulta=$objempleado->consultarid($idemp);
 $row = mysql_fetch_array($consulta);

 //valores de las consultas
 $nom=$row['nombres'];
 $dep=$row['departamento'];
 $suel=$row['sueldo'];

 //muestra los datos consultados en los campos del formulario
?>
 <form name="frmempleado" action="" 
 onsubmit="enviarDatosEmpleado(); return false">
 <input name="idempleado" type="hidden" value="<?php echo $idemp; ?>" />
 <p>Nombres 
  <input name="nombres" type="text" value="<?php echo $nom; ?>" />
 </p>
 <p>Departamento 
  <select name="departamento">
<?php
 echo "<option value="".$dep."">".$dep."</option>"
?>
   <option value="Informatica">Informatica</option>
   <option value="Contabilidad">Contabilidad</option>
   <option value="Administracion">Administracion</option>
   <option value="Logistica">Logistica</option>
  </select>
 </p>
 <p>Sueldo <strong>S/.</strong>
  <input name="sueldo" type="text" value="<?php echo $suel; ?>" />
 </p>
 <p>
  <input type="submit" name="Submit" value="Actualizar" />
 </p>
</form>

Proceso principal

El archivo que realizará el proceso de recibir los datos y realizar la actualización será: actualizacion.php.

<?php
 include_once("cEmpleado.php");
 
 //variables POST
 $idemp=$_POST['idempleado'];
 $nom=$_POST['nombres'];
 $dep=$_POST['departamento'];
 $suel=$_POST['sueldo'];
 sleep(2);

 //actualiza los datos del empleados
 $objempleado = new cEmpleado;
 if ($objempleado->actualizar($idemp,$nom,$dep,$suel)==true){
  echo "Datos Actualizados";
 }else{
  echo "No se pudo actualizar";
 }
 include('consulta.php');
?>

Funciones en JavaScript

Especificaremos 3 funciones: 1) una que se encargue del objeto XMLHttpRequest, 2) otra que envie los datos que serán actualizados y 3) otra que consulte los datos de un empleado en particular y los muestre en un formulario. Este archivo se llama ajax.js.

function objetoAjax(){
 var xmlhttp=false;
 try{
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 }catch(e){
  try{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(E){
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function enviarDatosEmpleado(){
 //donde se mostrará lo resultados
 divResultado = document.getElementById('resultado');
 divFormulario = document.getElementById('formulario');
 divResultado.innerHTML= '<img src="anim.gif">';
 
 //valores de los cajas de texto
 id=document.frmempleado.idempleado.value;
 nom=document.frmempleado.nombres.value;
 dep=document.frmempleado.departamento.value;
 suel=document.frmempleado.sueldo.value;
 
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 //usando del medoto POST
 //archivo que realizará la operacion ->actualizacion.php
 ajax.open("POST", "actualizacion.php",true);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar los nuevos registros en esta capa
   divResultado.innerHTML = ajax.responseText
   //una vez actualizacion ocultamos formulario
   divFormulario.style.display="none";
  }
 }
 //muy importante este encabezado ya que hacemos uso de un formulario
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //enviando los valores
 ajax.send("idempleado="+id+"&nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}

function pedirDatos(idempleado){
 //donde se mostrará el formulario con los datos
 divFormulario = document.getElementById('formulario');
 
 //instanciamos el objetoAjax
 ajax=objetoAjax();
 //uso del medotod POST
 ajax.open("POST", "consulta_por_id.php");
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divFormulario.innerHTML = ajax.responseText
   divFormulario.style.display="block";
  }
 }
 //como hacemos uso del metodo POST
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 //enviando el codigo del empleado
 ajax.send("idemp="+idempleado)
}

Finalmente ....

El archivo index.php hace referencia al archivo JavaScript que vamos a usar: ajax.js. Dentro de las etiquetas <div id="formulario"></div> aparecerá un formulario con los datos del empleado. Mas abajo dentro de las etiquetas <div id="resultado"></div> hace un include a consulta.php el cual nos listará todos empleados.

<html>
<head>
<title>Actualizacion con AJAX</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<h2>Modificar datos del empleado</h2>
<p>Clic en el c&oacute;digo del empleado para modificar sus datos. </p>
<div id="formulario">
</div>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>

Queremos resaltar que nuestra Clase cEmpleado tiene 2 métodos más y hemos agregado estos sin alterar nada de los otros 2 métodos que ya estaban allí, realmente estamos reutilizando nuestro código. Puede ver el ejemplo en ejecución y/o descargar los archivos que usamos para el proceso de Actualización. Próximo artículo Eliminar datos.



Inserción de Datos con AJAX y POO con PHP

Siguiendo con el tema de Programación Orientada a Objetos en PHP y AJAX, nos toca ahora abordar el tema de Registro de Datos (INSERT INTO ...) . Como ya hemos mencionado son ejemplos prácticos que ya tocamos anteriormente pero en esta oportunidad los trabajaremos con Clases en PHP. El objetivo es demostrar que trabajar de esa forma ahorra tiempo y hace nuestro código reutilizable, y si queremos agregar algunos procesos a nuestras clases no se altera (casi nada) el resto de procesos.

Empezemos entonces

Tenemos la tabla Empleado, cuya estructura se mostró en el artículo anterior. También disponemos de la Clase DBManager que se encuentra en el archivo DBManager.php, esta Clase la vamos a usar nuevamente para verificar y realizar la conexión a la Base de Datos.

La Clase cEmpleado se encuentra en el archivo cEmpleado.php, a esta Clase vamos agregarle un método para que guarde un nuevo registro en la tabla Empleado. A este método lo llamaremos crear() el cual tendrá como parámetros de entrada los datos que se requiere del empleado: Nombre, Departamento, Sueldo. Hay que tener en cuenta que el campo idempleado incrementa automáticamente, por ello no lo incluimos dentro de los parámetros.

Veamos como quedaría este método en el archivo cEmpleado.php:

<?php 
 include_once("DBManager.php");

 //implementamos la clase empleado
 class cEmpleado{

  //constructor 
  function cEmpleado(){
  }
 
  // consulta los empledos de la BD
  function consultar(){
   //creamos el objeto $con a partir de la clase DBManager
   $con = new DBManager;
   //usamos el metodo conectar para realizar la conexion
   if($con->conectar()==true){
    $query = "select * from empleados order by nombres";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }

  //* inserta un nuevo empleado en la base de datos *//
  function crear($nom,$dep,$suel){
   $con = new DBManager;
   if($con->conectar()==true){
    $query = "INSERT INTO empleados (nombres, departamento, sueldo) 
    VALUES ('$nom','$dep',$suel)";
    $result = mysql_query($query);
    if (!$result)
     return false;
    else
     return true;
   }
  }

 }
?>

Ya tenemos la Clase cEmpleado con su nuevo método listo para ser usado en cualquier momento. Ahora continuando con el desarrollo vamos a listar todos los empleados de la tabla Empleados. A este archivo lo llamamos consulta.php y va usar las clase cEmpleado. Esta vez vamos a listar los resultados en una tabla HTML. Veamos:

<?php
 include_once("cEmpleado.php");

 //creamos el objeto $objempleados de la clase cEmpleado
 $objempleados=new cEmpleado;

 //la variable $lista consulta todos los empleados
 $lista= $objempleados->consultar();
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
<td>Nombres</td>
<td>Departamento</td>
<td>Sueldo</td>
</tr>
<?php
 while($row = mysql_fetch_array($lista)){
  echo "<tr>";
  echo "<td>".$row['nombres']."</td>";
  echo "<td>".$row['departamento']."</td>";
  echo "<td>".$row['sueldo']."</td>";
  echo "</tr>";
 }
?>
</table>

Veamos ahora, el proceso de guardado o inserción de los datos en la tabla Empleado, vamos a llamar a este archivo registro.php y notemos que se crea un objeto de la clase cEmpleado y usamos el método crear() donde especificamos los parámetros requeridos. Al final hace un include al archivo consulta.php para listar los nuevos datos.

<?php
 include_once("cEmpleado.php");
 
 //variables POST
 $nom=$_POST['nombres'];
 $dep=$_POST['departamento'];
 $suel=$_POST['sueldo'];
 sleep(2);

 //creamos el objeto $objempleados
 //y usamos su método crear
 $objempleados=new cEmpleado;
 if ($objempleados->crear($nom,$dep,$suel)==true){
  echo "Registro grabado correctamente";
 }else{
  echo "Error de grabacion";
 }
 include('consulta.php');
?>

Ahora las funciones en JavaScript, creamos 3 funciones: 1) para crear el objeto XMLHttpRequest, 2) para enviar y recibir los datos del empleado para que sean guardados en la tabla Empleado y 3) para limpiar las cajas de texto del formulario. El archivo ajax.js va así:

function objetoAjax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function enviarDatosEmpleado(){
 //donde se mostrará lo resultados
 divResultado = document.getElementById('resultado');
 divResultado.innerHTML= '<img src="anim.gif">';
 
 //valores de las cajas de texto 
 nom=document.nuevo_empleado.nombres.value;
 dep=document.nuevo_empleado.departamento.value;
 suel=document.nuevo_empleado.sueldo.value;
 
 //instanciamos el objetoAjax
 ajax=objetoAjax();

 //uso del medoto POST 
 //archivo que realizará la operacion
 //registro.php
 ajax.open("POST", "registro.php",true);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   //mostrar resultados en esta capa
   divResultado.innerHTML = ajax.responseText

   //llamar a funcion para limpiar los inputs
   LimpiarCampos();
  }
 }
 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 //enviando los valores
 ajax.send("nombres="+nom+"&departamento="+dep+"&sueldo="+suel)
}

//limpiando las cajas de texto
function LimpiarCampos(){
 document.nuevo_empleado.nombres.value="";
 document.nuevo_empleado.departamento.value="";
 document.nuevo_empleado.sueldo.value="";
 document.nuevo_empleado.nombres.focus();
}

Finalmente, el archivo index.php que contendrá un formulario con caja de texto para escribir los datos del empleado y una lista de los empleados registrado. Una vez que pulsamos el botón Grabar, los datos se guardarán en la tabla Empleado y la lista se actualizará automaticamente. Dentro de las etiquetas <head></head> hacemos referencia al archivo ajax.js, en el atributo onsubmit de la etiqueta <form> especificamos la función enviarDatosEmpleado() y en la dentro de las etiquetas <div id="resultado"></div> en la parte final hacemos un include al archivo consulta.php. El archivo quedaría así:

<html>
<head>
<title>Registro con AJAX</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form name="nuevo_empleado" action="" onSubmit="enviarDatosEmpleado(); return false">
<h2>Nuevo empleado</h2>
<p>Nombres 
<label>
<input name="nombres" type="text" />
</label>
</p>
<p>Departamento 
<label>
<select name="departamento">
<option value="Informatica">Informatica</option>
<option value="Contabilidad">Contabilidad</option>
<option value="Administracion">Administracion</option>
<option value="Logistica">Logistica</option>
</select>
</label>
</p>
<p>Sueldo <strong>S/.</strong>
<label>
<input name="sueldo" type="text" />
</label>
</p>
<p>
<label>
<input type="submit" name="Submit" value="Grabar" />
</label>
</p>
</form>
<div id="resultado"><?php include('consulta.php');?></div>
</body>
</html>

Se habrá dado cuenta que hemos incluido un método a la clase cEmpleado y ello sin alterar el método anterior. Incluso hemos usado el método consultar() que ya estaba allí. Esta Clase irá ampliandose en los próximos artículos. Esto nos hace ver que si programamos Orientando a Objetos, nuestro código se hace flexible y reutilizable. El próximo artículo tratará la Actualizacion de datos. El ejemplo final y los archivos para descarga están disponibles.

Consulta de Datos con AJAX + Clases en PHP

Hablar de Programación Orientada a Objetos (POO) es hablar de clases (y otras funcionalidades) que nos permite escribir código flexible y sobre todo reutilizable. Para muchos resulta dificultoso y tedioso, pero una vez construida nuestra clase podemos hacer uso de ella para cualquier otro desarrollo. Los lenguajes actuales implementan el desarrollo con POO y PHP no se podia quedar atrás (aunque en lo personal no sé si implementa todas las caracteristicas de la POO).

En esta oportunidad, vamos a ver como usar POO en los ejemplos anteriores de AJAX+PHP, en este caso Consulta de datos. Empezemos:

Tabla Empleado en MySQL

CREATE TABLE empleados ( 
 idempleado int NOT NULL auto_increment,
 nombres varchar(32) NOT NULL,
 departamento varchar(40)NOT NULL,
 sueldo double,
 KEY id(idempleado)
)TYPE=MyISAM;


INSERT INTO empleados VALUES (1, 'Juan Perez', 'Informatica',500.00);
INSERT INTO empleados VALUES (2, 'Laura Morales', 'Contabilidad',550.00);
INSERT INTO empleados VALUES (3, 'Luis Gutierrez', 'Administracion',850.00);
INSERT INTO empleados VALUES (4, 'Pedro Solar', 'Informatica',500.00);
INSERT INTO empleados VALUES (5, 'David Vilchez', 'Contabilidad',550.00); 

Creando Clases y Métodos

Creamos una Clase para la conexión con la Base de Datos, el método conectar() se encargará de verificar y realizar la conexión con la base de datos. A este archivo lo llamamos DBManager.php .

<?php 
 //esta clase nos permitira conectarnos a la base de datos
 class DBManager{
  var $conect;
  //Método constructor
  function DBManager(){
  }
  //Método que se encargará de la verificar y realizar
  //la conexión
  function conectar() {
   if(!($con=@mysql_connect("localhost","root",""))){
    echo"Error al conectar a la base de datos"; 
    exit();
   }
   if (!@mysql_select_db("ribosomatic",$con)) {
    echo "Error al seleccionar la base de datos"; 
    exit();
   }
   $this->conect=$con;
   return true; 
  }
 }
?>

Creamos una Clase para los procesos relacionados con el Empleado, como por ejemplo: Consultar sus datos. Para ello el método consultar()realizará este proceso . Previamente, hacemos referencia al archivo BDManager.php para realizar la conexión. A este archivo de la Clase Empleado lo llamaremos cEmpleado.php .

<?php 
 include_once("DBManager.php");
 //implementamos la clase empleado
 class cEmpleado{

  //constructor 
  function cEmpleado(){
  }

  // consulta los empledos de la BD
  function consultar(){
   //creamos el objeto $con a partir de la clase DBManager
   $con = new DBManager;
   //usamos el metodo conectar para realizar la conexion
   if($con->conectar()==true){
    $query = "select * from empleados order by nombres";
    $result = @mysql_query($query);
    if (!$result)
     return false;
    else
     return $result;
   }
  }

 }
?>

El resto es lo mismo, pero....

Ahora realizamos una consulta a los datos, referenciamos al archivo cEmpleado.php que contiene la Clase cEmpleado. Creamos el objeto $objempleados y usamos el método consultar() para que la consulta de los datos, y luego mediante un bucle listamos los datos. Este archivo lo llamamos consulta.php.

<?php
 include_once("cEmpleado.php");
 //Sleep deja inactivo el script por n segundos
 //n es un parametro, en el ejemplo 1 segundo
 //esto para poder apreciar el gif animado
 sleep(1);
 //creamos el objeto $objempleados de la clase cEmpleado
 $objempleados=new cEmpleado;
 //la variable $lista consulta todos los empleados
 $consulta= $objempleados->consultar();
 //muestra los datos consultados
 echo "</p>Nombres - Departamento - Sueldo</p> n";
 while($row = mysql_fetch_array($consulta)){
  echo "<p>".$row['nombres']." - ".$row['departamento']." - ".$row['sueldo']."</p> n";
 }
?>

Ahora las funciones JavaScript, entre ellas la que crea el objeto XMLHttpRequest para trabajar con AJAX. Este archivo se llama ajax.js .

function objetoAjax(){
 var xmlhttp=false;
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (E) {
   xmlhttp = false;
  }
 }
 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function MostrarConsulta(datos){
 divResultado = document.getElementById('resultado');
 divResultado.innerHTML= '<img src="anim.gif">';
 ajax=objetoAjax();
 ajax.open("GET", datos);
 ajax.onreadystatechange=function() {
  if (ajax.readyState==4) {
   divResultado.innerHTML = ajax.responseText
  }
 }
 ajax.send(null)
} 

Finalmente, el archivo index.html que contendrá un formulario y un botón que al ser pulsado, llamara a la función Javascript MostrarConsulta() que se enlaza al archivo consulta.php y el resultado es mostrado dentro de la etiqueta <div id="resultado"></div>.

<html>
<head>
<title>Consulta Registro con AJAX</title>
<!-- referenciamos al archivo ajax.js donde se encuentra nuestra funcion objetoAjax-->
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<!-- En "onsubmit" escribimos la función 'MostrarConsulta' que creamos en javascript, con su parametro que es el archivo que vamos a mostrar, en este caso 'consulta.php'-->
<form name="consulta" action="" onSubmit="MostrarConsulta('consulta.php'); return false">
<label>
<input type="submit" value="Consultar" />
</label>
</form>
<div id="resultado"></div>
</body>
</html> 

Como se podrá apreciar, el uso de Clases en PHP hace que nuestro código se reutilizable, en próximos ejemplos veremos como seguir implementando otros métodos a la Clase Empleado, como por ejemplo Insertar, Actualizar y Eliminar registros. Puedes ver el ejemplo en acción o descargar los archivos.

CAPXOUS AutoCompletado con AJAX

CapxousCAPXOUS es un componente hecho con AJAX, que permite un autocompletado de expresiones o palabras en las cajas de texto de un formulario web, el cual puede integrarse con PHP, ColdFusion, Java y .NET. 

Los navegadores que soportan este componente son: 

  • I.E. 6.0-7.0, 
  • Firefox 1.0-2.0, 
  • Safari 2.0. 

La página oficial muestra como podemos hacer uso de este componente en nuestra aplicaciones así como ejemplo muy interesantes. 

Enlaces | Demos, Descarga, Como Empezar

Sistema de encuesta con AJAX

Veremos ahora un sistema de encuesta haciendo uso, como siempre de herramientas libres, de PHP + MySQL y AJAX. Las características de este sistema de encuesta son simples en realidad. Contendrá las siguientes partes: un administrador, para agregar una nueva encuesta o actulizarla; visualizador de opciones, la lista de alternativas con un boton de opción a su lado; visualizador de resultados, es decir las opciones con sus respectivos resultados; y el número de votantes.

Definamos la tabla y especificaremos, el porque de los campos y su tipo.

CREATE TABLE `encuesta` (
 `idenc` int(7) NOT NULL auto_increment,
 `pregunta` varchar(255) NOT NULL default '',
 `nrovotos` int(7) default '0',
 `opciones` text NOT NULL,
 `respuestas` text NOT NULL,
 KEY `id` (`idenc`)
 ) ENGINE=MyISAM;

Tenemos el campo idenc de tipo int autoincrement, es útil para identificar el registro de la encuesta; el campo pregunta tipo varchar, escribiremos allí la pregunta de la encuesta; nrovotos de tipo int, el numero de los votantes; opciones tipo text, las alternativas que puede elegir el votante; y finalmente el campo respuestas de tipo text también, almacena las respuestas a las alternativas seleccionadas.

Sobre los campos opciones y respuestas queremos aclarar un punto, vamos a trabajar de la siguiente manera: Las opciones que el usuario ingrese para su encuesta serán separadas por comas y se concatenarán para formar una sola expresión que se guardará en el campo opciones de tipo text. Lo mismo sucede para el campo respuestas, allí se guardará las cantidades de cada alternativa y luego se concatenarán para forma una sola expresión que se almacenará en el campo respuestas.

Pongamos un ejemplo, tenemos la siguiente encuesta:

¿Qué te parece el tutorial de Sistema de Encuesta?

  • Muy bueno
  • Bueno
  • Regular
  • Malo

Siguiendo el ejemplo, nuestro sistema de encuesta tiene que almacenar las alternativas: "Muy bueno, Bueno, Regular, Malo" en el campo opciones, y automaticamente tiene que crear las respuestas iniciales, en este caso: "1,1,1,1", o sea una unidad por cada opción. De manera que cuando un usuario eliga una alternativa se sumará una unidad a cada opción elegida. Ej. Si el usuario elige "Muy bueno", entonces las respuestas tienen que quedar así: "2,1,1,1". Espero que de momento este algo claro, pero a medida que explicare el código se podrá entender mejor.

Entonces vamos al código

conexion.php >> Datos de la conexión a la base de datos.

<?php
   //Configuracion de la conexion a base de datos
   $bd_host = "localhost"; 
   $bd_usuario = "root"; 
   $bd_password = ""; 
   $bd_base = "wordpress"; 
   $con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
   mysql_select_db($bd_base, $con); 
?>

admin.php >> Vamos a trabajar con un solo registro; es decir, creamos un encuesta y si deseamos cambiar la pregunta y las opciones simplemente actualizamos los datos. Desde está pagina podremos hacer esto, agregaremos una encuesta si no existe o actualizaremos la actual.

La página contiene un formulario con dos campos, uno para agregar la pregunta y otro para las opciones las cuales debemos separar por coma (,). El código PHP trabaja de la siguiente manera: capturamos las variables pregunta y opciones mediante el método POST, luego aplicamos explode a las opciones para separar los elementos por coma, así automaticamente creamos un array, luego contamos los elementos del array y mediante un while especificamos una cadena de texto de este tipo "1,1,1,1". Luego verificamos si existe encuestas en la base de datos, dependiendo de si existe o no, actualizará o agregará una.

Nota: No creamos cadena de respuestas de este tipo "0,0,0,0,0", porque cuando trabajamos con cero genera un error al pasar de texto a número y viceversa, así que cuando iniciamos una encuesta la hacemos con "1,1,1,1". Por supuesto, la cantidad de unos dependerá de las opciones.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mini-Administrador de encuesta</title>
</head>
<body>
<?php
  require('conexion.php');
  $continuar=false;
   
  if(isset($_POST['pregunta'])) $continuar=true;
  if(isset($_POST['opciones'])) $continuar=true;

  if($continuar==true){
    $pre=$_POST['pregunta'];
    $opc=$_POST['opciones'];
    $opciones = explode(",",$opc);
 
    //contamos cantidad de elementos
    //separados por coma
    $tot_elems=count($opciones);
 
    //iniciamos variables que usaremos
    $coma="";
    $i=0;
    $unidad="1";
    $respuesta="";
 
    //escribimos cadena del tipo "0,1,0,0,0"
    while($i<=$tot_elems-1){
       $respuesta=$respuesta.$coma.$unidad;
       $coma=",";
       $i++;
    } 
    //verificar si existe encuesta la actualizamos
    //sino la registramos
    $cons_cant=mysql_query("SELECT COUNT(*) AS nroenc FROM encuesta",$con);
    $cant=mysql_fetch_array($cons_cant);
    if($cant['nroenc']==0){
       $insenc="INSERT INTO encuesta(pregunta, opciones, respuestas) VALUES ('$pre','$opc','$respuesta')";
       $insencresult = mysql_query($insenc, $con);
       echo "<div style="background-color:#888888;width:200px;color:red;">Agregado <a href="./">Ver encuesta</a></div>";
    }else{
       $cons_id=mysql_query("SELECT idenc FROM encuesta",$con);
       $idenc=mysql_fetch_array($cons_id);
       $id=trim($idenc['idenc']);
       $updenc="UPDATE encuesta SET pregunta='$pre', opciones='$opc', respuestas='$respuesta', nrovotos=0 WHERE idenc=$id";
       $updencresult = mysql_query($updenc, $con);
       echo "<div style="background-color:#888888;width:200px;color:red;">Modificado <a href="./">Ver encuesta</a></div>";
    }
  }
?>
<h3>Mini-Administrador de encuesta</h3>
<form name="frmEncuesta" method="post" action="admin.php">
<p>Escriba la pregunta</p>
<p>
  <input name="pregunta" type="text" id="pregunta" />
</p>
<p>Escriba las opciones separandolas por comas. Ej. Ubuntu, Red Hat, Suse, Debian</p>
<p>
  <input name="opciones" type="text" id="opciones" />
</p>
<p>
  <input type="submit" name="Submit" value="Crear Encuesta" />
</p>
</form>
</body>
</html>

index.php >> Ahora la página inicial de la encuesta. Esta página muestra la pregunta de la encuesta y las opciones que podemos elegir con un botón en la parte final para votar.

El script funciona así: Verificamos en primer lugar si existe la encuesta, en caso de no existir mostramos un vinculo que nos lleva a la página admin.php, en caso de existir realizamos otra consulta para capturar los datos de la tabla encuesta en varibles. Pasamos a definir un formulario en cuyo evento onsubmit espeficiamos la función cargarResultados(), esta función se encuentra en el archivo funciones_javascript.js. Usamos explode para separar las las opciones por coma para luego contar cuantos son y mediante un while creamos los botones radio necesarios. Recordemos que al usar explode convertimos una variable en array, así que para ver lo que contiene este elemento usamos un contador en este caso $i. También especificamos input de tipo hidden con el cantidad de opciones, este dato lo usaremos en la función cargarResultados(). Finalmente al formulario le colocamos un botón con el texto Votar.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sistema de encuesta</title>
<script language="javascript" type="text/javascript" src="funciones_javascript.js"></script>
</head>
<body>
<?php
  require('conexion.php');
  //consultamos si hay datos en la tabla
  $cons_cant=mysql_query("SELECT COUNT(*) AS nroenc FROM encuesta",$con);
  $cant=mysql_fetch_array($cons_cant);
  if($cant['nroenc']==0){
    echo "<p>No hay encuesta</p>";
    echo "<p><a href="admin.php">Agregar encuesta</p>";
  }else{
    //consultamos la encuesta actual
    $cons_enc_act=mysql_query("SELECT * FROM encuesta",$con);
    $datos=mysql_fetch_array($cons_enc_act);
    //obtenemos los datos de la tabla
    $id=$datos['idenc'];
    $preg=$datos['pregunta'];
    $opc=$datos['opciones'];
    //empezamos a crear la estructura html
    echo "
    <p style="padding-bottom:10px;"><strong>".$preg."</strong></p>
    <div id="resultados"> n";
    //especificamos un formulario
    echo "
    <form onsubmit="cargarResultados(); return false" name="frmencuesta" action="">
    <input type="hidden" name="cod" value="".$id."" /> n";
    //especificamos opciones
    //NOTA, usamos explode para separar cada item por las comas
    $opciones = explode(",",$opc);
    $i=0;
    //contamos cuantas partes tiene opciones
    $tot_elems=count($opciones);
    while($i<=$tot_elems-1){
      $j=$i+1;
      //note que $opciones es un array y visualizamos sus elementos 
      //mediante esta forma: elemento=$opciones[ubicacion_integer]
      echo "
      <p>
      <input type="radio" name="opcion" value="".$j."" id="opcion".$j."" /> ".trim($opciones[$i])."</p> n";
      $i++;
    }
    echo "
    <input type="hidden" name="nroopciones" value="".$i."" />";

    echo "
    <p style="text-align:center;">
      <input class="boton" type="submit" value="Votar" />
    </p>
    </form>
    </div> n";
}
?>
</body>
</html>

funciones_javascript.js >> Definimos aquí las funciones: nuevoAjax() para crear el objeto XMLHttpRequest, y cargarResultados() la cual se encarga de verificar mediante un while si algun boton radio está seleccionado (checked), si es así capturamos en la variable alt el numero. Luego especificamos el archivo que realizará el proceso resultados.php, y le enviamos dos variables el id de la encuesta y la alternativa seleccionada.

function nuevoAjax(){
   var xmlhttp=false;
   try{
     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
   }catch(e){
     try{
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }catch(E){
       xmlhttp=false;
     }
 }
 if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
   xmlhttp = new XMLHttpRequest();
 }
 return xmlhttp;
}

function cargarResultados(){
   divResultado = document.getElementById('resultados');
   //obtengo el codigo de la encuesta
   codenc=document.frmencuesta.cod.value;
   //obtengo el numero de opciones
   nroopc=document.frmencuesta.nroopciones.value;
   //creo un bucle para ver si alguna opcion esta checked
   //si esta checked ese valor lo envio por post
   i=1;
   while(i<=nroopc){
      opcion=document.getElementById('opcion'+i).checked;
      if (opcion==true){
         alt=i;
      }
      i++;
   }
   ajax=nuevoAjax();
   ajax.open("POST", "resultados.php",true);
   ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
         divResultado.innerHTML = ajax.responseText
      }
   }
   ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   //envio dos valores el id de la encuesta y la opcion elegida de la encuesta
   ajax.send("idenc="+codenc+"&alternativa="+alt)
}

resultados.php >> Este el archivo principal del proceso de la encuesta. Su función es actualizar las opciones elegidas y mostrar los totales hasta el momento.

¿Como funciona? Obtengo las variables que me envio la función javascript cargarResultados(), el id de la encuesta y la alternativa seleccionada, luego realizamos una consulta por su id para trabajar con los valores obtenidos. Mediante explode separamos por coma los elementos tanto de las opciones como de las respuestas, contamos cuantos elementos son y mediante un while vamos concatenar la nueva respuesta. Esto lo haremos así: por ejemplo supongamos que se envio la alternativa 3, dentro del while mediante un if compararemos si son iguales, en caso afirmativo le sumaremos una unidad. Al final concatenaremos todas las respuestas. Después realizamos un update para actualizar tanto las respuestas como el número de votos.

Ahora listar los resultados. Para ello consultamos los nuevos datos, capturamos las variables con las cuales trabajaremos y separamos por coma las opciones y respuestas. Usamos un while para listar las opciones con su respectiva respuesta. Vamos a mostrar la alternativa con su porcentaje. Hay que tener en cuenta que para sacar el porcentaje a la respuesta le restamos una unidad, esto porque cuando guardamos la primera vez lo hicimos con 1,1,1... Finalmente mostramos el total de votos.

<?php
   require('conexion.php');
   //obtengo posicion de la opcion elegida
   $id=$_POST['idenc'];
   $vot=$_POST['alternativa'];
   //consulto la encuesta enviada
   $consulta=mysql_query("SELECT * FROM encuesta WHERE idenc=$id",$con);
   $datos=mysql_fetch_array($consulta);
   $opc=$datos['opciones'];
   $resp=$datos['respuestas'];
   //opciones aqui
   //explode separa c/item por las comas
   //aqui creamos automaticamente un array
   //con los elementos separados por coma
   $opciones = explode(",",$opc);
   $rptas = explode(",",$resp);
   $i=0;
   //iniciamos variables de cadenas vacias
   $respuesta_nueva="";
   $alternativas="";
   $coma="";
   //contamos la cantidad de respuestas
   $tot_elems=count($rptas);
   while($i<=$tot_elems-1){
      $j=$i+1;
      //si la opcion elegida coincide con el elemento
      //sumamos 1 a la opcion
      if($j==$vot){
         $valor_respuesta=$rptas[$i]+1; 
      }else{
         $valor_respuesta=$rptas[$i];
      }
      //escribimos cadena del tipo "0 1 0 0"
      $respuesta_nueva=$respuesta_nueva.$coma.$valor_respuesta;
      $alternativas=$alternativas.$rptas[$i];
      $coma=",";
      $i++;
   }
   //actualizamos a nuevos valores de respuestas, y sumamos en una unidad el numero de votos
   $updenc="UPDATE encuesta SET respuestas='$respuesta_nueva', nrovotos=nrovotos+1 WHERE idenc=$id";
   $updencresult = mysql_query($updenc, $con);

   //ahora listamos resultados
   $consulta2=mysql_query("SELECT * FROM encuesta WHERE idenc=$id",$con);
   $listado=mysql_fetch_array($consulta2);
   $preg=$listado['pregunta'];
   $opc=$listado['opciones'];
   $resp=$listado['respuestas'];
   $nrovot=$listado['nrovotos'];
   $opciones = explode(",",$opc);
   $rptas = explode(",",$resp);
   $i=0;
   $tot_elems=count($opciones);
   while($i<=$tot_elems-1){
      echo "<p>";
      echo $opciones[$i];
      $ResulOpc = $rptas[$i]-1;
      //-1 por que empieza con 1 en los resultados 
      //esto por que si coloco 0 (ceros) no acepta
      //total de votos por cada opcion por el 100% y sobre el numero total de votos
      $ResulPorc=( $ResulOpc * 100 ) / $nrovot;
      echo "&nbsp;<strong>".round($ResulPorc,2)."%</strong>";
      echo "</p> n";
      $i++;
   }
   echo "<p style="text-align:center;">Total de votos: ".$nrovot."</p> n";
?>

He incluido lineas //comentadas en el código con el fin de explicar mejor cada bloque de código y que pueda ser entendido. Pueden ver una muestra en acción y como también descargar el código.

El sistema de encuesta se puede mejorar a criterio de cada uno. Por ejemplo para no realizar votos a cada instante se puede trabajar con cookies o guardar las IPs.

Búsqueda instantánea con AJAX

Volvemos nuevamente al tema de consultas en MySQL, haciendo uso de AJAX y PHP. En esta oportunidad veremos una busqueda instantánea. Quizás ha notado que algunos blogs tienen su sistema de busqueda de entradas(posts) y que los resultados de la busqueda se cargan en otra página. Aunque existen otros que los resultados aparecen en la misma página haciendo uso de AJAX. Pues bien eso es lo vamos a ver ahora.

Hay que tener en cuenta debemos hacer algunos cambios a nuestra base de datos. ¿Porqué? Cuando buscamos un sólo término o palabra no existe problema, podemos hacer uso de la sentencia SELECT ... LIKE contenido='termino' OR titulo='termino'.

Pero, ahora supongamos que queremos buscar una expresión, entonces se deberá buscar si el titulo o contenido del post lo contiene. En ese caso no haremos en trabajo con un simple LIKE debemos hacer algo mas.

Bien entonces empezemos...

Vamos definir los campos de la tabla, la cual usaremos para este ejemplo.

CREATE TABLE `post` (
`idpost` INT( 7 ) NOT NULL auto_increment ,
`titulo` VARCHAR( 70 ) NOT NULL ,
`contenido` TEXT NOT NULL ,
`autor` VARCHAR( 20 ) NOT NULL,
KEY `idpost` (`idpost`)
) TYPE = MYISAM ;

Bien ahora debemos de crear un índice FULLTEXT, que es útil para el segundo caso explicado, cuando buscamos expresiones o conjuntos de palabras en una tabla. Lo realizamos de la siguiente manera:

ALTER TABLE post ADD FULLTEXT(titulo, contenido); 

De esta manera cuando realicemos una busqueda, se trabajará en los dos campos que expecificamos dentro del FULLTEXT. Pero la instrucción de busqueda no será como con el LIKE, sino de la siguiente manera:

SELECT * FROM post WHERE MATCH(titulo, contenido) AGAINST ('$terminos) 

La función MATCH  ...  AGAINST ... , es usado en consultas en lenguaje natural parecido a como lo hacen los motores de búsqueda.

Nota: La funciónn MATCH ... AGAINST ... falla a veces cuando la expresión a buscar tiene solo una palabra. Para la busqueda de una sola palabra hacemos uso de LIKE.

Ahora a nuestra aplicación ...

Vamos a definir los archivos que realizará el proceso:

  • conexion.php >> Datos de la conexión a la base de datos.
  • funciones.js >> El objeto XMLHttpRequest que usaremos y otras funciones en JavaScript.
  • index.php >> El archivo principal que contendrá el formulario de busqueda.
  • busqueda.php >> Realizará la busqueda en si, seleccionará la busqueda adecuada a la expresion ingresada.

conexion.php

Este archivo contiene los datos de la conexión. Recuerde cambiar los datos por los suyos si desea probarlos en su PC.

<?php 
   $bd_host = "localhost"; 
   $bd_usuario = "root"; 
   $bd_password = ""; 
   $bd_base = "ribosomatic"; 
   $con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
   mysql_select_db($bd_base, $con); 
?>

funciones.js

Aquí se encuentran las funciones para llamar el objeto XMLHttpRequest y llamar al proceso de busqueda.

function nuevoAjax(){
	var xmlhttp=false;
 	try{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
 			xmlhttp = false;
 		}
 	}
	
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
   
	return xmlhttp;
}

function buscarDato(){
	resul = document.getElementById('resultado');
	bus=document.frmbusqueda.dato.value;
   
	ajax=nuevoAjax();
	ajax.open("POST", "busqueda.php",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			resul.innerHTML = ajax.responseText
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send("busqueda="+bus)
}

index.php

Definimos el archivo JavaScript que usará la página, es este caso funciones.js. Tambien definimos los estilos. En el evento onsubmit del formulario definimos la función JavaScript que llamará al proceso de busqueda.

<html>
	<head>
   	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   	<title>Untitled Document</title>
   	<script type="text/javascript" src="funciones.js"></script>
   	<style type="text/css">
		legend {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-weight: bold;
			font-size: 12px;
		}
		.titulo{
			width:20%;
		}
		.contenido{
			width:60%;
		}
		.autor{
			width:15%;
		}
		</style>
	</head>
  <body>
    <form name="frmbusqueda" action="" onsubmit="buscarDato(); return false">
    <div align="center">Termino a buscar:
    <input type="text" name="dato" /> 
    </div>
    </form>
    <fieldset><legend>Resultado</legend>
    <div id="resultado"></div>
    </fieldset>
  </body>
</html>

busqueda.php

Este es el archivo principal, dependiendo del término o expresiones ingresadas buscará haciendo uso de un simple LIKE o MATCH ... AGAINST.

<?php
   require('conexion.php');
   $busqueda=$_POST['busqueda'];
   if ($busqueda<>''){
   	//numero de palabras
   	$trozos=explode(" ",$busqueda);
   	$numero=count($trozos);
   	if ($numero==1) {
   		$cadbusca="SELECT * FROM post WHERE CONTENIDO LIKE '%$busqueda%' OR TITULO LIKE '%$busqueda%' LIMIT 10;";
   	} elseif ($numero>1) {
   		$cadbusca="SELECT * , MATCH ( TITULO, CONTENIDO ) AGAINST ( '$busqueda' ) AS Score FROM post WHERE MATCH ( TITULO, CONTENIDO ) AGAINST ( '$busqueda' ) ORDER BY Score DESC LIMIT 50;";
   	}
   
   	function limitarPalabras($cadena, $longitud, $elipsis = "..."){
   	$palabras = explode(' ', $cadena);
   	if (count($palabras) > $longitud)
   		return implode(' ', array_slice($palabras, 0, $longitud)) . $elipsis;
   	else
   	return $cadena;
   	}
?>
<table border="1px">
<tbody>
	<tr>
	<td class="titulo">Titulo</td>
	<td class="contenido">Contenido</td>
	<td class="autor">Autor</td>
	</tr>
<?php
   	$result=mysql_query($cadbusca, $con);
   	$i=1;
   	while ($row = mysql_fetch_array($result)){
	   echo "
	   <tr>
	   <td class="titulo">".$row['titulo']."</td>
	   <td class="contenido">".limitarPalabras($row['contenido'],20)."</td>
	   <td class="autor">".$row['autor']."</td>
	   </tr>";
	   $i++;
   	}
?>
</tbody>
</table>
<?php
//cierra el if inicial
}
?> 

Esta es una forma de combinar AJAX con proceso un poco mas avanzados de PHP y consultas MySQL. Pueden descargar el código, y el ejemplo más visible es nuestro propio sistema de búsqueda, por supuesto, mejorado y con algunas características extras.

Enviar mail usando PHP y AJAX

En esta oportunidad veremos como enviar e-mails haciendo uso de PHP + AJAX de manera sencilla y práctica.

Empezemos entonces diseñando nuestro formulario de envio de mails. Este formulario tendrá el nombre enviar_mail, y en el evento onsubmit colocaremos el nombre de la función enviarMail() de la cual hablaremos mas adelante. Además definiremos 3 campos: el destinatario, el remitente y el mensaje. Al final colocaremos una capa para mostrar el mensaje de enviado. A continuación el código:

index.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Enviar E-mail AJAX+PHP</title>
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form onsubmit="enviarMail(); return false" name="enviar_email" action="">
<p>E-mail de tu amigo</p>
<p>
<input size="30" type="text" name="email_destino" />
</p>
<p>Tu nombre </p>
<p>
<input size="30" type="text" name="emisor" />
</p>
<p>Mensaje a enviar</p>
<p>
<textarea name="mensaje" cols="45%" rows="2" ></textarea>
</p>
<p>
<input type="submit" value="Enviar" />
</p>
</form>
<div id="resultado_mensaje" style="width:300px; height:30px; border:1px solid gray;">Resultado aqui.</div>
</body>
</html>

Bien, ahora definamos las funciones en javascript que realizarán la petición al servidor. Definamos: la función nuevoAjax(), la cual se encargará de crear el objeto XMLHttpRequest dependiendo del navegador web (es algo que hemos visto en artículos anteriores); ahora la funcion enviarMail(), de la cual hablamos antes, está se encargará de enviar las variables del formulario al script PHP envia_mail.php que realizará el proceso de enviar el mail; y finalmente escribiremos la función borrarCampos(), la cual borra los 3 campos cuando el mail ha sido enviado. El código queda así:

ajax.js

function nuevoAjax(){
	var xmlhttp=false;
	try{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch(E){
			xmlhttp = false;
		}
	}	
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
function enviarMail(){
       c = document.getElementById('resultado_mensaje');
   
       //variable=documenet.nombre_del_form.nombre_del_control.value
       emis=document.enviar_email.emisor.value;
       dest=document.enviar_email.email_destino.value;
       men=document.enviar_email.mensaje.value;
   
       ajax=nuevoAjax();
       c.innerHTML = '<p style="text-align:center;"><img src="esperando.gif"/></p>'; 
       ajax.open("POST", "envia_mail.php",true);
       ajax.onreadystatechange=function() {
       if (ajax.readyState==4) {
       c.innerHTML = ajax.responseText
       }
       borrarCampos()
       }
       ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       ajax.send("destinatario="+dest+"&emisor="+emis+"&mensaje="+men)
}
function borrarCampos(){
       document.enviar_email.emisor.value="";
       document.enviar_email.email_destino.value="";
       document.enviar_email.mensaje.value="";
       document.enviar_email.email_destino.focus();
}

Finalmente, codificamos el script PHP que realizara el envio del mail. Para ello recibimos todas las variables que la función javascript enviarMail() nos envió, y hacemos uso de la instrucción mail de PHP, cuyos parametros son: destinatario, tema, texto del mensaje e información adicional de cabecera. El código queda así:

envia_mail.php

<?php
	$emisor=$_POST['emisor'];
	$destinatario=$_POST['destinatario'];
	$mensaje=$_POST['mensaje'];
	//Estoy recibiendo el formulario, compongo el cuerpo
	$cuerpo = "<h1>Un mensaje para ti</h1>";
	$cuerpo .= "<p>Tu amigo " . $emisor . ", te envia este mensaje.</p>";
	$cuerpo .= "<p>Tu email: " . $destinatario . "</p>";
	$cuerpo = $cuerpo.$mensaje;
	//mando el correo...
	mail($destinatario,"Mensaje de un amigo",$cuerpo,"MIME-Version: 1.0nContent-type: text/html; charset=UTF-8nFrom: ".$emisor." < http://www.miweb.com >");
	//doy las gracias por el envio
	echo "<div style="background-color:green;color:white;padding:4px;text-align:center;">Gracias por rellenar el formulario. Se ha enviado correctamente. Enviale a otros contactos</div>";
?>

Como verán, el desarrollo es relativamente sencillo y no requiere mucho código. Sin embargo se le puede agregar algunas características como: trabajar con cookies para evitar correos continuos, validar los correos antes de enviarlos, etc. Descargar el código.

Un TabPage con AJAX desde cero

tabpageDespués de ver estos excelentes paginadores JavaScript Tabifier y DOMTab (muy conocidas como TabPages) hechos en JavaScript, me anime a desarrollar una propia, que sea sencilla y de fácil configuración: TabPageR. A continuación no solo hago a disposición los archivos, sino que explicaré desde cero todo el código, con el objetivo de que alguien por allí pueda mejorarlo. Empecemos entonces!

Objetivo

Este (imagen) es el esquema que me trace para empezar con el desarrollo del paginador (asi llamaremos al TabPage).

esquema

  • En la sección botones, colocaremos todos los botones necesarios para nuestro paginador.
  • En la sección contenido, aparecerá el contenido que deseamos segun el botón seleccionado.
  • Además tanto el color del contenido como del botón seleccionado será el mismo, esto dará estilo a nuestro paginador.

Procesos

Ahora determinaremos los procesos que realizaremos según el objetivo arriba expuesto. Esto es importante (en todo desarrollo) por que nos ayudará a determinar por donde empezaremos en el elaboración de cierto proyecto. Identificamos estos procesos:

  • Al hacer clic en el botón deseado se mostrará el contenido apropiado y de manera instantánea (haremos uso de AJAX) .
  • Los botones desactivados tendrán un color diferente al color de fondo del contenido.
  • El botón seleccionado o activado tendrá el mismo color de fondo que el contenido.
  • Al momento de cargar la página web debe mostrar el contenido del primer botón por defecto.

Desarrollo

script.js Este script contendrá dos funciones: 1) objetoAjax: Crea el objeto XMLHttpRequest, y 2) MostrarPagina: Mostrará el contenido indicado según dos parámetros de entrada: el contenido a mostrar y el número de botón.

function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
function MostrarPagina(pagina,boton){
   cont = document.getElementById('contenido');
   
   ajax=objetoAjax();
   
   ajax.open("GET", pagina);
   ajax.onreadystatechange = function(){
   if (ajax.readyState == 4 && ajax.status == 200) {
   cont.innerHTML = ajax.responseText;
   }
   }
   ajax.send(null);
   //----------- configuraciones previas -------------//
   
   //definir los titulos de los botones
   titulo=new Array();
   titulo[0]="CSS";
   titulo[1]="HTML";
   titulo[2]="PHP";
   
   //definir numero de botones
   nrobtn=3;
   
   //definir prefijo de botones
   //(esto con el objetivo de no tener
   //problemas al momento de validar
   //nuestra página.)
   pref="boton_";
   
   //-------------------- fin ------------------------//
   //quita el estilo a todos los botones
   for(i=1;i<=nrobtn;i++){
   tit=titulo[i-1];
   btn=document.getElementById(pref+i);
   btn.innerHTML="<span style="border-top:1px #FF9900 solid; border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	border-bottom:1px #FF9900 solid; margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:1px; text-decoration:none; 	background-color:#FFFFCC;">"+tit+"</span>";
   }
   //le da estilo al boton seleccionado
   btnA = document.getElementById(pref+boton);
   tit=titulo[boton-1];
   btnA.innerHTML="<span style="border-top:1px #FF9900 solid;	border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:5px; text-decoration:none; 	background-color:#FFCCCC;">"+tit+"</span>";
   }

Note que este script, tiene una sección "configuraciones previas", donde podemos definir los titulos de cada botón, el numero de botones y el prefijo del nombre que se le dará a cada botón. Esto con el fin de que, si se desea, se incluyan mas botones.

Ahora definamos una hoja de estilos para los botones y el contenido. Creamos un archivo CSS llamado estilos.css el cual contendra lo siguiente:

#botones {
width: 400px;
padding-top:2px;
padding-bottom:2px;
z-index: 0;
}
#botones a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
cursor:pointer;
/*Superponemos los botones para 
eliminar el border inferior - only IE (como siempre!!)*/
position:relative;
z-index: 1;
}
#botones a:hover{
color:#FF0000;
}
#contenido {
/*Ancho y Alto del contenedor*/
width: 400px;
height:200px;
background-color:#FFCCCC;
border-top:1px #FF9900 solid;
padding:5px;
}
#contenido p{
color:#3366FF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

El siguiente paso será crear 3 archivos HTML, con contenido variado y darles nombres, para este caso puede ser: pagina1.html, pagina2.html y pagina3.html. Nota: Solo contenido no incluya etiquetas <html>,<head> o <body>.

Ejemplo de pagina1.html

<p>Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentaci&oacute;n de un documento estructurado escrito en HTML o XML (y por extensi&oacute;n en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificaci&oacute;n de las hojas de estilo que servir&aacute; de est&aacute;ndar para los agentes de usuario o navegadores.</p>

Finalmente, el archivo index.html, donde especificaremos el archivo script.js y estilos.css; además en el evento onload del body especificaremos la función MostrarPagina para que muestre la primera pagina por defecto; y luego le damos nombre a los botones con el prefijo "boton_" (esto debe ser igual al configurado en el archivo script.js) , además en el evento onclick de cada enlace o botón llamamos a la función MostrarPagina y especificamos como primer parametro el contenido que se mostrará y como segundo parametro el número de boton.

<html>
<head>
<title>TabPage 0.1</title>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body onload="MostrarPagina('pagina1.html','1')">
<p>Este ejemplo muestra un tabpages  hecho en ajax, es una manera de organizar nuestra informaci&oacute;n. Espero les sirva. </p>
<div id="botones">
<a id="boton_1" onclick="MostrarPagina('pagina1.html','1')">P&aacute;gina 1</a> 
<a id="boton_2" onclick="MostrarPagina('pagina2.html','2')">P&aacute;gina 2</a> 
<a id="boton_3" onclick="MostrarPagina('pagina3.html','3')">P&aacute;gina 3</a> 
</div>
<div id="contenido">
</div>
</body>
</html>

Así finalizamos con la realización de este paginador (TabPage) al cual nombré TabPageR. Pueden descargar el código, como también puede ver un ejemplo en la sección Ejemplos.

Este proyecto ha sido probado con Internet Explorer, Mozilla, Firefox y Opera.

Navegación

Categorias

Archivos

Monitored by eXternalTest