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 Use case Fungsionalitas yang disediakan sistem sebagai unitunit yang saling bertukar pesan antar unit atau aktor Aktor / actor Asosiasi / association 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 Komunikasi antara aktor dan use case yang berpartisipasi pada use case atau use case yang memiliki interaksi dengan aktor 28

Ekstensi / extend <<extend>> Generalisasi / generalization Include <<include>> Relasi use case tambahan ke sebuah use case dimana use case yang ditambahkan dapat berdiri sendiri walau tanpa use case tambahan itu Hubungan generalisasi dan spesialisasi (umumkhusus) antara dua buah use case dimana fungsi yang satu adalah fungsi yang lebih umum dari lainnya 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 760 VE: Berikut adalah use case diagram untuk aplikasi sistem pakar Volvo TAD Edit Data Kerusakan Input Data Kerusakan Hapus Data Kerusakan Mengelola Data Kerusakan Edit Data Pertanyaan Input Data Pertanyaan Hapus Data Pertanyaan <<include>> Mengelola Data Pertanyaan Admin Mengelola Data Solusi <<include>> <<include>> Login Input Data Solusi Hapus Data Solusi Edit Data Solusi <<include>> 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 Login Pada use case ini website akan menampilkan form 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 pesan kesalahan login Menampilkan halaman beranda website Phase 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 Membuka halaman website Menampilkan halaman website Klik tombol Daftar Sistem menampilkan halaman form pendaftaran Mengisi data pada form pendaftaran Sistem menyimpan data yang telah diisi Tidak Ya Menampilkan pesan registrasi gagal Menampilkan pesan registrasi berhasil Phase 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 Ya Menampilkan pertanyaan berikutnya Menampilkan solusi Phase 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 Aplikasi Pilih menu data kerusakan Menampilkan tabel data kerusakan Memilih sub menu tambah data kerusakan Menampilkan form penambahan data kerusakan Input data kerusakan Simpan data Menambahkan data kerusakan ke dalam database Phase 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 Aplikasi Pilih menu data pertanyaan Menampilkan tabel data pertanyaan Memilih sub menu tambah data pertanyaan Menampilkan form penambahan data pertanyaan Input data pertanyaan Simpan data Menambahkan data pertanyaan ke dalam database Phase 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 Aplikasi Pilih menu data solusi Menampilkan tabel data solusi Memilih sub menu tambah data solusi Menampilkan form penambahan data solusi Input data solusi Simpan data Menambahkan data solusi ke dalam database Phase 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 Membuka halaman website 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. User Halaman Register Database Membuka halaman website 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. User Halaman Diagnosa Kerusakan 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. User Halaman Data Kerusakan 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 Menampilkan halaman tabel data kerusakan Menyimpan data kerusakan ke database Data berhasil disimpan 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. User Halaman Data Pertanyaan 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 Menampilkan halaman tabel data pertanyaan Menyimpan data pertanyaan ke database Data berhasil disimpan 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 Menampilkan halaman tabel data solusi Menyimpan data solusi ke database Data berhasil disimpan 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 - ID Pertanyaan - Pertanyaan - Ya - Tidak - ID Kerusakan - input_pertanyaan() - edit_pertanyaan() - hapus_pertanyaan() Kerusakan - ID Kerusakan - Jenis Kerusakan - Pertanyaan Awal - input_kerusakan() - edit_kerusakan() - hapus_kerusakan() 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 Keterangan Username Varchar 20 Nama Lengkap Varchar 50 Nama yang digunakan untuk melakukan login Berisi tentang nama lengkap pengguna Email Varchar 50 Berisi alamat email pengguna Password Varchar 10 Isi password Level Enum admin, user Berisi level pengguna (admin atau user) 40

4.1.4.2 Tabel Kerusakan Tabel 4.4 Tabel Kerusakan Field Type Size Keterangan ID Kerusakan Varchar 5 Nomor identitas untuk kerusakan Jenis Kerusakan Text Berisi jenis kerusakan mesin Pertanyaan Awal Varchar 5 Pertanyaan yang muncul pertama kali setelah memilih jenis kerusakan 4.1.4.3 Tabel Pertanyaan Tabel 4.5 Tabel Pertanyaan Field Type Size Keterangan ID Pertanyaan Varchar 5 Nomor identitas untuk pertanyaan Pertanyaan Text Pertanyaan yang akan muncul pada diagnosa kerusakan Ya Varchar 5 Pertanyaan selanjutnya atau solusi yang akan muncul apabila pengguna menjawab YA Tidak Varchar 5 Pertanyaan selanjutnya atau solusi yang akan muncul apabila pengguna menjawab TIDAK ID Kerusakan Varchar 5 Jenis kerusakan terkait pertanyaan 4.1.4.4 Tabel Solusi Tabel 4.6 Tabel Solusi Field Type Size Keterangan ID Solusi Varchar 5 Nomor identitas untuk solusi Solusi Text Penjelasan tentang penyebab kerusakan Gambar Text 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 USERNAME NAMA LENGKAP EMAIL PASSWORD FORM REGISTRASI 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 Data Kerusakan Data Pertanyaan Data Solusi SELAMAT DATANG 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 Beranda Diagnosa Kerusakan 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 Pertanyaan Tentang Kami Logout 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 Beranda Diagnosa Kerusakan 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 Beranda Diagnosa Kerusakan Data Kerusakan Data Pertanyaan Data Solusi Tentang Kami Logout TAMBAH DATA KERUSAKAN ID Kerusakan Jenis Kerusakan Pertanyaan Awal 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 Beranda Diagnosa Kerusakan Data Kerusakan Data Pertanyaan Data Solusi 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 Beranda Diagnosa Kerusakan Data Kerusakan Data Pertanyaan Data Solusi Tentang Kami Logout TAMBAH DATA PERTANYAAN ID Pertanyaan Solusi Ya 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 Beranda Diagnosa Kerusakan Data Kerusakan Data Pertanyaan Data Solusi TAMBAH DATA SOLUSI ID Solusi Solusi Tentang Kami Logout Gambar SIMPAN BATAL Pilih File 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