Anda di halaman 1dari 26

LAMPIRAN B

SPESIFIKASI USE CASE DAN INTERFACE

Berikut ini dijelaskan secara detail tentang rancangan analisa modAuth

menggunakan UML.

B.1. Use Case Diagram


Use case diagram terdiri dari aktor yang merupakan pelaku pada modAuth.

Aktor pada modAuth ini diberi nama Pengguna, yaitu pengguna dari modAuth.

Untuk lebih jelasnya dapat dilihat pada gambar B.1.

Gambar B.1 Use Case Diagram modAuth

B.2. Activity Diagram


Activity diagram terdapat pada setiap proses yang ada pada use case

diagram. Berikut ini activity diagram yang ada pada modAuth.

B.2.1. Activity Diagram Login

B-1
B-2

Pada activity diagram proses login dapat diketahui bahwa proses tersebut

merupakan satu rangkaian untuk proses otentikasi. Untuk melakukan otentikasi,

pengguna harus memasukkan username dan password.

Jika username dan password valid, maka akan di set Request mCode.

Request mCode merupakan kode mCode yang akan diminta oleh modAuth pada

saat Konfirmasi mCode.

Selanjutnya pengguna akan diminta memasukkan mCode berdasarkan

request mCode dari modAuth. Jika mCode yang dimasukkan pengguna cocok

dengan mCode yang ada di database, maka login sukses, jika tidak cocok, maka

akan diulang ke tahap awal (gambar B.2).


B-3

Gambar B.2 Activity Diagram Proses Login


B-4

B.2.2. Activity Diagram Ubah Data Pribadi


Activity diagram untuk proses Ubah Data Pribadi memberikan gambaran

terhadap proses pengubahan data-data pengguna. Proses tersebut dapat dilihat

pada gambar B.3.

Gambar B.3 Activity Diagram Proses Ubah Data Pribadi

B.2.3. Activity Diagram Ubah mCode


Activity diagram untuk proses Ubah mCode memberikan gambaran

terhadap proses pengubahan mCode. Proses ini berguna apabila mCode yang

dimiliki pengguna telah diketahui oleh orang lain. Proses ini hampir serupa

dengan proses pengubahan password. Activity diagram Ubah mCode dapat dilihat

pada gambar B.4.


B-5

Gambar B.4 Activity Diagram Proses Ubah mCode

B.2.4. Activity Diagram Logout


Proses logout merupakan proses untuk mengakhiri sesi otentikasi. Activity

diagram logout dapat dilihat pada gambar B.5.

Gambar B.5 Activity Diagram Proses Logout

B.2.5. Activity Diagram Daftar


B-6

Proses Daftar merupakan proses untuk membuat atau mendaftarkan akun

pengguna baru. Activity diagram Daftar dapat dilihat pada gambar B.6.

Gambar B.6 Activity Diagram Proses Daftar

B.2.6. Activity Diagram Reset Password


Proses Reset Password adalah proses untuk mengubah password pengguna

dengan password baru yang di-generate oleh server dan dikirimkan ke email

pengguna. Activity diagram Reset Password dapat dilihat pada gambar B.7.
B-7

Gambar B.7 Activity Diagram Proses Reset Password

B.2.7. Activity Diagram Reset mCode


Proses ini hampir sama dengan proses Reset Password. Server akan

membuat mCode baru secara acak dan dikirimkan ke email pengguna. Activity

diagram Reset mCode dapat dilihat pada gambar B.8.


B-8

Gambar B.8 Activity Diagram Proses Reset mCode

B.3. Sequence Diagram


Sequence diagram menunjukkan alur proses berdasarkan waktu. Berikut

sequence diagram pada modAuth.

B.3.1. Sequence Diagram Login


Sequence diagram Login menunjukkan urutan aksi yang dilakukan pada

saat use case Login dilaksanakan. Sequence diagram Login terdiri dari diagram

normal flow (gambar B.9) dan exception flow (gambar B.10 dan gambar B.11).
B-9

Gambar B.9 Sequence Diagram Login Normal Flow

Gambar B.10 Sequence Diagram Login Exception Flow


B-10

Gambar B.11 Sequence Diagram Login Exception Flow(2)

B.3.2. Sequence Diagram Ubah Data Pribadi


Sequence diagram Ubah Data Pribadi menunjukkan urutan aksi yang

dilakukan pada saat use case Ubah Data Pribadi dilaksanakan. Sequence diagram

Ubah Data Pribadi terdiri dari diagram normal flow (gambar B.12) dan exception

flow (gambar B.13).


B-11

Gambar B.12 Sequence Diagram Ubah Data Pribadi Normal Flow

Gambar B.13 Sequence Diagram Ubah Data Pribadi Exception Flow


B-12

B.3.3. Sequence Diagram Ubah mCode


Sequence diagram Ubah mCode menunjukkan urutan aksi yang dilakukan

pada saat use case Ubah mCode dilaksanakan. Sequence diagram Ubah mCode

terdiri dari diagram normal flow (gambar B.14).

Gambar B.14 Sequence Diagram Ubah mCode Normal Flow

B.3.4. Sequence Diagram Logout


Sequence diagram Logout menunjukkan urutan aksi yang dilakukan pada

saat use case Logout dilaksanakan. Sequence diagram Logout terdiri dari diagram

normal flow (gambar B.15).


B-13

Gambar B.15 Sequence Diagram Logout Normal Flow

B.3.5. Sequence Diagram Daftar


Sequence diagram Daftar menunjukkan urutan aksi yang dilakukan pada

saat use case Daftar dilaksanakan. Sequence diagram Daftar terdiri dari diagram

normal flow (gambar B.16) dan exception flow (gambar B.17).

Gambar B.16 Sequence Diagram Daftar Normal Flow


B-14

Gambar B.17 Sequence Diagram Daftar Exception Flow

B.3.6. Sequence Diagram Reset Password


Sequence diagram Reset Password menunjukkan urutan aksi yang

dilakukan pada saat use case Reset Password dilaksanakan. Sequence diagram

Reset Password terdiri dari diagram normal flow (gambar B.18) dan exception

flow (gambar B.19).


B-15

Gambar B.18 Sequence Diagram Reset Password Normal Flow

Gambar B.19 Sequence Diagram Reset Password Exception Flow


B-16

B.3.7. Sequence Diagram Reset mCode


Sequence diagram Reset mCode menunjukkan urutan aksi yang dilakukan

pada saat use case Reset mCode dilaksanakan. Sequence diagram Reset mCode

terdiri dari diagram normal flow (gambar B.20) dan exception flow (gambar B.21).

Gambar B.20 Sequence Diagram Reset mCode Normal Flow

Gambar B.21 Sequence Diagram Reset mCode Exception Flow


B-17

B.4. Class Diagram


Class diagram modAuth secara umum dapat dilihat pada gambar B.22.

Adapun rincian dari masing-masing class dapat dilihat pada gambar B.23.

Penjelasan terhadap class diagram modAuth dapat dilihat pada tabel B.1.

Gambar B.22 Class Diagram modAuth


B-18

Gambar B.23 Rincian Class Diagram modAuth


B-19

Tabel B.1 Keterangan Class Diagram modAuth

No Nama Class Keterangan


1 modAuth Class utama yang merupakan class yang

mengatur semua proses yang berhubungan

dengan class MySQL Database


2 formDaftar Form untuk menambah data pengguna baru
3 formLogin Form untuk melakukan otentikasi
4 formKehilanganAkun Form untuk mendapatkan kembali data

pengguna yang hilang.


5 formUbahmCode Form untuk membuat mCode yang baru
6 formUbahData Form untuk mengubah data pengguna
7 myl_user Merupakan class dari Database.
8 Sistem Merupakan class yang mengatur form yang akan

ditampilkan

B.5. Component Diagram


Berikut merupakan diagram yang menggambarkan struktur komponen dari

modAuth.
B-20

Gambar B.24 Component Diagram modAuth

B.6. Statechart Diagram


Statechart diagram untuk modAuth secara umum dapat dilihat pada

gambar B.25.
B-21

Gambar B.25 Statechart Diagram modAuth

B.7. Deployment Diagram


Deployment diagram menggambarkan struktur package dari modAuth.

Pada diagram ini dapat dilihat posisi modAuth pada sebuah situs web (gambar

B.26).

Gambar B.26 Deployment Diagram modAuth


B-22

B.8. Perancangan Interface


B.8.1. Perancangan Interface Login
Rancangan interface Login terdiri dari textbox yang digunakan untuk

mengisi username dan password. Selain itu terdapat hyperlink untuk mengakses

form Daftar dan form Kehilangan Akun.

Gambar B.27 Rancangan Interface Login

B.8.2. Perancangan Interface Konfirmasi mCode


Rancangan interface Konfirmasi mCode hanya terdiri dari lima buah

textbox dan satu button untuk melakukan otentikasi terhadap mCode.

Gambar B.28 Rancangan Interface Konfirmasi mCode

B.8.3. Perancangan Interface Login Sukses


B-23

Rancangan interface Login Sukses menunjukkan bahwa pengguna telah

berhasil melakukan otentikasi. Pada form ini pengguna dapat mengakses form

Ubah Data Pribadi dan Ubah mCode.

Gambar B.29 Rancangan Interface Login Sukses

B.8.4. Perancangan Interface Ubah Data Pribadi


Rancangan interface Ubah Data Pribadi merupakan interface yang

digunakan untuk mengubah data pribadi pengguna. Sehingga interface ini

menyediakan form yang dapat memfasilitasi hal tersebut (gambar B.30).


B-24

Gambar B.30 Rancangan Interface Ubah Data Pribadi

B.8.5. Perancangan Interface Ubah mCode


Rancangan interface Ubah mCode hanya terdiri dari satu button Reset

mCode yang digunakan untuk men-generate mCode baru.

Gambar B.31 Rancangan Interface Ubah mCode


B-25

B.8.6. Perancangan Interface Daftar


Rancangan interface Daftar menyedian form isian yang memfasilitasi

untuk pendaftaran akun baru.

Gambar B.32 Rancangan Interface Daftar

B.8.7. Perancangan Interface Kehilangan Akun


Rancangan interface Kehilangan Akun merupakan interface yang

menangani proses Reset Password dan Reset mCode.


B-26

Gambar B.33 Rancangan Interface Kehilangan Akun

Anda mungkin juga menyukai