B-1

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

B.2.1. Activity Diagram Login

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-6

B.2.5. Activity Diagram Daftar

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-23

B.8.3. Perancangan Interface Login Sukses

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