BAB III ANALISIS DAN PERANCANGAN SISTEM
3.1
Gambaran Umum Sistem Pada tugas akhir ini, akan dibuat aplikasi desktop berbasis komputer
menggunakan bahasa pemrograman VB.NET yang diberi nama Aplikasi virtual mewarnai anak taman kanak-kanak (TK). Aplikasi ini memiliki fungsionalitas untuk mengetahui kreativitas murid dalam mewarnai gambar, dan guru dapat memantau secara real-time kegiatan murid serta memberi penilaian terhadap hasil pewarnaan.
3.2
Kebutuhan Dasar Aplikasi Secara teknis, aplikasi yang akan dibangun memiliki fungsionalitas
sebagai berikut : 1.
Fungsionalitas untuk mewarnai pada gambar.
2.
Fungsionalitas untuk memberi penilaian pewarnaan gambar oleh guru.
3.2.1 Bahan dan Alat Penelitian ini menggunakan perangkat keras maupun menggunakan perangkat lunak yang mendukung dalam proses membangun sistem. Bahan yang digunakan dalam tugas akhir meliputi beberapa perangkat lunak berikut ini: 1)
Siste m Ope rasi Windows 7,
2)
Visual Studio 2012 VB (Bahasa Pemrograman) Alat yang mendukung dalam penelitian ini, adalah seperangkat komputer
dengan spesifikasi minimal yang kelengkapan pendukungnya, yaitu: (1)
I n te l Dua l C or e @ 2 .0 0 G hz ,
(2)
RAM DDR II 2 GB,
(3)
VGA 512 MB dan HDD SATA 80 GB 13
14
3.3
Analisis Kebutuhan Analisis kebutuhan yang dilakukan pada laporan tugas akhir ini meliputi
analisis kebutuhan fungsional,
analisis kebutuhan
non fungsional,
analisis
kebutuhan pengguna.
3.3.1 Analisis Kebutuhan Fungsional Aplikasi virtual mewarnai anak taman kanak-kanak(TK) ini dibuat untuk membantu guru dalam menilai gambar yang telah diwarnai oleh murid, dan juga dapat memberi murid dalam berkreasi mewarnai gambar. Dalam aplikasi ini dilengkapi juga fitur webcam, dimana guru dan murid dapat saling menatap pada layar komputer. Selain itu ada fitur chatting sehingga dapat mengirim teks antara murid dan guru.
3.3.2 Analisis Kebutuhan Non Fungsional Analisis kebutuhan non fungsional meliputi analisis tentang kebutuhan perangkat keras (hardware), perangkat lunak (software) yang digunakan dalam membangun aplikasi, serta pengguna (user) dapat menggunakan aplikasi ini.
3.3.3 Analisis Sistem 3.3.3.1 Arsitektur Sistem Arsitektur sistem yang digunakan dalam mengembangkan aplikasi ini dapat dilihat pada gambar 3.1 berikut :
15
Gambar 3.1 Arsitektur Sistem Guru/Server adalah pengguna yang menggunakan aplikasi dan berperan sebagai guru sekaligus menjadi Server yang nantinya akan diakses oleh Client yang mana dalam aplikasi ini diumpamakan sebagai Murid melalui Network atau jaringan dengan syarat masih berada dalam jaringan yang sama. Komputer adalah perangkat keras dengan sistem operasi berbasis windows untuk menjalankan Aplikasi Virtual Mewarnai Anak TK.
3.4
Perancangan dan Pemodelan Aplikasi Untuk menggambarkan aliran proses pengembangan aplikasi, pemodelan
yang digunakan adalah Unified Modelling Language (UML). Adapun Diagram UML yang akan digunakan adalah use case Diagram, activity Diagram dan sequence Diagram.
3.4.1 Use case Diagram Use case Diagram digunakan untuk menjelaskan dan menggambarkan pengguna sistem dan perilaku pengguna terhadap sistem. Pengguna sistem diwakili oleh aktor, sedangkan perilakunya diwakili oleh use case. Diagram use case dari aplikasi virtual mewarnai anak tk dapat dilihat pada Gambar 3.2.
16
Gambar 3.2 Use case Diagram Aplikasi virtual mewarnai anak TK
3.4.2 Daftar Use case Daftar use case merupakan keterangan kegiatan yang dilakukan oleh aktor. Daftar list use case seperti ditunjukkan pada Tabel 3.1. Tabel 3.1 Daftar list use case Nama Use case Memilih Gambar
Deskripsi
Pelaku
Guru melakukan pemilihan soal gambar dari Guru list gambar yang telah tersedia.
Memberi Nilai
Guru dapat member nilai setelah status dari Guru Murid selesai.
Menyimpan
Guru dapat
Gambar Mewarnai
pewarnaan Murid dapat mewarnai gambar dan Guru Murid
Gambar
dapat melihat hasil pewarnaan
Meminta
Murid meminta penilaian setelah selesai Murid
penilaian
mewarnai
Membatalkan
Murid dapat membatalkan pewarnaan (undo)
pewarnaan
menyimpan
gambar
hasil Guru
Murid
17
3.4.3 Desain sistem use case Desain sistem use case seperti ditunjukan pada Tabel 3.2, Tabel 3.3, Tabel 3.4, Tabel 3.5, Tabel 3.6, Tabel 3.7
Tabel 3.2 Desain use case memilih soal gambar
Nama Use case
Memilih Soal Gambar
Aktor Utama
Guru.
Aktor Tambahan
-
Deskripsi Prakondisi
Guru melakukan pemilihan soal gambar dari list gambar yang telah tersedia. Gambar soal telah dimasukkan
ke folder aplikasi
sehingga gambar dapat muncul pada menu listbox Use case ini dilakukan sebagai langkah awal untuk Sasaran Bidang khas event
Menentukan gambar ke sistem yang akan di eksekusi Kegiatan Pelaku
Respon Sistem
Langkah 1:
Langkah 2:
Guru membuka sistem.
Sistem
menampilkan
form utama Langkah 3: Guru
memilih
list
soal Langkah 4: Sistem
gambar.
gambar dari list yang
Langkah 5: Guru start
menekan
menampilkan
tombol
dipilih Langkah 6: Sistem port
mengirimkan ke
server,
dan
18
Tabel 3.3 Desain use case input nilai
Menginput Nilai
Nama Use case Aktor Utama
Guru.
Aktor Tambahan
-
Deskripsi
Guru dapat menginput atau mengedit nilai.
Prakondisi
Status dari Murid selesai
Sasaran
Use case ini dilakukan untuk menambah dan merubah Kegiatan Pelaku
Respon Sistem
Langkah 1:
Langkah 2:
Murid Bidang
menekan
tombol field nilai pada form
Khas selesai
enabled
Suatu Event Langkah 3:
Langkah 4:
Guru memberikan nilai
Nilai muncul pada form Murid
Alternatif langkah 4: Jika data yang diinputkan Bidang Alternatif
menampilkan
pesan
kosong, sistem
informasi,
meminta
akan Guru
memasukkan nilai.
1.
Input nilai tidak boleh kosong.
Aturan Bisnis
2.
Hanya guru yang dapat menginputkan nilai.
Asumsi
Nilai yang diinputkan sudah terisi.
Masalah Terbuka
1.
Data yang diinputkan tidak terisi lengkap dan valid,
2.
Guru lupa menginputkan nilai.
19
Tabel 3.4 Disain sistem use case melihat nilai
Nama Use case
Melihat nilai
Aktor Utama
Murid
Aktor Tambahan
Guru Use case ini mendeskripsikan tentang Guru atau Murid
Deskripsi
dapat melihat nilai yang telah diinput Guru.
Prakondisi Sasaran
Murid menekan tombol selesai. Use case ini dilakukan untuk melihat nilai. Kegiatan Pelaku
Khas Langkah 1: Murid menekan Suatu Event selesai.
Respon Sistem Langkah 2:
Bidang
tombol Sistem
akan
menampilkan Nilai.
Alternatif langkah 4: Bidang Alternatif
Jika tombol selesai tidak diklik, sistem tidak akan menampilkan nilai.
Aturan Bisnis
1.
Murid Menekan tombol selesai.
2.
Hanya
Guru
yang
dapat
menambahkan
atau
mengubah nilai. Asumsi
Tombol selesai telah diklik. 1. Jika telah selesai mewarnai tombol lupa ditekan,
Masalah Terbuka
2. Guru lupa menginputkan nilai.
20
3.4.4
Activity Diagram Activity Diagram menggambarkan urutan aktivitas untuk suatu proses
tertentu. Berdasarkan use case yang ada, dibuat activity Diagram untuk masingmasing use case. Berikut ini adalah Diagram aktivitas untuk use case Memilih Soal Gambar dari aplikasi virtual mewarnai anak TK.
Gambar 3.3 Activity Diagram untuk Use case Memilih Soal Gambar dari aplikasi virtual mewarnai anak TK Pada Gambar 3.4 diatas aktivitas dimulai jika pengguna sudah membuka aplikasi kemudian memilih list gambar, system akan mengecek guru telah melakukan start server, jika ya maka komputer akan mengirimkan request ke server. Request yang telah diterima, akan direspon server dengan mengirimkan message apabila ada client yang terhubung pada server. Cilent akan menerima data yang telah disimpan pada server.
21
Berikut ini adalah Diagram aktivitas untuk use case Menginput Nilai dari aplikasi virtual mewarnai anak TK. Host
Server
Computer
Menerima Status Selesai
Memasukan Nilai
Send Request
Generate Data
Tidak
Terima dan Simpan Data
Kirim
Menampilkan Pesan Error
Menampilkan Nilai
ya
Gambar 3.4 Activity Diagram untuk Use case Menginput Nilai dari aplikasi virtual mewarnai anak TK Pada gambar 3.5 diatas aktivitas dimulai jika guru telah mendapat status selesai dari Client, maka guru dapat memasukkan nilai, apabila nilai yang dimasukkan tidak kosong jika ya komputer akan mengirim request data nilai ke server. Data yang telah diterima akan direspon server dan dikirim dan di simpan pada computer Client, data yang telah disimpan diproses sistem dan akan ditampilkan berupa nilai yang telah dimasukkan guru. Sebaliknya jika nilai yang dimasukkan kosong sistem computer akan menampilkan pesan error. Berikut ini adalah Diagram aktivitas untuk use case Melihat Nilai dari aplikasi virtual mewarnai anak TK.
22
Gambar 3.5 Activity Diagram untuk Use case Melihat Nilai dari Aplikasi virtual mewarnai anak TK
Pada gambar 3.6 diatas aktivitas dimulai setelah murid membuka aplikasi virtual mewarnai anak TK, kemudian menekan tombol selesai maka sistem computer akan mengirimkan request ke server. Request yang telah diterima akan direspon server dengan mengirim ke computer client dan data yang telah diterima akan disimpan, kemudian data di proses oleh sistem computer. Hasil proses data tersebut ditampilkan ke client.
23
Berikut ini adalah Diagram aktivitas untuk use case Mengedit Warna Gambar dari aplikasi virtual mewarnai anak TK.
Computer
Client
Menekan Tombol Connect
Memilih Tombol Fill
Memilih Warna
Menekan Tombol Undo
Menampilkan Warna
Gambar 3.6 Activity Diagram untuk Use case Mengedit Warna Gambar dari Aplikasi virtual mewarnai anak TK
Pada gambar 3.7 diatas aktivitas dimulai saat murid menekan tombol connect, kemudian client memilih Tombol Fill dan memilih warna. Client juga dapat mengembalikan warna ke keadaan sebelumnya. Berikut ini adalah Diagram aktivitas untuk use case Melihat Warna Gambar dari aplikasi virtual mewarnai anak TK.
24
Host
Computer
Menekan Tombol Start
Host
Generate Data
Terima dan Simpan Data
Kirim
Menampilkan Warna
Gambar 3.7 Activity Diagram untuk Use case Melihat Warna Gambar dari Aplikasi virtual mewarnai anak TK Pada gambar 3.8 diatas, aktivitas dimulai saat guru menekan tombol start. Computer akan menerima data dari server apabila ada client yang mengirim requet data ke server. Kemudian data yang diterima akan disimpan dan diproses oleh sistem computer sehingga hasil yang akan keluar berupa warna.
3.4.5
Hirarki Menu Berikut adalah hirarki menu yang terdapat pada aplikasi virtual mewarnai
anak TK, dimana didalam menu ini menu-menu yang dapat digunakan sesuai dengan kebutuhan dari aplikasi.
25
Menu Utama
File
Soal Baru
About
Simpan
Keluar
Gambar 3.8 Hirarki Menu Guru dari Aplikasi virtual mewarnai anak TK
Pada gambar 3.12 diatas merupakan tampilan menu utama dari guru, terdapat dapat menu file dan about. Pada file berisi sub menu soal baru, simpan dan keluar.
Menu Utama
File
Simpan
About
Connect
Undo
Selesai
Keluar
Gambar 3.9 Hirarki Menu Murid dari Aplikasi virtual mewarnai anak TK Pada gambar 3.13 diatas merupakan tampilan menu utama dari murid. Menu utama terdiri dari file, about, tombol connect, tombol undo dan tombol selesai. Menu file memiliki sub menu simpan dan keluar.
26
3.5
Perancangan Antarmuka Perancangan antarmuka dibutuhkan dalam rekayasa perangkat lunak agar
aplikasi yang dibangun, mudah digunakan oleh pengguna. Untuk itu perlu dibuat suatu antarmuka yang baik. Berikut ini akan dijelaskan beberapa antarmuka yang digunakan dalam pembuatan aplikasi Virtual mewarnai anak tk tersebut.
3.5.1 Halaman Form Guru Pada form halaman guru terdapat sebuah header yang terdiri atas tombol start,
file, about dan
port. Picturebox merupakan Common
Control yang berfungsi untuk menampilkan image. Untuk picturebox image akan menampilkan gambar sedangkan picturebox video untuk menampilkan video chat live. List Box merupakan common control yang berfungsi untuk menampilkan list daftar gambar. Text Box adalah field untuk memasukkan String nilai, dan untuk mengirimkan data nilai ke sever user tinggal mengklik tombol OK.
Gambar 3.10 Rancangan Halaman Guru
27
3.5.2 Halaman Form Murid Pada form halaman Murid terdapat sebuah header yang terdiri atas tombol connect, file, about, help, server, dan port. Picturebox merupakan control yang berfungsi menampilkan gambar.
Gambar 3.11 Rancangan Halaman Murid
