BAB III PERANCANGAN SISTEM 4.1 Perancangan Sistem Usulan 4.1.1 Diagram Konteks PENGGUNA - - Saldo Tarif SISTEM INFORMASI MOLAPP - Data User - Tarif - Kode Voucher - Derek - Rest Area - - - Data User History User PENYEDIA JALAN TOLL Gambar 4.1 Diagram konteks usulan 53
4.1.2 Use CaseDiagram USE CASE MOLAPP Register PENGGUNA Login Lihat Menu (include) Tambah Saldo Panggil Derek Scan Qr Code PENYEDIA JALAN TOLL Lihat History Kelola Data Mengelola Laporan Gambar 4.2 Usecase diagram usulan 54
4.1.3 Deskripsi Use Case Usulan 4.1.3.1 Deskripsi Use Case Registrasi Tabel 4.1 Deskripsi Use Case Registrasi Use case name: Registrasi Use Case Type Use case id: 1 System Analysis: Priority: High Primary business Pengguna actor: Description: Use case ini menggambarkan prosedur yang harus Pre-condition: - dilakukan oleh pengguna sebelum registrasi sebelum login Typical course Actor Action System Response Of events: Step 1: Pengguna membuka registrasi aplikasi. Step 3: Pengguna mengisi data di form registrasi. Step 2: Menampilkan form registrasi. Step 4 : Sistem menyimpan data ke dalam database. Alternate courses: Jika sistem dala m inputan salah maka kembali untuk mengisi data form registrasi. Conclusion: Use case ini selesai jika aktor benar dalam mengisi inputan registrasi. Post-condition: Sistem akan menampilkan menu login 55
4.1.3.2 Deskripsi Use Case Login Tabel 4.2 Deskripsi Use Case Login Use case name: Login Use Case Type Use case id: 2 System Analysis: Priority: High Primary Pengguna business actor: Description: Use case ini menggambarkan prosedur yang harus dilakukan oleh pengguna sebelum login kedalam aplikasi. Precondition: pengguna harus mengisi form login yang ditampilkan oleh aplikasi Typical course Of events: Actor Action Step 1: Pengguna membuka aplikasi dan memilih menu login Step 3: aktor mengisi username dan password System Response Step 2: System memprosees untuk menampilkan form login Step 4 : jika inputan benar maka aktor masuk kedalam halaman utama admin 56
Alternate courses: Conclusion: Step 5 : User dapat mengisi ulang data kembali jika data yang dimasukan salah. Use case ini selesai jika aktor benar dalam mengisi inputan username dan password Sistem akan menampilkan halaman utama admin Postcondition: 4.1.3.3 Deskripsi Use Case lihat Menu Tabel 4.3 Deskripsi Use Case lihat Menu Use case name: lihat Menu Use Case Type Use case id: 3 System Analysis: Priority: High Primary Pengguna business actor: Description: Use case ini menggambarkan prosedur yang dilakukan oleh pengguna untuk melihat menu kedalam aplikasi dan Saldo Pre-condition: Typical course Actor Action System Response Of events: Step 1: User memilih menu di aplikasi Step 2: system akan menampilkan menu aplikasi 57
Alternate - courses: Conclusion: Use case ini selesai jika user telah membuka menu Post-condition: 4.1.3.4 Deskripsi Use Case Tambah Saldo Tabel 4.4 Deskripsi Use Case Tambah Saldo Use case name: Tambah Saldo Use Case Type Use case id: 4 System Analysis: Priority: High Primary business Pengguna actor: Description: Use case ini menggambarkan prosedur yang dilakukan oleh pengguna untuk tambah saldo ke aplikasi Pre-condition: User harus mengisi saldo ke dalam aplikasi jika saldo tidak cukup Typical course Actor Action System Response Of events: Step 1: User mengisi saldo ke aplikasi Step 2: saldo akan bertambah di dalam aplikasi Step 3: - Step 4: - Alternate courses: Pengguna dapat mengisi saldo jika saldo sudah berkurang 58
Conclusion: Post-condition: Use case ini selesai jika saldo bertambah System akan menampilkan saldo kedalam aplikasi 4.1.3.5 Deskripsi Use Case Lihat Rest Area Terdekat Tabel 4.5 Deskripsi Use Case Lihat Rest Area Terdekat Use case name: Lihat Rest Area Terdekat Use Case Type Use case id: 5 System Analysis: Priority: High Primary business Pengguna actor: Description: Use case ini menggambarkan prosedur yang harus dilakukan oleh pengguna untuk melihat Rest Area Pre-condition: User melihat Rest Area terdekat Typical course Actor Action System Response Of events: Step 1: User melihat Rest Area terdekat ke aplikasi Step 2: Aplikasi akan menampilkan Rest Area terdekat Step 3 :- Step 4 : - Alternate courses: - Conclusion: Use case ini selesai jika user melihat Rest Area 59
Post-condition: Aplikasi akan menampilkan Rest Area 4.1.3.6 Deskripsi Use Case Panggil Derek Tabel 4.6 Deskripsi Use Case Mobil Derek Use case name: Panggil Derek Use Case Type Use case id: 6 System Analysis: Priority: High Primary Pengguna business actor: Description: Use case ini menggambarkan prosedur yang dilakukan oleh user untuk memanggil mobil derek - Precondition: Typical course Of events: Actor Action Step 1: User memilih menu mobil derek System Response Step 2: Aplikasi akan menampilakan nomer telfon mobil derek Step 3: - Sttep 4: - 60
Alternate - courses: Conclusion: Use case ini selesai jika user memanggil mobil derek - Postcondition: 4.1.3.7 Deskripsi Use Case Scan Qr Code Tabel 4.7 Deskripsi Use Case Scan Qr Code Use case name: Scan Qr Code Use Case Type Use case id: 7 System Analysis: Priority: High Primary business Pengguna actor: Description: Use case ini menggambarkan prosedur yang harus dilakukan oleh pengguna sebelum melakukan transaksi Pre-condition: Pengguna harus membuka form Qr Code yang ditampilkan oleh aplikasi Typical course Actor Action System Response Of events: Step 1:Pengguna membuka aplikasi Scan Qr code Step 2: Aplikasi menampilkan Scan Qr Code 61
Step 3: Pengguna memberikan scan barcode Step 4 : Scanner memproses scan barcode ke dalam system ke dalam scanner Alternate courses: Step 5 : Pengguna dapat mengisi ulang data kembali jika data yang dimasukan salah. Conclusion: Post-condition: Use case ini selesai jika transaksi berhasil System akan menyimpan Scan Qr code ke dalam database 4.1.3.8 Deskripsi Use Case Lihat History Tabel 4.8 Deskripsi Use Case Lihat History Use case name: Lihat History Use Case Type Use case id: 8 System Analysis: Priority: High Primary business Pengguna actor: Description: Use case ini menggambarkan prosedur yang harus dilakukan oleh user melihat history Pre-condition: Melakukan transaksi yang di aplikasi Typical course Actor Action System Response Of events: Step 1: Pengguna membuka menu history Step 2: Aplikasi menampilkan menu history 62
Step 3: - Step 4 : - Alternate courses: - Conclusion: Post-condition: Use case ini selesai jika pengguna melihat history Aplikasi akan menyimpan transaksi ke menu history 4.1.3.9 Deskripsi Use Case Kelola Data Tabel 4.9 Deskripsi Use Case Kelola Data Use case name: Kelola Data Use Case Type Use case id: 9 System Analysis: Priority: High Primary business Penyedia Jalan tol actor: Description: Use case ini menggambarkan prosedur yang harus dilakukan oleh penyedia jalan tol sebelum melakukan kelola data. Pre-condition: - Typical course Actor Action System Response Of events: Step 1:Penyedia jalan tol membuka menu data pengguna Step 2: Menampilkan from data pengguna 63
Step 3 : Penyedia jalan tol kelola data pengguna Step 4 : Sistem menyimpan sesuai perintah dari penyedia jalan toll Alternate courses: - Conclusion: Use case ini selesai jika penyedia jalan tol selesai Post-condition: - kelola data pengguna. 4.1.3.10 Deskripsi Use Case Mengelola Laporan Tabel 4.10 Deskripsi Use Case Mengelola Laporan Use case name: Mengelola Laporan Use Case Type Use case id: 10 System Analysis: Priority: High Primary business Penyedia Jalan Tol actor: Description: Use case ini menggambarkan prosedur yang harus dilakukan oleh penyedia jalan tol sebelum membuat laporan. Pre-condition: Penyedia jalan tol harus mengelola data laporan kendaraan setiap transaksi. Typical course Actor Action System Response 64
Of events: Step 1: penyedia jalan tol membuka menu laporan. Step 3 : Mengelola data laporan. Step 2: Menampilkan form laporan. Step 4 : Sistem akan memproses sesuai kemauan penyedia jalan tol Alternate courses: - Conclusion: Use case ini selesai jika penyedia jalan tol selesai jika Post-condition: - data sudah dikelola. 65
4.1.4 Activity Diagram 4.1.4.1 Akctivity Diagram Registrasi Activity Diagram Pengguna System Memulai Aplikasi Mobile Paid Tampilkan Form Registrasi Mengisi Form Registrasi T Valid Y Menu Login 4.3 Activity Diagram Registrasi Gambar 66
4.1.4.1 Akctivity Diagram Login Activity Diagram Pengguna System Memulai Aplikasi Mobile Paid Tampilkan Form Login Mengisi Username dan Password T Valid Y Menu Utama 4.4 Activity Diagram Login Gambar 67
4.1.4.2 Akctivity Diagram Lihat Menu Activity Diagram Pengguna Sistem Membuka Aplikasi Mobile Paid Tampilkan menu Aplikasi Mobile Paid 4.5 Activity Diagram Lihat Menu Gambar 68
4.1.4.3 Akctivity Diagram Tambah Saldo Activity Diagram Pengguna Sistem Membuka Menu Top Up Saldo Tampilkan Form Top Up Saldo Mengisi Saldo Simpan 4.6 Activity Diagram Tambah Saldo Gambar 69
4.1.4.4 Akctivity Diagram Lihat Rest Area Activity Diagram Pengguna Sistem Membuka Menu Rest Area Menampilkan Menu Rest Area 4.7 Activity Diagram Lihat Rest Area Gambar 70
4.1.4.5 Akctivity Diagram Panggil Derek Activity Diagram Pengguna Sistem Membuka Menu Derek Menampilkan Menu Derek T Panggil Y Memanggil Gambar 4.8 Activity Diagram Panggil Derek 71
4.1.4.6 Akctivity Diagram Scan Qr Code Activity Diagram Pengguna System Membuka Menu Qr Code Menampilkan Data Qr Code Menempelkan Ke Scanner Tambah Saldo T Valid Y Data Tersimpan di History 4.9 Activity Diagram Scan Qr Code Gambar 72
4.1.4.7 Akctivity Diagram Lihat History Activity Diagram Pengguna Sistem Membuka Menu History Menampilkan Menu History 4.10 Activity Diagram Lihat History Gambar 73
4.1.5 Sequence Diagram 4.1.5.1 Sequence Diagram Registrasi Pengguna Sistem Database 1.Membuka Aplikasi Molapp 2.Menampilkan Form Registrasi 3.Input Registrasi 4.Verifikasi Inputan 5.Inputan Benar 7.Menampilkan Login 6.Inputan Salah 8.Menampilkan Pesan Inputan Salah Gambar 4.11 Sequence Diagram Registrasi 74
4.1.5.2 Sequence Diagram Login Pengguna Sistem Database 1.Membuka Aplikasi Molapp 2.Menampilkan Form Login 3.Input Password dan Username 4.Verifikasi Inputan 5.Inputan Benar 7.Menampilkan Halaman Utama 6.Inputan Salah 8.Menampilkan Pesan Inputan Salah Gambar 4.12 Sequence Diagram Login 75
4.1.5.3 Sequence Diagram Lihat Menu Pengguna Sistem 1. Lihat Menu Menampilakan Menu Gambar 4.13 Sequence Diagram Lihat Menu 76
4.1.5.4 Sequence Diagram Tambah Saldo Pengguna Sistem Database 1.Membuka Menu Saldo 2.Menampilkan Menu Saldo 3.Mengisi from Saldo 4.Verifikasi Inputan 5.Inputan Benar 7.Menampilkan Menu Utama 6.Inputan Salah 8.Menampilkan Pesan Inputan Salah Gambar 4.14 Sequence Diagram Tambah Saldo 77
4.1.5.5 Sequence Diagram Rest Area Pengguna Sistem 1. Membuka Menu Rest Area Menampilkan Menu Rest Area Gambar 4.15 Sequence Diagram Rest Area 78
4.1.5.6 Sequence Diagram Panggil Derek Pengguna Sistem 1.Membuka Menu Derek 3.Menampilkan Menu Derek 3.Panggil Derek Gambar 4.16 Sequence Diagram Panggil Derek 79
4.1.5.7 Sequence Diagram Qr Code Pengguna Sistem Database 1.Membuka Menu Qr Code 2.Menampilkan Qr Code 3.Menempelkan Qr Code ke Scanner 4.Membaca Qr Code 5.Transaksi Berhasil 7.Menampilkan History 6.Transaksi Gagal 8.Menampilkan Transaksi Gagal Gambar 4.17 Sequence Diagram Qr Code 80
4.2 Perancangan Basis Data 4.2.1 Class diagram Penyedia Jasa id_pegawai nama email password remember_token update_at creatde_at topup id_voucher id_user token saldo created_at update_at 1..* 1..* 1 Voucher id_voucher unique_id name email token encrypted_password salt created_at update_at Transaksi id_transaksi nama exit_tol created_at update_at 1 1..* detail_transaksi id_transaksi id_user exit_tol plat_no created_at update_at 1..* 1 1 Pengguna id_user unique_id name plat_no email saldo encrypted_password salt created_at update_at Gambar 4.18 Class Diagram 81
4.2.2 Pemodelan Data Top Up Voucher Pk Penyedia Jalan Toll Id_pegawai Nama Email Password Remember_token Update_at Created_at Pk Id_voucher Id_user token saldo Created_at Update_at Pk Id_voucher Unique_id Name Email Token Encrypted_password salt Created_at Update_at Pengguna Pk Transaksi Id_transaksi nama Exit_tol Created_at Update_at Detail_transaksi Pk Id_transaksi Id_user Exit_tol Plat_no Created_at Update_at Pk Id_user Unique_id Name Plat_no Email saldo Encrypted_password salt Created_at Update_at Gambar 4.19 Pemodelan Data 82
4.2.3 Spesifikasi Basis Data 1. Nama File : Member 2. media penyimpanan : Server 3. Primary Key : Id_User 4. Panjang Record : Int 237 Bit 5. Struktur : Id, Unique_id, Name, Plat_no, Email, Saldo, Encrypted_password, Salt, Created_at, Update_at No Nama Field Jenis Lebar Desimal Keterangan 1 Id Int 4 Identitas User 2 Unique_id Varchar 23 Kode Unique 3 Name Varchar 50 Nama User 4 Plat_no Varchar 30 Plat nomer 5 Email Varchar 30 Password 6 Saldo Int 10 Saldo 7 Encrypted_password Varchar 80 Encrypted Password 8 Salt Varchar 10 Cvarchar 9 Created_at Datetime Created 10 Update_at Datatime Update 1. Nama File : Transaksi 2. media penyimpanan : Server 3. Primary Key : Id_Transaksi 83
4. Panjang Record : Int 104 Bit 5. Struktur : Id_transaksi, Nama, Exit_tol, Created_at, Update_at No Nama Field Jenis Lebar Desimal Keterangan 1 Id_transaksi Int 4 Indentitas Transaksi 2 Nama Varchar 50 Nama 3 Exit_toll Varchar 50 Exit toll 4 Created_at Timestamp Created 5 Update_at Timestamp Update 1. Nama File : Voucher 2. media penyimpanan : Server 3. Primary Key : Id_Voucher 4. Panjang Record : Int 207 Bit 5. Struktur : Id, Unique_id, Name, Email, Token, Encrypted_password, Salt, Created_at, Update_at 84
No Nama Field Jenis Lebar Desimal Keterangan 1 Id Int 4 Indentitas voucher 2 Unique_id Varchar 23 Nama voucher 3 Name Varchar 50 Kode voucher 4 Email Int 30 Nilai 5 Token Int 10 Token 6 Encrypted_password Varchar 80 Encrypted_password 7 Salt Varchar 10 Salt 8 Created_at Datetime Created 9 Update_at Datetime Update 1. Nama File : Penyedia Jalan Toll 2. media penyimpanan : Server 3. Primary Key : Id 4. Panjang Record : Int 284 Bit 5. Struktur : Id, Name, Email, Password, Remember_token, Created_at, Update_at No Nama Field Jenis Lebar Desimal Keterangan 1 Id Int 4 Indentitas 2 Name Varchar 50 Nama 85
3 Email Varchar 30 Email 4 Password Varchar 100 Password 5 Remember_token Varchar 100 Token 6 Created_at Timestamp Created 7 Updated_at Timestamp Update 4.3.1.1 Struktur menu utama Member Member Aplikasi Molapp Menu Utama History Top Up Saldo GPS About Qr Code Melihat History Mengisi Voucher Saldo Melihat Saldo Melihat GPS Informasi Jasa Marga Rest Area Derek Gambar 4.20 Struktur menu Member 86
4.3.1.2 Struktur menu utama Admin Admin Web Service Home User Voucher Transaksi Member Gambar 4.21 Struktur menu Admin 4.3.2 Rancangan Layar/User Interface 87
4.3.2.1 Rancangan Layar Login Gambar 4.22 Rancangan Layar Interface Login 88
4.3.2.2 Rancangan Layar Sign Up Gambar 4.23 Rancangan Layar Interface Sign Up 89
4.3.2.3 Rancangan Layar Menu Utama Gambar 4.24 Rancangan Layar Interface Menu Utama 90
4.3.2.4 Rancangan Layar History Gambar 4.25 Rancangan Layar Interface History 91
4.3.2.5 Rancangan Layar Top Up Gambar 4.26 Rancangan Layar Interface Top Up 92
4.3.2.7 Rancangan Layar GPS Gambar 4.28 Rancangan Layar Interface GPS 93
4.3.2.8 Rancangan Layar About Gambar 4.29 Rancangan Layar Interface About 94
4.3.2.9 Rancangan Layar Show Qr Code Gambar 4.30 Rancangan Layar Interface Show Qr Code 95
4.3.2.10 Rancangan Layar Qr Code Gambar 4.31 Rancangan Layar Interface Qr Code 96
4.3.2.11 Rancangan Layar Rest Area Gambar 4.32 Rancangan Layar Interface Rest Area 97
4.3.2.12 Rancangan Layar Derek Gambar 4.33 Rancangan Layar Interface Derek 98
4.3.3 Perancangan Masukan (Input) : Berisi tentang masukan yang dibutuhkan oleh sistem yang dirancang. Tiap masukan dirinci 1. Nama masukan : Data diri Sumber Fungsi Media : Member : Media untuk menampilkan data Qr Code : Aplikasi Format : - 2. Nama masukan : Pembayaran jalan toll Sumber Fungsi Media : Member : Media untuk transaksi toll : Aplikasi Format : - 3. Nama masukan : Mengisi Saldo Sumber Fungsi Media : Member : Media untuk pembayaran transaksi tol : Aplikasi Format : - 4. Nama masukan : Laporan Sumber : Admin 99
Fungsi Media : Media untuk melihat laporan : Web Format : - 4.3.4 Perancangan keluaran (Output) Berisi potret tentang keluaran yang dihasilkan oleh sistem yang dirancang. Tiap keluaran dirinci : 1. Nama keluaran : Laporan transaksi Fungsi Media Distribusi : Bukti Transaksi : Aplikasi : User Format : - 2. Nama keluaran : Laporan Fungsi Media Distribusi : Bukti Laporan : Web Service : Admin Format : - 100