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

Conversor decimal a binario

Conversor decimal a binario

Desde que Google anuncio de que dejara de dar soporte al plugin de Eclipse y se concentrara en Android Studio, quienes t...

Control de Stock en Java (Parte 1)

Control de Stock en Java (Parte 1)

Un SGA “Sistema de Gestión de Almacenes”  es un programa informático destinado a gestionar las entradas y sa...

Guardar y Leer imagenes en PostgresSQL

Guardar y Leer imagenes en PostgresSQL

En este tutorial veremos una forma para registrar archivos JPG en una base de datos PostgreSQL y recuperarlos para utili...

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

En este post crearemos una app para utilizar el vibrador de nuestro dispositivo android usando para ello el IDE Android...

Crear archivos JNLP con Netbeans

Crear archivos JNLP con Netbeans

¿Que son los archivos JNLP? Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta...

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS es una aplicación para dispositivos móviles con el Sistema Operativo Android que te permite realizar exámenes desde...

Comparte lo que sabes

Categorias

Últimas entradas

En este post aprenderemos lo que es la clonación de objetos en java o lo que es lo mismo, generación de nuevas instancia...

El índice TIOBE (TIOBE, The Importance of Being Earnest – “La importancia de ser honesto” – refe...

SDKMAN! es una herramienta para la administración de versiones paralelas de varios programas de desarrollo de software c...

Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d...

Android Bolivia

MAUS