Membuat Bukutamu Sederhana menggunakan Sencha Ext JS

Source : http://www.rubedo-project.org

Yoo , kali ini admin akan Sharing tentang bagaimana caranya "Membuat Bukutamu Sederhana menggunakan Sencha Ext JS".

Apa itu Ext JS ??

Ext JS merupakan Javascript UI framework untuk pengembangan aplikasi berbasis web.
Sebagai perbandingan, Ext JS ini bisa disejajarkan dengan jQuery UI yang lebih dulu populer.
Ya, pada intinya Ext JS adalah library untuk membuat tampilan front-end yang berjalan di browser. Ext JS dikembangkan oleh Sencha. Dan saat artikel ini ditulis telah tersedia versi terbaru dari ExtJS yaitu versi 5, dan tetntu saja berbayar.

Mengapa Menggunakan Ext JS ??

Ada beberapa alasan menggunakan Ext JS:

Beberapa Ext JS menyediakan component library yang lengkap, diantaranya: charting, drawing, grid, form, layout, dll.
Component Ext JS sangat extensible, sehingga kita bisa membuat custom component dengan mudah sesuai kebutuhan.
Modern application framework, didukung dengan ratusan API siap pakai.
Mendukung MVC architecture, sehingga aplikasi terstruktur dengan baik dan mudah dikelola.
Documentasi yang lengkap dan juga User Friendly.

Penjelasan lebih lengkap tentang fitur Ext JS dapat dibaca di sini.

Mari kita mulai membuat Bukutamu di ExtJS.

Pertama kamu harus mendownload dulu source ExtJs di sini(website asli sencha), atau disini (Source ExtJs mimin , sudah di minimalisir).

Jika sudah kita lanjut ke step berikutnya. Yang dipakai source yang dari link mimin yaa biar mudah mengikuti tutorialnya.

1. Buat folder di C:/xampp/htdocs , untuk nama folder bebas (disini mimin memberi nama folder bukutamu_ext)
2. Copy source ext js ke folder bukutamu_ext
3. Buat file index.html untuk memanggil file yang berekstensi *.js . kemudian copy script dibawah

4. Lalu buat file bukutamu.js , dan isikan dengan code berikut.

Ext.onReady(function(){
         var simple = new Ext.form.FormPanel({
          standardSubmit: true,
          frame:true,
          title: 'Register',
          width: 350,
                                               
        defaults: {width: 230},
        defaultType: 'textfield',
               items: [{
                  fieldLabel: 'NPM',
                  name: 'npm',
                  msgTarget : 'under',
                  allowBlank:false
                },{
                  fieldLabel: 'Nama',
                  msgTarget : 'under',
                  name: 'nama',
                  allowBlank:false
                },{
                  fieldLabel: 'Kelas',
                  msgTarget : 'under',
                  name: 'kelas',
                  allowBlank:false
                },{
                  fieldLabel: 'Alamat',
                  msgTarget : 'under',
                  name: 'alamat',
                  allowBlank:false
                },{
                  inputType: 'hidden',
                  id: 'submitbutton',
                  name: 'myhiddenbutton',
                  value: 'hiddenvalue'
                  }
                ],
        buttons: [{
            text: 'Submit',
            handler: function() {
               simple.getForm().getEl().dom.action = 'hasil.php';
                simple.getForm().getEl().dom.method = 'POST';
                simple.getForm().submit();
            }
        }]
    });
    simple.render('mytraditionalform');
});

5. Dan terakhir buat file hasil.php , untuk output data dari extjs. Copy code dibawah ini.

Tinggal kalian jalankan di browser masing-masing. Semoga Berhasil ya..

Sekian tutorial tentang "Membuat Bukutamu Sederhana menggunakan Sencha Ext JS" , Semoga Bermanfaat >,<.
Jika kalian tidak ingin yang ribet , bisa download full source disini.

Sumber : http://extjs.web.id/2013/12/21/apa-itu-ext-js/

Written by Sony Surahman

Hello , My name is Sony Surahman.I'am a newbie Blogger

T-A_Blog'z

Rabu, 12 November 2014

Membuat Bukutamu Sederhana menggunakan Sencha Ext JS

Share it Please

Apa itu Ext JS ??

Mengapa Menggunakan Ext JS ??

Mari kita mulai membuat Bukutamu di ExtJS.

Written by Sony Surahman

0 komentar:

Posting Komentar

Popular Posts

Artikel Lainnya

Facebook Like

About

Quote of the day

My Address

Formulir Kontak