Perancangan Relasi antar Tabel

Status varchar20 - 8. Tabel Comment Tabel ini berisi tentang komentar dari para user ysng diundang. Struktur tabel comment dapat pada Tabel 3.8. Tabel 3.8 Tabel Comment Nama Field Tipe Ekstra id_comment int5 Primary Key AUTO_INCREMENT id_undangan int5 - id_user int11 - comment Text - waktu Timestamp -

3.5.2. Perancangan Relasi antar Tabel

Rancangan relasi atau hubungan antar tabel berfungsi untuk menampilkan informasi relasi antara satu tabel dengan tabel yang lain dalam satu database. Rancangan antar tabel dapat dilihat pada Gambar 3.7 berikut ini : Universitas Sumatera Utara Gambar 3.7 Relasi antar Tabel 3.6. Perancangan Antar Muka Seperti aplikasi sosial media yang berkembang saat ini, aplikasi ini juga dirancang dengan tampilan menarik dan user friendly. Adapun rancangan antar muka aplikasi ini sebagai berikut : 1. Halaman Awal Halaman awal atau tampilan depan yang akan muncul saat membuka aplikasi yaitu berupa sebuah logo serta menu signin dan menu signup . Rancangan halaman awal aplikasi dapat dilihat pada gambar 3.8. Universitas Sumatera Utara Gambar 3.8 Rancangan Halaman Awal 2. Halaman Sign Up Pada halaman sign up, terdapat field untuk mengisi name, no HP, username, email dan password yang akan didaftar. Rancangan halaman sign up dapat dilihat pada gambar 3.9. Gambar 3.9 Rancangan Halaman Sign up 3. Halaman Sign in Universitas Sumatera Utara Pada halaman sign in, terdapat field untuk mengisi username dan password. Rancangan halaman sign in dapat dilihat pada gambar 3.10. Gambar 3.10 Rancangan Halaman Sign in 4. Halaman Verification Pada halaman verification, terdapat field untuk mengisi kode varikasi dan button verify. Rancangan halaman login dapat dilihat pada gambar 3.11. Gambar 3.11 Rancangan Halaman Verification Universitas Sumatera Utara 5. Halaman Home Pada halaman home, terdapat daftar jumlah invitation, invited dan friend. Rancangan halaman home dapat dilihat pada gambar 3.12. Gambar 3.12 Rancangan Halaman Home 6. Halaman Menu Pada tampilan menu, terdapat halaman tersembunyi pada bagian kanan dan memiliki beberapa fitur. Rancangan halaman menu dapat dilihat pada gambar 3.13. Gambar 3.13 Rancangan Halaman Menu Universitas Sumatera Utara 7. Halaman Create Invitation a. Pop Up Create Invitation Saat user memilih fitur create invitation maka akan keluar tampilan awal berupa box yang berisi field title sebagai judul untuk undangan yang akan diupload serta date dan time untuk keterangan waktu acara dilaksanakan. Rancangan pop up create invitation dapat dilihat pada gambar 3.14. Gambar 3.14 Rancangan Pop Up Create invitation b. Halaman Upload Cover Pada halaman cover, terdapat button untuk upload gambar. Pada tahap ini user upload undangan dalam format gambar yang akan digunakan sebagai cover undangan . Rancangan halaman cover dapat dilihat pada gambar 3.15. Gambar 3.15 Rancangan Halaman Upload Cover Universitas Sumatera Utara c. Halaman Upload Video Pada halaman ini terdapat button untuk upload video. User dapat menunjukan informasi mengenai acara yang akan diadakan dalam bentuk video sebagai penambah ketertarikan untuk para tamu yang akan diundang. Rancangan halaman upload video dapat dilihat pada gambar 3.16. Gambar 3.16 Rancangan Halaman Upload Video d. Halaman Insert Note Pada halaman insert note terdapat kolom yang dapat diisi untuk sebagai informasi tambahan . Rancangan halaman insert note dapat dilihat pada gambar 3.17. Gambar 3.17 Rancangan Halaman Insert Note Universitas Sumatera Utara e. Halaman Insert Facility Pada halaman insert facility, terdapat button add untuk upload fasilitas dalam bentuk gambar. Selain itu terdapat button delete untuk menghapus gambar yang sudah di upload. Rancangan halaman insert facility dapat dilihat pada gambar 3.18. Gambar 3.18 Rancangan Halaman Insert Facility f. Halaman Insert Dish Pada halaman insert dish, terdapat button add untuk upload menu makanan dalam bentuk gambar. Selain itu terdapat button delete untuk menghapus gambar yang sudah diupload. Rancangan halaman insert dish dapat dilihat pada gambar 3.19. Gambar 3.19 Rancangan Halaman Insert Dish Universitas Sumatera Utara g. Invite Pada halaman guest, terdapat button invite friend untuk mengarahkan kedalam daftar pertemanan agar dapat diundang sebagai tamu. Rancangan halaman invite dapat dilihat pada gambar 3.20 dan 3.21. Gambar 3.20 Rancangan Halaman List Guest Gambar 3.21 Rancangan Halaman Invite Friend h. Halaman Search Location Universitas Sumatera Utara Pada halaman search location, user menentukan sendiri titik lokasi acara dengan cara menggeserkan marker yang disediakan. Rancangan halaman search location dapat dilihat pada gambar 3.22. Gambar 3.22 Rancangan Halaman Search Location 8. View Invitation a. View Cover Halaman untuk melihat informasi utama undangan berupa cover. Rancangan halaman Cover dapat dilihat pada gambar 3.23. Gambar 3.23 Rancangan Halaman Cover Universitas Sumatera Utara b. View video Halaman untuk melihat informasi utama mengenai acara dalam bentuk video. Rancangan halaman video dapat dilihat pada gambar 3.24. Gambar 3.24 Rancangan Halaman Video c. View note Halaman untuk melihat informasi tambahan mengenai acara dalam bentuk tulisan. Rancangan halaman note dapat dilihat pada gambar 3.25. Gambar 3.25 Rancangan Halaman Note Universitas Sumatera Utara d. View facility Halaman untuk melihat informasi mengenai fasilitas yang disediakan dalam acara. Rancangan halaman facility dapat dilihat pada gambar 3.26. Gambar 3.26 Rancangan Halaman Facility e. View dish Halaman untuk melihat informasi mengenai menu hidangan yang akan disajikan dalam acara. Rancangan halaman dish dapat dilihat pada gambar 3.27. Gambar 3.27 Rancangan Halaman Dish Universitas Sumatera Utara f.View List Guest Halaman untuk melihat informasi mengenai daftar tamu-tamu yang diundang. Rancangan halaman list guest dapat dilihat pada gambar 3.28. Gambar 3.28 Rancangan Halaman View List Guest g. View location Halaman untuk melihat informasi mengenai lokasi acara. Terdapat juga fitur direction, dimana tamu dapat meminta rute menuju lokasi acara. Rancangan halaman location dapat dilihat pada gambar 3.29. Gambar 3.29 Rancangan Halaman Location Universitas Sumatera Utara h. Halaman Comment Halaman untuk memberikan komentar mengenai acara yang akan diadakan. Rancangan halaman comment dapat dilihat pada gambar 3.30. Gambar 3.30 Rancangan Halaman Comment 9. Halaman Update Profile Pada halaman ini user dapat mengganti informasi data diri berupa nama, nomor telepon, alamat dan foto yang digunakan untuk menjadi photo profile. Rancangan halaman update profile dapat dilihat pada gambar 3.31. Gambar 3.31 Rancangan Halaman Update Profile location Universitas Sumatera Utara 10. Halaman Search Friend Pada halaman user dapat mencari teman yang terdaftar dengan mengisi nama pada field yang disediakan. Rancangan halaman search friend dapat dilihat pada gambar 3.32. Gambar 3.32 Rancangan Halaman Search Friend 11. Halaman Profile Pada halaman profile, terdapat fitur add friend dibagian atas photo profile. Selain itu terdapat list invitation, invited, dan friend. Rancangan halaman profile dapat dilihat pada gambar 3.33. Gambar 3.33 Rancangan Halaman Profile Universitas Sumatera Utara 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