Penggunaan Teknologi AJAX Asynchronous J
PENGGUNAAN TEKNOLOGI AJAX (ASYNCHRONOUS JAVASCRIPT AND XML)
PADA APLIKASI WEBSITE PENERIMAAN MAHASISWA BARU UNIVERSITAS MATANA
(THE USE OF AJAX TECHNOLOGY IN NEW STUDENTS REGISTRATION WEBSITE
AT MATANA UNIVERSITY)
Himawan1, Ignatius Joko Dewanto2, dan Muhammad Ghurfata Rumara3
1
Program Studi Teknik Informatika, STMIK Raharja
Jl. Jendral Sudirman No. 40 Tangerang 15117
e-mail:[email protected]
Abstrak
Teknologi website pada awalnya hanya menggunakan HTML yang digunakan untuk
menampilkan konten-konten yang bersifat statis (web 1.0). Pada perkembangannya
terutama pada era website modern (web 2.0), penggunaan bahasa HTML
dikombinasikan dengan bahasa-bahasa pemrograman web yang dinamis seperti
PHP, ASP.Net, dan JSP. Untuk dapat membuat halaman website menjadi lebih
interaktif dan responsif, penggunaan bahasa-bahasa pemrograman tersebut belum
cukup. Oleh karena itu, muncul teknologi AJAX yang dapat menghasilkan halaman
website yang lebih responsif dan interaktif. Penggunaan teknologi AJAX pada
aplikasi website modern juga membuat halaman website dapat di-load dengan lebih
cepat dan menghemat penggunaan bandwith koneksi jaringan internet karena proses
transfer data yang terjadi secara asynchronous antara klien dengan server. Tujuan
utama yang ingin dicapai pada penelitian ini adalah untuk melihat mekanisme
proses transfer data yang terjadi dan juga perbandingan tingkat kecepatan akses
antara komputer klien dengan server (web dan database server) terutama pada
halaman website yang menggunakan teknologi AJAX. Metode penelitian yang
digunakan adalah studi kasus (case study) dan juga studi analisis literature review
dari beberapa penelitian yang terkait dengan penggunaan teknologi AJAX. Melalui
penelitian ini, model engine AJAX yang merupakan fungsi dalam JavaScript dapat
dipelajari dengan baik untuk menghasilkan model halaman website yang memiliki
tingkat konektifitas yang baik antara komputer klien yang terhubung dengan server.
Kata kunci: AJAX, pemrograman web, web 2.0, website interaktif
Abstract
Formerly, website technology only used HTML to display static content (web 1.0),
then in the modern era, modern website was developed (web 2.0). The use of
HTML language was combined with dynamic web programming languages such as
PHP, ASP.Net, and JSP. However, in order to make the website page become more
interactive and responsive, the use of dynamic web programming languages was not
enough, therefore a technology that called as AJAX was created. This application
is able to make website page becomes more responsive and interactive. The use of
AJAX technology in modern website applications can also make the website page
load faster and save the bandwidth usage of the internet network connection due to
the asynchronous data transfer process between the client and the server. This study
was aimed to find out the mechanism of data transfer process and the comparison
98
Penggunaan Teknologi Ajax (Himawan, dkk.)
of access speed level between client computer and the server (web and database
server), especially on the website page using AJAX technology. This study used
case study method and literature review analysis. Through this research, the AJAX
engine model contained in JavaScript programming can be analyzed to produce
better level of connectivity between client computers and the server.
Keywords: AJAX, web programming, web 2.0, interactive website
PENDAHULUAN
Pertama, model website statis (web
Website sebagai media penyampaian
1.0) yang digagas dan ditemukan pertama
informasi memegang peranan yang sangat
kali oleh Tim Berners-Lee, dimana model
penting dalam era informasi digital. Dengan
website 1.0 yang hanya mengutamakan
menggunakan
halaman
penggunaan script atau kode HTML (Hyper
website, beraneka ragam informasi dapat
Text Markup Language) dan juga sedikit
dicari dan ditampilkan dengan mudah oleh
menggunakan CSS (Cascading Style Sheet)
para
dukungan
dalam menampilkan isi konten yang statis
dari teknologi jaringan internet juga yang
pada halaman website (Cheng & Yi, 2017). Isi
semakin mudah diakses terutama dalam
konten yang ditampilkan hanya bisa dibaca
kurun waktu 5-10 tahun terakhir, angka
atau dilihat oleh para pengunjung halaman
pertumbuhan
mengalami
website, tanpa adanya fitur atau fasilitas
peningkatan yang sangat signifikan. Hal
yang bisa digunakan untuk berkomunikasi
ini memberikan banyak dampak positif
secara langsung baik dengan pemilik website
bagi para pengembang aplikasi khususnya
maupun para pengunjung lainnya.
atau
membuka
penggunanya.
website
Dengan
juga
bagi para programmer yang memiliki
kemampuan
dalam
bidang
Kedua, model website open platform
teknologi
(web 2.0) yang digagas oleh Tim O’Reilly
bahasa pemrograman berbasis web. Melihat
pada tahun 2005 merupakan sebuah model
teknologi website yang jauh lebih maju
website yang bersifat baca-tulis (read-write)
dibandingkan dengan model teknologi yang
dimana para pengguna atau anggota dari
digunakan pada aplikasi desktop, membuat
sebuah website dapat berkontribusi untuk
para programmer lebih tertarik untuk
“meng-update” dan menyebarkan isi konten
membuat beragam jenis model aplikasi
yang ada pada halaman website kepada
web. Hal ini sejalan dengan perkembangan
anggota yang lainnya. Pada model web 2.0,
model teknologi website dari masa ke masa
halaman website yang ditampilkan menjadi
yang mengalami perubahan. Perkembangan
lebih interaktif dan juga responsif. Hal
tersebut adalah sebagai berikut.
tersebut dikarenakan proses komunikasi atau
99
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
transfer data antara komputer klien dengan
utama yang digunakan oleh model web 3.0
server dilakukan secara asynchronous. Pada
adalah penggunaan Resource Description
model website 2.0 terdapat beberapa varian
Framework (RDF), RDF Schema (RDFS),
teknologi yang digunakan untuk proses
bahasa query untuk RDF yaitu SPARQL
pembuatannya yaitu penggunaan AJAX
dan Simple Knowledge Organization System
(Asynchronous
(Maria, Sagayaraj, & Anthony, 2014).
JavaScript
and
XML),
JSON (JavaScript ObjectNotation), DOM
Keempat, model Website Symbiotic atau
(Document Object Model), serta penggunaan
Ubiquitous Pragmatic (web 4.0) merupakan
bahasa pemrograman web dinamis seperti
model website yang dapat dikatakan sebagai
JSP (Java Server Pages), ASP (Active Server
role model bagi teknologi website di masa
Pages) dan PHP (Hypertext Preprocessor)
yang akan datang. Belum banyak hal yang
(Cheng & Yi, 2017; Sneha & Khatwar,
dapat disampaikan dan ditulis mengenai
2015).
model website ini. Hal tersebut dikarenakan
Ketiga, model Website Semantik (web
masih terbatasnya sumber atau bahan
3.0) merupakan sebuah model website
literatur yang membahas secara jelas dan
yang
spesifik mengenai model website 4.0.
pertama
kali
dimunculkan
dan
diperkenalkan oleh Tim Berners-Lee pada
Dari model-model teknologi website
tahun 2001, yang kemudian dilanjutkan oleh
yang telah dijelaskan pada
John Markoff dari majalah New York Times
sebelumnya, Gambar 1 akan menampilkan
pada tahun 2006. Model web semantik
visualisasi dari perkembangan teknologi
merupakan sebuah fase atau tahapan baru
website dimulai dari model web 1.0 sampai
dalam perkembangan teknologi web yang
dengan model web 4.0, yang masing-masing
akan digunakan di masa yang akan datang.
model memberikan beragam fitur yang baru.
Model
teknik
Pembahasan yang akan disampaikan
kecerdasan buatan (artificial intelligence)
pada penulisan artikel jurnal ini, utamanya
yang digunakan untuk melakukan proses
adalah melanjutkan penelitian yang telah
analisa dari penggunaan metadata yang
dilakukan
sebelumnya
oleh
digunakan dalam data mining terhadap
mengenai
penggunaan
teknologi
pola hasil pencarian yang dilakukan oleh
2.0 (Himawan, Dedeh, & Asep, 2017).
mesin tanpa adanya interfensi atau campur
Namun,
tangan manusia terhadap hasil pencarian
pada pembahasan mengenai penggunaan
yang ditampilkan pada halaman website
teknologi AJAX pada halaman website dan
(Wadhwa,
dampak pengaruhnya terhadap kecepatan
100
web
3.0
2015).
menggunakan
poin-poin
Beberapa
teknologi
dengan
lebih
Himawan
web
memfokuskan
Penggunaan Teknologi Ajax (Himawan, dkk.)
Gambar 1. Model Evolusi Perubahan Teknologi Website (Sumber : www.urenio.org)
akses (waktu load) sebuah halaman website,
server, halaman website yang ditampilkan
terutama pada bagian fungsi engine AJAX,
akan menjadi lebih interaktif dan lebih cepat
untuk dapat mengetahui serta mempelajari
untuk di-load oleh para pengunjung halaman
penggunaan fungsi-fungsi yang ada pada
website. Hal tersebut akan meringankan
JavaScript, salah satunya adanya fungsi
kinerja dari server jika terjadi lonjakan
XMLHttpRequest.
penggunaan
atau banyaknya permintaan (request) yang
dan pemanggilan fungsi XMLHttpRequest
dilakukan oleh banyak pengunjung dalam
memegang peranan yang sangat penting
waktu yang bersamaan dan juga akan terdapat
dalam hal proses transfer dan komunikasi
pengurangan penggunaan bandwith baik
yang dilakukan oleh klien dan server
oleh komputer klien dan juga dari sisi server.
secara asynchronous. Mengapa hal tersebut
Atas dasar itulah, penulisan dan penelitian
menjadi penting dan menarik untuk dibahas
mengenai
dalam penulisan artikel ini? Jawabannya
aplikasi website modern dilanjutkan kembali
adalah dengan adanya proses transfer
dalam artikel ini untuk dapat menjelaskan
dan komunikasi yang dilakukan secara
dengan lebih baik lagi mengenai penggunaan
asynchronous oleh komputer klien dan
teknologi AJAX yang dapat meningkatkan
Dimana
penggunaan AJAX
terhadap
101
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
kinerja dari halaman website baik dari sisi
peningkatan jumlah permintaan (requests)
pengguna (klien) dan juga dari sisi server
yang dilakukan oleh klien. Selain itu, pada
(web dan database server).
penelitian ini juga akan dilakukan proses
simulasi yang ditampilkan dalam bentuk
METODE PENELITIAN
data tabel dan grafik batang, untuk melihat
Analisis Studi Kasus dan Studi Literatur
kecepatan load halaman-halaman website
Penelitian
yang
dituangkan
dalam
yang menggunakan teknologi AJAX untuk
bentuk tulisan jurnal ini adalah berdasarkan
dibandingkan
dengan
halaman-halaman
studi kasus dan studi literatur yang pernah
website yang tidak menggunakan teknologi
dilakukan sebelumnya oleh beberapa peneliti
AJAX.
terkait dengan penggunaan teknologi AJAX
pada website modern. Jadi terdapat dua
Studi Kasus Website Penerimaan Maha-
metode penelitian yang digunakan oleh
siswa Baru (PMB) Universitas Matana
peneliti terkait dengan pembahasan teknologi
Penelitian
mengenai
teknologi
AJAX yaitu dengan menggunakan studi kasus
AJAX yang dibahas pada artikel ini akan
pada contoh website yang menggunakan
menggunakan contoh website (subdomain)
teknologi AJAX dan studi literature review
pada
dari beberapa jurnal internasional yang
digunakan oleh para calon mahasiswa baru
akan dituliskan dalam subbab selanjutnya.
untuk dapat melakukan pendaftaran atau
Pada kedua metode penelitian yang dipilih
proses registrasi secara online, tanpa perlu
dan juga digunakan dalam penelitian ini,
mendatangi langsung bagian pendaftaran
didasari pada bahwa penggunaan teknologi
yang ada di Universitas Matana. Terdapat
AJAX pada website-website modern dapat
beberapa
dipelajari, diidentifikasi dan juga dipahami
PMB
dengan baik dengan cara mempelajari
menggunakan
pembahasan-pembahasan yang telah di-
dilakukan pengujian atau uji coba terhadap
lakukan oleh para peneliti lain terkait dengan
kecepatan akses berdasarkan jumlah request
penggunaan teknologi AJAX. Penggunaan
dari user yang akan dilakukan menggunakan
metode studi kasus, didasari untuk mem-
model simulasi. Sebelumnya peneliti ingin
buktikan bahwa
menyampaikan
penggunaan teknologi
Universitas
halaman
Universitas
Matana
yang
web
pada
Matana
teknologi
bahwa
akan
website
yang
AJAX
telah
untuk
nama-nama
file
AJAX dapat membuat halaman website
(halaman web) tidak dapat dituliskan atau
menjadi lebih responsif dan juga membantu
disebutkan secara detail, karena semua
meringankan kinerja dari server jika terjadi
halaman web yang akan dilakukan pengujian
102
Penggunaan Teknologi Ajax (Himawan, dkk.)
adalah halaman web asli (real) yang ada
hasilkan
halaman
website
yang
dapat
pada subdomain Universitas Matana yang
diakses dengan lebih cepat dan ringan
digunakan untuk kegiatan PMB, selain
oleh para pengunjung halaman website.
itu karena alasan atau faktor privacy dan
Teknologi AJAX merupakan gabungan dari
keamanan.
penggunaan beberapa teknologi lain yaitu:
XMLHttpRequest, Document Object Model
(DOM), Cascading Style Sheet (CSS), dan
Studi Literature Review
Metode penelitian ke-2 yang telah
Extensible Markup Language (XML). Selain
disebutkan secara singkat pada subbab
itu, pada penelitian tersebut juga dijelaskan
sebelumnya adalah dengan menggunakan
model arsitektur dari AJAX yaitu mengenai
literature review dari beberapa sumber
penggunaan AJAX Engine untuk melakukan
jurnal-jurnal internasional yang didapatkan
proses transfer (perpindahan) data yang
oleh peneliti. Dari jurnal-jurnal tersebut
dilakukan oleh komputer klien dengan server.
akan digunakan sebagai bahan referensi
Kedua, studi yang dilakukan oleh
utama dan bahan perbandingan untuk dapat
Mesbah pada penulisan dan penelitian
melihat yang telah dicapai pada masing-
tesisnya (2009). Dalam penelitian tersebut
masing penelitian yang telah dilakukan.
terdapat poin-poin menarik mengenai model
Selain itu, literature review dari jurnal-jurnal
teknologi website tradisional (web 1.0) yang
tersebut juga akan digunakan sebagai studi
menggunakan banyak halaman (multi-page)
untuk mempelajari mengenai pembahasan
yaitu jika pengunjung meng-klik sebuah link
teknologi AJAX
dengan
atau menu yang ada pada halaman website,
kelebihan serta kekurangan dari penggunaan
akan menuju atau diarahkan kepada halaman
teknologi AJAX pada sebuah website.
web yang baru. Model website tradisional
Berikut ini adalah beberapa literature review
tersebut digantikan dengan model web 2.0
yang digunakan oleh peneliti sebagai bahan
(asynchronous) yang tidak memerlukan
referensi dan studi perbandingan mengenai
perpindahan halaman yang berbeda, jika
penggunaan AJAX.
user mengirimkan permintaan (request)
yang
terkait
Pertama, studi yang dilakukan oleh
kepada web server.
Hussaini, Tabassum, dan Baig (2013).
Ketiga, studi yang dilakukan Sanjaya dan
Penelitian yang telah dilakukan tersebut
Brahmawong (2007). Dalam penelitiannya
membahas
tek-
disebutkan bahwa penggunaan teknologi
nologi AJAX pada model website RIA
AJAX dapat mengurangi waktu tunggu dari
(Rich Internet Applications) untuk meng-
permintaan (request) yang dilakukan oleh
mengenai
penggunaan
103
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
klien terhadap server dan dapat meringankan
(MVC) juga memiliki pengaruh yang cukup
kerja dari pemintaan yang dilakukan oleh
penting
klien, terlebih jika jumlah permintaan yang
AJAX untuk mendukung metode Rapid
dilakukan oleh klien dalam jumlah banyak
Application
dan terjadi dalam waktu yang berdekatan.
proses perancangan dan pembuatan aplikasi
Selain itu, dalam penelitian tersebut juga
perangkat lunak. Selain itu, dijelaskan
dijelaskan bahwa penggunaan teknologi
juga dalam penelitiannya tersebut bahwa
AJAX dapat mengurangi atau menghemat
penggunaan AJAX dapat meningkatkan
penggunaan bandwith dari koneksi jaringan
performa dan kecepatan akses (waktu load)
internet antara klien dengan server. Hal
dari sebuah website.
dalam
penggunaan
Development
teknologi
(RAD)
pada
tersebut dapat terjadi karena server hanya
Dari beberapa literature review yang
akan mengirimkan sebagian data (parsial)
digunakan oleh peneliti terkait dengan tulisan
dan bukan seluruhnya kepada klien untuk
mengenai penggunaan teknologi AJAX,
semua
peneliti dapat menyimpulkan beberapa hal
permintaan
yang
dikirimkan
oleh masing-masing klien. Hal ini yang
dalam poin-poin berikut.
menunjukkan bahwa aplikasi web yang
Pertama, penggunaan teknologi AJAX
menggunakan AJAX akan memiliki respon
merupakan salah satu solusi yang dapat
yang lebih baik terhadap permintaan klien
digunakan untuk membuat halaman website
jika dibandingkan dengan teknologi yang
menjadi lebih cepat untuk diakses bagi
digunakan pada halaman web tradisional.
para penggunanya. Selain itu, penggunaan
Keempat, studi yang dilakukan oleh
AJAX juga dapat meringankan kinerja dari
Nalaka dan Dias (2014) menjelaskan tentang
sisi server karena proses pertukaran data
survei yang dilakukan terhadap tingkat
yang dilakukan antara komputer klien dan
kesulitan dan kerumitan yang akan ditemui
server terjadi secara asynchronous dan
jika sebuah website ingin menggunakan
dibelakang layar. Sehingga user tidak perlu
teknologi AJAX di dalamnya. Hal tersebut
mengetahui bagaimana proses pertukaran
dikarenakan teknologi AJAX memiliki
dan pengiriman data yang terjadi antara
tingkat kompleksitas yang berbeda jika
server dengan klien.
dibandingkan dengan penggunaan teknologi
Kedua, penggunaan teknologi AJAX
pada model website tradisional yang hanya
akan menghemat penggunaan bandwith
menggunakan HTML. Dalam penelitian
yang digunakan untuk mengakses halaman
tersebut juga dijelaskan bahwa penggunaan
website. Hal tersebut akan menjadi sebuah
framework berbasis Model View Controller
keuntungan terutama bagi klien yang
104
Penggunaan Teknologi Ajax (Himawan, dkk.)
memiliki akses koneksi internet yang terbatas
terjadi perbedaan mekanisme pengiriman
untuk dapat membuka atau mengakses
atau transfer data antara server dengan
halaman website.
klien. Pengiriman data yang dilakukan oleh
Ketiga, tidak adanya teknologi khusus
server yang menggunakan teknologi AJAX
atau baru yang digunakan untuk dapat
tidak memerlukan proses “refresh” atau
mengimplementasikan penggunaan AJAX
load seluruhnya pada halaman web. Hal
akan menjadi sebuah kelebihan tersendiri.
tersebut dapat terjadi karena proses transfer
Artinya, teknologi AJAX tidak bergantung
data yang dilakukan secara asynchronous
kepada sebuah platform atau media tertentu
yang berarti bahwa setiap permintaan yang
saja
pada
dilakukan oleh klien akan terus dikirimkan
penggunaan software atau aplikasi tertentu
sampai dengan server memberikan respon
untuk dapat mengimplementasikan teknologi
atau umpan balik kepada klien.
sehingga
tidak
membatasi
Berikut adalah poin-poin mengenai
AJAX pada sebuah website.
teknologi
cara kerja AJAX dalam hal penggunaan
AJAX akan menghasilkan halaman website
engine AJAX terutama pada penggunaan
yang lebih responsif dan interaktif jika
fungsi XMLHttpRequest yang ada pada
dibandingkan dengan halaman website yang
pemrograman JavaScript. Fungsi tersebut
hanya mengutamakan penggunaan HTML
akan digunakan untuk memproses permintaan
dalam menampilkan isi konten yang ada
yang dilakukan oleh user terhadap server.
Keempat,
penggunaan
Pertama, klien mengirimkan permintaan
dalam sebuah halaman website.
kepada server. Permintaan tersebut tidak
HASIL DAN PEMBAHASAN
secara langsung direspon oleh server,
Model Arsitektur Website dengan Tekno-
melainkan diterima terlebih dahulu oleh
logi AJAX
engine AJAX.
Penggunaan teknologi AJAX pada
Kedua, pada engine AJAX terdapat
halaman website akan bertumpu pada engine
sebuah fungsi yaitu XMLHttpRequest,
AJAX untuk menangani dan memproses
dengan menggunakan fungsi tersebut maka
setiap permintaan yang dilakukan oleh
permintaan klien akan direspon oleh engine
klien terhadap server. Hal inilah perbedaan
AJAX untuk kemudian diteruskan kepada
antara
server.
halaman
website
klasik
atau
tradisional dengan halaman website yang
Ketiga, engine AJAX berjalan di dalam
AJAX.
browser pada masing-masing komputer
Dengan menggunakan teknologi AJAX,
klien. Engine AJAX akan berfungsi sebagai
telah
menggunakan
teknologi
105
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
penghubung atau jembatan antara aplikasi
AJAX yang digunakan pada sebuah website
web dengan server.
yang
Keempat,
penggunaan
diakses
berdasarkan
permintaan
fungsi
yang dilakukan oleh klien. Data-data yang
XMLHttpRequest membuat server hanya
ditampilkan pada halaman website di
perlu untuk mengirimkan sebagian data
komputer klien telah dikirimkan sebelumnya
(parsial) saja kepada klien tanpa perlu untuk
(secara parsial) oleh engine AJAX dalam
mengirimkan seluruh data atau konten yang
bentuk format file XML ataupun bisa
ada dalam halaman web. Halaman web
menggunakan format lainnya. Proses update
yang ditampilkan akan menjadi halaman
yang terjadi pada komputer klien tidak perlu
web yang dinamis atau Dynamic HTML
seluruhnya melainkan hanya sebagian data
(DHTML) (Deokar, Uchade, Tayde, Shelke,
saja yang perlu di-update.
& Jawandhiya, 2017).
Kelima, tanpa adanya engine AJAX dan
fungsi XMLHttpRequest, setiap permintaan
Halaman Aplikasi PMB Universitas Matana
Pada
bagian
ini
akan
dijelaskan
akan dikirim langsung kepada server dan
mengenai halaman-halaman web yang ada
hal ini akan membebani kinerja dari server,
pada aplikasi PMB Universitas Matana.
terutama jika terjadi lonjakan permintaan
Namun demikian, tidak semua halaman
dalam jumlah yang banyak dan terjadi dalam
atau menu yang ada pada aplikasi PMB
waktu yang hampir bersamaan.
Universitas Matana akan digunakan dalam
Gambar 2 memperlihatkan mengenai
pengujian mengenai penggunaan teknologi
model arsitektur dari penggunaan teknologi
AJAX, melainkan hanya tujuh halaman
Gambar 2. Model Arsitektur Penggunaan Teknologi AJAX
106
Penggunaan Teknologi Ajax (Himawan, dkk.)
saja yang akan dijelaskan dan dilakukan
pendataan terhadap para calon mahasiswa
pengujian untuk pengukuran kecepatan akses
baru yang telah melakukan pendaftaran atau
(waktu load). Halaman web tersebut adalah
registrasi secara online. Tampilan output
sebagai berikut: home.php., tampil data calon
pertama (Gambar 3) adalah halaman yang
mahasiswa, tampil data calon mahasiswa
menampilkan data-data registrasi calon
berdasarkan jurusan, halaman detail informasi
mahasiswa baru yang sudah melakukan
calon mahasiswa, tampil data statistik calon
pendaftaran baik secara online maupun
mahasiswa, halaman form registrasi calon
datang langsung ke Universitas Matana
mahasiswa, dan halaman proses simpan data
(bagian
registrasi calon mahasiswa.
Halaman ini juga akan menampilkan status
resepsionis
pendaftaran
dari
atau
marketing).
masing-masing
calon
Perbandingan Kecepatan Akses Model
mahasiswa yaitu yang sudah pasti akan
Website Klasik dengan Website Berbasis
menjadi calon mahasiswa baru, kemudian
AJAX
status pending dan terakhir status tidak jadi
Pembahasan mengenai subbab perban-
atau membatalkan proses pendaftaran.
dingan kecepatan akses halaman website
Gambar 4 adalah penggalan kode
yang dilakukan pada penelitian ini, akan
program atau script yang digunakan untuk
menggunakan studi kasus website penerima-
melakukan pencarian data yang dapat
an mahasiswa baru pada Universitas Matana
melakukan “penyaringan” atau filtering data
yang telah dijelaskan pada bagian subbab
secara asycnchronous dengan memanfaatkan
studi kasus sebelumnya. Pengujian kecepatan
teknologi AJAX.
akses menggunakan parameter-parameter
Gambar 5 adalah tampilan output
berikut: jumlah permintaan (request) yang
halaman web aplikasi PMB Universitas
akan dilakukan oleh klien pada halaman
Matana yang digunakan untuk menampilkan
website, ukuran halaman website (Teknologi
data
AJAX) dengan halaman website (Non-
penerimaan calon mahasiswa baru sesuai
AJAX), dan perhitungan waktu kecepatan
dengan program studi masing-masing untuk
akses (loadtime) berdasarkan akumulasi
setiap tahun akademik baru yang akan
jumlah request dari klien.
dimulai pada periode yang akan datang.
Berikut ini adalah beberapa hasil
statistik
terkait
dengan
jumlah
Halaman ini akan sangat bermanfaat,
dari halaman-halaman
terutama bagi pihak marketing dan juga
web yang ada pada aplikasi PMB yang
pihak-pihak yang terlibat pada setiap
digunakan oleh Universitas Matana dalam
program studi masing-masing, misalnya
tampilan
output
107
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
Gambar 3. Halaman Tampil Data Calon Mahasiswa Baru
Gambar 4. Penggalan Kode Program Tampil Data Calon Mahasiswa Baru
108
Penggunaan Teknologi Ajax (Himawan, dkk.)
Gambar 5. Tampilan Data Statistik Jumlah Calon Mahasiswa Baru Berdasarkan
Pilihan Program Studi
kepala program studi dan juga dekan.
akan ditampilkan fungsi XMLHttpRequest
Data statistik yang akan ditampilkan pada
yang ada pada pemrograman JavaScript
halaman ini akan berupa grafik batang (bar
yang digunakan untuk melakukan proses
chart) dan tersedia pilihan berupa combobox
transfer data antara klien dengan server
atau drop-down untuk memilih tahun periode
yang dapat terjadi secara asynchronous dan
penerimaan dan seleksi calon mahasiswa
penggunaan Google Chart API (Application
baru yang ada pada Universitas Matana.
Programming Interface). Penggunaan fungsi
Gambar
6
menyajikan
tampilan
XMLHttpRequest membuat halaman web
penggalan kode program yang digunakan
tidak perlu melakukan proses refresh atau
untuk menampilkan data statistik jumlah
load pada saat menampilkan data-data yang
calon mahasiswa baru berdasarkan pilihan
ada pada sisi server.
program studi yang telah dipilih oleh
Pada bagian penggalan program yang
masing-masing calon mahasiswa pada saat
ditunjukkan pada Gambar 6, terdapat hal
melakukan pendaftaran baik secara online
yang menarik yaitu pada bagian pemanggilan
maupun datang langsung ke Universitas
fungsi XMLHttpRequest. Terdapat perbeda-
Matana. Pada penggalan kode berikut
an antara browser yang berasal dari keluarga
109
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
Gambar 6. Penggalan Kode Program Penggunaan Fungsi XMLHttpRequest
Internet Explorer dengan browser-browser
website yang di-load. Ketika halaman
populer lainnya seperti Mozilla Firefox atau
website
Google Chrome. Hal tersebut terjadi karena
AJAX akan di-load oleh user, fungsi create-
perbedaan teknologi atau mekanisme dalam
RequestObject()
menjalankan script atau kode program
browser yang digunakan oleh user, yaitu
dari pemrograman JavaScript untuk setiap
internet explorer atau noninternet explorer.
yang
menggunakan
akan
teknologi
memeriksa
jenis
browser. Browser-browser yang dibuat
Bagian pembahasan berikutnya adalah
oleh Microsoft yaitu Internet Explorer
mengenai hasil dari simulasi pengujian ha-
mulai dari versi 4 dan yang lebih tinggi,
laman website PMB Universitas Matana yang
menggunakan script engine ActiveXObject
menggunakan teknologi AJAX dan tidak
untuk menjalankan berbagai fungsi yang
menggunakan teknologi AJAX yang akan di-
ada pada pemrograman JavaScript terutama
tampilkan menggunakan data Tabel 1 dan 2.
penggunaan teknologi AJAX setiap halaman
110
Penggunaan Teknologi Ajax (Himawan, dkk.)
Tabel 1
Halaman Website PMB Matana (NonAJAX)
No
1
2
3
4
5
6
7
Nama Halaman
Website
home.php
tampil data calon mahasiswa
tampil data calon mahasiswa
berdasarkan jurusan
detail informasi calon
mahasiswa
data statistik calon mahasiswa
form registrasi calon
mahasiswa
halaman proses Simpan data
Registrasi
Ukuran
Halaman
Website
0,82 Kb
10,3 Kb
Jumlah
Request
dari Klien
30
30
Kecepatan Waktu
Akses
(dalam detik)
5,78
6,43
3,37 Kb
30
4,76
1,46 Kb
30
2,37
2,78 Kb
30
3,85
20,9 Kb
30
8,72
2,68 Kb
30
1,29
Kecepatan
Waktu
Akses
3,86
Tabel 2. Halaman Website PMB Matana (dengan AJAX)
1
home.php
1,33 Kb
Jumlah
Request
dari Klien
30
2
3
tampil data calon mahasiswa
tampil data calon mahasiswa
berdasarkan jurusan
detail informasi calon
mahasiswa
11,3 Kb
5,41 Kb
30
30
4,21
3,67
2,15 Kb
30
1,85
4,07 Kb
21,7 Kb
30
30
1,14
5,53
4,48 Kb
30
1,12
No
4
5
6
7
Nama Halaman
Website
Ukuran Halaman
Website
data statistik calon mahasiswa
form registrasi calon
mahasiswa
halaman proses Simpan data
Registrasi
Gambar 7 menyajikan grafik statistik
yang menunjukkan perbandingan kecepatan
tidak menggunakan teknologi AJAX di
dalamnya.
akses aplikasi PMB Universitas Matana
Berdasarkan hasil pengujian yang telah
antara halaman web yang menggunakan
ditunjukkan pada Gambar 4, Tabel 1, dan
teknologi AJAX dengan halaman web yang
Tabel 2, dapat dilihat bahwa penggunaan
111
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
Gambar 7. Grafik Statistik Perbandingan Kecepatan Akses Web AJAX vs Non-AJAX
teknologi AJAX pada halaman website PMB
SIMPULAN
Universitas Matana menunjukkan penurunan
Penggunaan teknologi AJAX pada web-
waktu tunggu oleh pengunjung yang mengak-
site modern merupakan salah satu langkah
ses halaman-halaman atau menu yang ada
yang digunakan untuk mengurangi waktu
pada website PMB Universitas Matana.
tunggu bagi para user atau pengunjung yang
Walaupun demikian penurunan waktu tunggu
mengakses sebuah halaman website. Selain
tidak terlihat signifikan pada beberapa
itu, penggunaan AJAX dapat mengurangi
halaman yang dijadikan contoh atau sample
atau meminimalkan penggunaan koneksi
pengujian. Hal tersebut dapat terjadi karena
bandwith sehingga kinerja dari server dapat
beberapa faktor berikut: kecepatan koneksi
tetap terjaga dengan baik dan optimal.
internet pengunjung, kondisi server yang ada
Hasil
pada saat menerima permintaan dari pengun-
penggunaan AJAX, terutama penggunaan
jung, waktu akses (pagi, siang, sore, malam
fungsi XMLHttpRequest dapat memberikan
atau dini hari), dan halaman yang ditampilkan
hasil yang cukup optimal terutama untuk
banyak menampilkan gambar atau grafik.
penurunan waktu akses untuk setiap request
112
pengujian
menunjukkan
bahwa
Penggunaan Teknologi Ajax (Himawan, dkk.)
yang dilakukan oleh klien, walaupun
terjadi jumlah permintaan yang dilakukan
cukup banyak. Hal tersebut karena proses
pengiriman data yang dilakukan oleh
engine AJAX kepada klien terjadi secara
asynchronous
sehingga
mempersingkat
waktu tunggu dari setiap request yang
dilakukan oleh klien terhadap server.
DAFTAR PUSTAKA
Cheng, L., & Yi, C. (2017). A survey of
world wide web evolution with respect
to security issues. PeerJ Preprints,
Diunduh dari: https://doi.org/10.7287/
peerj.preprints.2793v1.
Deokar, R. S., Uchade, C. S., Tayde, A. K.,
Shelke, J. B., & Jawandhiya, P. M. (2017,
April). Web Application Languages:
A review. International Journal of
Research in Advent Technology (IJRAT),
Special Issue National Conference
“CONVERGENCE 2017”, pp. 72-78.
Himawan, Dedeh, S., & Asep, S. (2017).
Penggunaan teknologi web 2.0 dan
dampak perubahannya pada aplikasi
website
berbasis
Rich
Internet
Application (RIA).Jurnal ULTIMATICS.
Hussaini, S., A., Tabassum, S. N., & Baig,
M. K. (2013). AJAX architecture
implementation techniques. International Journal of Engineering Research
and Applications (IJERA), 3(2), 111-117.
Maria, D., Sagayaraj, F., & Anthony, P. (2014)
E-learning in web 3.0. International
Journal of Modern Education and
Computer Science (IJMECS), 2, 8-14.
DOI:10.5815/ijmecs.2014.02.02.
Mesbah, A. (2009). Analysis and testing
of AJAX-based single-page web
applications (Dissertation). Delft University of Technology, Delft, Belanda.
Nalaka, R. D., & Dias, G. K. A. (2014).
Essential features a general AJAX rich
internet application architecture should
have in order to support rapid application
development. International Journal of
Future Computer and Communication,
3(5), 350-353.
Sanjaya, R., & Brahmawong, C. (2007).
Distance Examination using AJAX to
Reduce Web Server Load and Student’s
Data Transfer, Fourth International
Conference
on
eLearning
for
Knowledge-Based Society, Bangkok,
November 18-19.
Sneha, K. A., & Khatwar, D. M. (2015).
Evolving web application with AJAX
– A review. International Journal
of Innovative Research in Science,
Engineering and Technology (IJIRSET),
4(11).
Wadhwa, D. (2015). A study of web 3.0
technologies for collaborative learning.
International Journal of Engineering
Technology, Management and Applied
Sciences, 3(Special Issue), 92-97.
113
PADA APLIKASI WEBSITE PENERIMAAN MAHASISWA BARU UNIVERSITAS MATANA
(THE USE OF AJAX TECHNOLOGY IN NEW STUDENTS REGISTRATION WEBSITE
AT MATANA UNIVERSITY)
Himawan1, Ignatius Joko Dewanto2, dan Muhammad Ghurfata Rumara3
1
Program Studi Teknik Informatika, STMIK Raharja
Jl. Jendral Sudirman No. 40 Tangerang 15117
e-mail:[email protected]
Abstrak
Teknologi website pada awalnya hanya menggunakan HTML yang digunakan untuk
menampilkan konten-konten yang bersifat statis (web 1.0). Pada perkembangannya
terutama pada era website modern (web 2.0), penggunaan bahasa HTML
dikombinasikan dengan bahasa-bahasa pemrograman web yang dinamis seperti
PHP, ASP.Net, dan JSP. Untuk dapat membuat halaman website menjadi lebih
interaktif dan responsif, penggunaan bahasa-bahasa pemrograman tersebut belum
cukup. Oleh karena itu, muncul teknologi AJAX yang dapat menghasilkan halaman
website yang lebih responsif dan interaktif. Penggunaan teknologi AJAX pada
aplikasi website modern juga membuat halaman website dapat di-load dengan lebih
cepat dan menghemat penggunaan bandwith koneksi jaringan internet karena proses
transfer data yang terjadi secara asynchronous antara klien dengan server. Tujuan
utama yang ingin dicapai pada penelitian ini adalah untuk melihat mekanisme
proses transfer data yang terjadi dan juga perbandingan tingkat kecepatan akses
antara komputer klien dengan server (web dan database server) terutama pada
halaman website yang menggunakan teknologi AJAX. Metode penelitian yang
digunakan adalah studi kasus (case study) dan juga studi analisis literature review
dari beberapa penelitian yang terkait dengan penggunaan teknologi AJAX. Melalui
penelitian ini, model engine AJAX yang merupakan fungsi dalam JavaScript dapat
dipelajari dengan baik untuk menghasilkan model halaman website yang memiliki
tingkat konektifitas yang baik antara komputer klien yang terhubung dengan server.
Kata kunci: AJAX, pemrograman web, web 2.0, website interaktif
Abstract
Formerly, website technology only used HTML to display static content (web 1.0),
then in the modern era, modern website was developed (web 2.0). The use of
HTML language was combined with dynamic web programming languages such as
PHP, ASP.Net, and JSP. However, in order to make the website page become more
interactive and responsive, the use of dynamic web programming languages was not
enough, therefore a technology that called as AJAX was created. This application
is able to make website page becomes more responsive and interactive. The use of
AJAX technology in modern website applications can also make the website page
load faster and save the bandwidth usage of the internet network connection due to
the asynchronous data transfer process between the client and the server. This study
was aimed to find out the mechanism of data transfer process and the comparison
98
Penggunaan Teknologi Ajax (Himawan, dkk.)
of access speed level between client computer and the server (web and database
server), especially on the website page using AJAX technology. This study used
case study method and literature review analysis. Through this research, the AJAX
engine model contained in JavaScript programming can be analyzed to produce
better level of connectivity between client computers and the server.
Keywords: AJAX, web programming, web 2.0, interactive website
PENDAHULUAN
Pertama, model website statis (web
Website sebagai media penyampaian
1.0) yang digagas dan ditemukan pertama
informasi memegang peranan yang sangat
kali oleh Tim Berners-Lee, dimana model
penting dalam era informasi digital. Dengan
website 1.0 yang hanya mengutamakan
menggunakan
halaman
penggunaan script atau kode HTML (Hyper
website, beraneka ragam informasi dapat
Text Markup Language) dan juga sedikit
dicari dan ditampilkan dengan mudah oleh
menggunakan CSS (Cascading Style Sheet)
para
dukungan
dalam menampilkan isi konten yang statis
dari teknologi jaringan internet juga yang
pada halaman website (Cheng & Yi, 2017). Isi
semakin mudah diakses terutama dalam
konten yang ditampilkan hanya bisa dibaca
kurun waktu 5-10 tahun terakhir, angka
atau dilihat oleh para pengunjung halaman
pertumbuhan
mengalami
website, tanpa adanya fitur atau fasilitas
peningkatan yang sangat signifikan. Hal
yang bisa digunakan untuk berkomunikasi
ini memberikan banyak dampak positif
secara langsung baik dengan pemilik website
bagi para pengembang aplikasi khususnya
maupun para pengunjung lainnya.
atau
membuka
penggunanya.
website
Dengan
juga
bagi para programmer yang memiliki
kemampuan
dalam
bidang
Kedua, model website open platform
teknologi
(web 2.0) yang digagas oleh Tim O’Reilly
bahasa pemrograman berbasis web. Melihat
pada tahun 2005 merupakan sebuah model
teknologi website yang jauh lebih maju
website yang bersifat baca-tulis (read-write)
dibandingkan dengan model teknologi yang
dimana para pengguna atau anggota dari
digunakan pada aplikasi desktop, membuat
sebuah website dapat berkontribusi untuk
para programmer lebih tertarik untuk
“meng-update” dan menyebarkan isi konten
membuat beragam jenis model aplikasi
yang ada pada halaman website kepada
web. Hal ini sejalan dengan perkembangan
anggota yang lainnya. Pada model web 2.0,
model teknologi website dari masa ke masa
halaman website yang ditampilkan menjadi
yang mengalami perubahan. Perkembangan
lebih interaktif dan juga responsif. Hal
tersebut adalah sebagai berikut.
tersebut dikarenakan proses komunikasi atau
99
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
transfer data antara komputer klien dengan
utama yang digunakan oleh model web 3.0
server dilakukan secara asynchronous. Pada
adalah penggunaan Resource Description
model website 2.0 terdapat beberapa varian
Framework (RDF), RDF Schema (RDFS),
teknologi yang digunakan untuk proses
bahasa query untuk RDF yaitu SPARQL
pembuatannya yaitu penggunaan AJAX
dan Simple Knowledge Organization System
(Asynchronous
(Maria, Sagayaraj, & Anthony, 2014).
JavaScript
and
XML),
JSON (JavaScript ObjectNotation), DOM
Keempat, model Website Symbiotic atau
(Document Object Model), serta penggunaan
Ubiquitous Pragmatic (web 4.0) merupakan
bahasa pemrograman web dinamis seperti
model website yang dapat dikatakan sebagai
JSP (Java Server Pages), ASP (Active Server
role model bagi teknologi website di masa
Pages) dan PHP (Hypertext Preprocessor)
yang akan datang. Belum banyak hal yang
(Cheng & Yi, 2017; Sneha & Khatwar,
dapat disampaikan dan ditulis mengenai
2015).
model website ini. Hal tersebut dikarenakan
Ketiga, model Website Semantik (web
masih terbatasnya sumber atau bahan
3.0) merupakan sebuah model website
literatur yang membahas secara jelas dan
yang
spesifik mengenai model website 4.0.
pertama
kali
dimunculkan
dan
diperkenalkan oleh Tim Berners-Lee pada
Dari model-model teknologi website
tahun 2001, yang kemudian dilanjutkan oleh
yang telah dijelaskan pada
John Markoff dari majalah New York Times
sebelumnya, Gambar 1 akan menampilkan
pada tahun 2006. Model web semantik
visualisasi dari perkembangan teknologi
merupakan sebuah fase atau tahapan baru
website dimulai dari model web 1.0 sampai
dalam perkembangan teknologi web yang
dengan model web 4.0, yang masing-masing
akan digunakan di masa yang akan datang.
model memberikan beragam fitur yang baru.
Model
teknik
Pembahasan yang akan disampaikan
kecerdasan buatan (artificial intelligence)
pada penulisan artikel jurnal ini, utamanya
yang digunakan untuk melakukan proses
adalah melanjutkan penelitian yang telah
analisa dari penggunaan metadata yang
dilakukan
sebelumnya
oleh
digunakan dalam data mining terhadap
mengenai
penggunaan
teknologi
pola hasil pencarian yang dilakukan oleh
2.0 (Himawan, Dedeh, & Asep, 2017).
mesin tanpa adanya interfensi atau campur
Namun,
tangan manusia terhadap hasil pencarian
pada pembahasan mengenai penggunaan
yang ditampilkan pada halaman website
teknologi AJAX pada halaman website dan
(Wadhwa,
dampak pengaruhnya terhadap kecepatan
100
web
3.0
2015).
menggunakan
poin-poin
Beberapa
teknologi
dengan
lebih
Himawan
web
memfokuskan
Penggunaan Teknologi Ajax (Himawan, dkk.)
Gambar 1. Model Evolusi Perubahan Teknologi Website (Sumber : www.urenio.org)
akses (waktu load) sebuah halaman website,
server, halaman website yang ditampilkan
terutama pada bagian fungsi engine AJAX,
akan menjadi lebih interaktif dan lebih cepat
untuk dapat mengetahui serta mempelajari
untuk di-load oleh para pengunjung halaman
penggunaan fungsi-fungsi yang ada pada
website. Hal tersebut akan meringankan
JavaScript, salah satunya adanya fungsi
kinerja dari server jika terjadi lonjakan
XMLHttpRequest.
penggunaan
atau banyaknya permintaan (request) yang
dan pemanggilan fungsi XMLHttpRequest
dilakukan oleh banyak pengunjung dalam
memegang peranan yang sangat penting
waktu yang bersamaan dan juga akan terdapat
dalam hal proses transfer dan komunikasi
pengurangan penggunaan bandwith baik
yang dilakukan oleh klien dan server
oleh komputer klien dan juga dari sisi server.
secara asynchronous. Mengapa hal tersebut
Atas dasar itulah, penulisan dan penelitian
menjadi penting dan menarik untuk dibahas
mengenai
dalam penulisan artikel ini? Jawabannya
aplikasi website modern dilanjutkan kembali
adalah dengan adanya proses transfer
dalam artikel ini untuk dapat menjelaskan
dan komunikasi yang dilakukan secara
dengan lebih baik lagi mengenai penggunaan
asynchronous oleh komputer klien dan
teknologi AJAX yang dapat meningkatkan
Dimana
penggunaan AJAX
terhadap
101
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
kinerja dari halaman website baik dari sisi
peningkatan jumlah permintaan (requests)
pengguna (klien) dan juga dari sisi server
yang dilakukan oleh klien. Selain itu, pada
(web dan database server).
penelitian ini juga akan dilakukan proses
simulasi yang ditampilkan dalam bentuk
METODE PENELITIAN
data tabel dan grafik batang, untuk melihat
Analisis Studi Kasus dan Studi Literatur
kecepatan load halaman-halaman website
Penelitian
yang
dituangkan
dalam
yang menggunakan teknologi AJAX untuk
bentuk tulisan jurnal ini adalah berdasarkan
dibandingkan
dengan
halaman-halaman
studi kasus dan studi literatur yang pernah
website yang tidak menggunakan teknologi
dilakukan sebelumnya oleh beberapa peneliti
AJAX.
terkait dengan penggunaan teknologi AJAX
pada website modern. Jadi terdapat dua
Studi Kasus Website Penerimaan Maha-
metode penelitian yang digunakan oleh
siswa Baru (PMB) Universitas Matana
peneliti terkait dengan pembahasan teknologi
Penelitian
mengenai
teknologi
AJAX yaitu dengan menggunakan studi kasus
AJAX yang dibahas pada artikel ini akan
pada contoh website yang menggunakan
menggunakan contoh website (subdomain)
teknologi AJAX dan studi literature review
pada
dari beberapa jurnal internasional yang
digunakan oleh para calon mahasiswa baru
akan dituliskan dalam subbab selanjutnya.
untuk dapat melakukan pendaftaran atau
Pada kedua metode penelitian yang dipilih
proses registrasi secara online, tanpa perlu
dan juga digunakan dalam penelitian ini,
mendatangi langsung bagian pendaftaran
didasari pada bahwa penggunaan teknologi
yang ada di Universitas Matana. Terdapat
AJAX pada website-website modern dapat
beberapa
dipelajari, diidentifikasi dan juga dipahami
PMB
dengan baik dengan cara mempelajari
menggunakan
pembahasan-pembahasan yang telah di-
dilakukan pengujian atau uji coba terhadap
lakukan oleh para peneliti lain terkait dengan
kecepatan akses berdasarkan jumlah request
penggunaan teknologi AJAX. Penggunaan
dari user yang akan dilakukan menggunakan
metode studi kasus, didasari untuk mem-
model simulasi. Sebelumnya peneliti ingin
buktikan bahwa
menyampaikan
penggunaan teknologi
Universitas
halaman
Universitas
Matana
yang
web
pada
Matana
teknologi
bahwa
akan
website
yang
AJAX
telah
untuk
nama-nama
file
AJAX dapat membuat halaman website
(halaman web) tidak dapat dituliskan atau
menjadi lebih responsif dan juga membantu
disebutkan secara detail, karena semua
meringankan kinerja dari server jika terjadi
halaman web yang akan dilakukan pengujian
102
Penggunaan Teknologi Ajax (Himawan, dkk.)
adalah halaman web asli (real) yang ada
hasilkan
halaman
website
yang
dapat
pada subdomain Universitas Matana yang
diakses dengan lebih cepat dan ringan
digunakan untuk kegiatan PMB, selain
oleh para pengunjung halaman website.
itu karena alasan atau faktor privacy dan
Teknologi AJAX merupakan gabungan dari
keamanan.
penggunaan beberapa teknologi lain yaitu:
XMLHttpRequest, Document Object Model
(DOM), Cascading Style Sheet (CSS), dan
Studi Literature Review
Metode penelitian ke-2 yang telah
Extensible Markup Language (XML). Selain
disebutkan secara singkat pada subbab
itu, pada penelitian tersebut juga dijelaskan
sebelumnya adalah dengan menggunakan
model arsitektur dari AJAX yaitu mengenai
literature review dari beberapa sumber
penggunaan AJAX Engine untuk melakukan
jurnal-jurnal internasional yang didapatkan
proses transfer (perpindahan) data yang
oleh peneliti. Dari jurnal-jurnal tersebut
dilakukan oleh komputer klien dengan server.
akan digunakan sebagai bahan referensi
Kedua, studi yang dilakukan oleh
utama dan bahan perbandingan untuk dapat
Mesbah pada penulisan dan penelitian
melihat yang telah dicapai pada masing-
tesisnya (2009). Dalam penelitian tersebut
masing penelitian yang telah dilakukan.
terdapat poin-poin menarik mengenai model
Selain itu, literature review dari jurnal-jurnal
teknologi website tradisional (web 1.0) yang
tersebut juga akan digunakan sebagai studi
menggunakan banyak halaman (multi-page)
untuk mempelajari mengenai pembahasan
yaitu jika pengunjung meng-klik sebuah link
teknologi AJAX
dengan
atau menu yang ada pada halaman website,
kelebihan serta kekurangan dari penggunaan
akan menuju atau diarahkan kepada halaman
teknologi AJAX pada sebuah website.
web yang baru. Model website tradisional
Berikut ini adalah beberapa literature review
tersebut digantikan dengan model web 2.0
yang digunakan oleh peneliti sebagai bahan
(asynchronous) yang tidak memerlukan
referensi dan studi perbandingan mengenai
perpindahan halaman yang berbeda, jika
penggunaan AJAX.
user mengirimkan permintaan (request)
yang
terkait
Pertama, studi yang dilakukan oleh
kepada web server.
Hussaini, Tabassum, dan Baig (2013).
Ketiga, studi yang dilakukan Sanjaya dan
Penelitian yang telah dilakukan tersebut
Brahmawong (2007). Dalam penelitiannya
membahas
tek-
disebutkan bahwa penggunaan teknologi
nologi AJAX pada model website RIA
AJAX dapat mengurangi waktu tunggu dari
(Rich Internet Applications) untuk meng-
permintaan (request) yang dilakukan oleh
mengenai
penggunaan
103
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
klien terhadap server dan dapat meringankan
(MVC) juga memiliki pengaruh yang cukup
kerja dari pemintaan yang dilakukan oleh
penting
klien, terlebih jika jumlah permintaan yang
AJAX untuk mendukung metode Rapid
dilakukan oleh klien dalam jumlah banyak
Application
dan terjadi dalam waktu yang berdekatan.
proses perancangan dan pembuatan aplikasi
Selain itu, dalam penelitian tersebut juga
perangkat lunak. Selain itu, dijelaskan
dijelaskan bahwa penggunaan teknologi
juga dalam penelitiannya tersebut bahwa
AJAX dapat mengurangi atau menghemat
penggunaan AJAX dapat meningkatkan
penggunaan bandwith dari koneksi jaringan
performa dan kecepatan akses (waktu load)
internet antara klien dengan server. Hal
dari sebuah website.
dalam
penggunaan
Development
teknologi
(RAD)
pada
tersebut dapat terjadi karena server hanya
Dari beberapa literature review yang
akan mengirimkan sebagian data (parsial)
digunakan oleh peneliti terkait dengan tulisan
dan bukan seluruhnya kepada klien untuk
mengenai penggunaan teknologi AJAX,
semua
peneliti dapat menyimpulkan beberapa hal
permintaan
yang
dikirimkan
oleh masing-masing klien. Hal ini yang
dalam poin-poin berikut.
menunjukkan bahwa aplikasi web yang
Pertama, penggunaan teknologi AJAX
menggunakan AJAX akan memiliki respon
merupakan salah satu solusi yang dapat
yang lebih baik terhadap permintaan klien
digunakan untuk membuat halaman website
jika dibandingkan dengan teknologi yang
menjadi lebih cepat untuk diakses bagi
digunakan pada halaman web tradisional.
para penggunanya. Selain itu, penggunaan
Keempat, studi yang dilakukan oleh
AJAX juga dapat meringankan kinerja dari
Nalaka dan Dias (2014) menjelaskan tentang
sisi server karena proses pertukaran data
survei yang dilakukan terhadap tingkat
yang dilakukan antara komputer klien dan
kesulitan dan kerumitan yang akan ditemui
server terjadi secara asynchronous dan
jika sebuah website ingin menggunakan
dibelakang layar. Sehingga user tidak perlu
teknologi AJAX di dalamnya. Hal tersebut
mengetahui bagaimana proses pertukaran
dikarenakan teknologi AJAX memiliki
dan pengiriman data yang terjadi antara
tingkat kompleksitas yang berbeda jika
server dengan klien.
dibandingkan dengan penggunaan teknologi
Kedua, penggunaan teknologi AJAX
pada model website tradisional yang hanya
akan menghemat penggunaan bandwith
menggunakan HTML. Dalam penelitian
yang digunakan untuk mengakses halaman
tersebut juga dijelaskan bahwa penggunaan
website. Hal tersebut akan menjadi sebuah
framework berbasis Model View Controller
keuntungan terutama bagi klien yang
104
Penggunaan Teknologi Ajax (Himawan, dkk.)
memiliki akses koneksi internet yang terbatas
terjadi perbedaan mekanisme pengiriman
untuk dapat membuka atau mengakses
atau transfer data antara server dengan
halaman website.
klien. Pengiriman data yang dilakukan oleh
Ketiga, tidak adanya teknologi khusus
server yang menggunakan teknologi AJAX
atau baru yang digunakan untuk dapat
tidak memerlukan proses “refresh” atau
mengimplementasikan penggunaan AJAX
load seluruhnya pada halaman web. Hal
akan menjadi sebuah kelebihan tersendiri.
tersebut dapat terjadi karena proses transfer
Artinya, teknologi AJAX tidak bergantung
data yang dilakukan secara asynchronous
kepada sebuah platform atau media tertentu
yang berarti bahwa setiap permintaan yang
saja
pada
dilakukan oleh klien akan terus dikirimkan
penggunaan software atau aplikasi tertentu
sampai dengan server memberikan respon
untuk dapat mengimplementasikan teknologi
atau umpan balik kepada klien.
sehingga
tidak
membatasi
Berikut adalah poin-poin mengenai
AJAX pada sebuah website.
teknologi
cara kerja AJAX dalam hal penggunaan
AJAX akan menghasilkan halaman website
engine AJAX terutama pada penggunaan
yang lebih responsif dan interaktif jika
fungsi XMLHttpRequest yang ada pada
dibandingkan dengan halaman website yang
pemrograman JavaScript. Fungsi tersebut
hanya mengutamakan penggunaan HTML
akan digunakan untuk memproses permintaan
dalam menampilkan isi konten yang ada
yang dilakukan oleh user terhadap server.
Keempat,
penggunaan
Pertama, klien mengirimkan permintaan
dalam sebuah halaman website.
kepada server. Permintaan tersebut tidak
HASIL DAN PEMBAHASAN
secara langsung direspon oleh server,
Model Arsitektur Website dengan Tekno-
melainkan diterima terlebih dahulu oleh
logi AJAX
engine AJAX.
Penggunaan teknologi AJAX pada
Kedua, pada engine AJAX terdapat
halaman website akan bertumpu pada engine
sebuah fungsi yaitu XMLHttpRequest,
AJAX untuk menangani dan memproses
dengan menggunakan fungsi tersebut maka
setiap permintaan yang dilakukan oleh
permintaan klien akan direspon oleh engine
klien terhadap server. Hal inilah perbedaan
AJAX untuk kemudian diteruskan kepada
antara
server.
halaman
website
klasik
atau
tradisional dengan halaman website yang
Ketiga, engine AJAX berjalan di dalam
AJAX.
browser pada masing-masing komputer
Dengan menggunakan teknologi AJAX,
klien. Engine AJAX akan berfungsi sebagai
telah
menggunakan
teknologi
105
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
penghubung atau jembatan antara aplikasi
AJAX yang digunakan pada sebuah website
web dengan server.
yang
Keempat,
penggunaan
diakses
berdasarkan
permintaan
fungsi
yang dilakukan oleh klien. Data-data yang
XMLHttpRequest membuat server hanya
ditampilkan pada halaman website di
perlu untuk mengirimkan sebagian data
komputer klien telah dikirimkan sebelumnya
(parsial) saja kepada klien tanpa perlu untuk
(secara parsial) oleh engine AJAX dalam
mengirimkan seluruh data atau konten yang
bentuk format file XML ataupun bisa
ada dalam halaman web. Halaman web
menggunakan format lainnya. Proses update
yang ditampilkan akan menjadi halaman
yang terjadi pada komputer klien tidak perlu
web yang dinamis atau Dynamic HTML
seluruhnya melainkan hanya sebagian data
(DHTML) (Deokar, Uchade, Tayde, Shelke,
saja yang perlu di-update.
& Jawandhiya, 2017).
Kelima, tanpa adanya engine AJAX dan
fungsi XMLHttpRequest, setiap permintaan
Halaman Aplikasi PMB Universitas Matana
Pada
bagian
ini
akan
dijelaskan
akan dikirim langsung kepada server dan
mengenai halaman-halaman web yang ada
hal ini akan membebani kinerja dari server,
pada aplikasi PMB Universitas Matana.
terutama jika terjadi lonjakan permintaan
Namun demikian, tidak semua halaman
dalam jumlah yang banyak dan terjadi dalam
atau menu yang ada pada aplikasi PMB
waktu yang hampir bersamaan.
Universitas Matana akan digunakan dalam
Gambar 2 memperlihatkan mengenai
pengujian mengenai penggunaan teknologi
model arsitektur dari penggunaan teknologi
AJAX, melainkan hanya tujuh halaman
Gambar 2. Model Arsitektur Penggunaan Teknologi AJAX
106
Penggunaan Teknologi Ajax (Himawan, dkk.)
saja yang akan dijelaskan dan dilakukan
pendataan terhadap para calon mahasiswa
pengujian untuk pengukuran kecepatan akses
baru yang telah melakukan pendaftaran atau
(waktu load). Halaman web tersebut adalah
registrasi secara online. Tampilan output
sebagai berikut: home.php., tampil data calon
pertama (Gambar 3) adalah halaman yang
mahasiswa, tampil data calon mahasiswa
menampilkan data-data registrasi calon
berdasarkan jurusan, halaman detail informasi
mahasiswa baru yang sudah melakukan
calon mahasiswa, tampil data statistik calon
pendaftaran baik secara online maupun
mahasiswa, halaman form registrasi calon
datang langsung ke Universitas Matana
mahasiswa, dan halaman proses simpan data
(bagian
registrasi calon mahasiswa.
Halaman ini juga akan menampilkan status
resepsionis
pendaftaran
dari
atau
marketing).
masing-masing
calon
Perbandingan Kecepatan Akses Model
mahasiswa yaitu yang sudah pasti akan
Website Klasik dengan Website Berbasis
menjadi calon mahasiswa baru, kemudian
AJAX
status pending dan terakhir status tidak jadi
Pembahasan mengenai subbab perban-
atau membatalkan proses pendaftaran.
dingan kecepatan akses halaman website
Gambar 4 adalah penggalan kode
yang dilakukan pada penelitian ini, akan
program atau script yang digunakan untuk
menggunakan studi kasus website penerima-
melakukan pencarian data yang dapat
an mahasiswa baru pada Universitas Matana
melakukan “penyaringan” atau filtering data
yang telah dijelaskan pada bagian subbab
secara asycnchronous dengan memanfaatkan
studi kasus sebelumnya. Pengujian kecepatan
teknologi AJAX.
akses menggunakan parameter-parameter
Gambar 5 adalah tampilan output
berikut: jumlah permintaan (request) yang
halaman web aplikasi PMB Universitas
akan dilakukan oleh klien pada halaman
Matana yang digunakan untuk menampilkan
website, ukuran halaman website (Teknologi
data
AJAX) dengan halaman website (Non-
penerimaan calon mahasiswa baru sesuai
AJAX), dan perhitungan waktu kecepatan
dengan program studi masing-masing untuk
akses (loadtime) berdasarkan akumulasi
setiap tahun akademik baru yang akan
jumlah request dari klien.
dimulai pada periode yang akan datang.
Berikut ini adalah beberapa hasil
statistik
terkait
dengan
jumlah
Halaman ini akan sangat bermanfaat,
dari halaman-halaman
terutama bagi pihak marketing dan juga
web yang ada pada aplikasi PMB yang
pihak-pihak yang terlibat pada setiap
digunakan oleh Universitas Matana dalam
program studi masing-masing, misalnya
tampilan
output
107
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
Gambar 3. Halaman Tampil Data Calon Mahasiswa Baru
Gambar 4. Penggalan Kode Program Tampil Data Calon Mahasiswa Baru
108
Penggunaan Teknologi Ajax (Himawan, dkk.)
Gambar 5. Tampilan Data Statistik Jumlah Calon Mahasiswa Baru Berdasarkan
Pilihan Program Studi
kepala program studi dan juga dekan.
akan ditampilkan fungsi XMLHttpRequest
Data statistik yang akan ditampilkan pada
yang ada pada pemrograman JavaScript
halaman ini akan berupa grafik batang (bar
yang digunakan untuk melakukan proses
chart) dan tersedia pilihan berupa combobox
transfer data antara klien dengan server
atau drop-down untuk memilih tahun periode
yang dapat terjadi secara asynchronous dan
penerimaan dan seleksi calon mahasiswa
penggunaan Google Chart API (Application
baru yang ada pada Universitas Matana.
Programming Interface). Penggunaan fungsi
Gambar
6
menyajikan
tampilan
XMLHttpRequest membuat halaman web
penggalan kode program yang digunakan
tidak perlu melakukan proses refresh atau
untuk menampilkan data statistik jumlah
load pada saat menampilkan data-data yang
calon mahasiswa baru berdasarkan pilihan
ada pada sisi server.
program studi yang telah dipilih oleh
Pada bagian penggalan program yang
masing-masing calon mahasiswa pada saat
ditunjukkan pada Gambar 6, terdapat hal
melakukan pendaftaran baik secara online
yang menarik yaitu pada bagian pemanggilan
maupun datang langsung ke Universitas
fungsi XMLHttpRequest. Terdapat perbeda-
Matana. Pada penggalan kode berikut
an antara browser yang berasal dari keluarga
109
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
Gambar 6. Penggalan Kode Program Penggunaan Fungsi XMLHttpRequest
Internet Explorer dengan browser-browser
website yang di-load. Ketika halaman
populer lainnya seperti Mozilla Firefox atau
website
Google Chrome. Hal tersebut terjadi karena
AJAX akan di-load oleh user, fungsi create-
perbedaan teknologi atau mekanisme dalam
RequestObject()
menjalankan script atau kode program
browser yang digunakan oleh user, yaitu
dari pemrograman JavaScript untuk setiap
internet explorer atau noninternet explorer.
yang
menggunakan
akan
teknologi
memeriksa
jenis
browser. Browser-browser yang dibuat
Bagian pembahasan berikutnya adalah
oleh Microsoft yaitu Internet Explorer
mengenai hasil dari simulasi pengujian ha-
mulai dari versi 4 dan yang lebih tinggi,
laman website PMB Universitas Matana yang
menggunakan script engine ActiveXObject
menggunakan teknologi AJAX dan tidak
untuk menjalankan berbagai fungsi yang
menggunakan teknologi AJAX yang akan di-
ada pada pemrograman JavaScript terutama
tampilkan menggunakan data Tabel 1 dan 2.
penggunaan teknologi AJAX setiap halaman
110
Penggunaan Teknologi Ajax (Himawan, dkk.)
Tabel 1
Halaman Website PMB Matana (NonAJAX)
No
1
2
3
4
5
6
7
Nama Halaman
Website
home.php
tampil data calon mahasiswa
tampil data calon mahasiswa
berdasarkan jurusan
detail informasi calon
mahasiswa
data statistik calon mahasiswa
form registrasi calon
mahasiswa
halaman proses Simpan data
Registrasi
Ukuran
Halaman
Website
0,82 Kb
10,3 Kb
Jumlah
Request
dari Klien
30
30
Kecepatan Waktu
Akses
(dalam detik)
5,78
6,43
3,37 Kb
30
4,76
1,46 Kb
30
2,37
2,78 Kb
30
3,85
20,9 Kb
30
8,72
2,68 Kb
30
1,29
Kecepatan
Waktu
Akses
3,86
Tabel 2. Halaman Website PMB Matana (dengan AJAX)
1
home.php
1,33 Kb
Jumlah
Request
dari Klien
30
2
3
tampil data calon mahasiswa
tampil data calon mahasiswa
berdasarkan jurusan
detail informasi calon
mahasiswa
11,3 Kb
5,41 Kb
30
30
4,21
3,67
2,15 Kb
30
1,85
4,07 Kb
21,7 Kb
30
30
1,14
5,53
4,48 Kb
30
1,12
No
4
5
6
7
Nama Halaman
Website
Ukuran Halaman
Website
data statistik calon mahasiswa
form registrasi calon
mahasiswa
halaman proses Simpan data
Registrasi
Gambar 7 menyajikan grafik statistik
yang menunjukkan perbandingan kecepatan
tidak menggunakan teknologi AJAX di
dalamnya.
akses aplikasi PMB Universitas Matana
Berdasarkan hasil pengujian yang telah
antara halaman web yang menggunakan
ditunjukkan pada Gambar 4, Tabel 1, dan
teknologi AJAX dengan halaman web yang
Tabel 2, dapat dilihat bahwa penggunaan
111
Jurnal Penelitian Saintek, Vol. 22, Nomor 2, Oktober 2017
Gambar 7. Grafik Statistik Perbandingan Kecepatan Akses Web AJAX vs Non-AJAX
teknologi AJAX pada halaman website PMB
SIMPULAN
Universitas Matana menunjukkan penurunan
Penggunaan teknologi AJAX pada web-
waktu tunggu oleh pengunjung yang mengak-
site modern merupakan salah satu langkah
ses halaman-halaman atau menu yang ada
yang digunakan untuk mengurangi waktu
pada website PMB Universitas Matana.
tunggu bagi para user atau pengunjung yang
Walaupun demikian penurunan waktu tunggu
mengakses sebuah halaman website. Selain
tidak terlihat signifikan pada beberapa
itu, penggunaan AJAX dapat mengurangi
halaman yang dijadikan contoh atau sample
atau meminimalkan penggunaan koneksi
pengujian. Hal tersebut dapat terjadi karena
bandwith sehingga kinerja dari server dapat
beberapa faktor berikut: kecepatan koneksi
tetap terjaga dengan baik dan optimal.
internet pengunjung, kondisi server yang ada
Hasil
pada saat menerima permintaan dari pengun-
penggunaan AJAX, terutama penggunaan
jung, waktu akses (pagi, siang, sore, malam
fungsi XMLHttpRequest dapat memberikan
atau dini hari), dan halaman yang ditampilkan
hasil yang cukup optimal terutama untuk
banyak menampilkan gambar atau grafik.
penurunan waktu akses untuk setiap request
112
pengujian
menunjukkan
bahwa
Penggunaan Teknologi Ajax (Himawan, dkk.)
yang dilakukan oleh klien, walaupun
terjadi jumlah permintaan yang dilakukan
cukup banyak. Hal tersebut karena proses
pengiriman data yang dilakukan oleh
engine AJAX kepada klien terjadi secara
asynchronous
sehingga
mempersingkat
waktu tunggu dari setiap request yang
dilakukan oleh klien terhadap server.
DAFTAR PUSTAKA
Cheng, L., & Yi, C. (2017). A survey of
world wide web evolution with respect
to security issues. PeerJ Preprints,
Diunduh dari: https://doi.org/10.7287/
peerj.preprints.2793v1.
Deokar, R. S., Uchade, C. S., Tayde, A. K.,
Shelke, J. B., & Jawandhiya, P. M. (2017,
April). Web Application Languages:
A review. International Journal of
Research in Advent Technology (IJRAT),
Special Issue National Conference
“CONVERGENCE 2017”, pp. 72-78.
Himawan, Dedeh, S., & Asep, S. (2017).
Penggunaan teknologi web 2.0 dan
dampak perubahannya pada aplikasi
website
berbasis
Rich
Internet
Application (RIA).Jurnal ULTIMATICS.
Hussaini, S., A., Tabassum, S. N., & Baig,
M. K. (2013). AJAX architecture
implementation techniques. International Journal of Engineering Research
and Applications (IJERA), 3(2), 111-117.
Maria, D., Sagayaraj, F., & Anthony, P. (2014)
E-learning in web 3.0. International
Journal of Modern Education and
Computer Science (IJMECS), 2, 8-14.
DOI:10.5815/ijmecs.2014.02.02.
Mesbah, A. (2009). Analysis and testing
of AJAX-based single-page web
applications (Dissertation). Delft University of Technology, Delft, Belanda.
Nalaka, R. D., & Dias, G. K. A. (2014).
Essential features a general AJAX rich
internet application architecture should
have in order to support rapid application
development. International Journal of
Future Computer and Communication,
3(5), 350-353.
Sanjaya, R., & Brahmawong, C. (2007).
Distance Examination using AJAX to
Reduce Web Server Load and Student’s
Data Transfer, Fourth International
Conference
on
eLearning
for
Knowledge-Based Society, Bangkok,
November 18-19.
Sneha, K. A., & Khatwar, D. M. (2015).
Evolving web application with AJAX
– A review. International Journal
of Innovative Research in Science,
Engineering and Technology (IJIRSET),
4(11).
Wadhwa, D. (2015). A study of web 3.0
technologies for collaborative learning.
International Journal of Engineering
Technology, Management and Applied
Sciences, 3(Special Issue), 92-97.
113