[Yii Framework + Dojo] Membuat Gantt Chart
July 9, 2012 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… 🙂
Komentar