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 t e l D u a l C o r e @ 2. 00 G h z, (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 Deskripsi Pelaku Memilih Gambar Memberi Nilai Menyimpan Gambar Mewarnai Gambar Meminta penilaian Membatalkan pewarnaan Guru melakukan pemilihan soal gambar dari list gambar yang telah tersedia. Guru dapat member nilai setelah status dari Murid selesai. Guru dapat menyimpan gambar hasil pewarnaan Murid dapat mewarnai gambar dan Guru dapat melihat hasil pewarnaan Murid meminta penilaian setelah selesai mewarnai Murid dapat membatalkan pewarnaan (undo) Guru Guru Guru Murid Murid 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 Guru melakukan pemilihan soal gambar dari list gambar yang telah tersedia. Prakondisi Gambar soal telah dimasukkan ke folder aplikasi sehingga gambar dapat muncul pada menu listbox Use case ini dilakukan sebagai langkah awal untuk Sasaran Menentukan gambar ke sistem yang akan di eksekusi Bidang khas event Kegiatan Pelaku Respon Sistem Langkah 1: Langkah 2: Guru membuka sistem. Sistem menampilkan form utama Langkah 3: Guru memilih list soal Langkah 4: gambar. Sistem menampilkan gambar dari list yang Langkah 5: dipilih Guru menekan tombol start Langkah 6: Sistem mengirimkan port ke server, dan
18 Tabel 3.3 Desain use case input nilai Nama Use case Menginput Nilai Aktor Utama Guru. Aktor Tambahan - Deskripsi Prakondisi Sasaran Guru dapat menginput atau mengedit nilai. Status dari Murid selesai Use case ini dilakukan untuk menambah dan merubah Kegiatan Pelaku Respon Sistem Langkah 1: Langkah 2: Bidang Suatu Event Khas Murid menekan tombol selesai Langkah 3: field nilai pada form enabled Langkah 4: Guru memberikan nilai Nilai muncul pada form Murid Bidang Alternatif Alternatif langkah 4: Jika data yang diinputkan kosong, sistem akan menampilkan pesan informasi, meminta Guru memasukkan nilai. Aturan Bisnis Asumsi Masalah Terbuka 1. Input nilai tidak boleh kosong. 2. Hanya guru yang dapat menginputkan nilai. Nilai yang diinputkan sudah terisi. 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 Aktor Utama Aktor Tambahan Deskripsi Prakondisi Sasaran Melihat nilai Murid Guru Use case ini mendeskripsikan tentang Guru atau Murid dapat melihat nilai yang telah diinput Guru. Murid menekan tombol selesai. Use case ini dilakukan untuk melihat nilai. Bidang Suatu Event Khas Kegiatan Pelaku Langkah 1: Murid menekan tombol selesai. Respon Sistem Langkah 2: Sistem akan menampilkan Nilai. Alternatif langkah 4: Bidang Alternatif Jika tombol selesai tidak diklik, sistem tidak akan menampilkan nilai. 1. Murid Menekan tombol selesai. Aturan Bisnis 2. Hanya Guru yang dapat menambahkan atau mengubah nilai. Asumsi Masalah Terbuka Tombol selesai telah diklik. 1. Jika telah selesai mewarnai tombol lupa ditekan, 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 Computer Server Menerima Status Selesai Memasukan Nilai ya Send Request Generate Data Tidak Terima dan Simpan Data Kirim Menampilkan Pesan Error Menampilkan Nilai 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. Client Computer 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 Host Menekan Tombol Start 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 About Soal Baru 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 About Connect Undo Selesai Simpan 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