BAB III ANALISA DAN PERANCANGAN

(1)

Bab ini menjelaskan analisa dan proses perancangan aplikasi tentang kegiatan multiuser dalam aplikasi agenda online. Hasil analisa dan proses perancangan akan diterapkan kedalam pembangunan aplikasi.

Metode pelaksanaan yang akan diimplementasikan ke pembangunan aplikasi agenda online pada penyusunan tugas ini adalah sebagai berikut:

3.1 Analisa

3.1.1 Analisa Aplikasi yang Akan Dikembangkan

Pada aplikasi sebelumnya “Aplikasi Sinkronisasi Kegiatan Multi User Dalam Agenda Online” Ma‟arif. (2012) sudah terdapat sebuah aplikasi agenda yang dapat digunakan pengguna untuk membantu mengatur perancangan agenda yang akan dijalankan.

Tabel 3.1.1 Analisa Fitur Aplikasi Sebelumnya Fitur Aplikasi Deskripsi

Pendaftaran

Pengguna Fungsi pengguna yang belum terdaftar untuk dapat mendaftar pada aplikasi, sehingga dapat menggunakan aplikasi nantinya Login Fungsi untuk identifikasi pengguna untuk masuk ke dalam

aplikasi dan menggunakan aplikasi sesuai dengan haknya Agenda Daftar dari agenda yang telah dibuat ataupun yang akan

dijalani oleh pengguna

Buat Agenda Fungsi untuk membuat agenda baru

Sinkronisasi Fungsi untuk mengambil jadwal agenda anggota yang beririsan dengan jadwal agenda saat ini

(2)

Seperti banyak penelitian lain, aplikasi tersebut juga memiliki beberapa fitur untuk ditambahkan atau diperbaiki. Hal ini juga disadari oleh penulis sebelumnya dimana beliau menyarankan untuk melanjutkan aplikasi tersebut pada bagian :

1. Membuat range waktu untuk pelaksanaan agenda, sehingga agenda tidak hanya untuk agenda satu hari

2. Memiliki data menit pada jam pelaksanaan agenda, sehingga agenda akan lebih jelas waktu pelaksanaannya 3. Membuat sebuah aplikasi agenda ini dapat berjalan pada

aplikasi bergerak seperti Android

Selain hal yang disarankan, penulis juga merasa perlu menambahkan :

1. Opsi agenda menjadi agenda pribadi atau agenda terbuka 2. Fitur map untuk lokasi kegiatan agenda

3. Fitur lupa password

3.1.2 Analisa Kebutuhan/ Solusi/ Pengembangan dari Alpikasi Sebelumnya

Dari hasil analisa permasalahan di atas, dapat dianalisa untuk mencari kebutuhna, solusi, dan jalan untuk menyelesaikan permasalahan tersebut. Dari analisa penulis, maka penulis mendapat kesimpulan untuk solusi tersebut yaitu :

1. Membuat variable tambahan untuk waktu kegiatan agenda. Jadi tidak hanya variable waktu mulai agenda tapi juga membuat variable waktu selesai agenda

(3)

3. Membuat aplikasi pendukung pada sistem Android

4. Membuat sebuah tanda pada agenda di mana tanda tersebut merupakan tanda yang menentukan agenda tersebut agenda pribadi atau agenda terbuka sehingga jika agenda tersebut merupakan agenda terbuka, maka pengguna lain dapat melihat dan mendaftar pada agenda tersebut

5. Dengan menggunakan API dari Google Map, penulis dapat memanfaatkannya untuk menambahkan fitur map pada aplikasi ini

6. Menambahkan fungsi lupa password dengan cara pengguna me-input email pengguna dan sistem akan mengirimkan password baru ke email pengguna

Tabel 3.1.2 Analisa Kebutuhan dan Solusi Sebelumnya Pengembangan Solusi

Hanya tanggal

mulai Range pelaksanaan waktu agenda

Membuat variable waktu berupa variable waktu mulai dan variable waktu selesai

Waktu agenda hanya pilihan dalam jam Detail menit pada waktu agenda

Menambahkan pilihan menit pada form pembuatan agenda

Tidak ada Agenda Online pada Modile Device

Membuat agenda online pada Android

Tidak ada Sifat agenda terbuka atau tertutup

Membuat tanda pada agenda, dengan maksud agenda tersebut adalah agenda tertutup atau agenda terbuka

Tidak ada Map lokasi

agenda Menggunakan API Google Map untuk dapat menampilkan map lokasi agenda Tidak ada Lupa password Membuat form lupa password yang akan

membuat acak password baru dan mengirimkan melalui email

(4)

Setelah mengidentifikasi masalah dan penyelesaian, maka penulis memutuskan bahasa permrograman yang akan diimplementasikan kedalam pembangunan aplikasi agenda online ini adalah bahasa pemrograman PHP framework CodeIgniter dengan model MVC (Model View Controller), MySQL, Java untuk Android serta Client Side Script seperti HTML, CSS dan Javascript.

Untuk menggunakan bahasa PHP maka kita perlu meletakan script ini di server Appache. Hal ini untuk mengeksekusi code PHP tersebut sesuai dengan rancangannya.

Selain memiliki server untuk menjalankan bahasa PHP tersebut, di server tersebut juga akan memiliki MySQL sebagai basis datanya.

Untuk aplikasi Android, kita hanya perlu perancangan agar aplikasi Android tersebut dapat membaca data yang ada pada basis data MySQL. Hal ini mengakibatkan aplikasi ini nantinya juga dapat berjalan pada sistem operasi yang menggunakan Android.

3.2 Perancangan

3.2.1 Perancangan Use Case Diagram

Perancangan use case diagram pada aplikasi ini akan menggunakan dua aktor, yaitu pengguna yang belum terdaftar dan user yang sudah terdaftar. Berikut adalah rancangan use case diagram :

a. Guest

(5)

Pendaftaran Guest Email Konfirmasi Konfirmasi Pendaftaran Lupa Password extends

Gambar 3.2.1 Use CaseGuest

Tabel 3.2.1 Use CaseDescription Pendaftaran Nama Use Case Pendaftaran

Aktor Guest

Deskripsi Fungsi untuk pengguna mendaftar dari status tidak terdaftar menjadi terdaftar sehingga dapat menggunakan fungsi lain yang menjadi hak pengguna

Normal course Users Sistem

1. Memilih halaman pendaftaran pengguna

2. Sistem menampilkan form pendaftaran

3. Mengisi form pendaftaran dan mengirim ke sistem

4. Validasi data

5a. Data diterima. Validasi kecocokan password dan pengulangan password 6a. Password sama, maka simpan data pada basis data

7. Kirim data konfirmasi pendaftaran menggunakan email dan tampilkan pesan „pendaftaran berhasil silahkan cek email‟

(6)

Lanjutan Tabel 3.2.1 Use CaseDescription Pendaftaran

Alternate Course 5b. Data tidak diterima.

Kembalikan pada tampilan form pendaftaran dengan pesan „data tidak valid‟ 6b. Password tidak sama.

Kembalikan pada tampilan form pendaftaran dengan pesan „pendaftaran gagal karena password berbeda‟

Pre-Condition Akses halaman pendaftaran

Post-Condition Halaman pesan hasil pendaftaran

Assumtion - Pengguna telah mengetahui alamat pendaftaran

- Pengguna telah memiliki email untuk keperluan pendaftaran

Tabel 3.2.2 Use CaseDescription Konfirmasi Pendaftaran Nama Use case Konfirmasi Pendaftaran

Aktor Guest

Deskripsi Fungsi untuk konfirmasi keaktifan pendaftaran dari pengguna

1. Membuka email 2. Klik link konfirmasi

email

3. Validasi kode konfirmasi 4a. Data diterima. Ubah status

pengguna menjadi pengguna aktif

(7)

Lanjutan Tabel 3.2.2 Use CaseDescription Konfirmasi Pendaftaran

5. Tampilkan halaman login dan persilahkan pengguna untuk login menggunakan username dan password yang telah terdaftar

Alternate Course 4b. Data tidak diterima.

Kembalikan pada tampilan form login dengan pesan „kode validasi salah‟

Pre-Condition Akses email pengguna konfirmasi

Post-Condition Halaman pesan hasil konfirmasi dan halaman login

Assumtion - Dapat mengakses email sendiri

- Sudah pernah mendaftar di aplikasi ini sebelumnya

Tabel 3.2.3 Use CaseDescription Lupa Password

Nama Use case Lupa Password

Aktor Guest

Deskripsi Fungsi untuk mengirimkan ulang password baru kepada pengguna yang telah lupa password sebelumnya

1. Mengakses halaman lupa password 2. Memasukkan email

pada form lupa password

3. Validasi email

4a. Email ditemukan dan mengirimkan password baru ke email tersebut

(8)

Lanjutan Tabel 3.2.3 Use CaseDescription Lupa Password

5. Tampilkan halaman login dan persilahkan pengguna untuk login menggunakan username dan password yang baru dengan pesan password baru telah dikirim melalui email

Alternate Course 4b. Email tidak ditemukan

atau belum terdaftar. Tampilkan pesan bahwa email belum terdaftar

Pre-Condition Akses halaman lupa password

Post-Condition Halaman pesan hasil proses dan halaman login

(9)

b. Users

Berikut adalah gambar use case diagram untuk users.

users Login Logout Lihat Agenda Buat Agenda Pribadi Rubah Agenda Milik Sendiri Perteman GroupTeman Email Agenda Email Perubahan Agenda Email Perteman Email Pemberitahuan Group Agenda Terbuka Email Agenda Terbuka extends extends extends extends extends include include include include include include include

(10)

Tabel 3.2.4 Use caseDescriptionLogin

Nama Use Case Login

Aktor Guest

Deskripsi Fungsi untuk masuk ke dalam aplikasi dan menandakan pengguna tersebut adalah pengguna yang berhak

1. Membuka aplikasi

2. Tampilkan form login 3. Kirim username dan

password pada form login

4. Validasi data

5a. Data cocok. Ciptakan session penanda login pengguna dan tampilkan halaman muka aplikasi

Alternate Course 5b. Data tidak cocok.

Tampilkan halaman login dengan pesan „login gagal. Username dan password tidak cocok‟

Pre-Condition Halaman login aplikasi

Post-Condition Halaman muka aplikasi

Assumtion - Pengguna sudah mengetahui cara membuka aplikasi

(11)

Tabel 3.2.5 Use CaseDescription Lihat Agenda Nama Use Case Lihat Agenda

Aktor Pengguna Terdaftar

Deskripsi Fungsi untuk menampilkan daftar agenda yang akan diikuti dan daftar agenda undangan

1. Membuka alamat daftar agenda

2a. Tampilkan daftar agenda yang akan dijalankan dan daftar agenda undangan

Alternate Course 2b. Tampilkan pesan bahwa

tidak ada agenda

Pre-Condition Pengguna sudah yang memiliki sesi login

Post-Condition Halaman daftar agenda

Assumtion - Pengguna sudah melakukan login pada aplikasi

Tabel 3.2.6 Use CaseDescription Buat Agenda Nama Use Case Buat Agenda

Deskripsi Fungsi untuk membuat sebuah agenda baik itu nantinya menjadi agenda terbuka atau tertutup

1. Membuka form agenda baru

2. Tampilkan form agenda baru

3. Kirim data agenda baru yang direncanakan

(12)

Lanjutan Tabel3.2.6 Use CaseDescription Buat Agenda

5a. Data cocok. Simpan data agenda baru

6. Kirim email

pemberitahuan untuk merespon undangan agenda

Tampilkan pesan kesalahan

Pre-Condition Pengguna sudah yang memiliki sesi login

Post-Condition Halaman daftar agenda beserta agenda baru

- Pengguna sudah memiliki beberapa teman untuk diundang

dalam agenda

Tabel 3.2.7 Use CaseDescription Ubah Agenda Milik Sendiri Nama Use Case Ubah Agenda Milik Sendiri

Aktor Pengguna terdaftar

Deskripsi Fungsi untuk mengubah elemen yang ada pada agenda menjadi agenda yang sesuai

1. Memilih agenda yang akan diubah

2. Tampilkan form agenda dengan data agenda lama 3. Kirim data agenda baru

(13)

Lanjutan Tabel3.2.7 Use CaseDescription Ubah Agenda Milik Sendiri

4. Validasi data

5a. Data cocok. Simpan data agenda

6. Kirim email

pemberitahuan untuk pemberitahuan perubahan agar pengguna undangan dapat merespon undangan agenda

Tampilkan pesan kesalahan

Pre-Condition Daftar agenda milik sendiri

Post-Condition Halaman daftar agenda beserta agenda baru

- Pengguna sudah memiliki beberapa teman untuk diundang

dalam agenda

- Pengguna mengetahui agenda yang akan diubah

Tabel 3.2.8 Use CaseDescription Terima atau Tolak Agenda Undangan Nama Use Case Terima atau Tolak Agenda Undangan

Deskripsi Fungsi untuk menentukan apakah mengikuti atau menolak sebuah agenda undangan dari pengguna lain

1. Memilih agenda undangan

(14)

Lanjutan Tabel3.2.8 CaseDescription Terima atau Tolak Agenda Undangan

3. Ambil keputusan untuk agenda

4a. Simpan data agenda disetujui

5a. Kirim email persetujuan kepada pemilik agenda 6a. Tampilkan agenda tersebut

dalam kalender agenda

Alternate Course 4b. Simpan data agenda

ditolak

5b. Kirim email penolakan kepada pemilik agenda 6b. Tampilkan agenda tersebut

dalam daftar agenda ditolak

Pre-Condition Daftar agenda undangan

(15)

Tabel 3.2.9 Use CaseDescription Agenda Terbuka Nama Use Case Agenda Terbuka

Deskripsi Fungsi untuk mendaftar pada sebuah agenda terbuka yang dibuat oleh pengguna lain

1. Membuka daftar agenda terbuka

2. Memilih agenda terbuka yang ingin diikuti

3. Kirim permintaan mengikuti agenda

4. Simpan data permintaan dan kirim email

pemberitahuan kepada pemilik agenda

5a. Kirim email persetujuan kepada pemilik agenda 6a. Tampilkan agenda tersebut

dalam kalender agenda

Alternate Course 4b. Simpan data agenda

ditolak

5b. Kirim email penolakan kepada pemilik agenda 6b. Tampilkan agenda tersebut

dalam daftar agenda ditolak

Pre-Condition Daftar agenda undangan

(16)

Tabel 3.2.10 Use CaseDescription Pertemanan Nama Use Case Pertemanan

Deskripsi Fungsi untuk menghubungkan antara satu pengguna dengan pengguna lainnya sehingga dapat membuat sebuah agenda yang sama

1. Membuka daftar pengguna

2. Memilih pengguna lain yang akan diundang dalam pertemanan

3. Menyimpan data permintaan pertemanan dan mengirim email kepada pengguna lain 4a. Permintaan pertemanan

diterima

5a. Menyimpan hasil keputusan pertemanan

Alternate Course

4b. Permintaan pertemanan ditolak

Pre-Condition Daftar pengguna keseluruhan

Post-Condition Hasil pertemanan

(17)

Tabel 3.2.11 Use CaseDescription Group Pertemanan Nama Use Case Group Pertemanan

Deskripsi Fungsi untuk membuat sebuah kelompok untuk pengguna-pengguna yang sudah berteman

1. Membuka form pembuatan group 2. Kirim data group dan

pilihan anggota

pengguna dalam group

3. Validasi data

4a. Simpan data group dan kirim email kepada

pengguna yang didaftarkan

Alternate Course 4b. Kembali ke form group

dan tampilkan pesan gagal

Pre-Condition Form group pertemanan

Post-Condition Daftar group yang ada

- Pengguna telah memiliki hubungan teman terhadap

(18)

Tabel 3.2.12 Use CaseDescriptionLogout

Nama Use Case Logout

Deskripsi Fungsi untuk menghapus sesi pengguna dan keluar dari aplikasi

1. Klik link logout

2. Sistem menghapus data sesi pengguna

3. Tampilkan halaman login

Alternate Course

Pre-Condition Aplikasi

Post-Condition Form login

3.2.2 Perancangan Activity Diagram

Berdasarkan use case di atas, maka dapat dibuat perancangan activity diagram untuk aplikasi ini. Dokumentasi perancangan ini akan memudahkan dalam membaca struktur kerja dari sebuah aplikasi.

(19)

a. Pendaftaran

Activity diagram untuk pendaftaran adalah activity diagram yang merupakan diagram untuk guest saat akan mendaftarkan dirinya terhadap aplikasi ini agar dapat menggunakan fasilitas aplikasi.

Pendaftaran

System Guest

Isi form pndaftaran

Kirim Emai Kode Konfirmasi Konfirmasi Kode Pendaftaran Apakah Kode Konfirmasi Benar? Salah Ubah Status Menjadi User Aktif

Benar Cek Kode

(20)

b. Login

Untuk activity diagram login ini, pengguna dapat masuk ke dalam sistem dengan mencatatkan sesi dirinya pada aplikasi sehingga aplikasi dapat membaca informasi data pengguna tersebut

Login

System Users

Mengisi Form Login

Cek Kecocokan User dan Sandi

Apakah Cocok?

User Login Iya Tidak

(21)

c. Pertemanan

Pada activity diagram pertemanan, pengguna akan dapat mengirimkan undangan pertemanan kepada pengguna lain. Sehingga hal ini akan menjadikan pengguna dapat membuat agenda bersama Pertemanan System Users Kirim Undangan Pertemanan Kirim Email Pemberitahuan Status Menunggu Konfirmasi Apakah Pertemanan Diterima Status Pertemanan Terhubung Pengguna dapat saling mengundang agenda Iya

Tidak

Status Pertemanan Ditolak Pengguna Tidak dapat membuat agenda bersama

(22)

d. Pembuatan Group

Group hanya untuk pengguna yang telah terhubung sebagai teman. Fasilitas ini akan membuat pengguna dapat membuat group bersama dan saat membuat agenda tidak perlu memilih teman satu persatu sehingga memudahkan pengguna

Group User System Users Buat Group Masukkan Daftar User Simpan Daftar User Dalam Group Kirim Email Kepada

Users Undangan

(23)

e. Agenda

Activity diagram agenda merupakan alur agenda tercipta. Dimana pengguna dapat membuat agenda sendiri atau besama teman. Selain itu, pada agenda ini pengguna dapat menentukan nantinya saat mengisi form agenda sebagai agenda tertutup atau agenda terbuka Agenda System Users sudah belum Tolak Terima

Isi form agenda

Tunggu konfirmasi peserta Tolak atau Terima Agenda terkonfirmasi semua peserta Konfirmasi peserta?

(24)

f. Mendaftar Pada Agenda Terbuka

Pengguna yang terdaftar dapat melihat seluruh agenda terbuka yang dibuat pengguna lain. Pengguna tersebut juga dapat mendaftar pada agenda terbuka tersebut. Walau dapat mendaftar dengan bebas, tapi menjadi hak pemilik agenda untuk memutuskan siapa saja yang dapat mengikuti agenda tersebut

Daftar Agenda Terbuka

System Users

Iya

Tidak Email Permintaan Ditolak

Daftar Agenda Email Pendaftaran Agenda

Buka Agenda Terbuka

Permintaan

Diterima Email Permintaan Dierima

(25)

g. Logout

Setelah menggunakan aplikasi ini, hendaknya pengguna menghapus sesi dirinya untuk menghindari hal-hal yang tidak diinginkan

Logout

System Users

Pilih Logout

Hapus Sesi User

Gambar 3.2.9 Activity Diagram Logout 3.2.3 Perancangan Sequence Diagram

Setelah mendapat rancangan dari use case diagram dan activity diagram, maka dapat kita buat sebuah perancangan yang akan menggambarkan interaksi antar object pada tiap waktunya. Perancangan ini adalah perancangan sequence diagram yang akan menjelaskan bagaimana jalannya sebuah fungsi-fungsi aplikasi dalam tiap objectnya.

a. Pendaftaran

Sequence diagram pada fungsi pendaftaran ini nantinya akan menjelaskan bagaimana pengguna akan melalui tiap objectnya dari waktu ke waktu sehingga dapat mendaftar dan menjadi pengguna yang dapat menggunakan fungsi aplikasi lainnya

(26)

Form Register Data Entry Controller Check Data Center IsiForm() PostData() CheckData() SimpanData() KirimEmail() true Data tersimpan false users

Gambar 3.2.10 Sequence Diagram Pendaftaran b. Login

Pada fungsi login, pengguna akan dipaparkan untuk masuk ke dalam aplikasi dan membuat sesi pada aplikasi

Form Login Data Center

IsiForm() Controller Dashbord PostData() true LoadData() false users

(27)

c. Pertemanan

Sequence diagram pada fungsi pertemanan ini, akan digambarkan bagaimana seorang pengguna akan menjalin pertemanan terhadap pengguna lain

Daftar Users Data Center

PilihUser()

KirimPermintaan() TandaiPermintaan() SimpanKeputusan()

users

Gambar 3.2.12 Sequence Diagram Pertemanan d. Pembuatan Group

Sequence diagram pembuatan group ini akan menampilkan bagaimana alur pembuatan group dari tiap satuan waktunya

Form Group Data Center

EmailPemberitahuan() IsiForm()

SimpanData() users

(28)

e. Agenda

Sequence diagram untuk menggambarkan alur object pembuatan agenda

Form Agenda Data Center

KirimKonfirmasi() IsiForm() KonfirmasiAgenda() SimpanData() DaftarAgendaTerbuka() SimpanData() users

Gambar 3.2.14 Sequence Diagram Agenda 3.2.4 Perancangan Basis Data

Pada perancangan basis data ini, akan dipaparkan dalam tiga tahapan perancangan. Tahapan ini merupakan tahapan yang berurutan. Hal ini berarti perancangan ini akan dimulai dari tahapan pertama dan berurut ke tahapan selanjutnya.

3.2.4.1 Perancangan Konseptual

Perancangan ini adalah perancangan dasar yang tidak dapat langsung diimplementasikan pada aplikasi. Hal ini dikarenakan terdapat

(29)

Perancangan konseptual untuk basis data aplikasi ini adalah sebagai berikut :

users PK id_users name email user_group PK user_group name FK1 id_users agenda PK id_agenda name waktu tempat FK1 id_users UsersAgenda UsersGroup 0...* 1...* 1...* 0...* user_pertemanan PK id_user_pertemanan pertemanan FK1 id_users UsersPer teman an *...1 1...*

Gambar 3.2.15 Perancangan Basis Data Konseptual

Pada Gambar 3.2.15 dapat dilihat bahwa perancangan Basis Data Konseptual ini tidak dapat langsung diimplementasikan pada basis data aslinya. Hal ini dikarenakan table-table yang terbentuk adalah table dengan relasi many-to-many artinya table di atas belum dalam bentuk table normal.

Table-table yang belum normal di atas adalah table users yang berelasi terhadap table agenda dan table users yang berelasi terhadap table user_group. Jadi tiap data pada table users dapat memiliki lebih dari 1

(30)

relasi data pada table agenda. Seperti itupula sebaliknya, tiap data agenda dapat memiliki lebih dari 1 data pada table users. Hal inilah yang diperlukan perancangan lanjutan yaitu perancangan logikal untuk membentuk table baru yang akan mengubah relasi many-to-many menjadi relasi one-to-many.

3.2.4.2 Perancangan Logikal

Dari perancangan konseptual, maka dibuatkan sebuah perancangan logikalnya. Pada perancangan inilah yang dibuat agar perancangan konseptual dapat diimplementasikan pada basis data nyata. Pada perancangan ini, akan terdapat tabel tambahan untuk memisahkan relasi many-to-many menjadi relasi one-to-many. Berikut adalah gambar dari rancangan logical untuk aplikasi ini :

users PK id_users name email agenda_group agenda_group_users PK id_agenda_group_users FK1 id_users FK2 id_agenda_group agenda PK id_agenda name waktu tempat FK1 id_users peserta_agenda PK id_peserta_agenda FK2 id_agenda FK1 id_users user_pertemanan PK id_user_pertemanan pertemanan id_users

(31)

Setelah tercipta perancangan logikanya, terlihat bahwa tabel di atas sudah dalam bentuk normal forms. Tabel di atas telah memiliki Primary Key, Foreign Key, dan tabel relasi many-to-many sudah diciptakan tabel relasi sehingga terbentuk tabel relasi one-to-many. 3.2.4.3 Perancangan Fisikal

Pada perancangan fisikal, basis data akan terlihat struktur field tiap tabel. Sehingga dapat kita rancang sebuah bentuk nyata dari basis data dan tabel basis data ini nantinya dapat digunakan aplikasi untuk menyimpan data-data kegiatan pada aplikasi.

a. Tabel users

Tabel user akan digunakan untuk menyimpan data-data pengguna yang terdaftar di aplikasi.

Tabel 3.2.13 users pada Basis Data

Field Jenis Kosong Default Ekstra Indeks

id_users int(11) Tidak Tidak AI Primary nama varchar(25) Tidak Noname

email varchar(40) Tidak Noemail Unique

sandi varchar(88) Tidak Nopassword

b. Tabel user_pertemanan

Tabel ini adalah tabel penyimpan relasi hubungan pertemanan dari pengguna satu dan pengguna lainnya.

(32)

Tabel 3.2.14 user_pertemanan pada Basis Data

Field Jenis Kosong Default Ekstra Indeks

id_users_pertemanan int(11) Tidak Tidak Auto_increment Primary

id_users int(11) Tidak NULL Foreign

pertemanan int(11) Tidak NULL

c. Tabel peserta_agenda

Tabel ini adalah tabel yang menyimpan daftar pengguna yang ikut dalam sebuah agenda. Pada tabel ini juga ditampilkan status keputusan pengguna tersebut pada kondisi agendanya.

Tabel 3.2.15 peserta_agenda pada Basis Data

id_peserta_agenda int(11) Tidak Tidak Auto_increment Primary

status tinyint(1) Tidak 1

 Status hanya menampilkan 1 sebagai belum direspon, 2 disetujui dan 3 ditolak

d. Tabel agenda

Tabel ini menyimpan data agenda master yang dibuat oleh pengguna

Tabel 3.2.16 agenda pada Basis Data

id_ agenda int(11) Tidak Tidak Auto_increment Primary nama_agenda varchar(30) Tidak NULL

(33)

Lanjutan Table 3.2.16 agenda pada Basis Data

tanggal_dari datetime Tidak NULL tanggal_sampai datetime Tidak NULL lokasi varchar(100) Tidak NULL

koor_x double Tidak NULL

koor_y double Tidak NULL

keterangan text Tidak NULL

 Sifat hanya menampilkan 1 sebagai agenda tertutup dan 2 agenda terbuka

e. Tabel agenda_group_users

Tiap peserta dalam sebuah group pertemanan akan disimpan disini.

Tabel 3.2.17 agenda_group_users pada Basis Data

id_ agenda

_group_users int(11) Tidak Tidak Auto_increment Primary

id_agenda_group int(11) Tidak NULL Foreign

f. Tabel agenda_group

Data agenda group yang dibuat oleh pengguna, maka data tersebut akan disimpan pada tabel ini.

(34)

Tabel 3.2.18 agenda_group pada Basis Data

id_ agenda_group int(11) Tidak Tidak Auto_increment Primary

nama_group varchar(25) Tidak NULL

3.2.5 Perancangan User Interface

Pada perancangan user Interface akan digambarkan tampilan dari aplikasi agenda online. Pada aplikasi nantinya akan memiliki 3 menu utama, yaitu Login, Pendaftaran, Home, Agenda, dan Users. Berikut akan ditampilkan gambaran tiap menunya.

3.2.5.1 Login

Saat pertama kali membuka aplikasi, pengguna akan diberikan halaman ini. Sebagai halaman pembuka yang akan meminta hak akses terhadap pengguna yang akan menggunakan aplikasi.

LOGO

Email

Sandi

(35)

3.2.5.2 Pendaftaran

Jika pengguna yang akan menggunakan aplikasi ternyata pengguna tersebut belum memiliki hak akses untuk menggunakannya, maka pengguna tersebut harus mendaftar terlebih dahulu. Halaman ini akan menampilkan form untuk pengguna mendaftar ke aplikasi dan nantinya dapat menggunakan aplikasi. LOGO Nama Email Sandi Ulangi Sandi Submit

Gambar 3.2.18 User interface pendaftaran 3.2.5.3 Home

Halaman Home hanya memiliki 1 halaman saja. Halaman ini nantinya akan menampilkan tanggal agenda, daftar agenda undangan, daftar agenda terbuka dan daftar agenda ditolak. Halaman ini nantinya membantu pengguna dalam melihat gambaran besar dari agenda-agenda yang akan dijalani.

(36)

Menu

Agenda yang akan dijalankan

Kelender aktifitas Agenda undangan

Agenda yang ditolak Agenda umum

Gambar 3.2.19 User interface home 3.2.5.4 Agenda

Pada menu agenda ini terdapat menu lainnya juga yang berhubungan dengan agenda. Submenu agenda adalah menu Daftar Agenda dan Buat Baru.

a. Daftar Agenda

Halaman ini adalah halaman yang akan menampilkan daftar agenda yang dibuat oleh pengguna tersebut.

Menu Daftar Agenda

(37)

b. Buat Agenda

Halaman ini akan menampilkan form agenda yang nantinya akan menjadi jalan pengguna dalam mebuat agenda. Menu Nama Agenda Group Peserta Peserta Sifat Agenda Submit Terbuka Jumlah Peserta Tanggal Dari Tanggal Sampai Lokasi MAP Koordinat X Koordiat Y Keterangan

Gambar 3.2.21 User interface create agenda 3.2.5.5 Users

Menu ini adalah menu yang akan mengakomodasi kegiatan pengguna dalam pengaturan-pengaturan kegiatan yang berhubungan dengan pengguna lain ataupun diri sendiri. Submenu

(38)

yang ada di sini adalah Pertemanan, Group Pertemanan, dan Data Diri.

a. Pertemanan

Halaman ini akan menampilkan daftar pengguna lain yang juga menggunakan aplikasi ini. Nantinya pengguna dapat mencari pengguna lain dan mengundang pengguna tersebut untuk menjalin pertemanan pada aplikasi ini. Pada daftar ini nanti juka akan menampilkan status pertemanan antar pengguna tersebut.

Menu Daftar Users Nama Users

Status pertemanan

Gambar 3.2.22 User interface daftar pertemanan b. Group Pertemanan

Dalam halaman ini adalah halaman yang akan menampilkan daftar group pertemanan yang pengguna ini miliki. Daftar ini adalah daftar group yang dibuat ataupun group undangan dari pengguna lain.

Selain halaman daftar group ini terdapat menu lain yang berfungsi untuk menampilkan form pembuatan group pertemanan.

(39)

Menu Daftar Group Pertemanan

Nama Agenda

Pembuat Agenda

edit

Buat Group Baru

Gambar 3.2.23 User interface daftar group pertemanan

Menu Nama Group

Peserta