OPTIMASI PROSES PEMBUATAN WEBSITE UNTUK REGISTRASI DENGAN WEBSITE GENERATOR BERBASIS JAVASERVER FACES

OPTIMASI PROSES PEMBUATAN WEBSITE UNTUK REGISTRASI DENGAN WEBSITE GENERATOR BERBASIS JAVASERVER FACES Laura Mahendratta Tjahjono1, Trianggoro Wiradinata2

Abstract: The development process of similar softwares that have to be done continuously and each development takes a long time, may reduce effectiveness at work. For example, an event organizer needs a website for every handled event. This website is needed for the registration of the participants. The idea to solve this problem is to develop a software based on JavaServer Faces (JSR 314) and Hibernate, which generate these websites automatically. This software shall optimize the development process of the websites needed. Keywords: Java, JavaServer Faces, Hibernate, Registration, Development Optimization

Event Organizer (EO) yang bertaraf nasional atau internasional setiap bulan harus menangani events dalam jumlah yang banyak, karena itu sistem komputerisasi merupakan suatu syarat mutlak untuk mengorganisir semua events tersebut agar lebih sistematis dan efektif. Selain itu untuk menangani proses registrasi atau pendaftaran peserta, setiap event membutuhkan website yang berisi formulir registrasi. Dengan menggunakan website tersebut, registrasi dapat dilakukan langsung oleh calon peserta secara online, sehingga proses registrasi lebih praktis dan singkat. Pada umumnya data-data yang dibutuhkan untuk proses registrasi melalui website tersebut kurang lebih sama, yaitu data pribadi peserta, kontak data, data pendamping/partner yang menemani, data hotel yang dipesan, data berbagai program acara yang ingin diikuti, serta data kartu kredit untuk proses pembayaran. Proses pembuatan website ini melingkupi pembuatan bagian front end dan back end. Bagian front end adalah halaman HTML yang menampilkan informasi mengenai event berikut formulir pendaftaran untuk event tersebut. Sedang bagian back end adalah bagian dimana proses validasi dan penyimpanan data di database dilakukan. Waktu yang dibutuhkan untuk pembuatan sebuah website pada umumnya tiga sampai sepuluh hari,

1

Laura Mahendratta Tjahjono, Dipl.Inf, Program Studi Teknik Informatika, Universitas Ciputra, Surabaya Trianggoro Wiradinata, S.T., M.Eng.Sc, Program Studi Teknik Informatika, Universitas Ciputra, Surabaya 2

tergantung pada banyaknya data yang dibutuhkan oleh masing-masing event. Seperti telah disebutkan sebelumnya, banyak event yang harus ditangani oleh perusahaan Event Organizer tersebut setiap bulannya, yang berarti bahwa website untuk registrasi yang dibutuhkan juga sebanyak jumlah event yang ada. Karena isi dari semua website untuk registrasi ini mirip satu sama lain, maka proses implementasi yang dilakukan pun kurang lebih sama, yang berarti programmer harus mengulang pembuatan metode-metode yang sama setiap kali membuat website baru. Selain itu, sering kali proses registrasi yang seharusnya dimulai secepat mungkin sebelum event dimulai, menjadi terhambat karena website belum selesai dibuat. Berdasarkan penjabaran diatas, maka perumusan masalah dalam penelitian ini adalah bagaimana mengotomatisasi proses perancangan dan pembuatan website, yang digunakan untuk proses registrasi, untuk semua event yang ada. Tujuan dari penelitian ini adalah, menentukan cara kerja yang lebih efisien pada proses perancangan dan pembuatan website registrasi, sehingga tidak menghambat proses registrasi yang sesungguhnya. Pada penelitian ini masalah tersebut akan diselesaikan dengan menggunakan aplikasi

website

generator.

Seperti

namanya,

aplikasi

ini

bertujuan

untuk

mengotomatisasi pembuatan website yang berisi formulir registrasi. Aplikasi ini, yang untuk selanjutnya akan disebut Universal Form Manager (UFM), akan di implementasi sedimikian rupa, sehingga bisa dioperasikan oleh mereka yang tidak ahli di bidang pemrograman, dalam hal ini staf perusahaan Event Organizer. Teknologi yang akan digunakan untuk mengimplementasi UFM ini adalah Java versi 1.5, JBOSS Application server versi 4, Sybase SQL iAnywhere versi 9, Hibernate, JavaServer Faces versi 1.2 serta Cascading Style Sheet (CSS). Untuk mendapatkan data-data event yang membutuhkan website registrasi, UFM harus berkomunikasi dengan program induk yang digunakan oleh perusahaan Event Organizer untuk mengorganisir semua event yang ada. Program induk dengan nama MesseInfo ini di implementasi dengan menggunakan Java programming language [War2006], oleh karena itu UFM juga diimplementasi dengan menggunakan Java,

sehingga komunikasi antara UFM dengan MesseInfo lebih mudah. Untuk mengakses

database MesseInfo tersedia modul dan metode yang disediakan oleh MesseInfo, yang dapat diakses melalui EJB-Interface. UFM akan dibuat berupa web aplikasi, agar dapat diakses dimanapun dan kapanpun tanpa perlu melakukan instalasi program. Pilihan teknologi yang dapat digunakan untuk pembuatan webaplikasi sangat bervariasi, karena itu pilihan teknologi dibatasi pada teknologi yang menerapkan struktur MVC2. Struktur MVC2 adalah pengembangan dari struktur MVC. Struktur

MVC

(Model-View-Controller)

adalah

suatu

konsep

dalam

pemrograman dimana komponen data, tampilan dan logika sebuah program dipisahkan secara jelas. Dengan menerapkan struktur MVC, proses pembuatan menjadi lebih terstruktur dan lebih cepat, source code program menjadi lebih mudah dimengerti, dan apabila perlu dilakukan perubahan pada salah satu komponen, maka pada komponen yang lain tidak perlu dilakukan perubahan. Pada kenyataanya, dalam pembuatan webaplikasi tidak cukup bila hanya digunakan struktur MVC, karena komponen tampilan (View) dan logika (Controller) tidak dapat benar-benar dipisahkan. Untuk mengatasi hal ini, struktur MVC dikembangkan lagi menjadi struktur MVC2. Seperti dapat dilihat pada Gambar 1, konsep MVC2 pada dasarnya mirip dengan konsep MVC, yaitu adanya pemisahan antara Model-View-Controller, yang membedakan adalah bahwa komponen Model dalam MVC2 dibagi-bagi lagi kedalam Model-View-Controller. Dengan ini, logika dan tampilan yang mulanya masih tercampur dapat dipisahkan dengan jelas (Langner,2006). Controller

Model

View Model

Controller

View

Gambar 1. Struktur MVC-2

Teknologi yang menerapkan struktur MVC2 ini diantaranya adalah JavaServer Faces (JSF), yang akan digunakan dalam penelitian ini. Karakter dan fungsi-fungsi JSF antara lain, JSF memiliki arsitektur yang mudah dimengerti dan dipelajari, JSF menyediakan banyak komponen User Interface (UI) yang dapat mempersingkat proses pemrograman, memiliki konsep navigasi statis dan dinamis yang dapat dikonfigurasi, memungkinkan konversi tipe data primitif secara otomatis, menyediakan modul-modul validasi dan memungkinkan pembuatan webaplikasi dalam banyak bahasa sekaligus (Haiges,2004). Application server yang digunakan untuk menjalankan program UFM ini adalah JBOSS application server versi 4.0.4. JBOSS dipilih karena sesuai dengan application server yang digunakan oleh program induk MesseInfo. Hal ini memudahkan UFM dalam berkomunikasi dan mengakses database MesseInfo. Selain itu di dalam JBOSS juga telah terintegrasi web application server Tomcat menjalankan program berbasis web [Wru2005]. Selain

Tomcat,

teknologi

Hibernate

juga

di

integrasi

di

JBOSS

(Hibernate,2006). Hibernate adalah salah satu teknologi object relational persistence mapping (ORM), yang fungsi utamanya adalah melakukan transformasi persistent data dari sebuah representasi data (relational database) ke representasi data yang lain (java objects) ataupun sebaliknya (Hibernate.org,2008). Teknologi Hibernate ini juga digunakan dalam implementasi UFM.

Metode Pada awal penelitian ini dilakukan analisis terhadap sistem dan database dari program induk yang digunakan oleh perusahaan Event Organizer, yaitu MesseInfo. MesseInfo, software yang dikembangkan oleh Firma Lamdalogic GmbH Germany, berguna untuk membantu mengorganisasi berbagai macam event. Di database MesseInfo tersimpan seluruh informasi data seluruh event, misalnya nama event, tanggal pelaksanaan, program acara serta hotel yang ditawarkan dalam event tersebut. Informasi yang didapat dari database MesseInfo akan digunakan

untuk pembuatan website registrasi. Selain data mengenai event, data peserta event juga disimpan di database ini. Langkah selanjutnya adalah menentukan konsep atau cara kerja UFM dalam menghasilkan berbagai website berisi formulir registrasi: Ada dua konsep aplikasi website generator yang bisa dipertimbangkan dalam menghasilkan berbagai website berisi formulir registrasi. Konsep yang pertama adalah dengan membuat website registrasi untuk setiap event secara fisik. Yang dimaksud secara fisik adalah, bahwa untuk setiap website, minimal sebuah HTML-file akan dibuat. Seluruh HTML-file tersebut lalu disimpan di folder, yang sebelumnya juga dibuat untuk event yang bersangkutan. Cara ini memiliki beberapa kekurangan. Pertama, pembuatan HTML-file secara otomatis adalah cukup rumit dan kompleks. Seluruh HTML-file yang dibuat kemudian harus disimpan. Untuk ini tentunya dibutuhkan memory yang jumlahnya akan terus bertambah setiap harinya. Kedua, perawatan terhadap website juga merepotkan dan memakan waktu yang tidak sedikit. Seandainya ditemukan bug atau perlu dilakukan perubahan pada semua website registrasi yang telah dihasilkan, maka perubahan perlu dilakukan di setiap file yang telah dihasilkan tersebut. Konsep kedua adalah dengan membuat satu template HTML-file, seperti yang dapat dilihat pada Gambar 2. Template HTML-file ini dibuat dinamis, sehingga isinya dapat diubah setiap waktu, sesuai dengan kebutuhan. Hal ini berarti bahwa setiap elemen dari formulir registrasi dapat di konfigurasi, misalnya di aktifkan atau di non-aktifkan. Untuk setiap website registrasi yang diperlukan masing-masing event, tidak lagi harus dibuat sebuah HTML-file secara khusus. Yang perlu dilakukan hanyalah menentukan konfigurasi setiap website tersebut dan menyimpannya di suatu database. Dengan cara ini, memory yang dibutuhkan untuk penyimpanan data konfigurasi website tidaklah sebanyak pada konsep pertama, yang membutuhkan folder khusus untuk setiap event yang ada. Apabila ingin dilakukan perubahan pada seluruh website registrasi, maka hanya perlu dilakukan perubahan pada template HTML-file atau mengubah datadata konfigurasi yang tersimpan di database. Hal ini tentu saja jauh lebih praktis dibanding dengan apa yang harus dilakukan pada konsep pertama.

Gambar 2. Konsep pembuatan banyak website dengan menggunakan template

Langkah selanjutnya adalah menentukan fungsi dan syarat untuk UFM. UFM memiliki dua bagian, yaitu UFM-Administrator dan UFM-User. UFM-User adalah website yang digunakan untuk proses registrasi oleh calon peserta event. Sedang melalui UFM-Administrator, staf perusahan Event Organizer dapat membuat sendiri berbagai website registrasi untuk event-event yang ada. Website registrasi yang tercipta inilah yang akan menjadi bagian UFM kedua, yaitu UFM-User. Melalui UFM-User ini, calon peserta event dapat melakukan registrasi.

Gambar 3. Use Case diagram untuk UFM-Administrator

Gambar 3 adalah Use Case Diagram yang menampilkan fungsi-fungsi UFMAdministrator, yang dapat dijalankan oleh Staf Event Organizer dalam menentukan konfigurasi halaman UFM-User. Berikut adalah fungsi-fungsi yang harus tersedia di UFM-Administrator.

1. Login dan logout 2. Memilih event. Website registrasi akan dibuat untuk event ini. 3. UFM-Administrator akan menampilkan seluruh event yang terdaftar di database MesseInfo sebagai pilihan. Staf dapat memilih event, yang untuk event tersebut akan dibuat website registrasinya. 4. Memilih bahasa yang akan digunakan di website registrasi. Website registrasi dapat ditampilkan dalam satu atau berbagai bahasa. Staf hanya perlu memilih, ingin membuat website registrasi dalam bahasa apa saja. Sementara bahasa yang dapat dipilih adalah bahasa Inggris dan Jerman. 5. Mendefinisikan elemen-elemen formulir yang ingin ditampilkan serta elemenelemen yang harus diisi oleh user nantinya. Misalnya elemen nama, email, alamat, kota, kodepos, dsb. 6. Memilih program acara yang ditawarkan berikut persyaratan dalam user memilihnya. Setiap event biasanya menawarkan berbagai program acara yang dapat di ikuti oleh peserta, baik itu program acara wajib ataupun pilihan. 7. Mengaktifkan atau me-nonaktif-kan fungsi pemesanan hotel serta fungsi kartu kredit untuk jaminan pemesanan hotel. 8. Memilih cara pembayaran yang diijinkan. 9. Menentukan isi text di halaman website registrasi. 10. Menentukan design. Karena pada umumnya struktur halaman website registrasi kurang lebih sama, maka yang termasuk ke dalam design yang dapat diubah-ubah adalah logo event, warna dasar, warna tulisan, serta warna dasar title dan subtitle. 11. Membuat template untuk email konfirmasi pendaftaran. Sedang UFM-User harus memiliki fungsi-fungsi untuk input data peserta, validasi data, menyimpan input data di database MesseInfo, menampilkan status sukses atau tidaknya proses registrasi dan fungsi untuk mengirim email konfirmasi registrasi. Gambar 4 menampilkan flowchart untuk UFM-User.

Gambar 4. Flowchart diagram untuk UFM-User

Seperti yang dapat dilihat pada gambar 5, komunikasi antara UFM Application dengan client, yaitu web browser terjadi melalui HTTP-Protokol. Data yang di input oleh user lalu diteruskan ke JavaBeans untuk diproses lebih lanjut. Dalam memproses data, dibutuhkan data dari database MesseInfo dan dari database UFM. Akses ke database MesseInfo dilakukan melalui EJB-Interface yang disediakan oleh MesseInfo, sedang akses ke database UFM terjadi dengan memanfaatkan teknologi Hibernate. Data dari dua database ini di representasikan dalam bentuk POJO (Plain Old Java Object) untuk diproses lebih lanjut.

Gambar 5. Struktur UFM berdasarkan konsep MVC2 serta arus komunikasi antar komponen UFM

Database MesseInfo merupakan database induk dimana data-data event dan

peserta disimpan. Untuk menyimpan data-data konfigurasi website yang dibuat oleh UFM, maka UFM memerlukan database tersendiri. Berdasarkan hasil analisis fungsifungsi yang harus dimiliki oleh UFM, maka struktur database UFM dibuat. Gambar 6 menampilkan Entity Relationship Model (ERM). EVENT event_id eventPK mnemonic name starttime endtime description location

PAYMENT_METHOD paymentMethod_id name

FIELD fieldConfig_id form_id(FK) type name required

LANGUAGE mnemonic name

forms_has_payment_methods

forms_has_languages

P

form_has_field event_has_forms

FORM form_id

P updateDate companionsCount BANK_ACCOUNT bankAccount_id form_has_bank_accountdesignCode logo form_id(FK) 1 event_id(FK) bankName owner identifierCode accountNumber ibanCode swiftCode transferReason

form_has_programm_categories

PROGRAMM_CATEGORY programmCategory_id form_id(FK) programmTableType_id(FK) progTypeId name

P

form_has_urls

URL P url_id form_id(FK) url

form_has_information_texts

form_has_credit_card_types

CREDIT_CARD_TYPE creditCardType_id form_id(FK) mnemonic name

programm_table_type_has_programm_categories PROGRAMM_TABLE_TYPE programmTableType_id name

EMAIL_PARAM form_has_bank_accountemailParam_id form_id(FK) name

P INFORMATION_TEXT infoText_id form_id(FK) infoMnemonic infoText

DEFAULT_INFO_TEXT defaultInfoText_id mnemonic infoText

Gambar 6. Entity Relationship Model (ERM) Diagram untuk database UFM

Untuk koneksi ke database diperlukan parameter-parameter yang disimpan di sebuah XML data dengan nama hibernate.cfg.xml. Parameter-parameter tersebut berisi konfigurasi database seperti database URL, username, password, driver class dan SQL

dialect (Beeger,2006). Isi dari XML data tersebut adalah sebagai berikut:

<session-factory> <property name="hibernate.connection.driver_class"> com.sybase.jdbc3.jdbc.SybDriver <property name="dialect"> org.hibernate.dialect.SybaseAnywhereDialect <property name="hibernate.connection.url"> jdbc:sybase:Tds:localhost:2638?ServiceName=UniversalFormManager <property name="hibernate.connection.username">DBA <property name="hibernate.connection.password">SQL <property name="show_sql">true <property name="hibernate.hbm2ddl.auto">update <mapping <mapping <mapping <mapping <mapping <mapping <mapping

resource="Event.hbm.xml"/> resource="Form.hbm.xml"/> resource="PaymentMethod.hbm.xml"/> resource="ProgrammCategory.hbm.xml"/> resource="ProgrammTableType.hbm.xml"/> resource="Language.hbm.xml"/> resource="DefaultInfoText.hbm.xml"/>



Salah satu metode terpenting dalam UFM-Administrator adalah metode createForm(). Metode ini dijalankan bila tombol „Create Website“ ditekan. Tombol ini akan muncul setelah seluruh data konfigurasi untuk pembuatan website baru diberikan. Setelah website untuk registrasi selesai dibuat maka website tersebut dapat diakses melalui URL yang juga otomatis dibuat. Calon peserta dapat melakukan proses registrasi melalui website ini. Metode utama untuk proses penyimpanan data peserta di database MesseInfo adalah createParticipant().

Hasil dan pembahasan Untuk mengetahui tingkat keberhasilan penelitian, software Universal Form Manager di uji cobakan ke beberapa staf perusahaan Event Organizer yang tidak ahli di bidang pemrograman software. Hasil uji coba menunjukkan, bahwa mereka mampu mengoperasikan software UFM tanpa menemui kesulitan yang berarti. Website-website berisi formulir registrasi untuk berbagai macam event dapat dibuat dalam waktu kurang dari 30 menit. Untuk masing-masing event juga dapat dibuat website dalam bahasa Inggris dan Jerman. Website registrasi yang dihasilkan juga telah di test dengan hasil yang memuaskan. Data-data peserta tersimpan dengan benar di database MesseInfo, selain itu peserta baru dan perusahaan Event Organizer juga menerima email konfirmasi registrasi.

Gambar 7. Screenshot UFM Administrator

Gambar 7 menampilkan screenshot software UFM-Administrator, dimana Staf dapat memilih event untuk website registrasi berikut elemen-elemen yang igin ditampilkan di website tersebut. Gambar 8 adalah contoh salah satu UFM-User atau website registrasi yang telah di generate oleh UFM-Administrator.

Gambar 8. Screenshot UFM-User

Simpulan Aplikasi website generator yang di implementasi dengan menggunakan Java, Hibernate dan JavaServer Faces ini mampu meningkatkan efisiensi kerja serta mempersingkat waktu yang dibutuhkan untuk pembuatan website registrasi secara signifikan. Proses pembuatan website registrasi tidak lagi menjadi penghambat proses registrasi itu sendiri. Jadi, meskipun untuk pembuatan aplikasi website generator tersebut membutuhkan waktu beberapa bulan, namun bila dilihat untuk jangka waktu panjang hal itu tetap lebih menguntungkan, karena efektivitas kerja dapat ditingkatkan dan biaya operasional dapat ditekan

Daftar rujukan Robert F. Beeger, Arno Haase, Stefan Roock, Sebastian Sanitz, 2006. Hibernate. dpunkt.verlag GmbH Torsten Langner, Daniel Reiberg, 2006. J2EE und JBoss. Carl Hanser Verlag München Wien Hibernate 3.0, 2006. objectone GmbH

Hibernate - Relational Persistence for Java and .NET, June 2008. http://www.hibernate.org Sven Haiges (Hsrg.), Marcel May, 2004. Java Server Faces, Web Development mit dem Standard Framework. Software & Support Verlag Sacha Warning, 2006. Entwicklung eines Reportingframeworks unter Einsatz eines XMLbasierten Zwischenformats