Mini sistema de comentarios XAJAX+MySQL+CSS

Hace un tiempo publique un ejemplo de estilo para un sistema de comentarios que tenía en mente para matar el tiempo, el cual sería desarrollado usando XAJAX y MySQL como principales tecnologías, nada de otro mundo, en su momento no lo seguí por diversas razones.

Recientemente, JRT comentó "soy nuevo en el mundo de ajax y me gustaría saber si podrías poner un ejemplo de como hacer la conexión a la base de datos que no se como colocarla", así que con un poco de tiempo libre, le armo una respuesta.

Para el ejemplo usare una sola tabla llamada comentarios,  la cual, debería tener una tabla padre llamada temas, ya que un topic puede tener varias respuestas, pero como no me intersa más que mostrar la interacción con una sola tabla, solo usaremos la primera nombrada.

CREATE DATABASE db_xajax CHARACTER SET utf8 COLLATE utf8_general_ci;
CREATE TABLE comentarios
(
   id_comentario integer auto_increment primary key,
   nombre varchar(20) not null,
   email varchar(100) not null,
   web varchar(100) default '',
   comentario text not null
) ENGINE=INNODB;

Nuestro index.php queda así:

Clic aquí para mostrar/ocultar el código

<?php

// incluimos la clase
require_once("xajax/xajax_core/xajax.inc.php");
 
// incluimos las funciones generales
require_once("mod_ppal.php");

// creamos una instancia al objeto XAJAX:
$xajax = new xajax();

// valida el campo pasado por parametro
function form_manage($form,$sCampo){
    
   // obtenemos el valor del campo
   $sValorCampo = trim($form["txt_$sCampo"]);
   $sMsj        = '';//inicializamos

   // iniciamos las validaciones ***
   if (empty($sValorCampo))// si el campo está vacio
      $sMsj = ' éste campo es obligatorio.';

   elseif ($sCampo == 'nombre' or $sCampo == 'comentarios')
         $sMsj = no_es_valida_cadena($sValorCampo,$sCampo);
      
   elseif ($sCampo == 'email')
         $sMsj = no_es_email_valido($sValorCampo);

   // asignamos el valor que determinara la imagen 
   // y el mensaje a mostrar por campo
   $sImg = ($sMsj===false ? 'correcto' : 'incorrecto');
 
   // asignamos el mensaje por campo..
   $sHTMLMsj = "<img border='0' src='imagenes/$sImg.png' />"
               .($sImg == 'incorrecto' ? $sMsj : '');
 
   // creamos una nueva instancia para generar
   // la respuesta con ajax (xajaxResponse).
   $objRespuesta = new xajaxResponse();
   
   // mostraremos la cantidad de caracteres del txt_comentarios
   if(!empty($form['txt_comentarios']))
       $objRespuesta->assign('total_caracteres','innerHTML'
               ,strlen(trim($form['txt_comentarios'])));
   else
       $objRespuesta->assign('total_caracteres','innerHTML', '0');
   //---------------------------------------------------------------------------
   
   // actualizamos los div
   $objRespuesta->assign("error_$sCampo",'innerHTML', $sHTMLMsj);

   // retornamos el objeto
   return $objRespuesta;
}

function form_process($form){

   // creamos una nueva instancia para generar la respuesta con ajax
   $objRespuesta = new xajaxResponse();
 
   // si los campos no estan correctos 
   if (no_es_valida_cadena($form['txt_nombre'],'nombre') or
       no_es_email_valido($form['txt_email']) or
       no_es_valida_cadena($form['txt_comentarios'],'comentarios')){

      $objRespuesta->alert('¡El formulario debe estar perfectamente validado!');
      
   }else{
       
       if (ms_insert($form['txt_nombre'],$form['txt_email']
               ,$form['txt_web'],$form['txt_comentarios'])){
         
               //
               $objRespuesta->alert('¡tu comentario ha sido agregado!');
               $objRespuesta->redirect('index.php');
      }else
          $objRespuesta->alert('¡el comentario no pudo ser agregado!');
      
      // limpiamos los campos -------------------------------------
      $ArrayCampos = array('nombre','email','web','comentarios'); 
      foreach($ArrayCampos as $sValor){
         $objRespuesta
            ->clear("txt_$sValor",'value')
            ->clear("error_$sValor",'innerHTML');
      }
   }
   return $objRespuesta;
}

function html_comentarios(){
    
    $arrComentarios = ms_query();
    if(is_array($arrComentarios)){
       $c=1;
       foreach($arrComentarios as $arrComentario){
          // $arrComentario[0] => nombre
          // $arrComentario[1] => comentario
          echo '<div id="comment_box"><div class="numero">'.$c++
            .'</div><div class="avatar_default"></div>
            <div class="autor"><b>'.$arrComentario[0]
            .'</b> dijo ..</div>
            <div class="contenido">'.$arrComentario[1]
            .'</div></div>';
       }
    }else
        echo '<div class="highlight">No se encontraron comentarios..</div>';
}

$xajax->registerFunction('form_manage');  // gestiona las validaciones del formulario
$xajax->registerFunction('form_process'); // procesa los datos del formulario

// le indicamos al objeto xajax que procese la peticion / el pedido
$xajax -> processRequest();

?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="css/estilo.css" rel="stylesheet" />
  <title>XAJAX-MySQL: mini sistema de comentarios</title>
  <?php 
    //se le dice que incluya el JavaScript generado desde XAJAX
    $xajax->printJavascript('xajax/'); 
  ?>
</head>
<body>
  <div id='main'>

   <div id="tablon"><?php echo html_comentarios(); ?></div>
   <div id='clear'></div>

   <div id="comment_area">
     <h3>Deja un comentario</h3>
     <p class='nota'>Tu Email NO será publicado. Los campos marcados con asteriscos 
     (<span class="requerido">*</span>) son obligatoríos.</p>
     
     <form action='javascript:void(null);' method="post" 
           id="form_comment" name="form_comment" 
     onsubmit="xajax_form_process(xajax.getFormValues('form_comment'))">
    
       <p class='campo'>Nombre: <span class="requerido">*</span> 
         <input tabindex='1' id="txt_nombre" name="txt_nombre" size="29" 
                type="text" maxlenght="20" 
         onkeyup="xajax_form_manage(xajax.getFormValues('form_comment'),'nombre')"
         onblur="xajax_form_manage(xajax.getFormValues('form_comment'),'nombre')" /> 
         <span class="error" id='error_nombre'></span>
       </p>

       <p class='campo'>Email: <span class="requerido">*</span> 
         <input tabindex='2' id="txt_email" name="txt_email" size="30" 
                 type="text" value='@' maxlenght="100" 
         onkeyup="xajax_form_manage(xajax.getFormValues('form_comment'),'email')"
         onblur="xajax_form_manage(xajax.getFormValues('form_comment'),'email')" />
         <span class="error" id="error_email"></span>
       </p>

       <p class='campo'>Web:
         <input tabindex='3' id="txt_web" name="txt_web" 
           value="http://" size="32" maxlenght="100" type="text" />
       </p>

       <p class='campo'>Comentario: <span class="requerido">*</span> 
           <span class="error" id="error_comentarios"></span></p>
       <p class='campo'>
          <textarea tabindex='4' class='estilotextarea' id="txt_comentarios" 
                    name="txt_comentarios" 
          onkeyup="xajax_form_manage(xajax.getFormValues('form_comment'),'comentarios')"
          onblur="xajax_form_manage(xajax.getFormValues('form_comment'),'comentarios')" />
          </textarea>
          <span class="total_caracteres" id="total_caracteres">0</span>
       </p>

       <p class='submit'>
           <input tabindex='5' name="submit" id="submit" 
               value="Publicar comentario" type="submit" />
       </p>
     </form>
   </div>
 </div>
</body>
</html>

y nuestro mod_ppal.php queda así:

Clic aquí para mostrar/ocultar el código

<?php
function ms_connect(){
    
      $conex = @mysql_connect('localhost','tu_usuario','tu_pass');
      //obviamente no colocaras contraseña si tu usuario de MySQl no la requiere.. 
      if(is_resource($conex)){
         if(!@mysql_select_db('db_xajax'))
     die('Error: no se puede seleccionar la base de datos.');
         else
             return $conex;
      }else
         die('Error: no se puede conectar con la base de datos.');
}

function ms_insert($sNombre,$sEmail,$sWeb,$sComentario){
    
   if(empty($sNombre) or empty($sEmail) 
      or empty($sComentario)) return false;
       
   $conex = ms_connect();
   $sSQL  = "INSERT INTO comentarios ";
   $sSQL .= "(nombre,email,web,comentario) VALUES ('";
   $sSQL .= mysql_real_escape_string(trim($sNombre))."','";
   $sSQL .= mysql_real_escape_string(trim($sEmail))."','";
   $sSQL .= mysql_real_escape_string(trim($sWeb))."','";
   $sSQL .= mysql_real_escape_string(trim($sComentario))."');";
   
   //exit($sSQL);
   mysql_query($sSQL,$conex);

   $id = mysql_insert_id($conex);
   ms_close($conex);
   
   return $id ? $id : false;
}

function ms_query(){

   $sSQL   = 'SELECT nombre,comentario FROM comentarios';
   $conex  = ms_connect();
   $result = mysql_query($sSQL,$conex);

   if(is_resource($result) and  mysql_num_rows($result)>0){
      $data = array();
      while ($row = mysql_fetch_array($result, MYSQL_NUM)){
         $data[] = get_array_filter($row);  
      }
         
      mysql_free_result($result);
      ms_close($conex);
      return $data;
      
   }else
      return false;
}
   
function ms_close($conex){
    if(is_resource($conex)) mysql_close($conex);
}   

// filtra el contenido a mostrar
function get_array_filter($quien){
       
   if(is_array($quien)){

      foreach($quien as $id => $sValor){
         $quien[$id] = get_array_filter($sValor);
      }
      return $quien;
      
   }else
      return htmlspecialchars($quien, ENT_QUOTES);
}
   
// valida Email
function no_es_email_valido($sEmail){

   if(empty($sEmail)) return true;
    
   // primero validamos la longuitud
   if ((strlen($sEmail) < 6) or (strlen($sEmail) > 100)) 
     return 'Error: debe tener entre 6 y 100 caracteres.';

  else{
$patron="/^[_a-zA-Z0-9-ñÑ]+(\\.[_a-zA-Z0-9-ñÑ]+)*@+([_a-zA-Z0-9-
]+\\.)*[a-zA-Z0-9-]{2,100}\\.[a-zA-Z]{2,6}$/";
     return (!preg_match($patron,$sEmail) 
      ? 'Error: email incorrecto' : false);
  }
}
 
// validara los campos "nombre y comentarios"
function no_es_valida_cadena($sCadena,$sCampo){

  if(empty($sCadena) or empty($sCampo)) return true;

   if (!es_correcta_cadena($sCadena))
      return 'Error: solo caracteres alfanumericos, espacios, apóstrofe.';

   else{
 $min = $sCampo == 'comentarios' ? 5 : 3;
        $max = $sCampo == 'comentarios' ? 512 : 20;

        if ((strlen($sCadena) < $min) or (strlen($sCadena) > $max))
           return "Error: debe tener entre $min y $max caracteres.";
        else
           return false;
   }
}
 
// se compara el campo de confirmacion
function es_correcta_cadena($sCadena){

   if(empty($sCadena)) return false;
   return preg_match("/^[0-9a-z_ÑÁÉÍÓÚÄËÏÖÜñáéíóüäëïöü.,\'\s]*$/i",$sCadena);
}
?>
 

 

Descargar el ejemplo completo (incluye imágenes y librería)