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.
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.
Buen dia, podrian enviarme el codigo fuente es tan amable, gran trabajo!!, julianandre0327@hotmail.com
ReplyDeletehi webslesson dear , thank you for toturials , please learn to vuejs and pure php for load page datas and pagination and route adresses , so thank you dear
ReplyDeletePlease provide SQL for this tutorial.
ReplyDeleteOn the other hand, businesses that procedure Online Payments can help their pay much more since online shoppers will in general purchase more items administrations due to the simplicity, accommodation, and assurance offered by the protected online payment gateway.
ReplyDeleteIf the data is not yet downloaded, the user scrolls the mouse bar, the given data will be multiplied, and last forever
ReplyDeleteyes< this is the issue with
Delete