Efecto Taringa! en vivo

En la pagina de Taringa, existe una sección donde se puede ver lo que pasa en ese foro al momento, «Taringa! en vivo» se llama, esto se lo realiza utilizando llamadas asincronicas a la base de datos mediante la tecnología de AJAX, la cual trabaja de lado del cliente y un lenguaje de lado del servidor, PHP, encargada de procesar la información de la base de datos y enviarla ya formateada a la pantalla del cliente.

Sin muchas palabras, el proyecto que haremos hoy sera emular ese efecto. Puedes ver el siguiente video para entender mucho mejor lo que trataremos de hacer.

¿Qué necesitamos?

Un editor de texto, notepad++, dreamweaver, phpdesigner, etc
Un servidor web, xampp, appserv, etc
Conocimientos sobre PHP, HTML, CSS, Javascript, SQL
La librería JQuery

Comencemos.

1. Primero necesitamos crear una base de datos, es lógico que Taringa utiliza varias tablas, sin embargo para simplificar el proyecto nosotros solo utilizaremos una tabla, esta tabla se llama «tabla» ~~(original no)~~, la tabla es la siguiente:

CREATE TABLE tabla (
  usuario varchar(12) NOT NULL,
  color varchar(12) NOT NULL,
  accion varchar(32) NOT NULL,
  post varchar(69) NOT NULL
)

Como se observa es muy simple, consta de cuatro columnas que no requieren de mayor explicación, la columna «color», almacena un valor string «red, blue, green», esto para diferenciar los registros al momento de realizar el filtro. Necesitamos introducir unos cuantos datos.

INSERT INTO tabla VALUES ('yuyix13', 'green', 'Agregó un post a favoritos', 'Megapost 50 Cosas que no Sabias Con Memes');
INSERT INTO tabla VALUES ('braian031', 'blue', 'Votó un comentario en el post', 'Crimen de la liceal degollada, el homicidio 127 de 2012');
INSERT INTO tabla VALUES ('CSP97', 'red', 'Votó un comentario en el post', 'varios programillas para tu pc con w7 por mf');
INSERT INTO tabla VALUES ('mvv_10', 'green', 'Nueva respuesta en el tema', 'Como instalo "scripts mods" en GTA 4');
INSERT INTO tabla VALUES ('Luisitouh', 'blue', 'Votó un comentario en el post', 'Culpan al porno y los videojuegos de la decadencia.');
INSERT INTO tabla VALUES ('xrottenx', 'green', 'Agregó un post a favoritos', 'La chica mas rica del mundo');
INSERT INTO tabla VALUES ('wawanco9', 'blue', 'Votó un comentario en el post', 'Niña de 11 años quema todo lo que toca');
INSERT INTO tabla VALUES ('purapata', 'green', 'Votó un comentario en el post', 'Mecanica Como aumentar la potencia de nuestro 2 tiempos');
INSERT INTO tabla VALUES ('yooemi', 'red', 'Agregó un post a favoritos', 'Culpan al porno y los videojuegos de la decadencia.');
INSERT INTO tabla VALUES ('VeryBadGirl', 'blue', 'Votó un post', 'Activar Office 2010');
INSERT INTO tabla VALUES ('machu77', 'blue', 'Votó un post', 'Recopilación de docs y hojas Excel de ingeniería');
INSERT INTO tabla VALUES ('shtrth', 'green', 'Votó un comentario en el post', 'Terremoto deja al menos 6 personas fallecidas');
INSERT INTO tabla VALUES ('agus1023', 'red', 'Votó un comentario en el post', '10 Mandamientos para cambiar tu vida');
INSERT INTO tabla VALUES ('barto1980', 'red', 'Agregó un post a favoritos', 'Las Sectas Mas Peligrosas del Mundo');
INSERT INTO tabla VALUES ('Marcosgesell', 'green', 'Votó un comentario en el post', 'Lo que los medios no dicen de Islandia');
INSERT INTO tabla VALUES ('Mabrense', 'green', 'Votó un comentario en el post', 'Un médico hizo mal un aborto');
INSERT INTO tabla VALUES ('rock3r_00', 'green', 'Votó un comentario en el post', 'La esposa de Mark Zuckerberg no podrá tocar su fortuna');
INSERT INTO tabla VALUES ('zyklon05', 'green', 'Votó un comentario en el post', 'Discos Dificiles De Conseguir II Parte');
INSERT INTO tabla VALUES ('minettij', 'green', 'Votó un comentario en el post', 'Microsoft office 2010 Full - Español');
INSERT INTO tabla VALUES ('facu1420', 'red', 'Creó un nuevo post', 'Zooey Deschanel a traves de los años');
INSERT INTO tabla VALUES ('facu1420', 'green', 'Creó un nuevo post', 'Se Merecen Lo Peor');
INSERT INTO tabla VALUES ('zelucas', 'green', 'Creó un nuevo post', 'Maxi López no seguirá en el Milan');
INSERT INTO tabla VALUES ('rosanomotos3', 'green', 'Creó un nuevo post', 'Boca empatará y clasificará a Semis.');
INSERT INTO tabla VALUES ('tomikapo', 'green', 'Creó un nuevo post', 'Expansion de orejas');
INSERT INTO tabla VALUES ('tomikapo', 'blue', 'Votó un post', 'Cambia ya, haz ejercicio y come bien.');
INSERT INTO tabla VALUES ('Letali', 'red', 'Votó un post', 'Cambia ya, haz ejercicio y come bien.');
INSERT INTO tabla VALUES ('emii_prn', 'blue', 'Votó un post', 'Naruto Shippuden SubEspañol 264');
INSERT INTO tabla VALUES ('Koala3D', 'green', 'Votó un post', 'Las 100 mujeres más sexys de 2012');
INSERT INTO tabla VALUES ('daniel_52', 'blue', 'Votó un post', 'Grive el cliente de Google Drive ya está disponible');
INSERT INTO tabla VALUES ('daniel_52', 'blue', 'Votó un post', 'Las Sectas Mas Peligrosas del Mundo');
INSERT INTO tabla VALUES ('Koala3D', 'blue', 'Nuevo comentario en el post', 'Soy arquero, y me encanta');
INSERT INTO tabla VALUES ('jeilck', 'red', 'Nuevo comentario en el post', 'Las Sectas Mas Peligrosas del Mundo');
INSERT INTO tabla VALUES ('ApostolakOS', 'blue', 'Nuevo comentario en el post', 'Grive el cliente de Google Drive ya está disponible');
INSERT INTO tabla VALUES ('Twisted19', 'green', 'Nuevo comentario en el post', 'Daddy Yankee un éxito en Europa');

2. Necesitamos una clase que interactue con la base de datos, esta clase se llama «mysql.class.php», es la siguiente:

<?php
class database{

    private $localhost = "localhost";    
    private $usuario = "root";
    private $password = "";
    private $database = ""; 
    private $conexion; 

 public function conectar()
 {
  if(!isset($this->conexion)){
   $this->conexion = (mysql_connect($this->localhost, $this->usuario,$this->password)) or die(mysql_error() );
     mysql_select_db($this->database , $this->conexion) or die(mysql_error());      
  }
 } 

    #Realiza la consulta a la base de datos
 public function consulta()
 {
        #divide por colores color1,color2, color3
     $color = explode(',', $_POST['color']);
  $where='';
        //si existen colores seleccionados
  if( count($color)>0 )
  {
        $where=' WHERE ';
     foreach($color as $c )
    $where .= " color = '$c' OR ";         
   $where = substr($where , 0, -3 );//elimina el ultimo "OR" 
  }
        #consulta SQL
  #obtenemos 20 registros de forma aleatoria
  $q="SELECT * FROM tabla $where ORDER BY rand() LIMIT 20";
  $resultado = mysql_query($q, $this->conexion);
  if(!$resultado){
    echo 'MySQL Error: ' . mysql_error();
    exit;
  }        
  while( $row = mysql_fetch_assoc($resultado) ) 
    $array[] = $row;
        #retorna un array 
    return $array; 
 }

}
?>

Esta clase contiene una función para conectarse a la base de datos, no olvides completar los datos de conexión con los de tu pc, esta clase ademas cuenta con un método de consulta, la cual, valga la redundancia, ejecuta una consulta a la base de datos para extraer los registros. La instrucción sql ejecuta un SELECT para obtener 20 registros, ademas utiliza el comando ORDER BY rand() para que los registros obtenidos sean aleatorios, esto para dar la sensación de movimiento, sin embargo en un caso real, la instrucción sql solo debería obtener los N últimos registros.

3. Los registros obtenidos de la base de datos, los mostraremos en pantalla utilizando un TABLE, el archivo php se llama «record.php».

<?php
require_once 'mysql.class.php';
$db = new database();
$db->conectar();
$tsData = $db->consulta();

#si existen datos
if( $tsData!= NULL ){
?>
<table border="0" cellspacing="0" cellpadding="0" class="tabla">
  <tr>
    <th width="100">USUARIO</th>
    <th width="180">ACCION</th>
    <th width="400">TITULO</th>
  </tr>
 <?php foreach ($tsData as $data): ?>    
  <tr>
    <td><?php echo utf8_encode($data['usuario']);?></td>
    <td  style="color:<?php echo $data['color'];?>;"><?php echo utf8_encode( $data['accion']);?></td>
    <td ><?php echo utf8_encode($data['post']);?></td>
  </tr>
     <?php endforeach; ?>    
</table>
<?php }else echo 'No existen registros'; ?>

4. para terminar creamos el «index.php»:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mouse! en Vivo</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
//funcion para devolver los checkbox seleccionados
jQuery.fn.getSeleccionados=function(){
  var a=[],b=0;
  this.each(function(){
   a[b++]=$(this).val()
  });
  return a
};

$(document).ready(function() { 
 //boton de PAUSA/PLAY
 $("#btn").click(function() {
  if( $("#btn").val() == 'PAUSA' )
  {
     clearInterval(interval);
     $("#btn").val('REANUDAR');   
  }
  else
  {
    $("#btn").val('PAUSA');
   interval = setInterval(interval_function, 1000);
  }
  });     
  //FUNCION PARA MANDAR EL AJAX
  interval_function = function () {
   dataString= 'color=' + $("input[name=color]:checked").getSeleccionados();    
   $.ajax({
          type: 'POST',
             url: 'record.php',
             data: dataString,
          success: function(data) {
              $("#record").html(data);
             }
       });//fin ajax 
      };

   interval = setInterval( interval_function , 1000);  

 }); //fin ready 
</script>
<style type="text/css">
body{ background-color:#F0EEEE;}

#record{ 
float:left;
background-color:#FFFFFF; padding:10px; width:700px; border:1px solid #ccc;}

#box{
float:left;
margin-left:10px;
width:200px;
padding:10px;
background-color:#fff;
border:1px solid #ccc;
}

.tabla th {
padding: 5px;
text-align:center;
font-size: 14px;
color:#6A6B86;
font-family: ?Trebuchet MS?, Arial;
background-color:#D6DEE8;

}
.tabla td {
padding: 5px;
text-align:left;
font-size: 12px;
font-weight:700;
color:#777777;
background-color:#EEEEEE;
font-family: ?Trebuchet MS?, Arial;
border-top:1px solid #fff;
border-bottom:1px solid #CCCCCC;
}
</style>
</head>
<body>
<h1>Mouse-ringa! en VIVO</h1>
<div id="record">loading...</div>
<div id="box">
<p><input name="btn" id="btn" type="button" value="PAUSA" /></p>
<h3>Filtrar por Color</h3>
<div><input name="color"  type="checkbox" value="red" checked="checked"  />Post de color Rojo</div>
<div><input name="color"  type="checkbox" value="blue" checked="checked" />Post de color Azul</div>
<div><input name="color"  type="checkbox" value="green" checked="checked" />Post de color Verde</div>
</div>

</body>
</html>

Javascript es el que hace el trabajo, utilizando jQuery, implementamos una funcion «interval_function» que hará una llamada AJAX al servidor y obtendrá los datos preformateados para mostrarlos en un DIV, para realizar una llamada al servidor, utilizamos el comando javascript «setInterval», esta función realiza una instrucción X cada cierto tiempo, en nuestro caso llama a la función «interval_function» cada segundo.

Terminamos. Ejecuta el index.php desde tu navegador favorito.

Bájate el proyecto HERE

Efecto Taringa! en vivo

Tags

Últimas entradas

FOCA: Herramienta para recolección y análisis de Metadatos

Paginación en SQL Server 2008 y Laravel

¿Como paginar con Laravel 11?

¿Cómo hacer el video ABRAZO gratis?

Crea y usa Traits en Laravel

Artículos similares

Reportes con imagenes en Java (Video)

Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

Biblioteca java para leer/escribir Metadatos

Desarrollo de juegos con Libgdx y Android Studio

Procedimientos Almacenados: Parámetros OUT

GridView con imagenes en miniatura

JC Mouse | Bolivia