Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima...

31
Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Transcript of Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima...

Page 1: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP 

 

 

 

 

 

Hak cipta dan penggunaan kembali:

Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli.

Copyright and reuse:

This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.

Page 2: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

18

BAB III

METODE DAN PERANCANGAN SISTEM

3.1 Metode Penelitian

Metode penelitian yang dilakukan dalam penelitian ini melewati beberapa

tahap, yaitu sebagai berikut.

1. Studi Literatur

Peninjauan studi literatur dilakukan melalui buku, artikel, jurnal, dan referensi

lainnya yang berhubungan dengan tema penulisan, baik yang tersedia secara online

maupun offline.

2. Analisis Sistem

Proses analisis sistem dilakukan dengan tujan memperhatikan kebutuhan penting

yang diperlukan dalam melakukan proses perancangan dan pembangunan sistem,

seperti multi-platform, framework (CodeIgniter) yang dibutuhkan.

3. Perancangan dan Pembuatan Sistem

Pada tahap ini dilakukan perancangan sistem yang dimulai dengan merancang

desain antarmuka, kemudian dilanjutkan dengan perancangan flowchart, data flow

diagram, dan struktur tabel guna memahami dan mendesain alur kerja sistem yang

akan dibangun sehingga dapat berjalan sesuai dengan rencana. Data mengenai

gangguan bipolar didapatkan dari hasil wawancara dengan dokter spesialis jiwa.

4. Pengujian Sistem (Testing)

Pada tahap ini, dilakukan pengujian sistem yang dibuat. Hal ini bertujuan untuk

memeriksa apakah terdapat tampilan atau proses yang masih mengalami error.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 3: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

19

Selain itu, pengujian juga dilakukan untuk memastikan setiap bagian dari sistem

dapat berfungsi dengan baik.

5. Evaluasi

Evaluasi akan dilakukan dengan menyebarkan kuisoner secara acak. Sebelum

mengisi kuisoner, orang tersebut akan diminta untuk membuka website deteksi

bipolar terlebih dahulu. Uji kelayakan sistem dan uji realibilitas dilakukan

menggunakan skala likert dan cronbach alpha.

6. Penulisan Laporan

Pada tahap ini, dilakukan penyusunan laporan tugas akhir mengenai sistem pakar

yang dibuat. Dalam laporan ini, memuat mengenai perancangan, pembuatan, dan

hasil sistem pakar yang telah dibuat dalam suatu karya ilmiah.

3.2 Perancangan Sistem

Perancangan sistem yang dibuat dalam penelitian ini adalah data flow diagram,

flowchart, struktur tabel, dan rancangan antarmuka.

3.2.1 Data Flow Diagram (DFD)

Data Flow Diagram digunakan untuk memberikan informasi mengenai aliran

data yang terhubung dari satu proses ke proses lain. Data Flow Diagram terbagi

menjadi beberapa tahapan, level pertama pada Data Flow Diagram disebut Data Flow

Diagram level 0 namun juga dikenal sebagai Context Diagram. Berikut penjelasan

Context Diagram yang digunakan.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 4: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

20

Gambar 3.1 Context Diagram

Pada Gambar 3.1 merupakan Context Diagram yang menggambarkan aliran data

yang terjadi di sistem pakar deteksi gangguan bipolar. Terdapat dua entitas yang terdiri

dari user dan admin. Entitas user menerima data dari sistem, sedangkan entitas admin

yang mengelola data-data terkait dengan sistem pakar deteksi gangguan bipolar. Proses

deteksi bipolar menerima dua data dari user dan menerima enam data dari admin. User

menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data

dari proses deteksi bipolar.

Pada Gambar 3.2 menunjukkan Data Flow Diagram level 1, yang memiliki

delapan proses di dalamnya yaitu Deteksi Bipolar, Show Artikel, Login Process,

Manage Admin Process, Manage Gejala Process, Manage Penyakit Process, Manage

Riwayat Process, Manage Artikel Process. Gambar 3.2 menunjukkan aliran data yang

masuk dan keluar dari setiap proses. Setiap data yang masuk dan keluar mendapatkan

data dari database yang terhubung ke proses dari masing-masing tabel.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 5: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

21

Gambar 3.2 Data Flow Diagram Level 1

Gambar 3.3 Data Flow Diagram Level 2 Deteksi Bipolar

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 6: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

22

Pada Gambar 3.3 merupakan Data Flow Diagram Level 2 Deteksi Bipolar.

Dalam Deteksi Bipolar dapat dibagi menjadi tiga proses yaitu Question, Get

Conclusion, dan Forward Chaining. Pertanyaan-pertanyaan yang dikirim ke user akan

dijawab oleh user kemudian akan di proses oleh Forward Chaining. Kemudian akan

didapatkan kesimpulan yang dikirimkan ke proses Get Conclusion dan diberikan

kepada user.

Gambar 3.4 Data Flow Diagram Level 2 User Artikel Process

Pada Gambar 3.4 merupakan Data Flow Diagram Level 2 User Artikel Process.

Dalam User Artikel Process terdapat dua buah proses yaitu Show Artikel dan Show

Detail Artikel Selected. Show Artikel dikirimkan ke user untuk melihat list artikel yang

berada pada tampilan user, sedangkan Show Detail Artikel Selected melakukan proses

ketika user memilih salah satu artikel tersebut.

Gambar 3.5 Data Flow Diagram Level 2 Manage Admin

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 7: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

23

Pada Gambar 3.5 merupakan Data Flow Diagram Level 2 Manage Admin. Dalam

Manage Admin terbagi menjadi dua proses, yaitu Show List Admin dan Manage Admin.

Pada gambar di atas menjelaskan admin me-manage admin yang dapat melalukan

penambahan data, mengubah, dan menghapus data tersebut. Admin dapat melihat data

list admin pada Show List Admin.

Gambar 3.6 Data Flow Diagram Level 2 Manage Gejala

Pada Gambar 3.6 merupakan Data Flow Diagram Level 2 Manage Gejala. Dalam

Manage Gejala terbagi menjadi dua proses, yaitu Show List Gejala dan Manage Gejala.

Pada gambar di atas menjelaskan admin me-manage gejala yang dapat melakukan

penambahan data, mengubah, dan menghapus data tersebut. Admin dapat melihat data

list gejala pada proses Show List Gejala.

Gambar 3.7 Data Flow Diagram Level 2 Manage Fase

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 8: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

24

Pada Gambar 3.7 merupakan Data Flow Diagram Level 2 Manage Fase. Dalam

Manage Fase terbagi menjadi dua proses, yaitu Show List Fase dan Manage Fase. Pada

gambar di atas menjelaskan admin me-manage fase yang dapat melakukan pengubahan

data, dan menghapus data tersebut. Admin dapat melihat data list fase pada proses Show

List Fase.

Gambar 3.8 Data Flow Diagram Level 2 Manage Riwayat

Pada Gambar 3.8 merupakan Data Flow Diagram Level 2 Manage Riwayat.

Dalam Manage Riwayat terbagi menjadi dua proses, yaitu Show List Riwayat dan

Manage Riwayat. Pada gambar di atas menjelaskan admin me-manage riwayat untuk

melakukan penghapusan data dan melihat detail input dari user. Admin dapat melihat

data list riwayat pada proses Show List Riwayat.

Gambar 3.9 Data Flow Diagram Level 2 Manage Artikel

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 9: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

25

Pada Gambar 3.9 merupakan Data Flow Diagram Level 2 Manage Artikel.

Dalam Manage Artikel terbagi menjadi dua proses, yaitu Show List Artikel dan

Manage Artikel. Pada gambar di atas menjelaskan admin me-manage artikel yang

dapat melakukan penambahan data, mengubah, dan menghapus data tersebut. Admin

dapat melihat data list artikel pada proses Show List Artikel.

3.2.2 Sitemap

Gambar 3.10 Sitemap User

Pada Gambar 3.10 menunjukkan Sitemap User. Halaman Home yang berfungsi

sebagai halaman deteksi yang menampilkan form pertanyaan. Pada halaman Tentang

Kami yang menampilkan penjelasan tentang aplikasi deteksi bipolar. Setelah itu,

halaman Artikel menampilkan beberapa artikel yang dapat user lihat dan untuk

menampilkan halaman penuh artikel dapat dilihat pada halaman Detail Artikel. Pada

Halaman Hubungi Kami berfungsi dalam menyampaikan kritik dan saran serta

pertanyaaan tentang gangguan bipolar.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 10: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

26

Gambar 3.11 Sitemap Admin

Pada Gambar 3.11 merupakan Sitemap Admin dalam aplikasi deteksi bipolar.

Admin harus melakukan login terlebih dahulu untuk dapat masuk ke dalam

administrator deteksi bipolar. Setelah login, halaman Gejala yang berfungsi untuk

menampilkan data gejala. Pada halaman ini terdapat tiga halaman yang dibuat, yaitu

halaman Tambah Gejala, halaman Ubah Gejala, dan halaman Hapus Gejala.

Pada halaman Fase yang berfungsi untuk menampilkan data fase yang ada. Pada

halaman ini, terdapat dua halaman yang dibuat yaitu Halaman Ubah Fase untuk

mengubah data fase sebelumnya, dan Halaman Hapus Fase untuk menghapus data fase

yang telah ada di database. Selanjutnya ada halaman Riwayat yang berfungsi

menampilkan data riwayat hasil output yang telah diisi oleh user. Pada halaman ini,

admin hanya dapat menghapus data riwayat yang telah diisi oleh user.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 11: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

27

Pada halaman Admin yang berfungsi untuk menampilkan data admin. Pada

halaman Admin terdapat tiga halaman yang dibuat, yaitu halaman Tambah Admin yang

berfungsi untuk menambah administrator, halaman Ubah Admin yang berfungsi untuk

mengubah data admin yang sebelumnya, dan halaman Hapus Admin yang berfungsi

untuk menghapus data admin yang tersimpan di dalam database.

Pada halaman Artikel yang berfungsi untuk menampilkan data artikel. Pada

halaman Artikel terdapat tiga halaman yang dibuat, yaitu halaman Tambah Artikel

yang berfungsi untuk menambahkan data artikel, halaman Ubah Artikel yang berfungsi

untuk mengubah data artikel yang sebelumnya, dan halaman Hapus Artikel yang

berfungsi untuk menghapus data artikel yang tersimpan di dalam database.

3.2.3 Flowchart

Flowchart digunakan untuk memberi informasi mengenai alur proses yang

berjalan dari kesulurah sistem. Flowchart terbagi dua menjadi flowchart admin dan

flowchart user. Berikut ini langkah-langkah flowchart user.

Pada gambar 3.12 menunjukkan alur proses dari Deteksi Bipolar. Pada halaman

deteksi bipolar ini juga termasuk halaman beranda yang dimana menampilkan

pertanyaan-pertanyaan yang didapat dari database yang kemudian akan diproses dan

menghasilkan sebuah hasil jawaban dari pertanyaan-pertanyaan yang dipilih.

Pada Gambar 3.13 menunjukkan alur proses pada User Artikel Process. Pada

halaman User Artikel Process, user dapat melihat artikel - artikel yang berhubungan

dengan bipolar dan user dapat melihat detail dari artikel tersebut.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 12: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

28

Gambar 3.12 Flowchart Deteksi Bipolar

Gambar 3.13 Flowchart User Artikel Process

Flowchart admin akan dijelaskan pada langkah-langkah berikutnya.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 13: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

29

Flowchart pada Gambar 3.14 menjelaskan mengenai alur proses dari Login

Process yang dilakukan admin ketika menggunakan program ini. Admin diharuskan

mengisi data yang sesuai. Data yang dimasukkan oleh admin akan diverifikasi dengan

data yang ada didalam database system. Jika data yang diinput oleh admin sesuai

dengan yang tersimpan didalam database maka proses login berhasil.

Gambar 3.14 Flowchart Login Process

Pada Gambar 3.15 menunjukkan alur proses pada Manage Riwayat. Proses ini

dimulai dengan menampilkan list data yang ada di halaman riwayat. Data tersebut

didapat dari hasil output yang telah dilakukan user.

Gambar 3.15 Flowchart Manage Riwayat

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 14: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

30

Gambar 3.16 Flowchart Manage Gejala

Pada Gambar 3.16 merupakan alur proses dari Manage Gejala yang berguna bagi

admin untuk melihat data gejala apa saja yang ada didalam list tersebut. Admin dapat

juga menambahkan data gejala, mengubah data gejala yang telah dimasukkan

sebelumnya maupun menghapus data gejala tersebut.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 15: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

31

Gambar 3.17 Flowchart Manage Fase

Gambar 3.17 adalah flowchart yang menggambarkan alur proses dari Manage

Fase. admin dapat melihat apa saja yang ada didalam list halaman fase tersebut. Pada

halaman fase, admin dapat melakukan pengubahan data sebelumnya dan menghapus

data di halaman fase tersebut.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 16: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

32

Gambar 3.18 Flowchart Manage Artikel Process

Pada Gambar 3.18 menunjukkan alur proses pada Manage Artikel. Proses ini

dimulai dengan menampilkan list dari data yang ada di halaman artikel. Pada halaman

tersebut terdapat juga fungsionalitas lain dimana admin dapat menambahkan artikel,

mengubah data artikel yang telah ada sebelumnya, dan menghapus data artikel yang

sudah tidak diperlukan lagi.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 17: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

33

Gambar 3.19 Flowchart Manage Admin Process

Pada Gambar 3.19 menunjukkan alur proses pada Manage Admin. Proses ini

dimulai dengan menampilkan list dari data yang ada di halaman admin. Pada halaman

tersebut terdapat juga fungsionalitas lain dimana admin dapat menambahkan admin

baru, mengubah data admin sebelumnya, dan menghapus admin yang sudah tidak

diperlukan lagi.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 18: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

34

3.2.3 Struktur Tabel

Dalam membangun sistem pakar untuk mendeteksi gangguan bipolar

menggunakan Forward Chaining, terdapat lima struktur tabel yang digunakan. Berikut

tabel-tabel yang digunakan.

1. Nama Tabel : tbl_admin

Fungsi : Menyimpan data admin untuk login

Primary Key : id_admin

Foreign Key : -

Tabel 3.1 Struktur Tabel tbl_admin

No Nama kolom Tipe data Keterangan

1 id_admin int(11) Primary key untuk tabel

2 name varchar(20) Nama yang dimiliki admin

3 username varchar(20) Nama yang digunakan admin

untuk login

4 password varchar(50) Password yang dimiliki admin

5 salt varchar(100) Untuk membantu proses enkripsi

password

6 last_login datetime Memperlihatkan kapan admin

login

2. Nama Tabel : tbl_gejala

Fungsi : untuk menyimpan data-data gejala

Primary Key : indeks

Foreign Key : -

Tabel 3.2 Struktur Tabel tbl_gejala

No Nama kolom Tipe data Keterangan

1 indeks int(11) Primary key untuk tabel

2 id_gejala varchar(4) Identitas gejala

3 tipe_gejala varchar(10) Tipe gejala

4 pertanyaan varchar(255) Pertanyaan gejala

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 19: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

35

3. Nama Tabel : tbl_fase

Fungsi : untuk menyimpan data-data fase

Primary Key : indeks

Foreign Key : -

Tabel 3.3 Struktur Tabel tbl_fase

No Nama kolom Tipe data Keterangan

1 indeks int(11) Primary key untuk tabel

2 id_fase varchar(4) Identitas penyakit

3 nama_fase varchar(10) Nama penyakit

4 keterangan text Penjelasan mengenai penyakit

5 solusi text Solusi atau saran

4. Nama Tabel : tbl_artikel

Fungsi : menyimpan data artikel

Primary Key : id_artikel

Foreign Key : -

Tabel 3.4 Struktur Tabel tbl_artikel

No Nama kolom Tipe data Keterangan

1 id_artikel int(11) Primary key untuk tabel

2 judul varchar(100) Judul artikel

3 sumber varchar(100) Asal artikel diambil

4 isi varchar(3000) Memasukkan isi artikel

5 gambar varchar(50) Gambar artikel

5. Nama Tabel : tbl_riwayat

Fungsi : Untuk menyimpan data hasil output dari user

Primary Key : id_riwayat

Foreign Key : -

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 20: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

36

Tabel 3.5 Struktur Tabel tbl_riwayat

No Nama kolom Tipe data Keterangan

1 id_riwayat int(11) Primary key untuk tabel

2 hasil varchar(10) Hasil output yang

dihasilkan dari user

3 tanggal datetime Tanggal user melakukan

input

6. Nama Tabel : tbl_detail

Fungsi : Menyimpan data detail riwayat

Primary Key : id_detail

Foreign Key : id_gejala, id_riwayat

Tabel 3.6 Struktur Tabel tbl_detail

No Nama kolom Tipe data Keterangan

1 id_detail int(11) Primary key untuk tabel

2 id_gejala int(11) Foreign key untuk tabel tbl_gejala

3 id_riwayat int(11) Foreign key untuk tabel tbl_riwayat

4 jawaban Tinyint(1) Hasil jawaban

3.2.4 Rancangan Antarmuka

Dalam pembuatan sistem pakar ini, dibuat suatu desain antamuka atau mockup

digunakan untuk memudahkan proses pembuatan saat membangun aplikasi. Desain

antarmuka dibuat menggunakan Balsamiq Mockups 3. Desain antarmuka yang dibuat

terdiri dari dua bagian yaitu user dan admin.

Gambar 3.20 menunjukkan Rancangan Antarmuka Halaman Deteksi. Pada

bagian halaman deteksi juga termasuk halaman beranda. Pada halaman ini, akan

ditampilkan pertanyaan-pertanyaan mengenai sistem pakar yang dibangun dan akan

dijawab oleh user untuk melakukan deteksi.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 21: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

37

Gambar 3.21 menunjukkan Rancangan Antarmuka Halaman Beranda Pertanyaan

Terakhir. Pada halaman ini, user akan menyelesaikan pertanyaan-pertanyaan yang

diberikan kemudian akan diproses untuk mendapatkan hasilnya.

Setelah berhasil menjawab pertanyaan-pertanyaan pada halaman beranda

sebelumnya, user akan berpindah ke halaman hasil analisan awal berdasarkan gambar

3.22. Pada halaman ini, akan diberikan hasil test yang dilakukan user pada halaman

beranda sebelumnya. User akan diberikan pertanyaan-pertanyaan jika hasil jawaban

dari user memenuhi syarat.

Gambar 3.23 merupakan Rancangan Antarmuka Halaman Hasil Analisa Akhir.

Halaman ini merupakan halaman akhir dari hasil pertanyaan-pertanyaan yang telah

dijawab oleh user secara keseluruhan, maka user akan melihat hasil rangkuman

jawaban yang telah dipilih oleh user.

Gambar 3.20 Rancangan Antarmuka Halaman Deteksi

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 22: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

38

Gambar 3.21 Rancangan Antarmuka Halaman Deteksi Pertanyaan Terakhir

Gambar 3.22 Rancangan Antarmuka Halaman Hasil Analisa Awal

Gambar 3.23 Rancangan Antarmuka Halaman Hasil Analisa Akhir

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 23: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

39

Gambar 3.24 menunjukkan Rancangan Antarmuka Halaman Tentang Kami. User

dapat melihat penjelasan mengenai sistem pakar deteksi bipolar.

Gambar 3.24 Rancangan Antarmuka Halaman Tentang Kami

Gambar 3.25 menunjukkan Rancangan Antarmuka Halaman User Artikel. Pada

halaman ini, user dapat melihat artikel-artikel yang dimasukkan didalam sistem pakar

ini. Halaman artikel ini hanya menampilkan sebagian isi artikel dan terdapat link Read

More untuk melihat detail artikel.

Rancangan Antarmuka Halaman Detail Artikel pada Gambar 3.26 menunjukkan

tampilan detail artikel yang dipilih sebelumnya oleh user. User dapat melihat seluruh

isi artikel tersebut dan terdapat link untuk melihat artikel-artikel lain.

Gambar 3.25 Rancangan Antarmuka Halaman User Artikel

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 24: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

40

Gambar 3.26 Rancangan Antarmuka Halaman Detail Artikel

Pada Gambar 3.27 menunjukkan Rancangan Antarmuka Halaman Hubungi

Kami. Pada halaman hubungi kami digunakan untuk menyampaikan kritik dan saran

ataupun pertanyaan yang berhubungan dengan bipolar. Pada halaman ini, user akan

mengisi kolom nama, kolom email, kolom subjek, dan kolom pesan yang kemudian

akan diproses dan dikirim ke email dari deteksi bipolar.

Gambar 3.27 Rancangan Antarmuka Halaman Hubungi Kami

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 25: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

41

Gambar 3.28 Rancangan Antarmuka Halaman Admin Login

Pada Gambar 3.28 menunjukkan Rancangan Antarmuka Halaman Admin Login.

pada halaman ini terdapat kolom username dan kolom password. Untuk melakukan

login, admin harus memasukkan username dan password yang sudah terdaftar pada

database.

Gambar 3.29 Rancangan Antarmuka Halaman List Gejala

Pada Gambar 3.29 menunjukkan Rancangan Antarmuka Halaman List Gejala.

Admin dapat melihat data gejala yang tersimpan di database dan admin dapat

menambahkan gejala, mengubah data gejala, dan dapat menghapus data gejala tersebut.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 26: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

42

Gambar 3.30 Rancangan Antarmuka Tambah Gejala

Pada Gambar 3.30 menunjukkan Rancangan Antarmuka Halaman Tambah

Gejala. Admin dapat menambahkan gejala dengan mengisi kolom-kolom data pada

tambah gejala.

Gambar 3.31 Rancangan Antarmuka Halaman Ubah Gejala

Pada Gambar 3.31 menunjukkan Rancangan Antarmuka Halaman Ubah Gejala.

Pada Halaman ini, admin dapat mengubah data gejala yang sebelumnya dengan data

yang baru berdasarkan input dari admin.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 27: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

43

Gambar 3.32 Rancangan Antarmuka Halaman List Fase

Pada Gambar 3.32 menunjukkan Rancangan Antarmuka Halaman List Fase.

Admin dapat melihat data fase yang tersimpan di database dan admin dapat mengubah

data fase, dan dapat menghapus data fase tersebut.

Gambar 3.33 Rancangan Antarmuka Halaman Ubah Fase

Pada Gambar 3.33 menunjukkan Rancangan Antarmuka Halaman Ubah Fase.

Pada Halaman ini, admin dapat mengubah data fase yang sebelumnya dengan data yang

baru berdasarkan input dari admin.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 28: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

44

Gambar 3.34 Rancangan Antarmuka Halaman List Riwayat

Pada Gambar 3.34 menunjukkan Rancangan Antarmuka Halaman List Riwayat.

Admin dapat melihat hasil yang output dari user yang tersimpan didalam database.

Admin hanya dapat menghapus data dari halaman riwayat.

Gambar 3. 35 Rancangan Antarmuka Halaman Detail Riwayat

Pada Gambar 3.35 menunjukkan Rancangan Antarmuka Halaman Detail

Riwayat. Pada Halaman ini, admin dapat melihat hasil input yang telah dimasukkan

oleh user terlebih dahulu.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 29: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

45

Gambar 3.36 Rancangan Antarmuka Halaman List Artikel

Pada Gambar 3.36 menunjukkan Rancangan Antarmuka Halaman List Artikel.

Admin dapat melihat data artikel yang tersimpan di database dan admin dapat

menambahkan artikel, mengubah data artikel, dan dapat menghapus data artikel

tersebut.

Gambar 3.37 Rancangan Antarmuka Halaman Tambah Artikel

Pada Gambar 3.37 menunjukkan Rancangan Antarmuka Halaman Tambah

Artikel. Admin dapat menambahkan Artikel dengan mengisi kolom-kolom data pada

tambah Artikel.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 30: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

46

Gambar 3.38 Rancangan Antarmuka Halaman Ubah Artikel

Pada Gambar 3.38 menunjukkan Rancangan Antarmuka Halaman Ubah Artikel.

Pada Halaman ini, admin dapat mengubah data artikel yang sebelumnya dengan data

yang baru berdasarkan input dari admin.

Gambar 3. 39 Rancangan Antarmuka Halaman List Admin

Pada Gambar 3.39 menunjukkan Rancangan Antarmuka Halaman List Admin.

Admin dapat melihat data admin yang tersimpan di database dan admin dapat

menambahkan admin, mengubah data admin, dan dapat menghapus data admin

tersebut.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018

Page 31: Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima tiga data dari proses deteksi bipolar, sedangkan admin menerima lima data dari

47

Gambar 3.40 Rancangan Halaman Tambah Admin

Pada Gambar 3.40 menunjukkan Rancangan Antarmuka Halaman Tambah

Admin. Admin dapat menambahkan admin dengan mengisi kolom-kolom data pada

tambah Admin.

Gambar 3.41 Rancangan Antarmuka Halaman Ubah Admin

Pada Gambar 3.41 menunjukkan Rancangan Antarmuka Halaman Ubah Admin.

Pada Halaman ini, admin dapat mengubah data admin yang sebelumnya dengan data

yang baru berdasarkan input dari admin.

Rancang Bangun Sistem..., Ricky Limanda, FTI UMN, 2018