3. ANALISA DAN DESAIN SISTEM. Pada bab ini akan dijelaskan analisa dari desain sistem pada Aplikasi Web Based UML Diagram Designer.

(1)

22

Universitas Kristen Petra

3. ANALISA DAN DESAIN SISTEM

Pada bab ini akan dijelaskan analisa dari desain sistem pada Aplikasi Web Based UML Diagram Designer.

3.1 Analisa Pembanding

Pembuatan aplikasi ini bertolak dari aplikasi-aplikasi online yang memiliki fungsi untuk mengolah Diagram UML, seperti Gliffy dan Cacoo. Sebelum pembuatan aplikasi, percobaan dilakukan pada masing-masing aplikasi pembanding untuk mengetahui fitur-fitur yang dibutuhkan.

3.1.1 Aplikasi Gliffy

Saat pengguna mulai mengunjungi situs ini, pengguna diarahkan untuk Log In atau membuat akun terlebih dahulu agak dapat masuk ke halaman editor.

Jika Log In/ Sign Up berhasil, pengguna dibawa ke halaman editor untuk mulai menyusun diagram. Antarmuka halaman editor pada Gliffy dapat dilihat pada Gambar 3.1.

Gambar 3.1 Antarmuka Halaman Editor pada Gliffy

(2)

23

Aplikasi ini berbasis flash. Hal ini dapat dibuktikan ketika melakukan klik kanan pada halaman editor, muncul option About Adobe Flash Player.

Gambar 3.2 Bukti Bahwa Gliffy Merupakan Aplikasi Berbasis Flash

Karena berbasis flash, maka aplikasi tidak dapat dibuka tanpa instalasi flash plugin pada browser.

Gambar 3.3 Halaman Editor Gliffy pada Browser tanpa Flash Plugin

Pada aplikasi ini, terdapat menu untuk membagikan digram-diagram dalam suatu project ke pengguna lain. Selain itu, aplikasi ini memiliki fasilitas untuk mengajak melalui e-mail pihak yang belum memiliki akun agar dapat bergabung.

Fitur-fitur pada aplikasi Gliffy yang dapat mempermudah penyusunan Diagram UML yaitu:

 Fitur New, Load, & Save Project.

 Fitur Share Diagram dan Invitation untuk bergabung.

 Fitur Rename, Delete, dan Export Diagram as Image.

(3)

24

 Fasilitas Editing Diagram:

o Add: Add Diagram, Add Component, Add Relation o Menuliskan nama komponen dan relasi diagram o Menghapus komponen atau relasi

o Resize & Replace komponen diagram

Namun komponen dan relasi diagram UML yang tersedia pada aplikasi ini sangat terbatas/ tidak lengkap. Ada komponen-komponen yang tidak disediakan oleh aplikasi ini. Komponen-komponen tersedia yaitu: package, class, instance, note, object, interface, node, component, actor, use case. Sedangakan relasi yang tersedia yaitu: generalization, implement, association, aggregation, dependency, object timeline, messagebox, message, self message. Hal ini tidak cukup untuk menggambarkan diagram yang rumit.

Selain itu, peletakan komponen yang tidak digolongkan dapat menyulitkan pengembang yang masih pemula karena ada kemungkinan komponen untuk jenis diagram yang berbeda dapat diletakkan pada satu lembar penyusunan diagram.

Maka Diagram UML yang dihasilkan tidak dikenali jenisnya.

Ketika suatu diagram dalam project dibagikan ke pengguna lain, masing- masing pengguna yang terlibat dapat melihat diagram tersebut. Namun, pengguna yang terlibat hanya dapat melihat saja. Koreksi sepenuhnya dilakukan oleh pembuat diagram. Hal yang kurang pada sistem ini yaitu komunikasi antara pihak- pihak yang terlibat. Informasi update untuk masing-masing diagram juga belum ditunjukkan pada aplikasi ini.

3.1.2 Aplikasi Cacoo

Saat pengguna masuk pada situs ini, pengguna juga diarahkan untuk melakukan Log In atau membuat akun baru. Proses Log In/ Sign Up dapat dengan mudah dilakukan untuk menuju ke halaman project. Setelah sampai pada halaman ini, pengguna diajak untuk mulai mengolah project. Apabila pengguna sudah memiliki project yang tersimpan di server, maka akan ditampilkan list project pengguna. Setelah proses ini selesai, pengguna dibawa ke halaman diagrams.

Halaman diagrams pada aplikasi ini bertujuan untuk melihat review tentang project dan sebagai jalan untuk mulai melakukan edit diagram.

(4)

25

Gambar 3.4 Antarmuka Halaman Project pada Cacoo

Pengguna dapat memulai mengolah diagram dengan mengklik tombol Edit.

Setelah itu seluruh isi diagram akan di-load. Setelah proses load selesai, pengguna dapat mulai meng-edit diagram pada halaman editor.

Gambar 3.5 Antarmuka Halaman Editor pada Cacoo

(5)

26

Aplikasi ini juga berbasis flash, sehingga tidak bisa dibuka pada browser tanpa instalasi flash plugin.

Gambar 3.6 Bukti Bahwa Cacoo Merupakan Aplikasi Berbasis Flash

Gambar 3.7 Halaman Editor Cacoo pada Browser tanpa Flash Plugin

Fitur-fitur aplikasi yang membantu pengguna dalam menyusun Diagram UML yaitu:

 Fitur New, Load, & Save Project.

 Fitur Informasi:

o User & Project Information.

o Shared: fitur yang menampilkan list pihak-pihak yang dapat mengakses project.

o History: fitur yang mencatat perlakuan terhadap diagram dalam project.

 Fitur komunikasi project dengan memberikan komentar pada project.

 Fitur yang interaktif terhadap keyboard (shortcut yang mirip MS Visio).

 Fitur untuk membagikan diagram dalam project ke sesama pengguna.

(6)

27

 Fitur export diagram as image.

 Fitur komunikasi melalui chat.

 Fasilitas Editing Diagram:

o Add: Add Diagram, Add Component, Add Relation.

o Pengolahan komponen/ relasi: copy, paste, delete, undo, redo.

o Menuliskan nama komponen dan relasi diagram.

o Menghapus komponen atau relasi.

o Resize & Replace komponen diagram.

Komponen dan relasi yang tersedia pada aplikasi ini juga terbbatas/ tidak lengkap. Komponen diagram yang tersedia yaitu: use case, actor, class, sequence lifeline, messagebox, note, state, activity, package, startstate, endstate, node, component. Sedangkan relasi yang tersedia yaitu: association, object message, self message, connect to note. Dengan keterbatasan tersebut, sulit digambarkan suatu diagram UML yang rumit dan sesuai standar.

Pada aplikasi ini, komponen dan relasi bersifat kurang fleksibel. Hal itu nampak ketika suatu komponen yang berelasi dengan komponen lainnya dipindahkan, maka relasi yang terhubung tidak bergerak. Sehingga komponen terputus dari relasi. Hal ini membuat penggunaan aplikasi menjadi tidak praktis bagi penggunanya.

Gambar 3.8 Relasi Terputus Saat Pemindahan Komponen

Kesamaan dengan Gliffy, aplikasi ini juga tidak menyediakan fasilitas penggolongan komponen sehingga sulit digunakan oleh pengguna yang masih pemula. Di samping itu, diagram yang dibuat tidak dikenali jenisnya sehingga

(7)

28

berbagai macam komponen dari jenis diagram yang berbeda dapat dihubungkan dalam satu halaman.

Keunggulan aplikasi ini dibandingkan dengan Gliffy yaitu adanya fasilitas komunikasi antara para pihak yang terlibat. Fasilitas tersebut ditunjang melalui fitur commentbox pada halaman diagrams dan fasilitas chat pada halaman editor.

Namun halaman komunikasi masih terpisah dari view diagram.

Kekurangannya dibanding Gliffy yaitu aplikasi ini hanya dapat dibagikan kepada sesama pengguna. Jika pihak tertentu belum terdaftar sebagai pengguna, maka tidak ada fasilitas yang mengajak pihak tersebut untuk bergabung sebagai pengguna. Hal ini dapat diatasi dengan fitur invitation via e-mail yang tersedia pada aplikasi Gliffy.

3.2 Analisa Kebutuhan

Berdasarkan analisa pembanding, maka Aplikasi Web Based UML Diagram Designer perlu dibuat dengan performa yang lebih baik. Kebutuhan yang perlu diterapkan pada aplikasi ini yaitu:

 Aplikasi dibuat dengan teknologi baru yang lebih ringan dan terbuka.

 Adanya fasilitas pengolahan project (New, Load, Save).

 Adanya fasilitas Share Project dan ajakan untuk bergabung bagi pihak yang belum menjadi pengguna aplikasi.

 Aplikasi menyediakan komponen dan relasi yang lebih lengkap sesuai dengan tools untuk 9 jenis diagram UML agak dapat membuat diagram sesuai standar.

 Ada penggolongan tools (komponen dan relasi) sesuai jenis diagram UML sehingga komponen dan relasi dapat diaplikasikan sesuai standar fungsinya.

 Komponen dan relasi diagram terkoneksi secara fleksibel (tidak putus ketika dipindah) untuk kenyamanan pengguna.

 Adanya fasilitas informasi untuk memberikan penjelasan terhadap pengguna yang sedang mengaktifkan suatu project (User & Project Information, list pihak-pihak yang dapat mengakses suatu project).

 Adanya fasilitas komunikasi antara pihak-pihak yang terlibat dalam suatu project. Fasilitas ini sebaiknya menyertakan view diagram agar mudah ditinjau dan dikomentari.

(8)

29

 Adanya hak akses editing yang diberikan untuk pihak tertentu agar dapat membantu proses koreksi model Diagram UML.

 Adanya fasilitas report atas perlakuan terhadap suatu diagram dalam project agar mudah ditinjau oleh pihak-pihak yang memiliki hak akses.

3.3 Desain Flowchart Aplikasi Web Based UML Diagram Designer

Pada flowchart ini akan dibahas kerangka berpikir mengenai langkah- langkah aplikasi secara umum. Penggunaan aplikasi dimulai dari pembuatan akun atau Log In bagi yang sudah memiliki akun sebagai pengguna. Selanjutnya pengguna diarahkan pada suatu halaman untuk membuat dan mengolah diagram- diagram UML. Diagram yang telah dibuat kemudian disimpan terlebih dahulu untuk dapat dibagikan kepada pengguna-pengguna lainnya. Diagram yang telah disimpan dapat dibuka dan diolah kembali sesuai kebutuhan pengguna. Setiap pengolahan diagram yang sudah dibagikan akan masuk sebagai notifikasi bagi pengguna-pengguna yang memiliki akses terhadap diagram tersebut. Secara lebih detail, prosesnya dapat dilihat pada Gambar 3.9.

start

punya

akun? Log In

Sign Up Y N

Maintain Project?

Maintain

Project Y

Maintain Diagram?

Maintain Diagram Y

Look Shared Project?

N

Look invitation and

report?

N

Look Invitation and

Report Look Shared Y

Project Y

end N

Gambar 3.9 Flowchart Proses Utama

(9)

30

Proses utama dipecah menjadi beberapa proses yaitu Sign Up, Log In, Load project yang ada, Maintain Diagram, Save project, dan Share Project untuk memudahkan pembacaan flowchart. Selanjutkan akan dijelaskan bagaimana alur berjalannya aplikasi sesuai dengan subproses yang dikembangkan dari proses utama.

Sign Up

Var us: username Var pwd: password

Var em: e-mail

Koneksi ke database

Select data dari tabel user dimana value username=us dan password=pwd

Jika tidak ada kolom hasil query N

Peringatan:

“username atau password sudah

terpakai”

Select data dari field email pada tabel user dimana value email=em

Jika tidak ada kolom hasil query

Y

Peringatan: “email yang dimasukkan

sudah memiliki akun”

N Y

Jika panjang string us>=5, panjang string pwd>=5, dan alamat

email valid

return Peringatan: “data yang

dimasukkan belum sesuai persyaratan”

Y

N

Var useraktif:

username

Tampilkan halaman editor.php Masukkan data ke

tabel user dengan nilai field username=us, password=pwd,

email=em

Gambar 3.10 Flowchart Proses Sign Up

(10)

31

Pada Gambar 3.10 ditunjukkan bahwa variabel username dan password yang dimasukkan oleh pengguna harus bersifat unik. Alamat e-mail yangdimasukkan juga harus sesuai standar yang berlaku. Setelah pengecekan dilakukan, jika Sign Up berhasil, pengguna akan dibawa ke editor aplikasi.

Berikutnya, akan dijelaskan alur proses Log In pada Gambar 3.11.

Log In

Var us: username Var pwd: passwword

Keneksi ke database

Select dari tabel user dimana value username=us dan

password=pwd

Jika ada kolom hasil

query

Tampilkan halaman editor.php

return Peringatan:

“username atau password salah”

N

Lupa akun / password?

Var useraktif: username Var actem: e-mail

Y

em = alamat e-mail pengguna

Kirimkan akun pengguna ke e-mail

pengguna Y

N

Gambar 3.11 Flowchart Proses Log In

Pada Gambar 3.11 ditunjukkan bahwa variabel yang dimasukkan oleh pengguna disimpan pada variabel useraktif yang akan digunakan pada halaman editor.php untuk mengetahui identitas pengguna yang sedang membuka aplikasi.

Selain username, e-mail pengguna juga disimpan dalam variabel actem agar dapat ddiakses ketika membutuhkan operasi-operasi yang berhubungan dengan e-mail seperti pengiriman diagram dan pemberian komentar pada diagram tertentu.

Log in tidak bisa dilakukan apabila pengguna tidak memasukkan username atau password dengan benar. Oleh karena itu disediakan pula fasilitas untuk memberikan username dan password pengguna yang sudah lupa dengan akun miliknya. Hal tersebut dilakukan melalui verifikasi akun pada alamat e-mail.

(11)

32

Setelah sampai pada halaman editor.php, pengguna akan mulai diajak untuk me-maintain suatu project. Untuk pengguna baru akan diarahkan untuk membuat project baru. Untuk lebih jelasnya dapat dilihat pada Gambar 3.12.

Maintain Project

Buat project baru?

New Project Y

Load project?

N

Ajak pengguna lain bergabung?

Share Project Y

Hapus project?

N

Remove

Project Y

Lihat hak akses pengguna lain pada tiap

project?

Load Project

Share Info Y

Y

Simpan project?

Save Project Y

N N

return N

Gambar 3.12 Flowchart Proses Maintain Project

Berdasarkan Gambar 3.12, proses Maintain Diagram terdiri dari beberapa proses di dalamnya. Proses-proses tersebut antara lain: New Project, Load Project, Save Project, Share Project, Remove Project, dan Share Info. Seluruh

(12)

33

proses tersebut bertujuan untuk melakukan pengolahan terhadap project-project yang telah atau akan dibuat oleh pengguna.

Bagi pengguna yang belum pernah membuat project, aplikasi akan merekomendasikan pengguna untuk memulai project baru. Project yang baru tidak boleh memiliki nama yang sama dengan project yang sudah ada untuk pengguna yang sama. Proses untuk memulai project baru dapat dilihat pada Gambar 3.13.

New Project

actpro: nama project baru

Cek dalam database apakah ada project dengan

nama yang sama

Peringatan ‘anda sudah memiliki project dengan nama yang sama’

Y

Create id untuk project baru

Masukkan project baru ke dalam table projects pada

database.

Tampilkan editor diagram

return

Gambar 3.13 Flowchart Proses New Project

Pembuatan project baru juga bisa dilakukan oleh pengguna yang sudah memiliki project dalam aplikasi. Project yang sudah pernah dibuat dan disimpan dapat dibuka kembali untuk dilanjutkan. Proses membuka kembali project yang sudah disimpan dapat dilihat pada Gambar 3.14.

(13)

34

Universitas Kristen Petra Load project

yang ada

Koneksi ke database

Select field nama dari tabel projects dimana nilai

username=useraktif

Masukkan nama- nama project ke dalam pilihan

combobox

Var pro: nama project yang dipilih Koneksi ke server

Load semua file diagram yang termasuk dalam project terpilih

return

Gambar 3.14 Flowchart Proses Load Project

Project yang telah dibuat dapat disimpan pada server agar sewaktu-waktu dapat dibuka kembali dan dibagikan dengan sesama pengguna aplikasi. Proses penyimpanan project dapat dilihat pada Gambar 3.15.

Save Project

Proses ulang untuk tiap diagram dalam project

Proses ulang untuk tiap komponen dalam

diagram Y

Ambil nilai atribut dan posisi komponen, masukkan

dalam array comp[];

Y

Proses ulang untuk tiap relasi

dalam diagram N

Ambil nilai atribut dan posisi relasi, masukkan

dalam array rel[];

Y Masukkan isi comp dan rel ke

dalam array diagram[];

N Masukkan isi array

diagram[] ke dalam file project.

N

return

Gambar 3.15 Flowchart Proses Save Project

(14)

35

Setelah suatu project dibuka kembali, project tersebut dapat dibagikan kepada pengguna lain dengan hak akses view atau edit (ditentukan oleh pembuat project). Jika diberi hak akses view, maka pengguna tersebut tidak bisa melakukan edit diagram.

Share Project

em=alamat e-mail tujuan, actidpro=id project yang

akan dibagikan

Pilih nama project yang akan dibagikan. Otomatis

dapat id projectnya juga.

Masukkan email tujuan dan pilih hak akses (view/edit).

Jika em valid Peringatan:

‘alamat email anda tidak valid’

N

Jika em merupakan

pengguna aplikasi

Y

Kirim ke alamat em ajakan untuk menjadi pengguna

aplikasi.

Buat notifikasi berupa ajakan bagi pengguna untuk berbagi

diagram.

Y N

return

Gambar 3.16 Flowchart Proses Share Project

Selain fasilitas untuk berbagi diagram, aplikasi ini juga dilengkapi dengan fasilitas Remove Project (menghapus project). Apabila suatu project sudah ditutup dan tidak diperlukan lagi, pengguna dapat menghapus project dan data-data dalam

(15)

36

project tersebut. Project yang telah dihapus tidak dapat dilihat lagi. Untuk lebih jelasnya dapat dilihat pada Gambar 3.17.

Remove Project

Gunakan query database untuk menghapus project dan spesifikasinya pada database.

return

Gambar 3.17 Flowchart Proses Remove Project

Selain itu, project yang telah dibagikan dapat dilihat dan diganti hak aksesnya dari view ke edit atau sebaliknya. Fasilitas ini disebut Sharing Info.

Untuk lebih jelasnya dapat dilihat pada Gambar 3.18.

Share Info

Pilih nama project (otomatis dapat nilai id project).

Var proacc: id_project yang dipilih

Tampilkan para pengguna yang dapat mengakses project yang

terpilih beserta hak aksesnya.

Ganti hak akses?

Ganti pada database nilai hak

akses pengguna tersebut terhadap

project.

Y

return N

Gambar 3.18 Flowchart Proses Sharing Info

Setelah pengguna memulai atau membuka kembali suatu project, pengguna akan diarahkan untuk melakukan pengolahan diagram-diagram. Untuk lebih jelasnya dapat dilihat pada Gambar 3.19.

(16)

37

Maintain Diagram

Tambah

diagram baru? Edit Use case

diagram?

N

Edit Class diagram?

Edit Use Case

Diagram Y

N

Edit Object diagram?

Edit Class

Diagram Y

N

Edit Statechart

diagram?

Edit Object

Diagram Y

N

Edit Activity diagram?

Edit Statechart

Diagram Y N

Edit Sequence

diagram?

Edit Activity

Diagram Y

N

Edit Collaboration

diagram?

Edit Sequence

Diagram Y

N

Edit Component

diagram?

Edit Collaboration

Diagram Y

N

Edit Deployment

diagram?

Edit Component

Diagram Y

N

Edit Deployment

Diagram Y

return

N New Use case

diagram?

New Class diagram?

N

New Object diagram?

Y

New Statecart diagram?

Y

New Activity diagram?

Y

New Sequence diagram?

Y

New Collaboration

diagram?

Y

New Component

diagram?

Y

New Deployment

diagram?

Y

Buat canvas dengan id=idd, Buka tools use case diagram Var idd= id

diagram baru Y

Buat canvas dengan id=idd, Buka tools class

diagram Var idd= id

diagram baru

Buat canvas dengan id=idd, Buka tools object

diagram Var idd= id

diagram baru

Buat canvas dengan id=idd,

Buka tools statechart diagram Var idd= id

diagram baru

Buat canvas dengan id=idd, Buka tools activity

diagram Var idd= id

diagram baru

Buka tools sequence diagram Var idd= id

diagram baru

Buka tools collaboration

diagram Var idd= id

diagram baru

Buka tools component diagram Var idd= id

diagram baru

Buka tools deployment

diagram Var idd= id

diagram baru N

Y N

N

Gambar 3.19 Flowchart Proses Maintain Diagram

(17)

38

Dalam proses Maintain Diagram pada Gambar 3.19, terdapat proses edit dari semua jenis diagram yaitu: Edit Use Case Diagram, Edit Class Diagram, Edit Object Diagram, Edit Statechart Diagram, Edit Activity Diagram, Edit Sequence Diagram, Edit Collaboration Diagram, Edit Component Diagram, dan Edit Deployment Diagram. Kesembilan proses tersebut akan mengeksekusi proses yang sama di dalamnya, hanya tools-nya yang berbeda. Maka, proses yang dilakukan dalam kesembilan proses tersebut dijelaskan melalui Flowchart Proses Edit Diagram pada Gambar 3.20.

Edit Diagram

cid=id komponen terpilih

cid==”cursor”?

Mousedown pada area canvas:

dx=mx, dy=my Y

Var mx, my: koordinat mouse saat di atas canvas Var dx, dy: koordinat saat mousedown pada

canvas

Var cid: id komponen yang dipilih Var offsx, offsy: koordinat komponen dalam canvas

Var canv: array komponen dalam canvas Var theresel: komponen yang dikenai mouse

Selama var i <

canv.length

true

Jika mouse menyentuh salah

satu komponen

Masukkan canv[i] (komponen yang disentuh mouse) ke

variabel theresel, Masukkan canv[i].x (posisi x komponen) ke variabel offsx, Masukkan canv[i].y (posisi y komponen) ke variabel offsy.

Y

N false

Mousemove pada area canvas.

Clear canvas.

Ambil posisi mouse mx, my

Jika ada komponen atau grup komponen yang disentuh

mouse

Pindahkan komponen: ubah nilai theresel.x &

theresel.y sesuai posisi mx, my

Y

Jika mouse menyentuh resize

handling suatu komponen

Resize komponen:

Theresel.width=mx-offsx, Theresel.height=my-offsy

Y N

Semua komponen menjadi tidak terpilih Draw semua komponen

yang ada, Gambar blok untuk memilih sekelompok komponen dari posisi dx,

dy ke poisisi mx, my

Draw semua komponen, select handling, dan resize handling yang sedang aktif cid merupakan

suatu bangun N

Klik pada area canvas:

Create komponen baru pada posisi dx, dy

Y

Pilih tool komponen?

Y

Jika ada komponen yang

kena blok

Masukkan komponen dalam

array tobj Y

Gambar select handling mulai dari x,y komponen paling kiri-atas sampai x+width,y+height komponen

yang paling kanan bawah Anggap isi tobj sebagai satu

komponen

N

Mouseup pada canvas N

N

A

Diagram Options

Gambar 3.20 Flowchart Proses Edit Diagram

(18)

39

A Mousedown pada

area canvas:

dx=mx, dy=my

Selama var i <

canv.length

true

Jika mouse menyentuh salah satu komponen

N

Masukkan canv[i]

sebagai sumber Y

Mousemove pada area canvas.

Clear canvas.

Ambil posisi mouse mx, my

Gambar garis hubung dari dx,dy

ke mx,my

Draw semua komponen, select

handling, dan resize handling Mouseup pada

canvas: ambil desx=mx, desy=my

Selama var i <

canv.length

true

Jika mouse menyentuh salah satu komponen

Masukkan canv[i]

sebagai tujuan Y Jika ada

komponen sumber

false

Y Peringatan:

“komponen sumber tidak

terdefinisi”

N

N Jika ada

komponen tujuan

false

Jika sumber dan tujuan bisa

dihubungkan Gambar garis relasi dari sumber

ke tujuan

Y

Peringatan:

“komponen tujuan tidak terdefinisi”

N Y

Peringatan:

“sumber dan tujuan tidak dapat

direlasikan”

N

Gambar 3.20 Flowchart Proses Edit Diagram (Lanjutan)

(19)

40

Gambar 3.20 menunjukkan keseluruhan proses yang dijalankan untuk melakukan pembuatan atau pengolahan diagram. Proses dimulai pada saat pengguna memilih tool dari masing-masing komponen diagram, kemudian digambarkan di atas canvas. Setelah komponen dibentuk, pengguna dapat melakukan pemindahan letak komponen atau mengubah ukuran komponen yang tampak. Hal yang sama dapat dilakukan untuk beberapa komponen dalam satu lembar penyusunan diagram.

Selain pengolahan diagram, pengguna juga diberi fasilitas untuk mengubah nama diagram ataupun menghapus digram yang telah dibuat. Untuk lebih detailnya dapat dilihat pada Gambar 3.21.

Rename diagram?

Var nm=nama diagram yang baru

Y

Ubah teks dalam tag html yang berisi

nama diagram Ubah teks nama

diagram pada treeview diagram

Delete diagram?

N

“Sudah yakin menghapus diagram ini?”

Y

Cancel delete N

cid=id diagram yang akan

dihapus Hapus semua

komponen diagram dalam div cid.

Hapus semua relasi diagram dalam div cid.

Hapus div cid.

Y

Print?

N

cid=id diagram yang akan dicetak

Y

N

return Diagram

Options

Tampilkan isi div cid pada page baru.

Gambar 3.21 Flowchart Proses Diagram Options

Setelah melakukan pengolahan diagram, pengguna dapat melanjutkannya dengan kembali pada pengolahan project untuk menyimpan dan membagikan project yang telah dibuat. Project yang sudah dibagikan dan sudah menerima approve dari pengguna yang diajak akan masuk sebagai Shared Projects. Shared Projects ini tebagi menjadi dua yaitu Own Projects (project buatan sendiri) dan Other Projects (project yang dibuat dan dibagikan oleh pengguna lain). Fasilitas ini akan ditampilkan pada sisi kanan halaman editor. Proses untuk menampilkan Shared Project dapat dilihat pada Gambar 3.22.

(20)

41

Look Shared Projects

Ambil data dari database berupa project pribadi yang ada pada

tabel shared, lalu tampilkan.

Ambil data dari tabel shared dalam database berupa project yang punya target ke pengguna

aktif, lalu tampilkan

return Klik pada nama

diagram?

Klik pada nama diagram?

N Jika hak_akses = view

Y

Tampilkan halaman vew.php

dan load project yang dipilih

Y

Tampilkan halaman repair.php dan load project yang dipilih

N Tampilkan

halaman vew.php dan load project

yang dipilih Y

N

Maintain?

Maintain Project Maintain Diagram

Y

Beri komentar pada diagram?

Comment Y

N N

Gambar 3.22 Flowchart Proses Look Shared Projects

Gambar 3.22 menjelaskan bahwa Shared Projects yang ditampilkan dapat dibuka dan diberi komentar oleh pengguna. Jika memiliki hak akses edit, pengguna dapat melakukan maintai terhadap project yang dibuka. Pengguna juga dapat memberikan komentar pada tiap diagram.

Selanjutnya, pengguna dapat pula melihat invitation dan report. Invitation yaitu ajakan dari pengguna lain untuk bergabung di project-nya. Sedangkan

(21)

42

report adalah notifikasi yang muncul ketika ada pengguna yang memberikan komentar pada Shared Projects dimana pengguna terlibat. Prosesnya dapat dilihat pada Gambar 3.23.

Look invitation and report

Tampilkan data pada tabel invite dalam database yang punya target

ke pengguna.

Accept?

Hapus data tersebut pada

tabel invite.

Masukkan data tersebut pada

tabel shared.

Y

Reject?

N

Y

Tampilkan data pada tabel report

dalam database yang punya target

ke pengguna.

N

return

Gambar 3.23 Flowchart Proses Look Invitation and Report

Fasilitas invitation yang diterima akan menjadi Shared Projects bagi pengguna. Selanjutnya pengguna dapat memberikan komentar dan melihat komentar diagram. Prosesnya dapat dilihat pada Gambar 3.24.

Comment

Tampilkan komentar di tabel comment dalam

database sesuai dengan id diagram yang

sedang ditampilkan

Masukkan komentar?

Cek apakah komentarnya

kosong Y

Masukkan komentar ke

dalam tabel comment.

N

Peringatan ‘anda belum memasukkan

komentar’

Y

return N

Gambar 3.24 Flowchart Proses Comment

(22)

43

3.4 Desain Komponen dan Relasi

Dalam proses menggambarkan komponen dan relasi akan dibentuk Class Comp (komponen) yang diturunkan menjadi class berbagai komponen. Desain dari class seluruh komponen diagram dapat dilihat pada Gambar 3.25.

+selecting() +deselect() +draw_obj() +undraw() +removing() +retext() +set_pos() +create() +draw() +setting() +save() +x +y +width +height +obj +title +shapes[]

+sel_handle +res_handle Comp

+create() +draw() +setting() +save()

Note

Package

Actor

Use Case

Interface

+create() +draw() +setting() +save() +set_attr() +set_opr() +attribute +operation

Class +create() +draw() +setting() +save() +set_member() +member

Instant

StartState

EndState

State

Activity

Decision

HorSinc

VerSinc

Objectes

Component

SubSpec

SubBod

MainProg

PackSpec

PackBod

TaskSpec

TaskBod

Device

Processor

Swimlane

+create() +draw() +setting() +save() +rebanner() +banner +childs[]

ObjSequence

+create() +draw() +setting() +save() +objpar MesSequence +create()

+draw() +setting() +save()

ObjColl

InsColl

Gambar 3.25 Desain Class Seluruh Komponen Diagram UML

(23)

44

Dalam Class Comp terdapat atribut/ data member yang diturunkan. Ada beberapa class turunan yang memiliki data member tambahan. Penjelasan dari masing-masing data member dapat dilihat pada Tabel 3.1.

Tabel 3.1 Penjelasan Data Member pada Seluruh Class Komponen Diagram no. Nama

atribut Class Keterangan 1 x

Comp (diturunkan)

menyimpan posisi x komponen.

2 y menyimpan posisi y komponen.

3 width menyimpan ukuran lebar komponen.

4 height menyimpan ukuran tinggi komponen.

5 obj menyimpan penggambaran bentuk dasar

komponen (kotak transparan).

6 title menyimpan penamaan komponen.

7 shapes[] menyimpan susunan bentuk komponen dalam array.

8 sel_handle menyimpan penggambaran selected handle.

9 res_handle menyimpan penggambaran resizing handle.

10 member Instant menyimpan penulisan data member suatu instansi class.

11 attribute

Class

menyimpan penulisan atribut suatu class.

12 operator menyimpan penulisan fungsi operasi suatu class.

13 banner ObjSequence menyimpan penulisan nama object di sudut atas object.

14 childs[] menyimpan id message connector (dalam array) yang bergantung pada object.

15 objpar MesSequence menyimpan id object sequence dimana komponen ini bergantung.

Class Comp memiliki banyak fungsi yang akan digunakan pada class turunannya. Ada juga fungsi yang memiliki kesamaan nama dan tujuan namun

(24)

45

mengeksekusi perintah yang berbeda pada class turunannya (polimorphism).

Penjelasan mengenai tujuan dari masing-masing operasi/ member function dapat dilihat pada Tabel 3.2.

Tabel 3.2 Penjelasan Member Function Seluruh Class Komponen no Nama Fungsi Class Keterangan

1 selecting()

Comp (diturunkan)

untuk menandai komponen yang sedang dipindah/ di-resize.

2 deselect() untuk menghilangkan penandaan yang

dieksekusi oleh fungsi selecting().

3 draw_obj() untuk menggambar bentuk dasar

komponen (kotak transparan).

4 undraw() untuk menghapus penggambaran object

yang dieksekusi oleh fungsi draw().

5 removing() untuk menghapus bentuk dasar dan

keseluruhan komponen().

6 retext() untuk mengubah penamaan komponen.

7 set_pos() untuk mengubah posisi komponen.

8 create()

Comp dan semua class turunannya (polimorphism)

untuk mulai membuat komponen.

9 draw() untuk menggambar bentuk khusus di

atas bentuk dasar komponen.

10 setting() untuk mengubah nilai atribut komponen dan memperbarui komponen.

11 save() untuk memasukkan komponen ke media

penyimpanan (file JSON).

12 set_member() Instant untuk mengubah nilai data member suatu instansi class.

13 set_attr()

Class

untuk mengubah list atribut pada komponen class.

14 set_opr() untuk mengubah list operasi pada komponen class.

(25)

46

Tabel 3.2 Penjelasan Member Function Seluruh Class Komponen (Lanjutan) no Nama Fungsi Class Keterangan

15 rebanner() ObjSequence untuk mengubah penulisan nama object pada sudut atas object sequence.

Selain Class Comp, akan dibentuk Class Relation (relasi) yang akan diturunkan menjadi class seluruh relasi antar komponen diagram. Desain class dari seluruh relasi diagram dapat dilihat pada Gambar 3.26.

+setSource() +removing() +save() +drawing() +updating() +setArrow() +sour +dest +obj +label[]

+state +type

Relation

+drawing() +updating() +setArrow() Association

+drawing() +updating() +setArrow() Generalization

+drawing() +updating() +setArrow() Aggregation

+drawing() +updating() +setArrow() Dependency

+drawing() +updating() +setArrow() Transition

+drawing() +updating() +setArrow() TranSelf

+drawing() +setArrow()

ToNote

+drawing() +updating() +setArrow() Connect

+drawing() +updating() +setArrow() ObLink

+drawing() +updating() +setArrow() ObMessage

+drawing() +updating() +setArrow() MesSelf

Gambar 3.26 Desain Class Seluruh Relasi Komponen Diagram UML

Dalam Class Relation juga terdapat atribut/data member yang diturunkan.

Penjelasan lebih detail mengenai data member pada seluruh class relasi komponen dapat dilihat pada Tabel 3.3.

Tabel 3.3 Penjelasan Data Member Seluruh Class Relasi Komponen no Nama

Atribut Class Keterangan 1 sour

Relation (diturunkan)

menyimpan komponen pertama yang dihubungkan.

2 dest menyimpan komponen kedua yang dihubungkan dengan komponen pertama.

3 obj menyimpan penggambaran relasi.

(26)

47

Tabel 3.3 Penjelasan Data Member Seluruh Class Relasi Komponen (Lanjutan) no Nama

Atribut Class Keterangan 4 label[]

Relation (diturunkan)

menyimpan list penulisan atribut relasi dalam suatu array.

5 state

nilai yang menyatakan kondisi proses merelasikan komponen. Nilai ini berfungsi untuk mengatuk kinerja mouse event. Nilai:

0 = tidak/ sudah direlasikan.

1 = sedang direlasikan.

6 type

untuk menandai bahwa object ini adalah relasi komponen sehingga dapat dikenali melalui event mouseover.

Class Relation juga memiliki banyak fungsi/ member function yang otomatis menjadi member function pada class turunannya. Ada juga member function dengan nama dan tujuan yang sama namu mengeksekusi perintah yang berbeda (polimorphism). Penjelasan detailnya dapat dilihat pada Tabel 3.4.

Tabel 3.4. Penjelasan Member Function pada Seluruh Class Relasi Komponen no. Nama Fungsi Class Keterangan

1 setSource()

Relation (diturunkan)

untuk mengambil nilai komponen pertama yang direlasikan.

2 removing() untuk menghapus relasi komponen.

3 save() untuk memasukkan komponen ke

media penyimpanan (file JSON).

4 drawing()

Relation dan semua class turunannya (polimorphism)

untuk mulai menggambar relasi.

5 updating() untuk menampilkan perubahan pada

relasi setelah pada perubahan attribut.

6 setArrow() untuk mengambil nilai komponen

kedua yang direlasikan.

(27)

48

3.5 Desain Database

Dalam hal penyimpanan data, aplikasi ini membutuhkan tabel-tabel yang dapat diakses ketika aplikasi sedang ditampilkan. Tabel-tabel akan disusun dalam suatu database. Relasi antar tabel diperlukan untuk mempermudah mengenali tabel yang menjadi target penyimpanan data sesuai kebutuhan. Gambaran relasi tabel-tabel secara lebih detail dapat dilihat pada Gambar 3.27 dan Gambar 3.28.

Gambar 3.27 Logical Data Model Dari Database Aplikasi

own

send

receive

getting has

collaborate

get

make

give

given User

# o o

username password email ...

Variable characters (50) Variable characters (50) Variable characters (30)

Projects

# o

*<fi>

o o

project_id project_name creator created last_modif ...

Variable characters (50) Variable characters (50) Variable characters (50) Date & Time Date & Time

Invite

#

# from to id_project ...

Variable characters (50) Variable characters (50) Variable characters (50) Shared

#

# o

id_project creator target access ...

Variable characters (50) Variable characters (50) Variable characters (50) Variable characters (20)

Report

#

# o o

subject target datetime report ...

Variable characters (50) Variable characters (50) Date & Time

Variable characters (2000)

Comment

#

# o

# o o

comment_id id_project id_diagram comentator comment datetime ...

Variable characters (100) Variable characters (50) Variable characters (50) Variable characters (50) Variable characters (2000) Date & Time

(28)

49

Gambar 3.28 Physical Data Model Dari Database Aplikasi

3.6 Desain Menu

Berdasarkan alur berjalannya aplikasi, pada aplikasi ini diperlukan suatu menu untuk memudahkan pengguna dalam mengoperasikan aplikasi. Berikut ini merupakan penjelasan lebih dalam mengenai menu-menu yang ada.

FK_OWN

FK_SEND

FK_RECEIVE

FK_GETTING FK_HAS

FK_COLLABORATE

FK_GET

FK_MAKE

FK_GIVE

FK_GIVEN User

username password email ...

varchar(50) varchar(50) varchar(30)

<pk>

Projects project_id

project_name creator created last_modif ...

varchar(50) varchar(50) varchar(50) datetime datetime

<pk>

<fk>

Invite from

to id_project ...

varchar(50) varchar(50) varchar(50)

<pk,fk2>

<pk,fk1>

<pk,fk3>

Shared id_project

creator target access ...

varchar(50) varchar(50) varchar(50) varchar(20)

<pk,fk2>

<pk,fk1>

<pk>

Report subject

target datetime report ...

varchar(50) varchar(50) datetime varchar(2000)

<pk,fk2>

<pk,fk1>

Comment comment_id

id_project id_diagram comentator comment datetime ...

varchar(100) varchar(50) varchar(50) varchar(50) varchar(2000) datetime

<pk>

<pk,fk2>

<pk,fk1>

(29)

50

Menu yang berupa form terdiri dari:

Form Log In: form agar pengguna dapat memasukkan identitasnya berupa username dan password.

Form Sign Up: form agar pengguna baru dapat membuat akun dengan memasukkan username, password, dan alamat e-mail.

Form Verifikasi: form untuk mengirimkan identitas pengguna ke alamat e-mail yang dimasukkan pengguna.

Menu berupa form ditampilkan pada halaman index. Desain antarmuka menu yang berupa form dapat dilihat pada Gambar 3.29.

Menu utama pada halaman editor:

 Project

Menu yang berhubungan dengan pengolahan project pengguna. Terdiri dari 3 submenu:

New Project untuk membuat project baru

Load Project untuk menampilkan isi project yang pernah dibuat pengguna.

Save Project untuk menyimpan hasil pekerjaan dalam suatu project.

Share Project untuk mengundang pihak lain agar dapat mengakses project.

Remove Project untuk menghapus project yang sudah tidak diperlukan.

Share Info untuk menjelaskan siapa saja yang dapat mengakses project.

 New Diagram

Menu untuk membantu pengguna dalam membuat diagram baru. Menu ini terdiri dari 9 submenu sesuai jenis Diagram UML.

New Use Case Diagram New Class Diagram New Object Diagram New Statechart Diagram New Acivity Diagram New Sequence Diagram New Collaboration Diagram New Component Diagram New Deployment Diagram

(30)

51

 Diagram Options

Menu untuk membantu pengguna dalam mendayagunakan diagram yang sedang dimodifikasi atau ditampilkan. Di dalamnya terdapat submenu:

Rename menu untuk mengganti nama diagram Delete menu untuk menghapus diagram

Print menu untuk menampilkan page dimana diagram siap dicetak.

 Log Out

Menu untuk keluar dari editor aplikasi.

Letak menu utama pada halaman editor dapat dilihat pada Gambar 3.30.

Menu treeview pada sudut kiri halaman editor:

Menu ini disediakan untuk memudahkan pengguna dalam penyusunan diagram- diagram berdasarkan jenis diagram yang ada. Diagram digolongkan menjadi 9 jenis Diagram UML. Maka menu yang ada juga terdiri dari 9 menu yaitu:

Use Case Diagram Class Diagram Object Diagram Statechart Diagram Acivity Diagram Sequence Diagram Collaboration Diagram Component Diagram Deployment Diagram

Apabila pengguna pembuat lembar digram baru, maka digaram tersebut akan muncul sebagai submenu dari jenis-jenis diagram di atas. Letak menu treeview dapat dilihat di bagian kiri Gambar 3.30 dan Gambar 3.31.

Menu tambahan di sebelah kanan halaman editor utama:

Menu ini bertujuan untuk melihat keterangan diagram yang sedang ditampilkan, termasuk termasuk aktifitas kolaboratif seperti invitation, reports, dan shared projects. Ada dua tab untuk menapung menu-menu ini yaitu tab Information dan tab Shared Project.

(31)

52

 Tab Information

User Identity untuk menampilkan identitas ussername, e-mail, project dan diagram yang sedang aktif saat ini.

Invitation untuk menampilkan ajakan bergabung pada suatu project.

Reports untuk melaporkan kegiatan yang dilakukan oleh pengguna lain yang terlibat dalam pembagian project.

 Tab Shared Projects

Own Projects untuk melihat project pribadi yang dapat dikomentari atau dimodifikasi oleh pengguna lain yang memiliki akses.

Others Projects untuk melihat project yang dibuat oleh pengguna lain dimana pengguna memiliki hak akses atas project tersebut.

Letak menu tabs ini dapat dilihat di bagian kanan Gambar 3.30.

Menu tambahan yang ditampilkan pada halaman editor tambahan:

User Identity untuk menampilkan identitas username, e-mail, project dan diagram yang sedang aktif saat ini.

Comments untuk menampilkan dan memberi komentar pada diagram yang sedang aktif.

Antarmuka menu tambahan ini dapat dilihat di bagian kanan Gambar 3.31.

3.7 Desain Antarmuka

Penampilan halaman web juga didukung oleh desain antarmuka yang ramah terhadap pengguna. Kerangka tampilan halaman login.php sebagai halaman index direncanakan seperti pada Gambar 3.29.

Header: berisi logo dan gambaran fungsi aplikasi

Form sign up Form log in

Gambar 3.29 Kerangka Halaman Login.php

(32)

53

Selain halaman login.php, aplikasi juga terdiri dari suatu halaman editor utama untuk melakukan segala jenis pengolahan diagram dan publikasi dari masing-masing diagram. Semua itu dapat dilakukan pada halaman editor.php.

Gambar 3.30 Kerangka Halaman Editor.php

Untuk melakukan edit/ view shared diagram, disediakan satu halaman editor khusus agar pengguna lebih leluasa melihat atau mengolah diagram tersebut. Untuk pengguna yang memiliki hak akses edit akan diarahkan ke halaman repair.php. Sedangkan pengguna yang memiliki akses view akan diarahkan ke halaman view.php. Kedua halaman tersebut akan memiliki desain antarmuka yang terlihat sama.

Gambar 3.31 Kerangka Halaman Repair.php dan View.php