lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1187/4/bab iii.pdfperancangan...

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.

25

BAB III

METODOLOGI PENELITIAN DAN PERANCANGAN SISTEM

3.1 Metode Penelitian

Dalam penelitian ini, metodologi penelitian yang dilakukan adalah sebagai

berikut.

1. Studi literatur

Dalam proses ini, dilakukan studi kepustakaan melalui buku dan artikel

yang terkait dengan aplikasi yang dibuat, seperti Neural Network,

Backpropagation dan teori-teori mengenai Attention Deficit Hyperactivity

Disorder.

2. Wawancara dan konsultasi

Wawancara dan konsultasi dilakukan untuk mendapatkan informasi

mengenai gejala-gejala Attention Deficit Hyperactivity Disorder dan

kategorinya. Wawancara dilakukan dengan seorang pakar yaitu Angeline

Kartika Sosrodjojo, M.Psi., Psikolog.

3. Perancangan jaringan saraf tiruan

Dari hasil studi dan wawancara tersebut, peneliti merancang jaringan saraf

tiruan yang akan diterapkan pada aplikasi. Peneliti mulai menentukan

jumlah layer, neuron, dan input yang dibutuhkan di dalam Neural Network.

Pertanyaan-pertanyaan untuk diberikan kepada pengguna juga didefinisikan

pada tahap ini.

Implementasi neural..., Mario Kevin Binuan, FTI UMN, 2016

26

4. Perancangan Sistem

Pada tahap ini, peneliti merancang alur kerja dari aplikasi seperti data-data

yang diperlukan sebagai basis pengetahuan sistem pakar dan tampilan dari

aplikasi. Pembuatan diagram-diagram seperti data flow diagram, flow chart,

entity relationship diagram dan perancangan user interface dilakukan pada

tahap ini.

5. Implementasi

Implementasi coding dilakukan berdasarkan hasil rancangan yang telah

dibuat sebelumnya. Coding dilakukan menggunakan dua bahasa

pemrograman, yaitu C# dan PHP. C# digunakan untuk membuat desktop

application yang berfungsi sebagai backend dan digunakan oleh admin,

sedangkan PHP digunakan untuk membuat web application yang berfungsi

sebagai frontend dan digunakan oleh user.

6. Melakukan Pengujian (testing)

Setelah pembuatan dan implementasi selesai, maka dilakukan pengujian

untuk mengetahui kehandalan (reliability) dan kebenaran output dari

aplikasi yang telah dibangun. Testing dilakukan dengan membandingkan

output dari aplikasi dengan hasil diagnosa dari pakar yang sesungguhnya.

7. Analisa dan Pengambil Keputusan

Setelah melakukan testing terhadap aplikasi, hasil akan dianalisa. Analisa

tersebut berguna untuk mengambil kesimpulan akhir dari penelitian yang

telah dilakukan.


27

3.2 Perancangan Jaringan Saraf Tiruan

Sistem pakar dibuat dengan melakukan pelatihan terlebih dahulu untuk

menentukan struktur jaringan yang memiliki tingkat keakuratan terbaik.

Perancangan jaringan saraf tiruan akan dilakukan menggunakan dua tahap, yaitu

tahap pelatihan dan tahap pengenalan. Tahap pelatihan akan dilakukan pada

aplikasi desktop yang akan digunakan oleh admin. Pada tahap pelatihan, admin

akan diminta untuk memasukkan file data training yang didapat dari seorang pakar.

Neural network menggunakan data training tersebut untuk learning menggunakan

algoritma backpropagation sehingga mendapatkan hasil yang mendekati atau sama

dengan diagnosa yang diberikan oleh seorang pakar.

Selanjutnya, hasil dari proses learning yang berupa bobot-bobot dari neuron

akan disimpan di dalam sebuah file .txt. Admin akan meng-upload file ini ke dalam

situs web agar dapat digunakan pada tahap pengenalan yang dilakukan oleh user.

Saat user memasukkan gejala sebagai input di dalam sistem, maka input tersebut

akan diterjemahkan ke dalam bilangan biner agar dapat dimasukkan ke dalam

sebuah jaringan saraf tiruan. Jaringan saraf tiruan yang dibangun akan

menggunakan bobot yang telah didapatkan dari desktop application. Setelah bobot-

bobot dimasukkan maka proses dalam jaringan akan bergerak maju dan

memberikan output kepada user.

Berikut adalah tahap-tahap perancangan jaringan saraf tiruan yang akan

digunakan dalam aplikasi ini.


28

3.2.1 Menentukan Jumlah Input dan Output

Pembangunan aplikasi Neural Network menggunakan 24 symptom yang

merupakan gejala yang diberikan oleh pakar. Input data sebanyak 66 buah masukan

dan 1 buah keluaran. Masing-masing masukan akan diubah ke dalam bentuk biner.

Metode yang digunakan dalam melakukan input adalah dengan menggunakan

likert, yang dibuat berdasarkan rating, jadi user tidak hanya menjawab 0 untuk tidak

dan 1 untuk ya. User melakukan masukan 6 yang artinya selalu, maka 6 akan diubah

ke dalam bentuk biner menjadi 110. Penggunaan biner memudahkan proses

perhitungan untuk mendapatkan keluaran yang berupa angka biner juga yang telah

ditentukan yaitu, 0 untuk keterangan “Selamat!, Anda tidak perlu mengkhawatirkan

perilaku anak Anda. Apabila Anda masih memiliki pertanyaan terkait perilaku anak

Anda, silahkan menghubungi psikolog / psikiater” dan 1 untuk keterangan

“Sebaiknya Anda mengkonsultasikan perilaku anak Anda ke psikolog / psikiater”.

Berdasarkan analisa ini, maka terdapat 66 neuron pada lapisan pertama (input) dan

1 neuron pada lapisan terakhir.

3.2.2 Menentukan Jumlah Hidden Layer

Jaringan layar banyak dapat menyelesaikan masalah yang lebih kompleks

dibandingkan dengan layar tunggal, meskipun kadangkala proses pelatihan lebih

kompleks dan lama. Oleh karena itu, dilakukan percobaan-percobaan untuk

menentukan berapa jumlah hidden layer dan neuron yang cukup baik untuk

digunakan di dalam sistem pakar ini. Berikut adalah tabel dari hasil beberapa

percobaan dengan membandingkan keakuratan data dan waktu proses perhitungan

dari setiap percobaan. Akurasi dihitung dengan membandingkan hasil dari data


29

training dan hasil dari sistem yang telah melakukan learning. Jumlah data training

yang berhasil didapatkan dari pakar yaitu sebanyak 2.345 data.

Dari beberapa percobaan yang dilakukan dengan cara membandingkan dari

struktur layer, learning rate, max epoch, waktu dan error, maka didapatkan tiga

layer yang memiliki 1 hidden layer yang paling efektif dengan kombinasi neuron

66, 3, 1. Untuk setiap layer pada jaringan saraf tiruan akan ditambahkan 1 neuron

yang akan digunakan sebagai bias dengan nilai 1.

Gambar 3.1 Arsitektur Jaringan Saraf Tiruan

Pada rancangan awal, digunakan 1 buah hidden layer. Pada hidden layer

hanya terdapat tiga neuron. Rancangan ini akan terus berkembang seiring dengan


30

proses pelatihan untuk mendapatkan hasil yang optimal. Berikut adalah tabel

mengenai angka biner masukan yang digunakan pada arsitektur jaringan.

Tabel 3.1 Variabel dan Nilai dari gejala ADHD

No. Pernyataan Variabel Nilai

1. Kesulitan memusatkan

perhatian pada detil atau

melakukan kesalahan yang

ceroboh pada tugas sekolah,

atau pekerjaan, atau aktivitas

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

2. Kesulitan mempertahankan

perhatian saat mengerjakan

tugas atau bermain

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

3. Terkesan tidak mendengarkan

saat diajak berbicara

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

4. Tidak mengikuti instruksi

yang diberikan dan gagal

menyelesaikan pekerjaan

sekolah

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

5. Kesulitan mengatur tugas dan

aktivitas

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

6. Menghindar, tidak menyukai,

atau menolak tugas – tugas

yang membutuhkan usaha

mental yang berat (seperti

pekerjaan sekolah atau

pekerjaan rumah)

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110


31

Tabel 3.1 Variabel dan Nilai dari gejala ADHD (Lanjutan)


7. Kehilangan barang yang

penting untuk mengerjakan

tugas atau aktivitas (contoh:

kehilangan alat tulis atau

kacamata)

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

8. Mudah terganggu dengan

stimulus eksternal

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

9. Lupa dalam aktivitas

keseharian

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

10. Menggerak – gerakkan tangan

atau bergoyang – goyang saat

duduk seperti orang yang

sedang gelisah

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

11. Meninggalkan kursi saat jam

pelajaran di kelas atau dalam

situasi lain yang menuntut

duduk tenang

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

12. Berlari – larian atau memanjat

secara berlebihan dalam

situasi yang tidak tepat

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110


32



13. Mengalami kesulitan dalam

bermain atau bersantai yang

menuntut suasana hening

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

14. Sering bergerak sehingga

terlihat seolah – olah

dikendalikan oleh mesin

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

15. Berbicara secara berlebihan Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

16. Menjawab sebelum

pertanyaan selesai diberikan

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

17. Sulit menunggu giliran Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110

18. Mengganggu atau menyelak

orang lain (contoh: sering

menyelak saat pembicaraan

atau permainan)

Tidak Pernah 001

Sangat Jarang 010

Jarang 011

Sering 100

Sangat Sering 101

Selalu 110


33



19. Seberapa besar perilaku

tersebut mengganggu fungsi

keseharian klien Anda?

Tidak

Mengganggu

Sama Sekali

001

Tidak Terlalu

Mengganggu

010

Sedikit

Mengganggu

011

Cukup

Mengganggu

100

Seringkali

Mengganggu

101

Sangat

Mengganggu

110


tersebut mengganggu

kehidupan sosial klien

Anda?

Tidak

Mengganggu

Sama Sekali

001

Tidak Terlalu

Mengganggu

010

Sedikit

Mengganggu

011

Cukup

Mengganggu

100

Seringkali

Mengganggu

101

Sangat

Mengganggu

110


tersebut mengganggu

kehidupan akademis klien

Anda?

Tidak

Mengganggu

Sama Sekali

001

Tidak Terlalu

Mengganggu

010

Sedikit

Mengganggu

011

Cukup

Mengganggu

100

Seringkali

Mengganggu

101

Sangat

Mengganggu

110

22. Usia Anak Anda? < = 12 Tahun 1

> 12 Tahun 0


34



23. Apakah gejala muncul di 2

tempat atau lebih? (Seperti:

rumah dan sekolah)

Ya 1

Tidak 0

24. Kapan waktu gejala mulai

terlihat?

> 6 bulan 1

< 6 bulan 0

Pada Tabel 3.1 menunjukkan 24 gejala ADHD. Semua nilai yang terdapat

di dalam tabel nantinya akan diubah ke dalam bentuk biner. Perhitungan yang

dilakukan oleh sistem akan dilakukan pada desktop application. Setelah

perhitungan selesai dilakukan, maka sistem akan menyimpan bobot dari hasil

perhitungan tersebut.

Semua variabel akan ditampilkan pada web application. Pada Tabel 3.1

sebagai input user dan Tabel 3.2 sebagai output ke user. Semua perhitungan

dilakukan untuk mencapai nilai yang terdapat pada Tabel 3.2.

Tabel 3.2 Variabel dan Nilai dari Keluaran Sistem

No. Variabel Nilai

1. Selamat!, Anda tidak perlu

mengkhawatirkan perilaku anak

Anda. Apabila Anda masih memiliki

pertanyaan terkait perilaku anak

Anda, silahkan menghubungi

psikolog/psikiater

0

2. Sebaiknya Anda mengkonsultasikan

perilaku anak Anda ke psikolog /

psikiater

1


35

3.3 Perancangan Sistem

Setelah mendapatkan rancangan arsitektur jaringan dari aplikasi yang akan

dibuat, selanjutnya dilakukan perancangan dari sistem secara keseluruhan.

Diagram-diagram yang akan dibuat dalam perancangan sistem ini yaitu flowchart,

data flow diagram, dan entity relationship diagram.

3.3.1 Flowchart

Dalam menggunakan sistem ini, terdapat empat jenis flowchart yang dapat

dijelaskan seperti berikut.

1. Flowchart Aplikasi

Gambar 3.2 Flowchart Aplikasi

Pada Gambar 3.2 sebelah kiri merupakan flowchart dari desktop

application, seorang admin akan melakukan learning data yang akan menghasilkan

bobot untuk digunakan pada web application. Pada bagian kanan merupakan

flowchart web application. User dapat memilih beberapa menu yang ditampilkan

pada web application. Jika user telah memilih, maka akan muncul tampilan ataupun

proses yang dilakukan sistem. User dapat memilih menu about, encyclopedia,


36

sistem pakar, dan kontak. Selain user juga terdapat admin. Pertama kali, admin

harus melakukan login terlebih dahulu, dan menu admin akan ditampilkan. Menu

admin berisi beberapa fitur yang digunakan untuk melakukan upload bobot dari

desktop application. Bobot tersebut digunakan agar sistem pakar dapat mengambil

keputusan apakah seorang anak mengalami gejala ADHD atau tidak. Selain itu,

admin dapat memilih semua menu dan admin dapat menambahkan, mengubah, dan

menghapus data slideshow, encyclopedia, dan article.

2. Flowchart Sub Proses Sistem Pakar

Gambar 3.3 Flowchart pada Sub Proses Sistem Pakar

Pada Gambar 3.3 terdapat flowchart yang menggambarkan alur pada sistem

pakar. User akan memilih gejala yang dialami oleh anak. Jika semua gejala telah


37

diisi, maka sistem pakar akan menghitung bobot dan akan memberi keputusan

kepada user apakah anak tersebut mengalami ADHD atau tidak.

Dalam flowchart sub proses sistem pakar terdapat sub proses perhitungan

symptom yang digunakan untuk melakukan perhitungan dari symptom yang di-input

oleh user.

Gambar 3.4 Flowchart pada Sub proses Perhitungan Symptom

3. Flowchart pada Desktop Application

Pada desktop application, admin akan melakukan learning. Data yang

digunakan adalah data training yang telah ada dan dimasukkan ke dalam sistem.


38

Lalu, admin akan melakukan input max epoch dan melakukan learning. Hasil dari

proses ini berupa bobot yang nantinya akan digunakan oleh admin untuk

dimasukkan ke dalam web application.

Gambar 3.5 Flowchart pada Desktop Application

4. Flowchart pada Web Application

Pada web application, alur seorang admin dalam menggunakan sistem ini

dapat dilihat pada Gambar 3.5.

Gambar 3.6 Flowchart Login Admin


39

Seorang admin yang menggunakan sistem ini, terutama dalam web

application harus melakukan login terlebih dahulu agar dapat masuk ke dalam

admin page¸ di mana seorang admin dapat melakukan upload bobot dari hasil

training pada desktop application dan melakukan CRUD pada article.

Gambar 3.7 Flowchart Upload Bobot Hasil Training

Setelah melakukan login, admin akan melakukan upload bobot dari hasil

training yang dilakukan pada desktop application. Bobot ini akan digunakan untuk

perhitungan yang dilakukan oleh neural network dari input yang dimasukkan oleh

user agar mendapatkan hasil yang sesuai dengan target dan dapat mengambil

keputusan. Output tersebut nantinya akan ditampilkan kepada user.


40

Gambar 3.8 Flowchart Insert Slideshow

Admin dapat memilih dua menu, yaitu menu slideshows dan menu articles.

Pada menu slideshows, admin dapat menambahkan gambar yang diinginkan admin

untuk ditampilkan pada halaman utama. Setelah admin memasukkan gambar, maka

data slideshow akan ter-update.


41

Gambar 3.9 Flowchart Edit Slideshow

Selain itu, admin dapat melakukan edit slideshow. Pada fitur ini, admin

dapat mengubah gambar yang telah ada. Input yang dilakukan admin berupa

gambar dan setelah divalidasi, maka gambar tersebut langsung di-update dan

ditampilkan di halaman utama.


42

Gambar 3.10 Flowchart Delete Slideshow

Jika admin ingin menghapus gambar slideshow, admin harus memilih

gambar yang diinginkan untuk dihapus dan setelah itu, akan muncul modal yang

digunakan untuk konfirmasi kepada admin jika gambar tersebut akan dihapus. Data

yang dihapus akan langsung di-update dan dihilangkan dari list slideshow.


43

Gambar 3.11 Flowchart Insert Article

Selain itu, admin juga dapat memilih menu articles. Pada menu ini, admin

dapat menambahkan data article yang terdapat pada Articles page. Setelah admin

melakukan input article dan telah dicek bahwa data tersebut valid, maka admin

akan di direct ke admin page dan article tersebut di update pada user page dan

admin page dengan article yang baru.


44

Gambar 3.12 Flowchart Edit Article

Pada alur ini, seorang admin dapat melakukan edit article yang telah ada.

Setelah data yang di-input valid, maka article akan berubah menjadi article yang

paling baru dan halaman akan di-redirect ke admin page.


45

Gambar 3.13 Flowchart Delete Article

Admin akan memilih data article yang ingin dihapus. Setelah admin

memilih article, data akan ter-update menjadi data yang paling baru dan admin akan

di-redirect ke halaman admin.

5. Flowchart Algoritma Backpropagation

Algoritma Backpropagation pada neural network membutuhkan data-data

training dan target yang diinginkan. Kemudian dilakukan inisialisasi semua input,

target, bias awal, bobot awal, max epoch, learning rate, error.


46

Gambar 3.14 Flowchart Algoritma Backpropagation

Sub proses learning akan dipanggil secara terus-menerus selama epoch

belum mencapai maksimum epoch. Nilai error dari proses pelatihan terakhir akan

dikembalikan setelah proses ini selesai. Pada proses learning juga terdapat sub

proses TransferFunctionDerivative yang merupakan turunan dari TransferFunction

dan digunakan untuk menjalankan algoritma backpropagation dan menghitung

kesalahan. Setelah kesalahan dihitung, proses ini akan mengembalikan nilai error

dari pelatihan ini.


47

Gambar 3.15 Flowchart TransferFunctionDerivative

3.3.2 Data Flow Diagram

Data Flow Diagram berfungsi untuk menggambarkan arus dari sistem,

sehingga membantu penggunanya untuk memahami sistem secara logika,

terstruktur, dan jelas. Mula-mula DFD yang akan digambarkan adalah DFD level

0.

Gambar 3.16 Data Flow Diagram Level 0 pada Desktop Application

Gambar 3.16 merupakan DFD level 0 yang terdapat di dalam desktop

application. Interaksi terjadi antara sistem dan external entity. Pada desktop

application hanya terdapat satu entitas yaitu, admin.


48

Data flow diagram level 0 terdapat proses sistem learning neural network

yang memiliki sub proses lainnya. Pada Gambar 3.17, terdapat data flow diagram

level 1 untuk menjelaskan sub proses yang terdapat di dalam sistem learning neural

network.


Data training dan epoch yang dikirim dari admin akan langsung diproses ke

dalam proses learning. Hasil dari proses tersebut akan masuk ke dalam proses

hitung output. Pada proses hitung output akan dijabarkan pada gambar 3.18 sebagai

data flow diagram level 2 pada desktop application.


Data bobot akan diinisialisasikan dan dikirim ke dalam proses feed forward.

Proses ini digunakan untuk menghitung, menjumlahkan dan mengalikan value dari

layer sebelumnya dengan bobot yang ada. Setelah itu, akan menghasilkan list

output yang akan dikirim ke admin.


49

Gambar 3.19 Data Flow Diagram Level 0 pada Web Application

Pada Gambar 3.19 menunjukkan interaksi sistem dengan external entity

pada web application. Ada dua entitas yang berhubungan dengan sistem yaitu,

admin dan user. Admin berperan sebagai pakar dan user berperan sebagai orang tua.

Admin dapat melakukan upload bobot hasil training yang dilakukan di desktop

application. Selain itu, admin juga dapat menambah data symptom, edit data

symptom, dan delete data symptom. Setelah DFD level 0 selesai didefinisikan,

rancangan DFD dapat dilanjutkan ke DFD level 1 seperti pada Gambar 3.20 yang

menguraikan sistem pakar prediksi ADHD dengan lebih terperinci.

Pada DFD level 1 terdapat beberapa proses, yaitu proses login, proses

upload data yang digunakan admin untuk memasukkan bobot hasil learning, proses

manipulasi data yang akan menuju ke proses insert, update, dan delete. Admin

memiliki wewenang untuk menambahkan, mengubah ataupun menghapus data

slideshow dan article. Lalu, proses simpan bobot untuk menyimpan bobot yang

telah di-upload dan proses diagnose untuk memberikan hasil output dari data yang

di-input berdasarkan bobot yang telah di-learning pada desktop application.


50



51

Setelah DFD level 1 pada web application telah dibuat, pada proses

diagnose akan dipecah lagi menjadi beberapa proses di dalamnya. Proses yang

terdapat pada diagonose dapat dilihat pada Gambar 3.21 yang merupakan DFD

level 2 dari web application.


3.4 Perancangan Database

Database yang digunakan oleh sistem adalah MySQL. Untuk menjelaskan

hubungan antar objek data dalam database maka digambarkan Entity Relationship

Diagram (ERD). Terdapat empat buah entitas yakni Users, Slideshows, Articles

dan Symptoms. Hubungan dari entitas Users ke Articles, Users ke Slideshows, dan

Users ke Symptoms adalah one to many, di mana seorang user yang sebagai admin

dapat memiliki banyak hubungan ke article, symptom, dan slideshow.

Gambar 3.22 Entity Relationship Diagram


52

1. Nama Tabel : Users

Fungsi : menyimpan data-data user yang menggunakan sistem.

Primary Key : ID

Tabel 3.3 Tabel Users

No Nama Field Tipe Data Panjang Keterangan

1 ID int 11 ID pengguna

2 firstname varchar 50 Nama depan

3 lastname varchar 50 Nama belakang

4 phone varchar 15 No telp pengguna

5 email varchar 50 Alamat email

pengguna

6 username varchar 20 Username pengguna

7 passsword varchar 20 Password pengguna

2. Nama Table : Slideshows

Fungsi : menyimpan data-data slideshow di dalam web

Primary Key : ID

Foreign Key : username

Tabel 3.4 Tabel Slideshows


1 ID int 11 ID artikel

2 image_slideshow text 100 Path gambar

slideshow

3 created_by varchar 20 Username yang

membuat artikel

3. Nama Table : Articles

Fungsi : menyimpan data-data article di dalam web

Primary Key : ID

Foreign Key : username


53

Tabel 3.5 Tabel Articles


1 ID int 11 ID artikel

2 Image_paths text 100 Path gambar artikel

3 title_Article text 100 Judul artikel

4 isi_Article text 100 Isi artikel

5 created_by varchar 20 Username yang

membuat artikel

4. Nama Table : Symptoms

Fungsi : menyimpan data-data symptom di dalam web

Primary Key : ID

Table 3.6 Table Symptoms


1 ID int 11 ID symptom

2 symptom text 100 Detail symptom

3.5 Perancangan Antarmuka

Perancangan antarmuka pada sistem ini dibagi menjadi dua yaitu

perancangan antarmuka desktop dan perancangan antarmuka web.

3.5.1 Perancangan Antarmuka Desktop

Tampilan antarmuka desktop dibagi menjadi dua bagian yang akan

dijelaskan sebagai berikut.

1. Halaman Screen

Halaman ini berisi gambar dari aplikasi yang dibangun. Halaman ini

dijalankan pada saat pertama kali aplikasi dibuka. Rancangan tampilan dari screen

dapat dilihat pada Gambar 3.23.


54

Gambar 3.23 Halaman Screen pada Desktop Application

2. Halaman Utama

Halaman utama akan muncul setelah halaman screen. Pada halaman ini,

terdapat fitur-fitur untuk melakukan data training yang akan dilakukan oleh admin.

Rancangan halaman utama dapat dilihat pada Gambar 3.24.

Gambar 3.24 Halaman Utama pada Desktop Application

3.5.2 Perancangan Antarmuka Web

Web yang dibuat dalam bentuk one-page web. Perancangan antarmuka web

dibagi menjadi beberapa bagian yang akan dijelaskan sebagai berikut.


55

1. Halaman Utama

Halaman utama merupakan halaman yang akan muncul pertama kali pada

saat web diakses. Pada halaman ini, memiliki beberapa informasi mengenai

Attention Deficit Hyperactivity Disorder. Selain itu, pada halaman utama memiliki

beberapa menu dan fitur. Berikut rancangan halaman utama yang akan dijelaskan

pada Gambar 3.25.

Gambar 3.25 Halaman Utama pada Web Application

Halaman ini terdapat lima menu yang berada di atas halaman. Apabila menu

tersebut diklik, maka user akan langsung diarahkan ke content yang berkaitan.

a) Menu About

Menu ini berisi informasi mengenai tujuan pembuatan sistem pendeteksi

ADHD dengan menggunakan neural network dan informasi lainnya mengenai

pakar.


56

Gambar 3.26 Menu About pada Web Application

b) Menu Encyclopedia

Menu ini berisi arikel-artikel tentang ADHD yang telah dimasukkan oleh

admin. User dapat melihat informasi dari tiap-tiap konten tersebut.

Gambar 3.27 Menu Encyclopedia pada Web Application

c) Menu Test

Pada menu ini, terdapat beberapa pernyataan yang merupakan symptom

untuk anak ADHD. Pada bagian ini, rancangan yang dibuat terdapat pada Gambar

3.28.


57

Gambar 3.28 Menu Test pada Web Application

Setelah button submit diklik, maka akan muncul output apakah anak

mengalami ADHD atau tidak.

Gambar 3.29 Output pada Menu Test

Keputusan akan muncul setelah mengisi pernyataan mengenai gejala

ADHD. Bila ingin mengulangi lagi, tinggal tekan button retry.

d) Menu Contact

Menu ini berisikan konten-konten yang di dalamnya terdapat informasi

mengenai kontak psikolog.


58

Gambar 3.30 Menu Contact pada Web Application

e) Menu Login

Menu ini akan menampilkan modal yang akan digunakan oleh admin. Jika

ingin masuk ke halaman khusus untuk admin, maka harus melakukan login. Admin

akan melakukan input username dan password. Jika username dan password salah,

maka admin akan kembali ke halaman sebelumnya.

Gambar 3.31 Menu Login

2. Halaman Admin

Halaman ini merupakan landing page setelah admin melakukan login. Pada

halaman ini, admin dapat melakukan upload bobot yang didapat dari proses

training pada desktop application.


59

Gambar 3.32 Halaman Admin

Setelah landing page admin muncul, halaman yang ditampilkan berupa

halaman yang digunakan admin untuk melakukan upload bobot dari hasil yang

telah di training pada dekstop application.

Gambar 3.33 Fitur Upload pada Halaman Admin

Pada halaman admin terdapat dua menu lainnya seperti menu slideshows,

dan menu articles. Menu-menu tersebut digunakan oleh admin untuk mengatur

tampilan pada halaman utama.


60

a. Menu Slideshows

Menu slideshows berisi halaman yang digunakan admin untuk mengatur

konten berupa gambar yang nantinya akan ditampilkan sebagai slideshow di

halaman utama.

Gambar 3.34 Menu Slideshows

Admin dapat menambahkan sebuah gambar yang dapat dijadikan slideshow,

dengan cara menekan button add slideshow. Setelah admin menekan button

tersebut, maka akan muncul tampilan seperti pada Gambar 3.34.

Gambar 3.35 Add Slideshow pada Web Application


61

Setelah admin menambahkan gambar slideshow, admin juga dapat menekan

button edit yang terdapat di dalam tabel. Button edit digunakan untuk mengubah

gambar yang telah ada dengan gambar yang baru. Setelah gambar dimasukkan,

maka data slideshow akan ter-update.

Gambar 3.36 Edit Slideshow pada Web Application

Button delete digunakan untuk menghapus gambar yang ada di dalam list

slideshow. Admin akan memilih gambar yang tidak diinginkan, dan menekan button

delete yang nantinya akan menampilkan suatu modal yang digunakan untuk

melakukan konfirmasi kepada admin terhadap gambar yang ingin dihapus.

Gambar 3.37 Delete slideshow pada Web Application

b. Menu Articles

Menu ini berisi halaman yang digunakan oleh admin untuk menambah

article, edit article, ataupun menghapus article.


62

Gambar 3.38 Menu Articles pada Web Applicaton

Seorang admin dapat menambahkan sebuah artikel baru mengenai ADHD.

Jika admin menekan button add article maka, akan muncul sebuah modal yang

digunakan oleh admin untuk mengisi field-field tentang artikel yang ingin

dimasukkan. Admin dapat memulai dengan melakukan upload pada gambar artikel,

mengisi judul artikel dan isinya. Jika telah selesai, data yang dimasukkan tadi, akan

ditampilkan di halaman utama ataupun di halaman admin.

Gambar 3.39 Insert Article pada Web Application

Admin juga dapat melakukan edit article dari data yang telah ada. Pada

halaman articles, jika admin menekan button edit, maka akan muncul tampilan


63

modal edit. Jika semua data artikel yang ingin diubah telah selesai dan admin telah

melakukan submit, maka data akan langsung di update dan ditampilkan di halaman

utama ataupun di halaman admin.

Gambar 3.40 Edit Article pada Web Application

Selain itu, admin juga dapat melakukan delete article pada halaman articles.

Jika admin menekan button delete, maka akan muncul modal confirmation untuk

menghapus artikel.

Gambar 3.41 Delete Article pada Web Application


lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1187/4/bab iii.pdfperancangan...

Documents