tulis dan katakan pada dunia

web developer, flash maser, java newbie, gamers

Archive for the ‘Ajax’ Category

Pages (4): 1 2 3 4 »

Ext JS 2.0 tour of duty 1st day Menu And Toolbar

Apr 16, 2008 Author: admin | Filed under: Ajax

Ext JS 2.0 tour of duty 1st day Menu And Toolbar

Menu di Ext js dapat di buat dengan mudah :D (setelah belajar dari example na) , baru keliatan mudahnya.

Dasar yang harus di pegang teguh adalah !!!
1. Semua event di ext js di mulai dengan onReady
Ext.onReady(function(){

});
Setelah itu barulah kita berkreasi … dengan extjs ini … jangan sampe lupa !! bisa gak keluar tampilannya ntar.

2. Kalo mau nyoba mendingan make fierefox … install fiere bug ato kalo gak mau nginstall fierebug kita bisa liat error na di error console na mozilla.

Oke langsung aja ke bagian pertama dari dunia menu dan menu :D
Menu di defenisikan d class Ext.menu.Menu fungsinya dapat di gunakan sebagai container dari menu menu yang kita defenisikan baik di defenisikan secara langsung atau di defenisikan dari referensi variable lain.

1. Mendefenisikan Menu dengan secara langsung
• Buat sebuah objek menu yang akan menampung menu yang kita buat.

Var menu = new Ext.menu.Menu({

)}
• Setelah itu kita dapat mengisikan properties dari objek menu yang kita buat.
Var menu = new Ext.menu.Menu({
 Id : ‘Menu Utama’, // id dari menu yang kita buat
 )}

Var menu = new Ext.menu.Menu({
 Id : ‘Menu Utama’, // id dari menu yang kita buat
 Items : [ // isi dari menu yang di buat
 {
 text : ‘New’

},
 {
 text : ‘Open’

},
 {
 text : ‘Sub Menu’, // mengisikan sub menu secara langsung
 menu : {
 items :[
 {
 text: ‘Menu2’
 },
 {
 text: ‘Menu3’
 }

]}
 }

]
 });


2. Mengisikan menu dari variable yang sudah kita defenisikan terlebih dahulu
Sama seperti contoh di atas tapi kita harus mendefenisikan dulu variabelnya.

var dateMenu = new Ext.menu.DateMenu({
 handler : function(dp, date){
 Ext.example.msg(’Date Selected’, ‘You chose {0}.’, date.format(’M j, Y’));
 }
 });

Lalu kita tambahkan ke var menu

Var menu = new Ext.menu.Menu({
 Id : ‘Menu Utama’, // id dari menu yang kita buat
 Items : [ // isi dari menu yang di buat
 {
 text : ‘New’

},
 {
 text : ‘Open’

},
 {
 text : ‘Sub Menu’, // mengisikan sub menu secara langsung
 menu : {
 items :[
 {
 text: ‘Menu2’
 },
 {
 text: ‘Menu3’
 }

]}
 },
 {
 text: ‘Kalender’,
 menu : dateMenu
 }

]
 });

3. sampai pada langkah ke dua kita sudah mendefenisikan sebuah menu untuk selanjutnya kita harus meletakkan menu di dalam toolbar dengan merender nya ke salah satu div yang sudah kita sediakan di halaman html

var tb = new Ext.Toolbar(); // membuat toolbar
 tb.render(’toolbar’); // me render toolbar ke div yang namanya toolbar

tb.add({
 text:’Button w/ Menu’,
 iconCls: ‘bmenu’, // <– icon
 menu: menu // memanggil var menu
 }

  • 4 Comments

    • Posting data dengan mootools

    Apr 8, 2008 Author: admin | Filed under: Ajax

    1. Pengenalan mootools

    Mootools merupakan sebuah frameworks javascript yang di gunakan untuk mempermudah seorang web developer untuk mengembangkan berbagai macam aplikasi web yang membutuhkan interaksi dengan user. Antara lain mootools sering di gunakan untuk mengirimkan data lewat ajax. Dalam pembahasan kali ini kita akan membahas tentang ajax nya saja :D

    2. Struktur file yang di gunakan

    Pada tutorial kali ini kita akan membutuhkan file file sebagai berikut :

    · Form.html -> di gunakan sebagai tampilan dari form yang akan dip roses dengan ajax.

    · Form.js -> menjadi controller / yang memproses perintah untuk mengirim data lewat ajax.

    · Form.css -> mengatur tampilan dari halaman form yang di buat penting banget coz element yang di akses dengan ajax menggunakan id dari css yang di buat.

    · Mootools.js -> frameworks mootools yang dapat di download di sini http://mootools.net/download

    3. File Form.html

    File ini berisi tampilan ke user yang merupakan tampilan web, berisi sebuah form dengan dua buah field yang nantinya akan di isi dengan data masukan dari user, dalam hal ini data yang di masukkan adalah data email dan password.

    Beri nama file ini dengan nama index.html

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml”>

    <head>

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

    <title>Form Login</title>

    <link href=”form.css” rel=”stylesheet” type=”text/css” />

    <script type=”text/javascript” src=”moo.js”></script>

    <script type=”text/javascript” src=”form.js”></script>

    </head>

    <body>

    <div class=”main”>

    <div class=”box”>

    <h1>Sign in</h1>

    <p>Do you have an account? Sign in!</p>

    <form id=”myForm” action=”ceklogin.php” method=”post”>

    <label><span>E-mail</span>

    <input type=”text”name=”email” id=”email” class=”input-text”/>

    </label>

    <label><span>Password</span>

    <input type=”password”name=”psw” id=”psw” class=”input-text”/>

    </label>

    <input type=”submit” name=”button” id=”submitter” value=”Sign in” />

    </form>

    <div id=”log_res”></div>

    </div>

    </div>

    </body>

    </html>

    4. File form.css

    File css ini di gunakan untuk mengatur tampilan dari halaman html.

    #form_box {

    float: left;

    width: 290px;

    background: #f8f8f8;

    border: 1px solid #d6d6d6;

    border-left-color: #e4e4e4;

    border-top-color: #e4e4e4;

    font-size: 11px;

    font-weight: bold;

    padding: 0.5em;

    margin-top: 10px;

    margin-bottom: 2px;

    }

    #form_box div {

    height: 25px;

    padding: 0.2em 0.5em;

    }

    #form_box div.hr {

    border-bottom: 2px solid #e2e2e1;

    height: 0px;

    margin-top: 0pt;

    margin-bottom: 7px;

    }

    #form_box p {

    float: left;

    margin: 4px 0pt;

    width: 120px;

    }

    #log {

    float: left;

    padding: 0.5em;

    margin-left: 10px;

    width: 290px;

    border: 1px solid #d6d6d6;

    border-left-color: #e4e4e4;

    border-top-color: #e4e4e4;

    margin-top: 10px;

    }

    .log_res {

    overflow: auto;

    }

    .log_res.ajax-loading {

    padding: 20px 0;

    background: url(img/spinner.gif) no-repeat center;

    }

    5. File form.js

    File ini di gunakan untuk mengatur event yang terjadi di halaman index.html

    window.addEvent(’domready’, function() {

    $(’myForm’).addEvent(’submit’, function(e) { //mengambil elemen dom ber id myform dan memberikan event ke element tersebut

    new Event(e).stop();

    var log = $(’log_res’).empty().addClass(’ajax-loading’); //jika di submit tambahkan class css ajax-loading ke log_res

    this.send({

    update: log,//jika sudah selesai hilangkan class ajax-loading dari log_res

    onComplete: function() {

    log.removeClass(’ajax-loading’);

    }

    });

    });

    });

    6 File ceklogin.php

    File ini yang nantinya di gunakan untuk mengecek masukan yang di berikan dan pada file yang di berikan di bawah ini Cuma mencetak data yang di post dari index.html.

    <?php

    print “<pre>”.print_r($_POST, true).”</pre>”;

    ?>

    link download script na :D

    Script Login

    Script + dokumentasi na

  • 0 Comments
    • Pages (4): 1 2 3 4 »

    Categories


    Archives


    Meta

    Ehm

    Add to Technorati Favorites status YM na si ubie blog readability test

    Calendar

    August 2008
    M T W T F S S
    « Jul    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Blogroll


    Tags


    Most Popular

    Recent Comments

    Latest Entries

    Copyright © 2007 - tulis dan katakan pada dunia - is proudly powered by WordPress
    Gossip City Theme is created by: Design Disease brought to you by Celebrific.