Bab IV Perancangan. Aplikasi Visualisasi Dashoard

Ukuran: px

Mulai penontonan dengan halaman:

Download "Bab IV Perancangan. Aplikasi Visualisasi Dashoard"

Suryadi Kartawijaya
6 tahun lalu
Tontonan:

1 Bab IV Perancangan Perancangan merupakan salah satu tahap yang memiliki peranan penting pada pembangunan suatu aplikasi. Perancangan dilakukan berdasarkan hasil analisis dan penentuan kebutuhan. Pada perancangan ini digambarkan semua hasil analisis dan kebutuhan pengguna ke dalam rancangan fungsional. 4.1 Use Case Diagram Usulan Berdasarkan rancangan fungsional sistem di atas, use case diagram sistem dapat dilihat pada gambar berikut. Aplikasi Visualisasi Dashoard Ekstrak metadata «extends» Penentuan Axis dan Ordinat Simpan atribut data «extends» Generate Query Tulis dan baca metadata visualisasi Admin Tulis dan baca metadata desain yang baik Buat chart Tampilkan dashboard Gambar 7 Use Case Diagram 53

2 54 Fungsi-fungsi yang dirancang sesuai use case usulan di atas adalah sebagai berikut : 1. Ekstrak metadata Fungsi ini digunakan untuk membuat metadata basisdata dari basisdata server. Metadata ini dapat berupa informasi tabel, column, type data column, primary key table, foreign key tabel, tabel referensi foreign key, dan column yang diacu oleh foreign key tersebut. Metadata dibaca oleh aplikasi pada saat pengguna pertama kali mengakses halaman dashboard untuk pembuatan chart. Setelah pengguna terhubung dengan basisdata maka metadata dari tabel dalam basisdata tersebut telah dibaca oleh aplikasi. Metadata yang telah dibaca oleh aplikasi akan ditulis kedalam file xml dengan format standar metadata yang sudah ditentukan sebelumnya. Metadata yang telah dibaca oleh aplikasi dalam format yang telah ditentukan sebelumnya akan disimpan dalam sebuah objek yang dibentuk dari class, dimana metadata tersebut akan menggambarkan struktur dari basisdata yang digunakan oleh pengguna. Metadata yang telah dibaca oleh aplikasi tersebut digunakan untuk membuat visualisasi sebuah chart yang merupakan nilai default yang digunakan dalam men-generate chart, menyimpan dan meng-update atribut data yang akan ditampilkan pengguna, dan untuk membuat desain yang baik dari dashboard yang akan ditampilkan. 2. Simpan atribut data. Fungsi penggunaan metadata untuk menyimpan atribut data dibagi menjadi 2 bagian, yaitu: a. Fungsi penentuan Axis dan Ordinat Fungsi ini digunakan untuk menentukan axis dan ordinat data dari tabel yang akan digunakan oleh pengguna dalam pembuatan chart. Axis dan ordinat data dapat ditentukan oleh pengguna berdasarkan primary key dan foreign key dari tabel tersebut. Data primary key dan foreign key dari tabel yang telah dipilih oleh pengguna akan ditampilkan pada tampilan aplikasi, yang memudahkan pengguna untuk menentukan axis dan ordinat datanya. Axis dapat ditentukan oleh pengguna dari primary key pada tabel yang telah dipilih, dan untuk ordinat ditentukan berdasarkan foreign key pada tabel tersebut. Axis hanya dapat dipilih dengan satu data, sedangkan untuk ordinat dapat dipilih oleh pengguna dengan satu data atau lebih. Axis dan ordinat yang telah dipilih pengguna akan digunakan oleh aplikasi dalam menampilkan informasi dalam bentuk chart pada tampilan dashboard.

3 55 b. Fungsi Generate Query Fungsi Generate Query digunakan untuk menghasilkan query dari tabel yang telah dipilih oleh pengguna. Query dari tabel yang telah dipilih akan ditampilkan pada tampilan yang telah disediakan oleh aplikasi. Query yang telah di-generate oleh aplikasi akan digunakan untuk menghasilkan data yang akan ditampilkan pada tampilan dashboard berdasarkan axis dan ordinat yang telah dipilih oleh pengguna. 3. Buat Chart Fungsi buat chart digunakan untuk membuat chart dari data yang diperlukan. Untuk membuat chart, pengguna harus memasuki halaman create chart yang terdapat pada aplikasi. Pada halaman ini, akan ditampilkan tabel yang terdapat pada basisdata yang sebelumnya telah dikoneksikan dengan aplikasi. Setelah pengguna memilih tabel yang akan menjadi sumber data, aplikasi akan menampilkan data primary key dan foreign key dari setiap tabel yang dipilih dimana data primary key dan foreign key tersebut yang akan digunakan oleh pengguna dalam menentukan axis dan ordinat. Setelah pengguna memilih kolom yang akan menjadi axis dan ordinat, aplikasi akan menampilkan query yang telah digenerate oleh aplikasi yang akan digunakan untuk menampikan data pada tampilan dashboard. Pengguna memasukkan nama chart yang akan ditampilkan, dan kemudian pengguna dapat men-generate data. 4. Tulis dan baca metadata visualisasi Fungsi ini digunakan untuk mengubah tampilan dan desain dari chart yang telah dibuat. Pengguna dapat mengubah tampilan dengan mengganti atribut-atribut dari chart sesuai dengan keingina pengguna. Desain dari chart yang dapat diubah oleh pengguna mencakup judul chart, ukuran chart, warna, dan tipe chart. Tipe chart yang disediakan oleh aplikasi antara lain: Column, Bar, Area, dan Line. Dan untuk ukuran chart ditentukan sendiri oleh pengguna sesuai dengan tampilan dashboard yang diinginkan, sedangkan untuk kategori warna disediakan yang disediakan oleh aplikasi, antara lain: Transparent, AliceBlue, Azure, Coral, dan Brown. Perubahan tampilan yang telah dilakukan oleh pengguna dapat disimpan untuk mengubah tampilan dari dashboard tersebut. 5. Tulis dan baca metadata desain yang baik

4 56 Fungsi ini digunakan untuk menulis dan membaca metadata untuk desain yang baik dalam tampilan dashboard. Metadata yang telah dibaca oleh aplikasi digunakan untuk menentukan desain dari chart yang akan ditampilkan pada tampilan dashboard. Untuk kategori dari desain yang baik ditentukan sendiri oleh aplikasi, dimana pilihan untuk desain yang baik akan diberikan oleh aplikasi untuk dipilih pengguna. 6. Tampilkan dashboard Fungsi ini digunakan untuk menampilkan chart yang telah ditentukan oleh pengguna berdasarkan kriteria yang telah disediakan oleh aplikasi. Bentuk, ukuran, warna, dan tingkat kepentingan dari data tersebut ditentukan oleh metadata dari aplikasi. Pengguna dapat menentukan bentuk dan ukuran dengan memilih data yang telah disediakan oleh aplikasi. Setelah tampilan, bentuk, serta ukuran dari chart selesai ditentukan, maka chart yang akan ditampilkan pada dashboard telah sesuai dengan harapan dari pengguna. 4.2 Karakteristik Pengguna Berdasarkan use case diagram usulan di atas, pengguna dari aplikasi ini adalah admin. Dalam hal ini, admin yang dimaksud adalah admin aplikasi dashboard dan para manajer yang membutuhkan data penjualan mobil di PT Adira Finance. Kedua pengguna tersebut memiliki hak akses yang sama dalam aplikasi. 4.3 Rancangan Antarmuka Rancangan antarmuka pada aplikasi dirancang sesuai dengan kebutuhan sistem. Setiap fungsi dalam aplikasi memiliki tampilan antar muka. Tampilan antar muka dalam aplikasi terdiri dari: 1. Home Menu home berfungsi untuk mengembalikan pengguna ke tampilan utama. Pada halaman ini, aplikasi akan menampilkan dashboard operasional, strategis, dan taktikal. Seperti pada contoh di bawah ini merupakan dashboard penjualan mobil baru pada tahun 2014.

5 57 Gambar 8 Rancangan Antarmuka Menu Home Sesuai dengan gambar di atas, penjualan mobil berada pada zona hijau. Itu berarti penjualan mobil pada tahun 2014 sudah sesuai dengan target penjualan yang telah ditentukan oleh perusahaan. Zona kuning dan merah menandakan penjualan masih dibawah standard dan harus dilakukan cara untuk meningkatkan penjualan tersebut. Misalnya dengan memberikan potongan harga yang lebih besar kepada pembeli. 2. Create Dashboard Menu create dashboard berfungsi untuk membuat dashboard baru. Pada form nya user harus memasukkan nama tabel yang ingin dibuat chart-nya, pemilihan kolom yang akan dijadikan axis dan ordinatnya, pilihan agregate function, serta tampilan untuk generate query. Tampilan formnya dapat dilihat pada gambar berikut.

6 58 Gambar 9 Tampilan Antarmuka Menu Create Dashboard 3. Edit Chart Dashboard Menu ini berfungsi untuk menampilkan atribut yang ada pada chart. Atribut pada chart dapat diubah sesuai keinginan pengguna. Tampilannya dapat dilihat pada gambar berikut. Gambar 10 Tampilan Antarmuka Edit Dashboard

Gambar 11 Tampilan Antarmuka Generate Visualisasi Dashboard 5.

7 59 4. Generate Visualisasi Dashboard Pada menu ini akan ditampilkan chart dan nilai dari beberapa atribut yang dimiliki oleh chart. Atribut-atribut tersebut akan dipilih oleh user sesuai keinginannya dan akan disimpan metadatanya dalam file xml. Gambar 11 Tampilan Antarmuka Generate Visualisasi Dashboard 5. Edit Visualisasi Dashboard Antarmuka menu edit visualisasi dashboard sama dengan antarmuka menu generate visualisasi dashboard. Atribut yang akan diubah pada visualisasi dashboard berupa chart title, chart type, title alignment, dan lain-lain. Tampilan antarmuka menu ini dapat dilihat pada gambar berikut. Gambar 12 Tampilan Antarmuka Edit Visualisasi Dashboard

8 60 6. View List Chart Pada menu ini akan ditampilkan list/daftar chart yang ada pada dashboard. Saat chart diklik, maka akan muncul tampilan chart yang dipilih tersebut. Tampilan antarmuka list chart dapat dilihat pada gambar berikut. Gambar 13 Tampilan Antarmuka List Chart 4.3 Lingkungan Implementasi Pada sub bab ini akan dijelaskan mengenai lingkungan perangkat keras dan perangkat lunak yang digunakan dalam mengimplementasikan sistem visualisasi dashboard. Spesifikasi perangkat keras yang digunakan dalam pengimplementasian antarmuka aplikasi adalah Processor Pentium(R) Dual-Core CPU 2.00GHz, RAM 2.00 GB, serta perangkat masukan berupa mouse dan keyboard. Spesifikasi perangkat lunak yang digunakan adalah Sistem operasi Windows Seven, dengan menggunakan bahasa pemrograman C# pada platform.net. Basisdata aplikasi menggunakan DBMS SQL Server 2008 R2.

dokumen-dokumen yang mirip

ANALISA SISTEM VISUALISASI DASHBOARD PENJUALAN MOBIL MENGGUNAKAN METADATA PADA PT. AF

ANALISA SISTEM VISUALISASI DASHBOARD PENJUALAN MOBIL MENGGUNAKAN METADATA PADA PT. AF Melly Siska D Aritonang 41812120103 PROGRAM STUDI SISTEM INFORMASI FAKULTAS ILMU KOMPUTER UNIVERSITAS MERCU BUANA JAKARTA