Bloguero-ec

Codigo Fuente, programación, Diseño Web

Timeline de twitter hecho en php, mysql, jquery y javascript

junio 10, 2015
codigo-fuente,javascript,jquery,mysql,php,responsive,twitter


Etiquetas: , , ,


Hola como están esta vez les traigo un , Timeline de twitter hecho en php , mysql y jQuery..

Es sencillo y responsive , se puede adaptar a cualquier pantalla ya que está basado con la tecnología de bootstrap .

Para la utilización de este sistema utilizaremos de los siguientes archivos..

Hago una breve explicación suponiendo un conocimiento por parte del lector de cómo usar php, mysql, jquery:

Antes que nada deberemos crear una base de datos y una tabla mysql para su correcto funcionamiento..

Archivos a utilizar :

conexion.php

funciones.php

index.php

script.js

enviar.php

estilo.css

conexion.php : Se encargará de realizar la conexión a la base de datos utilizaremos la tabla timeline en este caso y una base de datos prueba..

<!--
 * Sistema Timeline de Twitter:
 * Php mysql jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
 *-->
<?php

if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');

/* configuramos la base de datos */

$db_host        = 'localhost';
$db_user        = '';
$db_pass        = '';
$db_database    = ''; 

$link = mysql_connect($db_host,$db_user,$db_pass) or die('No se ha podido establecer conexion con la base de datos');

mysql_select_db($db_database,$link);
mysql_query("SET names UTF8");
?>

funciones.php : Creará en modo de funciones los tweets a mostrar y la fecha en tiempo real ..

<!--
 * Sistema Timeline de Twitter:
 * Php mysql jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
 *-->
<?php

if(!defined('INCLUDE_CHECK')) die('You are not allowed to execute this file directly');

<!-- obtenemos el tiempo con esta función  -->
function relativeTime($dt,$precision=2)
{
    $times=array(   365*24*60*60    => "año",
                    30*24*60*60     => "mes",
                    7*24*60*60      => "semana",
                    24*60*60        => "dia",
                    60*60           => "hora",
                    60              => "minuto",
                    1               => "segundo");
    
    $passed=time()-$dt;
    
    if($passed<5)
    {
        $output='hace 5 segundos';
    }
    else
    {
        $output=array();
        $exit=0;
        
        foreach($times as $period=>$name)
        {
            if($exit>=$precision || ($exit>0 && $period<60)) break;
            
            $result = floor($passed/$period);
            if($result>0)
            {
                $output[]=$result.' '.$name.($result==1?'':'s');
                $passed-=$result*$period;
                $exit++;
            }
            else if($exit>0) $exit++;
        }
                
        $output=implode(' y ',$output).' atrás';
    }
    
    return $output;
}

function formatTweet($tweet,$dt)
{
    if(is_string($dt)) $dt=strtotime($dt);

    $tweet=htmlspecialchars(stripslashes($tweet));

    return'
        <li class="media">
        <a href="#" class="pull-left">
            <img src="assets/img/2.png" alt="" class="img-circle">
        </a>
        <div class="media-body">
            <span class="text-muted pull-right">
                <small class="text-muted">'.relativeTime($dt).'</small>
            </span>
            <strong class="text-success">@BlogueroEc
            <p>
                '. preg_replace('/((?:http|https|ftp):\/\/(?:[A-Z0-9][A-Z0-9_-]*(?:\.[A-Z0-9][A-Z0-9_-]*)+):?(\d+)?\/?[^\s\"\']+)/i','<a href="$1" rel="nofollow" target="blank">$1</a>',$tweet).'
    
            </p>
        </div>
    </li>';

}

?>

index.php : Se encargar< de mostrar el contenido y llamar a los estilos y sus respectivos scripts para su correcto funcionamiento

<!--
 * Sistema Timeline de Twitter:
 * Php mysql jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
 *-->
<?php

define('INCLUDE_CHECK',1);
require "funciones.php";
require "conexion.php";


//ordenamos por id descendente
$q = mysql_query("SELECT * FROM table-bloguero ORDER BY ID DESC");

$timeline='';
while($row=mysql_fetch_assoc($q))
{
    $timeline.=formatTweet($row['tweet'],$row['dt']);
}

// buscamos el ultimo tweet
$lastTweet = '';
list($lastTweet) = mysql_fetch_array(mysql_query("SELECT tweet FROM table-bloguero ORDER BY id DESC LIMIT 1"));

if(!$lastTweet) $lastTweet = "No hay twees para mostrar";

// buscamos y contamos si hay archivos
$sql = "SELECT * FROM table-bloguero";
$result = mysql_query($sql);
$numero = mysql_num_rows($result); 

?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="timeline twitter bloguero-ec.com" />
    <meta name="author" content="bloguero-ec.com" />
    <!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
    <title>Timeline twitter php mysql jquery...</title>
    <!-- hoja de estilo de bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" />
    <!-- estilo por defecto -->
    <link href="css/style.css" rel="stylesheet" />
    
</head>

<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2>Timeline Twitter</h2>
                <br />
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4">
                <!-- TWEET WRAPPER START -->
                <div class="twt-wrapper">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            ¿ Que estas pasando..?
                            <span class="counter">140</span>
                         </div>
                        <div class="panel-body">
                            <form id="tweetForm" action="submit.php" method="post">
                            <textarea name="inputField" id="inputField" tabindex="1" class="form-control" placeholder="Ingrese su tweet..." rows="3"></textarea>
                            <input class="btn btn-primary btn-sm pull-rights" name="submit" type="submit" value="Tweet" disabled="disabled" />
                            </form>

                            <br />
                            <!--<a href="#" class="btn btn-primary btn-sm pull-right">Tweet</a>-->
                            <div class="clearfix"></div>
                            <span class="twt-lastes"><strong>Ultimo tweet:</strong><span id="lastTweet"> <?=$lastTweet?></span></span>
                            <div class="clearfix"></div>
                            <h4>Timeline</h4>
                            <hr />
                            <ul class="media-list">
                            <?=$timeline?>                                
                            </ul>
                            <span class="text-danger"><?php echo ''.$numero.' @tweets';  // imprimos en pantalla el número generado ?></span>
                        </div>
                    </div>
                </div>
                 <!-- fin de wrapper -->
            </div>
        </div>
    </div>
    
 
    <!-- scripts requeridos -->
    <!-- archivos jquery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <!-- script bootstrap -->
    <script src="js/bootstrap.js"></script>

</body>
</html>

script.js : Se encargará de crear funciones para recontar los caracteres y desactivar el boton de envío o activarlo cuando este se encuentre vacιo o supere los 140 carácteres. Además creará un ajax vía post…

/*
 * Sistema Timeline de Twitter:
 * Php mysql jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
*/
/*mostramos el inputField si está vacío lo desactivamos y si pasa de 140 caracteres también */
$(document).ready(function(){
                           
    $('#inputField').bind("blur focus keydown keypress keyup", function(){recount();});
    $('input.btn').attr('disabled','disabled');
    
    $('#tweetForm').submit(function(e){
    
        tweet();
        e.preventDefault();
    
    });
    
});

/*con esta funcion verificamos cuantos caracteres quedan y le asignamos un nuevo estilo de color  */
function recount()
{
    var maxlen=140;
    var current = maxlen-$('#inputField').val().length;
    $('.counter').html(current);
    
        
    if(current<0 || current==maxlen)
    {
        $('.counter').css('color','#D40D12');
        $('input.btn').attr('disabled','disabled').addClass('inact');
    }
    else
        $('input.btn').removeAttr('disabled').removeClass('inact');

    
    if(current<10)
        $('.counter').css('color','#D40D12');
    
    else if(current<20)
        $('.counter').css('color','#5C0002');

    else
        $('.counter').css('color','#cccccc');
    
}


/*realizamos la funcion de envio a envio.php y realizamos hacemos que se actualice el nuevo tweet sin recargar toda la página */
function tweet()
{
    var submitData = $('#tweetForm').serialize();
    
    $('.counter').html('<img src="assets/img/ajax_load.gif" width="16" height="16" style="padding:12px" alt="loading" />');
    
    $.ajax({
        type: "POST",
        url: "envio.php",
        data: submitData,
        dataType: "html",
        success: function(msg){
            
            if(parseInt(msg)!=0)
            {
                $('ul.media-list li:first-child').before(msg);
                $("ul.media-list:empty").append(msg);
                
                $('#lastTweet').html($('#inputField').val());
                
                $('#inputField').val('');
                recount();
            }
        }
        
    });

}

envio.php : Se encargará de realizar los ingresos a la base de datos y a su respectiva tabla…

<!--
 * Sistema Timeline de Twitter:
 * Php mysql jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
 *-->
<?php

define('INCLUDE_CHECK',1);
require "funciones.php";
require "conexion.php";


if(ini_get('magic_quotes_gpc'))
$_POST['inputField']=stripslashes($_POST['inputField']);



$_POST['inputField'] = mysql_real_escape_string(strip_tags($_POST['inputField']),$link);

if(mb_strlen($_POST['inputField']) < 1 || mb_strlen($_POST['inputField'])>140)
die("0");

mysql_query("INSERT INTO demo_twitter_timeline SET tweet='".$_POST['inputField']."',dt=NOW()");

if(mysql_affected_rows($link)!=1)
die("0");

echo formatTweet($_POST['inputField'],time());

?>

estilo.css: Est e es el estilo que le e dado utiliza bootstrap.css , bottstrap.js

/*
 * Sistema Timeline de Twitter:
 * Php mysql jQuery,
 * Copyright 2015 bloguero-ec.
 * Usese cómo mas le convenga no elimine estas líneas (http://www.bloguero-ec.com)
*/
/*=======================================
   Estilo para el index
==================================================*/
.twt-wrapper .panel-body {
    max-height:650px;
    overflow:auto;
}
.twt-wrapper .media-list .media img {
    width:64px;
    height:64px;
    border:2px solid #e5e7e8;
}
.twt-wrapper .media-list .media {
    border-bottom:1px dashed #efefef;
    margin-bottom:25px;
}

.twt-wrapper .media-list .media li:first-child{
    border-bottom:1px dashed #efefef;
    margin-bottom:25px;
    width:64px;
    height:64px;
    border:2px solid #e5e7e8;

}
.twt-lastes{
    color: #666666;
    font-size:10px;
}
.counter{
    color:#CCCCCC;
    float:right;
    font-family:Georgia,serif;
    font-size:14px;
    font-weight:bold;
    overflow:hidden;
}

La librería de boosatrap podrás descargar de su página de autor y el archivo jQuery también o utiliza Algún Hosted CDN

Tabla.sql : copiar y pegar dentro de base de datos para crear la tabla..

CREATE TABLE IF NOT EXISTS `table-bloguero` (
`id` int(10) NOT NULL,
  `tweet` varchar(140) COLLATE utf8_unicode_ci NOT NULL DEFAULT '',
  `dt` datetime NOT NULL DEFAULT '0000-00-00 00:00:00'
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Volcado de datos para la tabla `demo_twitter_timeline`
--

INSERT INTO `table-bloguero` (`id`, `tweet`, `dt`) VALUES
(1, 'Pequeña demostración de timeline de twitter hecho en php mysql jQuery...', '2015-06-02 08:33:56');

Espero sea de su agrado cualquier comentario no dudaré en responder..

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: