PEMBANGUNAN APLIKASI PEMANTAUAN AKADEMIK SISWA BERBASIS CROSS PLATFORM MOBILE MENGGUNAKAN FRAMEWORK PHONEGAP

Transkripsi

1 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 : PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS PASUNDAN BANDUNG SEPTEMBER 2016

2 LEMBAR PENGESAHAN LAPORAN TUGAS AKHIR Telah disetujui dan disahkan, Laporan Tugas Akhir dari : Nama : Adi Wibowo Nrp : 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)

3 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 Latar Belakang Identifikasi Masalah Tujuan Tugas Akhir Manfaat Tugas Akhir Lingkup Tugas Akhir Metodologi Penelitian Sistematika Penulisan Tugas Akhir BAB 2 LANDASAN TEORI Aplikasi Native Cross Platform Sistem Operasi Aplikasi Web Phonegap Arsitektur Phonegap Komponen Phonegap Bahasa Pemrograman Phonegap Build Jquery Mobile iv

4 Web Service JSON Desain Interaksi Manusia Komputer BAB 3 ANALISIS DAN PERANCANGAN Kerangka Tugas Akhir Skema Analisis Tugas Akhir Eksplorasi Phonegap Definisi Dasar Infrastruktur Aplikasi Phonegap Tahap Pembangunan Aplikasi Phonegap Tinjauan Umum Analisis Sistem Sistem yang Berjalan Analisis Kebutuhan Analisis Perangkat Lunak Deskripsi Perangkat Lunak Analisis Pengguna Analisis Kebutuhan Perangkat Lunak Model Use Case Diagram Kelas Analisis Diagram Sekuen Perancangan Perangkat Lunak Tujuan Perancangan Langkah langkah Perancangan BAB 4 IMPLEMENTASI DAN PENGUJIAN Implementasi Kebutuhan Implementasi Aplikasi Struktur File Projek Aplikasi Skenario Penggunaan Aplikasi Skenario Akses Web Service v

5 4.1.5 Implementasi Antar Muka Deployment Aplikasi Pengujian Aplikasi Pengujian Kebutuhan Pengujian Aplikasi Menggunakan Blackbox Testing BAB 5 KESIMPULAN DAN SARAN Kesimpulan Saran DAFTAR PUSTAKA... vi

6 DAFTAR TABEL Tabel 3. 1 Kerangka Tugas Akhir Tabel 3. 2 Tabel analisis tugas akhir Tabel 3. 3 Karakteristik pengguna dan solusi penanggulangannya Tabel 3. 4 Kebutuhan Fungsional Aplikasi Tabel 3. 5 Kebutuhan Non Fungsional Aplikasi Tabel 3. 6 Definisi Aktor Tabel 3. 7 Definisi Use Case Tabel 3. 8 Skenario Use case otentifikasi user Tabel 3. 9 Skenario use case lihat absensi Tabel Skenario Use Case Lihat Nilai Tabel Skenario use case lihat pembayaran up Tabel Skenario use case lihat pembayaran spp Tabel Skenario Use Case Lihat Data Siswa Tabel Skenario Use Case Lihat Agenda Tabel Tabel daftar kelas Tabel Tabel Jenis Kelas Tabel Deskripsi Package Tabel Tabel pengguna Tabel Tabel absensi_siswa Tabel Tabel mata_pelajaran Tabel Tabel nilai_pelajaran Tabel Tabel pembayaran_up Tabel Tabel pembayaran_spp Tabel Tabel agenda Tabel Tabel siswa Tabel Tabel kontrak Tabel 4 1 Daftar file yang berada di folder Tabel 4 2 Proses mapping dari fungsional aplikasi ke web service Tabel 4 3 Pengujian Requirement Tabel 4 4 Test Skenario vii

7 DAFTAR GAMBAR Gambar 1. 1 Metodologi Penelitian Gambar 2. 1 Pengembangan aplikasi native Gambar 2. 2 Fitur hardware yang didukung oleh Phonegap Gambar 2. 3 Platform yang mendukung PhoneGap Gambar 2. 4 Arsitektur PhoneGap Gambar 2. 5 Rule penulisan CSS Gambar 2. 6 PhoneGap Build Gambar 2. 7 arsitektur web service Gambar 3. 1 Skema Analisis Tugas Akhir Gambar 3. 2 Dasar Infrastruktur Aplikasi Phonegap Gambar 3. 3 Perintah membuat project phonegap Gambar 3. 4 Membahkan platform pada projek phonegap Gambar 3. 5 event deviceready Gambar 3. 6 Arsitektur aplikasi pemantauan akademik siswa berbasis cross platform mobile Gambar 3. 7 Diagram Use Case Aplikasi Pemantauan Akademik Siswa Gambar 3. 8 Diagram kelas analisis otentifikasi user Gambar 3. 9 Diagram kelas analisis lihat absensi Gambar Diagram kelas analisis lihat nilai Gambar Diagram kelas analisis lihat pembayaran UP Gambar Diagram kelas analisis lihat pembayaran SPP Gambar Diagram kelas analisis lihat agenda Gambar Diagram kelas analisis lihat siswa Gambar diagram sequence otentifikasi user Gambar diagram sequence lihat absensi Gambar diagram sequence lihat nilai Gambar diagram sequence lihat pembayaran up Gambar diagram sequence lihat pembayaran SPP Gambar diagram sequence lihat agenda Gambar diagram sequence lihat data siswa Gambar Diagram Kelas Perancangan Gambar Package Perangkat Lunak Pemantauan Akademik Gambar Rancangan pesan koneksi tidak terhubung Gambar Rancangan halaman login viii

8 Gambar Rancangan halaman menu utama Gambar Rancangan halaman absensi terbaru Gambar Rancangan halaman detail Absensi Gambar Rancangan halaman daftar pelajaran Gambar Rancangan halaman nilai Gambar Rancangan halaman menu pembayaran Gambar Rancangan halaman informasi pembayaran uang pangkal Gambar Rancangan halaman informasi pembayaran spp Gambar Rancangan halaman agenda sekolah Gambar Rancangan halaman data siswa Gambar Rancangan halaman daftar siswa Gambar 4. 1 Struktur File Projek Gambar 4. 2 Halaman login Gambar 4. 3 Halaman menu utama Gambar 4. 4 Halaman informasi absensi terkini Gambar 4. 5 Halaman informasi detail absensi Gambar 4. 6 Halaman daftar pelajaran Gambar 4. 7 Halaman nilai Gambar 4. 8 Halaman menu pembayaran Gambar 4. 9 Halaman informasi pembayaran uang pangkal Gambar Halaman informasi pembayaran SPP Gambar Halaman Agenda kegiatan sekolah Gambar Halaman informasi data siswa Gambar Halaman daftar siswa Gambar halaman phonegap build Gambar Deployment diagram ix

9 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

10 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