Scribd Logo
Unggah

Selamat datang di Scribd!

  • Progress Bar ExtJs

    Diunggah oleh

    Harryw2103
    47 tayangan6 halaman
    Progress Barr using Ext JS

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Progress Barr using Ext JS

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    47 tayangan6 halaman

    Progress Bar ExtJs

    Diunggah oleh

    Harryw2103
    Progress Barr using Ext JS

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 6

    Laporan Pembelajaran AJAX

    Analisis Pembuatan Progress Bar Menggunakan Framework ExtJS


    jTechnopreneur Universitas Gunadarma

    Nama Kelas Riset Kategori Anggota

    : Diaz Pradiananto : 3 KA 01 : AJAX : Ahmad Baihaqi : Andri Irawan Isa

    jTechnopreneur Universitas Gunadarma 2010


    -1-

    Hasil Riset / Training


    ExtJS
    ExtJs merupakan sebuah framework Javascript yang dapat digunakan untuk pembuatan web interaktif dengan menggunakan metode Ajax, DHTML dan DOM. Oleh karena saya sedang riset tentang AJAX, makanya saya mencoba menggunakan framework ini. Sebelumnya saya tidak pernah menggunakan framework sama sekali, karena waktu itu saya belajar tentang Ajax dari dasar sekali, pembuatan XMLHttpObject pun secara manual. Dan InsyaAllah saya memiliki pondasi yang kuat dalam mempelajari AJAX ke depannya. ExtJs mengandung beragam widget yang dapat langsung digunakan di aplikasi web, seperti : Text field Data field Numeric field Listbox dan Combobox Radio dan Checkbox HTML Editor Grid Control Tree Control Tab Panel Toolbar Menu Aplikasi Desktop

    Pada program yang pertama, saya akan membuat Progress Bar. Script dibawah ini sebenarnya sudah ada di library ExtJS. Namun kita akan coba menyederhanakan dan menganalisis script tersebut. Pertama buatlah sebuah folder di htdocs, kita beri nama belajarextjs saja biar mudah mengingatnya. Setelah itu ekstraklah ExtJS ke dalam folder yang baru kita buat, lalu ubah nama foldernya menjadi extjs. Kemudian didalam folder belajarextjs buat lagi folder progress-bar. Buat sebuah file progress-bar.html didalam folder tersebut. Untuk bisa bekerja dengan ExtJS kita harus melakukan link kebeberapa file seperti berikut,

    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all.js"></script> <script type="text/javascript" src="progress-bar.js"></script> <link rel="stylesheet" type="text/css" href="../extjs/examples/shared/examples.css" />

    -2-

    Lalu masukkan script berikut,

    <h1>Progress Bar</h1> <p>Contoh dari Progress Bar Sederhana.</p>

    <p> <b>Basic Progress Bar</b><br /> Klik tombol disamping untuk melihat Progress Bar: <button id="btn1">Show</button><br /> <div class="status" id="p1text">Belum di Klik..^0^.</div> <div id="p1" style="width:300px;"></div> </p> Secara keseluruhan file progress-bar.html akan seperti dibawah ini :

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>ProgressBar</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all.js"></script> <script type="text/javascript" src="progress-bar.js"></script> <link rel="stylesheet" type="text/css" href="../extjs/examples/shared/examples.css" /> </head> <body>

    <h1>Progress Bar</h1> <p>Contoh dari Progress Bar Sederhana.</p>

    <p> <b>Basic Progress Bar</b><br /> Klik tombol disamping untuk melihat Progress Bar: <button id="btn1">Show</button><br /> <div class="status" id="p1text">Belum di Klik..^0^.</div> <div id="p1" style="width:300px;"></div> </p>

    </body>

    -3-

    </html> Apakah sudah selesai? Tentu belum donk.. . Selanjutnya kita akan membuat file Javascriptnya dimana main program progress bar dibuat. Berikan nama progress-bar.js.

    /*! * Ext JS Library 3.1.1 * Copyright(c) 2006-2010 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ //==== Progress bar 1 ==== var pbar1 = new Ext.ProgressBar({ text:'Initializing...' });

    var btn1 = Ext.get('btn1'); btn1.on('click', function(){ Ext.fly('p1text').update('Sedang Proses'); if (!pbar1.rendered){ pbar1.render('p1'); }else{ pbar1.text = 'Initializing...'; pbar1.show(); }

    Runner.run(pbar1, Ext.get('btn1'), 10, function(){ pbar1.reset(true); Ext.fly('p1text').update('Keren Kaan..!').show(); }); }); });

    //Please do not use the following code as a best practice! :) var Runner = function(){ var f = function(v, pbar, btn, count, cb){ return function(){ if(v > count){ btn.dom.disabled = false;

    -4-

    cb(); }else{ if(pbar.id=='pbar4'){ //give this one a different count style for fun var i = v/count; pbar.updateProgress(i, Math.round(100*i)+'% completed...'); }else{ pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...'); } } }; }; return { run : function(pbar, btn, count, cb){ btn.dom.disabled = true; var ms = 5000/count; for(var i = 1; i < (count+2); i++){ setTimeout(f(i, pbar, btn, count, cb), i*ms); } } } }(); Javascript diatas sudah saya modifikasi dan sederhanakan dari file Javascript aslinya. Dan hasil akhirnya adalah seperti ini :

    Gambar 1. Output dari program Progress Bar

    -5-

    Problem / Masalah
    Sebenarnya saya baru saja mengenal dan mencoba framework untuk pembuatan Web dengan metode AJAX. Awal saya belajar Ajax adalah murni pemrograman manual menggunakan notepad. Disana saya mempelajari dari bagaimana XMLHTTPRequest mengecek browser hingga pembuatan form berikut validasinya menggunakan PHP dan Javascript dengan metode Ajax(penggunaan readystate dll). Namun ternyata framework sangat berbeda (atau mungkin dikemas secara berbeda) dan cukup membuat saya bingung untuk beradaptasi. Bagaimana mengolah script agar bisa digunakan sesuai kebutuhan. Tadinya saya mau membuat form dengan menggunakan Framework ExtJS ini, namun masih bingung untuk diutak-atik,mungkin target selanjutnya saya bisa memberikan laporan mengenai hal tersebut. Sedikit masalah saya minggu ini, semoga dari masalah tersebut muncul pemecahan-pemecahan baru dalam pembelajaran saya selanjutnya. Semoga laporan singkat saya ini bermanfaat.

    Referensi : Segala sumber

    -6-

    Anda mungkin juga menyukai