BAB IV IMPLEMENTASI DAN PENGUJIAN 1.1 Implementasi Aplikasi dan Konfigurasi Tahap implementasi dan pengujian dilakukan setelah tahap analisis dan perancangan selesai dilakukan. Pada sub bab ini akan dijelaskan implementasi dari aplikasi dengan menggunakan beberapa fungsi terdiri dari lingkungan implementasi, basis data dan interface dari aplikasi ini. 1.1.1 Instalasi 1.1.1.1 Instalasi XAMPP Untuk instalasi XAMPP dilakukan dengan tahap berikut : 1. Unduh file instalasi : https://www.apachefriends.org/xampp-files/5.6.8/xampp-osx-5.6.8-0- installer.dmg 2. Dobel klik file instalasi : Gambar 4. 1 Instalasi XAMPP 3. Menjalankan server Apache dan MySQL Gambar 4. 2 Menjalankan server Apache dan MySQL

1.1.1.2 Instalasi Android Studio Untuk instalasi aplikasi IDE android studio dilakukan sebagai berikut : 1. Unduh aplikasi : https://dl.google.com/dl/android/studio/install/1.2.1.1/android-studio-ide- 141.1903250-mac.dmg 2. Dobel klik file instalasi : Gambar 4. 3 Instalasi Android Studio 1.1.2 Konfigurasi 1.1.2.1 Konfigurasi Google Cloud Messaging Mendaftar untuk layanan Google : 1. Membuat project : https://console.developers.google.com/project Gambar 4. 4 Membuat project di Google Developer kode project sudah dibuat : 1001576473351 Gambar 4. 5 Kode project

2. Mengizinkan layanan Google Cloud Messaging For Android Gambar 4. 6 Google Cloud Messaging 3. Membuat server key untuk disisipkan di server web : AIzaSyDhA4hIz1FI4f7WNRjKjjpQD1Y0C7gVmUE ü Create new key : Gambar 4. 7 create new key ü Membuat server key : Gambar 4. 8 Membuat server key 1 Gambar 4. 9 Membuat server key 2

ü Pembuatan server key selesai : Gambar 4. 10 API Key 1.1.2.2 Konfigurasi CakePHP Agar framework CakePHP dapat berjalan dan terkoneksi dengan database, dilakukan beberapa pengaturan sebagai berikut : Permission untuk folder temporary : NotificationCenter/app/tmp Gambar 4. 11 Permission folder tmp Kode enkripsi dan dekripsi baris 225 dan 230, pada file NotificationCenter/app/config/core.php Gambar 4. 12 kode enkripsi dan dekripsi Menghubungkan aplikasi web server dengan database MySQL, pada file : NotificationCenter/app/config/database.php Gambar 4. 13 koneksi ke database MySQL Memberikan permission untuk folder akan digunakan untuk menyimpan poster : NotificationCenter/webroot/img/uploads/poster Gambar 4. 14 permission folder poster

Menyisipkan Google Cloud Messaging (GCM), API Key : AIzaSyDhA4hIz1FI4f7WNRjKjjpQD1Y0C7gVmUE Pada file di server web : NotificationCenter/app/controller/MahasiswaController.php Gambar 4. 15 Integrasi server web dan Google Cloud Messaging 1.1.2.3 Konfigurasi Android Untuk menghubungkan aplikasi android dengan server web dan server GCM, diperlukan pengaturan sebagai berikut : Menambahkan Library Google Play Service: com.google.android.gms:play-services:6.5.87 Gambar 4. 16 Library Google Play Service Menambahkan Google Project ID : AndroidstudioProjects/NotificationCenter/app/src/main/java/com/aha/ba siclogin2/gcm/config.java

Gambar 4. 17 Integrasi Android dan Google Cloud Messaging Menambahkan alamat IP web server NotificationCenter : NotificationCenter/app/src/main/java/com/aha/basiclogin2/gcm/Config.j ava Gambar 4. 18 integrasi Android dan server web Menambahkan permission untuk layanan Google Cloud Messaging: BasicLogin2/app/src/main/AndroidManifest.xml Gambar 4. 19 Permission GCM

1.2 Implementasi Basis Data Desain dari basis data untuk aplikasi server sebagai berikut : Gambar 4. 20 Desain basis data 1.2.1 Struktur Tabel Pengumuman Struktur tabel pengumuman berisi id, detail pengumuman dan kode_jur_id sebagai foreign key darti tabel jurusan. Gambar 4. 21 Struktur tabel pengumuman 1.2.2 Struktur Tabel Poster Struktur tabel poster berisi id, detail pengumuman, nama poster(gambar) dan kode_jur_id sebagai foreign key ke tabel jurusan. Gambar 4. 22 Struktur tabel poster 1.2.3 Struktur Tabel Admin Tabel admin menyimpan data akun bagian akademik dapat mengakses server web Notification Center. Gambar 4. 23 Struktur tabel admin

1.2.4 Struktur Tabel Fakultas Tabel admin terdiri dari kode_fk sebagai primary key dan nama_fk menyimpan detail nama dari fakultas. Gambar 4. 24 Struktur tabel fakultas 1.2.5 Struktur Tabel Jurusan Tabel jurusan terdiri dari kode_jur sebagai primary key, nama_jur menyimpan detail nama dari jurusan dan kode_fk_id sebagai foreign key ke tabel fakultas. Gambar 4. 25 Struktur tabel jurusan 1.2.6 Struktur Tabel Mahasiswa Tabel mahasiswa berisi data mahasiswa dimasukkan secara individu oleh mahasiswa melalui aplikasi client terpasang pada perangkat mobile sistem operasi Android. Kolom Gcmid merupakan id diperoleh dari server Google Cloud Messaging. Gambar 4. 26 Struktur tabel mahasiswa 1.3 Implementasi Web Server Berikut ini hasil penulisan kode program dan hasil rancangan antar muka untuk aplikasi server web Notification Center : 1.3.1 Struktur Model View Controller 1.3.1.1 Struktur Model Setiap file model mewakili nama tabel ada di database MySQL nantinya akan digunakan untuk mengakses, menambah, mengubah dan menghapus data.

Gambar 4. 27 Struktur model server 1.3.1.2 Struktur View Struktur view merupakan halaman akan ditampilkan ke user berupa data data pengumuman dan poster. Gambar 4. 28 Struktur view server 1.3.1.3 Struktur Controller Struktur controller bersisi kode program untuk mengentegrasikan model dan view, sehingga aplikasi berjalan sesuai dengan diharapkan. Gambar 4. 29 Struktur controller server

1.3.2 Antar Muka Web Server 1.3.2.1 Antar Muka Login Web 1.3.2.2 Antar Muka Halaman Utama Gambar 4. 30 Antar muka login web Gambar 4. 31 Antar muka halaman poster

1.3.2.3 Antar Muka Kirim Pengumuman Gambar 4. 32 Antar muka kirim pengumuman 1.3.2.4 Antar Muka Kirim Poster Gambar 4. 33 Antar muka kirim poster 1.4 Implementasi Client Berikut ini hasil penulisan kode program dan hasil rancangan antar muka untuk aplikasi client Notification Center :

1.4.1 Struktur Aplikasi 1.4.1.1 Struktur Kelas Struktur kelas berada pada package com.aha.notificationcenter berisi kode program untuk registrasi, login, menerima informasi dan menghapus informasi pengumuman. Untuk mempermudah penulis dalam membaca program, dibuat dua package tambahan berupa db dan gcm. Package db berisi kode program untuk koneksi dan CRUD ke database local Android (SQLite). Sedangkan package gcm berisi kode program untuk koneksi dan CRUD ke server web, database server web (MySQL) dan server Google Cloud Messaging. Gambar 4. 34 Struktur kelas client 1.4.1.2 Struktur Layout Struktur layout berisi halaman halaman akan ditampilkan ke mahasiswa. Gambar 4. 35 Struktur layout client 1.4.2 Antar Muka Client 1.4.2.1 Antar Muka Login Berikut adalah antar muka login di aplikasi android client :

Gambar 4. 36 Login client 1.4.2.2 Antar Muka Mendaftar Berikut antar muka untuk mendaftar : Gambar 4. 37 Antar muka mendaftar 1.4.2.3 Antar Muka Halaman Utama Berikut ini adalah antar muka halaman utama :

Gambar 4. 38 Antar muka halaman utama 1.4.2.4 Antar Muka Menerima dan Menampilkan Pengumuman Gambar 4. 39 Antar muka menerima dan menampilkan pengumuman

1.4.2.5 Antar Muka Menerima dan MenampilkanPoster Gambar 4. 40 Antar muka menerima dan menampilkan poster 1.5 Pengujian Pada akhir implementasi penulis melakukan pengujian untuk memastikan aplikasi dirancang dapat berfungsi dan berjalan dengan baik dan sesuai dengan rumus rumus rancangan telah ditetapkan sebelumnya. Adapun metode digunakan dalam proses pengujian aplikasi ini yaitu dengan menggunakan metode black box. Pengujian black box memungkinkan penulis untuk membuat himpunan kondisi input meliputi seluruh syarat syarat fungsional suatu aplikasi. Uji coba black box berusaha untuk menemukan kesalahan dalam beberapa kategori, diantaranya: 1. Fungsi fungsi salah atau hilang. 2. Kesalahan pada antar muka. 3. Kesalahan pada struktur data. Pengujian dengan menggunakan metode pengujian black box dilakukan dengan cara memberikan sejumlah masukan pada aplikasi kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk melihat apakah aplikasi ini menghasilkan sesuatu diinginkan sesuai dengan fungsi dari aplikasi tersebut.

4.1.1 Skenario Pengujian Server Web Skenario pengujian dilakukan untuk menentukan langkah langkah dalam melakukan pengujian. Pengujian dilakukan dalam menjalankan aplikasi. Setelah aplikasi dijalankan, selanjutnya adalah menguji tombol tombol terdapat dalam antarmuka aplikasi tersebut apakah sesuai dengan tahap perancangan. Tabel 4. 1 Skenario pengujian aplikasi server web NotificationCenter No Antarmuka Unit Program Status Skenario Hasil Hasil Aplikasi Pengujian diharapkan 1. Login Menguji inputan Menampil Memasukkan Memunculkan username, kan username dan pesan error jika hasil password dan halaman password, akademik diharapkan, tombol login. login. menekan memasukkan namun belum tombol login akun tidak membatasi valid. jumlah Menampilkan kesalahan login halaman utama jika akun valid. 2 Halaman Menguji menu Menampil Klik menu satu Menu Utama home, kan persatu dipilih dapat hasil pengumuman, halaman membuka diharapkan. poster dan logout utama halaman dimaksud 3 Halaman Menguji drop Menampil Memasukkan Jurusan Pengumum down fakultas, kan form data-data sesuai tampil sesuai hasil an jurusan dan pengumu dengan form dengan fakultas. diharapkan tombol kirim man tersebut Data tersimpan dalam database. 4 Halaman Menguji drop Menampil Memasukkan Jurusan Poster down fakultas, kan form data-data sesuai tampil sesuai hasil jurusan, tombol poster form dan dengan fakultas. diharapkan kirim dan tombol mengunggah Data tersimpan unggah poster poster dalam database. pengumuman. Poster tersimpan di folder server. 4.1.2 Skenario Pengujian Aplikasi Client Skenario pengujian dilakukan untuk menentukan langkah langkah dalam melakukan pengujian. Pengujian dilakukan dalam menjalankan aplikasi. Setelah aplikasi dijalankan, selanjutnya adalah menguji tombol tombol terdapat dalam antarmuka aplikasi tersebut apakah sesuai dengan tahap perancangan.

Tabel 4. 2 Skenario pengujian aplikasi client NotificationCenter No Antarmuka Unit Program Status Aplikasi Skenario Pengujian 1. activity_login Menguji inputan Menampilkan Memasukkan email, nim dan layout email (sebagai tombol login. activity_login. username) dan nim (sebagai password), menekan tombol login 2 activity_main Menguji daftar Menampilkan Memilih salah pengumuman / layout satu poster, tombol activity_main pengumuman. profile, tombol Memilih logout. profile. Memilih logout. 3 activity_ Menguji tombol Menampilkan Menekan view_ pengumuman kembali dan hapus detail informasi pengumuman tombol kembali. Menekan tombol hapus 4 activity_ Menguji tombol Menampilkan Menekan view_ kembali dan detail informasi tombol poster_ hapus poster kembali. pengumuman pengumuman Menekan tombol hapus 5 activity_ Menguji tombol Menampilkan Menekan profile kembali detail informasi tombol mahasiswa kembali. Hasil diharapkan Memunculkan pesan error jika mahasiswa memasukkan akun tidak valid. Menampilkan activity_main jika akun valid. Menampilkan detail pengumuman sesuai nama acara. Menampilkan layout activity_profile. Menampilkan peringatan untuk layout logout. Mahasiswa diarahkan ke layout activity_main. Pengumuman akan terhapus dan diarahkan ke activity_main. Mahasiswa diarahkan ke layout activity_main. Pengumuman akan terhapus dan diarahkan ke activity_main. Mahasiswa diarahkan ke layout activity_main. Hasil hasil diharapkan, namun belum membatasi jumlah kesalahan login hasil diharapkan. hasil diharapkan hasil diharapkan hasil diharapkan

dimasukkan saat registrasi. 6 activity_ Menguji tombol Menampilkan Menekan Mahasiswa register mendaftar form registrasi. tombol diarahkan ke seharusnya, Daftarkan saya. layout login. tetapi belum ada alert jika pendaftaran gagal.