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