BAB 4 IMPLEMENTASI DAN PENGUJIAN
Bab ini membahas implementasi dan pengujian sistem sesuai dengan analisis dan perancangan sistem pada Bab 3. Penjelasan tentang implementasi sistem dilakukan
untuk mengetahui hasil rancangan aplikasi dan pengujian untuk membuktikan jika aplikasi dapat berjalan dengan baik.
4.1. Implementasi Sistem
Pada tahap ini akan dibahas proses implementasi yang merupakan lanjutan dari analisis dan perancangan. Proses pengimplementasian ini menggunakan hardware dan
software untuk menjalankan aplikasi. Aplikasi mobile sosial media ini ini menggunakan bahasa pemrograman PHP dan Java.
4.1.1. Spesifikasi Perangkat Lunak Spesifikasi perangkat lunak yang digunakan untuk membangun sistem adalah sebagai
berikut: 1.
Sistem operasi Microsoft Windows 7 Ultimate 64-bit 2.
Eclipse Juno 3.
Android versi 4.0 JellyBean 4.
XAMPP versi 1.8.1 5.
MySQL versi 5.5.27 6.
Notepad++6.8.2.
Universitas Sumatera Utara
4.1.2. Spesifikasi Perangkat Keras Spesifikasi perangkat lunak yang digunakan untuk membangun sistem adalah sebagai
berikut: 1.
Prosesor Intel Core i3-370M CPU 2.40 GHz. 2.
Kapasitas harddisk 468 GB. 3.
Memori 4.00 GB RAM DDR3. 4.
Smartphone Android layar 7 inch. 4.1.3. Implementasi Perancangan Antarmuka
Implementasi perancangan antarmuka berdasarkan rancangan yang telah dilakukan pada Bab 3 adalah sebagai berikut
1. Halaman Awal Halaman awal atau tampilan depan yang akan muncul saat membuka aplikasi yaitu
berupa sebuah logo dari aplikasi serta menu pilihan berupa sign in untuk mengakses aplikasi dengan akun user yang terdaftar dan signup untuk membuat akun agar
terdaftar sebagai user aktif. Tampilan halaman awal aplikasi ini dapat dilihat pada gambar 4.1.
Gambar 4.1 Halaman Awal 2. Halaman Sign up
Halaman sign up merupakan halaman awal untuk mendaftar ke aplikasi ini. Pengguna baru memasukkan name, no HP, username, email dan password sesuai
kenginan.Tampilan halaman sign up dapat dilihat pada gambar 4.2.
Universitas Sumatera Utara
Gambar 4.2 Halaman Sign up 3. Halaman Sign in
Pada halaman login, user memberikan username dan password yang telah terdaftar untuk dapat mengakses aplikasi. Tampilan halaman sign in aplikasi ini dapat dilihat
pada gambar 4.3.
Gambar 4.3 Halaman Sign in
4. Halaman Verification User baru yang melakukan tahap sign in untuk pertama kalinya akan diarahkan ke
halaman verifikasi. Sistem akan mengirim kode kepada user dalam melalui sms. User
diminta untuk memasukan 6 digit angka verifikasi yang diterima untuk tahap verifikasi akun. Setelah proses verifikasi akun berhasil, secara otomatis user berhasil
Universitas Sumatera Utara
sign in kedalam aplikasi. Proses verifikasi akun hanya dilakukan sekali yaitu saat melakukan tahap sign in untuk yang pertama kalinya. Tampilan halaman verification
aplikasi ini dapat dilihat pada gambar 4.4.
Gambar 4.4 Halaman Verification
5. Halaman Home Pada halaman home terdapat tiga kolom yaitu kolom invitation, kolom invited dan
kolom friend. Kolom invitation merupakan kolom kumpulan undangan yang pernah dibuat. Kolom invited merupakan kolom kumpulan undangan yang sudah diterima.
Kolom friend merupakan kolom kumpulan pertemanan. Tampilan halaman home dapat dilihat pada gambar 4.5.
Gambar 4.5 Halaman Home
Universitas Sumatera Utara
6. Halaman Menu Terdapat halaman dinamis yang tersembunyi dan akan muncul saat button menu
dipilih. Adapun yang terdapat di halaman menu adalah home, create invitation, search friend, update profile dan logout. Tampilan halaman menu dapat dilihat pada gambar
4.6.
Gambar 4.6 Halaman Menu
7. Create Invitation a. Halaman Pop Up Create Invitation
Tahap awal setelah user memulai fitur create invitation adalah mengisi judul undangan, tanggal dan waktu acara yang akan diadakan. Tampilan pop up create
invitation dapat dilihat pada gambar 4.7.
Universitas Sumatera Utara
Gambar 4.7 Halaman Pop Up Create Invitation
b. Halaman Upload Cover Setelah mengisi field pada pop up create invitation, sistem mengarahkan user ke tahap
awal pembuatan undangan yaitu upload cover. Gambar yang diupload pada halaman cover berfungsi sebagai icon invitation yang muncul di daftar invitation maupun
daftar invited. Tampilan halaman upload cover dapat dilihat pada gambar 4.8.
Gambar 4.8 Halaman Upload Cover
c. Halaman Upload Video Tahap berikutnya setelah mengupload gambar untuk cover, user dapat mengupload
video yang berhubungan dengan acara yang akan diadakan. Dengan menyediakan
Universitas Sumatera Utara
video, user dapat member info mengenai acara dengan cara menarik untuk mengundang ketertarikan para tamu yang mendapatkan undangan. Adapun maksimal
size viedo yang diupload adalah 40mb. Tampilan halaman upload video dapat dilihat pada gambar 4.9.
Gambar 4.9 Halaman Upload Video
d. Halaman Insert Note Tahap selanjutnya adalah tahap insert note . Tahap ini adalah fitur tambahan dimana
user dapat memberikan informasi tambahan mengenai acara yang akan berlangsung. User memberikan informasi mengenai acara yang tidak terdapat pada video atau
gambar yang telah diupload sebelumnya. Tampilan halaman insert note dapat dilihat pada gambar 4.10.
Gambar 4.10 Halaman Insert Note
Universitas Sumatera Utara
e. Halaman Insert Facility Tahap ke-empat dalam create invitation adalah tahap insert facility dimana pada tahap
ini user dapat memberikan informasi mengenai fasilitas-fasilitas yang tersedia pada acara. Seperti photobooth, games, doorprice, souvenir dan lain-lain. User dapat
memberi infomasi ini dengan upload gambar. Terdapat button untuk menambah ataupun menghapus gambar yang sudah diupload. Tampilan halaman insert facilty
dapat dilihat pada gambar 4.11.
Gambar 4.11 Halaman Insert Facility
f. Halaman Insert Dish Pada tahap selanjutnya user dapat memberikan informasi seputar menu hidangan yang
akan disajikan saat acara berlangsung. Terdapat button untuk menambah ataupun menghapus gambar yang sudah diupload. Tahap ini dapat di skip atau dilewatkan.
Tampilan halaman insert dish dapat dilihat pada gambar 4.12.
Universitas Sumatera Utara
Gambar 4.12 Halaman Insert Dish
g. Invite Pada halaman ini user dapat memilih tamu yang akan diundang. Terdapat button
invite friend yang akan mengarahkan user ke daftar pertemanan. User dapat memilih teman yang akan menjadi tamu dengan mencentang checkbox yang disediakan.
Tampilan invite dapat dilihat pada gambar 4.13 dan 4.14.
Gambar 4.13 Halaman List Guest
Universitas Sumatera Utara
Gambar 4.14 Halaman Invite Friend
h. Halaman Search Location Tahap ini adalah salah satu tahap penting yang tidak boleh di skip atau dilewatkan.
User dapat mencari lokasi acara dengan cara drag marker yang disediakan didalam peta. Setelah mendapatkan titik lokasinya user dapat menekan tombol update location
agar sistem dapat mengirim titik koordinat lokasi ke server. Selain itu user juga dapat mengaktifkan gps untuk mendapatkan titik lokasi saat user tepat berada dilokasi acara
yang akan berlangsung. Adapun fitur location ini mengakses data goolge map. Tampilan halaman search location dapat dilihat pada gambar 4.15.
Gambar 4.15 Halaman Search Location
Universitas Sumatera Utara
8. View Invitation a. View Cover
Saat user menerima sebuah undangan, adapun halaman awal yang tampil adalah judul undangan, tanggal serta waktu acara sebagai header dalam halaman cover. Terdapat
gambar yang mewakili cover undangan. Tampilan view cover dapat dilihat pada gambar 4.16.
Gambar 4.16 Halaman View Cover
b. View Video Tamu dapat menikmati video yang sudah terlebih dahulu diupload oleh pemilik
undangan. Video ini dapat berupa informasi mengenai acara yang akan diadakan. Ukuran video tidak boleh melebihi 40mb dan memiliki format mp4. Tampilan view
video dapat dilihat pada gambar 4.17.
Gambar 4.17 Halaman View Video
c. View Note
Universitas Sumatera Utara
Menu selanjutnya yang dapat dilihat oleh tamu dari undangan yang dikirim adalah note yaitu catatan atau informasi tambahan mengenai acara yang akan dilakasanakan.
Tampilan view note dapat dilihat pada gambar 4.18.
Gambar 4.18 Halaman View Note
d. View Facility Menu ketiga yang dapat dilihat pada undangan adalah menu facility dimana terdapat
daftar fasilitas-fasilitas yang ada pada acara seperti photobooth, games, dan souvenir. Tampilan view facility dapat dilihat pada gambar 4.19.
Gambar 4.19 Halaman View Facility
e. View Dish
Universitas Sumatera Utara
Menu selanjutnya yang dapat dilihat dari undangan adalah menu dish. Disini user dapat melihat daftar menu hidangan yang ada pada acara. Tampilan view dish dapat
dilihat pada gambar 4.20.
Gambar 4.20 Halaman View Dish
f. View List Guest Pada halaman list guest user dapat melihat daftar tamu-tamu yang diundang oleh
pengirim. Tampilan view list guest dapat dilihat pada gambar 4.21.
Gambar 4.21 Halaman View Guest
g. View Location
Universitas Sumatera Utara
Menu terkahir yang dapat dilihat oleh user yaitu menu location dimana lokasi acara di tampilkan dalam sebuah peta yang mengakses google map. User sebagai tamu yang
nantinya akan menghadiri acara dapat meminta rute menuju lokasi acara dengan mengaktifkan gps terlebih dahulu. Adapun fitur rute ini sudah tersedia pada google
map. Tampilan halaman location dapat dilihat pada gambar 4.22.
Gambar 4.22 Halaman View Location
g. Halaman Comment Terdapat fitur comment dimana user dapat memberikan komentar mengenai udangan
yang diterima. Fitur comment ini terdapat pada halaman invitation dimana user dapat memberikan komentar mengenai acara yang akan berlangsung. Setelah memberikan
comment pada box yang disediakan, akan muncul foto dan nama user, komentar yang diberikan beserta keterangan waktu. Tampilan halaman comment dapat dilihat pada
gambar 4.23.
Universitas Sumatera Utara
Gambar 4.23 Halaman Comment
9. Halaman Update Profile Pada halaman update profile user mengganti nama, nomor telepon, alamat dan profil
foto. Tampilan halaman update profile dapat dilihat pada gambar 4.24.
Gambar 4.24 Halaman Update Profile
10. Halaman Search Friend User dapat mencari dan menemukan akun user lainnya dengan mengisi nama user
yang akan ditemukan pada field yang disediakan. Tampilan halaman search friend dapat dilihat pada gambar 4.25.
Universitas Sumatera Utara
Gambar 4.25 Halaman Search Friend
11. Halaman Profile Pada halaman profile, user dapat melihat profil foto user lainnya. User juga dapat
melihat undangan yang telah dibuat, undangan yang telah diterima maupun daftar pertemanan user lainnya. Halaman ini juga tersedia pilihan untuk menambahkan user
lain menjadi teman dengan mencentang checkbox add friend. Apabila user telah menkonfirmasi permintaan pertemenan maka status akan berubah menjadi friend.
Tampilan halaman profile dapat dilihat pada gambar 4.26.
Gambar 4.26 Halaman Profile
Universitas Sumatera Utara
4.2. Evaluasi Pengujian Sistem
