Webslesson: timeline php mysql

If you have used Social Media website like Facebook, then in that when page has been load in web page then first it has load content loading placeholder and then after it has load content on web page. It has been use Timeline feature of web development for display content on web page. So, when first page has been load then in timeline skeleton first has been load with loading placeholder and then after it has load content on web page. After this when we have scroll web page, then it has again load more data. But before loading of more data on page scroll, first it has load content loading placeholder in timeline, and then after it has load dynamic content in timeline. On every page scroll it has load chunks of records in timeline. This process will be continues, still there is data in database available.

So, in this tutorial, we will make Facebook style timeline content loading placeholder by using PHP script, and then after we will load data on web page by using PHP script with Ajax, Mysql database and jQuery. When we have scroll web page for view more data, then first it has load timeline content loading placeholder by using CSS with jQuery function, and then after by using Ajax it has send request to PHP script for fetch next some records from Mysql Database. This process will continue execute on every page scroll. Once there is no data available in Mysql database then it will display no more data available for display message will be display on web page.

If you are web developer, then you should know "Timeline is a great data visualization tool. It mainly used for display data in more visualize manner. There are many website has been used Timeline feature for display data on web page. Timeline has been provide simple, logical way tell your data on web page. It has represent your data in chronological sequence, which are related to event which has been in particular time line. So, readers can simply understand the relationship of each event when occurs. So, here we have use Timeline concept for load data on web page.

But here we have not use only Timeline concept, but here we have use Pagination feature has been used in different manner. Here we have not make pagination link on web page, but we will chunks of data on every page scroll. So, here we have not load all data at a time in timeline format on web page. But we have load only some data which has been visible on web page. And when we have scroll web page, then next data will be load on web page in timeline. For this load more data on scroll we have use Ajax request for fetch data from web page and display on web page in timeline. So, here we have merge the concept of Timeline, Load more data and content placeholder and make Facebook style load data in Timeline with PHP script, Mysql database, Ajax and jQuery. Below you can find complete source code.

View Demo

Source Code

index.php


<!DOCTYPE html>
<html>
  <head>
    <title>Facebook Style Load Data in Timeline with PHP Mysql Ajax</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
    <style>
    .timeline {
      list-style: none;
      padding: 20px 0 20px;
      position: relative;
    }
    .timeline:before {
      top: 0;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 3px;
      background-color: #eeeeee;
      left: 50%;
      margin-left: -1.5px;
    }
    .timeline > li {
      margin-bottom: 20px;
      position: relative;
      width: 50%;
      float: left;
      clear: left;
    }
    .timeline > li:before,
    .timeline > li:after {
      content: " ";
      display: table;
    }
    .timeline > li:after {
      clear: both;
    }
    .timeline > li:before,
    .timeline > li:after {
      content: " ";
      display: table;
    }
    .timeline > li:after {
      clear: both;
    }
    .timeline > li > .timeline-panel {
      width: 95%;
      float: left;
      border: 1px solid #d4d4d4;
      /*border-radius: 2px;*/
      /*padding: 20px;*/
      position: relative;
      -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    }

    .timeline > li > .timeline-panel:before {
      position: absolute;
      top: 26px;
      right: -15px;
      display: inline-block;
      border-top: 15px solid transparent;
      border-left: 15px solid #ccc;
      border-right: 0 solid #ccc;
      border-bottom: 15px solid transparent;
      content: " ";
    }
    .timeline > li > .timeline-panel:after {
      position: absolute;
      top: 27px;
      right: -14px;
      display: inline-block;
      border-top: 14px solid transparent;
      border-left: 14px solid #fff;
      border-right: 0 solid #fff;
      border-bottom: 14px solid transparent;
      content: " ";
    }
    .timeline > li > .timeline-badge {
      color: #fff;
      width: 24px;
      height: 24px;
      line-height: 50px;
      font-size: 1.4em;
      text-align: center;
      position: absolute;
      top: 16px;
      right: -12px;
      /*background-color: #999999;*/
      z-index: 100;
      /*
      border-top-right-radius: 50%;
      border-top-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;
      */
    }
    .timeline > li.timeline-inverted > .timeline-panel {
      float: right;
    }
    .timeline > li.timeline-inverted > .timeline-panel:before {
      border-left-width: 0;
      border-right-width: 15px;
      left: -15px;
      right: auto;
    }
    .timeline > li.timeline-inverted > .timeline-panel:after {
      border-left-width: 0;
      border-right-width: 14px;
      left: -14px;
      right: auto;
    }
    .timeline-badge > a {
      color: #C5C7C5 !important;
    }
    .timeline-badge a:hover {
      color: #000 !important;
    }
    .timeline-title {
      margin-top: 0;
      color: inherit;
    }
    .timeline-body{
        padding:15px;
    }
    .timeline-body > h1{
        font-size:22px;
    }
    .timeline-body > h2{
        font-size: 18px;
        font-weight: 700;
        margin:0;
    }
    .timeline-body > p,
    .timeline-body > ul {
        /*padding:20px;
        margin-bottom: 0;*/
        padding:0;
        margin-bottom: 10px;
    }
    .timeline-body > p + p {
      margin-top: 5px;
    }
    .timeline-footer{
        padding:20px;
        background-color:#f4f4f4;
    }
    .timeline-footer > a{
        cursor: pointer;
        text-decoration: none;
    }

    .timeline > li.timeline-inverted{
      float: right; 
      clear: right;
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .timeline > li:nth-child(2){
      margin-top: 60px;
    }
    .timeline > li.timeline-inverted > .timeline-badge{
      left: -12px;
    }

    @media (max-width: 767px) {
        ul.timeline:before {
            left: 40px;
        }

        ul.timeline > li {
          margin-bottom: 20px;
          position: relative;
          width:100%;
          float: left;
          clear: left;
        }
        ul.timeline > li > .timeline-panel {
            width: calc(100% - 90px);
            width: -moz-calc(100% - 90px);
            width: -webkit-calc(100% - 90px);
        }

        ul.timeline > li > .timeline-badge {
            left: 28px;
            margin-left: 0;
            top: 16px;
        }

        ul.timeline > li > .timeline-panel {
            float: right;
        }

        ul.timeline > li > .timeline-panel:before {
          border-left-width: 0;
          border-right-width: 15px;
          left: -15px;
          right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
          border-left-width: 0;
          border-right-width: 14px;
          left: -14px;
          right: auto;
        }
        
      .timeline > li.timeline-inverted{
        float: left; 
        clear: left;
        margin-top: 30px;
        margin-bottom: 30px;
      }

      .timeline > li.timeline-inverted > .timeline-badge{
        left: 28px;
      }
    }
    </style>
  </head>
  <body>
    <br />
    <div class="container">
      <h3 align="center">Facebook Style Load Data in Timeline with PHP Mysql Ajax</h3>
      <br />
      <div class="card">
        <div class="card-header">Dynamic Data</div>
        <div class="card-body">
          <ul class="timeline">

            <li class="clearfix" id="clearfix_id" style="float: none;"></li>
          </ul>
          <span id="no_more_data"></span>
        </div>
      </div>
      <br />
      <br />
    </div>
  </body>
</html>
<script>
  $(document).ready(function(){

    var action = 'inactive';

    function load_timeline_data(last_id = '')
    {      
      $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{last_id:last_id},
        dataType:'json',
        success:function(data)
        {
          setTimeout(function(){
            $('.removeTimeline').remove();
            $('#clearfix_id').remove();
            $('.timeline').append(data.timeline_output);
            if(data.no_data_output != '')
            {
              $('#no_more_data').html(data.no_data_output);
            }
            action = 'inactive';
          }, 1000);
        }
      });
    }

    function make_skeleton()
    {
      var output = '';
      $('#clearfix_id').remove();
      for(var count = 0; count < 4; count++)
      {
        temporary_class = '';
        if(count%2 != 0)
        {
          temporary_class = 'class="timeline-inverted removeTimeline"';
        }
        else
        {
          temporary_class = 'class="removeTimeline"';
        }

        output += '<li '+temporary_class+'>';
        output += '<div class="timeline-badge primary"><a><i class="fa fa-dot-circle-o" aria-hidden="true"></i></a></div>';
        output += '<div class="timeline-panel">';
        output += '<div class="timeline-heading"></div>';
        output += '<div class="timeline-body">';
        output += '<div class="ph-item">';
        output += '<div class="ph-col-4">';
        output += '<div class="ph-picture"></div>';
        output += '</div>';
        output += '<div>';
        output += '<div class="ph-row">';
        output += '<div class="ph-col-12 big"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '<div class="ph-col-12"></div>';
        output += '</div></div></div>';
        output += '</div>';
        output += '</div></div></li>';
      }
      output += '<li class="clearfix" id="clearfix_id" style="float: none;"></li>';
      $('.timeline').append(output);
    }

    if(action == 'inactive')
    {
      make_skeleton();

      setTimeout(function(){ 
        load_timeline_data(); 
      }, 3000);
    }

    $(window).scroll(function(){
      var last_id = $('#clearfix_id').data('last_id');
      if(last_id != '')
      {
        if($(window).scrollTop() + $(window).height() > $(".timeline").height() && action == 'inactive')
        {
          action = 'active';
          make_skeleton();

          setTimeout(function(){ 
            load_timeline_data(last_id); 
          }, 5000);
        }
      }
    });

  });
</script>

fetch.php


<?php

//fetch.php;

$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

if(isset($_POST["last_id"]))
{
 //sleep(5);
 if($_POST["last_id"] != '')
 {
  $query = "
  SELECT * FROM tbl_post 
  WHERE id < '".$_POST["last_id"]."'
  ORDER BY id DESC 
  LIMIT 4
  ";
 }
 else
 {
  $query = "
  SELECT * FROM tbl_post 
  ORDER BY id DESC 
  LIMIT 4
  ";
 }

 $statement = $connect->prepare($query);

 $statement->execute();

 $total_row = $statement->rowCount();

 $output = '';
 $not_found = '';
 $last_id = 0;
 if($total_row > 0)
 {
  $result = $statement->fetchAll();
  $count = 0;
  $class = '';
  foreach($result as $row)
  {   
   if($count%2 != 0)
   {
    $class = 'class="timeline-inverted"';
   }
   else
   {
    $class = '';
   }
   $output .= '
   <li '.$class.'>
    <div class="timeline-badge primary"><a><i class="fa fa-dot-circle-o" aria-hidden="true"></i></a></div>
    <div class="timeline-panel">
     <div class="timeline-heading">
      <div class="col-md-12" style="padding:15px; background-color:#eee; border-bottom:#ddd 1px solid;"><h3>'.$row["post_title"].'</h3></div>
     </div>
     <div class="timeline-body">
      <div class="row">
       <div class="col-md-4">
        <img src="images/'.$row["post_image"].'" class="img-thumbnail img-fluid" />
       </div>
       <div class="col-md-8">
        <p>'.$row["post_description"].'</p>
       </div>
      </div>
     </div>
    </div>
   </li>';
   $last_id = $row["id"];
   $count++;
  }
 }
 else
 {
  $not_found = '
  <div align="center" class="alert alert-info">No more data found</div>
  ';
 }

 $output .= '<li class="clearfix" id="clearfix_id" data-last_id="'.$last_id.'" style="float: none;"></li>';

 $test_output = array(
  'timeline_output' => $output,
  'no_data_output' => $not_found
 );

 echo json_encode($test_output);
}

?>

If you have follow above source code, then you can build Facebook style Load content placeholder in Timeline and then after some time it will load data by using PHP script with Ajax. If you want to get complete source code file, you can email us at webslesson@gmail.com.

From this post you can learn new things like How to make dynamic timeline functionality for your websites in PHP. Here we have discuss how can we display our past event on website in timeline format. For this here we have decide name make one tutorial in which we have learn how can we will display our past event in timeline format. For this we have figureout one Jquery timeline plugin. With the help of this plugin and our PHP scripting code we have make dynamic timeline in PHP and Mysql. So, How can we create timeline in PHP. This feature we have discuss in this post.

If we want to make dynamic timeline in PHP, then first we want to store our past event data in our mysql database. So, by using this PHP code we can fetch data from Mysql database and display on webpage. Here we have fetch data which want to display in timeline format. So, here we can create dynamic timeline in PHP with help of Mysql database. In many of website we can see timeline on their website. So, here we have already make something like this type of feature. With help of PHP and Mysql we can solve our server side part.

But for client side, we want to display timeline in stylish graphical format. For this we have use Jquery Timeline plugin. With help of this plugin we can display timeline in horizontal direction or vertical direction which is depend on us. This Jquery Timeline plugin make responsive timeline which it will easily fit on any devices like Desktop computer, laptop, tablet or even mobile device also. So, by using this plugin we can not only make horizontal or vertical direction timeline but also it has make responsive timeline. So, Here we have use this Jquery Timeline plugin with PHP and Mysql and make dynamic timeline. Below you can find complete source code of How to create timeline in PHP and online demo also.

Vertical Timeline Demo

Horizontal Timeline Demo

Source Code


<?php

//index.php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");
$query = "SELECT * FROM timeline ORDER BY id ASC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

?>

<html>  
    <head>  
        <title>How to Create Dynamic Timeline in PHP</title>
        <script src="js/jquery.js"></script>
        <script src="js/timeline.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/timeline.min.css" />
  
    </head>  
    <body>  
        <div class="container">
   <br />
   <h3 align="center"><a href="">How to Create Dynamic Timeline in PHP</a></a></h3><br />
   <div class="panel panel-default">
    <div class="panel-heading">
                    <h3 class="panel-title">Our Journey</h3>
                </div>
                <div class="panel-body">
                 <div class="timeline">
                  <div class="timeline__wrap">
                   <div class="timeline__items">
                   <?php 
                   foreach($result as $row)
                   {
                   ?>
                    <div class="timeline__item">
                     <div class="timeline__content">
                      <h2><?php echo $row["year"]; ?></h2>
                      <p><?php echo $row["comment"];?></p>
                     </div>
                    </div>
                   <?php
                   }
                   ?>
                   </div>
                  </div>
                 </div>
                </div>
   </div>
  </div>
    </body>  
</html>

<script>
$(document).ready(function(){
 jQuery('.timeline').timeline({
  //mode: 'horizontal',
  //visibleItems: 4
  //Remove this comment for see Timeline in Horizontal Format otherwise it will display in Vertical Direction Timeline
 });
});
</script>

Download

Webslesson

PHP, Node.js, React.js, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Tuesday, 11 February 2020

Facebook Style Load Data in Timeline with PHP Mysql Ajax

Source Code

index.php

fetch.php

Monday, 21 May 2018

How to Create Dynamic Timeline in PHP

Source Code

Online Tool

Popular Posts