BAB III ANALISIS DAN PERANCANGAN 3.1 Analisis Sistem Dalam membangun aplikasi pembelajaran aksara sunda berbasis android dilakukan dengan beberapa tahap analisis, yaitu: 1. Pengumpulan data aksara sunda meliputi sejarah, rarangken, dan jenis aksara sunda. 2. Analisis sistem dan membuat perancangan sistem yang akan dibangun. 3.2 Analisis Kebutuhan Sistem 3.2.1 Analisis Kebutuhan Fungsional Analisis kebutuhan fungsional adalah sistem analisis untuk menentukan fungsi-fungsi yang ada pada siistem yang berjalan. Kebutuhan fungsional juga berisis informasi-informasi apa saja yang harus ada dan dihasilkan oleh sistem. Adapun kebutuhan fungsional dalam aplikasi Belajar Menulis Aksara Sunda ini adalah : 1. Sistem dapat menampilkan menu sejarah, rarangken, aksara, kuis, bantuan dan tentang aplikasi. 2. Sistem dapat menunjukan hasil benar atau salah dalam penulisan huruf aksara sunda dengan menggunakan Algoritma Point in Polygon, sehingga user dapat mengetahui kebenaran dalam penulisan huruf-huruf tersebut. 44
45 3. Admin dapat mengelola menu kuis yaitu input, delete dan update. 3.2.2 Analisis Kebutuhan Non-Fungsional Kebutuhan non fungsional bertujuan untuk mengetahui sistem seperti apa yang layak untuk diterapkan, perangkat lunak dan perangkat keras apa saja yang dibutuhkan serta siapa saja pengguna yang menggunakan sistem tersebut. Perangkat Keras (Hardware) yang digunakan untuk menunjang program yang dijalankan yaitu dengan spesifikasinya adalah pada tabel 3.1 : Tabel 3.1 Spesifikasi Kebutuhan Perangkat Keras Peneliti Perangkat Keras (Hardware) Processor Intel Core i3 Harddisk 500 GB RAM 6 GB Monitor 14 Perangkat lunak (Software) computer yang digunakan dalam membangun sistem ini adalah pada tabel 3.2 sebagai berikut : Tabel 3.2 Kebutuhan Perangkat Lunak Komputer Perangkat Lunak (Software) Operating System (OS) Windows 7 32bit Text Editor Eclipse Perancangan Sistem Rational Rose, Microsoft Visio 2017 Data base MySQL
46 Perangkat keras (Hardware) Smartphone Android yang digunakan dalam membangun sistem ini adalah pada tabel 3.3 sebagai berikut : Tabel 3.3 Spesifikasi Kebutuhan Minimal Perangkat Keras Smartphone Android Perangkat Keras (Hardware) CPU 850 MHz Memory 500 MB Layar 4 Perangkat lunak (Software) Smartphone Android yang digunakan dalam membangun sistem ini adalah pada tabel 3.4 sebagai berikut : Tabel 3.4 Spesifikasi Kebutuhan Minimal Perangkat Lunak Smartphone Android Perangkat Lunak (Software) Sistem Operasi Versi 4.0 (Ice Cream Sandwich) 3.3 Analisis Algoritma Point In Polygon Pada Penulisan Aksara Sunda Penggunaan algoritma point in polygon dalam tahapan penentuan hasil akhir benar atau salah pada saat penulisan huruf aksara sunda ini dilakukan dengan cara pencocokan data-data yang telah ada pada sistem. Pada dasarnya setiap tampilan yang ada, termasuk tampilan huruf merupakan gabungan-gabungan pixel yang membentuk suatu objek, sehingga akan menghasilkan hasil yang menentukan apakah pola / tulisan yang dibuat itu benar atau salah. Pada saat membentuk pola / huruf aksara sunda ini tidak bergantung pada tempat dimana kita memulai, tidak peduli apakah diawal bentuk huruf atau di akhir huruf, yang terpenting dalam membuat pola / bentuk huruf benar dan tidak terputus.
47 Start Input Point Input Poligon For i = 1 to Vertex.length; I++ Vertex = Poligon Vertex1 = vertex[i 1] Vertex2 = vertex[i] For i = 0 to vertex.length; I++ Vertex1.y == Vertex2.y and Vertex1.y == Point.y and Point.x > min(vertex1.x, Vertex2.x) and Point.x < max(vertex1.x, Vertex2.x) Y Boundary Point == Vertex[i] N N Y N Point.y > min(vertex1.y, Vertex2.y) and Point.y <= max(vertex1.y, Vertex2.y) and Point.x <= max(vertex1.x, Vertex2.x) and Vertex1.y!= Vertex2.y Vertex Y Xinters = (Point.y - Vertex1.y) * (Vertex2.x - Vertex1.x) / (Vertex2.y - Vertex1.y) + Vertex1.x Xinters == Point.x Y Boundary N N Vertex1.x == Vertex2.x Point.x <= Xinters Y Intersections++ Intersections % 2!= 0 Y Inside N Outside End Gambar 3.1 Flowchart Point in Polygon (Finley, R.D. 2007)
48 Adapun gambaran Algoritma Point in Polygon pada aplikasi Belajar menulis Huruf Aksara Sunda adalah sebgai berikut: Gambar 3.3 Contoh Grafik Pada Huruf NA Titik koordinat pada Gambar 3.3 adalah : Polygon : V1 = (2,5) V2 = (17,4) V3 = (17,7) V4 = (9,8) V5 = (13,20) V6 = (2,21) V7 = (2,18) V8 = (9,17) Point : P = (10,6)
49 Perhitungan manual Point In Polygon : 1. Point = (10,6) 2. Titik point dan vertex Iterasi ke-1 i = 0 10,6 = 2,5 F Iterasi ke-2 i = 1 10,6 = 17,4 F Iterasi ke-3 i = 2 10,6 = 17,7 F Iterasi ke-4 i = 3 10,6 = 9,8 F Iterasi ke-5 i = 4 10,6 = 13,20 F Iterasi ke-6 i = 5 10,6 = 2,21 F Iterasi ke-7 i = 6 10,6 = 2,18 F Iterasi ke-8 i = 7 10,6 = 9,17 F 3. Menghitung titik potong Iterasi ke 1, i = 1 Vertex1 = (2,5) Vertex2 = (17,4)
50 5 == 4 F 5 == 6 F AND F 10 > 2 T 10 < 17 T 6 > 4 T 6 <= 5 F AND F 10 <= 17 T 5!= 4 T Iterasi ke 2, i = 2 Vertex1 = (17,4) Vertex2 = (17,7) 4 == 7 F 4 == 6 F AND F 10 > 17 F 10 < 17 T 6 > 4 T 6 <= 7 T AND T 10 <= 17 T 4!= 7 T
51 Xinters = (6-4) x (17-17) / (7-4) + 17 = 2 x (0) / 3 + 17 = 0 / 3 + 17 = 0 + 17 = 17 17 == 17 T OR T 10 <= 17 T Intersection = 0 + 1 = 1 Iterasi ke 3, i = 3 Vertex1 = (17,7) Vertex2 = (9,8) 7 == 8 F 7 == 6 F AND F 10 > 9 T 10 < 17 T 6 > 7 F 6 <= 8 T AND F 10 <= 17 T 7!= 8 T
52 Iterasi ke 4, i = 4 Vertex1 = (9,8) Vertex2 = (13,20) 8 == 20 F 8 == 6 F AND F 10 > 9 T 10 < 13 T 6 > 8 F 6 <= 20 T AND F 10 <= 13 T 8!= 20 T Iterasi ke 5, i = 5 Vertex1 = (13,20) Vertex2 = (2,21) 20 == 21 F 20 == 6 F AND F 10 > 2 T 10 < 13 T
53 6 > 20 F 6 <= 21 T AND F 10 <= 13 T 20!= 21 T Iterasi ke 6, i = 6 Vertex1 = (2,21) Vertex2 = (2,18) 21 == 18 F 21 == 6 F AND F 10 > 2 T 10 < 2 F 6 > 18 F 6 <= 21 T AND F 10 <= 2 F 21!= 18 T Iterasi ke 7, i = 7 Vertex1 = (2,18) Vertex2 = (9,17) 18 == 17 F 18 == 6 F AND F
54 10 > 2 T 10 < 9 F 6 > 17 F 6 <= 18 T AND F 10 <= 9 F 18!= 17 T 4. Intersections = 1 Intersection % 2!= 0 T Point = Inside Poligon 3.4 Perancangan Sistem Analisis perancangan sistem menggambarkan proses kegiatan yang akan diterapkan dalam sebuah sistem dan menjelaskan kebutuhan yang diperlukan sistem. Analisis yang dilakukan dimodelkan dengan menggunakan UML (Unified Modeling Language). Tahap tahap pemodelan dalam analisis tersebut antara lain usecase diagram, activity diagram, class diagram, sequence diagram. 3.4.1 Usecase Diagram Usecase diagram menggambarkan aktor sistem. Pada aplikasi ini ada 2 aktor, yaitu Admin sebagai admin yang mengelola data kuis dan user sebagai pengguna aplikasi pembelajaran aksara sunda. Perancangan usecase diagram dapat dilihat pada gambar dibawah ini :
55 Lihat Sejarah Lihat Rarangken <<include>> Menulis Aksara Pencocokan Titik Koordinat User <<extend>> Admin Kuis Login Sistem Tentang Bantuan Gambar 3.4 Use Case Diagram Pembelajaran Aksara Sunda Berikut adalah skenario proses fungsi fungsi Use Case : 1. Skenario Use Case Lihat Sejarah Fungsi ini digunakan oleh user untuk melihat sejarah aksara sunda. Tabel 3.5 Scenario Use Case Lihat Sejarah Identifikasi ID Use Case 1 Nama Use Case Lihat Sejarah Tujuan Melihat Sejarah Aksara Sunda. Deskripsi Aktor User Skenario Utama
56 Kondisi Awal Aksi Aktor 1. User memilih menu sejarah Kondisi Akhir User berada di halaman utama Reaksi Sistem 2. Menampilkan sejarah aksara sunda berupa deskripsi dan gambar. 1. Aplikasi gagal menampilkan sejarah aksara sunda. 2. Aplikasi berhasil menampilkan sejarah aksara sunda. 2. Skenario Use Case Lihat Rarangken Fungsi ini digunakan oleh user untuk melihat rarangken aksara sunda. Tabel 3.6 Scenario Use Case Lihat Rarangken Identifikasi ID Use Case 2 Nama Use Case Lihat Rarangken Tujuan Melihat Rarangken Aksara Sunda. Deskripsi Aktor User Skenario Utama Kondisi Awal User berada di halaman utama Aksi Aktor Reaksi Sistem 1. User memilih menu 2. Menampilkan rarangken aksara sunda. rarangken 3. User memilih jenis rarangken 4. Menampilkan jenis rarangken aksara sunda berupa deskripsi dan gambar. Kondisi Akhir 1. Aplikasi gagal menampilkan rarangken aksara sunda. 2. Aplikasi berhasil menampilkan rarangken aksara sunda.
57 3. Skenario Use Case Menulis Aksara Fungsi ini digunakan oleh user untuk menulis aksara sunda. Tabel 3.7 Scenario Use Case Menulis Aksara Sunda Identifikasi ID Use Case 3 Nama Use Case Menulis Aksara Tujuan Menulis Aksara Sunda. Deskripsi Aktor User Skenario Utama Kondisi Awal User berada di halaman utama Aksi Aktor Reaksi Sistem 1. User memilih menu 2. Menampilkan aksara sunda berupa aksara aksara dasar, aksara swara, konsonan dan angka. 3. User memilih jenis 4. Menampilkan huruf dari jenis aksara aksara sunda sunda 5. User memilih huruf 6. Menampilkan cara penulisan huruf dan canvas untuk menirukan penulisan huruf. 7. Menulis pola huruf 8. Menampilkan pola huruf yang ditulis 9. Memilih tombol Cek 10. Mengecek pola huruf apakah di dalam area polygon 11. Menampilkan notifikasi apakah pola huruf yang ditulis benar atau salah
58 Kondisi Akhir 1. Aplikasi gagal menampilkan huruf aksara sunda 2. Aplikasi berhasil menampilkan huruf aksara sunda. 3. Aplikasi gagal mengecek pola huruf aksara sunda yang ditulis. 4. Aplikasi berhasil mengecek pola huruf aksara sunda yang ditulis. 4. Skenario Use Case Kuis Fungsi ini digunakan oleh user untuk mengerjakan kuis. Tabel 3.8 Scenario Use Case Kuis Identifikasi ID Use Case 4 Nama Use Case Kuis Tujuan Mengerjakan Kuis. Deskripsi Aktor User Skenario Utama Kondisi Awal User berada di halaman utama Aksi Aktor Reaksi Sistem 1. User memilih kuis 2. Menampilkan kuis dengan pertanyaan sejarah dan jawaban dalam bentuk multiple choice. 3. Menjawab pertanyaan 4. Menekan tombol next 5. Memproses hasil jawaban 6. Menampilkan hasil kuis berupa skor
59 Kondisi Akhir 1. Aplikasi gagal menampilkan kuis. 2. Aplikasi berhasil menampilkan kuis. 5. Skenario Use Case Tentang Fungsi ini digunakan oleh user untuk melihat tentang aplikasi. Tabel 3.9 Scenario Use Case Tentang Identifikasi ID Use Case 5 Nama Use Case Tentang Tujuan Melihat Tentang Aplikasi. Deskripsi Aktor User Skenario Utama Kondisi Awal User berada di halaman utama Aksi Aktor Reaksi Sistem 1. User memilih menu 2. Menampilkan tentang aplikasi berupa tentang deskripsi. Kondisi Akhir 1. Aplikasi gagal menampilkan tentang. 2. Aplikasi berhasil menampilkan tentang. 6. Skenario Use Case Bantuan Fungsi ini digunakan oleh user untuk melihat bantuan. Tabel 3.10 Scenario Use Case Bantuan Identifikasi ID Use Case 6 Nama Use Case Bantuan Tujuan Melihat Bantuan.
60 Aktor Kondisi Awal Aksi Aktor 1. User memilih menu bantuan Kondisi Akhir Deskripsi User Skenario Utama User berada di halaman utama Reaksi Sistem 2. Menampilkan bantuan aplikasi berupa deskripsi. 1. Aplikasi gagal menampilkan bantuan. 2. Aplikasi berhasil menampilkan bantuan. 7. Skenario Use Case Login Sistem Fungsi ini digunakan oleh admin untuk masuk ke sistem. Tabel 3.11 Scenario Use Case Login Sistem Identifikasi ID Use Case 7 Nama Use Case Login Sistem Tujuan Masuk ke sistem. Deskripsi Aktor Admin Skenario Utama Kondisi Awal Admin berada di halaman login Aksi Aktor Reaksi Sistem 1. Admin mengisi 2. Mengecek valid atau tidaknya data username dan masukkan. password. 3. Jika Data Masukkan valid maka akan menampilkan sistem utama. 4. Admin memasukan 5. Mengecek valid atau tidaknya data data seperti soal,
61 jawaban dan skor. masukkan. 6. Jika Data Masukkan valid maka data akan disimpan ke dalam database. Kondisi Akhir 1. Aplikasi gagal masuk ke sistem utama. 2. Aplikasi berhasil masuk ke sistem utama. 3. Aplikasi gagal memasukan data ke dalam database. 4. Aplikasi berhasil memasukan data ke dalam database. 3.4.2 Activity Diagram Activity Diagram menggambarkan berbagai alur proses bisnis secara keseluruhan atau aktivitas secara umum dalam sistem yang sedang dirancang, bagaimana masing-masing alur berawal, decision / keputusan yang mungkin terjadi dan bagaimana alur proses tersebut berakhir. Berikut ini adalah activity diagram yang di lakukan User :
62 1. Activity Diagram Lihat Sejarah User Sistem Start Pilih Menu Sejarah Tampilkan Halaman Sejarah End Gambar 3.5 Activity Diagram Lihat Sejarah 2. Activity Diagram Lihat Rarangken User Sistem Start Pilih Menu Rarangken Tampilkan Menu Rarangken Pilih Jenis Rarangken Tampilkan Jenis Rarangken End Gambar 3.6 Activity Diagram Lihat Rarangken
63 3. Activity Diagram Tentang User Sistem Start Pilih Menu Tentang Menampilkan Halaman Tentang End 4. Activity Diagram Kuis Gambar 3.7 Activity Diagram Tentang User Sistem Start Pilih Menu Kuis Menampilkan Halaman Kuis Menjawab Pertanyaan Menekan Tombol Next Memproses Hasil Jawaban Menampilkan Hasil Kuis End Gambar 3.8 Activity Diagram Kuis
64 5. Activity Diagram Bantuan User Sistem Start Pilih Menu Bantuan Menampilkan Halaman Bantuan End 6. Activity Diagram Menulis Aksara Gambar 3.9 Activity Diagram Bantuan User Sistem Start Pilih Menu Aksara Menampilkan Menu Aksara Pilih Jenis Aksara Menampilkan Jenis Aksara Pilih Huruf Menampilkan Halaman Huruf Menulis Pola Huruf Memilih Tombol Cek Pengecekan Pola Huruf Apakah Di Dalam Area Polygon TIDAK YA Tampilan Salah Tampilan Benar End Gambar 3.10 Activity Diagram Menulis Aksara
65 Berikut ini adalah activity diagram yang di lakukan Admin : 1. Activity Diagram Login Sistem Admin Sistem Start Masukan Username dan Password Validasi Username dan Password Tidak Ya Menu Utama Memasukan Data Soal, Jawaban dan Skor Validasi Data Masukan Tidak Ya Data Masukan Disimpan ke Database End Gambar 3.11 Activity Diagram Login Sistem
66 3.4.3 Class Diagram Class diagram menggambarkan struktur sistem aplikasi dari segi pendefinisian kelas kelas yang akan dibuat untuk membangun sistem tersebut. Gambar 3.13 Class Diagram Pembelajaran Aksara Sunda 3.4.4 Sequence Diagram Sequence diagram biasa digunakan untuk menggambarkan scenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event (proses) untuk menghasilkan output tertentu.
67 1. Sequence Diagram Login Sistem : Admin : Login 1. input username dan password : admin 2. validasi login 3. mengecek valid tidaknya data 4. menampilkan halaman admin 5. menampilkan halaman admin Gambar 3.14 Sequence Diagram Login Sistem 2. Sequence Diagram Kelola Kuis : Admin : Data Kuis : data kuis 1. pilih menu kuis 2. kelola soal 3. kelola jawaban 4. kelola skor 5. menampilkan data kuis 6. menampilkan data kuis Gambar 3.15 Sequence Diagram Kelola Kuis
68 3. Sequence Diagram Lihat Sejarah : sejarah : User : Aplikasi 1. membuka aplikasi 2. tampilkan halaman sejarah 3. menampilkan halaman sejarah 4. menampilkan halaman sejarah Gambar 3.16 Sequence Diagram Lihat Sejarah 4. Sequence Diagram Lihat Rarangken : User : Aplikasi : rarangken : jenis rarangken 1. membuka aplikasi 2. tampilkan halaman rarangken 3. menampilkan halaman rarangken 4. menampilkan halaman rarangken 5. tampilkan jenis rarangken 6. menampilkan jenis rarangken 7. menampilkan jenis rarangken 8. menampilkan jenis rarangken Gambar 3.17 Sequence Diagram Lihat Rarangken
69 5. Sequence Diagram Tentang : User 1. membuka aplikasi : Aplikasi : tentang 2. tampilkan halaman tentang 3. menampilkan halaman tentang 4. menampilkan halaman tentang Gambar 3.18 Sequence Diagram Tentang 6. Sequence Diagram Kuis : User : Aplikasi : kuis 1. membuka aplikasi 2. tampilkan kuis 3. menampilkan kuis 4. menjawab pertanyaan 5. validasi jawaban 6. menampilkan hasil kuis Gambar 3.19 Sequence Diagram Kuis
70 7. Sequence Diagram Bantuan : User 1. membuka aplikasi : Aplikasi : bantuan 2. tampilkan halaman bantuan 3. menampilkan halaman bantuan 4. menampilkan halaman bantuan Gambar 3.20 Sequence Diagram Bantuan 8. Sequence Diagram Menulis Aksara : User : Aplikasi : aksara : jenis aksara : pola huruf 1. membuka aplikasi 2. tampilkan menu aksara 3. memilih jenis aksara 4. penulisan pola huruf 5. pengecekan pola huruf 6. hasil pengecekan pola huruf benar atau salah Gambar 3.21 Sequence Diagram Menulis Aksara
71 3.5 Perancangan Interface Antar muka merupakan media komunikasi antara pemakai dengan sistem komputer. Hasil perancangan antarmuka pemakai akan memudahkan proses implementasi. Merupakan suatu bentuk tampilan dari program yang akan dibuat untuk kebutuhan interface dengan user. Berikut merupakan perancangan form yang dibuat : 1. Tampilan menu utama Button1 Button2 Button3 Button4 Button5 Button6 Gambar 3.22 Rancangan Menu Utama Berikut adalah komponen yang terdapat di menu utama : Tabel 3.13 Daftar Komponen Menu Utama No. Komponen Nama Deskripsi 1 Button1 Sejarah Digunakan sebagai tombol untuk melihat sejarah aksara sunda 2 Button2 Aksara Digunakan sebagai tombol untuk menulis aksara sunda
72 3 Button3 Rarangken Digunakan sebagai tombol untuk melihat rarangken aksara sunda 4 Button4 Kuis Digunakan sebagai tombol untuk mengerjakan kuis 5 Button5 Bantuan Digunakan sebagai tombol untuk melihat bantuan aplikasi 6 Button6 Tentang Digunakan sebagai tombol untuk melihat tentang aplikasi 2. Tampilan menu sejarah Imageview Textview1 Gambar 3.23 Rancangan Tampilan Sejarah Berikut adalah komponen yang terdapat di tampilan sejarah: Tabel 3.14 Daftar Komponen Tampilan Sejarah No. Komponen Nama Komponen Deskripsi 1 Imageview - Digunakan untuk menampilkan gambar
73 2 Textview1 - Digunakan untuk menampilkan deskripsi seajrah aksara sunda 3. Tampilan penulisan huruf aksara sunda Imageview Textview1 Button1 Content Gambar 3.24 Rancangan Penulisan Huruf Aksara Sunda Berikut adalah komponen yang terdapat di tampilan penulisan : Tabel 3.15 Daftar Komponen Rancangan Penulisan Huruf Aksara Sunda No. Komponen Nama Komponen Deskripsi 1 Imageview - Digunakan untuk menampilkan animasi cara penulisan aksara sunda 2 TextView1 - Digunakan untuk menampilkan huruf aksara sunda
74 3 Button1 Cek Digunakan untuk mengecek input pola yang diberikan pada content 4 Content - Digunakan user untuk menulis pola huruf. 4. Tampilan menu rarangken Imageview Textview1 Textview2 Gambar 3.25 Rancangan Menu Rarangken Berikut adalah komponen yang terdapat di menu rarangken : Tabel 3.16 Daftar Komponen Menu Rarangken No. Komponen Nama Komponen Deskripsi 1 Imageview - Digunakan untuk menampilkan gambar rarangken 2 Textview1 - Digunakan untuk menampilkan nama rarangken
75 3 Textview2 - Digunakan untuk menampilkan deskripsi rarangken 5. Tampilan menu kuis Textview1 Radiobutton Button1 Gambar 3.26 Rancangan Menu Kuis Berikut adalah komponen yang terdapat di menu kuis : Tabel 3.17 Daftar Komponen Menu Kuis No. Komponen Nama Deskripsi 1 TextView1 - Digunakan untuk menampilkan soal kuis 2 Radiobutton - Digunakan untuk menampilkan pilihan jawaban 3 Button1 Next Digunakan sebagai tombol untuk melanjutkan ke soal berikutnya
76 6. Tampilan menu bantuan Textview1 Imageview1 Gambar 3.27 Rancangan Menu Bantuan Berikut adalah komponen yang terdapat di menu bantuan: Tabel 3.18 Daftar Komponen Menu Bantuan No. Komponen Nama Komponen Deskripsi 1 Textview1 - Digunakan untuk menampilkan nama menu di aplikasi 2 Imageview1 - Digunakan untuk menampilkan gambar tampilan menu di aplikasi
77 7. Tampilan menu tentang Imageview1 Textview1 Gambar 3.28 Rancangan Menu Tentang Berikut adalah komponen yang terdapat di menu tentang: Tabel 3.19 Daftar Komponen Menu Tentang No. Komponen Nama Komponen Deskripsi 1 Textview1 - Digunakan untuk menampilkan nama pembuat aplikasi 2 Imageview1 - Digunakan untuk menampilkan gambar pembuat aplikasi