Modul Member dan Travel Agent Klikhotel.com Menggunakan Spring Framework MVC.

(1)

PRAKATA

Puji dan syukur kepada Tuhan Yang Maha Esa atas kasih dan karunia-Nya sehingga penulis dapat menyelesaikan tugas akhir-nya dengan judul “Pembuatan Modul Member dan Travel Agent pada klikhotel.com Menggunakan Spring Framework MVC”. Laporan tugas akhir ini adalah hasil dokumentasi proses tugas akhir yang dilakukan penulis dalam pembuatan aplikasi. Penulis juga menyadari bahwa tanpa bantuan dari dosen pembimbing bapak Niko Ibrahim, MIT, pembimbing lapangan bapak Erick Costanio dan segenap karyawan klikhotel, orang tua, saudara dan teman-teman lainnya, aplikasi danl aporan ini tidak akan terselesaikan dengan baik. Untuk itu penulis berkesempatan menyampaikan rasa terima kasih baik secara langsung, maupun tidak langsung yang sebesar-besarnya kepada :

1. Ibu Mewati Ayub, M.T selaku dekan dari fakultas teknologi informasi. 2. Bapak Niko Ibrahim, MIT selaku kepala jurusan S1 Sistem Informasi. 3. Ibu Doro Edi, M.Kom selaku Koordinator Tugas Akhir.

4. Orang tua serta saudara-saudara yang telah memberikan doa, motivasi dan dorongan semangat yang tiada henti.

5. Dan terakhir kepada seluruh teman-teman dan pihak-pihak yang tidak bisa penulis sebutkan satu persatu atas jasanya membantu penulis untuk melaksanakan dan menyelesaikan Kerja Praktek ini.

Penulis berharap semoga laporan ini bermanfaat bagi semua pihak dan penulis pun menyadari masih banyak kekurangan dalam laporan ini, untuk itu penulis mohon maaf atas segala kekurangan yang ada dan penulis mengharapkan kritik dan saran yang membangun agar hasil karya penulis berikutnya menjadi lebih baik lagi.

Bandung, 6 April 2014

(2)

ABSTRAK

Klikhotel merupakan situs online yang menyediakan jasa booking untuk hotel. Dalam era teknologi yang mobile saat ini, klikhotel ingin mengganti teknologi yang mereka sedang gunakan. Klikhotel menggunakan adobe flex sebagai front end, yang mana flex membutuhkan resource yang besar dan memiliki masalah dengan kompatibilitas. Klikhotel perlu sebuah teknologi untuk menjawab semua masalah itu, dan telah ditentukan spring MVC, iBatis, velcotiy, bootsrap, dan spring security sebagai teknologi baru yang akan diimplementasikan. Spring MVC merupakan

framework yang ringan dan akan menjadi framework utama dalam pembuatan

website yang akan dikombinasikan dengan iBatis untuk komunikasi dengan database. Untuk menjawab era teknologi mobile, klikhotel menggunakan bootstrap sebagai front end yang akan memberikan tampilan responsif sesuai dengan device yang digunakan, dan spring security digunakan untuk keamanan situs. Sebagai permulaan, teknologi tersebut akan diimplementasikan pada modul member dan modul travel agent.

Kata kunci : spring MVC, iBatis, bootsrap, spring security, modul member, modul travel agent

(3)

ABSTRACT

Klikhotel is an online website that provide booking service for hotels. In an era of mobility technology, klikhotel want to change the technology that recently used. Klikhotel used adobe flex as the front end, which is flex need a big resources and having problem with compatible issue. Klikhotel need a technology to wrap all that problems, and determine spring MVC, velocity, iBatis, bootstrap, and spring security as their new technology that will implemented. Spring MVC is a lightweight framework and will be a main framework for site that will combine with iBatis for database communication. To answer mobility technology, they use bootstrap as the front end that will give responsive user interface depend on device, and to protect their site they use spring security. As the beginning, it will implemented on member module and travel agent module.

Keywords: spring MVC, iBatis, bootsrap, spring security, member module, travel agent module.

(4)

vii

DAFTAR ISI

LEMBAR PENGESAHAN ... i

PERNYATAAN ORISINALITAS LAPORAN PENELITIAN………..ii

PERNYATAAN PUBLIKASI LAPORAN PENELITIAN ... iii

PRAKATA ... iv

ABSTRAK ... v

ABSTRACT ... vi

DAFTAR ISI ... vii

DAFTAR GAMBAR ... xi

DAFTAR TABEL ... xiv

DAFTAR NOTASI/ LAMBANG ... xv

DAFTAR LAMPIRAN………xviii

BAB 1. PENDAHULUAN ... 1

1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 1

1.3 Tujuan Pembahasan ... 2

1.4 Ruang Lingkup Kajian ... 2

1.5 Sumber Data ... 2

1.6 Sistematika Penyajian ... 3

BAB 2. KAJIAN TEORI ... 4

2.1 Flowchart ... 4

2.2 UML ... 4

2.2.1 Use Case Diagram... 5

2.2.2 Activity Diagram ... 5

2.2.3 Class Diagram ... 6

2.3 ERD ... 6

2.4 Java EE... 12

2.4.1 Arsitektur Java EE ... 12

2.5 Spring ... 14

2.5.1 Arsitektur Spring ... 15

2.5.2 Spring MVC ... 17

(5)

viii

2.6 iBatis ... 19

2.7 Velocity ... 20

2.8 JQuery ... 21

2.9 Bootstrap... 22

2.10 Charts4j... 24

BAB 3. ANALISIS DAN RANCANGAN SISTEM ... 25

3.1 Proses Bisnis ... 25

3.1.1 Proses Booking Properti ... 25

3.1.2 Proses Pembatalan Order... 27

3.1.3 Proses Redeem Voucher Hotel ... 28

3.1.4 Proses Redeem Voucher Belanja ... 29

3.1.5 Proses Pendaftaran Travel Agent ... 30

3.2 Entity Relationship Diagram (ERD) ... 32

3.3 Use Case Diagram ... 36

3.3.1 Use Case Diagram Sistem Member ... 36

3.3.2 Use Case Diagram Sistem Travel Agent ... 43

3.4 Activity Diagram ... 49

3.4.1 Activity Diagram Sistem Member ... 49

3.4.2 Activity Diagram Sistem Travel Agent ... 55

3.5 Class Diagram... 59

3.6 Sequence Diagram ... 60

3.6.1 Sequence Diagram Login... 60

3.6.2 Sequence Diagram Update Profile Member ... 61

3.6.3 Sequence Diagram Search Order ... 62

3.6.4 Sequence Diagram Cancel Order ... 63

3.6.5 Sequence Diagram Redeem Voucher Hotel ... 63

3.6.6 Sequence Diagram Redeem Voucher Belanja ... 64

3.6.7 Sequence Diagram Isi Review ... 65

3.6.8 Sequence Diagram Update Profile Agent ... 66

3.6.9 Sequence Diagram Search Balance ... 67

3.6.10 Sequence Diagram Report Agent ... 67

(6)

3.7 Rancangan Tampilan Antar Muka ... 68

3.7.1 Rancangan Halaman Login Member ... 69

3.7.2 Rancangan Halaman Profile Member ... 69

3.7.3 Rancangan Halaman Order Member ... 70

3.7.4 Rancangan Halaman Review Member ... 71

3.7.5 Rancangan Halaman Redeem Voucher Hotel... 72

3.7.6 Rancangan Halaman Redeem Voucher Belanja ... 73

3.7.7 Rancangan Halaman Login Agent ... 74

3.7.8 Rancangan Halaman Profile Agent ... 75

3.7.9 Rancangan Halaman Order Agent ... 77

3.7.10 Rancangan Halaman Balance Agent ... 78

3.7.11 Rancangan Halaman Report Agent ... 79

BAB 4. HASIL PENELITIAN ... 80

4.1 Sistem Member ... 80

4.1.1 Halaman Login Member ... 80

4.1.2 Halaman Profile Member ... 81

4.1.3 Halaman Order Member ... 83

4.1.4 Halaman Review Member ... 86

4.1.5 Halaman Reward Point ... 87

4.1.6 Halaman Redeem Voucher Hotel ... 89

4.1.7 Halaman Redeem Voucher Belanja ... 90

4.1.8 Halaman Responsive ... 92

4.2 Sistem Agent ... 94

4.2.1 Halaman Login Agent ... 94

4.2.2 Halaman Profile Agent ... 96

4.2.3 Halaman Order Agent ... 97

4.2.4 Halaman Balance ... 99

4.2.5 Halaman Report ... 100

BAB 5. PEMBAHASAN DAN UJI COBA HASIL PENELITIAN ... 102

5.1 Sistem Member ... 102

5.1.1 Halaman Login Member ... 102

(7)

5.1.3 Halaman Order Member ... 103

5.1.4 Halaman Review ... 104

5.1.5 Halaman Redeem Voucher Hotel ... 104

5.1.6 Halaman Redeem Voucher Belanja ... 105

5.2 Sistem Agent ... 105

5.2.1 Halaman Login Agent ... 105

5.2.2 Halaman Order Agent ... 106

5.2.3 Halaman Balance ... 106

5.2.4 Halaman Report ... 107

BAB 6. SIMPULAN DAN SARAN ... 108

6.1 Simpulan ... 108

6.2 Saran ... 108

(8)

DAFTAR GAMBAR

Gambar 2.1 Contoh sebuah class ... 6

Gambar 2.2 Contoh sebuah entitas konsumen ... 7

Gambar 2.3 Contoh entitas yang memiliki atribut sederhana ... 8

Gambar 2.4 Entitas yang memiliki atribut single valued, multivalued, dan turunan ... 9

Gambar 2.5 Contoh Relasi One to One [3] ... 10

Gambar 2.6 Contoh Relasi One to Many [3] ... 11

Gambar 2.7 Contoh Relasi Many to One [3] ... 11

Gambar 2.8 Contoh Relasi Many to Many [3] ... 12

Gambar 2.9 Komunikasi Antar Container [5] ... 13

Gambar 2.10 Layanan yang Disediakan Container [5] ... 14

Gambar 2.11 Arsitektur Spring [7] ... 15

Gambar 2.12 Alur Sebuah Request dalam Spring MVC ... 17

Gambar 2.13 Contoh konfigurasi spring security [8]. ... 19

Gambar 2.14 Halaman HTML [10] ... 20

Gambar 2.15 Developer code untuk Velocity [10] ... 21

Gambar 2.16 Contoh Halaman Web Velocity ... 21

Gambar 2.17 Contoh Penggunaan Bootstrap [13] ... 23

Gambar 2.18 Contoh Tampilan Menggunakan Bootstrap ... 23

Gambar 3.1 Flowchart Booking Properti ... 26

Gambar 3.2 Flowchart Pembatalan Order ... 27

Gambar 3.3 Flowchart Redeem Voucher Hotel ... 28

Gambar 3.4 Flowchart Redeem Voucher Belanja ... 30

Gambar 3.5 Flowchart Pendaftaran Travel Agent ... 31

Gambar 3.6 Entity Relationship Diagram Modul Member dan Agent ... 33

Gambar 3.7 Use Case Diagram Sistem Member ... 36

Gambar 3.8 Use Case Diagram Sistem Travel Agent ... 43

Gambar 3.9 Activity Diagram Proses Update Profile Member ... 49

Gambar 3.10 Activity Diagram Search Order Member ... 50

Gambar 3.11 Activity Diagram Reward Point... 51

(9)

xii

Gambar 3.13 Activity Diagram Redeem Voucher Hotel ... 53

Gambar 3.14 Activity Diagram Redeem Voucher Belanja... 54

Gambar 3.15 Activity Diagram Update Profile Agent ... 55

Gambar 3.16 Activity Diagram Search Order Agent ... 56

Gambar 3.17 Activity Diagram Search Balance ... 57

Gambar 3.18 Activity Diagram Report Agent ... 58

Gambar 3.19 Class Diagram model Modul Member dan Agent ... 59

Gambar 3.20 Daftar class service ... 60

Gambar 3.21 Sequence Diagram Login ... 60

Gambar 3.22 Sequence Diagram Update Profile ... 61

Gambar 3.23 Sequence Diagram Search Order ... 62

Gambar 3.24 Sequence Diagram Cancel Order ... 63

Gambar 3.25 Sequence Diagram Redeem Voucher Hotel ... 63

Gambar 3.26 Sequence Diagram Redeem Voucher Belanja ... 64

Gambar 3.27 Sequence Diagram Isi Review ... 65

Gambar 3.28 Sequence Diagram Update Profile Agent ... 66

Gambar 3.29 Sequence Diagram Search Balance ... 67

Gambar 3.30 Sequence Diagram Report Agent ... 67

Gambar 3.31 Sequence Diagram Pendaftaran Agent... 68

Gambar 3.32 Rancangan Halaman Login Member ... 69

Gambar 3.33 Rancangan Halaman Profile Member ... 70

Gambar 3.34 Rancangan Halaman Order Member ... 71

Gambar 3.35 Rancangan Halaman Review Member... 72

Gambar 3.36 Rancangan Halaman Redeem Voucher Hotel ... 73

Gambar 3.37 Rancangan Halaman Redeem Voucher Belanja ... 74

Gambar 3.38 Rancangan Halaman Login Agent ... 75

Gambar 3.39 Rancangan Halaman Profile Agent ... 76

Gambar 3.40 Rancangan Halaman Order Agent ... 77

Gambar 3.41 Rancangan Halaman Balance Agent ... 78

Gambar 3.42 Rancangan Halaman Report Agent ... 79

Gambar 4.1 Tampilan Halaman Login Member ... 80

(10)

xiii

Gambar 4.3 Pop-up Dialog Ubah Password ... 82

Gambar 4.4 Halaman Profile Member Lama ... 82

Gambar 4.5 Halaman Profile Member Baru ... 83

Gambar 4.6 Halaman Detail Order ... 84

Gambar 4.7 Halaman Order Member Lama ... 85

Gambar 4.8 Halaman Order Member Baru ... 85

Gambar 4.9 Form Cancellation Order... 86

Gambar 4.10 Halaman Review Member Lama ... 87

Gambar 4.11 Halaman Review Member Baru ... 87

Gambar 4.12 Halaman Reward Point Lama ... 88

Gambar 4.13 Halaman Reward Point Baru ... 88

Gambar 4.14 Halaman Redeem Voucher Hotel Lama ... 89

Gambar 4.15 Halaman Redeem Voucher Hotel ... 90

Gambar 4.16 Halaman Redeem Voucher Belanja Lama ... 91

Gambar 4.17 Halaman Redeem Voucher Belanja Baru ... 91

Gambar 4.18 Warning Dialog Point Tidak Mencukupi ... 92

Gambar 4.19 Pengguna diharuskan meng-install flash ... 93

Gambar 4.20 Ketidakcocokan requirement dan device ... 93

Gambar 4.21 Halaman Responsive Profile Member ... 94

Gambar 4.22 Halaman Login Agent ... 95

Gambar 4.23 Popup Dialog Pendaftaran Agent ... 95

Gambar 4.24 Halaman Profile Agent Lama ... 96

Gambar 4.25 Halaman Profile Agent Baru ... 97

Gambar 4.26 Halaman Order Agent Lama ... 98

Gambar 4.27 Halaman Order Agent Baru ... 98

Gambar 4.28 Halaman Balance Lama... 99

Gambar 4.29 Halaman Balance Baru ... 100

Gambar 4.30 Hasil Exporting Balance Dalam Bentuk Excel ... 100

Gambar 4.31 Halaman Report Lama ... 101

(11)

xiv

DAFTAR TABEL

Table 2.1 Tipe diagram UML ... 5

Tabel 3.1 Rincian Login ... 37

Tabel 3.2 Rincian Update Profile ... 37

Tabel 3.3 Rincian Search Order ... 38

Tabel 3.4 Rincian View Reward Point... 38

Tabel 3.5 Rincian Isi Review ... 39

Tabel 3.6 Rincian Redeem Voucher Hotel ... 39

Tabel 3.7 Rincian Redeem Voucher Belanja ... 40

Tabel 3.8 Rincian View Detail Order ... 41

Tabel 3.9 Rincian Cancel Order ... 41

Tabel 3.10 Rincian Login ... 44

Tabel 3.11 Rincian Update Profile ... 44

Tabel 3.12 Rincian Search Order ... 45

Tabel 3.13 Rincian View Detail Order ... 45

Tabel 3.14 Rincian Cancel Order ... 46

Tabel 3.15 Rincian Search Balance ... 47

Tabel 3.16 Rincian Export Balance To Excel ... 47

Tabel 3.17 Rincian Generate Report ... 48

Tabel 3.18 Rincian Daftar ... 48

Tabel 5.1 Hasil Pengujian Halaman Login Member ... 102

Tabel 5.2 Hasil Pengujian Halaman Profile Member... 103

Tabel 5.3 Hasil Pengujian Halaman Order Member... 103

Tabel 5.4 Hasil Pengujian Halaman Review ... 104

Tabel 5.5 Hasil Pengujian Halaman Redeem Voucher Hotel ... 104

Tabel 5.6 Hasil Pengujian Halaman Redeem Voucher Belanja ... 105

Tabel 5.7 Hasil Pengujian Halaman Login Agent ... 105

Tabel 5.8 Hasil Pengujian Halaman Order Agent ... 106

Tabel 5.9 Hasil Pengujian Halaman Balance ... 106

(12)

DAFTAR NOTASI/ LAMBANG

Jenis Simbol Nama Arti

Flowchart Dokumen

Menunjukan

dokumen input dan output baik untuk proses manual atau komputer

Flowchart Kegiatan manual

Menunjukan pekerjaan yang dilakukan secara manual

Flowchart Simpanan manual

Penyimpanan secara manual lewat pengarsipan

Flowchart Proses

Menunjukan

kegiatan proses dari operasi program komputer

Flowchart Harddisk

Menunjukan input/output menggunakan harddisk.

Flowchart Keyboard

Menunjukan input yang menggunakan keyboard.

Flowchart Input / output

Proses input / output data,

(13)

xvi

Flowchart On Page

Connector

Menunjukan

penghubung dalam halaman yang sama.

Flowchart Off Page Connector

Menunjukan

penghubung dalam halaman yang berbeda.

Flowchart Keputusan Untuk penyeleksian kondisi

Flowchart Terminasi

Menunjukan awal dan akhir dari suatu proses

UML Use case Menunjukan suatu

use case.

UML Aktor Pelaku dalam

sistem

UML

Use case system boundary boxes

Batas sistem.

UML <<include>> include Termasuk dalam use case lain

UML <<extends>> extends

Perluasan dari use case lain jika kondisi atau syarat

(14)

xvii Activity

Diagram Start point

Tanda dimulainya activity.

Activity

Diagram End Point

Tanda diakhirinya activity.

Activity

Diagram Activity

Tanda sebuah aktivitas.

Activity Diagram

Fork

(percabangan)

Jika terjadi percabangan.

Activity

Diagram Fork (join)

Jika terjadi penggabungan 2 aktivitas.

(15)

xviii

DAFTAR LAMPIRAN

(16)

BAB 1. PENDAHULUAN

1.1 Latar Belakang Masalah

Klikhotel merupakan website penyedia jasa booking hotel yang berada dibawah naungan perusahaan CV. Alfa Teknologi. Klikhotel merupakan unit usaha yang bergerak di b2c (business to customer) dan juga b2b (business to business). Selain menangani booking hotel dari customer langsung, klikhotel juga melakukan transaksi dengan unit bisnis yang lain, yaitu travel agent, affiliasi, dan supplier (hotel).

Teknologi front end yang digunakan saat ini adalah adobe flex. Penggunaan adobe flex mengharuskan user untuk menginstall flash player di web browser, ini dirasa menghambat user untuk membuka situs klikhotel. Selain itu cross browser device menjadi permasalahan dalam flex, tidak semua device dapat membuka halaman flex. Saat ini memang sudah ada halaman mobile klikhotel tapi hanya terbatas pada sistem booking kamar . Maka dari itu dibutuhkannya teknologi yang dapat menangani sekaligus permasalahan tersebut. CV. Alfa Teknologi memutuskan untuk mengganti teknologi front end dengan menggunakan SpringMVC yang didukung bootstrap, velocity dan jQuery, lalu spring dan iBatis yang digunakan untuk teknologi back end.

Berdasarkan masalah yang terjadi, maka akan dilakukan pengalihan teknologi terhadap sistem yang sedang digunakan. Untuk tahap awal pengalihan teknologi lama ke teknologi yang baru, akan diimplementasikan pada sistem member dan travel agent.

1.2 Rumusan Masalah

Pembuatan tugas akhir ini memiliki rumusan masalah sebagai berikut: 1. Bagaimana mengintegrasikan dan mengimplementasikan teknologi

spring, spring MVC, spring security, jQuery, velocity, dan iBatis pada modul member dan travel agent?

2. Bagaimana membuat user interface yang responsive dengan berbagai device ?

(17)

Universitas Kristen Maranatha

1.3 Tujuan Pembahasan

Adapun tujuan pembahasan dari tugas akhir ini yaitu :

1. Mengintegrasikan teknologi spring, jQuery, velocity, dan iBatis pada modul member dan travel agent.

2. Membuat user interface yang responsive dengan berbagai device.

1.4 Ruang Lingkup Kajian

Adapun ruang lingkup aplikasi dari tugas akhir ini sebagai berikut : 1. Modul member

 Profile

 Voucher management

 Point reward

 Point redeem

 Referral system

 Review system

 Order cancellation 2. Modul travel agent

 Profile

 Order statistic

 Excel reporting

 Order cancellation

Sedangkan untuk ruang lingkup software sebagai berikut : 1. Eclipse 3.5 sebagai editor program

2. Mysql server untuk database

1.5 Sumber Data

Data-data yang digunakan dalam penulisan laporan ini : 1. Data Primer

Data primer didapat dari hasil magang penulis pada CV. Alfa Teknologi dan pembimbing lapangan di tempat kerja.

(18)

Universitas Kristen Maranatha 2. Data Sekunder

Data sekunder didapat dari mata kuliah yang diajarkan di Universitas Kristen Maranatha seperti : Pemrograman dasar, basis data, pemrograman web, pemrograman web lanjut, dan pengembangan aplikasi enterprise.

1.6 Sistematika Penyajian

Sistematika penyajian dalam laporan ini sebagai berikut:

BAB I PENDAHULUAN

Bab ini berisi tentang pendahuluan yang berisi latar belakang, rumusan masalah, tujuan pembahasan, ruang lingkup kajian, sumber data, dan sistematika penyajian.

BAB II KAJIAN TEORI

Bab ini berisi tentang landasan teori yang digunakan selama pengerjaan tugas akhir.

BAB III ANALISA DAN RANCANGAN SISTEM

Bab ini berisi analisis, gambaran keseluruhan sistem, dan perancangan perangkat lunak.

BAB IV HASIL PENELITIAN

Bab ini berisi hasil implementasi yang telah dirancang pada bab III. Mulai dari implementasi modul, penyimpanan data, dan tampilan antar muka.

BAB V PEMBAHASAN DAN UJI COBA HASIL PENELITIAN

Bab ini berisi hasil test case dengan metode black box terhadap aplikasi yang telah dibuat.

BAB VI SIMPULAN DAN SARAN

(19)

108

Universitas Kristen Maranatha

BAB 6. SIMPULAN DAN SARAN

6.1 Simpulan

Adapun kesimpulan yang dapat ditarik dari hasil pembahasan bab-bab yang terdahulu, sebagai berikut :

1. Aplikasi yang dibuat sudah dapat mengintegrasikan dan mengimplementasikan teknologi Spring, Spring MVC, Spring Security, iBatis, JQuery, dan Velocity.

2. User Interface yang dibuat sudah responsive menyesuaikan dengan device yang digunakan sebagai web browser.

Secara umum aplikasi yang dibuat sudah sesuai dengan yang direncanakan. Aplikasi dapat dibuka dalam berbagai device dengan tampilan yang responsive, dan juga tidak membutuhkan waktu yang lama dalam membukanya.

6.2 Saran

Saran yang didapatkan setelah hasil evaluasi yang dilakukan yaitu : 1. Perlunya pembelajaran dari tutor atau ahli dari vendor

teknologi yang bersangkutan jika akan mengimplementasikan pada seluruh sistem.

2. Penelitian dan riset lebih lanjut harus dilakukan guna mencari kemungkinan-kemungkinan fitur tambahan untuk sistem member dan travel agent.

(20)

109

Universitas Kristen Maranatha

DAFTAR PUSTAKA

[1] M. Prietsley, Practical Object-Oriented Design with UML, Singapore: McGraw-Hill, 2000.

[2]

- . [Accessed 15

September 2013].

[3] A. Oppel, Databases Demistified, California: McGraw Hill/Osborne, 2004.

[4] "Crow's foot notation," [Online]. Available: http://www2.cs.uregina.ca/~bernatja/crowsfoot.html#_msocom_2.

[Accessed 10 September 2013].

[5] A. Goncalves, Beginning Java EE 6 Platform With Glassfish 3 From Novice To Profesional, New York: Apress, 2009.

[6] R. Breidenbach and C. Walls, Spring In Action, New York: Manning, 2005.

[7] "Basic Spring Achitecture," [Online]. Available: http://www.roseindia.net/spring/springarchitecture.shtml. [Accessed 18 September 2013].

[8] R. Winch and P. Mularien, Spring Security 3.1, Birmingham: Packt Publishing, 2012.

[9] C. Begin, B. Goodin and L. Meadors, iBatis In Action, New York: Manning, 2006.

[10] J. D. Gradecki and J. Cole, Mastering Apache Velocity, Indianapolis: Wiley, 2003.

[11] L. Beighley, JQuery For Dummies, Wiley Publishing, Inc, 2010.

[12] "Twitter Bootstrap," [Online]. Available: http://twitterbootstrap.org/twitter-bootstrap/. [Accessed 19 September 2013].

(21)

110

Universitas Kristen Maranatha [13] D. Cochran, Twitter Bootstrap Web Development How-To, Birmingham:

PACKT, 2012.

[14] "Google Code," [Online]. Available: https://code.google.com/p/charts4j/. [Accessed 1 April 2014].

(1)

BAB 1. PENDAHULUAN

1.1 Latar Belakang Masalah

Klikhotel merupakan website penyedia jasa booking hotel yang berada dibawah naungan perusahaan CV. Alfa Teknologi. Klikhotel merupakan unit usaha yang bergerak di b2c (business to customer) dan juga b2b (business to business). Selain menangani booking hotel dari customer langsung, klikhotel juga melakukan transaksi dengan unit bisnis yang lain, yaitu travel agent, affiliasi, dan supplier (hotel).

Teknologi front end yang digunakan saat ini adalah adobe flex. Penggunaan adobe flex mengharuskan user untuk menginstall flash player di web browser, ini dirasa menghambat user untuk membuka situs klikhotel. Selain itu cross browser device menjadi permasalahan dalam flex, tidak semua device dapat membuka halaman flex. Saat ini memang sudah ada halaman mobile klikhotel tapi hanya terbatas pada sistem booking kamar . Maka dari itu dibutuhkannya teknologi yang dapat menangani sekaligus permasalahan tersebut. CV. Alfa Teknologi memutuskan untuk mengganti teknologi front end dengan menggunakan SpringMVC yang didukung

bootstrap, velocity dan jQuery, lalu spring dan iBatis yang digunakan untuk teknologi back end.

1.2 Rumusan Masalah

Pembuatan tugas akhir ini memiliki rumusan masalah sebagai berikut: 1. Bagaimana mengintegrasikan dan mengimplementasikan teknologi

spring, spring MVC, spring security, jQuery, velocity, dan iBatis pada modul member dan travel agent?

2. Bagaimana membuat user interface yang responsive dengan berbagai

(2)

Universitas Kristen Maranatha

1.3 Tujuan Pembahasan

Adapun tujuan pembahasan dari tugas akhir ini yaitu :

1. Mengintegrasikan teknologi spring, jQuery, velocity, dan iBatis pada modul member dan travel agent.

2. Membuat user interface yang responsive dengan berbagai device.

1.4 Ruang Lingkup Kajian

Adapun ruang lingkup aplikasi dari tugas akhir ini sebagai berikut : 1. Modul member

 Profile

 Voucher management

 Point reward

 Point redeem

 Referral system

 Review system

 Order cancellation 2. Modul travel agent

 Profile

 Order statistic

 Excel reporting

 Order cancellation

Sedangkan untuk ruang lingkup software sebagai berikut : 1. Eclipse 3.5 sebagai editor program

2. Mysql server untuk database

1.5 Sumber Data

Data-data yang digunakan dalam penulisan laporan ini : 1. Data Primer

Data primer didapat dari hasil magang penulis pada CV. Alfa Teknologi dan pembimbing lapangan di tempat kerja.

(3)

Universitas Kristen Maranatha 2. Data Sekunder

1.6 Sistematika Penyajian

Sistematika penyajian dalam laporan ini sebagai berikut:

BAB I PENDAHULUAN

Bab ini berisi tentang pendahuluan yang berisi latar belakang, rumusan masalah, tujuan pembahasan, ruang lingkup kajian, sumber data, dan sistematika penyajian.

BAB II KAJIAN TEORI

Bab ini berisi tentang landasan teori yang digunakan selama pengerjaan tugas akhir.

BAB III ANALISA DAN RANCANGAN SISTEM

Bab ini berisi analisis, gambaran keseluruhan sistem, dan perancangan perangkat lunak.

BAB IV HASIL PENELITIAN

Bab ini berisi hasil implementasi yang telah dirancang pada bab III. Mulai dari implementasi modul, penyimpanan data, dan tampilan antar muka.

BAB V PEMBAHASAN DAN UJI COBA HASIL PENELITIAN

Bab ini berisi hasil test case dengan metode black box terhadap aplikasi yang telah dibuat.

BAB VI SIMPULAN DAN SARAN

(4)

Universitas Kristen Maranatha

BAB 6. SIMPULAN DAN SARAN

6.1 Simpulan

Adapun kesimpulan yang dapat ditarik dari hasil pembahasan bab-bab yang terdahulu, sebagai berikut :

1. Aplikasi yang dibuat sudah dapat mengintegrasikan dan mengimplementasikan teknologi Spring, Spring MVC, Spring Security, iBatis, JQuery, dan Velocity.

2. User Interface yang dibuat sudah responsive menyesuaikan dengan device yang digunakan sebagai web browser.

Secara umum aplikasi yang dibuat sudah sesuai dengan yang direncanakan. Aplikasi dapat dibuka dalam berbagai device dengan tampilan yang responsive, dan juga tidak membutuhkan waktu yang lama dalam membukanya.

6.2 Saran

Saran yang didapatkan setelah hasil evaluasi yang dilakukan yaitu : 1. Perlunya pembelajaran dari tutor atau ahli dari vendor

teknologi yang bersangkutan jika akan mengimplementasikan pada seluruh sistem.

2. Penelitian dan riset lebih lanjut harus dilakukan guna mencari kemungkinan-kemungkinan fitur tambahan untuk sistem