Sisi Client

Pada bagian ini saya akan jelaskan secara detil cara implementasi dari konsep dilakukan pada Sisi Client. Topiknya sebagian besar akan membahas penggunaan bahasa pemrograman JavaScript yang digunakan untuk visualisasi Kaidah Proses pada bagian Skema dari Situs Chetabahana.

Table of Contents Ruang Lingkup Objek dan Dimensi Grafik dan Metoda Kerja Target Kerja dan Hasil Ukur Penerapan Penerapan di Sisi Type Penerapan di Sisi Skema Penerapan di Sisi Kaidah

Ruang Lingkup

Implementasi Ruang Lingkup di Sisi Client diterapkan dengan cara Klik di Skema dari Situs Chetabahana. Visualisasi nya diatur via Type Konsep dan Type Proses dari Tombol Status.

Detilnya adalah seperti berikut ini:

Objek dan Dimensi

• Objek dan Dimensi akan diterapkan di Bagan Kerja
• Visualisasi dari Bagan Kerja menggunakan skema Sequence dengan Type Konsep.
• Visualisasi dari Bagan Kerja ke Diagram Alir dan Diagram Proses diatur via Type Proses.

Grafik dan Metoda Kerja

• Grafik dan Metoda Kerja akan diterapkan di Diagram Alir
• Visualisasi dari Diagram Alir menggunakan skema Flowchart.
• Visualisasi Diagram Alir dari Objek dan Dimensi diatur via skema Sequence.

Target Kerja dan Hasil Ukur

• Target Kerja dan Hasil Ukur akan diterapkan di Diagram Proses
• Visualisasi dari Diagram Proses menggunakan skema Railroad.
• Visualisasi Diagram Proses dari Objek dan Dimensi diatur via skema Sequence.
• Visualisasi Diagram Proses dari Grafik dan Metoda Kerja diatur via skema Flowchart.

Penerapan

Pengembangan pemrograman dari Ruang Lingkup bisa dilihat via jsFiddle seperti terlihat di gambar berikut. Hasilnya ditempatkan di folder js di Repository situs Chetabahana.

Penerapan di Sisi Type

Type nya di bagian berikut ini:

    var diagram;
    var select = $(".theme").val();
    
    var type = (!draw.type)? 'sequence': draw.type;    
    if (select=='hand' && type!='flowchart') type='sequence';

Penerapan di Sisi Skema

Trigger nya di bagian berikut ini:

       } finally {
       
          draw.type = type;
          draw.checkReady();
          
       }	

Eksekusi nya di bagian berikut ini:

checkReady : function() {
  
    if (!$('.diagram').find('svg')[0]) {
      window.requestAnimationFrame(draw.checkReady);
      
    } else {
    
      switch(draw.type) {
      
        case 'sequence':
          ... (visulisasi: Objek dan Dimensi)
        break;
          
        case 'flowchart':
          ... (visulisasi: Grafik dan Metoda Kerja)
        break;

        case 'railroad':
         ... (visulisasi: Target Kerja dan Hasil Ukur)
        break;

Penerapan di Sisi Kaidah

Pemilihan Kaidah Bahasa di sisi skema diatur seperti ini:

    var js = ... (pemilihan bahasa)
    $.getScript(js, function( data, textStatus, jqxhr ) {  
        ... (kaidah bahasa)
    });

Seperti telah diuraikan sebelumnya maka penerapan di sisi skema dari masing² bahasa akan ditempatkan di repository dari wiki ini. Detilnya akan dibahas seperti berikut ini:

• Objek dan Dimensi diterapkan di Bagan Kerja via kaidah bahasa Jison.
• Grafik dan Metoda Kerja diterapkan di Diagram Alir via kaidah bahasa Raphael.
• Target Kerja dan Hasil Ukur diterapkan di Diagram Proses via kaidah bahasa CoffeeScript.