• Tidak ada hasil yang ditemukan

Rancangan Tampilan

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 22-38)

3.2.4 Rancangan Layar

3.2.4.1 Rancangan Tampilan

Rancangan layar terdiri atas rancangan layar builder yang dapat dilihat pada Gambar 3.9 s/d Gambar 3.27, rancangan layar client yang dapat dilihat pada Gambar 3.28 s/d Gambar 3.30, dan rancangan layar distribution yang dapat dilihat pada Gambar 3.31. Pada tiap modul juga terdapat rancangan pesan kesalahan yang dapat dilihat pada Gambar 3.32.

Knowledge Builder File Category Statement Rules Window Help

Category Inspector Category list

Statement List :

Statement Tree View :

Rancangan layar utama dari builder (Gambar 3.9), dapat dilihat seperti Gambar 3.9. Pada menu terdapat pilihan File, Category, Statement Rules Window dan Help.

File terdiri atas :

- New, untuk membuat database baru (Gambar 3.10) - Open, untuk membuka database (Gambar 3.11) - Close, untuk menutup database

- Exit, untuk keluar dari program Category terdiri atas :

- New, untuk membuat kategori baru (Gambar 3.12) - Edit, untuk mengedit kategori (Gambar 3.13)

- Delete, untuk menghapus kategori, sebelumnya ditampilkan dialog

konfirmasi (Gambar 3.17)

Statement terdiri atas :

- New, untuk membuat statement baru (Gambar 3.14)

- Delete, untuk menghapus statemenet. sebelumnya ditampilkan dialog

konfirmasi (Gambar 3.17)

- Save to template, untuk menyimpan statement sebagai template (Gambar

3.15)

Rules terdiri atas :

- New, untuk membuat rule baru (Gambar 3.16)

- Delete, untuk menghapus rule, sebelumnya ditampilkan dialog

Window terdiri atas :

- Minimize all, mengecilkan semua window

- Arrange all, menyusun semua window sekaligus maximize window - Windows list, menampilkan list window yang digunakan user Help

- Help, panduan mengenai aplikasi builder - About, informasi aplikasi builder

Pada Gambar 3.9 juga terdapat Category Inspector yang menampilkan category list, statement list, dan statement tree view.

Save As

Save Cancel Lookin

Open

Open Cancel Look in

Gambar 3.11 Rancangan Layar Builder, Open Database

New Category Category Name

Note

Save Cancel

Gambar 3.12 Rancangan Layar Menu Builder - Category -> New Category

Edit Category Category Name

Note

Save Cancel

Category ID Statement ID Save Cancel Topic New Statement Starting Point

Gambar 3.14 Rancangan Layar Menu Builder - Statement -> New Statement

Pada rancangan new statement (Gambar 3.14), terdapat category id, yaitu nama dari kategori yang telah kita buat sebelumnya. Fungsinya agar user tahu kategori dari statement yang dibuatnya dan tidak dapat diubah lewat layar ini. Starting point digunakan untuk menentukan bahwa statement yang dibuat ini adalah merupakan start statement dari seluruh statement pada kategori. Statement ID diisi dengan id dari statement, contohnya adalah k[x] untuk kesimpulan dimana k menyatakan kesimpulan dan x merupakan urutan penomeran kesimpulan, p[x] untuk pertanyaan, dan start untuk start statement. Topic untuk penjelasan singkat mengenai statement tersebut.

Category ID Statement ID

Save Cancel

Topic

Save Statement to Template

Starting Point

Gambar 3.15 Rancangan Layar Menu Builder - Statement -> Save to Template Save Cancel Add Rule Category ID Statement ID Rules ID

Gambar 3.16 Rancangan Layar Menu Builder - Rule -> New

Pada rancangan Layar New Rule (Gambar 3.16), akan ditampilkan Category ID yaitu nama kategori, dan Statement ID yaitu id dari statement pemilik rule yang akan dibuat. Category ID dan Statement ID tidak dapat diubah, digunakan hanyak untuk memudahkan user untuk mengetahui pemilik rule tersebut. ID rule adalah nama / id dari rule yang dibuat, sebagai contoh ID yang dapat digunakan misalnya answer untuk rule jawaban, atau go untuk rule yang akan dihubungkan dengan statement lain.

Dialog Konfirmasi Confirm

Yes No

Gambar 3.17 Rancangan Layar Dialog Konfirmasi Untuk Penghapusan (Delete)

Knowledge Builder File Category Statement Rules Window Help

Category Inspector Template

Statement List :

Statement Tree View :

ID Statement

Properties Tool Box

Component View

Statement & Component Properties Tool Box 1 2 3 4 5 6 7 8

Pada rancangan layar IDE Statement (Gambar 3.18) terdapat toolbox, yang berisi komponen-komponen yang bisa digunakan dalam pembentukan statement. Komponen-komponen tersebut dapat di drag ke viewer, dan diubah sekehendak hati user. Untuk properti nya dapat diatur pada bagian properties, dengan meng highlight komponen untuk melihat atau mengubah properti nya. Adapun komponen-komponennya adalah (sesuai urutan dalam gambar) :

Tabel 3.8 Tabel Komponen IDE Statement

Nama Komponen Fungsi Pointer sebagai pointer

GroupBox membentuk groupbox yang didalamnya dapat berisi komponen lain, yaitu picture, bit button, label, editbox, radio button dan check box

Picture komponen untuk memasukkan gambar

Bit Button komponen untuk input berupa button yang bisa di klik Label komponen untuk menampilkan text

EditBox komponen untuk input berupa text

RadioButton komponen berupa radio button, umumnya digunakan untuk multiple choice

CheckBox komponen berupa checkbox

Pada Properties Statement (Gambar 3.19), user dapat memberikan ketentuan pada ID Statement ( nama statement ), BackgoundColor untuk mengganti warna latar, ID Variable Input, yaitu variabel awal yang dapat dibuat, dan Expression untuk menentukan nilai variabel tersebut.

Pada rancangan layar properti Gambar 3.20 s/d Gambar 3.23 untuk penjelasan mengenai tiap-tiap properti component Statement dapat dilihat pada Tabel 3.7 (Tabel Input).

Properties ID Input Text Background Color Font Color Left Height Top Input variabel Setting font

Gambar 3.20 Rancangan Layar Properties untuk Label, Checkbox, Groupbox dan RadioButton dari Statement

Properties ID Input Text Font Color Left Height Top Width Input variabel Setting font

Picture File Browse

Gambar 3.21 Rancangan Layar Properties untuk Bitbutton dari Statement

Properties ID Input Left Height Top Width

Picture File Browse Strecth

Properties ID Input Text Background Color Font Color Left Height Top Width Input variabel Setting font Type Default value Input variabel

Knowledge Builder File Category Statement Rules Window Help

Category Inspector Template

Statement List :

Statement Tree View :

ID Rules

Component View

Rules

Rule properties

Gambar 3.24 Rancangan Layar Builder, IDE Rules

Pada rancangan IDE Rules (Gambar 3.24), terdapat component view, yang menampilkan komponen-komponen yang dibuat pada saat pembuatan statement. Rule properties merupakan properti dari rule yang diterapkan pada komponen.

Pada lancangan layar properti Gambar 3.25 s/d Gambar 3.27 untuk penjelasan mengenai tiap-tiap properti dari component Rules dapat dilihat pada Tabel 3.4 (Tabel DetailRules).

Rules

Input

Comparison Value ID Rules

Gambar 3.25 Rancangan Layar Properties untuk Checkbox dan RadioButton dari Rules

Rules

Input Value

ID Rules

Gambar 3.26 Rancangan Layar Properties untuk BitButton dari Rules

Rules Input Comparison Value List ID Rules Value Add Save Delete Cancel

KNOWLEDGE SIMULATOR

User name Password

Login Quit

Gambar 3.28 Rancangan Layar Client - Simulator Login

1. Choose Category

Simulate Back List of Category

2. Choose Starting Point

List of Starting Point

3. Go

Quit Dialog

Gambar 3.30 Rancangan Layar Client – Simulator Dialog

Dialog pada Gambar 3.30 merupakan dialog pertanyaan sampai kesimpulan yang diperoleh dari knowledge base berdasarkan kategori yang dipilih.

Open Dialog Delete About Dialog Info Open Delete Left Panel Right Panel

Knowledge Distribution

Move

Copy

Gambar 3.31 Rancangan Layar Utama Distribution

Pada layar distribution (Gambar 3.31) terdapat 2 bagian utama yaitu left pane dan right pane yang masing-masing mempunyai komponen open, yaitu untuk membuka database dan delete untuk menghapus kategori. Dialog akan menampilkan list kategori yang terdapat pada database. Perintah move untuk memindahkan kategori dan copy untuk menyalin ulang kategori, dari right pane ke left pane atau sebaliknya tergantung pada letak kategori yang dipilih, apabila kategori yang dipilih berada pada right pane, berarti perintah move dan copy digunakan untuk memindahkan atau menyalin ulang ke left pane.

Parent Form

Error message

Ok

Gambar 3.32 Rancangan Layar Pesan Kesalahan

Parent form pada Gambar 3.32 merupakan nama pemilik window pesan kesalahan, misalnya knowledge builder yang berarti pesan kesalahan dimiliki oleh knowledge builder. Error message merupakan pesan kesalahannya.

Dalam dokumen BAB 3 ANALISIS DAN PERANCANGAN (Halaman 22-38)

Dokumen terkait