Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Efecto Taringa! en vivo

Efecto Taringa! en vivo

Autor jc mouse viernes, mayo 25, 2012

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.

screen taringa

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.

captura pantalla

Bájate el proyecto HERE

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Animaciones básicas con Pygame

Animaciones básicas con Pygame

En tutoriales pasados creábamos demasiadas líneas de código en el mismo lugar para dibujar en la pantalla, cosa que nos...

Ejemplo de uso del Generador de Código de MyBatis

Ejemplo de uso del Generador de Código de MyBatis

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Pruebas instrumentadas con Espresso

Pruebas instrumentadas con Espresso

Espresso es un framework de testing propiedad de Google que está dirigido a desarrolladores que creen que las pruebas au...

Crear componentes en tiempo de ejecución con Netbeans

Crear componentes en tiempo de ejecución con Netbeans

🙂 Una de las preguntas más buscadas por programadores java es la de crear componentes swing en tiempo de ejecución, eso...

Uso y creación de archivos 9-Patch

Uso y creación de archivos 9-Patch

Antes de la aparición de los celulares inteligentes y de las grandes mejoras tecnológicas que trajeron con ellas, las ap...

Ejemplo Cliente-Servidor en Android

Ejemplo Cliente-Servidor en Android

Continuando con estos post de Cliente/Servidor, en esta oportunidad realizaremos un ejemplo usando un dispositivo móvil...

Comparte lo que sabes

Categorias

Últimas entradas

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

En un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

Herramientas

Generador de Enlaces a Whatsapp