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

Crea tu lector de códigos QR

Crea tu lector de códigos QR

En este post desarrollaremos una aplicación que nos permitirá leer un código QR y capturar la información que contiene y...

Configura tu smartphone y PC para testear aplicaciones

Configura tu smartphone y PC para testear aplicaciones

Cuando desarrollamos aplicaciones para android como programadores nos interesa la velocidad al tiempo de depurar el códi...

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...

Botón Mágico

Botón Mágico

Magic Button, es un botón animado para android bajo licencia del MIT desarrollado por Bloder (Brasil), el proyecto esta...

Conexión MySQL y C#

Conexión MySQL y C#

En este post vamos a crear una aplicación sencilla para conectar C# con MySQL. Manos a la obra 🙂 Necesitamos – Con...

Contraseñas con emojis en java

Contraseñas con emojis en java

Semanas atrás leí un articulo en el que se pensaba implementar los emojis como contraseñas en los dispositivos con andro...

Comparte lo que sabes

Categorias

Últimas entradas

La misión espacial de la NASA, el Mars  2020 Rover Mission esta proyectada para lanzarse en julio de 2020 y su llegada s...

El reconocimiento óptico de caracteres o OCR (Optical Character Recognition), es un proceso dirigido a la digitalización...

imgclip es una pequeña herramienta de línea de comandos el cual se ejecuta desde la terminal para Mac, Windows y Linux....

Alda es un lenguaje de programación desarrollado por Dave Yarwood el cual esta basado en texto para composición musical,...

Android Bolivia

MAUS