Cara Membuat Timeline Horizontal atau Vertical Menggunakan Timeline.js

26/05/2019    Shelli Ripati    55     Website

Cara Membuat Timeline Horizontal atau Vertical

Timeline fitur menarik yang mampu menampilkan suatu perjalanan waktu yang berisi informasi atau data dalam bentuk grafik atau biasa disebut sebagai lini waktu. Pada artikel kali ini saya akan membahas tentang Cara Membuat Timeline Horizontal atau Vertical dengan menggunakan plugin timeline.js. Sebelum memulainya teman-teman bisa kunjungi halaman timeline.js disini atau bisa langsung download source code disini.

Jika sudah didownload filenya maka teman-teman bisa memulai Cara Membuat Timeline Horizontal atau Vertical dengan mencantumkan beberapa link seperti bootstrap untuk tampilan, library jquery dan timeline css serta timeline js untuk membuat timelinenya. Dan berikut ini beberapa alamat file dan link yang dibutuhkan.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="timeline-master/dist/js/timeline.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="timeline-master/dist/css/timeline.min.css" />

Jika sudah selesai maka teman-teman bisa melakukan select data atau ambil data dari database yang sudah ada seperti script di bawah ini.

<?php

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

$query = "SELECT * FROM shelli_timeline ORDER BY id ASC";

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

$statement->execute();

$result = $statement->fetchAll();

?>

Jika sudah selesai maka dilanjutkan dengan membuat struktur html dan langsung melakukan perulangan untuk mencetak data dari database seperti berikut.

<body> 

               <div class="container">

                 <h3 align="center"><a href="">How to Create Dynamic Timeline in PHP</a></a></h3>

                 <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["tahun"]; ?></h2>

                  <p><?php echo $row["comment"];?></p>

                 </div>

                </div>

               <?php } ?>

               </div>

              </div>

            </div>

        </div>

    </div>

 </div>

</body> 

Dan terakhir adalah function untuk mengaktifkan timelinenya. Untuk modenya teman-teman bisa ubah horizontal atau vertical bentuk timeline yang akan ditampilkan. Dan visibleItems untuk mengatur jumlah data yang tampil di timeline.

<script>

$(document).ready(function(){

 jQuery('.timeline').timeline({

  mode: 'horizontal',  //tipe timeline horizontal atau vertical

  visibleItems: 5 //jumlah data dalam timeline

 });

});

</script>

Jika dibuka di halaman browser maka akan tampil seperi pada gambar di bawah ini.

Cara Membuat Timeline Horizontal atau Vertical Menggunakan Timeline.js

Demikian artikel tentang Cara Membuat Timeline Horizontal atau Vertical. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More