BAB IV ANALISA DAN PERANCANGAN SISTEM. dari sistem yang ada pada Citi Trans Bandung. Analisis yang penulis lakukan ini

Transkripsi

1 BAB IV ANALISA DAN PERANCANGAN SISTEM 4.1. Analisis Sistem yang Sedang Berjalan Pada bab ini dijelaskan mengenai prosedur yang berjalan dan yang diusulkan dari sistem yang ada pada Citi Trans Bandung. Analisis yang penulis lakukan ini terdiri dari analisis objek sistem yang berjalan, mencari kelemahan sistem yang berjalan sesuai standar yang telah ditentukan, serta mengevaluasi sistem yang sedang berjalan sehingga menghasilkan usulan rancangan sistem yang baru. Analisa sistem adalah penguraian dari suatu sistem informasi yang utuh kedalam bagian komponenkomponennya dengan maksud mengidentifikasi dan mengevaluasi kekurangankekurangan yang terjadi dan kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan perbaikannya. Analisis sistem yang sedang berjalan pada Citi Trans Bandung dibuat oleh penyusun dalam bentuk use case diagram dan activity diagram, karena kedua notasi Unified Modelling Language (UML) ini mewakili secara sederhana dan bisa dijadikan sebagai bahan dalam evaluasi sistem yang berjalan secara efektif, sehingga sistem dapat terlihat tanpa harus mengetahui secara detail prosedur yang berjalan. 64

2 Pemodelan Sistem yang Sedang Berjalan Berdasarkan metode pengembangan sistem yang digunakan, maka pertama kali akan dilakukan penentuan kebutuhan sistem yang akan dirancang. Proses penentuan kebutuhan ini diawali dengan cara menggambarkan atau memodelkan sistem yang sedang berjalan. Sesuai dengan metode pendekatan sistem yang digunakan, maka penggambaran atau pemodelan sistem yang berjalan akan dipresentasikan menggunakan notasi UML (Unifield Modeling Language), meliputi: use case diagram dan activity diagram, karena kedua diagram ini sudah mewakili dan bisa dijadikan sebagai bahan evaluasi Aktor Aktor adalah seseorang atau apa saja (pengguna sistem, sistem lain) yang berhubungan dengan sistem. Adapun aktor yang terlibat dalam penyampaian informasi lokasi wisata yang sedang berjalan pada Citi Trans Bandung adalah : 1. Penumpang 2. Admin Travel (Citi Trans Travel) Penumpang Admin Travel Gambar 4.1 Aktor Use Case Sistem yang Sedang Berjalan

3 Use Case Diagram Dibawah ini adalah use case diagram sistem yang sedang berjalan pada Citi Trans Bandung. Gambar 4.2 Use Case Diagram pada sistem yang sedang berjalan Skenario Use Case Diagram Skenario use case bertujuan untuk mendeskripsikan atau menjelaskan diagram use case. Berikut adalah skenario use case dari diagram use case pada gambar 4.2.

4 67 1. Skenario Use Case Pencarian Informasi Tiket Nama Tujuan Aktor Deskripsi Tabel 4.1 Skenario Use Case Pencarian Informasi Tiket : Pencarian Informasi Tiket : Untuk mengetahui informasi tentang tiket keberangkatan : Penumpang : Meliputi proses yang menggambarkan saat mencari informasi tiket dengan cara melihat jadwal keberangkatan baik secara langsung maupun dari website. Skenario Utama Aksi Reaksi 1. Penumpang mencari informasi 2. Admin Travel memberikan informasi tiket keberangkatan tiket keberangkatan Skenario Alternatif Aksi Reaksi Dilanjutkan ke skenario Pemesanan tiket 2. Skenario Use Case Pemesanan Tiket Tabel 4.2 Skenario Use Case Pemesanan Tiket Nama Tujuan Aktor Deskripsi : Pemesanan Tiket : Untuk mendapatkan tiket yang sesuai dengan jadwal keberangkatan : Penumpang : Meliputi proses yang menggambarkan saat memesaan tiket yang sesuai dengan keberangkatan. Skenario Utama Aksi Reaksi 1.Penumpang memesan tiket yang 2. diinginkan Skenario Alternatif Aksi Reaksi Dilanjutkan ke skenario Pembayaran Tiket

5 68 3. Skenario Use Case Pembayaran Tiket Tabel 4.3 Skenario Use Case Pembayaran Tiket Nama Tujuan Aktor Deskripsi : Pembayaran Tiket : Untuk bukti penumpang telah menyetujui jadwal keberangkatan yang di tawarkan admin travel. : Penumpang : Meliputi proses yang menggambarkan saat penumpang menyetujui jadwal keberangkatan. Skenario Utama Aksi Reaksi 1.Penumpang lakukan pembayaran 2. admin memulai proses validasi. tiket. Skenario Alternatif Aksi Reaksi

6 Activity Diagram Gambar 4.3 Activity Diagram pada Sistem yang sedang Berjalan pada Admin

7 Gambar 4.4 Activity Diagram pada Sistem yang sedang Berjalan pada User 70

8 Evaluasi Sistem yang sedang Berjalan Berdasarkan gambaran dari use case dan activity diagram yang telah digambarkan, maka terdapat beberapa kesimpulan mengenai sistem yang sedang berjalan. Tabel 4.4 Evaluasi Sistem yang sedang Berjalan No Masalah 1 Kurang praktisnya mendapatkan informasi tiket yang hanya dapat dilakukan dengan cara datang dan mengantri langsung di loket travel. 2 Lambatnya pencarian informasi tentang tiket. 3 Sistem pembelian tiket melalui fasilitas telpon dirasa kurang efektif Solusi Menyediakan sistem yang mampu mengelola dengan baik system tiket pada perusahaan travel. Menyediakan sistem yang praktis sehingga masyarakat bisa bebas mengakses informasi kapan saja dan dimana saja. Menyediakan sistem yang dapat melakukan pencarian informasi tiket perjalan dengan cepat dan efektif Perancangan Sistem Tahap perancangan merupakan kelanjutan dari proses analisis dimana dilakukan perubahan perubahan terhadap sistem yang sedang berjalan. Hal ini dilakukan untuk mengatasi kekurangan yang ada, memudahkan pekerjaan yang dilakukan oleh aktor yang terlibat dan menghemat waktu pekerjaan Tujuan Perancangan Perancangan Sistem e-ticketing adalah tahap untuk memperbaiki kesalahankesalahan yang sudah dijelaskan pada table evaluasi sistem yang sedang berjalan. Tahap ini sangat penting dalam menentukan baik atau tidaknya hasil perancangan

9 72 sistem yang diperoleh. Tahap perancangan sistem dapat digambarkan sebagai perancangan untuk membangun suatu sistem dan mengkonfigurasikan komponenkomponen perangkat lunak dan perangkat keras sehingga menghasilkan sistem yang lebih baik Gambaran Umum Sistem yang Diusulkan Pada tahap analisis sistem informasi yang berjalan, penulis mencoba menganalisis sistem yang berjalan pada biro perjalanan Citi Trans Bandung. Dari hasil analisis ternyata sistem yang sudah berjalan masih mempunyai permasalahan seperti yang di jelaskan diatas. Maka penulis mencoba mengusulkan suatu rancangan sistem berupa aplikasi android dengan harapan sistem yang penulis usulkan dapat membantu biro perjalanan Citi Trans Bandung, terutama dalam hal pelayanan informasi terhadap masyarakat. Dalam perancangan sistem ini penulis akan membangun suatu aplikasi e- ticketing berbasis android yang didalamnya berisi konten-konten yang memudahkan user untuk mengakses dan membeli tiket secara praktis Perancangan Prosedur yang Diusulkan Setelah melihat sistem yang sedang berjalan dan telah mengevaluasi sistem, maka prosedur sistem yang diusulkan adalah: 1. Admin memasukan informasi informasi yang bersangkutan dengan tiket dan jam keberangkatan kedalam database.

10 73 2. User tidak perlu datang langsung ke loket pembelian tiket travel Citi Trans, dengan hanya menggunakan handphone android, user sudah dapat mengetahui jadwal keberangkatan, harga tiket dan informasi yang ada pada Citi Trans Pemodelan Sistem yang Diusulkan Pemodelan sistem bertujuan untuk menentukan kebutuhan dari sistem yang diusulkan atau dirancang. Sesuai dengan metode pendekatan sistem yang digunakan, maka penggambaran atau pemodelan sistem yang diusulkan akan dipresentasikan menggunakan notasi UML (Unifield Modeling Language), meliputi: aktor, diagram use case, skenario use case, diagram aktivitas, diagram sekuensial, diagram kelas, diagram objek, diagram komponen, diagram deployment Aktor Aktor adalah seseorang atau apa saja (pengguna sistem, sistem lain) yang berhubungan dengan sistem. Adapun aktor yang terlibat dalam sistem aplikasi kuliah online diantaranya adalah: 1. User 2. Web Service

11 74 User Web Service Use Case Gambar 4.5 Aktor Use Case Sistem yang diusulkan Mendeskripsikan kelakuan sistem dari sudut pandang pengguna, berguna untuk membantu memahami kebutuhan. Use case adalah dasar dari diagram lain. Adapun use case diagram dari Sistem Informasi e-ticketing biro perjalanan yang diusulkan tersaji dalam gambar. Login System <<include>> <<include>> <<include>> Booking Ticket User <<include>> Ticket Status Web Service Bukti Transaksi About Gambar 4.5 Diagram Use Case Sistem yang diusulkan

12 75 Berikut ini adalah Skenario Use Case yang diusulkan kepada biro perjalan Citi Trans. Skenario Use Case No. Use Case : 01 Nama Use Case : Login Scenario : Tabel 4.5 Login Skenario Aksi Aktor Reaksi Aplikasi 1. User Menjalankan Aplikasi Citi Trans 2. Menampilkan Form Login 3. User Input ( & password) 4. Meminta Data User 5. Web Server Query ke Data Base 6. Web Service Mengirim hasil Query 7. Menampilkan Menu

13 76 No. Use Case : 02 Nama Use Case : Booking Ticket Scenario : Tabel 4.6 Booking Ticket Skenario Aksi Aktor Reaksi Aplikasi 1. User Memilih Menu Booking Ticket 2.Menampilkan Form (Kota, Rute, Tanggal Berangkat) 3. User Input Form (Kota, Rute, Tanggal Berangkat) 4.Meminta Data Jam 5. Web Service Query ke Data Base 6. Web Service Mengirim hasil Query 7. Menampilkan List Jam Keberangkatan 8. User Memilih Jam Keberangkatan 9. Menampilkan Form (Jumlah Ticket) 10. User Input Form (Jumlah Ticket) 11. User Memesan Ticket 12. Mengirim Data Booking

14 Web Service Mengirim Data 14. Menampilkan cara pembayaran Booking ke Data Base No. Use Case : 03 Nama Use Case : Ticket Status Scenario : Tabel 4.7 Ticket Status Skenario Aksi Aktor Reaksi Aplikasi 1. User Memilih Menu Ticket Status 2. Meminta Data Ticket 3. Server Query ke Data Base 4. Server Mengirim hasil Query 5. Menampilkan List Ticket 6. User Memilih Ticket 7. Menampilkan Status Ticket

15 78 No. Use Case : 04 Nama Use Case : Bukti Transaksi Scenario : Tabel 4.8 Bukti Transaksi Skenario Aksi Aktor Reaksi Aplikasi 1. User Memilih menu Bukti Transaksi 2. Meminta Data Verified Ticket 3. Server Query ke Data Base 4. Server Mengirim hasil Query 5. Menampilkan List Verified Ticket 6. Memilih Verified Ticket 7. Menampilkan Bukti Transaksi No. Use Case : 05 Nama Use Case : About Scenario : Tabel 4.9 About Skenario Aksi Aktor Reaksi Aplikasi 1. User Memilih menu About 2. Menampilkan Informasi Aplikasi

16 Activity Diagram Aktifitas diagram memberikan gambaran ilustrasi alur dari setiap fungsi yang ada dalam system Login Activity Diagram User Menjalankan Aplikasi Citi Trans kemudian login untuk bisa mengakses konten yang ada dalam aplikasi. User Aplication Web Service Menjalan Aplikasi CitiTrans Menampilkan Form Login User Input ( & password) Meminta Data User Web Server Query ke Data Base Menampilkan Menu Web Service Mengirim hasil Query Gambar 4.6 Login Activity Diagram

17 Booking Ticket Activity Diagram User memilih menu booking ticket untuk menampilkan Form Kota, Rute, Tanggal Berangkat. User Aplication Web Service User Memilih Menu Booking Ticket User Input Form (Kota, Rute, Tanggal Berangkat) Menamilkan Form (Kota, Rute, Tanggal Berangkat) Meminta Data Jam Web Service Query ke Data Base User Memilih Jam Keberangkatan Menampilkan List Jam Keberangkatan Web Service Mengirim hasil Query User Input Form (Jumlah Ticket) Menampilkan Form (Jumlah Ticket) User Memesan Ticket Mengirim Data Booking Web Service Mengirim Data Booking ke Data Base Menampilkan cara pembayaran Gambar 4.7 Booking Ticket Activity Diagram

18 Ticket Status Activity Diagram User memilih menu ticket status sebagai bukti bahwa user telah verified. User Aplication Web Service User Memilih Menu Ticket Status Meminta Data Ticket Web Service Query ke Data Base User Memilih Ticket Menampilkan List Ticket Web Service Mengirim hasil Query Menampilkan Status Ticket Gambar 4.8 Ticket Status Activity Diagram

19 Bukti Transaksi Activity Diagram User Memilih menu Bukti Transaksi sebagai bukti bahwa user telah melakukan pembayaran dengan transfer ke rekening biro perjalanan. User Aplication Web Service User Memilih menu Bukti Transaksi Meminta Data Verified Ticket Web Service Query ke Data Base Memilih Verified Ticket Menampilkan List Verified Ticket Web Service Mengirim hasil Query Menampilkan Bukti Transaksi Gambar 4.9 Bukti Transaksi Activity Diagram

20 About Activity Diagram User memilih menu about suntuk menampilkan menu informasi yang ada pada aplikasi. User Aplication User Memilih menu About Menampilkan Informasi Aplikasi Gambar 4.10 Ticket Status Activity Diagram

21 Sequence Diagram Sequence diagram adalah suatu diagram yang menggambarkan interaksi antar obyek dan mengindikasikan komunikasi diantara obyek-obyek tersebut. Diagram ini juga menunjukkan serangkaian pesan yang dipertukarkan oleh obyek-obyek yang melakukan suatu tugas atau aksi tertentu. Obyek-obyek tersebut kemudian diurutkan dari kiri ke kanan, aktor yang menginisiasi interaksi biasanya ditaruh di paling kiri dari diagram Sequence Diagram Login : LoginActivity : JSONParser : HomeActivity : USER 1 : oncreate() : Web Service 2 : form login 3 : & Password 4 : onclicklistener() 5 : makehttprequest() 6 : query login 7 : oncreate() 8 : home interface Gambar 4.11 Sequence Diagram Login

22 Sequence Diagram Register : LoginActivity : RegisterActivity : WelcomeActivity : JSONParser : USER : Web Service 1 : onclicklistener() 2 : oncreate() 3 : form register 4 : nama, , password 5 : onclicklistener() 6 : makehttprequest() 8 : oncreate() 7 : query register 9 : welcome interface 10 : onclicklistener() 12 : login interface 11 : oncreate() Gambar 4.12 Sequence Diagram Register

23 Sequence Diagram Booking Ticket : HomeActivity : BookingActivity : BookingListActivity : BookingDetailActivity : CaraTransaksiActivity : JSONParser : USER 1 : onclicklistener() 2 : oncreate() : Web Service 3 : LoadDarftarKota() 4 : makehttprequest() 5 : query kota 8 : LoadDaftarRute() 7 : data kota 9 : makehttprequest() 6 : json kota 10 : query rute 13 : form booking 14 : onclicklistener() 15 : kota, rute, tgl_pesan 16 : oncreate() 12 : data rute 11 : json rute 17 : LoadDaftarJam() 18 : makehttprequest() 19 : query jam 22 : list jam 23 : onitemclicklistener() 24 : oncreate() 21 : data jam 20 : json jam 25 : form booking detail 26 : SentBooking() 27 : jumlah ticket 28 : makehttprequest() 30 : oncreate() 29 : query booking 31 : cara transaksi interface Gambar 4.13 Sequence Diagram Booking Ticket

24 Sequence Diagram Ticket Status : HomeActivity : StatusActivity : StatusDetailActivity : JSONParser : USER 1 : onclicklistener() 2 : oncreate() : Web Service 3 : LoadTicket() 4 : makehttprequest() 5 : query ticket 8 : list ticket 9 : onitemclicklistener() 10 : oncreate() 7 : data ticket 6 : json ticket 11 : detail ticket 12 : DeleteTicket() 13 : makehttprequest() 14 : query delete 16 : home inteface 15 : oncreate() Gambar 4.14 Sequence Diagram Ticket status Sequence Diagram Bukti Transaksi : HomeActivity : BuktiActivity : BuktiDetailActivity : JSONParser : USER 1 : onclicklistener() 2 : oncreate() : Web Service 3 : LoadValidTicket() 4 : makehttprequest() 5 : query valid ticket 8 : list valid ticket 9 : onitemclicklistener() 10 : oncreate() 7 : data valid ticket 6 : json valid ticket 11 : detail bukti Gambar 4.15 Sequence Diagram Bukti Transaksi

25 Sequence Diagram About : HomeActivity : AboutActivity : USER 1 : onclicklistener() 2 : oncreate() 3 : about interface Gambar 4.16 Sequence Diagram About Class Diagram Class diagram adalah sebuah class yang menggambarkan struktur dan penjelasan class, paket, dan objek serta hubungan satu sama lain seperti containment, pewarisan, asosiasi, dan lain-lain. Class diagram juga menjelaskan hubungan antar class dalam sebuah sistem yang sedang dibuat dan bagaimana caranya agar mereka saling berkolaborasi untuk mencapai sebuah tujuan.

26 89 AboutActivity +oncreate() StatusActivity +url_valid_ticket +api_valid_ticket +KEY_NO_TICKET +KEY_NAMA +KEY_ +KEY_KOTA +KEY_RUTE +KEY_TANGGAL_PESAN +KEY_BERANGKAT +KEY_JAM +KEY_HARGA +KEY_JUMLAH +KEY_TOTAL +KEY_STATUS +oncreate() +LoadValidTicket() +onitemclicklistener() StatusDetailActivity +url_delete_ticket +oncreate() +DeleteTicket() HomeActivity LoginActivity +KEY_UID +KEY_NAME +KEY_ +KEY_CREATED_AT +oncreate() +onclicklistener() RegisterActivity +KEY_UID +KEY_NAME +KEY_ +KEY_CREATED_AT +oncreate() +onclicklistener() WelcomeActivity JSONParser +makehttprequest() BuktiDetailActivity +oncreate() +oncreate() +onclicklistener() StatusActivity +url_valid_ticket +api_valid_ticket +KEY_NO_TICKET +KEY_NAMA +KEY_ +KEY_KOTA +KEY_RUTE +KEY_TANGGAL_PESAN +KEY_BERANGKAT +KEY_JAM +KEY_HARGA +KEY_JUMLAH +KEY_TOTAL +KEY_STATUS +oncreate() +LoadValidTicket() +onitemclicklistener() BookingActivity +url_daftar_kota +url_daftar_rute +api_kota +api_rute +day +mount +year +hour +minute +second +oncreate() +onclicklistener() +LoadDarftarKota() +LoadDaftarRute() BookingListActivity +url_darftar_jam1 +url_darftar_jam2 +KEY_NO_JAM +KEY_JAM +KEY_NO_RUTE +KEY_RUTE +KEY_HARGA +oncreate() +onitemclicklistener() +LoadDaftarJam1() +LoadDaftarJam2() +oncreate() +onclicklistener() CaraTransaksiActivity +oncreate() BookingDetailActivity +url_booking +oncreate() +SentBooking() Gambar 4.17 Class Diagram Deployment Diagram Untuk membangun aplikasi ini, hal-hal yang dibutuhkan adalah: 1. Web service (API): yang menyediakan fungsionalitas sistem secara keseluruhan. Di dalam Web Service itu sendiri, terdapat engine Apache yang berfungsi untuk menjalankan script, dan MySQL dianggap sebagai bagian dari Web Service yang menyediakan wadah bagi data-data yang diperlukan.

27 90 2. Mobile App: menangani fungsionalitas dan berinteraksi langsung kepada pengguna. Disisi mobile app, menggunakan platform Android. Android Client Web_Service XML GUI PHP Pages Class MySQL Data BAse Resouce DatePicker Library Gambar 4.18 Deployment Diagram Perancangan Antarmuka Perancangan antar muka merupakan penggambaran tampilan (interface) sebuah sistem yang akan digunakan secara langsung oleh pengguna, dan juga merupakan penggambaran interaksi yang dapat dilakukan oleh pengguna dalam sistem. Adapun dalam perancangan antar muka ini terdapat beberapa bagian yang harus dilakukan, yaitu dari menentukan rancangan input dan output pada setiap fungsi yang telah ditentukan.

28 Perancangan Menu Login Citi Trans LOGIN Password LOGIN I dont have account, sign up me! Gambar 4.19 Perancangan Menu Login Perancangan Menu Utama Citi Trans Gambar 4.20 Perancangan Menu utama

29 Perancangan Menu Booking Ticket Booking Ticket Nama Lokasi Nama Lokasi Nama Lokasi Nama Lokasi Gambar 4.21 Perancangan Menu Booking Ticket Perancangan Menu Bukti Transaksi Bukti Transaksi Terimakasih anda telah melakukan pembayaran Atas Nama : Detail Ticket No Ticket : Tanggal : Dari : Rute : Berangkat : Jam : Harga tiket : Jumlah Tiket: Total : Gambar 4.22 Perancangan Bukti Transaksi

30 Perancangan Menu About About A.Syarat dan Ketentuan B.Ketentuan Reservasi Gambar 4.23 Perancangan Menu About Perancangan Arsitektur Jaringan Pada gambar 4.30 aplikasi web berjalan pada web server yang berada pada suatu lingkungan intranet perusahaan yang terhubung langsung dengan lingkungan internet. Oleh karena itu client internal yang tergabung dalam lingkungan intranet dan client eksternal yang tergabung dalam lingkungan internet dapat mengakses aplikasi web monitoring penugasan pada web server. Internet GPS Server Smartphone Android Provider Gambar 4.24 Perancangan Arsitektur Jaringan