PHP'de Timeline Nasıl Oluşturulur - Seditio Yazılım - Seditio CMS Türkiye

Yayınımız yeniliklerle beraber yeni sitemizden devam ediyor. Seditio.com.tr takip edin.

User profile picture

Kaan

Seditio CMS

PHP'de Timeline Nasıl Oluşturulur

Bu gönderiden PHP'de web siteleriniz için dinamik zaman çizelgesi işlevi nasıl yapılır gibi yeni şeyler öğrenebilirsiniz.  Bunun için burada, geçmiş olayımızı zaman çizelgesi formatında nasıl göstereceğimizi öğrendiğimiz bir öğretici oluşturmaya karar verdik. Bunun için bir Jquery zaman çizelgesi eklentisi bulduk. Bu eklentinin ve PHP betik kodumuzun yardımıyla PHP ve Mysql'de dinamik zaman çizelgesi oluşturduk. Öyleyse, PHP'de nasıl zaman çizelgesi oluşturabiliriz? 

PHP'de dinamik zaman çizelgesi yapmak istiyorsak, önce geçmiş olay verilerimizi mysql veritabanımızda saklamak istiyoruz. Yani, bu PHP kodunu kullanarak Mysql veritabanından veri alabilir ve web sayfasında görüntüleyebiliriz. Burada, zaman çizelgesi biçiminde görüntülemek isteyen verileri getirdik. Yani burada Mysql veritabanı yardımıyla PHP'de dinamik zaman çizelgesi oluşturabiliriz. Çoğu web sitesinde zaman çizelgesini web sitelerinde görebiliriz. Yani, burada zaten bu tür bir özellik gibi bir şey yaptık. PHP ve Mysql yardımıyla sunucu tarafımızı çözebiliriz.

Ancak müşteri tarafı için, zaman çizelgesini şık grafik biçiminde görüntülemek istiyoruz. Bunun için Jquery Timeline eklentisini kullanıyoruz. Bu eklentinin yardımıyla zaman çizelgesini bize bağlı olan yatay yönde veya dikey yönde görüntüleyebiliriz. Bu Jquery Zaman Çizelgesi eklentisi, Masaüstü bilgisayar, dizüstü bilgisayar, tablet ve hatta mobil cihaz gibi herhangi bir cihaza kolayca sığacak duyarlı zaman çizelgesi oluşturur. Yani, bu eklentiyi kullanarak sadece yatay veya dikey yönde zaman çizelgesi yapmakla kalmıyor, aynı zamanda duyarlı zaman çizelgesi de oluşturabiliyoruz. Yani, burada bu Jquery Timeline eklentisini PHP ve Mysql ile kullanıyoruz ve dinamik bir zaman çizelgesi oluşturuyoruz. Aşağıda, PHP'de zaman çizelgesi nasıl oluşturulur ve ayrıca çevrimiçi demo'nun eksiksiz kaynak kodunu bulabilirsiniz.

Örnek Kodlar;

<?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>

Demo Dosyaları Ekten indirebilirsiniz.


php'de timeline nasıl oluşturulur

Yorumlar

Henüz yorum yapılmamıştır.