No title

BAB IV PERANCANGAN SISTEM

4.1

PERANCANGAN SISTEM Untuk memudahkan pembuatan aplikasi sistem pakar berbasis website,

maka akan dibuat model menggunakan UML (Unified Modeling Language). Perlu diketahui metode UML merupakan metode oriented programming (OOP) atau pemrograman berorientasi objek yang menggunakan notasi grafis dalam menyatakan suatu desain. Pada penulisan notasi UML yang digunakan meliputi: Use Case Diagram, Activity Diagram dan Sequence Diagram. 4.1.1 USE CASE DIAGRAM Diagram use case merupakan bagian tertinggi dari fungsionalitas yang dimiliki sistem yang menggambarkan bagaimana seseorang atau aktor akan menggunakan dan memanfaatkan sistem. Diagram ini juga mendeskripsikan apa yang akan dilakukan oleh sistem. Use case terdiri dari tiga bagian yaitu identifikasi aktor, identifikasi use case dan skenario use case. Berikut adalah symbol-simbol yang ada pada diagram use case: Tabel 4.1 Tabel Simbol Use Case Diagram Simbol

Deskripsi Fungsionalitas yang disediakan sistem sebagai unit-

Use case

unit yang saling bertukar pesan antar unit atau aktor Aktor / actor

Orang, proses, atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat di luar sistem informasi yang akan dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar orang, tapi aktor belum tentu merupakan orang

Asosiasi / association

Komunikasi antara aktor dan use case yang berpartisipasi pada use case atau use case yang memiliki interaksi dengan aktor

28

http://digilib.mercubuana.ac.id/

Ekstensi / extend

Relasi use case tambahan ke sebuah use case dimana use case yang ditambahkan dapat berdiri sendiri walau

<<extend>>

tanpa use case tambahan itu Generalisasi /

Hubungan generalisasi dan spesialisasi (umum-

generalization

khusus) antara dua buah use case dimana fungsi yang satu adalah fungsi yang lebih umum dari lainnya

Include

Relasi use case tambahan ke sebuah use case di mana use case yang ditambahkan memerlukan use case ini

<>

untuk menjalankan fungsinya atau sebagai syarat dijalankan use case ini Berikut adalah use case diagram untuk aplikasi sistem pakar Volvo TAD 760 VE: Edit Data Kerusakan

Input Data Kerusakan

Hapus Data Kerusakan Mengelola Data Kerusakan

Edit Data Pertanyaan Input Data Pertanyaan

Hapus Data Pertanyaan

<>

Mengelola Data Pertanyaan <>

Admin

<>

Login

Mengelola Data Solusi

Input Data Solusi

Hapus Data Solusi <>

Edit Data Solusi

Diagnosa Kerusakan

User

Registrasi

Gambar 4.1 Use Case Diagram

29


Berikut adalah keterangan dari use case diagram diatas: Tabel 4.2 Keterangan Use Case Diagram Nama Use case

Keterangan Pada use case ini website akan menampilkan form

Login

login. Mengelola Kerusakan

Merupakan

kelas

proses

yang

diambil

dari

pendefinisian use case mengelola kerusakan yang di dalamnya harus juga menangani proses input kerusakan, edit kerusakan, dan hapus kerusakan. Mengelola Pertanyaan

Merupakan

kelas

proses

yang

diambil

dari

pendefinisian use case mengelola pertanyaan yang di dalamnya harus juga menangani proses input pertanyaan, edit pertanyaan, dan hapus pertanyaan. Mengelola Solusi

Merupakan

kelas

proses

yang

diambil

dari

pendefinisian use case mengelola solusi yang di dalamnya harus juga menangani proses input solusi, edit solusi, dan hapus solusi. Diagnosa Kerusakan

Pada use case ini website akan menampilkan daftar kerusakan yang akan dipilih oleh aktor dan kemudian akan muncul pertanyaan-pertanyaan yang harus dijawab oleh aktor untuk menentukan penyebab kerusakan dan solusi kerusakan tersebut.

Registrasi

Pada use case ini website akan menampilkan form pendaftaran user yang akan diisi oleh user baru yang ingin mengakses website sistem pakar ini.

4.1.2 ACTIVITY DIAGRAM Activity diagram merupakan bagian dari penggambaran sistem secara fungsional menjelaskan proses-proses logika atau fungsi yang terimplementasi oleh kode program. Berikut merupakan Activity diagram yang menjelaskan interaksi antara pengguna atau aktor dengan aplikasi sistem pakar berbasis website.

30


Aktivitas dimulai ketika pengguna membuka website melalui web browser. Lalu muncul tampilan halaman login yang akan digunakan oleh pengguna untuk masuk ke dalam aplikasi sistem pakar. 1. Activity Diagram Login Activity Diagram Login

User

Aplikasi

Membuka halaman website

Menampilkan halaman website

User memasukkan username dan password

Klik tombol Login

Sistem memverifikasi data yang dinput

Tidak

Ya

Menampilkan halaman beranda website

Phase

Menampilkan pesan kesalahan login

Gambar 4.2 Activity Diagram Login Keterangan : Pada saat pengguna membuka website maka halaman awal yang terbuka adalah halaman login. Pada halaman ini pengguna diwajibkan untuk mengisi username dan password yang telah terdaftar pada sistem. Apabila yang melakukan login adalah admin maka yang akan terbuka adalah halaman administrator,

31


sedangkan apabila yang melakukan login adalah user maka yang akan terbuka adalah halaman user. 2. Activity Diagram Registrasi User Activity Diagram Registrasi

User

Aplikasi


Menampilkan halaman website

Klik tombol Daftar

Sistem menampilkan halaman form pendaftaran

Mengisi data pada form pendaftaran

Sistem menyimpan data yang telah diisi

Tidak

Menampilkan pesan registrasi berhasil

Phase

Menampilkan pesan registrasi gagal

Ya

Gambar 4.3 Activity Diagram Registrasi User Keterangan : Aktivitas diawali dengan user membuka halaman awal website lalu klik pada menu Daftar. Setelah itu akan muncul halaman form registrasi yang harus diisi oleh user. Setelah user selesai mengisi form registrasi lalu user menekan klik pada tombol Simpan. Apabila registrasi berhasil maka akan muncul pesan registrasi berhasil dan apabila registrasi gagal maka akan muncul pesan registrasi gagal.

32


3. Activity Diagram Diagnosa Kerusakan Activity Diagram Diagnosa Kerusakan

User

Aplikasi

Membuka halaman diagnosa kerusakan

Menampilkan halaman diagnosa kerusakan

Memilih jenis kerusakan

Sistem menampilkan pertanyaan awal

Menjawab pertanyaan Ya atau Tidak

Tidak

Menampilkan solusi

Phase

Menampilkan pertanyaan berikutnya

Ya

Gambar 4.4 Activity Diagram Diagnosa Kerusakan Keterangan : Aktivitas diawali dengan user yang telah berhasil login memilih menu Diagnosa Kerusakan. Pada halaman Diagnosa Kerusakan akan terdapat beberapa jenis kerusakan yang salah satunya akan dipilih oleh user sesuai dengan kebutuhannya. User dapat memilih salah satu jenis kerusakan dengan cara menekan klik pada jenis kerusakan yang diinginkan. Lalu akan muncul pertanyaan yang akan dijawab oleh user dengan jawaban YA atau TIDAK hingga muncul solusi dari kerusakan tersebut.

33


4. Activity Diagram Input Kerusakan Activity Diagram Input Kerusakan User

Pilih menu data kerusakan

Aplikasi

Menampilkan tabel data kerusakan

Memilih sub menu tambah data kerusakan Menampilkan form penambahan data kerusakan

Input data kerusakan

Menambahkan data kerusakan ke dalam database

Phase

Simpan data

Gambar 4.5 Activity Diagram Input Kerusakan Keterangan : Aktivitas diawali dengan admin yang telah berhasil login memilih menu Data Kerusakan. Setelah masuk halaman Data Kerusakan admin kemudian memilih sub menu Tambah Data Kerusakan. Kemudian admin mengisi form pengisian data atau informasi mengenai kerusakan yang akan dimasukkan. Setelah selesai admin menekan klik pada tombol Simpan untuk menyimpan data kerusakan yang diisi.

34


5. Activity Diagram Input Pertanyaan Activity Diagram Input Pertanyaan User

Pilih menu data pertanyaan

Aplikasi

Menampilkan tabel data pertanyaan

Memilih sub menu tambah data pertanyaan Menampilkan form penambahan data pertanyaan

Input data pertanyaan Menambahkan data pertanyaan ke dalam database

Phase

Simpan data

Gambar 4.6 Activity Diagram Input Pertanyaan Keterangan : Aktivitas diawali dengan admin yang telah berhasil login memilih menu Data Pertanyaan. Setelah masuk halaman Data Pertanyaan admin kemudian memilih sub menu Tambah Data Pertanyaan. Kemudian admin mengisi form pengisian data atau informasi mengenai pertanyaan yang akan dimasukkan. Setelah selesai admin menekan klik pada tombol Simpan untuk menyimpan data pertanyaan yang diisi.

35


6. Activity Diagram Input Solusi Activity Diagram Input Solusi User

Pilih menu data solusi

Aplikasi

Menampilkan tabel data solusi

Memilih sub menu tambah data solusi

Menampilkan form penambahan data solusi

Input data solusi

Menambahkan data solusi ke dalam database

Phase

Simpan data

Gambar 4.7 Activity Diagram Input Solusi Keterangan : Aktivitas diawali dengan admin yang telah berhasil login memilih menu Data Solusi. Setelah masuk halaman Data Solusi admin kemudian memilih sub menu Tambah Data Solusi. Kemudian admin mengisi form pengisian data atau informasi mengenai solusi yang akan dimasukkan. Setelah selesai admin menekan klik pada tombol Simpan untuk menyimpan data solusi yang diisi. 4.1.3 SEQUENCE DIAGRAM Sequence Diagram merupakan gambaran interaksi antar masing-masing objek pada setiap use case dalam urutan waktu. Interaksi ini berupa pengiriman serangkaian data antar objek-objek yang saling berinteraksi.

36


1. Sequence Diagram Login Berikut ini adalah sequence diagram login untuk menggambarkan proses dimana user atau admin yang sudah memiliki akun untuk masuk ke dalam sistem pakar.

User Admin

Halaman Awal Website

Database


Menampilkan halaman awal website

memasukkan username dan password

Cek username dan password Data tidak cocok Menampilkan pesan kesalahan login

Input ulang username dan password Cek username dan password Data cocok Menampilkan halaman beranda website

Gambar 4.8 Sequence Diagram Login 2. Sequence Diagram Registrasi User Berikut ini adalah sequence diagram registrasi user untuk menggambarkan proses dimana user yang belum memiliki akun melakukan pendaftaran supaya memiliki akun yang digunakan untuk masuk ke dalam sistem pakar.

Halaman Register

User

Database


Menampilkan halaman awal website

Membuka halaman form registrasi

Menampilkan halaman form registrasi Mengisi data pada form registrasi Menyimpan data ke dalam database Data gagal disimpan

Menampilkan pesan gagal Mengisi ulang data pada form registrasi Menyimpan data ke dalam database Data berhasil disimpan Menampilkan halaman login

Gambar 4.9 Sequence Diagram Registrasi User

37


3. Sequence Diagram Diagnosa Kerusakan Berikut ini adalah sequence diagram diagnosa kerusakan untuk menggambarkan proses dimana seorang user memilih jenis kerusakan dan kemudian menjawab

pertanyaan

yang telah ditentukan sehingga

memperoleh solusi terkait kerusakan yang dialami.

Halaman Diagnosa Kerusakan

User

Database

Membuka halaman diagnosa kerusakan

Mengambil data kerusakan Menampilkan data kerusakan Menampilkan halaman diagnosa kerusakan

Memilih data kerusakan Mengambil pertanyaan Menampilkan pertanyaan

Menampilkan pertanyaan Menjawab pertanyaan Mengambil pertanyaan selanjutnya atau solusi Menampilkan pertanyaan selanjutnya atau solusi Menampilkan pertanyaan selanjutnya atau solusi

Gambar 4.10 Sequence Diagram Diagnosa Kerusakan 4. Sequence Diagram Input Kerusakan Berikut

ini

adalah

sequence

diagram

input

kerusakan

untuk

menggambarkan proses dimana admin melakukan penambahan data kerusakan untuk ditampilkan ke dalam sistem pakar. Halaman Data Kerusakan

User

Database

Membuka halaman data kerusakan

Mengambil data kerusakan Menampilkan data kerusakan Menampilkan halaman tabel data kerusakan

Memilih sub menu tambah data kerusakan Menampilkan halaman form penambahan kerusakan

Mengisi data kerusakan Menyimpan data kerusakan ke database Data berhasil disimpan Menampilkan halaman tabel data kerusakan

Gambar 4.11 Sequence Diagram Input Kerusakan 38


5. Sequence Diagram Input Pertanyaan Berikut

ini

adalah

sequence

diagram

input

pertanyaan

untuk

menggambarkan proses dimana admin melakukan penambahan data pertanyaan untuk ditampilkan ke dalam sistem pakar. Halaman Data Pertanyaan

User

Database

Membuka halaman data pertanyaan

Mengambil data pertanyaan Menampilkan data pertanyaan Menampilkan halaman tabel data pertanyaan

Memilih sub menu tambah data pertanyaan Menampilkan halaman form penambahan pertanyaan

Mengisi data pertanyaan Menyimpan data pertanyaan ke database Data berhasil disimpan Menampilkan halaman tabel data pertanyaan

Gambar 4.12 Sequence Diagram Input Pertanyaan 6. Sequence Diagram Input Solusi Berikut ini adalah sequence diagram input solusi untuk menggambarkan proses dimana admin melakukan penambahan data solusi untuk ditampilkan ke dalam sistem pakar.

User

Halaman Data solusi

Database

Membuka halaman data solusi

Mengambil data solusi Menampilkan data solusi Menampilkan halaman tabel data solusi

Memilih sub menu tambah data solusi Menampilkan halaman form penambahan solusi

Mengisi data solusi Menyimpan data solusi ke database Data berhasil disimpan Menampilkan halaman tabel data solusi

Gambar 4.13 Sequence Diagram Input Solusi 39


4.1.4 CLASS DIAGRAM Class diagram digunakan untuk menampilkan kelas-kelas dan paket-paket di dalam sistem. Class diagram menjelaskan hubungan antar tabel pada database yang digunakan oleh aplikasi. Berikut ini adalah gambar class diagram yang terjadi pada aplikasi sistem pakar Volvo TAD 760 VE berbasis website.

Pertanyaan

Kerusakan

- ID Pertanyaan - Pertanyaan - Ya - Tidak - ID Kerusakan

- ID Kerusakan - Jenis Kerusakan - Pertanyaan Awal - input_kerusakan() - edit_kerusakan() - hapus_kerusakan()

- input_pertanyaan() - edit_pertanyaan() - hapus_pertanyaan()

Users - Username - Nama Lengkap - Email - Password - Level - anggota_input() - anggota_proses()

Solusi - ID Solusi - Solusi - Gambar - input_solusi() - edit_solusi() - hapus_solusi()

Gambar 4.14 Class Diagram Berikut ini kamus data yang akan menjelaskan tabel-tabel class diagram yang digunakan dalam perancangan proses Unified Modelling Language (UML). 4.1.4.1 Tabel User Tabel 4.3 Tabel User Field

Type

Size

Username

Varchar

20

Nama Lengkap

Varchar

50

Email

Varchar

50

Berisi alamat email pengguna

Password

Varchar

10

Isi password

Level

Enum

‘admin’, ’user’

Keterangan Nama yang digunakan untuk melakukan login Berisi tentang nama lengkap pengguna

Berisi level pengguna (admin atau user)

40


4.1.4.2 Tabel Kerusakan Tabel 4.4 Tabel Kerusakan Field ID Kerusakan Jenis Kerusakan

Type

Size

Varchar

5

Text

Keterangan Nomor identitas untuk kerusakan Berisi jenis kerusakan mesin Pertanyaan yang muncul pertama

Pertanyaan Awal

Varchar

5

kali setelah memilih jenis kerusakan

4.1.4.3 Tabel Pertanyaan Tabel 4.5 Tabel Pertanyaan Field ID Pertanyaan Pertanyaan

Type

Size

Varchar

5

Keterangan Nomor identitas untuk pertanyaan Pertanyaan yang akan muncul pada

Text

diagnosa kerusakan Pertanyaan selanjutnya atau solusi

Ya

Varchar

5

yang akan muncul apabila pengguna menjawab YA Pertanyaan selanjutnya atau solusi

Tidak

Varchar

5

yang akan muncul apabila pengguna menjawab TIDAK

ID Kerusakan

Varchar

5

Type

Size

Varchar

5

Jenis kerusakan terkait pertanyaan

4.1.4.4 Tabel Solusi Tabel 4.6 Tabel Solusi Field ID Solusi Solusi

Text

Gambar

Text

Keterangan Nomor identitas untuk solusi Penjelasan tentang penyebab kerusakan Gambar terkait solusi yang ditampilkan

41


4.2

DESIGN ANTARMUKA (DESIGN INTERFACE) Berikut adalah tampilan menu utama pada aplikasi sistem pakar Volvo TAD

760 VE berbasis website. Pada tampilan halaman utama ini akan ada beberapa menu yang memiliki fungsi sebagai berikut: 1. Login

: Menampilkan halaman login

2. Registrasi User

: Menampilkan halaman registrasi untuk membuat akun baru

3. Beranda

: Menampilkan halaman website

4. Diagnosa Kerusakan : Menampilkan halaman yang akan digunakan untuk melakukan konsultasi atau diagnosa kerusakan 5. Data Kerusakan

: Menampilkan halaman yang berisi data-data jenis kerusakan

6. Data Pertanyaan

: Menampilkan halaman yang berisi data-data pertanyaan yang akan muncul pada menu konsultasi

7. Data Solusi

: Menampilkan halaman yang berisi data-data solusi yang akan muncul pada menu konsultasi

8. Tentang Kami

: Menampilkan informasi tentang website

42


1.

Halaman Login

LOGIN NOW username password LOGIN

Gambar 4.15 Halaman Login Keterangan : ini adalah halaman awal website yang digunakan untuk melakukan login 2.

Halaman Registrasi User HEADER WEBSITE

Beranda Registrasi

Batal

FORM REGISTRASI USERNAME NAMA LENGKAP EMAIL PASSWORD SIMPAN

FOOTER WEBSITE

Gambar 4.16 Halaman Registrasi User

43


Keterangan : ini adalah halaman registrasi user yang digunakan untuk melakukan pendaftaran akun baru dengan cara mengisi form registrasi yang telah disediakan. 3.

Halaman Beranda HEADER WEBSITE

Beranda Diagnosa Kerusakan

SELAMAT DATANG

Data Kerusakan Data Pertanyaan Data Solusi

Tentang Kami Logout

CONTENT

FOOTER WEBSITE

Gambar 4.17 Halaman Beranda Keterangan : ini adalah halaman awal ketika user berhasil melakukan login 4.

Halaman Diagnosa Kerusakan HEADER WEBSITE


PILIH JENIS KERUSAKAN

Tentang Kami Logout

TABEL DATA KERUSAKAN

FOOTER WEBSITE

Gambar 4.18 Halaman Diagnosa Kerusakan

44


Keterangan : ini adalah halaman yang digunakan untuk melakukan konsultasi terkait diagnosa kerusakan yang dialami. 5.

Halaman Pertanyaan Diagnosa Kerusakan

HEADER WEBSITE

Beranda Diagnosa Kerusakan Tentang Kami Logout

Pertanyaan

Ya

Tidak

FOOTER WEBSITE

Gambar 4.19 Halaman Pertanyaan Diagnosa Kerusakan Keterangan : ini adalah halaman yang akan muncul ketika user memilih salah satu jenis kerusakan yang ada pada halaman Diagnosa Kerusakan.

45


6.

Halaman Solusi Diagnosa Kerusakan

HEADER WEBSITE


Solusi

Penyebab:

Tentang Kami Logout Gambar Solusi (optional)

FOOTER WEBSITE

Gambar 4.20 Halaman Solusi Diagnosa Kerusakan Keterangan : ini adalah halaman yang akan muncul ketika user telah selesai menjawab pertanyaan-pertanyaan terkait jenis kerusakan yang dipilih 7.

Halaman Data Kerusakan

HEADER WEBSITE

Beranda Diagnosa Kerusakan Data Kerusakan Data Pertanyaan Data Solusi

DATA KERUSAKAN TAMBAH DATA

Tentang Kami Logout TABEL DATA KERUSAKAN

FOOTER WEBSITE

Gambar 4.21 Halaman Data Kerusakan 46


Keterangan :ini adalah halaman yang muncul apabila admin memilih menu Data Kerusakan. Halaman ini berisi data kerusakan yang telah terdaftar di dalam sistem. 8.

Halaman Input Data Kerusakan

HEADER WEBSITE


TAMBAH DATA KERUSAKAN


Jenis Kerusakan

Tentang Kami Logout

Pertanyaan Awal

ID Kerusakan

SIMPAN

BATAL

FOOTER WEBSITE

Gambar 4.22 Halaman Input Data Kerusakan Keterangan : ini adalah halaman yang akan muncul apabila admin menekan klik pada tombol Tambah Data pada halaman Data Kerusakan. Halaman ini digunakan untuk mengisi data kerusakan yang akan dimasukkan ke sistem.

47


9.

Halaman Data Pertanyaan

HEADER WEBSITE


DATA PERTANYAAN TAMBAH DATA


Tentang Kami Logout TABEL DATA PERTANYAAN

FOOTER WEBSITE

Gambar 4.23 Halaman Data Pertanyaan Keterangan : ini adalah halaman yang muncul apabila admin memilih menu Data Pertanyaan. Halaman ini berisi data-data pertanyaan yang telah terdaftar di dalam sistem. 10. Halaman Input Data Pertanyaan

HEADER WEBSITE


TAMBAH DATA PERTANYAAN


Solusi

Tentang Kami Logout

Ya

ID Pertanyaan

Tidak Jenis Kerusakan

SIMPAN

BATAL

FOOTER WEBSITE

Gambar 4.24 Halaman Input Data Pertanyaan 48


Keterangan : ini adalah halaman yang akan muncul apabila admin menekan klik pada tombol Tambah Data pada halaman Data Pertanyaan. Halaman ini digunakan untuk mengisi data atau informasi pertanyaan yang akan dimasukkan ke dalam sistem. 11. Halaman Data Solusi

HEADER WEBSITE

Beranda Diagnosa Kerusakan Data Kerusakan Data Pertanyaan Data Solusi

DATA SOLUSI TAMBAH DATA

Tentang Kami Logout TABEL DATA SOLUSI

FOOTER WEBSITE

Gambar 4.25 Halaman Data Solusi Keterangan : ini adalah halaman yang muncul apabila admin memilih menu Data Solusi. Halaman ini berisi data-data solusi yang telah terdaftar di dalam sistem.

49


12. Halaman Input Data Solusi

HEADER WEBSITE


TAMBAH DATA SOLUSI


Solusi

Tentang Kami Logout

Gambar

ID Solusi

SIMPAN

Pilih File BATAL

FOOTER WEBSITE

Gambar 4.26 Halaman Input Data Solusi Keterangan : ini adalah halaman yang akan muncul apabila admin menekan klik pada tombol Tambah Data pada halaman Data Solusi. Halaman ini digunakan untuk mengisi data atau informasi solusi yang akan dimasukkan ke dalam sistem.

50


13. Halaman Tentang Kami

HEADER WEBSITE

Beranda Diagnosa Kerusakan Tentang Kami Logout

TENTANG KAMI

Content

FOOTER WEBSITE

Gambar 4.27 Halaman Tentang Kami Keterangan : ini adalah halaman Tentang Kami yang menampilkan informasi tentang Aplikasi Sistem Pakar Volvo TAD 760 VE Berbasis Website.

51


No title

Recommend Documents