Online Hijab Store: Javascript

Rabu, 03 Maret 2010

Form Sederhana Menggunakan ExtJS

Melanjutkan tentang tutorial mengenai ExtJS saya yang pertama mengenai Progress Bar, sekarang saya akan memberikan tutorial sederhana bagaimana membuat Form di ExtJS.

Saya mendapatkan tutorial ini di http://www.extjs.com/learn/Tutorials, disana saya mengambil sub-bab mengenai cara pembuatan form dengan ExtJS.

Untuk penginstalan / konfigurasi ExtJS awal bisa lihat di postingan saya mengenai Progress Bar.

Langsung saja pada pembuatan form yang pertama, kita membuat form sederhana dengan Submit.

Seperti biasa, buat link-link ke library extjs seperti berikut di tag <head> dari file html kita, buat saja dengan nama form.html :

<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../extjs/ext-all.js"></script>

<!—Memasukkan lokasi Javascript kita yang kita buat, sesuaikan dengan nama file kita :-->

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

<!—Memasukkan lokasi Ext StyleSheets : -->

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">

Kemudian di tag <body> buatlah tempat untuk me-render form dengan tag <div>,

<div id="mytraditionalform"></div>

mytraditionalform merupakan id dari tag <div> yang akan dipanggil dari file Javascript.

Berikutnya buatlah file Javascript dengan nama form.js, lalu ketikkan perintah 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',
                allowBlank:false
                               },
                               {
                     fieldLabel: 'Nama',
                name: 'nama',
                allowBlank:false
                               },
                               {
                     fieldLabel: 'Kelas',
                name: 'kelas',
                allowBlank:false
                               },
                               {
                     fieldLabel: 'Alamat',
                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');
});

Yang terakhir, kita buat file hasil.php untuk mendapatkan hasilnya.

<?php

$npm = $_POST["npm"];

$nama = $_POST["nama"];

$kelas = $_POST["kelas"];

$alamat = $_POST["alamat"];

echo "NPM kamu ".$npm."<br/>";

echo "Nama kamu ".$nama."<br/>";

echo "Kamu kelas ".$kelas."<br/>";

echo "Alamat kamu di ".$alamat."<br/>";

?>

Dan lihat outputnya.. Selamat Mencoba :) !!

Rabu, 01 Juli 2009

Apa Perbedaan dari getElementByID, getElementByName dan getElementByTagName ?

getElementByID : mengambil elemen berdasarkan id, c/:
<html>
<body>
<p id='tes'> Hallo bang topan <script language = 'Javascript'>
txt = document.getElementByID('tes').innerHTML;
document.write(txt);
</script>
</body>
</html>

getElementByName : mengambil elemen berdasarkan nama, c/:
<html>
<body>
<p name='tes'> Hallo bang topan </p>
<script language = 'Javascript'>
txt = document.getElementByName('tes').innerHTML;
document.write(txt);
</script>
</body>
</html>

getElementByTagName
<html>
<body>
<p> Hallo bang topan </p>
<script language = 'Javascript'>
txt = document.getElementByTagName('p').innerHTML ;
document.write(txt);
</script>
</body>
</html>

semuanya menghasilkan output yang sama

Senin, 08 Juni 2009

Membuat kalkulator sederhana dengan Javascript

dalam pemrograman javascript ini, saya mencoba membuat kalkulator sederhana dengan menggunakan metode onClick, kalkulator ini terdiri dari enam fungsi yaitu :

Penjumlahan
Pengurangan
Perkalian
Pembagian
Pengkuadratan
Perpangkatan

Codingnya dapat didownload disini

^^

Halaman