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.
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>
terima kasih.. :)
ReplyDeleteThanks a lot guys... nice work.
ReplyDeletehow i can find the cnd library
ReplyDeleteCan we upload videos in it
ReplyDeleteCan we upload videos in the timeline
ReplyDeletesaya sedang mencari script yang ketika timline di approve oleh setiap tahapan maka akan berjalan ke step selanjutnya. apakah ada yang seperti itu?
ReplyDeleteFatal error: Uncaught Error: Call to a member function prepare() on null in E:\xampp\htdocs\timeline\timeline\index.php:6 Stack trace: #0 {main} thrown in E:\xampp\htdocs\timeline\timeline\index.php on line 6
ReplyDeletehow to fix this error
Fatal error: Uncaught Error: Call to a member function prepare() on null in E:\xampp\htdocs\timeline\timeline\index.php:6 Stack trace: #0 {main} thrown in E:\xampp\htdocs\timeline\timeline\index.php on line 6
ReplyDeletehow to fix this error