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

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');

Esta versión está desactualizada, el administrador desactivó su demostración , su código queda solo como referencia

Actualización de Timeline de Twitter hecho en Php Mysql MVC su demostración aquí

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

DESCARGAR

Relacionado