[C#] Membuat Graf Menggunakan Zedgraph

Terkadang untuk menyatakan sesuatu itu tidak efektif jika hanya menggunakan kata-kata, tetapi lebih efektif dan jelas jika menggunakan suatu graf. contohnya kita ingin menampilkan jumlah penduduk dari tahun 1990 sampai sekarang 2012. tentunya anda semua tau bagaimana membuat suatu graf secara konvensional, lalu bagaimanakah jika di dalam dunia pemrograman?

Untuk membuat suatu graf tentu banyak yang harus kita siapkan mulai dari sumbu X danY, angkanya mulai dari berapa sampe berapa, kemudian bagaimana kita menghubungkan titik satu ke titik yang lainnya, dari pada ribet ngurusin yang begituan mendingan kita menggunakan library aja namanya ZedGraph.dll (cari aja di embah google).

kalo udah punya librarynya tinggal kita tambahkan ke project kita, caranya gini :

  1. pilih add references d bawah project menu kita,
  2. pilih browse button dan cari dimana anda meletakan library ZedGraph kemudian klik button OK.

kemudian untuk menambahkan ZedGraph control  pada project anda,

  1. klik kanan pada menu Toolbox,
  2. pilih Choose Items kemudian klik button browse dan cari dimana anda meletakan library ZedGraph kemudian tambahkan. Jika berhasil, anda akan melihat pilihan ZedGraphContol di menu Toolbox anda.

nah sekarang tinggal bagian codingnya, buatlah suatu form dan tambahkan ZedGraphControl  ubah namanya menjadi zg1, kemudian klick 2x formnya tambahkan code seperti dibawah ini :

GraphPane myPane = zg1.GraphPane;
myPane.Title.Text = "My Graph";
 myPane.XAxis.Title.Text = "Sumbu X";
 myPane.YAxis.Title.Text = "Sumbu Y"
 PointPairList list = new PointPairList();
for (int x = 1; x < =10; x++)
 { 
  double y = x;
  list.Add(x, y);
 }
LineItem myCurve = myPane.AddCurve("Fitnes", list, Color.Blue,
 SymbolType.Circle);
 }
 myPane.Fill = new Fill(Color.White, Color.FromArgb(220, 220, 255), 45F);
//untuk menampilkan nilai titik
 zg1.IsShowPointValues = true;
 zg1.AxisChange();

jangan lupa tambahkan using ZedGraph pada program anda.

[Yii Framework] Refresh Data Pada UI Tanpa Refresh Halaman (seperti Facebook and Twitter)

Jika kita lihat facebook dan twitter, maka kita sering melihat data status teman-teman kita yang akan terupdate secara otomatis sesuai data terbaru tanpa kita perlu me-refresh/reload halaman pada browser kita.. Saya akan coba memaparkan cara pembuatan seperti ini dengan menggunakan Yii Framework.. tidak tahu apakah metode yang digunakan sama dengan yang ada di FB/Twitter tapi tidak ada salahnya jika kita membuat hal yang serupa dengan pemikiran kita sendiri..

Jadi sebenarnya yang kita lakukan adalah me-refresh data dengan menggunakan AJAX seperti pada postingan sebelumnya dengan menggunakan interval waktu.. Hanya saja kita modifikasi perintahnya untuk merefresh data terbaru yang ada pada database.. Saya akan gunakan contoh kita me-refresh halaman admin agar CGridView yang ada senantiasa menampilkan data terupdate.  Saya asumsikan pada halaman admin terdapat CGridview seperti berikut :

<?php $this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'category-grid',
   'dataProvider'=>$model->search(),
   'filter'=>$model,
   'columns'=>array(
      'data1',
      'data2',
       array(
          'class'=>'CButtonColumn',
       ),
   ),
)); ?>

Kemudian agar data bisa otomatis terupdate baik di refresh atau tidak, tambahkan script berikut pada bagian atas code view tersebut :

<script type="text/javascript">
  setInterval(   // fungsi untuk menjalankan suatu fungsi berdasarkan waktu
    function(){
        $.fn.yiiGridView.update('category-grid', {   // fungsi untuk me-update data pada Cgridview yang memiliki id=category_grid
        data: $(this).serialize()
    });
     return false;
 }, 
 10000  // fungsi di eksekusi setiap 10 detik sekali
);
</script>

Penjelasan : anda dapat melihat penjelasannya pada baris-baris tersebut..

Okeh, selesai…. Selamat mencoba..

Semoga membantu…

[Yii Framework] Auto Save Data By Time

Anda pernah ng blog di wordpress atau blogspot? yah.. jika anda membuat sebuah postingan baru, maka postingan anda akan selalu disimpan secara otomatis oleh sistem mereka walaupun anda belum menekan tombol save. Nah, bagaimana cara membuatnya pada Yii Framework untuk website anda? Berikut caranya :

Pertama buatlah sebuah tabel beserta genarate model dan operasi CRUD nya pada Yii Framework. Setelah itu pada view anda akan ada tampilan file create.php, view.php, update.php, dan lain-lain.. Karena kita ingin ingin melakukan otomatis penyimpanan berdasarkan waktu, maka pada file “create.php”, tambahkan code berikut :

<script type="text/javascript">
  setInterval(
     function(){
        var statusnya=$("#statuta").val(); // mengetahui status apakah sedang ada fungsi autosave yang sedang berjalan
        if(statusnya!="on")  // jika tidak ada fungsi yang berjalan, maka jalankan fungsi
        {
           $("#btn-save").attr("disabled",true);  // selama fungsi berjalan, user tidak bisa menekan tombol save
           var data1 = $("#Namamodel_data1").val();  // menangkap nilai dari form input
           var data2 = $("#Namamodel_data2").val();
           $.ajax({
              url: "<?php echo Yii::app()->createUrl('namaController/namaAction')?>",  // memanggil sebuah fungsi untuk autosave
              type:"post",
              dataType :"json",
              data:{"data1" : data1,"data2":data2},
              beforeSend: function() {
                    $("#statuta").val("on");
              },
              success : function(data){
                    $("#statuta").val("off");
                    if(data.satu.length > 0){
                       window.location=data.satu;  // jika data berhasil disimpan, maka akan redirect
                    }
                    else{
                       $("#btn-save").attr("disabled",false);
                    }
              },
          });
       }
    }, 
    15000  // operasi auto save dilakukan 15 detik sekali
  );
</script>

Lalu pada form anda akan ada code form seperti berikut :

<?php echo CHtml::hiddenField('statuta','');?>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
   'enableAjaxValidation'=>true,
)); ?>
    <?php echo CHtml::submitButton('Save',array('id'=>'btn-save')); ?>
    <p class="note">Fields with <span class="required">*</span> are required.</p>
    <?php echo $form->errorSummary($model); ?>
    <table class="nostyle">
       <tbody>
         <tr>
            <td class="va-top"><?php echo $form->labelEx($model,'data1'); ?></td>
            <td><?php echo $form->textArea($model,'data1',array('rows'=>6, 'cols'=>50)); ?>
            <?php echo $form->error($model,'data1'); ?></td>
        </tr>
        <tr>
           <td class="va-top"><?php echo $form->labelEx($model,'data2'); ?></td>
           <td><?php echo $form->textArea($model,'data2',array('rows'=>6, 'cols'=>50)); ?>
           <?php echo $form->error($model,'data2'); ?></td>
        </tr>
      </tbody>
    </table>
<?php $this->endWidget(); ?>
</div>

Penjelasan : Penjelasan code di atas dapat anda lihat pada script tersebut.

Nah, kemudian kita buat sebuah fungsi pada controller yang telah di panggil via AJAX pada code di atas. Pada sebuah controller, buatlah code berikut :

public function actionNamaaction()
{
  $satu='';
  $model=new Namamodel;
 
  $model->data1 = $_POST['data1'];
  $model->data2 = $_POST['data2'];
 
  if($model->save())
  {
      $satu=$this->createUrl('update',array('id'=>$model->id));
  }
 
  echo CJSON::encode(array
  (
     'satu'=>$satu,
  ));
  Yii::app()->end();
}

 

Pada code di atas, kita menyimpan data yang telah kita input pada form sebelumnya. Nah, setelah data sudah disimpan, page akan langsung di redirect halaman “update” untuk data yang telah tersimpan tadi…

 

Selesai.. Selamat mencoba…

Semoga membantu… 🙂

[Yii Framework] Redirect Page With Ajax

Ketika menjalankan ajax, sejauh ini masih tidak dimungkinkan melakukan redirect page secara langsung dari fungsi yang diakses AJAX secara langsung lewat controller. Lalu bagaimana mengatasinya ? Pada controller anda, lemparlah link yang akan menjadi tujuan redirect ke AJAX variabel :

 public function actionNamaaction()
 {
    $satu='';
    $satu=$this->createUrl('update',array('id'=>$model->id)); 
    echo CJSON::encode(array
    (
       'satu'=>$satu,
    ));
    Yii::app()->end();
 }

Penjelasan : kita menyimpan informasi link yang akan dituju ke dalam variabel $satu
Lalu pada ajax, buatlah code seperti berikut :

 $.ajax({
   url: "<?php echo Yii::app()->createUrl('namacontroller/namaaction')?>",
   type:"post",
   dataType :"json",
   success : function(data){
        if(data.satu.length > 0)
        {
           window.location=data.satu;
        }
    },
 });

Pada fungsi di atas, ketika operasi ajax telah sukses dan variabel “satu” panjang nilainya lebih besar dari 0, maka akan di redirect sesuai request pada action yang ada pada controller..

 

Selesai.. Selamat mencoba..

Semoga membantu… 🙂

[Yii Framework] Membuat Menu Dinamis dengan Hirarki Parent Child dari Database

Biasanya untuk membuat sebuah menu dinamis yang mudah untuk di konfigurasi kita lakukan pemanggilan menunya dari database. Tentu menu-menu yang ada sering kali terdiri dari menu-sub menu-sub dari sub menu dan seterusnya.. Yang mana hasilnya akan seperti gambar berikut :

Nah, untuk membuatnya pertama-tama mari kita buat sebuah tabel “category” dengan field-field sebagai berikut :

– id(integer, not null, auto increment) = identitas unik tabel category

– label(varchar 200, not null) = nama dari suatu category

– parent(integer, null) = induk dari suatu category.

Lalu generate tabel tersebut dengan menggunakan GII. Setelah itu saya akan isikan dengan data sample seperti berikut :

id  |          label           |        parent

1    | Nasional            | NULL

2    | Olahraga           | NULL

3    | Sepak Bola        |   2

4    | Ibu Kota            |  1

5    | Liga Spanyol    |  3

6    | Teknologi          |  NULL

7    | International   | NULL

8    | Liga Italia          | 3

9    | Liga Indonesia | 3

10 |  IPL                        | 9

11  |  LPI                       | 9

Lalu kemudian modifikasi code anda. Pada model anda, buatlah fungsi seperti berikut :

public function getMenu($cnd=" IS NULL")
 {
    $data2 = array();
    $data2[] = array('label'=>'Beranda', 'url'=>array('/site/index'));
    foreach($this->findAll('parent'.$cnd) as $haha)
    {
        $row=array();
        $row['label'] = $haha->label;
        $row['url'] = array('category/view','id'=>$haha->id);
        if(count($this->getMenu2(' ='.$haha->id))>0)
        {
           $row['items'] = $this->getMenu2(' ='.$haha->id);
        }
        $data2[] =$row;
    }
    $data2[] = array('label'=>'Tentang Kami', 'url'=>array('/site/page', 'view'=>'about'));
    $data2[] = array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest);
    $data2[] = array('label'=>'Logout ('.Yii::app()->user->nama.')', 'url'=>array('/site/logout'),
                   'visible'=>!Yii::app()->user->isGuest);
    return $data2;
 }
public function getMenu2($cnd=" IS NULL")
 {
    $data2 = array();
    foreach($this->findAll('parent'.$cnd) as $haha)
    {
         $row=array();
         $row['label'] = $haha->label;
         $row['url'] = array('category/view','id'=>$haha->id);
         if(count($this->getMenu2(' ='.$haha->id))>0)
               $row['items'] = $this->getMenu2(' ='.$haha->id);
         $data2[] =$row;
     }
     return $data2;
 }

Penjelasan : di atas terdapat 2 buah fungsi. Kedua fungsi tersebut digunakan untuk men generate category mulai dari category induk (parent = NULL) hingga ke category anaknya. Sebenarnya kedua fungsi tersebut menjalankan kedua fungsi yang sama, hanya sama pada fungsi getMenu() dia mengembalikan menu yang ada di luar database. Ingat kan pada database hanya ada menu-menu yang sudah ada pengkategoriannya. Sedangkan menu-menu seperti “beranda”, “login”, “tentang kami” memang tidak disimpan di dalam database.

Fungsi di atas sendiri akan men generate informasi label menu tersebut yang akan tampil pada menu, dan id nya yang digunakan sebagai url dari menu tersebut.

Nah, setelah itu untuk mempermudah pembuatan menu yang menggunakan sub-menu kita akan gunakan extension mbmenu yang ada di Yii (silahkan googling). Kemudian pada menu, buatlah code seperti berikut :

$this->widget('ext.mbmenu.Mbmenu',
    array('items'=>Category::model()->getMenu(),
   )
);

Penjelasan : code di atas digunakan untuk men generate menu dari fungsi yang sudah kita buat sebelumnya pada model Categori. Jadi semua nilai yang ada pada menu kita ambil dari fungsi yang sudah kita buat tadi, sehingga kita tidak perlu repot masukkan nilainya satu persatu ke dalam array Mbmenu..

Hasil dari code yang kita buat di atas adalah sama dengan gambar yang ada pada postingan ini..

Selesai..

Selamat mencoba… semoga membantu… 🙂

%d bloggers like this: