BAB III DESAIN DAN PERANCANGAN 3.1 Sistem Yang Sedang Berjalan Sistem Pelayanan Informasi ini dapat diakses oleh admin dan user, untuk mengakses sistem ini diwajibkan untuk melakukan login terlebih dahulu. Jika user belum memiliki akun, user dapat membuat akun baru. Admin dapat mengelola data user, mencetak laporan dan mengelola data pesan, untuk user dapat mengirimkan pesan, mengelola pesan. 3.2 Fungsi dan Kegunaan Sistem bagi Perusahaan Pembuatan Sistem Pelayanan Informasi ini bertujuan untuk menggantikan pelayanan informasi melalui email yang aktivitasnya tidak termonitoring dengan baik, mempermudah pembuatan laporan pelayanan informasi dalam satu bulan, serta mempermudah pencarian data pesan yang sudah lama. 3.3 Kebutuhan Fungsional Kebutuhan fungsional adalah jenis kebutuhan yang berisi proses-proses apa saja yang nantinya akan dilakukan oleh sistem, adapun kebutuhan fungsional dari sistem ini meliputi : 1. Admin dan user dapat melakukan login. 2. User dapat membuat akun. 3. Admin dapat menghapus dan memanipulasi data akun. 4. Admin dapat membalas dan menghapus data pesan. 5. Admin dapat mencetak laporan pelayanan informasi. 6. User dapat membuat, membalas dan menghapus pesan. 17
18 3.4 Kebutuhan Non Fungsional 3.4.1 Identifikasi Perangkat Lunak Perangkat lunak yang digunakan dalam pembuatan sistem ini adalah : 1. Macromedia Dreamweaver 8. 2. XAMPP. 3. Mozilla Firefox. 4. PowerDesigner. 5. CorelDraw X4. 6. Notepad ++. 3.4.2 Identifikasi Perangkat Keras Perangkat keras yang digunakan dalam pembuatan sistem ini adalah: 1. Laptop dengan processor Intel(R) Core (TM) i3-2330m. 2. Monitor resolusi minimal 800x600 dan 16 bit color quality. 3. Memori RAM 2,00 GB. 4. Kapasitas Hardisk minimal 50 GB. 5. Keyboard. 6. Mouse. 3.5 Diagram Aliran Data 3.5.1 Entity Relationship Diagram (ERD) Menurut salah satu para ahli, Brandy dan Loonam (2010), Entity Relationship Diagram (ERD) merupakan teknik yang digunakan untuk memodelkan kebutuhan data dari suatu organisasi, biasanya oleh System Analys dalam tahap analisis persyaratan proyek pengembanngan sistem. Sementara seolah-olah teknik diagram atau alat peraga memberikan dasar untuk desain database relasional yang mendasari sistem informasi yang dikembangkan. ERD bersama-sama dengan detail pendukung merupakan model data yang pada gilirannya digunakan sebagai spesifikasi untuk database.
19 Gambar 3.1 Entity Relationship Diagram (ERD) Penjelasan : 1. Satu user memiliki banyak topik, dan satu topik tidak dapat dimiliki banyak user, hubungan yang terjadi adalah One to Many. 2. Satu topik memiliki banyak reply, dan satu reply tidak dapat dimiliki banyak topik, hubungan yang terjadi adalah One to Many. 3. Satu user memiliki banyak komentar, dan satu komentar tidak dapat dimiliki banyak user hubungan yang terjadi adalah One to Many. 3.5.2 Diagram Konteks Diagram konteks adalah diagram yang terdiri dari suatu proses dan menggambarkan ruang lingkup suatu sistem. Diagram konteks merupakan level tertinggi dari Data Flow Diagram (DFD) yang menggambarkan seluruh input ke
20 sistem atau output dari sistem. Diagram Konteks akan memberikan gambaran tentang keseluruhan sistem. Dalam diagram konteks hanya ada satu proses. Tidak boleh ada store dalam diagram konteks. Diagram konteks berisi gambaran umum (secara garis besar) sistem yang akan dibuat. Diagram konteks ini berisi siapa saja yang memberi data (dan data apa saja) ke sistem, serta kepada siapa saja informasi (dan informasi apa saja) yang harus dihasilkan sistem. Gambar 3.2 Diagram Konteks Penjelasan : 1. Admin dapat mengelola data user. 2. Admin dapat mengelola data pesan. 3. User dapat mengelola data pesan. 4. Staff dapat mengelola data pesan. 3.5.3 Data Flow Diagram (DFD) Data Flow Diagram (DFD) merupakan model dari sistem untuk menggambarkan pembagian sistem ke modul yang lebih kecil. Casc control untuk menggambarkan desain proses disertai aliran data (data flow) yang digunakan dalam membangun sistem informasi. DFD menunjukkan bagaimana arsitektur sistem informasi dibangun karena dapat menjadi panduan (guide) bagi programmer dalam membuat program. Oleh karena itu proses yang ada dalam DFD cenderung mengarah ke proses yang terjadi secara logika.
21 Verifikasi login seksi login seksi login user Verifikasi login user Admin Login admin Verifikasi login admin informasi data pesan Manipulasi data pesan Mengelola data login Tabel_user Manipulasi data komentar Informasi data komentar User Manipulasi data pesan Informasi data pesan Mengelola data pesan Tabel_pesan Manipulasi data komentar Informasi data komentar Seksi Manipulasi data komentar Informasi data komentar Mengelola data komentar Tabel_komentar Input cetak laporan Output cetak laporan Laporan Gambar 3.3 Data Flow Diagram Penjelasan : 1. User membuat akun baru dan login, kemudian diproses oleh sistem dan disimpan dalam tabel user. 2. Admin login, kemudian diproses oleh sistem dan disimpan dalam tabel user 3. User membuat pesan baru, kemudian diproses oleh sistem dan disimpan dalam tabel pesan 4. Admin mengomentari pesan user, kemudian diproses oleh sistem dan disimpan dalam tabel komentar 5. Sistem menghasilkan laporan yang dicetak oleh admin kemudian diserahkan kepada kepala kantor
22 3.5.4 Conceptual Data Model (CDM) Conceptual Data Model (CDM) dipakai untuk menggambarkan secara detail struktur basis data dalam bentuk logic. Struktur ini independen terhadap semua software maupun struktur data storage tertentu yang digunakan dalam aplikasi ini. CDM terdiri dari objek yang tidak diimplementasikan secara langsung kedalam basis data yang sesungguhnya. Didalam CDM terdapat 3 tabel yang saling berelasi, diantaranya, tabel topik berelasi dengan tabel user, dan tabel reply. Gambar 3.4 Conceptual Data Model (CDM) 3.5.5 Physical Data Model (PDM) Physical Data Model (PDM) merupakan gambaran secara detail basis data dalam bentuk fisik. Penggambaran rancangan PDM memperlihatkan struktur penyimpanan data yang benar pada basis data yang digunakan sesungguhnya. Pada tahap ini, dilakukan penyusunan dan perancangan database yang akan digunakan beserta strukturnya. Rancangan database sistem yang dibuat berupa Entity Relational Diagram (ERD), yaitu alat untuk mempresentasikan model data yang ada pada sistem dimana terdapat entity dan relationalship.
23 Gambar 3.5 Physical Data Model (PDM) 3.6 Perancangan Tabel Database Seperti kita ketahui bahwa PHP menyediakan fasilitas yang sangat lengkap untuk membangun aplikasi database. Sebuah aplikasi database memerlukan file database beserta tabel-tabelnya sebagai tempat perekam data. Dalam sistem ini penulis menggunakan MySQL sebagai database karena berbagai kelebihan yang dimiliki oleh MySQL. Berikut rancangan database Sistem Pelayanan Informasi Berbasis Web: 3.6.1 Tabel User Tabel user digunakan untuk menyimpan data user yang bisa mengelola data dalam sistem yang dibuat, dan id_user sebagai Primary Key dalam tabel ini. Tabel 3.1 Tabel User No Field Type Ket 1 user_id integer Primary Key 2 Fullname varchar 3 Password varchar
24 No Field Type Ket 4 Email varchar 5 Level varchar 6 member_date date 7 last_update date 8 Status integer 3.6.2 Tabel Pesan Tabel ini adalah tabel pesan, berisikan topik atau tema yang ingin dibahas, tanggal pesan dibuat, deskripsi isi pesan, kategori bidang dan seksi bidang, serta user pengirim pesan. Tabel 3.2 Tabel Pesan No Field Type Ket 1 topik_id integer Primary Key 2 user_id varchar Foreign Key 3 Date date 4 Title varchar 5 Descript varchar 6 Kategori varchar 7 Seksi varchar 3.6.3 Tabel Komentar Tabel ini adalah tabel komentar, berisikan halaman pembalasan pesan, deskripsi isi pesan, tanggal mengirim pesan dan user pengirim pesan. Tabel 3.3 Tabel Komentar No Field Type Ket 1 reply_id integer Primary Key 2 topik_id varchar Foreign Key
25 No Field Type Ket 3 user_id integer Foreign Key 4 date date 5 reply varchar 3.7 Perancangan Antarmuka / Interface Perancangan interface / antar muka merupakan rancangan antarmuka (interface) program yang akan diimplementasikan. Rancangan dari Sistem Pelayanan Informasi Berbasis Web adalah sebagai berikut: 3.7.1 Halaman Home dan Login Pada halaman home memuat informasi mengenai sistem dan login, login memiliki dua hak akses yaitu admin dan user dengan cara memasukkan email dan password. Jika user belum memiliki akun bisa mendaftar dengan klik menu buat akun. Gambar 3.6 Halaman Home dan Login
26 3.7.2 Halaman Form Buat Akun Halaman Buat Akun ini memuat form untuk membuat akun baru dengan mengisi nama lengkap, password dan email. Gambar 3.7 Halaman Form Buat Akun 3.7.3 Halaman Menu Admin Setelah admin melakukan login, pada halaman admin tersedia tiga menu yaitu beranda yang menampilkan daftar pesan, daftar user dan cetak laporan. Gambar 3.8 Halaman Menu Admin
27 3.7.4 Halaman Daftar User Halaman daftar user menampilkan daftar akun user yang telah mendaftar, pada halaman ini admin bisa menghapus akun user. Gambar 3.9 Halaman Daftar User 3.7.5 Halaman Menu User Setelah user melakukan login maka halaman user akan tertampil, pada halaman user hanya tersedia dua menu yaitu beranda dan buat pesan. pada halaman beranda akan tertampil daftar semua pesan yang telah dibuat oleh user. Gambar 3.10 Halaman Menu User
28 3.7.6 Halaman Pesan Baru dan Edit Pesan Halaman ini berisi form untuk membuat pesan baru. 3.7.7 Halaman Detail Pesan Gambar 3.11 Halaman Pesan Baru dan Edit Pesan Halaman ini berisi isi pesan serta form untuk membalas pesan. Gambar 3.12 Halaman Detail Pesan