BAB III ANALISA DAN PERANCANGAN

BAB III ANALISA DAN PERANCANGAN 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 Pendaftaran Pengguna Login Agenda Buat Agenda Sinkronisasi Logout Deskripsi Fungsi pengguna yang belum terdaftar untuk dapat mendaftar pada aplikasi, sehingga dapat menggunakan aplikasi nantinya Fungsi untuk identifikasi pengguna untuk masuk ke dalam aplikasi dan menggunakan aplikasi sesuai dengan haknya Daftar dari agenda yang telah dibuat ataupun yang akan dijalani oleh pengguna Fungsi untuk membuat agenda baru Fungsi untuk mengambil jadwal agenda anggota yang beririsan dengan jadwal agenda saat ini Menghapus sesi pengguna dan keluar dari aplikasi 27

28 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 2. Membuat pilihan waktu tidak hanya jam saja tapi juga menambahkan pilihan menit, sehingga pengguna dapat menentukan waktu menit dari kegiatan

29 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 Waktu agenda hanya pilihan dalam jam Tidak ada Tidak ada Tidak ada Range waktu pelaksanaan agenda Detail menit pada waktu agenda Agenda Online pada Modile Device Sifat agenda terbuka atau tertutup Map lokasi agenda Membuat variable waktu berupa variable waktu mulai dan variable waktu selesai Menambahkan pilihan menit pada form pembuatan agenda Membuat agenda online pada Android Membuat tanda pada agenda, dengan maksud agenda tersebut adalah agenda tertutup atau agenda terbuka 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

30 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 Berikut adalah gambar use case diagram untuk guest.

31 Pendaftaran extends Email Konfirmasi Konfirmasi Pendaftaran Guest Lupa Password Gambar 3.2.1 Use Case Guest Tabel 3.2.1 Use Case Description Pendaftaran Nama Use Case Aktor Deskripsi Pendaftaran Guest 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 3. Mengisi form pendaftaran dan mengirim ke sistem 2. Sistem menampilkan form pendaftaran 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

32 Lanjutan Tabel 3.2.1 Use Case Description Pendaftaran Normal course Users Sistem 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 Post-Condition Assumtion Akses halaman pendaftaran Halaman pesan hasil pendaftaran - Pengguna telah mengetahui alamat pendaftaran - Pengguna telah memiliki email untuk keperluan pendaftaran Tabel 3.2.2 Use Case Description Konfirmasi Pendaftaran Nama Use case Aktor Deskripsi Konfirmasi Pendaftaran Guest Fungsi untuk konfirmasi keaktifan pendaftaran dari pengguna Normal course Users Sistem 1. Membuka email 2. Klik link konfirmasi email 3. Validasi kode konfirmasi 4a. Data diterima. Ubah status pengguna menjadi pengguna aktif

33 Lanjutan Tabel 3.2.2 Use Case Description Konfirmasi Pendaftaran Normal course Users Sistem 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 Post-Condition Assumtion Akses email pengguna konfirmasi Halaman pesan hasil konfirmasi dan halaman login - Dapat mengakses email sendiri - Sudah pernah mendaftar di aplikasi ini sebelumnya Tabel 3.2.3 Use Case Description Lupa Password Nama Use case Aktor Deskripsi Lupa Password Guest Fungsi untuk mengirimkan ulang password baru kepada pengguna yang telah lupa password sebelumnya Normal course Users Sistem 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

34 Lanjutan Tabel 3.2.3 Use Case Description Lupa Password Normal course Users Sistem 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 Post-Condition Assumtion Akses halaman lupa password Halaman pesan hasil proses dan halaman login - Dapat mengakses email sendiri

35 b. Users Berikut adalah gambar use case diagram untuk users. Buat Agenda Pribadi extends Email Agenda Agenda Terbuka extends include Email Agenda Terbuka include Lihat Agenda include Login users Logout extends Perteman Email Perteman include include include GroupTeman include extends Email Pemberitahuan Group Email Perubahan Agenda extends Rubah Agenda Milik Sendiri Gambar 3.2.2 Use Case Users

36 Tabel 3.2.4 Use case Description Login Nama Use Case Aktor Deskripsi Login Guest Fungsi untuk masuk ke dalam aplikasi dan menandakan pengguna tersebut adalah pengguna yang berhak Normal course Users Sistem 1. Membuka aplikasi 3. Kirim username dan password pada form login 2. Tampilkan 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 Post-Condition Assumtion Halaman login aplikasi Halaman muka aplikasi - Pengguna sudah mengetahui cara membuka aplikasi - Sudah pernah mendaftar dan konfirmasi pendaftaran aplikasi

37 Tabel 3.2.5 Use Case Description Lihat Agenda Nama Use Case Aktor Deskripsi Lihat Agenda Pengguna Terdaftar Fungsi untuk menampilkan daftar agenda yang akan diikuti dan daftar agenda undangan Normal course Users Sistem 1. Membuka alamat daftar agenda 2a. Tampilkan daftar agenda yang akan dijalankan dan daftar agenda undangan Alternate Course Pre-Condition Post-Condition Assumtion Pengguna sudah yang memiliki sesi login Halaman daftar agenda 2b. Tampilkan pesan bahwa tidak ada agenda - Pengguna sudah melakukan login pada aplikasi Tabel 3.2.6 Use Case Description Buat Agenda Nama Use Case Aktor Deskripsi Buat Agenda Pengguna Terdaftar Fungsi untuk membuat sebuah agenda baik itu nantinya menjadi agenda terbuka atau tertutup Normal course Users Sistem 1. Membuka form agenda baru 3. Kirim data agenda baru yang direncanakan 2. Tampilkan form agenda baru 4. Validasi data

38 Lanjutan Tabel 3.2.6 Use Case Description Buat Agenda Normal course Users Sistem 5a. Data cocok. Simpan data agenda baru 6. Kirim email pemberitahuan untuk merespon undangan agenda Alternate Course Pre-Condition Post-Condition Assumtion Pengguna sudah yang memiliki sesi login 5b. Data tidak cocok. Tampilkan pesan kesalahan Halaman daftar agenda beserta agenda baru - Pengguna sudah melakukan login pada aplikasi - Pengguna sudah memiliki beberapa teman untuk diundang dalam agenda Tabel 3.2.7 Use Case Description Ubah Agenda Milik Sendiri Nama Use Case Aktor Deskripsi Ubah Agenda Milik Sendiri Pengguna terdaftar Fungsi untuk mengubah elemen yang ada pada agenda menjadi agenda yang sesuai Normal course Users Sistem 1. Memilih agenda yang akan diubah 3. Kirim data agenda baru yang telah diubah 2. Tampilkan form agenda dengan data agenda lama

39 Lanjutan Tabel 3.2.7 Use Case Description Ubah Agenda Milik Sendiri Normal course Users Sistem 4. Validasi data 5a. Data cocok. Simpan data agenda 6. Kirim email pemberitahuan untuk pemberitahuan perubahan agar pengguna undangan dapat merespon undangan agenda Alternate Course 5b. Data tidak cocok. Tampilkan pesan kesalahan Pre-Condition Post-Condition Assumtion Daftar agenda milik sendiri Halaman daftar agenda beserta agenda baru - Pengguna sudah melakukan login pada aplikasi - Pengguna sudah memiliki beberapa teman untuk diundang dalam agenda - Pengguna mengetahui agenda yang akan diubah Tabel 3.2.8 Use Case Description Terima atau Tolak Agenda Undangan Nama Use Case Aktor Deskripsi Terima atau Tolak Agenda Undangan Pengguna Terdaftar Fungsi untuk menentukan apakah mengikuti atau menolak sebuah agenda undangan dari pengguna lain Normal course Users Sistem 1. Memilih agenda undangan 2. Pelajari data agenda

40 Lanjutan Tabel 3.2.8 Case Description Terima atau Tolak Agenda Undangan Normal course Users Sistem 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 Post-Condition Assumtion Daftar agenda undangan Halaman daftar agenda - Pengguna sudah melakukan login pada aplikasi - Pengguna memiliki undangan agenda dari pengguna lain

41 Tabel 3.2.9 Use Case Description Agenda Terbuka Nama Use Case Aktor Deskripsi Agenda Terbuka Pengguna Terdaftar Fungsi untuk mendaftar pada sebuah agenda terbuka yang dibuat oleh pengguna lain Normal course Users Sistem 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 Post-Condition Assumtion Daftar agenda undangan Halaman daftar agenda - Pengguna sudah melakukan login pada aplikasi - Pengguna memiliki undangan agenda dari pengguna lain

42 Tabel 3.2.10 Use Case Description Pertemanan Nama Use Case Aktor Deskripsi Pertemanan Pengguna Terdaftar Fungsi untuk menghubungkan antara satu pengguna dengan pengguna lainnya sehingga dapat membuat sebuah agenda yang sama Normal course Users Sistem 1. Membuka daftar pengguna 2. Memilih pengguna lain yang akan diundang dalam pertemanan 4a. Permintaan pertemanan diterima 3. Menyimpan data permintaan pertemanan dan mengirim email kepada pengguna lain 5a. Menyimpan hasil keputusan pertemanan Alternate Course Pre-Condition Post-Condition Assumtion 4b. Permintaan pertemanan ditolak Daftar pengguna keseluruhan Hasil pertemanan - Pengguna sudah melakukan login pada aplikasi - Terdapat lebih dari 1 pengguna di dalam aplikasi

43 Tabel 3.2.11 Use Case Description Group Pertemanan Nama Use Case Aktor Deskripsi Group Pertemanan Pengguna Terdaftar Fungsi untuk membuat sebuah kelompok untuk penggunapengguna yang sudah berteman Normal course Users Sistem 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 Post-Condition Assumtion Form group pertemanan Daftar group yang ada - Pengguna sudah melakukan login pada aplikasi - Pengguna telah memiliki hubungan teman terhadap pengguna lain

44 Tabel 3.2.12 Use Case Description Logout Nama Use Case Aktor Deskripsi Logout Pengguna Terdaftar Fungsi untuk menghapus sesi pengguna dan keluar dari aplikasi Normal course Users Sistem Alternate Course 1. Klik link logout 2. Sistem menghapus data sesi pengguna 3. Tampilkan halaman login Pre-Condition Post-Condition Assumtion Aplikasi Form login - Pengguna sudah melakukan login pada aplikasi 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.

45 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 Guest System Isi form pndaftaran Kirim Emai Kode Konfirmasi Konfirmasi Kode Pendaftaran Cek Kode Salah Apakah Kode Konfirmasi Benar? Benar Ubah Status Menjadi User Aktif Gambar 3.2.3 Activity Diagram Pendaftaran

46 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 Users System Mengisi Form Login Cek Kecocokan User dan Sandi Tidak Apakah Cocok? Iya User Login Gambar 3.2.4 Activity Diagram Login

47 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 Users System Kirim Undangan Pertemanan Kirim Email Pemberitahuan Status Menunggu Konfirmasi Apakah Pertemanan Diterima Tidak Status Pertemanan Ditolak Pengguna Tidak dapat membuat agenda bersama Iya Status Pertemanan Terhubung Pengguna dapat saling mengundang agenda Gambar 3.2.5 Activity Diagram Pertemanan

48 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 Users System Buat Group Masukkan Daftar User Kirim Email Kepada Users Undangan Simpan Daftar User Dalam Group Gambar 3.2.6 Activity Diagram Pembuatan Group

49 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 Users System Isi form agenda Tunggu konfirmasi peserta belum Konfirmasi peserta? sudah Tolak atau Terima Terima Agenda terkonfirmasi semua peserta Tolak Gambar 3.2.7 Activity Diagram Agenda

50 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 Users System Buka Agenda Terbuka Daftar Agenda Email Pendaftaran Agenda Permintaan Diterima Iya Email Permintaan Dierima Tidak Email Permintaan Ditolak Gambar 3.2.8 Activity Diagram Daftar Agenda Terbuka

51 g. Logout Setelah menggunakan aplikasi ini, hendaknya pengguna menghapus sesi dirinya untuk menghindari hal-hal yang tidak diinginkan Logout Users System 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

52 users Form Register Data Entry Controller Check Data Center IsiForm() PostData() CheckData() true SimpanData() KirimEmail() Data tersimpan false 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 users Form Login Data Center Controller Dashbord IsiForm() PostData() true LoadData() false Gambar 3.2.11 Sequence Diagram Login

53 c. Pertemanan Sequence diagram pada fungsi pertemanan ini, akan digambarkan bagaimana seorang pengguna akan menjalin pertemanan terhadap pengguna lain users Daftar Users Data Center PilihUser() KirimPermintaan() TandaiPermintaan() SimpanKeputusan() 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 users Form Group Data Center IsiForm() SimpanData() EmailPemberitahuan() Gambar 3.2.13 Sequence Diagram Pembuatan Group

54 e. Agenda Sequence diagram untuk menggambarkan alur object pembuatan agenda users Form Agenda Data Center IsiForm() SimpanData() KirimKonfirmasi() KonfirmasiAgenda() DaftarAgendaTerbuka() SimpanData() 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 relasi many-to-many.

55 Perancangan konseptual untuk basis data aplikasi ini adalah sebagai berikut : user_pertemanan PK FK1 id_user_pertemanan pertemanan id_users 1...* PK 0...* users id_users name email 0...* UsersAgenda 1...* PK FK1 agenda id_agenda name waktu tempat id_users UsersGroup UsersPertemanan *...1 1...* user_group PK FK1 user_group name id_users 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

56 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 : user_pertemanan PK id_user_pertemanan pertemanan id_users PK users id_users name email PK FK2 FK1 peserta_agenda id_peserta_agenda id_agenda id_users PK FK1 agenda id_agenda name waktu tempat id_users agenda_group_users PK FK1 FK2 id_agenda_group_users id_users id_agenda_group agenda_group PK id_agenda_group name Gambar 3.2.16 Perancangan Basis Data Logikal

57 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 No name email varchar(40) Tidak No email Unique sandi varchar(88) Tidak No password b. Tabel user_pertemanan Tabel ini adalah tabel penyimpan relasi hubungan pertemanan dari pengguna satu dan pengguna lainnya.

58 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 Field Jenis Kosong Default Ekstra Indeks id_peserta_agenda int(11) Tidak Tidak Auto_increment Primary id_users int(11) Tidak NULL Foreign 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 Field Jenis Kosong Default Ekstra Indeks id_ agenda int(11) Tidak Tidak Auto_increment Primary nama_agenda varchar(30) Tidak NULL sifat tinyint(1) Tidak 1

59 Lanjutan Table 3.2.16 agenda pada Basis Data Field Jenis Kosong Default Ekstra Indeks 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 id_users int(11) Tidak NULL Foreign 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 Field Jenis Kosong Default Ekstra Indeks id_ agenda _group_users int(11) Tidak Tidak Auto_increment Primary id_users int(11) Tidak NULL Foreign 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.

60 Tabel 3.2.18 agenda_group pada Basis Data Field Jenis Kosong Default Ekstra Indeks id_ agenda_group int(11) Tidak Tidak Auto_increment Primary id_users int(11) Tidak NULL Foreign 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 Submit Gambar 3.2.17 User interface login

61 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.

62 Menu Kelender Agenda aktifitasyang akan dijalankan Agenda undangan Agenda umum Agenda yang ditolak 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 Gambar 3.2.20 User interface daftar agenda

63 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 Terbuka Jumlah Peserta Tanggal Dari Tanggal Sampai Lokasi MAP Koordinat X Koordiat Y Keterangan Submit 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

64 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.

65 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 Gambar 3.2.24 User interface form group pertemanan