SISTEM INFORMASI MOLAPP

BAB III PERANCANGAN SISTEM 4.1 Perancangan Sistem Usulan

4.1.1 Diagram Konteks

PENGGUNA

- Saldo - Tarif -

- Data User - Kode Voucher

SISTEM INFORMASI MOLAPP

- Tarif - Derek - Rest Area

- Data User - History User

Gambar 4.1 Diagram konteks usulan

53

http://digilib.mercubuana.ac.id/

PENYEDIA JALAN TOLL

4.1.2 Use CaseDiagram USE CASE MOLAPP

Register

PENGGUNA

Login

Lihat Menu (include)

Tambah Saldo

Panggil Derek

Scan Qr Code

Lihat History

Kelola Data

Mengelola Laporan

Gambar 4.2 Usecase diagram usulan

54


PENYEDIA JALAN TOLL

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 id:

1

Priority:

High

Use Case Type System Analysis:

 Primary business

Pengguna

actor: Description:

Use case ini menggambarkan prosedur yang harus dilakukan oleh pengguna sebelum registrasi sebelum login

Pre-condition: Typical course Of events:

Alternate courses:

Actor Action

System Response

Step 1: Pengguna membuka

Step 2: Menampilkan form

registrasi aplikasi.

registrasi.

Step 3: Pengguna mengisi

Step 4 : Sistem menyimpan

data di form registrasi.

data ke dalam database.

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

Login

Use Case Type

name: Use case id:

2

Priority:

High

System Analysis:

 Primary

Pengguna

business actor: Description:

Use case ini menggambarkan prosedur yang harus dilakukan oleh pengguna sebelum login kedalam aplikasi.

Pre-

pengguna harus mengisi form login yang ditampilkan oleh

condition:

aplikasi

Typical

Actor Action

System Response

course Of events:


Step 2: System memprosees

aplikasi dan memilih menu login untuk menampilkan form login Step 3: aktor mengisi username

Step 4 : jika inputan benar

dan password

maka aktor masuk kedalam halaman utama admin

56


Alternate

Step 5 : User dapat mengisi ulang data kembali jika data yang

courses:

dimasukan salah.

Conclusion:

Use case ini selesai jika aktor benar dalam mengisi inputan username dan password

Post-

Sistem akan menampilkan halaman utama admin

condition:

4.1.3.3 Deskripsi Use Case lihat Menu Tabel 4.3 Deskripsi Use Case lihat Menu Use case name:

lihat Menu

Use case id:

3

Priority:

High


 Primary

Pengguna


Use case ini menggambarkan prosedur yang dilakukan oleh pengguna untuk melihat menu kedalam aplikasi dan Saldo


Actor Action

System Response

Step 1: User memilih menu

Step 2: system akan

di aplikasi

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 id:

4

Priority:

High



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 Of events:

Alternate courses:

Actor Action

System Response

Step 1: User mengisi

Step 2: saldo akan bertambah

saldo ke aplikasi

di dalam aplikasi

Step 3: -

Step 4: -

Pengguna dapat mengisi saldo jika saldo sudah berkurang

58


Conclusion:

Use case ini selesai jika saldo bertambah

Post-condition:

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 id:

5

Priority:

High



Pengguna

actor: Description:

Use case ini menggambarkan prosedur yang harus dilakukan oleh pengguna untuk melihat Rest Area

Pre-condition:

User melihat Rest Area terdekat


Actor Action

System Response

Step 1: User melihat Rest

Step 2: Aplikasi akan

Area terdekat ke aplikasi

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

Panggil Derek

Use Case Type

name: Use case id:

6

Priority:

High

System Analysis:

 Primary

Pengguna


Use case ini menggambarkan prosedur yang dilakukan oleh user untuk memanggil mobil derek

Pre-

-

condition: Typical

Actor Action

System Response

course Of events:

Step 1: User memilih menu mobil

Step 2: Aplikasi akan

derek

menampilakan nomer telfon mobil derek

Step 3: -

Sttep 4: -

60


Alternate

-

courses: Conclusion:

Use case ini selesai jika user memanggil mobil derek

Post-

-

condition:

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 id:

7

Priority:

High



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


Actor Action

System Response

Step 1:Pengguna membuka

Step 2: Aplikasi menampilkan

aplikasi Scan Qr code

Scan Qr Code

61


Step 3: Pengguna

Step 4 : Scanner memproses

memberikan scan barcode

scan barcode ke dalam system

ke dalam scanner Alternate courses:

Step 5 : Pengguna dapat mengisi ulang data kembali jika data yang dimasukan salah.

Conclusion:

Use case ini selesai jika transaksi berhasil

Post-condition:

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 id:

8

Priority:

High



Pengguna

actor: Description:

Use case ini menggambarkan prosedur yang harus dilakukan oleh user melihat history


Melakukan transaksi yang di aplikasi Actor Action

System Response


Step 2: Aplikasi menampilkan

menu history

menu history

62


Step 3: -

Step 4 : -

Alternate courses:

-

Conclusion:

Use case ini selesai jika pengguna melihat history

Post-condition:

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 id:

9

Priority:

High



Penyedia Jalan tol

actor: Description:

Use case ini menggambarkan prosedur yang harus dilakukan oleh penyedia jalan tol sebelum melakukan kelola data.


Actor Action

System Response

Step 1:Penyedia jalan

Step 2: Menampilkan from

tol membuka menu

data pengguna

data pengguna

63


Step 3 : Penyedia

Step 4 : Sistem menyimpan

jalan tol kelola data

sesuai perintah dari penyedia

pengguna

jalan toll

Alternate courses:

-

Conclusion:

Use case ini selesai jika penyedia jalan tol selesai kelola data pengguna.

Post-condition:

-

4.1.3.10 Deskripsi Use Case Mengelola Laporan Tabel 4.10 Deskripsi Use Case Mengelola Laporan Use case name:

Mengelola Laporan

Use case id:

10

Priority:

High



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

Step 2: Menampilkan form laporan.

jalan tol membuka menu laporan. Step 3 :

Step 4 : Sistem akan memproses

Mengelola data

sesuai kemauan penyedia jalan tol

laporan. Alternate courses:

-

Conclusion:

Use case ini selesai jika penyedia jalan tol selesai jika data sudah dikelola.

Post-condition:

-

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

Gambar 4.3 Activity Diagram Registrasi

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

Gambar 4.4 Activity Diagram Login

67


4.1.4.2 Akctivity Diagram Lihat Menu Activity Diagram Pengguna

Sistem

Membuka Aplikasi Mobile Paid

Tampilkan menu Aplikasi Mobile Paid

Gambar 4.5 Activity Diagram Lihat Menu

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

Gambar 4.6 Activity Diagram Tambah Saldo

69


4.1.4.4 Akctivity Diagram Lihat Rest Area Activity Diagram Pengguna

Sistem

Membuka Menu Rest Area

Menampilkan Menu Rest Area

Gambar 4.7 Activity Diagram Lihat Rest Area

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

Gambar 4.9 Activity Diagram Scan Qr Code

72


4.1.4.7 Akctivity Diagram Lihat History Activity Diagram Pengguna

Sistem

Membuka Menu History

Menampilkan Menu History

Gambar 4.10 Activity Diagram Lihat History

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


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


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 Voucher

topup 1..*

id_voucher id_user 1..* token saldo created_at update_at

Penyedia Jasa id_pegawai nama email password remember_token update_at creatde_at

1

id_voucher unique_id name email token encrypted_password salt created_at update_at

Pengguna 1

Transaksi id_transaksi nama exit_tol created_at update_at

1

1

detail_transaksi 1..*

id_transaksi id_user exit_tol plat_no created_at update_at

1..*

Gambar 4.18 Class Diagram

81


id_user unique_id name plat_no email saldo encrypted_password salt created_at update_at

4.2.2 Pemodelan Data Voucher

Top Up Pk

Penyedia Jalan Toll Pk

Id_pegawai Nama Email Password Remember_token Update_at Created_at

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 Pk

Id_transaksi nama Exit_tol Created_at Update_at

Detail_transaksi Pk

Id_transaksi Id_user Exit_tol Plat_no Created_at Update_at

Gambar 4.19 Pemodelan Data

82


Id_user Unique_id Name Plat_no Email saldo Encrypted_password salt Created_at Update_at

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

Int

4

Identitas User

1

Id

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


: 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

Int

4

Indentitas Transaksi

1

Id_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


: 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

Int

4

Indentitas voucher

1

Id

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


: 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

1

Id

2

Name

Jenis

Lebar

Desimal

Int

4

Indentitas

Varchar

50

Nama

85


Keterangan

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

Qr Code

History

Top Up

Melihat History

Saldo

Mengisi Voucher Saldo

Melihat Saldo

Rest Area

Derek

Gambar 4.20 Struktur menu Member

86


GPS

Melihat GPS

About

Informasi Jasa Marga

4.3.1.2 Struktur menu utama Admin Admin

Web Service

Home

User

Voucher

Transaksi

Gambar 4.21 Struktur menu Admin

4.3.2 Rancangan Layar/User Interface 87


Member

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

: Member

Fungsi

: Media untuk menampilkan data Qr Code

Media

: Aplikasi

Format

:-

2. Nama masukan

: Pembayaran jalan toll

Sumber

: Member

Fungsi

: Media untuk transaksi toll

Media

: Aplikasi

Format

:-

3. Nama masukan

: Mengisi Saldo

Sumber

: Member

Fungsi

: Media untuk pembayaran transaksi tol

Media

: Aplikasi

Format

:-

4. Nama masukan Sumber

: Laporan : Admin

99


Fungsi

: Media untuk melihat laporan

Media

: 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

: Bukti Transaksi

Media

: Aplikasi

Distribusi

: User

Format

:-

2. Nama keluaran

: Laporan

Fungsi

: Bukti Laporan

Media

: Web Service

Distribusi

: Admin

Format

:-

100


SISTEM INFORMASI MOLAPP

Recommend Documents