Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima...
Transcript of Lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/5074/4/BAB III.pdf · menerima...
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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