[Yii Framework + Dojo] Membuat Gantt Chart

July 9, 2012 by 12 Comments

Coba-coba cari cara untuk menerapkan gantt chart di salah satu project, cukup banyak ketemu library tetapi kebanyakan berbayar dan sekalinya gratis hasilnya kurang memuaskan. Tapi akhir nya ketemu gantt chart yang telah disediakan dari sebuah library sakti yaitu DOJO. Selain tampilan yang cukup baik, DOJO juga gratis digunakan.. Berikut tampilan gantt chart yang dibuat dengan DOJO :

Lalu bagaimana cara membuatnya?

Pertama-tama, silahkan downloadn dojo dari link yang sudah saya berikan sebelumnya. Setelah itu extract dan pindahkan hasil extract nya ke dalam aplikasi anda. Saya sendiri memindahkannya ke “namaaplikasi/js/dojo”. Kemudian buatlah sebuah action yang akan menanmpilkan gantt chart :

public function actionGantt()
{
  $this->render('gantt');
}

Action di atas adalah action yang akan memanggil halaman “gantt.php” yang di dalamnya telah kita sisipkan code-code untuk memanggil gantt chart. Kemudian buatlah sebuah view dengan nama “gantt.php” lalu masukkan code berikut :

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/js/dojotool/dojo/resources/dojo.css" /> // memanggil css pada library dojo
<link type="text/css" rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/js/dojotool/dojox/gantt/resources/gantt.css"> // memanggil css pada library gantt chart
<?php 
Yii::app()->getClientScript()->registerCoreScript('jquery'); 
 $cs=Yii::app()->getClientScript();
 $cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/dojotool/dojo/dojo.js');  // mendefinisikan library dojo agar dapat kita pakai fungsi-fungsinya
?>
<script type="text/javascript">
  dojo.require("dojo.parser");  // memanggil fungsi dojo.parser
  dojo.require("dojox.gantt.GanttChart"); // memanggil fungsi dojo.gantt.GanttChart
  dojo.addOnLoad(function(){  // menjalankan fungsi ketika load halaman
     var projectDev = new dojox.gantt.GanttProjectItem({
       id: 1,
       name: "Development Project",
       startDate: new Date(2006, 5, 11)
     });  // membuat sebuah project

     var taskRequirement = new dojox.gantt.GanttTaskItem({
        id: 1,
        name: "Requirement",
        startTime: new Date(2006, 5, 11),
        duration: 50,
        percentage: 50,
        taskOwner: "Jack"
     });  // membuat sebuah task baru yang akan masuk di dalam gantt chart
     var taskAnalysis = new dojox.gantt.GanttTaskItem({
        id: 2,
        name: "Analysis",
        startTime: new Date(2006, 5, 18),
        duration: 40,
        percentage: 80,
        previousTaskId: "1",
        taskOwner: "Michael"
     });
     var taskDesign = new dojox.gantt.GanttTaskItem({
        id: 3,
        name: "Design",
        startTime: new Date(2006, 5, 18),
        duration: 60,
        percentage: 80,
        previousTaskId: "1",
        taskOwner: "Jason"
     });
     var taskDetailDesign = new dojox.gantt.GanttTaskItem({
        id: 4,
        name: "Detail design",
        startTime: new Date(2006, 5, 18),
        duration: 30,
        percentage: 50,
        previousTaskId: "1",
        taskOwner: "Michael"
     });
     var taskDevelopmentDoc = new dojox.gantt.GanttTaskItem({
        id: 5,
        name: "Development doc",
        startTime: new Date(2006, 5, 20),
        duration: 20,
        percentage: 10,
        previousTaskId: "1",
        taskOwner: "Rock;Jack"
     });

    projectDev.addTask(taskRequirement);  // task-task yang sudah dimasukkan di input ke dalam project
    projectDev.addTask(taskAnalysis);
    projectDev.addTask(taskDesign);
    projectDev.addTask(taskDetailDesign);
    projectDev.addTask(taskDevelopmentDoc);

   var ganttChart = new dojox.gantt.GanttChart({
       height: 400,
       withResource: false
   }, "gantt");  // memanggil fungsi gantt chart dan menampilkannya di sebuah tag html yang memiliki id="gantt"
   ganttChart.addProject(projectDev); // memasukkan sebuah project ke dalam gantt chart yang telah kita buat
   ganttChart.init();

 });
</script>
<body class="claro">
   <div class="ganttContent">
     <div id="gantt"></div>
  </div>
</body>

Setelah anda membuat code tersebut, anda akan dapat langsung melihat hasilnya pada browser anda. Nah, pada contoh di atas kita hanya menggunakan data statis yang kita ketik langsung di code. Bagaimana jika ingin menampilkan data yang ada dari database? Baiklah, mari kita asumsikan kita punya nilai-nilai dari database yang ingin kita masukkan ke dalam gantt chart. Anggaplah saya punya sebuah nilai bernama $data yang isinya adalah kumpulan nilai yang akan saya tampilkan. Maka untuk menyisipkannya ke dalam gantt chart, kita dapat membuat nya seperti berikut :

dojo.addOnLoad(function(){
   var projectDev = new dojox.gantt.GanttProjectItem({
      id: 1,
      name: "Judul Project",
      startDate: new Date(2000,01,01),
   });
  <?php 
     foreach ($data as $i=>$ii)
     {
  ?>
         var taskitem = new dojox.gantt.GanttTaskItem({
             id: <?php echo $ii['id']; ?>,
             name: "<?php echo $ii['nama']; ?>",
             startTime: new Date("<?php echo $ii['startDate'] ?>"),
             duration: "<?php echo $ii['date']['durasi']; ?>",
             percentage: 100,
          });

          projectDev.addTask(taskitem);

  <?php }?>

 var ganttChart = new dojox.gantt.GanttChart({
    withResource:false,
    readOnly: true, 
    hight:400,
    width:650,
 }, "gantt");

 ganttChart.addProject(projectDev);
 ganttChart.init();
 });

Selesai… Selamat mencoba..

Semoga membantu… 🙂

Filed under Pemrograman Tagged with , ,