Prosedur merupakan suatu tata cara kerja atau kegiatan untuk menyelesaikan pekerjaan dengan urutan waktu dan memiliki pola kerja yang tetap yang telah ditentukan. Tujuan dari prosedur ini adalah sebagai buku panduan (manual book) guna mengarahkan dan mempermudah user dalam menggunakan aplikasi CASE Tools berbasis web ini. Prosedurnya adalah sebagai berikut : Registrasi
Gambar 4.1 Tampilan Login Ini merupakan tampilan pada saat pertama kali aplikasi CASE Tools UML ini dijalankan pada browser, yaitu tampilan Login form untuk menggunakan aplikasi ini.
Tampilan Form Registrasi User diharuskan Login agar dapat memakai aplikasi ini dengan memasukkan username dan password. Jika user belum terdaftar maka user dapat melakukan registrasi dengan mendaftarkan username, password, dan email.
Tampilan Create New Project
Tampilan Create New Project Tampilan diatas merupakan tampilan awal saat user ingin memulai membuat project baru dengan cara memilih menu New Project.
Tampilan Form New Project Setelah user memilih menu New Project maka akan muncul jendela baru yang meminta user memasukkan nama project yang akan dibuat.
Tampilan Project baru telah berhasil dibuat Tampilan setelah selesai membuat project baru, maka pada bagian kiri akan muncul nama dari project apa saja yang dibuat.
Tampilan awal CASE Tools
Tampilan Layar awal Aplikasi CASE Tools Pada layar ini user dapat dapat langsung menggunakan aplikasi untuk membuat diagram yang diinginkan. Layar terbagi menjadi bagian menu, canvas, pallete, properties, dan Projects.
Class Diagram
Tampilan Add Class Diagram
Tampilan Error Input Class Diagram Kosong Pada tampilan diatas muncul jika user mendrag komponen Class diagram dari pallete ke canvas. User akan diminta untuk menginput nama dari Class tersebut attribute dan Operation, lalu jika user mengklik tombol submit maka aplikasi akan merender Class diagram sesuai dengan data yang diinput, terlihat seperti tampilan dibawah.
Tampilan Class Diagram dalam Canvas Tampilan diatas merupakan bentuk dari Class diagram yang di generate oleh aplikasi dan dimasukkan kedalam canvas. Nama Class, Attribut Class dan Operation berisi data dari input yang diisi oleh user ketika pertama kali Class di drag kedalam canvas.
Konfirmasi menghubungkan Class satu dengan Class lainnya Tampilan diatas merupakan bentuk dari Class diagram yang di generate oleh aplikasi dan dimasukkan ke dalam canvas. Nama Class, Attribut Class dan Operation berisi data dari input yang diisi oleh user ketika pertama kali Class di drag kedalam canvas.
Connector telah terhubung antar Class Tampilan diatas adalah saat user mendrag konektor yang dapat menghubungkan Class diagram yang satu dengan Class diagram yang lainnya. Akan muncul jendela baru untuk mengkonfirmasi user untuk menghubungkan konektor tersebut. Setelah user menekan OK maka Class diagram tersebut akan saling terhubung.
Konfirmasi menghapus connector Tampilan diatas muncul jika user mengklik konektor, maka akan muncul jendela yang mengkonfirmasi user untuk menghapus konektor. Jika user mengklik OK maka konektor akan terhapus, user juga dapat membatalkan untuk menghapus konektor dengan mengklik.
Tampilan ketika connector berhasil dihapus Tampilan diatas menunjukkan konektor telah dihapus.
Dialog menu ketika melakukan klik kanan pada mouse Tampilan diatas muncul jika user mengklik kanan pada diagram, maka akan muncul pilihan delete, add attribute & Operation, dan edit label. Delete berfungsi untuk menghapus
diagram, add attribute & Operation untuk menambahkan attribute dan Operation baru pada diagram, dan edit label untuk mengganti nama label pada Class diagram.
Tampilan ketika Class Diagram lainnya berhasil dihapus Tampilan saat diagram berhasil dihapus.
Use case Diagram
Tampilan Add Actor Use case Diagram
Tampilan diatas muncul saat user mendrag pilihan actor ke pallete, maka akan muncul jendela baru yang meminta user menginput nama dari actor tersebut. Jika user tidak mengisinya maka akan muncul pesan error yang akan meminta kembali user untuk menginput nama actor.
Tampilan ketika input kosong Tampilan pesan error jika user tidak menginput nama actor.
Tampilan Actor dalam Canvas Tampilan actor yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Tampilan Actor dan Use case dalam Canvas Tampilan actor dan use case yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Tampilan Actor, Use case dan Boundary Box dalam Canvas Tampilan actor, use case dan boundary box yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Activity Diagram
Tampilan Initial node pada Activity Diagram dalam Canvas
Tampilan initial node yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Tampilan Initial node dan Activity dalam Canvas Tampilan initial node dan komponen activity yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Tampilan Initial node, Activity dan Final node dalam Canvas
Tampilan initial node, activity komponen dan final node yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Tampilan Initial node, Decision, Activity dan Final node Tampilan initial node, decision, activity komponen dan final node yang sudah di generate oleh aplikasi dan menampilkan nama sesuai dengan yang user input.
Tampilan ketika semua komponen Activity Diagram terhubung
Tampilan merupakan gambaran ketika semua komponen yang ada pada diagram activity dihubungkan.
