Erick Kurniawan

Windows 8 Apps Tutorial 5 – Menggunakan Query Selector

2012-10-29T15:50:00Z

Topik yang akan kita bahas kali ini adalah tentang penggunaan method WinJS.Utilities.query() dan class Query Collection untuk mengambil nilai dan melakukan modifikasi pada dokumen HTML.

Apa itu Selector?

Ketika anda membangun aplikasi web, kita membutuhkan cara yang mudah untuk mengakses DOM elemen pada dokumen HTML. Sebagai contoh anda mungkin ingin mengambil semua elemen input yang memiliki nama class selector yang sama, atau anda ingin mengambil satu elemen yang mempunyai selector id tertentu.

Selector tidak hanya berguna untuk menambahkan format pada element. Selector juga digunakan untuk menambahkan event kedalam elemen tertentu, sebagai contoh anda akan menambahkan event click kedalam element button.

Javascript framework yang sudah sangat populer dengan fitur selector adalah Jquery. WinJS juga menambahkan fitur selector yang mirip dengan Jquery.

Contoh penggunaan query pada WinJS

1. Buat project javascript Windows Store dengan nama ContohQuerySelector.

2. Kemudian pada file default.html tambahkan kode html berikut

<body>
    <h3>Penggunaan Selector</h3>
    <br />
    <button>Klik Disini !</button><br />
    <div style="display:none;">
        <h2>Ini adalah pesan tersembunyi</h2>
    </div>
</body>

3. Kemudian untuk menambahkan event handler tambahkan juga kode pada file default.js

if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
    WinJS.Utilities.query("button").listen("click", function () {
        WinJS.Utilities.query("div").clearStyle("display");
    });
} else {
    // TODO: This application has been reactivated from suspension.
    // Restore application state here.
}

4. Pada kode diatas method query() digunakan untuk mengambil element button dan menambahkan event click kedalam button tersebut. Jika user menekan button maka elemen div akan diambil dan style display akan dihapus.

5. Kembalian dari method query() berupa object bertipe QueryCollection.

6. Tekan F5 untuk menjalankan aplikasi anda. Tampilan dari aplikasi diatas adalah sebagai berikut.

Mengambil Elemen Tunggal menggunakan method WinJS.Utilities.id()

Jika anda ingin mengambil elemen tunggal dari dokumen (bukan semua elemen), anda dapat menggunakan method WinJS.Utilities.id(). Misal anda ingin mengambil elemen yang mempunyai id dengan nama ‘pesan’, kemudian merubah warna teks yang ada dalam element tersebut menjadi merah. Maka anda dapat menuliskan:

//pada default.html
    <div id="pesan">
        Hello World !
    </div>

//pada default.js
WinJS.Utilities.id("pesan").setStyle("color", "red");

Atau anda juga dapat mengakses element div tersebut dengan cara :

WinJS.Utilities.query("#pesan").setStyle("color", "red");

Method WinJS.Utilities.id() sebenarnya sama dengan method standar yang ada pada javascript untuk mengakses element yaitu getElementById(). Method tersebut juga mengembalikan hasil berupa QueryCollection. Jika element dengan id yang dicari tidak berhasil ditemukan maka akan dikembalikan QueryCollection dengan length 0 (tidak menyebabkan error).

Menggunakan Method WinJS.Utilities.children()

Method WinJS.Utilities.children() dapat digunakan untuk mengambil data berupa QueryCollection yang berisi semua child dari element DOM. Misal kita akan mengambil child pada element berikut:

<div id="bahasa">
    <div>CSharp</div>
    <div>JavaScript</div>
    <div>Visual Basic</div>
    <div>Phyton</div>
</div>

Untuk mengambil child pada element diatas, tambahkan kode berikut pada default.js

var bahasa = WinJS.Utilities.query("#bahasa").get(0);
WinJS.Utilities.children(bahasa).setStyle("color", "yellow").setStyle("border", "2px dotted pink");

Satu hal yang perlu anda pahami adalah method ini hanya dapat menerima input berupa DOM element bukan QueryCollection, maka pada kode diatas digunakan method get() untuk mengambil element dari QueryCollection.

Windows 8 Apps Tutorial 4 : Memahami ‘default.js’ File

2012-10-29T15:00:00Z

Artikel ini akan coba menjelaskan bagaimana cara kerja dari file ‘default.js’ pada project Windows 8 Apps pada Visual Studio 2012. File ‘default.js’ adalah file pertama yang akan dijalankan pada aplikasi Win8 Apps anda. Adapun tampilan file ‘default.js’ adalah sebagai berikut :

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. 
            } else {
                // TODO: This application has been reactivated from suspension.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
    };

    app.start();
})();

‘use strict’ keyword

Keyword ‘use strict’ adalah fitur baru pada ECMAScript 5. Dengan menuliskan keword tersebut pada awal program maka anda tidak dapat membuat variable tanpa mendeklarasikannya terlebih dahulu menggunakan keyword ‘var’.

Module Pattern

Penjelasan tentang module pattern sudah dibahas pada blog sebelumnya. Intinya adalah digunakan untuk mengenkapsulasi method kedalam fungsi self-executing anonymous. Dengan menggunakan module pattern maka variable dan method terlindungi dan dapat mencegah terjadinya overwrite variable, object, atau method pada library yang lain.

(function () {
     ----------------------
})();

WinJS Alias

Anda juga dapat membuat alias dari WinJS object, pada kode diatas dapat dilihat bahwa variabel app adalah alias dari object WinJS.Application.

Menangani Event pada WinJS

Pada contoh file ‘default.js’ diatas terdapat kode untuk menangani event activated. WinJS mendukung beberapa event seperti:

loaded : dijalankan sesudah event DOMContentLoaded pada browser. Setelah event ini DOM sudah siap dan anda dapat mengakses element dalam halaman.
activated : setelah event ini maka WinRT sudah diload dan siap untuk digunakan.
ready : dijalankan setelah event loaded dan activated.
unload : dijalankan sebelum aplikasi diunload.

Contoh dibawah ini akan menunjukan bagaimana cara penggunaan event pada WinJS.

1. Buat project Windows metro style, pilih Blank App. Beri nama ‘SampleEvent’.

2. Kemudian tambahkan kode berikut pada file ‘default.js’ didalam folder ‘js’.

app.onloaded = function (args) {
    console.log("Event onload dijalankan");
};

app.onready = function (args) {
    console.log("Event onready dijalankan");
};

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            console.log("Event Activated dijalankan");
        } else {
          
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

3. Jalankan aplikasi pada simulator, kemudian lihat output pada jendela javascript console.

onactivated Event

Event ‘onactivated’ secara default sudah ditambahkan ketika project dibuat. Event ini sebenarnya dapat menangani beberapa macam kondisi (activation context), misalnya saat launch, search, shareTarget, file, protocol, dll.

Untuk pengecekan context menggunakan parameter sebagai berikut:

if (args.detail.kind === activation.ActivationKind.launch) { }

Cara ini dapat digunakan misalnya untuk melakukan pengecekan apakah ketika event activated dijalankan aplikasi baru pertama kali dijalankan atau resume aplikasi dari keadaan suspend.

checkpoint Event

Pada file default.js juga terdapat oncheckpoint event. Event ini digunakan ketika aplikasi Metro berada pada keadaan suspended, jadi idenya adalah anda dapat menyimpan data-data penting yang ada pada aplikasi anda sebelum aplikasi tersebut masuk kedalam suspended state dan kemudian mengembalikan data-data tersebut ketika user mengakses kembali (resume) aplikasi anda.

app.oncheckpoint = function (args) {
    // TODO: This application is about to be suspended. Save any state
};

Method start()

Method start() digunakan untuk menjalankan aplikasi anda. WinJS menyimpan semua event yang anda buat kedalam javascript array dengan nama eventQueue sampai anda menjalankan event start(), eventQueue belum diproses. Jika anda tidak menjalankan method start() maka event Loaded, Activated, Ready, dan Unloaded tidak akan dijalankan.

Event Report : Windows 8 Champ Workshop

2012-09-26T03:46:06Z

Pada tanggal 22-23 September 2012 telah diadakan workshop dengan topik Windows 8 Development. Acara ini diselenggarakan oleh Microsoft Indonesia dan bertempat di Hotel Eden 1, Kaliurang, Yogyakarta. Peserta dari acara ini adalah mahasiswa yang terpilih untuk menjadi Windows 8 Champ.

Pada acara tersebut saya membawakan topik Pengembangan aplikasi Windows 8 menggunakan HTML5 dan Javascript.

Event Report : The Metro-Cloud: Building Windows 8 Apps in The Cloud

2012-09-26T03:14:28Z

Pada tanggal 20 sd 21 September 2012 telah dilangsungkan workshop The Metro-Cloud: Building Windows 8 Apps in The Cloud yang bertempat di Lab Jaringan Teknik Elektro UGM. Acara ini diselenggarakan oleh MIC UGM. Peserta workshop terdiri dari praktisi, akademisi, dan mahasiswa. Adapun agenda dari acara tersebut adalah sebagai berikut:

Session 1 : Visual Studio 2012 and The Cloud (Lecture) oleh : Ridi Ferdiana
Session 2 : Creating My First Cloud App (Lab) oleh : M. Risqi Utama Saputra
Session 3 : Storage and Table in My Cloud App (Lab) oleh : Erick Kurniawan
Session 4 : Consuming The Cloud Service in Windows 8 (Lecture) oleh : Erick Kurniawan
Session 5 : Deploying Cloud Services in Azure (Lab) oleh : M. Risqi Utama Saputra
Session 6 : Personal Project Assignment (Lab) oleh : M. Risqi Utama Saputra

untuk bahan workshop dapat di download disini

Event Cloud Computing for Education

2012-09-26T02:49:31Z

Pada tanggal 5 September 2012 telah dilangsungkan seminar dengan judul Cloud Computing for Education yang dilangsungkan di kampus AKAKOM Yogyakarta. Acara ini diselenggarakan oleh MIC UGM dan kampus AKAKOM. Peserta yang hadir adalah dosen-dosen dari kampus AKAKOM. Adapun topik yang diseminarkan pada acara ini adalah:

Cloud Computing dan Windows Azure Introduction oleh Ridi Ferdiana
Windows 8 & Cloud oleh Erick Kurniawan

Windows 8 Apps - Tutorial 3 : Module Pattern pada WinJS

2012-07-20T16:04:00Z

Pada artikel kali ini akan dibahas penggunaan module pattern pada WinJS library. Modul pattern dapat digunakan untuk membatasi pengaksesan class member (method / property), karena di javascript tidak mendukung access modifier (public/private seperti pada CSharp/VB).

Mekanisme enkapsulasi (information hidding) pada JavaScript dapat dibuat menggunakan fungsi. Fungsi pada Javascript dapat menentukan scope variabel. Anda dapat mendeklarasikan variabel pada global scope yang dapat diakses oleh semua fungsi atau mendeklarasikan variabel lokal yang hanya dapat diakses pada scope fungsi tertentu saja.

function kerjakan() {
    console.log("kerjakan");
    function kerjakanLagi() {
        console.log("kerjakan lagi");
    }
}

kerjakan();
kerjakanLagi();

Pada kode diatas dapat dilihat bahwa fungsi kerjakanLagi() yang berada di dalam fungsi kerjakan() tidak dapat diakses dari luar fungsi, karena scopenya hanya di dalam fungsi kerjakan() saja.

Library WinJS juga menggunakan enkapsulasi fungsi untuk menyembunyikan semua internal method yang tidak diijinkan untuk diakses. Untuk mengakses public method dari enkapsulasi fungsi method tersebut harus dideklarasikan dalam namespace pada global scope.

Pada contoh dibawah ini akan dibuat sebuah library sederhana untuk menghitung nilai akhir matakuliah. Semua method yang dibuat akan dienkapsulasi dalam self-executing anonymous function dan hanya dapat diakses dengan cara menambahkan fungsi tersebut kedalam namespace.

(function () {
 
    function hitungTotalTugas(tugas1,tugas2,tugas3) {
        return ((tugas1 + tugas2 + tugas3)/3) * 0.5;
    }

    function hitungTotalUjian(uas, uts) {
        return ((uas + uts)/2) * 0.5;
    }

    function hitungNilaiAkhir(tugas1,tugas2,tugas3,uas,uts) {
        return hitungTotalTugas(tugas1, tugas2, tugas3) + hitungTotalUjian(uas, uts);
    }

    function lulus(total) {
        if (total >= 60)
            return "Anda Lulus";
        else
            return "Anda Tidak Lulus";
    }


    //menentukan public method yang bisa diakses
    WinJS.Namespace.define("KelasA.Hitung",
        {
            hitungNilaiAkhir: hitungNilaiAkhir,
            lulus: lulus
        });

})();

var total = KelasA.Hitung.hitungNilaiAkhir(70, 80, 60, 70, 60);
console.log("Hasilnya : " + total);
console.log(KelasA.Hitung.lulus(total));

Pada kode diatas self-executing anonymous function terdiri dari method hitungTotalTugas(), hitungTotalUjian(), hitungNilaiAkhir(), dan lulus(). Method yang dapat diakses adalah yang ada di dalam namespace KelasA.Hitung yaitu hitungNilaiAkhir() dan lulus().

Windows 8 Apps - Tutorial 2 : Namespace pada WinJS

2012-07-20T15:54:00Z

Pada artikel kali ini akan dijelaskan penggunaan Namespace dan Modul pada WinJS. Javascript Framework pada umumnya tidak mendukung namespace, misalnya Jquery yang merupakan Javascript framework paling populer juga tidak mendukung namespace.

Namespaces sendiri memiliki kegunaan utama untuk mencegah naming collision (kerancuan akibat nama object yang sama). Jadi dengan menggunakan namespace anda dapat membuat object yang namanya sama tanpa menyebabkan konflik.

Fungsi yang kedua adalah untuk kemudahan pengaturan. Namespace digunakan untuk mengelompokan object-object yang sejenis kedalam group yang sama walaupun secara fisik berada pada file yang berbeda. Misal pada WinJS library mempunyai namespace WinJS.Class yang isinya adalah object-object yang berhubungan dengan pembuatan class di WinJS. Namespace membuat kita lebih mudah untuk mengerti fungsionalitas yang ada pada library.

Namespace akan sangat dibutuhkan jika anda ingin membuat aplikasi javascript yang cukup kompleks. Jika anda membutuhkan lebih dari satu library yang dikembangkan oleh banyak orang maka anda membutuhkan namespace.

Membuat Namespace di WinJS

Untuk membuat namespace di WinJS anda dapat menggunakan method WinJS.Namespace.define() yang terdiri dari dua parameter yaitu name dan members. Contoh dibawah ini akan menunjukan bagaimana penggunaan namespace di WinJS.

WinJS.Namespace.define("KelasA");
KelasA.Registrasi = {
    login: function () {
        return "Login pada KelasA";
    }
};

WinJS.Namespace.define("KelasB.Metode",
    {
        Registrasi: {
            login: function () {
                return "Login pada KelasB";
            }
        }
    }
    );

console.log(KelasA.Registrasi.login());
console.log(KelasB.Metode.Registrasi.login());

Pada contoh diatas dibuat dua namespace yaitu KelasA dan KelasB.Metode yang mempunyai satu object dengan nama yang sama yaitu Registrasi.

Selain cara yang sudah ditunjukan diatas, anda juga dapat membuat namespace dengan menggunakan method WinJS.Namespace.defineWithParent(). Dengan method ini anda dapat menambahkan namespace baru pada namespace yang sudah ada. WinJS.Namespace.defineWithParent() memiliki tiga parameter yaitu : parentNamespace, name, dan members. Contoh penggunaan method ini dapat dilihat pada kode berikut:

WinJS.Namespace.define("KelasA");
WinJS.Namespace.defineWithParent(KelasA, "Metode", {
    Registrasi: {
        login: function () {
            return "Login pada KelasA";
        }
    }
});

console.log(KelasA.Metode.Registrasi.login());

Windows 8 Apps - Tutorial 1 - Class, Object, dan Inheritance pada WinJS

2012-07-20T15:45:00Z

Anda mungkin sudah mengetahui bahwa untuk mengembangkan aplikasi Metro style pada Windows 8 dapat menggunakan teknologi HTML5 dan JavaScript. Ini merupakan berita yang sangat bagus bagi pengembang web, karena dapat menggunakan skill yang sudah dimiliki tanpa harus belajar teknologi yang baru.

Ketika anda membuat project Metro style di VS 2012, project tersebut secara otomatis akan menambahkan referensi library WinJS. Library WinJS berisi extension dari Microsoft untuk membuat aplikasi Metro style.

Pada artikel kali ini akan dijelaskan bagaimana cara pembuatan object dengan WinJS ketika anda mengembangkan aplikasi Metro di Windows 8. Beberapa topik yang akan dibahas adalah :

Membuat Object dengan WinJS.Class.define()
Inheritance dengan WinJS.Class.derive()
Method WinJS.Class.mix()

ECMAScript5

WinJS menggunakan standard ECMAScript versi 5 yang sudah didukung oleh browser modern seperti IE9+, Firefox 4+, Chrome 7+, dan Safari 5.1. Dibandingkan dengan versi sebelumnya (ECMAScript versi 3) versi ini mempunyai beberapa perbedaan terutama pada pendefinisian object dan property.

Property pada ECMAScript versi 3 tidak mendukung penggunaan method getter dan setter seperti pada CSharp, namun hal ini sudah diperbaiki pada ECMAScript versi 5.

Membuat Class

Untuk membuat class pada WinJS digunakan method define(). Anda juga dapat menambahkan konstruktor untuk melakukan inisialisasi pada property. Contoh dibawah ini akan membuat class dengan nama ‘Mahasiswa’yang mempunyai 2 property (nim, nama) dan satu method (tampilMahasiswa).

   1: var Mahasiswa = WinJS.Class.define(

   2:     function (nim, nama) { //deklarasi konstruktor

   3:         this.nim = nim;

   4:         this.nama = nama;

   5:     },

   6:     { //mendefinisikan properti dan method

   7:         nim: undefined,

   8:         nama: {

   9:             set: function (value) {

  10:                 if (value != "")

  11:                     this._nama = value;

  12:                 else

  13:                     throw new Error("Nama Required !");

  14:             },

  15:             get: function () {

  16:                 return this._nama;

  17:             }

  18:         },

  19:         tampilMahasiswa: function () {

  20:             return "Nim: " + this.nim + " - Nama: " + this.nama;

  21:         }

  22:     }

  23: );

24:

  25: var mhs1 = new Mahasiswa("22002321","Erick");

  26: console.log(mhs1.nama);

  27: console.log(mhs1.tampilMahasiswa());

Tambahkan kode berikut untuk memberi nilai kosong pada property nama, maka exception akan dimunculkan.

   1: mhs1.nama = "";

   2: console.log(mhs1.nama);

Inheritance

Pada WinJS anda dapat menggunakan WinJS.Class.derive() untuk menurunkan class dari class yang lain. Method WinJS.Class.derive() dapat menerima empat argumen yaitu: baseClass, constructor, instanceMember, dan staticMember.

   1: var Civitas = WinJS.Class.define(

   2:     function (nama) {

   3:         this.nama = nama;

   4:     },

   5:     {

   6:         tampilDeskripsi: function () {

   7:             return "Nama anda : " + this.nama + " dan Status : " + this.status;

   8:         }

   9:     }

  10: );

11:

  12: var Mahasiswa = WinJS.Class.derive(Civitas,

  13:     function (nama) {

  14:         this.nama = nama;

  15:         this.status = "Mahasiswa";

  16:     });

17:

  18: var Dosen = WinJS.Class.derive(Civitas,

  19:     function (nama) {

  20:         this.nama = nama;

  21:         this.status = "Dosen";

  22:     });

23:

  24: var mhs1 = new Mahasiswa("Erick");

  25: var dsn1 = new Dosen("Mueller");

26:

  27: console.log(mhs1.tampilDeskripsi());

  28: console.log(dsn1.tampilDeskripsi());

Pada kode diatas dapat dilihat bahwa class ‘Mahasiswa’ dan ‘Dosen’ diturunkan dari class ‘Civitas’ dengan begitu class ‘Mahasiswa’ dan ‘Dosen’ juga dapat mengakses method dan property dari class ‘Civitas’.

Mixins

Selain menggunakan protptype inheritance seperti yang sudah dibahas sebelumnya, anda juga dapat menggunakan method WinJS.Class.mix() untuk menggabungkan class (mixins). Mixins digunakan untuk menggabungkan method menjadi single object, jadi anda tidak perlu menggunakan inheritance. Microsoft menyarankan penggunaan mixins karena penggunaan inheritance mempunyai dampak yang buruk pada performance (karena harus melakukan chaining antar object).

Untuk menggunakan method ini ada dua parameter yang harus diisi yaitu constructor dan mixin. Contoh penggunaan mixin untuk single inheritance dapat dilihat pada contoh berikut.

   1: var Civitas = {

   2:     showHello: function () {

   3:         return "Hello World !";

   4:     }

   5: };

6:

   7: var Mahasiswa = WinJS.Class.mix(

   8:     function (nama) {

   9:         this.nama = nama;

  10:     },

  11:     Civitas

  12:     );

13:

  14: var mhs1 = new Mahasiswa("Erick");

  15: console.log(mhs1.showHello());

  16: console.log(mhs1.nama);

Mixins juga dapat digunakan untuk implementasi konsep yang mirip dengan multiple inheritance. Anda dapat menggabungkan kumpulan method dan property yang anda butuhkan. Contoh dibawah ini menunjukan bagaimana mixin dapat digunakan untuk multiple inheritance.

   1: var Civitas = {

   2:     showHelloCivitas: function () {

   3:         return "Hello Civitas !";

   4:     }

   5: };

6:

   7: var Nasabah = {

   8:     norek: undefined,

   9:     tabungan: {

  10:         set: function (value) {

  11:             if (value < 0)

  12:                 throw new Error("Nilai Harus Positif !");

  13:             else

  14:                 this._tabungan = value;

  15:         },

  16:         get: function () {

  17:             return this._tabungan;

  18:         }

  19:     },

  20:     showTabungan: function () {

  21:         return "NoRek : " + this.norek + " jumlah : " + this.tabungan;

  22:     }

  23: };

24:

  25: var Komunitas = {

  26:     showHelloKomunitas: function () {

  27:         return "Hello Komunitas !";

  28:     }

  29: };

30:

31:

  32: var Mahasiswa = WinJS.Class.mix(

  33:     function (nama,norek,tabungan) {

  34:         this.nama = nama;

  35:         this.norek = norek;

  36:         this.tabungan = tabungan;

  37:     },

  38:     Civitas,Nasabah,Komunitas

  39:     );

40:

  41: var mhs1 = new Mahasiswa();

  42: console.log(mhs1.showHelloKomunitas());

  43: var mhs2 = new Mahasiswa("Erick", "007", 2000000);

  44: console.log(mhs2.tabungan);

  45: console.log(mhs2.showTabungan());

  46: console.log(mhs2.showHelloCivitas());

Mixins mendukung penggunaan property dan method seperti yang anda lihat pada contoh diatas, anda juga dapat menggunakan set dan get method pada property.

Materi Workshop Nokia Lumia Developer Day

2012-02-04T02:16:08Z

Topik “Silverlight for Windows Phone” : berisi tutorial pembuatan aplikasi Windows Phone 7 dengan Silverlight, adapun materi yang akan dibahas adalah:

Project and Solution
Debugging Program
Orientation Page
Pages and Navigation
Displaying List Of Data & Data Binding

Untuk materi Slide dan Hands On Lab dapat didownload pada link berikut : download materi.

Event Report : Workshop Windows Phone 7 (STMIK AKAKOM)

2012-01-16T13:15:42Z

Pada tanggal 10 Desember 2011, STMIK AKAKOM Yogyakarta bekerja sama dengan MIC UGM menggelar Workshop “Pengembangan Aplikasi dengan Windows Phone 7”. Dalam workshop tersebut saya berkesempatan untuk membawakan materi tentang “Pengembangan Aplikasi Windows Phone 7 menggunakan Silverlight”.

Adapun dokumentasi foto acara tersebut sebagai berikut:

Event Report : MUGI Jogja Campus Event

2012-01-16T12:23:48Z

Pada bulan November tahun 2011 kemarin MUGI Jogja menyelenggarakan kegiatan berupa seminar dan workshop di beberapa kampus yaitu:

Microsoft Techdays Campus : Universitas Atmajaya

Pada tanggal 17 November 2011 MUGI Jogja bekerja sama dengan MIC UGM mengadakan seminar Techdays Campus di Universitas Atmajaya Yogyakarta. adapun topik yang dibawakan dalam seminar tersebut adalah:

Peluang Kerja dan Karir di dunia IT oleh Darmawan Suwandi (MS Indo)
Windows Phone 7 oleh Fahim Jatmiko (MIC UGM)
ASP.NET MVC 3 oleh Erick Kurniawan (MUGI Jogja)
Web Matrix oleh Naga Gautama (MUGI Jogja)
VS Lightswitch oleh Temmy Wahyu R (MUGI Jogja)

Microsoft Techdays Campus : Seminar Universitas Teknologi Yogyakarta

Pada tanggal 19 Nov 2011 diadakan seminar di kampus UTY dengan topik :

Windows Phone 7 oleh Fahim Jatmiko (MIC)
HTML5 & CSS3 oleh Radita Liem (MUGI Yogyakarta)
VS Lightswitch oleh Temmy Wahyu R (MUGI Yogyakarta)

Microsoft Techdays Campus : Workshop VS LightSwitch (UKDW Jogja)

Pada tanggal 20 Nov 2011, MUGI Jogja dan MIC mengadakan workshop VS Lightswitch di kampus UKDW Yogyakarta, adapun topik yang dibahas pada workshop kali ini adalah:

Introduction VS Lightswitch oleh Ridi Ferdiana (MIC UGM)
Workshop Lightswitch oleh Temmy Wahyu R dan Erick Kurniawan

Event Report : Workshop Windows Phone 7 with XNA

2011-09-04T07:57:25Z

Pada tanggal 3 September 2011 telah dilangsungkan Workshop dengan topik XNA Game Programming with Windows Phone 7, acara ini diselenggarakan oleh MUGI Jogja bekerja sama dengan komunitas ukdwnet club. Acara dilangsungkan di Lab Sistem Informasi UKDW, Yogyakarta. Peserta yang mengikuti workshop ini kurang lebih 40 orang. Adapun topik yang dibahas pada workshop kali ini adalah:

Introduction Windows Phone 7 oleh Erick Kurniawan
Pengantar XNA oleh Yohanes Esthi Agung Saputra
Membuat Minigame dengan XNA & WP7 oleh Arya Dwi Anggara Putra

Materi untuk workshop kali ini dapat di download pada link berikut:

Berikut foto-foto pelaksanaan workshop ini:

Event Report : Workshop Windows Phone 7 with Silverlight

2011-09-04T07:55:58Z

Pada tanggal 16 July 2011 telah dilangsungkan Workshop dengan topik Windows Phone 7 with Silverlight. Acara ini adalah kerja sama MUGI Jogja dengan MIC UGM. Workshop ini dilangsungkan di Laboratorium Sistem Informasi, UKDW, peserta yang mengikuti workshop ini kurang lebih 35 orang. Materi yang dibawakan pada workshop ini adalah :

Introduction to Windows Phone 7 oleh Bapak Ridi Ferdiana dari MIC UGM
Membuat Twitter Client App dengan Windows Phone 7 dan Silverlight oleh Erick Kurniawan dari MUGI Jogja
Mengintegrasikan Bing Map pada Windows Phone 7 oleh Temmy Wahyu Raharjo dari MUGI Jogja

Materi dari Wokshop ini dapat di download disini :

Berikut foto-foto pelaksanaan event workshop tersebut:

{Peserta Workshop WP7 with Silverlight}

{Bapak Ridi Ferdiana sedang menjelaskan tentang Windows Phone 7}

ASP.NET & JQuery Tips (#3)

2011-09-04T02:58:20Z

Pada tips kali ini kita akan membatasi agar user tidak dapat melakukan perintah cut/copy/paste pada textbox. Pada contoh script dibawah ini kita akan mencoba membatasi user yang akan melakukan copy paste pada textbox password.

1. Buat Web Form dengan nama DisallowCopy.aspx, kemudian tambahkan kode berikut:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisallowCopy.aspx.cs" Inherits="DisallowCopy" %>
 
 <!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 runat="server">
     <title>Membatasi Perintah Cut, Copy, dan Paste</title>
     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(
             function () {
                 $('#<%=txtNew.ClientID %>').bind('cut copy paste', function (e) {
                     e.preventDefault();
                     alert("Perintah Cut, Copy, dan Paste tidak diijinkan untuk digunakan !");
                 });
                 $('#<%=txtConfirm.ClientID %>').bind('cut copy paste', function (e) {
                     e.preventDefault();
                     alertalert("Perintah Cut, Copy, dan Paste tidak diijinkan untuk digunakan !");
                 });
             }
         );
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div style="text-align:center;">
         <fieldset><br />
             <label for="txtCurrent">Current Password :</label><br />
             <asp:TextBox ID="txtCurrent" TextMode="Password" runat="server" /><br /><br />
 
             <label for="txtNew">New Password :</label><br />
             <asp:TextBox ID="txtNew" TextMode="Password" runat="server" /><br /><br />
 
             <label for="txtConfirm">Confirm New Password :</label><br />
             <asp:TextBox ID="txtConfirm" TextMode="Password" runat="server" /><br /><br />
 
             <asp:Button ID="btnSubmit" Text="Submit" runat="server" />&nbsp;
             <asp:Button ID="btnReset" Text="Reset" runat="server" /><br /><br />
         </fieldset>
     </div>
     </form>
 </body>
 </html>

2. Untuk mendisable perintah cut, copy, dan paste dapat digunakan method preventDefault().

3. Jalankan web page diatas, kemudian coba masukan nila pada New Password atau Confirm New Password, dan cobalah untuk melakukan copy, cut, atau paste, maka akan ditampilkan pesan kesalahan.

ASP.NET & JQuery Tips (#2)

2011-09-04T02:57:19Z

Pada tips kali ini kita akan membuat auto focus pada textbox pertama dan berpindah tab dengan menggunakan tombol enter. Pada beberapa kasus tertentu, seperti aplikasi POS (Point Of Sale), user membutuhkan berpindah tab dengan menekan tombol enter.

1. Tambahkan Web Form dengan nama FocusEnter.aspx, kemudian tambahkan kode berikut:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FocusEnter.aspx.cs" Inherits="FocusEnter" %>
<!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 runat="server">
    <title>Auto Focus dan Enter Tab</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input:text:first').focus();
            $('input:text').bind("keydown", function (e) {
                if (e.which == 13) {
                    e.preventDefault();
                    var nextIndex = $('input:text').index(this) + 1;
                    $('input:text')[nextIndex].focus();
                }
            });
            $('#btnReset').click(function () {
                $('#form')[0].reset();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset>
            <br />
            <label for="txtNama">Nama :</label><br />
            <asp:TextBox ID="txtNama" runat="server" /><br /><br />

            <label for="txtAlamat">Alamat :</label><br />
            <asp:TextBox ID="txtAlamat" runat="server" /><br /><br />

            <label for="txtPhone">Phone :</label><br />
            <asp:TextBox ID="txtPhone" runat="server" /><br /><br />

            <label for="txtEmail">Email :</label><br />
            <asp:TextBox ID="txtEmail" runat="server" /><br /><br />

            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />&nbsp;
            <asp:Button ID="btnReset" Text="Reset" runat="server" /><br /><br />
        </fieldset>
    </div>
    </form>
</body>
</html>

2. Method bind() digunakan untuk menambahkan event handler ‘keydown’ kedalam textbox, kemudian cek jika ada penekanan tombol enter (kode 13), maka index akan ditambah untuk berpindah textbox.

3. Jalankan page diatas, maka pertama kali halaman diload textbox paling awal akan aktif, dan anda dapat berpindah tab dengan menekan tombol enter.