[Yii Framework + Dojo] Membuat Gantt Chart

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…🙂

12 Responses to [Yii Framework + Dojo] Membuat Gantt Chart

  1. Jupri Rahman says:

    Mantap om Sabit. Btw, enakan pake ekstensi http://www.yiiframework.com/extension/dojo atau ga pake ekstensi om?

  2. saya ga pernah juga mas pake yang extension, langsung pake dojo aslinya..

  3. Jupri Rahman says:

    oh gitu. ane belum ngerti javascript, jadi agak ragu buat belajar dojo.
    Thanks atas jawabannya😀

  4. saya juga ga terlalu kuat kalo javascript gan.. apa yang di butuh, itu juga yang di search n copas.. hehe..

  5. sarah says:

    ka baris ini ko erro ya?

  6. arif says:

    $cs=yii::app()->clientScript;
    $cs->registerCSSfile(yii::app()->request->baseUrl.’/jeasyui/themes/default/easyui.css’);
    $cs->registerCSSfile(yii::app()->request->baseUrl.’/jeasyui/themes/icon.css’);
    $cs->registerCSSfile(yii::app()->request->baseUrl.’/jeasyui/demo/demo.css’);

    $cs->registerCoreScript(‘jquery’);
    $cs->registerScriptFile(yii::app()->request->baseUrl.’/jeasyui/jquery-1.7.2.min.js’, CClientScript::POS_HEAD);
    $cs->registerScriptFile(yii::app()->request->baseUrl.’/jeasyui/jquery.easyui.min.js’, CClientScript::POS_HEAD);
    $cs->registerScriptFile(yii::app()->request->baseUrl.’/jeasyui/datagrid2.js’, CClientScript::POS_HEAD);

    mas mw tanya it saya pake bwt form manggil j query knp g mncul ya jquerynya?

  7. mksd ny gan? ini utk yang mana ya? kalo jquery udah include dari yii ny kan?

  8. arif says:

    iy gan??

    kan ane donload jQuery EasyUI di yii,,
    trus ane turutin bwt script d atas tp g muncul j querynya??

    ane msi blajar yii juga

  9. saya sendiri ga pernah juga pake jeasyui mas.. tapi kalo emang ga muncul itu biasa nya kendala nya ;

    1. path nya salah
    2. ada bentrok mungkin dg css / javascript yang lain..

  10. ami says:

    mas maaf fak ngerti… tolong dong kasih satu sampel, saya dah donload dojo-release-1.9.1 trus gimana,? untuk jalanin indexnya yang mana ???? klo nggak please minta dong satu sample file lengkap di kirimin ke amirudin.daefi@gmail.com.. maklum newbiew….🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: