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

No a la ley SOPA

No a la ley SOPA

¿Qué es S.O.P.A y PROTECT-IP? SOPA y PROTECT-IP son proyectos de leyes introducidos en la Cámara de Representantes de lo...

Control de versiones con GIT y Netbeans

Control de versiones con GIT y Netbeans

Control de versiones: Se llama control de versiones a la gestión de los diversos cambios que se realizan sobre los eleme...

Procesamiento por lotes [Batch insert]

Procesamiento por lotes [Batch insert]

En ocasiones debemos insertar varios registros a nuestra base de datos desde nuestra aplicación java y lo que usualmente...

JLabel circular

JLabel circular

En este post crearemos un swing Label personalizado que tendrá la forma circular en su borde, con esto obtendremos un bo...

Crea tu JLabel con hipervinculo

Crea tu JLabel con hipervinculo

Si queremos añadir un enlace web a una aplicación en java, podemos hacer uso de botones o etiquetas, incluso se puede añ...

Autenticación de usuarios bajo el patrón MVC

Autenticación de usuarios bajo el patrón MVC

MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes lógicos principales.  Estos s...

Comparte lo que sabes

Categorias

Últimas entradas

Lorca Editor es una aplicación online creada por el desarrollador español Domingo Martin el cual tiene como objetivo el...

Eratóstenes era un matemático griego del siglo  III a.C. el cual ideó una manera rápida de obtener todos los números pri...

Las matemáticas son fundamentales para la vida y aparte de las actividades clásicas de enseñanza desarrolladas en el aul...

MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes lógicos principales.  Estos s...

Herramientas

Generador de Enlaces a Whatsapp