BAB 4 PERANCANGAN SISTEM. yang diusulkan. Dimulai dari Non Member mendaftar sampai pengetahuan diperoleh

(1)

BAB 4

PERANCANGAN SISTEM

4.1 Activity Diagram

Activity Diagram digambarkan untuk menjelaskan alur dari proses bisnis

yang diusulkan. Dimulai dari Non Member mendaftar sampai pengetahuan diperoleh

karyawan (Employee).

(2)

4.2 Event Table

Event table dibawah ini diperoleh dari proses bisnis usulan yang telah

digambarkan pada bab 3. Event Table menggambarkan user (Actor) yang

berhubungan dengan sistem, alur datanya dan penyebab terjadinya event tersebut.

Tabel 4.1 Event Table

No Event Trigger Source Use Case Response Destination

1 Non-Member melakukan Sign Up Non-Member dapat menjadi member Non-Member Melakukan Sign Up Notification Admin 2 Member membuat ide Member dapat memberikan ide

Member Membuat ide Ide Admin

3 Member atau Admin menulis comment Member atau Admin dapat memberikan komentar Member atau Admin Menulis comment Comment - 4 Member Memberikan Suggestion Member memberikan kritik dan saran yang diterima admin Member Memberikan Suggestion Suggestion Admin 5 Member Merubah Profile Merubah profile sesuai dengan ketentuan Member Merubah Member Profile Profile Admin

(3)

86 6 Admin merubah Profile Merubah profile sesuai ketentuan yang ada Admin Merubah Admin Profile Profile - 7. Admin membuka member control Memastikan data pelanggan benar dan valid Data Pelanggan Membuka Member Control Notification Member 8. Member atau Admin membuat article Member atau Admin memberikan informasi di article Member atau Admin Membuat article Article Member 9 Admin merespon ide Member mengetahui respon dan Admin memberikan status terhadap ide

Admin Merespon ide Responded

Idea - 10. Admin membuat kategori Ada kategori baru Admin Membuat kategori Kategori - 11. Admin membuat sub kategori Ada sub kategori baru

Admin Membuat sub

kategori Sub Kategori - 12. Admin mencatat Telah keluar produk baru Admin Mencatat produk Product knowledge Member

(4)

13. Admin membuat laporan member Mengetahui jumlah member terdaftar setiap bulan Admin Membuat laporan member Laporan member - 14. Admin membuat laporan ide Mengetahui proses ide-ide dari pelanggan tiap bulan Admin Membuat laporan ide Laporan ide - 15. Employee melihat knowledge Mencari dan Mengetahui pengetahuan dari pelanggan Employee Melihat knowledge View Ideas -

(5)

88

4.3 Use case and Domain Classes 4.3.1 Use Case Diagram

Use case diagram menjelaskan interaksi antara user dengan sistem yang

didapatkan dari hasil event table. Terdapat 15 event dan 4 aktor yang berperan dalam

(6)

Gambar 4.2 Use Case Diagram

4.3.2 Use Case Description

Use case description menjelaskan detail proses dari use case diagram yang

disusun berupa list.

Tabel 4.2 Use Case Description : Melakukan Sign Up

Name Use Case : Melakukan Sign Up

Main Flow :

1. Non-Member membuka menu Sign Up.

2. Non-Member mengisi username.

3. Non-Member mengisi password.

4. Non-Member mengulangi password yang diisi.

5. Non-Member mengisi e-mail.

6. Non-Member mengisi Fullname.

7. Non-Member memilih gender.

8. Non-Member mengisi date of birth.

9. Non-Member mengisi address.

10.Non-Member mengisi phone number.

11.Non-Member meng-upload hasil scan identity card.

(7)

90

Tabel 4.3 Use Case Description: Membuat ide

Name Use Case : Membuat ide

Main Flow :

1. Member membuka menu share idea.

2. Member mengisi title dari ide yang akan di buat.

3. Member memilih category yang sudah disediakan.

4. Member mengisi description dari ide.

5. Member meng-upload image jika ada.

6. Member juga dapat melakukan search ide.

Exception Condition : -

Tabel 4.4 Use Case Description: Menulis Comment

Name Use Case : Menulis Comment

Main Flow :

1. Member atau admin memilih salah satu judul ide.

2. Member atau admin otomatis masuk ke halaman idea comment.

3. Member atau admin memberikan comment terhadap ide.

4. Member atau admin melakukan share comment.

5. Member atau admin dapat melakukan like atau dislike pada ide tersebut.

Exception Condition :

3. Jika member tidak bisa memberikan comment

− Member harus melakukan log in terlebih dahulu. − Member harus memilih judul ide dan article.

(8)

Tabel 4.5 Use Case Description: Memberikan Suggestion

Name Use Case : Memberikan Suggestion

Main Flow :

1. Member membuka menu Suggestion.

2. Member mengisi kritik dan saran pada kotak dialog yang disediakan.

3. Member melakukan submit suggestion tersebut.

Tabel 4.6 Use Case Description : Merubah member profile

Name Use Case : Merubah member profile

Main Flow :

1. Member membuka menu member profile.

2. Member memilih menu edit profile.

3. Member dapat mengganti address.

4. Member dapat mengganti phone.

5. Member dapat mengganti e-mail.

6. Member dapat merubah picture.

7. Member dapat merubah password pada menu change password.

(9)

92

Tabel 4.7 Use Case Description: Merubah admin profile

Name Use Case : Merubah admin profile

Main Flow :

1. Admin membuka menu admin profile.

2. Admin dapat merubah picture.

3. Admin dapat merubah password pada menu change password.

Tabel 4.8 Use Case Description: Membuat article

Name Use Case : Membuat article

Main Flow :

1. Member atau admin membuka menu share article.

2. Member atau admin mengisi title dari article yang akan di buat.

3. Member atau admin memilih category yang sudah disediakan.

4. Member atau admin mengisi description dari article.

5. Member atau admin meng-upload image jika ada.

6. Member atau admin juga dapat melakukan search article.

(10)

Tabel 4.9 Use Case Description: Membuka Member control

Name Use Case : Membuka Member control

Main Flow :

1. Admin membuka menu member control.

2. Admin melihat daftar member yang akan di validasi.

3. Admin memilih data member yang valid dengan meng-klik tombol approve.

4. Member yang valid pindah ke dalam daftar approved member.

5. Admin dapat melakukan pencarian member.

6. Admin dapat menghapus member yang telah terdaftar.

Tabel 4.10 Use Case Description: Merespon ide

Name Use Case : Merespon ide

Main Flow :

1. Admin membuka menu response ideas.

2. Admin memilih judul ide member.

3. Admin memilih status ide.

4. Admin memberikan comment terhadap ide dari member.

(11)

94

Tabel 4.11 Use Case Description: Membuat Kategori

Name Use Case : Membuat Kategori

Main Flow :

1. Admin membuka menu new category.

2. Admin memasukkan nama kategori baru.

Tabel 4.12 Use Case Description: Membuat Sub Kategori

Name Use Case : Membuat Sub Kategori

Main Flow :

1. Admin membuka menu new category.

2. Admin memilih kategori.

3. Admin memasukkan nama sub kategori baru.

(12)

Tabel 4.13 Use Case Description: Mencatat Produk

Name Use Case : Mencatat Produk

Main Flow :

1. Admin membuka menu new product.

2. Admin memasukkan nama produk.

3. Admin memilih kategori.

4. Admin memilih sub kategori.

5. Admin mengisi keterangan produk.

6. Admin upload gambar produk.

Tabel 4.14 Use Case Description: Membuat laporan member

Name Use Case : Membuat laporan member

Main Flow :

1. Admin membuka menu ideas report.

2. Admin memilih tahun.

3. Admin melihat member report.

4. Admin dapat mencetak member report.

(13)

96

Tabel 4.15 Use Case Description: Membuat laporan ide

Name Use Case : Membuat laporan ide

Main Flow :

1. Admin membuka menu ideas report.

2. Admin memilih tahun.

3. Admin melihat ideas traffic.

4. Admin melihat responded ideas data.

5. Admin dapat mencetak ideas traffic dan responded ideas data.

Tabel 4.16 Use Case Description: Melihat Knowledge

Name Use Case : Melihat Ide

Main Flow :

1. Employee membuka View Knowledge.

2. Employee melalukan pencarian pengetahuan sesuai dengan yang diinginkan.

3. Employee melihat pengetahuan sesuai dengan kategori yang tersedia.

(14)

4.3.3 Domain Model Class Diagram

Domain model class diagram menunjukkan hal-hal penting bagi pekerjaan user. Tiap class hanya terdiri dari atribut, class dan atribut didapatkan dari proses

dalam sistem. Antar class dihubungkan dengan multiplicity. Pada domain model

class diagram tidak disertakan method.

(15)

98 4.3.4 State Machine Diagram

State machine diagram menjelaskan state/status pada tiap class. Jadi tiap class memiliki hasil operation yang telah dikerjakan pada sistem.

Gambar 4.4 State Machine Diagram: Member

(16)

Gambar 4.6 State Machine Diagram: Article

Gambar 4.7 State Machine Diagram: Komentar

(17)

100

Gambar 4.9 State Machine Diagram: Admin

Gambar 4.10 State Machine Diagram: Responded Ideas

(18)

Gambar 4.12 State Machine Diagram: Category

Gambar 4.13 State Machine Diagram: Sub Category

(19)

102

4.4 The Design Discipline 4.4.1 Use Case Realization 4.4.1.1 Design Class Diagram

Design class diagram merupakan penyempurnaan dari domain class diagram.

Dalam class diagram ini ditambahkan method pada tiap class menunjukkan

(20)

Gambar 4.15 Design Class Diagram

4.4.1.2 First Cut Design Class Diagram

First cut design class diagram merupakan pengembangan dari domain class diagram. Pada class diagram ini tidak perlu method dan menggunakan navigation visibility.

(21)

104

(22)

4.4.1.3 System Sequence Diagram

Setelah pembuatan Use Case Diagram dan Class Diagram, maka dibuatlah

System Sequence Diagram (SSD). SSD dibuat untuk menggambarkan proses

hubungan Actor dengan System pada setiap Use Case.

Gambar 4.17 System Sequence Diagram: Sign Up

(23)

106

Gambar 4.19 System Sequence Diagram: Share idea

(24)

Gambar 4.21 System Sequence Diagram: Edit admin profile

(25)

108

Gambar 4.23 System Sequence Diagram: Article

(26)

Gambar 4.25 System Sequence Diagram: Member Control

(27)

110

Gambar 4.27 System Sequence Diagram: Category

(28)

Gambar 4.29 System Sequence Diagram: Member report

(29)

112

(30)

4.4.1.4 First Cut Sequence Diagram

First Cut Sequence Diagram digambarkan setelah System Sequence Diagram. First Cut Sequence Diagram digambarkan untuk menjelaskan hubungan actor

dengan handler dari setiap usecase dan object class nya.

• First cut Sequence Diagram: Sign Up

(31)

114

• First cut Sequence Diagram: Edit Member

(32)

• First cut Sequence Diagram: Share Idea

(33)

116

• First cut Sequence Diagram: Comment

(34)

• First cut Sequence Diagram: Edit admin profile

(35)

118

• First cut Sequence Diagram: Suggestion

(36)

• First cut Sequence Diagram: Article

(37)

120

• First cut Sequence Diagram: Response Idea

Admin :add_new_response_idea_ handler :Idea responded :Ide create_new_respon_ide(id_ideRespond) get_ide(id_ide)

description(judul, tgl, deskripsi, image) add_new_respon_ide(id_ideRespond) save() save() add_status(status_respond) add_status(status_respond) add_response(admin_comment) add_response(admin_comment) get_admin(id_admin)) description(username) :Admin

(38)

• First cut Sequence Diagram: Member control

(39)

122

• First cut Sequence Diagram: Produk

(40)

• First cut Sequence Diagram: Category

(41)

124

• First cut Sequence Diagram: Sub Category

(42)

• First cut Sequence Diagram: Member Report

Gambar 4.44 First Cut Sequence Diagram: Member report

(43)

126

Gambar 4.45 First Cut Sequence Diagram: Idea report

• First cut Sequence Diagram: View Knowledge

(44)

4.4.1.5 Data Access Sequence Diagram

Data Access Sequence Diagram digambarkan setelah First Cut Sequence Diagram. Data Access Sequence Diagram digambarkan untuk menjelaskan

hubungan actor dengan handler, object class, dan Data Access dari setiap object.

• Data Access Sequence Diagram:Sign Up

(45)

128

(46)

• Data Access Sequence Diagram:Share Idea

(47)

130

• Data Access Sequence Diagram:Comment

(48)

• Data Access Sequence Diagram:Edit admin profile

(49)

132

• Data Access Sequence Diagram:Suggestion

(50)

• Data Access Sequence Diagram:Article

(51)

134

• Data Access Sequence Diagram:Response idea

(52)

• Data Access Sequence Diagram:Member Control

(53)

136

• Data Access Sequence Diagram: Produk

(54)

• Data Access Sequence Diagram:Category

(55)

138

• Data Access Sequence Diagram:Sub Category

(56)

• Data Access Sequence Diagram:Member report

(57)

140 • Data Access Sequence Diagram:Idea report

(58)

• Data Access Sequence Diagram:View Knowledge

(59)

142 4.4.1.6 View Layer Sequence Diagram

View Layer Sequence Diagram adalah penggambaran Sequence yang paling

lengkap, digambarkan setelah Data Access Sequence Diagram. View Layer Sequence

Diagram digambarkan untuk menjelaskan hubungan actor dengan Boundary, handler, object class, dan Data Access nya dari setiap object.

• View Layer Sequence Diagram : Sign Up

(60)

• View Layer Sequence Diagram : Edit Member Profile

(61)

144

• View Layer Sequence Diagram : Share Idea

(62)

• View Layer Sequence Diagram : Comment

(63)

146

• View Layer Sequence Diagram : Suggestion

(64)

• View Layer Sequence Diagram : Edit Admin Profile

(65)

148

• View Layer Sequence Diagram : Article

(66)

• View Layer Sequence Diagram : Response Ideas

(67)

150

• View Layer Sequence Diagram : Member Control

(68)

• View Layer Sequence Diagram:Produk

(69)

152

• View Layer Sequence Diagram:Category

(70)

• View Layer Sequence Diagram:Sub Category

(71)

154

• View Layer Sequence Diagram : Member Report

(72)

• View Layer Sequence Diagram : Idea Report

(73)

156 • View Layer Sequence Diagram:View Knowledge

(74)

4.4.1.7 Communication Diagram

Communication Diagram digambarkan untuk menjelaskan Method yang

digunakan pada setiap handler dan object class. Communication Diagram dibuat

berdasarkan pada First Cut Sequence Diagram.

• Sign Up

Gambar 4.77 Communication Diagram: Sign Up

• Edit member Profile

(75)

158 • Share Idea

Gambar 4.79 Communication Diagram: Share idea

(76)

• Edit Admin Profile

Gambar 4.81 Communication Diagram: Edit admin profile

• Suggestion

(77)

160 • Article

Gambar 4.83 Communication Diagram: Article

(78)

• Member Control

Gambar 4.85 Communication Diagram: Member control

• Produk

(79)

162 • Category

Gambar 4.87 Communication Diagram: Category

(80)

• Member Report

Gambar 4.89 Communication Diagram: Member Report

• Idea Report

(81)

164 • View Knowledge

(82)

4.4.1.8 Update Class Diagram

Update Class Diagram adalah penggambaran Class Diagram yang paling

lengkap dan kompleks. Update Class Diagram adalah pengembangan dari First Cut

Class Diagram. Method dari setiap handler dan Object Class didapat dari Communication Diagram.

(83)

166

Gambar 4.92 Update Class Diagram

4.4.1.9 Package Diagram

Di bawah ini gambar Package Diagram :

Add_new_category_ handler View_knowledge_ handler Add_new_subcategory_ handler IdeaResponded Employee SubCategory EmployeeDA IdeaRespondedDA CategoryDA Add_new_produk _handler Add_new_category _handler Category Produk New_Product New_Category SubCategoryDA ProdukDA ArticleDA AdminDA SuggestionDA IdeDA MemberDA KomentarDA Add_new_komentar_handler Suggestion MainMenu Sign Up Komentar Ide Admin Login _Article Member Idea_report Member_report Suggestion Member_control Print_laporan_member_ handler Start_edit_member_control_ handler Add_new_suggestion_ handler Response_idea Share_article Share_idea MainWindow Edit_admin_profile Sign Up Comment Member Edit_Member View_Knowledge Admin Add_new_article_

handler Add_new_response__{idea_handler}

Add_new_ide_handler _{Start_edit_admin_} profile_handler Print_laporan_ide_handler Add_new_member_handler Start_edit_member_ Profile_handler Login

Data Access Layer Domain Layer View Layer

(84)

4.4.2 Design Activities and Environment 4.4.2.1 Deployment Environment

• Multi Computer : Aplikasi ini terdiri dari beberapa user yang dapat membuka

semua aplikasi secara bersamaan. Non Member dan Member dapat membuka

dimana saja mengingat aplikasi ini diperuntukkan untuk customer. Kemudian

Admin dan Karyawan dapat mengakses secara online mengingat perusahaan

mempunyai beberapa cabang yang tersebar tidak di semua kota. Semua jenis

hardware computer memiliki spesifikasi yang berbeda pada setiap user.

(85)

168

4.4.2.2 Deployment Architecture

• Centralized architecture : Letak server terdapat pada 1 tempat yaitu di

perusahaan pada cabang Jakarta. Server yang digunakan terpusat mengingat

supaya data yang diperoleh selalu real time dan penyebaran data nya sendiri

lebih optimal.

(86)

4.4.2.3 Software Architecture

• Three Layer : Aplikasi ini menggunakan tiga layer yaitu View Layer,

Business Logic Layer dan Data Layer. Aplikasi dan database terdapat pada

server yang berbeda. Dengan tujuan lebih mudah dalam pengelolaan server

dan data yang dimiliki lebih aman.

(87)

170

4.5 Struktur Tabel

Tabel 4.17 Struktur Tabel Member

Field Type Size Null Key

Id_member Varchar 10 No Primary key

Username_member Varchar 30 No - Password_member Varchar 20 No - Email_member Varchar 50 No - Nama_member Varchar 500 No - Kelamin_member Varchar 10 No - TglLahir_member Varchar 100 No - Alamat_member Varchar 500 No - Telp_member int 15 No - Tgl_daftar Date - No - Identity_member Image - No - Status_approve Varchar 10 No -

Tgl_approve Date - Yes -

Foto_profile Image - Yes -

Tabel 4.18 Struktur Tabel Ide

Id_ide Varchar 10 No Primary Key

Id_member Varchar 10 No Foreign Key

Id_category Varchar 50 No Foreign Key

Id_subCategory Varchar 50 Yes Foreign Key

Tgl_ide Date - No -

Judul_ide Varchar 500 No -

Deskripsi_ide Varchar 1000 No -

Like_ide int 11 Yes -

Dislike_ide Int 11 Yes -

Image_ide Image - Yes -

Tabel 4.19 Struktur Tabel Article

Id_article Varchar 10 No Primary key

Id_member Varchar 10 No Foreign key

Id_admin Varchar 10 No Foreign key

Tgl_article Date - No -

(88)

Dislike_article Int 11 Yes -

Image_article Image - Yes -

Tabel 4.20 Struktur Tabel Komentar

Id_komentar Varchar 10 No Primary key

Id_ide Varchar 10 No Foreign key

Id_article Varchar 10 No Foreign key

Id_admin Varchar 10 No Foreign key

Tgl_komentar Date - No -

Isi_komentar Varchar 1000 No -

status_komentar Varchar 100 No -

Tabel 4.21 Struktur Tabel Suggestion

Id_suggestion Varchar 10 No Primary key

Isi_suggest Varchar 1000 No -

Tgl_suggest Date - No -

Tabel 4.22 Struktur Tabel Admin

Id_Admin Varchar 10 No Primary key

Username_admin Varchar 10 No -

Password_admin Varchar 20 No -

Foto_admin Image - No -

Tabel 4.23 Struktur Tabel Idea Responded

Id_ideRespond Varchar 10 No Primary Key

Id_ide Varchar 10 No Foreign Key

Id_Admin Varchar 10 No Foreign Key

Id_employee Varchar 10 No Foreign Key

Tgl_respond Date - No -

Status_respond Varchar 100 No -

Admin_comment Varchar 1000 No -

(89)

172

Tabel 4.24 Struktur Tabel Produk

Id_produk Varchar 10 No Primary Key

Nama_produk Varchar 100 No -

keterangan_produk Varchar 1000 No -

Gambar_produk Image - No -

Tabel 4.25 Struktur Tabel Category

Id_category Varchar 50 No Primary Key

Nama_category Varchar 100 No -

Tabel 4.26 Struktur Tabel Sub Category

Id_SubCategory Varchar 50 No Primary Key

Nama_SubCategory Varchar 100 No -

Tabel 4.27 Struktur Tabel Employee

Id_Employee Varchar 10 No Primary key

Username_ Employee Varchar 10 No - Password_ Employee Varchar 20 No - Nama_employee Varchar 100 No - Jabatan_employee Varchar 100 No -

(90)

4.6 Navigation Diagram

Gambar Navigation Diagram:

(91)