PEMBANGUNAN APLIKASI PEMANTAUAN AKADEMIK SISWA BERBASIS CROSS PLATFORM MOBILE MENGGUNAKAN FRAMEWORK PHONEGAP (Kasus : Pemantauan Akademik Siswa di SMA Negeri 15 Bandung) TUGAS AKHIR Disusun sebagai salah satu syarat untuk kelulusan Program Strata 1, di Program Studi Teknik Informatika, Universitas Pasundan Bandung oleh : Adi Wibowo NRP : 09.30.40.053 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS PASUNDAN BANDUNG SEPTEMBER 2016
LEMBAR PENGESAHAN LAPORAN TUGAS AKHIR Telah disetujui dan disahkan, Laporan Tugas Akhir dari : Nama : Adi Wibowo Nrp : 09.304.0053 Dengan judul : PEMBANGUNAN APLIKASI PEMANTAUAN AKADEMIK SISWA BERBASIS CROSS PLATFORM MOBILE MENGGUNAKAN FRAMEWORK PHONEGAP Bandung, 20 September 2016 Menyetujui, Pembimbing Utama, Pembimbing Pendamping, (Dr. Ir.Leony Lidya, MT) (Ade Sukendar, S.T, MT)
DAFTAR ISI ABSTRAK... i ABSTRACT... ii KATA PENGANTAR... iii DAFTAR ISI... iv DAFTAR TABEL... vii DAFTAR GAMBAR... viii DAFTAR ISTILAH... x DAFTAR SIMBOL... xi BAB 1 PENDAHULUAN... 1-1 Latar Belakang... 1-1 Identifikasi Masalah... 1-3 Tujuan Tugas Akhir... 1-3 Manfaat Tugas Akhir... 1-3 Lingkup Tugas Akhir... 1-3 Metodologi Penelitian... 1-4 Sistematika Penulisan Tugas Akhir... 1-5 BAB 2 LANDASAN TEORI... 2-1 Aplikasi Native... 2-1 Cross Platform... 2-1 Sistem Operasi... 2-2 Aplikasi Web... 2-2 Phonegap... 2-2 2.5.1 Arsitektur Phonegap... 2-4 2.5.2 Komponen Phonegap... 2-5 2.5.3 Bahasa Pemrograman... 2-5 Phonegap Build... 2-7 Jquery Mobile... 2-7 iv
Web Service... 2-8 JSON... 2-9 Desain Interaksi Manusia Komputer... 2-10 BAB 3 ANALISIS DAN PERANCANGAN... 3-1 Kerangka Tugas Akhir... 3-1 Skema Analisis Tugas Akhir... 3-4 Eksplorasi Phonegap... 3-5 3.3.1 Definisi... 3-5 3.3.2 Dasar Infrastruktur Aplikasi Phonegap... 3-5 3.3.3 Tahap Pembangunan Aplikasi Phonegap... 3-5 Tinjauan Umum... 3-7 Analisis Sistem... 3-7 3.5.1 Sistem yang Berjalan... 3-7 3.5.2 Analisis Kebutuhan... 3-8 Analisis Perangkat Lunak... 3-8 3.6.1 Deskripsi Perangkat Lunak... 3-8 3.6.2 Analisis Pengguna... 3-9 3.6.3 Analisis Kebutuhan Perangkat Lunak... 3-10 3.6.4 Model Use Case... 3-10 3.6.5 Diagram Kelas Analisis... 3-15 3.6.6 Diagram Sekuen... 3-19 Perancangan Perangkat Lunak... 3-23 3.7.1 Tujuan Perancangan... 3-24 3.7.2 Langkah langkah Perancangan... 3-24 BAB 4 IMPLEMENTASI DAN PENGUJIAN... 4-1 Implementasi... 4-1 4.1.1 Kebutuhan Implementasi Aplikasi... 4-1 4.1.2 Struktur File Projek Aplikasi... 4-3 4.1.3 Skenario Penggunaan Aplikasi... 4-4 4.1.4 Skenario Akses Web Service... 4-5 v
4.1.5 Implementasi Antar Muka... 4-6 4.1.6 Deployment Aplikasi... 4-12 Pengujian Aplikasi... 4-13 4.2.1 Pengujian Kebutuhan... 4-13 4.2.2 Pengujian Aplikasi Menggunakan Blackbox Testing... 4-14 BAB 5 KESIMPULAN DAN SARAN... 5-1 Kesimpulan... 5-1 Saran... 5-1 DAFTAR PUSTAKA... vi
DAFTAR TABEL Tabel 3. 1 Kerangka Tugas Akhir... 3-1 Tabel 3. 2 Tabel analisis tugas akhir... 3-4 Tabel 3. 3 Karakteristik pengguna dan solusi penanggulangannya... 3-10 Tabel 3. 4 Kebutuhan Fungsional Aplikasi... 3-10 Tabel 3. 5 Kebutuhan Non Fungsional Aplikasi... 3-10 Tabel 3. 6 Definisi Aktor... 3-11 Tabel 3. 7 Definisi Use Case... 3-12 Tabel 3. 8 Skenario Use case otentifikasi user... 3-12 Tabel 3. 9 Skenario use case lihat absensi... 3-13 Tabel 3. 10 Skenario Use Case Lihat Nilai... 3-13 Tabel 3. 11 Skenario use case lihat pembayaran up... 3-14 Tabel 3. 12 Skenario use case lihat pembayaran spp... 3-14 Tabel 3. 13 Skenario Use Case Lihat Data Siswa... 3-15 Tabel 3. 14 Skenario Use Case Lihat Agenda... 3-15 Tabel 3. 15 Tabel daftar kelas... 3-15 Tabel 3. 16 Tabel Jenis Kelas... 3-24 Tabel 3. 17 Deskripsi Package... 3-26 Tabel 3. 18 Tabel pengguna... 3-26 Tabel 3. 19 Tabel absensi_siswa... 3-26 Tabel 3. 20 Tabel mata_pelajaran... 3-26 Tabel 3. 21 Tabel nilai_pelajaran... 3-27 Tabel 3. 22 Tabel pembayaran_up... 3-27 Tabel 3. 23 Tabel pembayaran_spp... 3-27 Tabel 3. 24 Tabel agenda... 3-27 Tabel 3. 25 Tabel siswa... 3-27 Tabel 3. 26 Tabel kontrak... 3-28 Tabel 4 1 Daftar file yang berada di folder www... 4-4 Tabel 4 2 Proses mapping dari fungsional aplikasi ke web service... 4-5 Tabel 4 3 Pengujian Requirement... 4-13 Tabel 4 4 Test Skenario... 4-15 vii
DAFTAR GAMBAR Gambar 1. 1 Metodologi Penelitian... 1-5 Gambar 2. 1 Pengembangan aplikasi native... 2-1 Gambar 2. 2 Fitur hardware yang didukung oleh Phonegap... 2-3 Gambar 2. 3 Platform yang mendukung PhoneGap... 2-3 Gambar 2. 4 Arsitektur PhoneGap... 2-4 Gambar 2. 5 Rule penulisan CSS... 2-7 Gambar 2. 6 PhoneGap Build... 2-7 Gambar 2. 7 arsitektur web service... 2-8 Gambar 3. 1 Skema Analisis Tugas Akhir... 3-4 Gambar 3. 2 Dasar Infrastruktur Aplikasi Phonegap... 3-5 Gambar 3. 3 Perintah membuat project phonegap... 3-6 Gambar 3. 4 Membahkan platform pada projek phonegap... 3-6 Gambar 3. 5 event deviceready... 3-7 Gambar 3. 6 Arsitektur aplikasi pemantauan akademik siswa berbasis cross platform mobile... 3-9 Gambar 3. 7 Diagram Use Case Aplikasi Pemantauan Akademik Siswa... 3-11 Gambar 3. 8 Diagram kelas analisis otentifikasi user... 3-17 Gambar 3. 9 Diagram kelas analisis lihat absensi... 3-17 Gambar 3. 10 Diagram kelas analisis lihat nilai... 3-18 Gambar 3. 11 Diagram kelas analisis lihat pembayaran UP... 3-18 Gambar 3. 12 Diagram kelas analisis lihat pembayaran SPP... 3-18 Gambar 3. 13 Diagram kelas analisis lihat agenda... 3-19 Gambar 3. 14 Diagram kelas analisis lihat siswa... 3-19 Gambar 3. 15 diagram sequence otentifikasi user... 3-20 Gambar 3. 16 diagram sequence lihat absensi... 3-20 Gambar 3. 18 diagram sequence lihat nilai... 3-21 Gambar 3. 19 diagram sequence lihat pembayaran up... 3-22 Gambar 3. 20 diagram sequence lihat pembayaran SPP... 3-22 Gambar 3. 21 diagram sequence lihat agenda... 3-23 Gambar 3. 22 diagram sequence lihat data siswa... 3-23 Gambar 3. 23 Diagram Kelas Perancangan... 3-24 Gambar 3. 24 Package Perangkat Lunak Pemantauan Akademik... 3-25 Gambar 3. 25 Rancangan pesan koneksi tidak terhubung... 3-28 Gambar 3. 26 Rancangan halaman login... 3-28 viii
Gambar 3. 27 Rancangan halaman menu utama... 3-29 Gambar 3. 28 Rancangan halaman absensi terbaru... 3-29 Gambar 3. 29 Rancangan halaman detail Absensi... 3-30 Gambar 3. 30 Rancangan halaman daftar pelajaran... 3-30 Gambar 3. 31 Rancangan halaman nilai... 3-31 Gambar 3. 32 Rancangan halaman menu pembayaran... 3-31 Gambar 3. 33 Rancangan halaman informasi pembayaran uang pangkal... 3-32 Gambar 3. 34 Rancangan halaman informasi pembayaran spp... 3-32 Gambar 3. 35 Rancangan halaman agenda sekolah... 3-33 Gambar 3. 36 Rancangan halaman data siswa... 3-33 Gambar 3. 37 Rancangan halaman daftar siswa... 3-34 Gambar 4. 1 Struktur File Projek... 4-3 Gambar 4. 2 Halaman login... 4-6 Gambar 4. 3 Halaman menu utama... 4-7 Gambar 4. 4 Halaman informasi absensi terkini... 4-7 Gambar 4. 5 Halaman informasi detail absensi... 4-8 Gambar 4. 6 Halaman daftar pelajaran... 4-8 Gambar 4. 7 Halaman nilai... 4-9 Gambar 4. 8 Halaman menu pembayaran... 4-9 Gambar 4. 9 Halaman informasi pembayaran uang pangkal... 4-10 Gambar 4. 10 Halaman informasi pembayaran SPP... 4-10 Gambar 4. 11 Halaman Agenda kegiatan sekolah... 4-11 Gambar 4. 12 Halaman informasi data siswa... 4-11 Gambar 4. 13 Halaman daftar siswa... 4-12 Gambar 4. 14 halaman phonegap build... 4-12 Gambar 4. 15 Deployment diagram... 4-13 ix
DAFTAR ISTILAH No Istilah Arti 1 Platform Arsitektur hardware 2 Cross platform Lintas platform 3 Framework Kerangka kerja 4 Open source Terbuka, membiarkan source code terbuka untuk diakses 5 developer Pengembang 6 smartphone Ponsel cerdas/ canggih 7 User interface Antarr muka pengguna 8 Adaptive Beradaptasi x
DAFTAR SIMBOL No Gambar Nama Notasi Keterangan 1 Actor Simbol Ini merupakan aktor yang berinteraksi dengan sistem atau perangkat lunak. 2 Use Case Simbol ini merupakan gambaran fungsionalitas dari suatu sistem 3 4. Interaction Simbol ini merupakan simbol yang berperan sebagai aliran proses. Boundary Simbol ini merupakan simbol yang menggambarkan kelas View yang terdapat pada perangkat lunak 5. Control Simbol ini merupakan simbol yang menggambarkan kelas Controller yang terdapat pada perangkat lunak 6. Model Simbol ini merupakan simbol yang menggambarkan kelas Model atau Entity yang terdapat pada perangkat lunak 7. Class Class Simbol ini merupakan simbol yang menggambarkan kelas-kelas yang terdapat pada perangkat lunak 8. Package Package Simbol ini merupakan simbol yang menggambarkan paket-paket yang terdapat di dalam perangkat lunak xi