PERANCANGAN DAN PEMBUATAN ANTAR MUKA SURAT ELEKTRONIK BERBASIS TEKNOLOGI AJAX

Jurnal TIF, Vol. 1 No. 1, Juli 2010

PERANCANGAN DAN PEMBUATAN ANTAR MUKA SURAT ELEKTRONIK BERBASIS TEKNOLOGI AJAX Bayu Priyambadha, Dwi Sunaryono Sarwosri Fakultas Teknologi Informasi, Institut Teknologi Sepuluh Nopember, Email: [email protected] ABSTRAK Pada umumnya sebuah aplikasi web terdiri dari server web sebagai pemroses dan web browser pada sisi client sebagai sarana menampilkan hasil request ke server. Salah satu contoh aplikasi web adalah aplikasi antar muka email atau webmail. Aplikasi ini bertugas menampilkan email yang ada pada mail server pada browser client. Client dengan menggunakan web browser melakukan request data email ke server, lalu server merespon dengan mengirimkan data email yang diminta client dan ditampilkan pada browser. Aktifitas request dan response tersebut berakibat terjadinya reload halaman pada web browser. Hal tersebut mengakibatkan aplikasi web mail menjadi tidak responsif.Dalam tugas akhir ini digunakan teknolog AJAX untuk memberikan solusi yang bagus dalam menyelesaikan permasalah reload halaman. Teknologi AJAX adalah sebuah teknologi gabungan antara JavaScript, XML dan XMLHttpRequest Object yang dipunyai oleh browser. Ketiganya berkolaborasi untuk melakukan request ke server dengan cara asyncronous sehingga mengakibatkan proses request tidak menimbulkan efek reload halaman. Data hasil request dibentuk dalam XML yang nantinya akan diterima oleh browser. Dalam menampilkan data, XML yang ditangkap oleh browser akan diekstrak menjadi entitas-entitas data. Yang mana entitas data tersebut akan ditampilkan pada browser menggunakan JavaScript dan DOM (Document Object Model) untuk memanipulasi object atau bagian dari halaman HTML.Hasil akhir dari tugas akhir ini adalah akan menunjukan bahwa penggunaan AJAX dalam membuat sebuat aplikasi web mail dapat menyelesaikan masalah reload halaman. Sehingga dengan teknologi tersebut sebuah aplikasi berbasis web akan lebih responsif. Kata kunci : web mail, ajax, javascript, xml, dom, html. ABSTRACT In general a web application consists of a web server as a processor and a web browser on the client side as a tool to display the result. One example of web applications is an electronic mail (e-mail) interface known as webmail. The function of webmail is to retrieve e-mails from a mail server and display them on the browser. A client using a web browser requests e-mails to the server and the server responds by sending the requested e-mails to the browser for display. These request and response activities cause the page on the browser to reload and make the web application unresponsive. This study demonstrates the use of Asynchronous JavaScript and XML (AJAX) technology as a good solution to the page reloading problem in a web mail application. As its name implies, AJAX is a technology produced from a collaboration of JavaScript, XML, and XMLHttlRequest object provided by the web bro wser. To avoid page reloading, first of all, the browser requests data asynchronously to the server using this technology. The result is received in an XML format by the browser and extracted into different data entities. The browser can use these data entities to modify the desired objects or parts of the viewed HTML page. This study shows that the use of AJAX technology in developing a webmail application can solve the page reloading problem in a browser and therefore makes a web-based application more responsive to the user requests. Keyword : web mail, ajax, javascript, xml, dom, html.

1

Bayu Priyambadha, Perancangan dan Pembuatan antar muka Surat Elektronik Berbasis Teknologi Ajax

PENDAHULUAN Aplikasi web adalah aplikasi yang secara fungsional diproses pada sisi server, dan akan menampilkan hasil proses kepada user melalui jaringan seperti internet atau intranet. User menggunakan web browser (thin client) yang hanya dapat menampilkan data yang diterima dari server. Berbeda dengan aplikasi desktop (thick client) yang sebagian besar pemrosesan data dilakukan pada sisi client. Hal ini membuat aplikasi desktop mempunyai nilai plus daripada aplikasi web dari sesi responsibilitasnya. Salah satu contoh aplikasi web yang kita tahu adalah antar muka surat elektronik atau biasa disebut webmail. Webmail berfungsi sebagai sarana user untuk mengirim dan melihat email miliknya. Aplikasi berbasis web kelemahannya adalah tingkat responsibilitasnya kurang seperti adanya refresh halaman pada saat menampilkan data hasil dan adanya jeda waktu untuk menampilkan data setelah user meminta. Keadaan ini dapat diperparah oleh adanya masalah pada jaringan. Jika suatu halaman web dibuat lebih responsife maka web akan lebih menarik dan memudahkan bagi user dalam pengoperasiannya. Dengan menggunakan AJAX (Asynchronous JavaScript and XML), dan Java sebagai pemroses di sisi server, maka sebuah aplikasi webmail dapat dibuat lebih responsif. Sebuah tantangan telah ada di depan mata, yaitu bagaimana kita menggabungkan sebuah aplikasi webmail dengan teknologi AJAX (Asynchronous JavaScript and XML). Dengan beberapa target utama adalah menampilkan email, mengirim email, menghapus email, dan transisi antar halaman tanpa adanya refresh halaman. AJAX Ajax adalah kepanjangan dari Asynchronous JavaScript and XML. AJAX adalah sesuatu yang sudah lama, tetapi juga baru [GRC-06]. Lama karena teknologi Javascript sudah ada sejak dulu, baru karena teknologi yang lama itu dikombinasikan sehingga menimbulkan hal baru. Ajax merubah sebuah paradigma tentang web aplikasi di mata orang [ZFW-06]. Secara

sederhana dapat kita artikan bahwa AJAX adalah JavaScript yang mempunyai kemampuan lebih, karena secara mendasar AJAX menawarkan sebuah teknologi ClientSide yang dapat melakukan pemanggilan server yang bergerak pada background. Pemanggilan tersebut dilakukan oleh JavaScript. Akibat dari proses tersebut adalah aplikasi web tidak akan melakukan reload halaman. Aplikasi server-side adalah sebuah aplikasi yang segala bisnis prosesnya dilakukan pada sisi server. Aplikasi web yang telah banyak digunakan saat ini adalah aplikasi server-side. Proses pemanggilan halaman pada server dapat digambarkan sebagai berikut :

Gambar 1. Alur Request Konvensional Server-Side Aplikasi [DAC-06] Dalam gambar tersebut dapat dijelaskan bahwa klien melakukan pemanggilan halaman web yang berada pada server, dalam hal ini adalah web yang dibangun dengan bahasa Java. Server merespon dengan membangun sebuah data dengan format HTML dan mengirim ke klien. Klien akan dapat melihat hasil respon dari server pada aplikasi browser dihadapannya. Berbeda dengan aplikasi yang dibangun dengan teknologi AJAX, pemanggilan halaman web pada server dengan AJAX dapat digambarkan sebagai berikut :

1.

2

Gambar 2. Alur Request AJAX Server-Side [DAC-06]


Proses request atau pemanggilan halaman web pada aplikasi berbasis AJAX dalam gambar 2 adalah pertama klien melakukan pemanggilan halaman Java pada server. Java akan membangun sebuah halaman HTML yang terdapat JavaScript di dalamnya. Proses selanjutnya request atau pemanggilan halaman pada server dilakukan oleh JavaScript dengan cara Asynchronous atau berjalan pada background. JavaScript JavaScript dulunya dinamai dengan LifeScript, tetapi Netscape mengubah namanya menjadi JavaScript [HEC-06]. JavaScript adalah inti dari teknologi AJAX. Sintak JavaScript sangat mirip dengan bahasa C. JavaScript adalah jenis bahasa ’Parsed Language’ yang tidak membutuhkan proses kompilasi, dan mempunyai kemampuan Object Oriented Programming (OOP). Posisi JavaScript biasanya tidak digunakan sebagai bahasa utama dalam pembangunan sebuah aplikasi web, melainkan sebagai pelengkap untuk mengimplementasikan proses yang berjalan pada sisi klien. Namun pada teknologi AJAX ini JavaScript digunakan sebagai motor penggerak utama aplikasi. JavaScript sangat tergantung dari browser yang dipakai oleh pengguna. Walaupun JavaScript dapat membangkitkan atau memanggil dirinya sendiri, tetapi biasanya JavaScript di-load oleh browser bersamaan script HTML. Dapat pula dikatakan bahwa faktor browser ini adalah sebuah kekurangan dari JavaScript. Namun hanya karena kekurangan tersebut JavaScript tidak akan ditinggalkan oleh para programer web. Berikut ini adalah beberapa kebaikan-kebaikan dalam menggunakan JavaScript pada halaman web. 1. Sedikit berinteraksi dengan server, JavaScript dapat digunakan untuk memvalidasi data tanpa harus berkomunikasi dengan server, hal ini akan menghemat trafik pada server. 2. Memberikan respon balik dengan cepat, pengguna tidak akan menunggu terlalu lama untuk me-reload halaman. 3. Dapat membernarkan kesalahan secara otomatis, misalnya dalam format tanggal JavaScript dapat dengan mudah

4.

5.

2.

6.

7.

mengubah format tanggal pada sisi klien. Meningkatkan usability aplikasi, dengan menggunakan JavaScript antarmuka aplikasi dapat diubah oleh pengguna sercara langsung, misalnya saja proses expanding kolom dalam tabel atau frame. Meningkatkan tingkat reaktifitas aplikasi, pengguna akan ditunjukkan pada suatu antarmuka aplikasi yang sangat interaktif. Memperkaya antarmuka, JavaScript dapat digunakan untuk membuat beberapa fasilitas untuk membuat suatu antarmuka lebih mudah untuk digunakan. Misalnya Drag-and-Drop yang biasanya kita temui pada aplikasi dekstop, dengan JavaScript semua itu dapat terwujud. Ringan, tidak membutuhkan usaha yang besar untuk me-load halaman web yang didalamnya terdapat script JavaScript.

3.

XMLHttpRequest Object XMLHttpRequest Object adalah object yang akan dipakai oleh JavaScript dalam melakukan request atau pemanggilan ke server secara asynchronous atau bergerak di background. Proses request, menerima respon dari server, mengubah bagian elemen dari HTML untuk menampilkan hasil respon dilakukan pada background. Sehingga tidak akan menimbulkan efek interupsi pada halaman depan web. Hal ini sangatlah penting karena akan membuat antarmuka sebuah aplikasi web menjadi sangat responsif ketika melakukan proses requestresponse dengan server. XMLHttpRequest object pada awalnya diimplementasikan oleh Micrososft sebagai ActiveX object pada Internet Explorer. Yang mana akhirnya menjadi sebuah standar untuk seluruh aplikasi browser. Browserbrowser yang telah support dengan XMLHttpRequest adalah Internet Explorer 5.0 atau lebih, Apple Safari 1.2 atau lebih, Mozilla Firefox 1.0 atau lebih, Opera 7.6 atau lebih, dan Netscape 7 atau lebih. Walaupun XMLHttpRequest Object telah menjadi standar untuk semua browser tetapi object

3


tersebut bukanlah merupakan standar dari W3C. Berikut contoh dari penggunaan XMLHttpRequest Object pada Internet Explorer. Metode dan property yang dimiliki oleh XMLHttpRequest adalah sebagai berikut: Tabel 1. Tabel Metod dan XMLHttpRequest Metode / Properti

Diskripsi Menghentikan request.

getAllResponseHeaders()

Mengembalikan semua nilai response header sebagai string.

getResponseHeader("headerLabel")

Mengembalikan satu nilai response header sebagai string.

open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])

Menginisialisasi parameter request.

send(content)

Mengirimkan request.

setRequestHeader("label", "value")

Menset label/nilai dari request header.

onreadystatechange

Menset fungsi callback yang menghandel perubahan status request. Mengembalikan nilai status request: 0= uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete

responseText

Mengembalikan response dari server dalam bentuk string.

responseXML

Mengembalikan response dari

4

Status

Mengembalikan nilai kode status.

statusText

Mengembalikan nilai status pesan request.

Properti

abort()

readyState

server dalam format XML.

4.

DOM (Document Object Model) Setiap browser menawarkan sebuah tampilan untuk dimanipulasi, melalui sesuatu yang dinamakan Document Object Model atau disingkat dengan DOM [HEC- 06]. Salah satu keunggulan JavaScript adalah mempunyai kemampuan untuk memanipulasi dokumen HTML melalui interface DOM. Dokumen DOM berbentuk kumpulan elemen yang tersusun secara hirarki atau berjenjang. Yang mana setiap elemen mempunyai atribut. Salah satu contoh elemen dalam HTML adalah tag ”
” yang mempunyai atribut id sebagai atribut untuk memberikan nama dari elemen div tersebut.

Gambar 3 Cuplikan Script Elemen HTML Dalam contoh script diatas tag div mempunyai atribut id yang nilainya diisi dengan ”MyDivElement” maka dapat diartikan bahwa elemen div tersebut mempunyai nama atau pengenal ”MyDivElement”. Jenjang dari DOM ini dapat digambarkan sebagai berikut :

Gambar 4 Hirarki DOM


JavaScript dikatakan dapat melakukan manipulasi DOM artinya adalah dengan menggunakan script JavaScript kita dapat menambahkan, mengedit text (nilai) dan meniadakan nilai dari suatu elemen. Tidak hanya itu JavaScript juga dapat melakukan lebih banyak lagi dengan elemen HMTL misalnya memanipulasi atribut class yang nantinya merujuk ke klas pada CSS (Cascading Style Sheet) yang telah dibuat. Sehingga JavaScript akan dapat memanipulasi keindahan elemen HTML. Dan proses tersebut dilakukan pada aplikasi sisi klien.

bentuk service atau daemon. Port standar yang digunakan adalah port 25, cara kerjanya sama dengan tukang pos yang melayani pengiriman pesan/surat dan menerima pesan/surat. MTA berjalan pada protokol komunikasi yang dinamakan SMTP. Berikut adalah gambaran cara kerja email dalam jaringan internet. SMTP POP3 Server SMTP/POP3 Lokal

Pengirim

Server DNS Lokal

SMTP

INTERNET

SMTP

5.

Webmail Email adalah sebuah layanan internet yang berupa pengiriman paket pesan teks. Data teks akan dirubah menjadi data elektronik atau digital dan dikirimkan melalui jaringan internet. Dengan menggunakan layanan email tersebut, pengguna internet dapat menerima dan mengirim pesan email ke seluruh dunia. Pengiriman dilakukan berdasarkan alamat email sebagai tujuan pengiriman email. Salah satu sarana yang biasa digunakan oleh pengguna jasa email untuk mengelola email adalah Web-based email. Web-based email atau lebih dikenal sebagai webmail adalah sebuah aplikasi klien email yang menggunakan halaman Web sebagai media untuk mengelola email di sisi klien. Sesuai dengan sifat aplikasi yang berbasis web, pemakai webmail tidak perlu melakukan instalasi perangkat lunak dan cukup mengisi sangat sedikit konfigurasi. Dengan kemudahan akses halaman web dari banyak tempat, webmail menjadi lebih disukai lagi terutama bagi mereka yang sering bergantiganti komputer untuk akses Internet. Penyedia jasa webmail gratis pun cukup banyak tersedia karena mereka dapat menyediakan halaman web yang akan sering dikunjungi pemakainya. 6.

Mail Transfer Agent Mail Transfer Agent (MTA) menduduki sebuah peranan penting dalam pengiriman email ke alamat tujuan5. MTA merupakan sebuah aplikasi yang akan terus berjalan pada suatu operating sistem. Biasanya dalam

SMTP POP3 Pengirim

Server SMTP/POP3 Lokal

Server DNS Lokal

Gambar 5 Diagram alur cara kerja email Dari gambar diatas dijelaskan proses pengiriman dan pengambilan email. Pengguna yang mempunyai account atau hak akses pada mail klien mengirimkan email ke sebuah mail server, misalnya mail.yahoo.com. Lalu dari mail.yahoo.com, server yahoo mencari mail server yang mengelola email sesuai dengan alamat email penerima, misalnya sunmail.com. Apabila server sunmail.com ditemukan dan aktif maka dari server yahoo email dikirimkan ke sunmail. Pengguna penerima membuka mail klien yang terhubung dengan sunmail.com, dan membaca email yang telah dikirimkan. 7.

JavaMail JavaMail merupakan API (Application Programming Language) yang menyediakan kumpulan abstraksi class dan mendefinisikan object yang terdiri atas mail sistem [PDD-04]. Hal ini memungkinkan bagi penyedia service untuk menyediakan interface standar ke sistem pemilik pesan menggunakan bahasa pemrograman Java. Dengan API JavaMail ini, aplikasi mail klien dapat mengakses lokasi pesan, serta membuat dan mengirim pesan ke pengguna lain.

5


METODOLOGI PENELITIAN NETWORK

Mail Client – JavaMail Client

Mail Server

Gambar 6. Aplikasi Email dengan JavaMail Pada dasarnya, API JavaMail terdiri atas kumpulan intisari class (abstract class) dengan model yang bermacam-macam. Ada pun secara umum, class-class tersebut antara lain :  Message, merupakan abstraksi class yang menggambarkan pesan email. JavaMail mengimplementasikan standar RFC822 serta MIME (Multipurpose Internet Mail Extensions), di mana class MimeMessage memperluas class Message untuk menggambarkan bentuk MIME dari sebuah pesan email.  Store, merupakan abstraksi class uag menggambarkan database dari message uang dikelila ole mail server dan dikelompokkan oleh user. Dalam kerjanya, class Store menggunakan akses protokol khusu.  Folder, merupakan abstraksi class yang menyediakan hubungan dari hirarki organisasi pesan.  Transport, merupakan abstraksi class yang menggambarkan trasport protokol khusus. Dalam hal ini object Transport akan menggunakan trasport protokol khusus untuk mengirim pesan email ke tujuan. 8.

Java Enterprise Edition Java adalah bahasa pemrograman yang mengusung misi Object-Oriented Programming. Salah satu platform pada Java adalah J2EE (Java Enterprise Edition). J2EE menggunakan model aplikasi terdistribusi multitier (multitiered distributed application) [SAA-02]. Aplikasi multitier (berlapis) adalah aplikasi dimana memisahkan antara antar muka sistem, bisnis logic sistem dan layer data.

Perangkat lunak yang akan dikembangkan pada tugas akhir ini adalah aplikasi webmail yang menggunakan teknologi AJAX dan Java – Javamail. Aplikasi ini dibuat dengan tujuan untuk mempermudah client dalam melakukan kegiatan pengiriman email, menerima email, dan mengelola email yang ada pada server mail. AJAX ada sebagai penggerak utama aplikasi yang menempati posisi di client. Sedangkan di sisi server terdapat aplikasi Java (servlet) yang mendengarkan request dari client. Adapun proses-proses utama terdapat dalam aplikasi ini adalah : 1. Mengelola Konfigurasi Fungsi ini dipergunakan untuk membuat atau mengedit konfigurasi dari server mail yang digunakan. 2. Menampilkan Email Fungsi ini dipergunakan untuk menampilkan email yang ada pada mail server. Dengan proses ini kita dapat menampilkan konten email atau attachment file. 3. Mengelola Filter Fungsi ini dipergunakan untuk menentukan filter yang digunakan sebagai aturan dalam mengelola email pada server mail. 4. Mengelola Email Fungsi ini dipergunakan untuk mengelola email, dengan fungsi ini user dapat melakukan proses penghapusan dan pemindahan (moving) dari satu folder ke folder yang lain. 5. Mengelola Folder Fungsi ini dipergunakan untuk mengelola folder, user dapat menambahkan folder dan menghapus folder. 6. Mengirim Email Funsi ini dipergunakan untuk mengirimkan email baik berupa compose, reply dan forward email. Analisa Data Terdapat dua proses dalam pengambilan email. Proses yang pertama

6


adalah proses pengambilan email yang dilakukan oleh sisi server dalam hal ini proses dilakukan oleh javamail sebagai motor utama. Dikatakan sebagai motor utama karena javamail melakukan hubungan langsung dengan mail server. Proses yang kedua adalah proses pengambilan data yang dilakukan aplikasi webmail yang berbasis AJAX ke aplikasi sisi server (aplikasi java – javamail). Dalam proses yang kedua ini data yang diambil dari sisi server adalah dalam format XML. Yang nantinya akan diuraikan berdasarkan elemen-elemen yang ada dan ditampilkan kepada user. Elemen-elemen yang ada dalam XML yang akan diambil dari sisi server adalah : - id untuk keterangan id email, - flag sebagai penanda tiap email (unread, seen, deleted), - from untuk keterangan asal email, - to untuk keterangan tujuan email, - subject untuk keterangan subject email, - date untuk tanggal pengiriman, - size untuk ukuran email dalam byte, - CurPage untuk keterangan halaman dimana email berada, - NumPage adalah total halaman yang ada dalam 1 folder Adapun bentuk format email dalam bentuk XML dapat digambarkan seperti gambar 3.1. <email> 19 javax.mail.Flags@20 bayu@joes-acer bayu@joes-acer <subject>test kirim email Fri Jun 01 12:01:47 ICT 2007 <size>173601 1 2

Gambar 7. Skema XML data email Dalam analisa proses ini akan digambarkan alur proses yang ada dalam aplikasi webmail berbasis AJAX. Alur proses akan dibagi menjadi 2 yaitu dari sisi client dan dari sisi server.

-

A. Analisa Proses Sisi Client Tampilan Use Case Dalam pembuatan Use Case sisi klient terdapat 2 aktor yaitu user dan mailServlet yang merupakan sistem sisi server.

Gambar 8. Use Case Diagram Aplikasi Webmail Sisi Client Pada gambar 8 digambarkan fungsifungsi utama yang terdapat pada aplikasi webmail ini. Adapun yang bertindak sebagai aktor dalam sistem ini adalah user yang ingin menggunakan aplikasi webmail ini dan sistem lain yaitu aplikasi sisi server dengan nama mailservlet. Setiap kali akan menggunakan aplikasi ini tindakan yang pertama kali harus dilakukan adalah pendefinisian konfigurasi server mail dan login. Dalam proses login ini dilakukan pengecekan apakah user yang melakukan login mempunyai account email terdapat mail server. Setelah login dilakukan maka user dapat melakukan proses pengiriman email, menampilkan email, mengelola filter, mengelola email, dan mengelola folder. B. -

Analisa Proses Sisi Server Tampilan Use Case Berbeda dengan aplikasi sisi client, pada aplikasi sisi server hanya terdapat 1 aktor saja. Gambaran Use Case pada sisi server ditunjukkan pada gambar 9.

7


Pendefinisian konfigurasi server adalah syarat mutlak untuk dapat melakukan koneksi dengan mail server. Data konfigurasi server akan disimpan dalam file XML. Dalam uji coba ini akan diketahui bagaimana tingkat keberhasilan dari proses 5 pendefinisian konfigurasi server.

Gambar 9. Use Case Aplikasi Webmail Sisi Server Pada umumnya fungsi-fungsi yang ada pada aplikasi sisi server ini adalah sama dengan aplikasi sisi client. Dalam use case ini yang bertindak sebagai aktor adalah aMail (aplikasi sisi client). Aplikasi sisi server ini berhubungan langsung dengan mail server dan menjadi aplikasi tempat pembuatan data dalam bentuk XML. Yang nantinya akan dikirimkan ke aplikasi client. Seperti halnya aplikasi client pada sisi server ini terdapat urutan agar aMail sebagai aktor dapat menjalankan fungsi-fungsi di dalamnya. aMail harus mengirimkan data login sebelum mengakses fungsi-fungsi yang ada.

Gambar 10. Form Konfigurasi Server User akan mengisi form konfiguras yang isinya antara lain Domain, IMAP host, IMAP port, SMTP host, SMTP port, SMTP username, dan SMTP password. Apabila telah diisikan maka user akan menekan tombol ’Save Configuration’. Setelah penyimpanan berhasil sistem akan menampilkan alert seperti dibawah ini.

HASIL DAN PEMBAHASAN Uji coba dilakukan untuk menguji jalannya aplikasi mulai dari proses input hingga output. Selain itu juga digunakan untuk mengetahui kesesuaian aplikasi dengan fungsi-fungsi yang telah dibuat. Adapun skenario dari uji coba ini adalah : 1. Uji coba pendefinisian konfigurasi server. 2. Uji coba login. 3. Uji coba menampilkan daftar email dalam suatu folder. 4. Uji coba mengelola email (Delete, Move dan Copy). 5. Uji coba mengelola filter. 6. Uji coba mengelola contact. 7. Uji coba mengelola folder. 8. Uji coba pengiriman email. Pelaksanaan Uji Coba Pendefinisian Konfigurasi Server Pada pelaksanaan uji coba ini akan dilakukan pendefinisian konfigurasi server.

8

Gambar 11. Alert Keberhasilan Penyimpanan Pelaksanaan Uji Coba Login Setelah pendefinisian konfigurasi server selesai maka proses selanjutnya adalah melakukan login. User akan memasukkan username dan password sesuai dengan account email yang dimilikinya.

Gambar 12. Form Login Pelaksanaan Uji Coba Menampilkan Daftar Email Dalam Folder


Setelah melakukan login dan berhasil, user akan mendapatkan tampilan utama dari aplikasi webmail ini. Dalam uji coba ini user akan memilih suatu folder untuk dapat melihat isi email yang ada pada folder tersebut. Dalam uji coba ini akan dibuka folder INBOX. Berikut adalah tampilan dari halaman utama webmail. Gambar 15. Form Filter Pelaksanaan Uji Coba Mengelola Contact Selain mengelola filter, user juga dapat mengelola contact person masing-masing. Daftar contact ini akan muncul ketika user mengisikan field To pada form pengiriman email. Gambar 13. Halaman Utama Webmail Pelaksanaan Uji Coba Mengelola Email (Delete, Move dan Copy) Setelah daftar email dalam suatu folder tampil, maka user dapat melakukan proses pengelolaan email (Delete, Move dan Copy). Untuk melakukan Delete, Move dan Copy email user harus menekan tombol Delete, Move atau Copy yang terletak pada bagian atas daftar email.

Gambar 14. Pop Up Move Pelaksanaan Uji Coba Mengelola Filter Dalam aplikasi webmail ini user dapat melakukan pendefinisian aturan filter. Filterfilter tersebut akan diimplementasikan ketika aturan telah didefinisikan dan ketika mendapat email baru.

Gambar 16. Form Contact Pelaksanaan Uji Coba Mengelola Folder Dalam pelaksanaan uji coba ini user akan melakukan penambahan folder dan penghapusan folder. Folder-folder yang telah dibuat oleh user akan menjadi folder pribadi dari user tersebut.

Gambar 17. Form Add Folder Pelaksanaan Uji Coba Pengiriman Email Dalam pelaksanaan uji coba ini user akan melakukan pengiriman email. Data email yang akan dimasukkan oleh user adalah alamat tujuan user, CC, BCC, subject, pesan dan filte attachment. Dalam form ini juga dapat dilihat popup contact yang merupakan hasil dari pendefinisian contact pada form contact.

9


6.1

Delete email

6.2

Move email

6.3

Copy email

7

Pengiriman email

8

Manage Filter

9

Manage Contact

10

Manage Folder

Gambar 18. Form Compose Email Hasil Uji Coba No 1

2

3

4

5

6

10

Butir Uji

Hasil Uji

Pendefinisia n konfigurasi server

Form configurasi tampil pada layar dan data profile tersimpan di dalam file config.xml. Halaman utama aplikasi webmail akan muncul sesuai dengan user yang login. Tabel list email berisi email yang ada pada folder yang dikehendaki . Konten sebelah kanan menampilka n isi email. Browser membuka window baru dan menampilka n/ mendownlo ad file. Popup menu muncul untuk pilihan Move to dan

Login

Menampilk an email dalam folder.

Menampilk an isi email

Menampilk an attahcment

Manage email

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

10.1

Menambah Folder

Copy to, sedangkan untuk pilihan Delete muncul alert. Muncul alert, dan email yang dihapus akan menghilang dari daftar. Muncul alert, dan email yang dipindahkan akan menghilang dan berpindah pada folder tujuan. Muncul alert, dan email digandakan pada folder tujuan. Muncul form yang sesuai dengan pilihan user. Muncul form filter, dan hasil pengisian disimpan dalam file XML. Muncul form contact, dan hasil pengisian disimpan dalam file XML. Muncul popup menu yang berisikan Add Folder dan Del Folder. Muncul form Add

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK

OK


10.2

Menghapus Folder

Folder. Folder yang dihapus hilang dari daftar folder.

OK

OK

KESIMPULAN Beberapa hal yang dapat disimpulkan pada pengerjaan tugas akhir ini adalah : 1. Dengan menggunakan teknologi AJAX (Asynchronous JavaScript and XML) yang dapat melakukan sebuah request secara Asyncronous maka dapat diwujudkan sebuah aplikasi web yang sangat responsif. Khususnya dalam pembangunan sebuah aplikasi webmail, yang mana dengan pemanfaatan AJAX di dalamnya dapat membuat proses menampilkan, mengirim dan mengelola email tanpa memerlukan refresh halaman. 2. Pemanfaatan AJAX (Asynchronous JavaScript and XML) sebagai teknologi pendukung aplikasi web yang berkolaborasi dengan Java sebagai pemroses sisi server dapat digunakan sebagai salah satu alternatif dalam pembangunan sebuah aplikasi yang responsif. Dengan dukungan dari

Javamail sebagai sebuah API sebagai pengelola email, pembuatan aplikasi webmail akan lebih mudah dalam pengerjaannya. Serta dengan dukungan Javamail juga sebuah aplikasi webmail yang handal dapat diwujudkan. DAFTAR PUSTAKA [DAC-06] Darie, Christian et al. AJAX and PHP : Building Responsive Web Applications. PACKT Publishing. 2006. [GRC-06] Gross, Christian. AJAX Pattern and Best Practice. Apress. 2006. [HEC-06] Heilmann, Christian. Beginning JavaScript with DOM Scripting and Ajax From Novice to Professional. Apress. 2006. [PDD-04] Prasetyo, Didik D. Mail Servis Berbasis Java Pada Server Windows dan Linux. Elex Media Komputindo. 2004. [SAA-02] Setyabudi, Agus & Albert Samuel. Aplikasi E-Commerce dengan Java Servlet dan JSP. Elex Media Komputindo. 2002. [ZFW-06] Zammetti , Frank W. Practical Ajax Projects with Java™ Technology. Apress. 2006.

11

PERANCANGAN DAN PEMBUATAN ANTAR MUKA SURAT ELEKTRONIK BERBASIS TEKNOLOGI AJAX

Recommend Documents