BAB VI PENUTUP 6.1 Kesimpulan Berdasarkan dari pembahasan-pembahasan pada bab bab sebelumnya, maka dapat ditarik kesimpulan dari Tugas Akhir ini : 1. Pembangunan Aplikasi Permainan Web Pembelajaran Aksara Jawa HANACARAKU Menggunakan Teknologi HTML5 dan CSS3 yang telah berhasil dibuat dan dibangun dapat digunakan sebagai media pembelajaran dan pelestarian Aksara Jawa melalui audio-visual, animasi serta permainan yang ada. 2. Pembangunan Aplikasi Permainan Web Pembelajaran Aksara Jawa HANACARAKU Menggunakan Teknologi HTML5 dan CSS3 memberikan tantangan tersendiri dalam pembelajaran Aksara Jawa dengan tingkatan kesulitan dalam permainan yang ada. 6.2 Saran Beberapa saran dan masukan yang dapat disampaikan penulis terhadap pembuatan Aplikasi Web HANACARAKU ini di masa yang akan datang adalah : 1. Aplikasi diharapkan bisa dikembangkan lebih lanjut dengan menambah tools baru serta permainan yang lebih beragam agar dapat lebih menarik minat dalam belajar Aksara Jawa. 2. Aplikasi diharapkan bisa dikembangkan lebih lanjut dengan integrasi yang ada sehingga 74
aplikasi HANACARAKU dapat digunakan melalui device mobile seperti handphone maupun komputer tablet. 3. Aplikasi diharapkan bisa dikembangkan lebih lanjut dengan menambahkan antarmuka berbahasa asing, dalam hal ini bahasa Inggris, agar dapat menarik minat dari pengguna internasional yang memiliki ketertarikan terhadap budaya Indonesia, khususnya pada Aksara Jawa. 75
DAFTAR PUSTAKA Abdullah, 2003, Tip & Trik Desain Web Dinamis dengan CSS dan JavaScript, Jakarta: Elex Media Komputindo. Alwi, Hasan, 2003, Kamus Besar Bahasa Indonesia, Jakarta: Balai Pustaka. Anneahira.com, 2012, Kebudayaan Daerah, http://www.anneahira.com/kebudayaan-daerah.htm, diakses tanggal 14 Oktober 2012. BeritaTeknologi.com, 2012, Gamelan Toetoel, Aplikasi Android Buatan Anak Negeri untuk Melestarikan Kesenian Gamelan, http://www.beritateknologi.com/gamelan-toetoel- aplikasi-android-buatan-anak-negeri-untuk- melestarikan-kesenian-gamelan/, diakses 13 Oktober 2012. Boss, R. W., 2006, Client-Server Technology, American Library Association, pp.1-4. Bradford,Anselm, and Haine, Paul, 2011, HTML5 Mastery: Semantics, Standards, and Styling, New York. Cassidy, Ryan, 2012, HTML5 Game Engine A Major Qualifying Project Report, Institute, Bachelor of Science. Worcester Polytechnic Cederholm, Dan, 2010, CSS3 for Web Designers, New York. Darsono, Max, dkk., 2002. Semarang : CV. IKIP Semarang Press. Belajar dan Pembelajaran. Deacon, J., 2009, Model-View-Controller (MVC) Architecture, jdl.co.uk/briefings/index.html#mvc, tanggal 13 Oktober 2012. http://www. diakses
Deptan, 2004, Materi PHP, http:// www.deptan.go.id/pusdatin /admin/rb/programming/materi%2520php.pdf, diakses tanggal 11 Oktober 2012. Djupha, Felix, 2012, Aplikasi HANACARAKA v.1.0 belajar menulis dan membaca AKSARA JAWA, http://jupahaphap.blogspot.com/2012/11/aplikasi-hanacarakav10-belajar-menulis.html, diakses tanggal 9 Desember 2012. EducastStudio.com, 2013, Marbel Hanacaraka, http://blog.educastudio.com/222/marbelhanacaraka.php, diakses tanggal 24 April 2013. EllisLab, 2010, CodeIgniter User Guide Version 1.7, http://codeigniter.com/, diakses tanggal 11 Oktober 2012. Ena, Ouda Teda. 2001. Membuat Media Pembelajaran Interaktif Dengan Piranti Lunak Presentasi. Yogyakarta: Indonesian Language and Culture Intensive Course Universitas Sanata Dharma. Lubbers, Peter et al. (2010). Pro HTML5 programming : Powerful APIs for Richer Internet Apllication Development. Apress Maffeis, S., 2005, Client-Server Computing, media.wiley.com/assets /152/06/computer.pdf, diakses tanggal 11 Oktober 2012. Nisyacin, 2012, Huruf/Aksara Jawa dan Sejarahnya, http://nisyacin.blogdetik.com/2012/06/03/hurufaksara-jawa-dan-sejarahnya/, diakses tanggal 11 Oktober 2012. Rahayu, S., 2008, Sekapur Sirih Tentang Framework CodeIgniter, Open Knowledge and Education, 1-7.
Riyanto, Slamet, 2009, Membuat Web Portal Multi Bahasa Joomla 1.5X + CD. Elex (1st Edition), Jakarta: Elex Media Komputindo. Prasetya, Alfonsus Carol Willy, 2012, Pembangunan Aplikasi Web Belajar Mewarnai Untuk Anak Menggunakan Teknologi HTML5, CSS3 dan Javascript (BERWARNA), Teknik Informatika, Teknologi Industri, Universitas Atama Jaya, Yogyakarta. Sawicki, Bartos and Chaber,Bartosz, 2012, 3D Mesh Viewer Using HTML5 Technology, PRZEGL, ad Elektrotechniczny (Electrical Review), ISSN 0033-2097, R. 88 NR 5a/2012. Sofwan, A., 2007, Belajar PHP dengan Framework CodeIgniter, ilmukomputer. org/wpcontent/uploads/2010/05/belajar-php-denganframework-code-igniter.pdf, diakses tanggal 9 Oktober 2012. Tim Google, 2010, 20 Things I Learned About Browsers and the Web, http://www.20thingsilearned.com/in- ID, diakses tanggal 12 Oktober 2012. Wempen, Faithe, 2011, HTML5 Step by Step. California: Octal Publishing, Inc.
LAMPIRAN
SKPL SPESIFIKASI KEBUTUHAN PERANGKAT LUNAK Pembangunan Aplikasi Permainan Web Pembelajaran Aksara Jawa Menggunakan Teknologi HTML5 dan CSS3 Untuk : Universitas Atma Jaya Yogyakarta Dipersiapkan oleh: Albertus Andra Agusta / 5973 Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Atma Jaya Yogyakarta Nomor Dokumen Halaman Program Studi Teknik Informatika SKPL-HANACARAKU 1/19
DAFTAR PERUBAHAN Revisi Deskripsi INDEX TGL Ditulis oleh Diperik sa oleh Disetuj ui oleh - A B C D E F G Program Studi Teknik Informatika SKPL HANACARAKU 2/ 19
Daftar Halaman Perubahan Halaman Revisi Halaman Revisi Program Studi Teknik Informatika SKPL HANACARAKU 3/ 19
Daftar Isi 1 Pendahuluan... 6 1.1Tujuan... 6 1.2Lingkup Masalah... 6 1.3Definisi, Akronim dan Singkatan... 6 1.4Referensi... 7 1.5Deskripsi umum (Overview)... 7 2 Deskripsi Kebutuhan... 8 2.1Perspektif produk... 8 2.2Fungsi Produk... 9 2.3Karakteristik Pengguna... 10 2.4Batasan-batasan... 11 2.5Asumsi dan Ketergantungan... 11 3 Kebutuhan khusus... 11 3.1Kebutuhan antarmuka eksternal... 11 3.1.1 Antarmuka pemakai...11 3.1.2 Antarmuka perangkat keras...11 3.1.3 Antarmuka perangkat lunak...12 3.1.4 Antarmuka Komunikasi...12 3.2Kebutuhan fungsionalitas Perangkat Lunak... 13 3.2.1 Use Case Diagram...13 4 Spesifikasi Rinci Kebutuhan... 13 4.1Spesifikasi Kebutuhan Fungsionalitas... 13 4.1.1 Use case Spesification : Login...13 5 Entity Relationship Diagram (ERD)... 19 Program Studi Teknik Informatika SKPL HANACARAKU 4/ 19
Daftar Gambar 1. Arsitektur Perangkat Lunak HANACARAKU...9 2. Use Case Diagram HANACARAKU... 13 3. Entity Relationship Diagram...19 Program Studi Teknik Informatika SKPL HANACARAKU 5/ 19
1 Pendahuluan 1.1 Tujuan Dokumen Spesifikasi Kebutuhan Perangkat Lunak (SKPL) ini merupakan dokumen spesifikasi kebutuhan perangkat lunak HANACARAKU untuk mendefinisikan kebutuhan perangkat lunak yang meliputi antarmuka eksternal (antarmuka antara sistem dengan sistem lain perangkat lunak dan perangkat keras, dan pengguna), tempat penyimpanan yang dibutuhkan, serta keakuratan), dan atribut (feature-feature tambahan yang dimiliki sistem), serta mendefinisikan fungsi perangkat lunak. SKPL-HANACARAKU ini juga mendefinisikan batasan perancangan perangkat lunak. 1.2 Lingkup Masalah Perangkat Lunak HANACARAKU dikembangkan dengan tujuan untuk : 1. Menangani Login Administrator. 2. Menangani Pengelolaan Data Soal. 3. Menangani Pengenalan Aksara Jawa. 4. Menangani Puzzle Aksara Jawa. 5. Menangani Kuis Aksara Jawa. Dan berjalan pada lingkungan dengan platform Web yang mendukung HTML5 dan CSS3. 1.3 Definisi, Akronim dan Singkatan Daftar definisi akronim dan singkatan : Keyword/Phrase Definisi SKPL Merupakan spesifikasi kebutuhan dari perangkat lunak yang akan dikembangkan. SKPL- Kode yang merepresentasikan kebutuhan pada Program Studi Teknik Informatika SKPL HANACARAKU 6/ 19
HANACARAKU-XXX HANACARAKU dimana XXX merupakan nomor fungsi produk. Internet Internet merupakan istilah umum yang dipakai untuk menunjuk Network global yang terdiri dari komputer dan layanan servis dengan sekitar 30 sampai 50 juta pemakai komputer dan puluhan layanan informasi termasuk e-mail, FTP, dan World Wide Web. Server Komputer yang menyediakan sumber daya bagi klien yang terhubung melalui jaringan. Client Komputer yang menghubungi server melalui jaringan HANACARAKU Nama Aplikasi yang akan dikembangkan 1.4 Referensi Referensi yang digunakan pada perangkat lunak tersebut adalah: 1. Bennet Simon, McRobb Steve, Farmer Ray, Object- Oriented System Analysis and Design Using UML, McGraw-Hill Companies, 2002. 2. Agusta, Albertus Andra, Spesifikasi Kebutuhan Perangkat Lunak (SKPL) CSDS, Universitas Atma Jaya Yogyakarta, 2012. 1.5 Deskripsi umum (Overview) Secara umum dokumen SKPL ini terbagi atas 3 bagian utama. Bagian utama berisi penjelasan mengenai dokumen SKPL tersebut yang mencakup tujuan pembuatan SKPL, ruang lingkup masalah dalam pengembangan perangkat lunak tersebut, definisi, referensi dan deskripsi umum tentang dokumen SKPL ini. Program Studi Teknik Informatika SKPL HANACARAKU 7/ 19
Bagian kedua berisi penjelasan umum tentang perangkat lunak HANACARAKU yang akan dikembangkan, mencakup perspektif produk yang akan dikembangkan, fungsi produk perangkat lunak, karakteristik pengguna, batasan dalam penggunaan perangkat lunak dan asumsi yang dipakai dalam pengembangan perangkat lunak HANACARAKU tersebut. Bagian ketiga berisi penjelasan secara lebih rinci tentang kebutuhan perangkat lunak HANACARAKY yang akan dikembangkan. 2 Deskripsi Kebutuhan 2.1 Perspektif produk HANACARAKU merupakan perangkat lunak yang dikembangkan sebagai aplikasi pembelajaran Aksara Jawa pada anak dan remaja pada sebuah browser yang berjalan pada komputer. Sistem ini menangani pengelolaan login administrator, pengelolaan data kuis, pengenalam Aksara Jawa, permainan puzzle serta kuis Aksara Jawa. Perangkat lunak HANACARAKU ini berjalan pada lintas platform sistem operasi, dan dibuat menggunakan bahasa pemrograman html. Perangkat lunak ini dapat diakses melalui desktop, diakses melalui layanan web dengan menggunakan aplikasi web browser apapun yang mendukung teknologi HyperText Markup Language 5(HTML5), Cascading Style Sheet versi 3(CSS3) dan Javascript. Pengguna akan berinteraksi dengan sistem melalui antarmuka GUI (Graphical User Interface). Pada sistem ini, seperti terlihat pada gambar 1, arsitektur perangkat lunak yang digunakan berupa client-server, di mana semua data disimpan di server. User dapat Program Studi Teknik Informatika SKPL HANACARAKU 8/ 19
mengakses data yang ada di server tersebut secara online dengan memanggil web service pada website yang tersedia di web server. Gambar 1. Arsitektur Perangkat lunak HANACARAKU 2.2 Fungsi Produk Fungsi produk perangkat lunak HANACARAKU adalah sebagai berikut : 1. Fungsi Login (SKPL-HANACARAKU-001). Merupakan fungsi yang digunakan oleh Administrator untuk masuk ke sistem dan mendapatkan hak akses sesuai dengan role yang dimiliki. 2. Fungsi Pengelolaan Data Soal (SKPL-HANACARAKU- 002). Merupakan fungsi yang digunakan oleh Administrator untuk mengelola data kuis dalam database yang meliputi : Program Studi Teknik Informatika SKPL HANACARAKU 9/ 19
a. Fungsi Tambah Soal(SKPL-HANACARAKU-002-01). Merupakan fungsi yang digunakan untuk menambahkan kuis yang baru. b. Fungsi Edit Soal (SKPL-HANACARAKU-002-02). Merupakan fungsi yang digunakan untuk mengubah data soal, baik soal, jawaban maupun level. c. Fungsi Hapus Soal (SKPL-HANACARAKU-002-03). Merupakan fungsi yang digunakan untuk menghapus kuis. d. Fungsi Tampil Soal (SKPL-HANACARAKU-002-04). Merupakan fungsi yang digunakan untuk menampilkan kuis. 3. Fungsi Pengenalan Aksara Jawa (SKPL-HANACARAKU- 003). Merupakan fungsi yang berfungsi untuk menampilkan pengenalan seputar Aksara Jawa. 4. Fungsi Puzzle Aksara Jawa (SKPL-HANACARAKU-004). Merupakan fungsi yang digunakan oleh user untuk menyusun Aksara Jawa berdasarakan urutan yang sesuai. 5. Fungsi Kuis Aksara Jawa (SKPL-HANACARAKU-005). Merupakan fungsi yang digunakan oleh user untuk menebak Aksara Jawa yang ditampilkan dalam batas waktu tertentu. 2.3 Karakteristik Pengguna Karakteristik dari pengguna perangkat lunak HANACARAKU adalah sebagai berikut : 1. Memahami pengoperasian Perangkat komputer (PC, Laptop, dll). Program Studi Teknik Informatika SKPL HANACARAKU 10/ 19
2. Mengerti tentang internet dan penggunaannya menggunakan browser. 2.4 Batasan-batasan Batasan-batasan dalam pengembangan perangkat lunak HANACARAKU tersebut adalah : 1. Kebijaksanaan Umum Berpedoman pada tujuan dari pengembangan perangkat lunak HANACARAKU. 2. Keterbatasan perangkat keras Dapat diketahui kemudian setelah sistem ini berjalan (sesuai dengan kebutuhan). 2.5 Asumsi dan Ketergantungan Sistem ini dapat dijalankan pada PC/Laptop yang memiliki web browser yang mendukung penggunaan teknologi HTML5 dan CSS3 untuk pengaksesan melalui web. 3 Kebutuhan khusus 3.1 Kebutuhan antarmuka eksternal Kebutuhan antar muka eksternal pada perangkat lunak HANACARAKU meliputi kebutuhan antarmuka pemakai, antarmuka perangkat keras, antarmuka perangkat lunak, antarmuka komunikasi. 3.1.1 Antarmuka pemakai Pengguna berinteraksi dengan antarmuka yang ditampilkan dalam bentuk form-form. 3.1.2 Antarmuka perangkat keras Antarmuka perangkat keras yang digunakan dalam perangkat lunak HANACARAKU adalah: 1. Perangkat komputer (PC, Laptop, dll). Program Studi Teknik Informatika SKPL HANACARAKU 11/ 19
3.1.3 Antarmuka perangkat lunak Perangkat lunak yang dibutuhkan untuk mengoperasikan perangkat lunak HANACARAKU di sisi server adalah sebagai berikut : 1. Nama : MySQL 5.5.16 Sumber : MySQL Sebagai database management system (DBMS) yang digunakan untuk penyimpan data di sisi server. 2. Nama : Windows 7 Sumber : Microsoft Sebagai sistem operasi untuk server. 3. Nama : Apache 2.2.17 Sumber : Apache Sebagai web server. Sedangkan perangkat lunak yang dibutuhkan untuk mengoperasikan perangkat lunak HANACARAKU di sisi client adalah sebagai berikut : 1. Nama : Microsoft Windows 95/98/NT/2000/XP, Linux, UNIX, MacOS, dll. Sebagai sistem operasi untuk pengguna umum. 2. Nama : Google Chrome, Opera, Safari, Mozilla Firefox, dll. Sebagai penjelajah situs (web browser) berbasis grafis atau teks yang mendukung teknologi HTML5 dan CSS3. 3.1.4 Antarmuka Komunikasi Antarmuka komunikasi perangkat lunak menggunakan protocol HTTP. HANACARAKU Program Studi Teknik Informatika SKPL HANACARAKU 12/ 19
Pengenalan Aksara Jawa User Kuis Aksara Jawa Puzzle Aksara Jawa <<include>> Login Admin Pengelolaan Data Kuis Program Studi Teknik Informatika SKPL HANACARAKU 13/ 19
4. Basic Flow 1.Use Case ini dimulai ketika aktor memilih untuk melakukan login. 2.Sistem menampilkan antarmuka untuk login. 3.Aktor memasukkan id dan password. 4.Sistem memeriksa id dan password yang diinputkan aktor. E-1 Password atau id user tidak sesuai 5.Sistem memberikan akses ke aktor. 6.Use Case ini selesai. 5. Alternative Flow none 6. Error Flow E-1 Password atau nama user tidak sesuai 1. Sistem menampilkan peringatan bahwa id user atau password tidak sesuai. 2. Kembali ke Basic Flow langkah ke 3. 7. PreConditions none 8. PostConditions 1. Aktor memasuki sistem dan dapat menggunakan fungsifungsi pada sistem. 4.1.2 Use case Spesification : Pengelolaan Data Soal 1. Brief Description Use Case ini digunakan oleh aktor, dalam ini admin, untuk mengelola data dari soal aksara jawa. Aktor dapat melakukan entry data soal, edit data soal, hapus data soal dan display data soal. 2. Primary Actor 1. Admin 3. Supporting Actor None Program Studi Teknik Informatika SKPL HANACARAKU 14/ 19
4. Basic Flow 1. Use Case ini dimulai ketika aktor memilih untuk melakukan pengelolaan data soal. 2. Sistem memberikan pilihan untuk melakukan entry data soal, edit data soal, hapus data soal atau display data soal. 3. Aktor memilih untuk melakukan entry data soal. A-1 Aktor memilih untuk melakukan edit data soal A-2 Aktor memilih untuk melakukan hapus data soal A-3 Aktor memilih untuk melakukan display data soal 4. Aktor menginputkan data soal. 5. Aktor meminta sistem untuk menyimpan data soal yang telah diinputkan. 6. Sistem mengecek data soal yang telah diinputkan. E-1 Data soal yang diinputkan aktor salah 7. Sistem menyimpan data soal ke database. 8. Use Case selesai. 5. Alternative Flow A-1 Aktor memilih untuk melakukan soal data kuis 1. Sistem menampilkan data soal. 2. Aktor mengedit data soal yang sudah ditampilkan. 3. Aktor meminta sistem untuk menyimpan data soal yang telah diedit. 4. Sistem melakukan pengecekan terhadap data soal yang telah diedit. E-2 Data soal yang telah diedit salah 5. Sistem meyimpan data soal yang telah diedit ke database. 6. Berlanjut ke Basic Flow langkah ke 8. A-2 Aktor memilih untuk melakukan hapus data soal 1. Sistem menampilkan data soal. 2. Aktor menghapus data soal yang sudah dipilih. Program Studi Teknik Informatika SKPL HANACARAKU 15/ 19
3. Sistem menghapus data soal dalam database. 4. Berlanjut ke Basic Flow langkah ke 8. A-3 Aktor memilih untuk melakukan display data soal 1. Sistem menampilkan data soal. 2. Berlanjut ke Basic Flow langkah ke 8. 6. Error Flow E-1 Data soal yang diinputkan aktor salah 1. Sistem memberikan pesan peringatan bahwa data yang diinputkan salah. 2. Kembali ke Basic Flow Langkah ke 4. E-2 Data soal yang telah diedit salah 1. Sistem memberikan pesan peringatan bahwa data yang diedit salah. 2. Kembali ke Alternative Flow A-1 langkah ke 2. 7. PreConditions 1. Use Case Login sudah dilakukan. 2. Aktor telah memasuki system. 8. PostConditions 1. Data soal di database telah terupdate 4.1.3 Use case Spesification : Pengenalan Aksara Jawa 1. Brief Description Use case ini digunakan aktor untuk mengenal Aksara Jawa. 2. Primary Actor 1. User 3. Supporting Actor none 4. Basic Flow 1. Use case ini dimulai ketika aktor memilih pengenalan Aksara Jawa. Program Studi Teknik Informatika SKPL HANACARAKU 16/ 19
2. Sistem meminta aktor untuk memilih jenis Aksara Jawa yang akan dipelajari (Carakan, Pasangan atau Sandhangan). 3. Sistem menampilkan pengenalan Aksara Jawa. 4. Use Case selesai. 5. Alternative Flow none 6. Error Flow none 7. PreConditions none 8. PostConditions none 4.1.4 Use case Spesification : Puzzle Aksara Jawa 1. Brief Description Use case ini digunakan aktor untuk Jawa berdasarakan urutan yang sesuai. 2. Primary Actor 1. User 3. Supporting Actor none 4. Basic Flow menyusun Aksara 1. Use case ini dimulai ketika aktor memilih puzzle Aksara Jawa. 2. Sistem meminta aktor untuk memilih jenis Aksara Jawa yang harus diurutkan (Carakan, Pasangan atau Sandhangan). 3. Sistem menampilkan Aksara Jawa yang sudah diacak. 4. Aktor mengurutkan Aksara Jawa yang ada ke tempat yang sesuai. E-1 Aksara Jawa yang diinputkan oleh aktor salah tempat 5. Aktor selesai menyusun Aksara Jawa dengan benar. Program Studi Teknik Informatika SKPL HANACARAKU 17/ 19
6. Sistem memberitahukan kepada aktor berapa lama yang telah dihabiskan untuk penyusunan puzzle. 7. Use Case selesai. 5. Alternative Flow none 6. Error Flow E-1 Data yang diinputkan oleh aktor salah 1. Sistem akan secara otomatis menempatkan kembali Aksara Jawa yang salah ke tempat asalnya. 2. Kembali ke basic flow langkah ke 4. 7. PreConditions none 8. PostConditions none 4.1.5 Use case Spesification : Kuis Aksara Jawa 1. Brief Description Use case ini digunakan aktor untuk menebak Aksara Jawa yang ditampilkan oleh perangkat lunak. 2. Primary Actor 1. User 3. Supporting Actor none 4. Basic Flow 1. Use case ini dimulai ketika aktor memilih kuis Aksara Jawa. 2. Sistem meminta aktor untuk memilih tingkatan level / kesulitan yang dikehendaki. 3. Sistem menampilkan Aksara Jawa yang sudah diacak. 4. Aktor mengisi jawaban yang sesuai dan memilih tombol jawab A-1 Aktor memilih tombol refresh 5. Sistem mengupdate nilai dari user. A-2 Waktu pengerjaan belum habis Program Studi Teknik Informatika SKPL HANACARAKU 18/ 19
iduser username password Users int varchar(500) varchar(500) <pk> idkuis pertanyaan jawaban level Kuis int varchar(500) varchar(500) int <pk> Program Studi Teknik Informatika SKPL HANACARAKU 19/ 19
DPPL DESKRIPSI PERANCANGAN PERANGKAT LUNAK Pembangunan Aplikasi Permainan Web Pembelajaran Aksara Jawa Menggunakan Teknologi HTML5 dan CSS3 Untuk : Universitas Atma Jaya Yogyakarta Dipersiapkan oleh: Albertus Andra Agusta / 5973 Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Atma Jaya Yogyakarta Program Studi Teknik Informatika Nomor Dokumen Halaman DPPL-HANACARAKU 1/28 Fakultas Teknologi Industri
DAFTAR PERUBAHAN Revisi A Deskripsi B C D E F INDEX TGL - A B C D E F G Ditulis oleh Diperik sa oleh Disetuj ui oleh Program Studi Teknik Informatika DPPL HANACARAKU 2/ 28
Daftar Halaman Perubahan Halaman Revisi Halaman Revisi Program Studi Teknik Informatika DPPL HANACARAKU 3/ 28
DAFTAR ISI 1 PENDAHULUAN... 6 1.1 Tujuan... 6 1.2 Ruang Lingkup... 6 1.3 Definisi dan Akronim... 6 1.4 Referensi... 7 2 PERANCANGAN SISTEM... 8 2.1 Perancangan Arsitektur... 8 2.2 Perancangan Rinci... 9 2.2.1 Sequence Diagram... 9 2.2.1.1 Login... 9 2.2.1.2 Pengelolaan Data Soal... 10 2.2.1.3 Pengenalan Aksara Jawa... 13 2.2.1.4 Puzzle Aksara Jawa... 13 2.2.1.5 Kuis Aksara Jawa... 14 2.2.2 Class Diagram... 15 2.2.3 Class Diagram Specific Descriptions... 16 2.2.3.1 Spesifikasi Desain Kelas vlogin... 16 2.2.3.2 Spesifikasi Desain Kelas vsoal... 16 2.2.3.3 Spesifikasi Desain Kelas vpengenalan... 16 2.2.3.4 Spesifikasi Desain Kelas vpuzzle... 17 2.2.3.5 Spesifikasi Desain Kelas vkuis... 17 2.2.3.6 Spesifikasi Desain Kelas conadmin... 17 2.2.3.7 Spesifikasi Desain Kelas consoal... 17 2.2.3.8 Spesifikasi Desain Kelas conpengenalan... 18 2.2.3.9 Spesifikasi Desain Kelas conpuzzle... 18 2.2.3.10Spesifikasi Desain Kelas conkuis... 18 2.2.3.11Spesifikasi Desain Kelas muser... 19 2.2.3.12Spesifikasi Desain Kelas msoal... 19 3 PERANCANGAN DATA... 19 3.1 Dekomposisi Data... 19 3.1.1 Deskripsi Entitas Data User... 19 3.1.2 Deskripsi Entitas Data Kuis... 20 3.2 Physical Data Model... 20 4 PERANCANGAN ANTARMUKA... 21 4.1 Halaman Index... 21 4.2 Pengenalan... 22 4.3 Puzzle... 23 4.4 Kuis... 24 4.5 Login... 25 4.6 Data Soal... 26 4.7 Tambah Soal... 27 4.8 Edit Hapus Soal... 28 Program Studi Teknik Informatika DPPL HANACARAKU 4/ 28
Daftar Gambar 2.1 Rancangan Arsitektur HANACARAKU... 8 2.2 Sequence Diagram : Login... 9 2.3 Sequence Diagram : Pengelolaan Data Soal Tambah Soal.. 10 2.4 Sequence Diagram : Pengelolaan Data Soal Edit Soal... 11 2.5 Sequence Diagram : Pengelolaan Data Soal Hapus Soal... 12 2.6 Sequence Diagram : Pengelolaan Data Soal Tampil Soal.. 12 2.7 Sequence Diagram : Pengenalan Aksara Jawa... 13 2.8 Sequence Diagram : Puzzle Aksara Jawa... 13 2.9 Sequence Diagram : Kuis Aksara Jawa... 14 2.10 Class Diagram... 15 3.2 Physical Data Model... 20 4.1 Rancangan Antarmuka Index... 21 4.2 Rancangan Antarmuka Pengenalan... 22 4.3 Rancangan Antarmuka Puzzle... 23 4.4 Rancangan Antarmuka Kuis... 24 4.5 Rancangan Antarmuka Login... 25 4.6 Rancangan Antarmuka Data Soal... 26 4.7 Rancangan Antarmuka Tambah Soal... 27 4.18 Rancangan Antarmuka Edit Hapus Soal... 28 Program Studi Teknik Informatika DPPL HANACARAKU 5/ 28
Pendahuluan 1.1 Tujuan Dokumen Deskripsi Perancangan Perangkat Lunak (DPPL) ini bertujuan untuk mendefinisikan deskripsi dari perancangan perangkat lunak yang akan dikembangkan. Dokumen DPPL ini digunakan oleh pengembang perangkat lunak HANACARAKU sebagai acuan untuk implementasi pada tahap selanjutnya. 1.2 Ruang Lingkup Perangkat Lunak yang dibangun ditujukan untuk Atma Jaya Yogyakarta yang diberi nama HANACARAKU. Perangkat Lunak HANACARAKU dikembangkan dengan tujuan untuk: 1. Menangani Login Administrator. 2. Menangani Pengelolaan Data Soal. 3. Menangani Pengenalan Aksara Jawa. 4. Menangani Puzzle Aksara Jawa. 5. Menangani Kuis Aksara Jawa. Dan berjalan pada lingkungan dengan platform Web yang mendukung HTML5 dan CSS3. 1.3 Definisi dan Akronim Daftar definisi akronim dan singkatan : Keyword/Phrase Definisi DPPL Deskripsi Perancangan Perangkat Lunak disebut juga Software Design Description (SDD) merupakan deskripsi dari perancangan produk/perangkat lunak yang akan dikembangkan. Internet Internet merupakan istilah umum yang dipakai untuk menunjuk Network global yang Program Studi Teknik Informatika DPPL HANACARAKU 6/ 28
terdiri dari komputer dan layanan servis dengan sekitar 30 sampai 50 juta pemakai komputer dan puluhan layanan informasi termasuk e-mail, FTP, dan World Wide Web. Server Komputer yang menyediakan sumber daya bagi klien yang terhubung melalui jaringan. Client Komputer yang menghubungi server melalui jaringan HANACARAKU Nama Aplikasi yang akan dikembangkan 1.4 Referensi Referensi yang digunakan pada perangkat lunak tersebut adalah: 1. Bennet Simon, McRobb Steve, Farmer Ray, Object- Oriented System Analysis and Design Using UML, McGraw-Hill Companies, 2002. 2. Carol, Alfonsus, Deskripsi perancangan Perangkat Lunak BERWARNA, Universitas Atma Jaya Yogyakarta, 2012. 3. Agusta, Albertus Andra, Spesifikasi Kebutuhan Perangkat Lunak (SKPL) CSDS, Universitas Atma Jaya Yogyakarta, 2012. 4. Agusta, Albertus Andra, Spesifikasi Kebutuhan Perangkat Lunak (SKPL) HANACARAKU, Universitas Atma Jaya Yogyakarta, 2013. Program Studi Teknik Informatika DPPL HANACARAKU 7/ 28
2 Perancangan Sistem 2.1 Perancangan Arsitektur 2.1 Rancangan Arsitektur HANACARAKU Program Studi Teknik Informatika DPPL HANACARAKU 8/ 28
: Admin : vlogin : vadmin : conadmin : muser 1: input data 2: validasilogin() 3: getdatauser() 4: 5: Program Studi Teknik Informatika DPPL HANACARAKU 9/ 28
: Admin : vsoal : consoal : msoal 1: input data 2: validasisoal() 3: addsoal() 4: addsoal() 5: 6: 7: Program Studi Teknik Informatika DPPL HANACARAKU 10/ 28
: Admin 1: mulai interface : vsoal : consoal : msoal 2: getsoal() 3: getsoal() 4: 5: 6: input data 7: validasisoal() 8: updatesoal() 9: updatesoal() 10: 11: 12: Program Studi Teknik Informatika DPPL HANACARAKU 11/ 28
: Admin : vsoal : consoal 1: mulai interface : msoal 2: deletesoal() 3: deletesoal() 4: 5: : Admin 1: mulai interface : vsoal : consoal 2: showsoal() : msoal 3: showsoal() 4: 5: Program Studi Teknik Informatika DPPL HANACARAKU 12/ 28
: User : vpengenalan : conpengenalan 1: start interface 4: 2: getpengenalan() 3: : User : vpuzzle : vpuzzle 1: start interface 2: getpuzzle() 3: 4: Program Studi Teknik Informatika DPPL HANACARAKU 13/ 28
: User : vkuis : conkuis : msoal 1: start interface 2: getkuis() 3: getkuis() 4: 5: 6: Program Studi Teknik Informatika DPPL HANACARAKU 14/ 28
vlogin (from Boundary) vlogin() validasilogin() vsoal (from Boundary) vsoal() validasisoal() addsoal() getsoal() updatesoal() deletesoal() showsoal() vpengenalan (from Boundary) vpengenalan() getpengenalan() conadmin (from Controller) conadmin() validasilogin() getdatauser() consoal (from Controller) consoal() addsoal() getsoal() updatesoal() deletesoal() showsoal() conpengenalan (from Controller) conpengenalan() getpengenalan() muser (from Entity) muser() getdatauser() msoal (from Entity) msoal() addsoal() getsoal() updatesoal() deletesoal() showsoal() vpuzzle (from Boundary) vpuzzle() getpuzzle() conpuzzle (from Controller) conpuzzle() getpuzzle() vkuiz (from Boundary) vkuiz() getkuis() conkuis (from Controller) conkuis() getkuis() Program Studi Teknik Informatika DPPL HANACARAKU 15/ 28
2.2.3 Class Diagram Specific Descriptions 2.2.3.1 Spesifikasi Desain Kelas vlogin vlogin <<boundary>> +vlogin(): Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +validasilogin(): Operasi ini digunakan untuk memvalidasi username dan password dari inputan aktor. 2.2.3.2 Spesifikasi Desain Kelas vsoal vsoal <<boundary>> +vsoal(): Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +validasisoal(): Operasi ini digunakan untuk memvalidasi data soal dari inputan aktor. +addsoal(): Operasi ini digunakan untuk menambah data soal. +getsoal(): Operasi ini digunakan untuk mendapatkan data soal. +updatesoal(): Operasi ini digunakan untuk menyimpan update data soal. +deletesoal(): Operasi ini digunakan untuk menghapus data soal. +showsoal(): Operasi ini digunakan untuk menampilkan data soal. 2.2.3.3 Spesifikasi Desain Kelas vpengenalan vpengenalan <<boundary>> +vpengenalan() : Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +getpengenalan(): Program Studi Teknik Informatika DPPL HANACARAKU 16/ 28
Operasi ini digunakan untuk mendapatkan data pengenalan aksara jawa. 2.2.3.4 Spesifikasi Desain Kelas vpuzzle vpuzzle <<boundary>> +vpuzzle(): Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +getpuzzle(): Operasi ini digunakan untuk mendapatkan data puzzle aksara jawa. 2.2.3.5 Spesifikasi Desain Kelas vkuis vkuis <<boundary>> +vkuis() : Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +getkuis(): Operasi ini digunakan untuk mendapatkan data kuis aksara jawa. 2.2.3.6 Spesifikasi Desain Kelas conadmin conadmin <<control>> +conamin() : Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +validasilogin(): Operasi ini digunakan untuk memvalidasi username dan password dari inputan aktor. +getdatauser(): Operasi ini digunakan untuk mendapatkan data user. 2.2.3.7 Spesifikasi Desain Kelas consoal consoal <<control>> Program Studi Teknik Informatika DPPL HANACARAKU 17/ 28
+consoal(): Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +addsoal(): Operasi ini digunakan untuk menambah data soal. +getsoal(): Operasi ini digunakan untuk mendapatkan data soal. +updatesoal(): Operasi ini digunakan untuk menyimpan update data soal. +deletesoal(): Operasi ini digunakan untuk menghapus data soal. +showsoal(): Operasi ini digunakan untuk menampilkan data soal. 2.2.3.8 Spesifikasi Desain Kelas conpengenalan conpengenalan <<control>> +conpengenalan() : Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +getpengenalan(): Operasi ini digunakan untuk mendapatkan data pengenalan aksara jawa. 2.2.3.9 Spesifikasi Desain Kelas conpuzzle conpuzzle <<control>> +conpuzzle(): Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +getpuzzle(): Operasi ini digunakan untuk mendapatkan data puzzle aksara jawa. 2.2.3.10 Spesifikasi Desain Kelas conkuis conkuis <<control>> +conkuis() : Default konstruktor, digunakan untuk inisialisasi semua Program Studi Teknik Informatika DPPL HANACARAKU 18/ 28
attribute dari kelas ini. +getkuis(): Operasi ini digunakan untuk mendapatkan data kuis aksara jawa. 2.2.3.11 Spesifikasi Desain Kelas muser muser <<entity>> +muser() : Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +getdatauser(): Operasi ini digunakan untuk mendapatkan data user. 2.2.3.12 Spesifikasi Desain Kelas msoal msoal <<entity>> +msoal(): Default konstruktor, digunakan untuk inisialisasi semua attribute dari kelas ini. +addsoal(): Operasi ini digunakan untuk menambah data soal. +getsoal(): Operasi ini digunakan untuk mendapatkan data soal. +updatesoal(): Operasi ini digunakan untuk menyimpan update data soal. +deletesoal(): Operasi ini digunakan untuk menghapus data soal. +showsoal(): Operasi ini digunakan untuk menampilkan data soal. 3 Perancangan Data 3.1 Dekomposisi Data 3.1.1 Deskripsi Entitas Data User Nama Tipe Panjang Keterangan IDUser Integer - Kode ID User, Primary Program Studi Teknik Informatika DPPL HANACARAKU 19/ 28
Username Password Variable Character Variable Character key 500 Username dari user untuk login 500 Password dari user untuk login Nama Tipe Panjang Keterangan IDKuis Integer - Kode ID Kuis, Primary Key Pertanyaan Variable 500 Nama file gambar Character pertanyaan kuis Jawaban Variable 500 Jawaban kuis Character Level Integer - Level dari kuis iduser username password Users int varchar(500) varchar(500) <pk> idkuis pertanyaan jawaban level Kuis int varchar(500) varchar(500) int <pk> Program Studi Teknik Informatika DPPL HANACARAKU 20/ 28
4 Perancangan Antarmuka Perancangan antarmuka untuk perangkat lunak HANACARAKU adalah sebagai berikut: 4.1 Halaman Index 4.1 Rancangan Antarmuka Index Antarmuka ini digunakan untuk menampilkan halaman utama aplikasi HANACARAKU. User dapat memilih untuk masuk ke dalam Pengenalan, Puzzle maupun Kuis Aksara Jawa. Program Studi Teknik Informatika DPPL HANACARAKU 21/ 28
4.2 Pengenalan 4.2 Rancangan Antarmuka Pengenalan Antarmuka ini menampilkan pengenalan Aksara Jawa. Terbagi atas 5 bagian, pengenalan secara singkat, carakan, pasangan, sandhangan serta contoh penulisan Program Studi Teknik Informatika DPPL HANACARAKU 22/ 28
4.3 Puzzle 4.3 Rancangan Antarmuka Puzzle Antarmuka ini digunakan user menggunakan permainan puzzle. Terbagi atas 3 jenis, carakan, pasangan dan sandhangan. Memiliki cara pengerjaan yang sama, yaitu dengan drag-and-drop aksara yang berada di bagian atas (acak) ke bagian bawah yang sesuai. Terdapat pula timer untuk menghitung waktu pengerjaan puzzle. Program Studi Teknik Informatika DPPL HANACARAKU 23/ 28
4.4 Kuis 4.4 Rancangan Antarmuka Kuis Antarmuka ini digunakan user menggunakan permainan kuis. Terbagi atas 4 level tingkatan permainan yang dapat dipilih oleh user, sesuai dengan kemampuan yang dimiliki. User diminta untuk memasukkan jawaban yang sesuai, yaitu membaca aksaraa jawa yang tampil. User dapat mengganti soal dengan tombol refresh. Ditampilkan pula poin dari user serta sisa waktu pengerjaan. Program Studi Teknik Informatika DPPL HANACARAKU 24/ 28
4.5 Login 4.5 Rancangan Antarmuka Login Antarmuka ini digunakan oleh admin agar dapat mengakses data a soal, menambah, edit serta menghapus data soal. Program Studi Teknik Informatika DPPL HANACARAKU 25/ 28
4.6 Data Soal 4.6 Rancangan Antarmuka Data Soal Antarmuka ini menampilkan seluruh data soal yang ada di dalam database, gambar berikut jawabannya. Data ditampilkan menggunakan pagination sehingga hanya sebagian yang ditampilkan dan sisanya dapat diakses di halaman selanjutnya. Program Studi Teknik Informatika DPPL HANACARAKU 26/ 28
4.7 Tambah Soal 4.7 Rancangan Antarmuka Tambah Soal Antarmuka ini digunakan oleh administrator untuk menambah data soal baru. Administrator memasukkan file, jawaban serta level Program Studi Teknik Informatika DPPL HANACARAKU 27/ 28
4.8 Edit Hapus Soal 4.8 Rancangan Antarmuka Edit Hapus Soal Antarmuka ini digunakan oleh administrator untuk mengedit serta menghapus data kuis. Administrator memilih salah satu opsi di radiobutton yang ada, jika edit akan diminta menginputkan data, jika hapus diminta konfirmasi penghapusan kuis. Program Studi Teknik Informatika DPPL HANACARAKU 28/ 28