IMPLEMENTASI ASYNCHRONOUS JAVASCRIPT

AND XML (AJAX) UNTUK SISTEM REALTIME

DENGAN BANDWITH BESAR LATENSI RENDAH
(STUDI KASUS: WARGAME)

TUGAS AKHIR

Disusun oleh :
M. T A Q I Y U D D I N F A N A N I
NRP. 5 1 0 2 1 0 9 0 3 7

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI
INSTITUT TEKNOLOGI SEPULUH NOPEMBER
SURABAYA
2006
 ABSTRAK

Asynchronous JavaScript And XML(AJAX) merupakan teknik

pengembangan aplikasi web yang sangat cocok untuk digunakan dalam membuat
aplikasi web yang interaktif dan responsif. Dengan menggunakan AJAX sangat
memungkinkan untuk membuat aplikasi web dengan tingkat refresh / postback ke
server yang kecil sehingga aplikasi web yang dibuat menjadi lebih responsif dan
bisa menjalankan fungsi-fungsi yang ada pada aplikasi berbasis desktop.

Untuk membuktikan kemampuan AJAX seperti yang disebutkan diatas,

maka pada tugas akhir ini dibuat beberapa kontrol yang diimplementasikan
menggunakan AJAX untuk menangani permasalahan realtime. Dipilihnya
permasalahan realtime ini dimaksudkan untuk mencoba kemampuan AJAX yang
bisa memberikan responsifitas yang tinggi. Permasalahan realtime yang
dimaksud disini adalah pemantauan perubahan data secara terus-menerus
sehingga membutuhkan kemampuan respon yang tinggi dari aplikasi web. Dari
hasil uji coba yang dilakukan terhadap kontrol yang dibuat dengan menggunakan
AJAX baik secara terpisah maupun uji coba dengan mengimplementasikan pada
sistem WarGame didapatkan sesuatu yang lebih dibandingkan dengan aplikasi
web yang dibuat dengan menggunakan teknik tradisional. Aplikasi web yang
dibuat menjadi lebih responsif dan lebih efektif karena web browser tidak
merefresh keseluruhan halaman untuk mengupdate beberapa bagian saja dari
halaman web tidak seperti aplikasi web tradisional yang merefresh keseluruhan
halaman web ketika terjadi perubahan pada sebagian kecil dari halaman web.
Dari hasil uji coba juga didapatkan kemampuan AJAX untuk memantau
perubahan data secara realtime seperti yang bisa dilakukan pada aplikasi
desktop.

Untuk mendapatkan halaman web yang responsif dan realtime, digunakan

XMLHTTPRequest dikombinasikan dengan pemrograman server side seperti
C#.NET yang dibungkus dengan menggunakan web services untuk pengolahan
data dan menggunakan JavaScript untuk menampilkan hasilnya sehingga
didapatkan hasil yang diinginkan dengan security yang lebih baik.

Kata Kunci: AJAX, ASP.NET Callback, Web Services, C#

i
 IMPLEMENTASI ASYNCHRONOUS JAVASCRIPT
AND XML (AJAX) UNTUK SISTEM REALTIME
DENGAN BANDWITH BESAR LATENSI RENDAH
(STUDI KASUS: WARGAME)

TUGAS AKHIR

Diajukan untuk Memenuhi Sebagian Persyaratan

Memperoleh Gelar Sarjana Komputer
Pada
Jurusan Teknik Informatika
Fakultas Teknologi Informasi
Institut Teknologi Sepuluh Nopember
Surabaya

Mengetahui/Menyetujui
Dosen Pembimbing I Dosen Pembimbing II

(Prof. Drs. Ec. Ir. Riyanarto Sarno, M.Sc. Ph.D) (Ir. Suhadi Lili)
NIP. 131570363 NIP. 132048148

SURABAYA
Nopember 2006
 KATA PENGANTAR

Alhamdulillah, segala puji bagi Allah SWT yang senantiasa memberikan

kekuatan hidayah dan limpahan kasih sayang-Nya. Shalawat dan salam tetap

tercurah kepada Rasulullah Muhammad SAW. Akhirnya penulis bisa

menyelesaikan tugas akhir ini.

Penulis memberi judul pada tugas akhir ini : IMPLEMENTASI

ASYNCHRONOUS JAVASCRIPT AND XML (AJAX) UNTUK SISTEM

REALTIME DENGAN BANDWITH BESAR LATENSI RENDAH (STUDI

KASUS: WARGAME).

Semoga dengan selesainya tugas akhir ini, dapat membantu dalam proses

pengembangan teknologi pemrograman aplikasi web di jurusan. Penulis

menyadari bahwa tugas akhir ini jauh dari sempurna, masih banyak kekurangan-

kekurangan. Oleh karena itu sangat diharapkan kritik dan saran yang membangun

untuk perbaikan ke depan.

Akhirnya, penulis mengucapkan terima kasih kepada pihak-pihak yang

telah membantu terselesaikannya tugas akhir ini.

Surabaya, 17 Nopember 2006

M. Taqiyuddin Fanani

ii
 DAFTAR ISI

ABSTRAK ............................................................................................................... i
T T

KATA PENEGANTAR ......................................................................................... ii

T T

UCAPAN TERIMAKASIH ................................................................................... iii

T T

DAFTAR ISI .......................................................................................................... vi

T T

DAFTAR GAMBAR ............................................................................................. ix

T T

DAFTAR TABEL ................................................................................................... x

T T

BAB I PENDAHULUAN ....................................................................................... 1

T T

1.1 Latar Belakang .............................................................................................. 1

T T

1.2 Tujuan ........................................................................................................... 2

T T

1.3 Permasalahan ................................................................................................ 2

T T

1.4 Batasan Masalah ........................................................................................... 3

T T

1.5 Metodologi Pembuatan Tugas Akhir ............................................................ 4

T T

1.6 Sistematika Penulisan ................................................................................... 6

T T

BAB II TEKNOLOGI APLIKASI WEB................................................................ 8

T T

2.1 Sejarah Teknologi Aplikasi Web .................................................................. 8

T T

2.1.1 Common Gateway Inteface .................................................................... 9

T T

2.1.2 Applet ................................................................................................... 10

T T

2.1.3 JavaScript ............................................................................................. 11

T T

2.1.4 Servlet, ASP, PHP ................................................................................ 12

T T

2.1.5 Flash ..................................................................................................... 13

T T

2.1.6 Revolusi DHTML ................................................................................ 14

T T

2.1.7 Turunan dari XML ............................................................................... 14

T T

2.2 Framework .NET......................................................................................... 15

T T

2.2.1 Commom Language Runtime(CLR) .................................................... 15

T T

2.2.2 Framework Base Classes ..................................................................... 17

T T

2.2.3 Kelas untuk Data dan XML ................................................................. 17

T T

2.2.4 Web Service ......................................................................................... 17

T T

2.2.5 Web Forms ........................................................................................... 17

T T

2.2.6 Windows Forms ................................................................................... 18

T T

2.3 Web 2.0 ....................................................................................................... 18

T T

BAB III ASYNCHRONOUS JAVASCRIPT AND XML(AJAX) ...................... 20

T T

3.1 Pengertian.................................................................................................... 20
T T

3.2 Tradisional versus AJAX ............................................................................ 24

T T

3.3 Komunikasi dengan Server ......................................................................... 27

T T

vi
 3.4 Atlas Sebagai Framework Pihak Ketiga ..................................................... 31
T T

3.4.1 Pengenalan Atlas .................................................................................. 32

T T

3.4.2 Atlas membuat JavaScript lebih mudah ............................................... 33

T T

3.4.3 Atlas Data Access ................................................................................ 37

T T

3.4.4 Form Auth, Profile dan Membership ................................................... 46

T T

3.4.5 Mengkonsumsi Web Services dengan ATLAS ................................... 48

T T

BAB IV ANALISA DAN IMPLEMENTASI AJAX PADA WARGAME ......... 53

T T

4.1 Deskripsi Umum Sistem WarGame ............................................................ 53

T T

4.1.1 Arsitektur Sistem.................................................................................. 54

T T

4.1.1.1 3D Client ....................................................................................... 55

T T

4.1.1.2 Web Client .................................................................................... 56

T T

4.1.1.3 Simulation Engine ......................................................................... 56

T T

4.1.1.4 Data Access Layer......................................................................... 57

T T

4.1.2 Desain Sistem ....................................................................................... 57

T T

4.2 Kebutuhan Realtime .................................................................................... 60

T T

4.3 Desain dan Implementasi AJAX pada sistem ............................................. 62

T T

4.3.1 Grid ...................................................................................................... 62

T T

4.3.1.1 Use Case Diagram ......................................................................... 63

T T

4.3.1.2 Sequence Diagram ........................................................................ 66

T T

4.3.1.3 Class Diagram ............................................................................... 81

T T

4.3.2 Tab ....................................................................................................... 83

T T

4.3.2.1 Use Case Diagram ......................................................................... 84

T T

4.3.2.2 Sequence Diagram ........................................................................ 85

T T

4.3.2.3 Class Diagram ............................................................................... 88

T T

4.3.3 Realtime Grid ....................................................................................... 89

T T

4.3.3.1 Use Case Diagram ......................................................................... 90

T T

4.3.3.2 Sequence Diagram ........................................................................ 91

T T

4.3.3.3 Class Diagram ............................................................................... 92

T T

BAB V................................................................................................................... 94
T T

5.1 Lingkungan Uji Coba .................................................................................. 94

T T

5.2 Skenario Uji Coba ....................................................................................... 95

T T

5.2.1 Uji Coba Kontrol Pada WarGame........................................................ 95

T T

5.2.1.1 Uji Coba Kontrol Grid .................................................................. 96

T T

5.2.1.2 Uji Coba Kontrol Tab ................................................................. 103

T T

5.2.1.3 Uji Coba Relatime Grid .............................................................. 104

T T

5.3 Evaluasi Uji Coba ..................................................................................... 106

T T

5.3.1 Evaluasi Uji Coba Kontrol Grid......................................................... 106

T T

5.3.2 Evaluasi Uji Coba Kontrol Tab .......................................................... 107

T T

5.3.3 Evaluasi Uji Coba Realtime Grid....................................................... 108

T T

BAB VI ............................................................................................................... 110

T T

6.1 Kesimpulan ............................................................................................... 110

T T

6.1.1 Kelebihan ........................................................................................... 110

T T

6.1.2 Kelemahan ......................................................................................... 111

T T

vii
 6.2 Saran.......................................................................................................... 111
T T

DAFTAR PUSTAKA ......................................................................................... 113

T T

viii
 DAFTAR GAMBAR

Gambar 2.2.1-1 Framework .NET ........................................................................ 16

Gambar 3.2-1 Interaksi client-server aplikasi web tradisional.............................. 24

Gambar 3.2-2 Interaksi client-server aplikasi web AJAX .................................... 26
Gambar 3.2-3 Arsitektur Model Client AJAX...................................................... 27

Gambar 4.1.1.1-1 Arsitektur WarGame................................................................ 55

Gambar 4.1.1.4-1 Use Case Diagram dengan aktor Pasis dan Wasdal................. 58
Gambar 4.1.1.4-2 Use Case Diagram dengan aktor Administrator ...................... 59
Gambar 4.3.1.1-1 Use Case Diagram Grid ........................................................... 63
Gambar 4.3.1.2-1 Sequence Diagram edit Grid dengan teknik tradisional .......... 68
Gambar 4.3.1.2-2 Sequence Diagram edit Grid dengan teknik AJAX ................. 70
Gambar 4.3.1.2-3 Sequence Diagram delete Grid dengan teknik tradisional....... 72
Gambar 4.3.1.2-4 Sequence Diagram delete Grid dengan teknik AJAX.............. 74
Gambar 4.3.1.2-5 Sequence Diagram select Grid dengan teknik tradisional ....... 76
Gambar 4.3.1.2-6 Sequence Diagram select Grid dengan teknik AJAX .............. 77
Gambar 4.3.1.2-7 Sequence Diagram insert Grid dengan teknik tradisional........ 78
Gambar 4.3.1.2-8 Sequence Diagram insert Grid dengan teknik AJAX .............. 80
Gambar 4.3.1.3-1 Class Diagram Grid dengan teknik AJAX bag-1..................... 81
Gambar 4.3.1.3-2 Class Diagram Grid dengan teknik AJAX bag-2..................... 82
Gambar 4.3.2.1-1 Use Case Diagram untuk kontrol Tab...................................... 84
Gambar 4.3.2.2-1 Sequence Diagram untuk use case tab index dengan teknik
AJAX .................................................................................................................... 85
Gambar 4.3.2.2-2 Sequence Diagram untuk tab index dengan teknik tradisional 87
Gambar 4.3.2.3-1 Class Diagram untuk kontrol tab ............................................. 88
Gambar 4.3.3.1-1 Use Case Diagram untuk realtime grid.................................... 90
Gambar 4.3.3.2-1 Sequence Diagram untuk realtime grid.................................... 91
Gambar 4.3.3.3-1 Class Diagram untuk Realtime Grid ........................................ 92

Gambar 5.2.1.1-1 Form yang berisi grid yang belum mendapat event................. 96
Gambar 5.2.1.1-2 Kontrol grid sedang dalam proses pindah halaman ................. 97
Gambar 5.2.1.1-3 Grid setelah proses update paging selesai................................ 98
Gambar 5.2.1.1-4 Grid menerima event klik onEdit............................................ 99
Gambar 5.2.1.1-5 Grid menampilkan form edit.................................................. 100
Gambar 5.2.1.1-6 Grid sedang melakukan update.............................................. 100
Gambar 5.2.1.1-7 Grid sedang proses menampilkan form pencarian................. 101
Gambar 5.2.1.1-8 Grid sedang melakukan proses pencarian.............................. 102
Gambar 5.2.1.1-9 Grid menampilkan hasil pencarian ........................................ 102
Gambar 5.2.1.2-1 Tab pada kondisi awal ........................................................... 103
Gambar 5.2.1.2-2 Tab Container sedang dalam proses karena event klik.......... 103
Gambar 5.2.1.2-3 Tab setelah selesai proses klik pada indek ke-3..................... 104
Gambar 5.2.1.3-1 Uji Coba Realtime Grid pada WarGame web........................ 105

ix
 DAFTAR TABEL

Tabel 3.3-1 Properti dari XMLHTTP Request ..................................................... 30

Tabel 3.3-2 Method dari XMLHTTP Request...................................................... 30

Tabel 4.3.1.1-1 Use Case Specification untuk Edit .............................................. 64

Tabel 4.3.1.1-2 Use Case Specification untuk Delete........................................... 64
Tabel 4.3.1.1-3 Use Case Specification untuk Select ........................................... 65
Tabel 4.3.1.1-4 Use Case Specification untuk Insert ............................................ 66
Tabel 4.3.2.1-1 Use Case Specification untuk Use Case Tab Index..................... 84
Tabel 4.3.3.1-1 Use Case Specification untuk Realtime Grid .............................. 90

Tabel 5.1-1 Lingkungan Pengujian Aplikasi ........................................................ 94