BAB III ANALISIS DAN DESAIN SISTEM
II.10. Analisa Masalah Analisa masalah dilakukan agar mengetahui masalah-masalah yang terkait didalam knowledge management system tentang maintenance hardware dan software di Universitas Potensi Utama. Belum adanya penerapan aplikasi knowledge management system tentang maintenace hardware dan software di Universitas Potensi Utama, sehingga ilmu pengetahuan tentang troubleshooting maupun maintenance hardware dan software tidak dapat disimpan dan nantinya akan hilang begitu saja. Untuk itu penulis ingin menerapkan knowledge management system tentang maintenace hardware dan software di Universitas Potensi Utama, agar nantinya ilmu pengetahuan tentang troubleshooting maupun maintenance hardware dan software dapat disimpan, dikelola, disajikan serta membaginya, agar knowledge tersebut bisa digunakan kembali dan dapat dikembangkan serta menghasilkan suatu knowledge yang baru
II.11. Desain Sistem Bentuk dari rancangan sistem yang akan penulis rancang adalah dengan menggunakan beberapa bentuk diagram dari UML yaitu, use case diagram, activity diagram dan sequence diagram.
34
35
III.2.1. Use Case Diagram Use case diagram menjelaskan tentang urutan kegiatan yang dilakukan actor dan sistem untuk mencapai suatu tujuan tertentu. Sebuah use case diagram mempresentasikan
sebuah
interaksi
antar
actor
dengan
sistem
dan
menggambarkan fungsionalitas yang diharapkan dari sebuah sistem (Dharwiyanti ; 2003). Berikut adalah use case diagram yang digunakan dalam pembuatan knowledge management system maintenace hardware dan software berbasis web pada Universitas Potensi Utama:
<< extend >>
<< extend >>
Login << include >> Beranda
<< include >>
<< include >>
Artikel << include >> Tambah Artikel User
<< include >> Tambah Kategori << include >> Tambah Diskusi
Forum
<< include >> Upload Gambar
<< include >>
<< include >>
Hubungi Kami
<< include >> << include >> Tambah Tambah Forum Pesan << include >>
<< include >>
Daftar Pesan
Upload File
Halaman Admin << include >> Tambah Admin << include >> Daftar Admin << include >> Tambah User
<< include >> Upload Video
<< include >> Daftar User
<< extend >>
Logout
Gambar III.1. Use Case Diagram
<< extend >>
Admin
36
III.2.2. Activity Diagram Activity diagram menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir (Dharwiyanti ; 2003). Berikut adalah rancangan activity diagram yang digunakan dalam knowledge management system maintenance hardware dan software berbasis web pada Universitas Potensi Utama:
1.
Activity Diagram Login
Operator
Sistem
Input Username & Password
Autentifikasi
Login Ulang
Salah
Benar Beranda
Gambar III.2. Activity Diagram Login
37
Gambar III.2. activity diagram login diatas merupakan gambaran dari sistem login bahwasanya ketika admin atau user melakukan proses login, apabila username dan password sesuai dengan database, maka akan masuk kehalaman beranda.
2.
Activity Diagram Tambah User
Operator
Sistem
Input Data User
Memeriksa Kelengkapan Data
Input Ulang Data User
Salah
Benar Simpan Data User
Menampilkan List User
Gambar III.3. Activity Diagram Tambah User
38
Gambar III.3. activity diagram tambah user diatas merupakan gambaran dari sistem tambah user, dimana proses tersebut hanya bisa dilakukan oleh admin yang berguna untuk menambahkan user, agar dapat login dan mengakses website.
3.
Activity Diagram Tambah Admin Operator
Sistem
Input Data Admin
Memeriksa Kelengkapan Data
Input Ulang Data Admin
Salah
Benar Simpan Data Admin
Menampilkan List Admin
Gambar III.4. Activity Diagram Tambah Admin
39
Gambar III.4. activity diagram tambah admin diatas merupakan gambaran dari sistem tambah admin, dalam proses tersebut berguna untuk menambahkan admin, agar dapat login dan mengakses website sebagai admin.
4.
Activity Diagram Tambah Artikel
Operator
Sistem
Input Judul Artikel, Pilih Kategori, Cari Gambar, Isi Artikel
Memeriksa Kelengkapan Data
Input Ulang Data Artikel
Salah
Benar Simpan Data & Upload Gambar
Menampilkan List Artikel
Gambar III.5. Activity Diagram Tambah Artikel
40
Gambar III.5. activity diagram tambah artikel diatas merupakan gambaran dari sistem tambah artikel, dimana proses tersebut hanya bisa dilakukan oleh admin yang berguna untuk membuat atau menambah artikel terbaru.
5.
Activity Diagram Tambah Forum
Operator
Sistem
Input Judul Forum, Pilih Kategori, Isi Forum
Memeriksa Kelengkapan Data
Input Ulang Data Forum
Salah
Benar Simpan Data Forum
Menampilkan List Forum
Gambar III.6. Activity Diagram Tambah Forum
41
Gambar III.6. activity diagram tambah forum diatas merupakan gambaran dari sistem tambah forum, dalam proses tersebut berguna untuk membuat forum tentang mengajukan pertanyaan ataupun membahas suatu permasalahan.
6.
Activity Diagram Ubah & Hapus Artikel
Operator
Sistem
Klik Link Ubah
Mengambil Data Artikel
Tampil Data Artikel
Mengubah Data Artikel
Edit Ulang Data Artikel
Memeriksa Kelengkapan Data
Salah Benar Simpan Data Artikel
Tampil List Artikel
Menampilkan List Artikel
Klik Link Hapus
Menghapus Data
Menampilkan List Artikel
Gambar III.8. Activity Diagram Ubah & Hapus Artikel
42
7.
Activity Diagram Ubah & Hapus Forum
Operator
Sistem
Klik Link Ubah
Mengambil Data Forum
Tampil Data Forum
Mengubah Data Forum
Edit Ulang Data Forum
Memeriksa Kelengkapan Data
Salah Benar Simpan Data Forum
Tampil List Forum
Menampilkan List Forum
Klik Link Hapus
Menghapus Data
Menampilkan List Forum
Gambar III.8. Activity Diagram Ubah & Hapus Forum
43
8.
Activity Diagram Tambah File
Operator
Sistem
Input Id Artikel, Cari File
Memeriksa Kelengkapan Data
Input Ulang Data File
Salah
Benar Upload File
Menampilkan List File
Gambar III.9. Activity Diagram Tambah File
Gambar III.9. activity diagram tambah file diatas merupakan gambaran dari sistem tambah file, dimana proses tersebut hanya bisa dilakukan oleh admin dalam proses tersebut berguna untuk upload file yang nantinya link download tersebut akan muncul dihalaman artikel yang telah dipilih.
44
9.
Activity Diagram Tambah Video
Operator
Sistem
Input Id Artikel, Cari Video
Memeriksa Kelengkapan Data
Input Ulang Data Video
Salah
Benar Upload Video
Menampilkan List Video
Gambar III.10. Activity Diagram Tambah Video
Gambar III.10. activity diagram tambah video diatas merupakan gambaran dari sistem tambah video, dimana proses tersebut hanya bisa dilakukan oleh admin dalam proses tersebut berguna untuk upload video tutorial yang nantinya link video tersebut akan muncul dihalaman artikel yang telah dipilih.
45
10. Activity Diagram Tambah Diskusi
Operator
Sistem
Input Isi Diskusi
Memeriksa Kelengkapan Data
Input Ulang Isi Diskusi
Salah
Benar Simpan Data Diskusi
Menampilkan Detail Artikel/Forum
Gambar III.11. Activity Diagram Tambah Diskusi
Gambar III.11. activity diagram tambah diskusi diatas merupakan gambaran dari sistem tambah diskusi, dalam proses tersebut berguna untuk memberikan tanggapan atau komentar terhadap artikel ataupun forum.
46
11. Activity Diagram Kirim Pesan
Operator
Sistem
Input Judul Pesan, Email & Isi Pesan
Memeriksa Kelengkapan Data
Input Ulang Data Pesan
Salah
Benar Simpan Data Pesan
Gambar III.12. Activity Diagram Kirim Pesan
Gambar III.12. activity diagram kirim pesan diatas merupakan gambaran dari sistem kirim pesan, dimana proses tersebut akan sering digunakan oleh user untuk mengirim sebuah pesan kepada admin yang berguna untuk menanyakan suatu permasalahan tetentu.
47
III.2.3. Squence Diagram Sequence diagram digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan output tertentu (Dharwiyanti ; 2003). Berikut dibawah ini adalah rancangan squence diagram yang akan digunakan dalam pembuatan knowledge management system maintenance hardware dan software berbasis web pada Universitas Potensi Utama:
1.
Sequence Diagram Login Adapun bentuk rancangan sequence diagram login yang dirancang penulis
adalah sebagai berikut:
Operator
Form Login
Proses
Database
Beranda
Input Username & Password Memproses Username & Password Salah
Valid
Username & Password Benar
Not Valid
Gambar III.13. Squence Diagram Login
2.
Sequence Diagram Tambah User Adapun bentuk rancangan sequence diagram tambah user yang dirancang
penulis adalah sebagai berikut:
48
Operator
Form User
Input Data User
Proses
Memproses
Database
Simpan Data User
List User
Tampil List User
Data Tidak Lengkap
Gambar III.14. Squence Diagram Tambah User
3.
Sequence Diagram Tambah Admin Adapun bentuk rancangan sequence diagram tambah admin yang dirancang
penulis adalah sebagai berikut:
Operator
Form Admin
Input Data Admin
Proses
Memproses
Database
Simpan Data Admin
List Admin
Tampil List Admin
Data Tidak Lengkap
Gambar III.15. Squence Diagram Tambah Admin
4.
Sequence Diagram Tambah Artikel Adapun bentuk rancangan sequence diagram tambah artikel yang dirancang
penulis adalah sebagai berikut:
49
Operator
Form Artikel
Input Data Artikel
Proses
Memproses
Database
Simpan Data Artikel
List Artikel
Tampil List Artikel
Data Tidak Lengkap
Klik Link Ubah Artikel Memproses Mengambil Data Artikel Menampilkan Data Artikel Mengubah Data Artikel Memproses Simpan Data Artikel Tampil List Artikel
Klik Link Hapus Artikel Memproses Menghapus Data Artikel Tampil List Artikel
Gambar III.16. Squence Diagram Tambah Artikel
5.
Sequence Diagram Tambah Forum Adapun bentuk rancangan sequence diagram tambah forum yang dirancang
penulis adalah sebagai berikut:
50
Operator
Form Forum
Input Data Forum
Proses
Memproses
Database
Simpan Data Forum
List Forum
Tampil List Forum
Data Tidak Lengkap
Klik Link Ubah Forum Memproses Mengambil Data Forum Menampilkan Data Forum Mengubah Data Forum Memproses Simpan Data Forum Tampil List Forum
Klik Link Hapus Forum Memproses Menghapus Data Forum Tampil List Forum
Gambar III.17. Squence Diagram Tambah Forum
6.
Sequence Diagram Tambah Video Adapun bentuk rancangan sequence diagram tambah video yang dirancang
penulis adalah sebagai berikut:
51
Operator
Form Video
Cari Video
Proses
Memproses
Database
Upload Video
List Video
Tampil List Video
Kapasitas Video Tarlalu Besar
Gambar III.18. Squence Diagram Tambah Video
7.
Sequence Diagram Tambah File Adapun bentuk rancangan sequence diagram tambah file yang dirancang
penulis adalah sebagai berikut:
Operator
Form File
Cari File
Proses
Memproses Kapasitas File Tarlalu Besar
Database
Upload File
List File
Tampil List File
Gambar III.19. Squence Diagram Tambah File
8.
Sequence Diagram Tambah Diskusi Adapun bentuk rancangan sequence diagram tambah diskusi yang
dirancang penulis adalah sebagai berikut:
52
Operator
Form Diskusi
Input Data Diskusi
Proses
Memproses
Form Artikel/Forum
Database
Simpan Data Diskusi
Tampil Form Artikel/Forum
Data Tidak Lengkap
Gambar III.20. Squence Diagram Tambah Diskusi
II.12. Desain Database Berikut adalah bentuk dari rancangan database yang akan penulis rancang dengan yang akan diterapkan dalam pembuatan knowledge management system maintenace hardware dan software berbasis web pada Universitas Potensi Utama.
III.3.1. Normalisasi Normalisasi merupakan suatu proses yang memudahkan desain struktur table secara benar sehingga query yang tak dapat ditanyakan tidak muncul. Disamping itu, normalisasi cenderung meminimumkan duplikasi data di dalam suatu basis data (Yanti Efendy ; 2012 : 258). Berikut dibawah ini adalah bentuk dari normalisasi database pada knowledge management system maintenance hardware dan software berbasis web pada Universitas Potensi Utama:
53
1.
Bentuk Tidak Normal dan Normal Tahap 1 (1NF)
Tabel III.1. Normalisasi Bentuk Tidak Normal dan Normal Tahap 1 (1NF) idforum
judul
kategori
iduser
unitkerjauser
isiforum
updated
1
Bagaimana Cara Untuk
3
1
BAAK
Sekarang ini saya
2016-08-01
lagi bingung…
15:14:45
Gimana sih cara
2016-08-01
untuk sharing…
15:18:59
Baru-baru ini
2016-08-01
tiba-tiba aja…
15:23:10
Minta sarannya
2016-08-01
dong suhu atau…
20:54:11
Memperbaiki PC… 2
Cara Melakukan
4
5
Kemahasiswaan
Sharing Printer… 4
Tips Untuk Menghemat
3
3
Perpustakaan
Battery Laptop… 5
Recommended
1
1
BAAK
Antivirus Terbaik…
2.
Bentuk Normal Tahap 2 (1NF) Tabel III.2. Normalisasi Bentuk Normal Tahap 2 (2NF)
idforum
judul
kategori
iduser
unitkerjauser
isiforum
updated
1
Bagaimana Cara Untuk
3
1
BAAK
Sekarang ini saya
2016-08-01
lagi bingung…
15:14:45
Gimana sih cara
2016-08-01
untuk sharing…
15:18:59
Baru-baru ini
2016-08-01
tiba-tiba aja…
15:23:10
Minta sarannya
2016-08-01
dong suhu atau…
20:54:11
Memperbaiki PC… 2
Cara Melakukan
4
5
Kemahasiswaan
Sharing Printer… 4
Tips Untuk Menghemat
3
3
Perpustakaan
Battery Laptop… 5
Recommended Antivirus Terbaik…
1
1
BAAK
54
idforum 1
judul
kategori
iduser
unitkerjauser
updated
3
1
BAAK
2016-08-01
Bagaimana Cara Untuk Memperbaiki PC…
2
15:14:45
Cara Melakukan Sharing
4
5
Kemahasiswaan
Printer… 4
15:18:59
Tips Untuk Menghemat
3
3
Perpustakaan
Battery Laptop… 5
2016-08-01 15:23:10
Recommended Antivirus
1
1
BAAK
Terbaik…
2016-08-01 20:54:11
idforum 1
judul Bagaimana Cara Untuk
iduser 1
Memperbaiki PC… 2
Cara Melakukan Sharing
5
Printer… 4
Tips Untuk Menghemat
3
Battery Laptop… 5
Recommended Antivirus
1
Terbaik…
3.
2016-08-01
Bentuk Normal Tahap 3 (1NF) Tabel III.3. Normalisasi Bentuk Normal Tahap 3 (3NF) idforum 1
judul Bagaimana Cara Untuk
iduser 1
Memperbaiki PC… 2
Cara Melakukan Sharing
5
Printer… 4
Tips Untuk Menghemat
3
55
Battery Laptop… 5
Recommended Antivirus
1
Terbaik…
iduser
namauser
1
Jenny Yulio
5
Devi Trianda Sari
3
Tamara Anggreini
1
Jenny Yulio
idforum
kategori
1
3
judul Bagaimana Cara Untuk Memperbaiki PC…
2
4
Cara Melakukan Sharing Printer…
4
3
Tips Untuk Menghemat Battery Laptop…
5
1
Recommended Antivirus Terbaik…
III.3.2. Desain Tabel Pada database yang akan penulis gunakan adalah aplikasi database My SQL, dimana penulis merancang beberapa tabel yaitu sebagai berikut: 1.
Tabel Admin Database
: dbkmsteknisi
Primary Key
: idadmin
56
Tabel III.4. Tabel Admin Nama Field
Tipe Data
Nilai
idadmin(*)
Int
50
nama
Varchar
150
unitkerja
Varchar
150
jabatan
Varchar
150
username
Varchar
100
password
Varchar
100
updated
Timestamp
-
Keterangan (*) : Primary Key
2.
Tabel User Database
: dbkmsteknisi
Primary Key
: iduser Tabel III.5. Tabel User
Nama Field
Nilai
iduser(*)
Int
50
nama
Varchar
150
unitkerja
Varchar
150
jabatan
Varchar
150
username
Varchar
100
password
Varchar
100
updated
Timestamp
-
Keterangan (*) : Primary Key
3.
Tipe Data
Tabel Artikel Database
: dbkmsteknisi
57
Primary Key
: idartikel Tabel III.6. Tabel Artikel
Nama Field
Tipe Data
Nilai
idartikel(*)
Bigint
225
judul
Text
-
kategori
Varchar
100
gambarartikel
Varchar
225
namaadmin
Varchar
150
isiartikel
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
4.
Tabel Forum Database
: dbkmsteknisi
Primary Key
: idforum Tabel III.7. Tabel Forum
Nama Field
Tipe Data
Nilai
idforum(*)
Bigint
225
judul
Text
-
kategori
Varchar
100
namaadmin
Varchar
150
unitkerja
Varchar
150
isiartikel
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
58
5.
Tabel Kategori Database
: dbkmsteknisi
Primary Key
: idkategori Tabel III.8. Tabel Kategori
Nama Field
Tipe Data
Nilai
idforum(*)
Int
50
kategori
Varchar
100
isiartikel
Text
-
Keterangan (*) : Primary Key
6.
Tabel Upload Gambar Database
: dbkmsteknisi
Primary Key
: idgambar
Tabel III.9. Tabel Upload Gambar Nama Field
Tipe Data
Nilai
idgambar(*)
Bigint
225
nama
Varchar
225
gambar
Varchar
225
keterangan
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
59
7.
Tabel Upload File Database
: dbkmsteknisi
Primary Key
: idfile Tabel III.10. Tabel Upload File
Nama Field
Tipe Data
Nilai
idfile(*)
Bigint
225
idartikel
Bigint
225
nama
Varchar
225
filekms
Varchar
225
keterangan
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
8.
Tabel Upload Video Database
: dbkmsteknisi
Primary Key
: idvideo Tabel III.11. Tabel Upload Video
Nama Field
Tipe Data
Nilai
idvideo(*)
Bigint
225
idartikel
Bigint
225
nama
Varchar
225
videokms
Varchar
225
urlvideo
Varchar
225
keterangan
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
60
9.
Tabel Diskusi Artikel Database
: dbkmsteknisi
Primary Key
: idkomentar Tabel III.12. Tabel Diskusi Artikel
Nama Field
Tipe Data
Nilai
idkomentar(*)
Bigint
225
idartikel
Bigint
225
judulartikel
Text
-
nama
Varchar
150
unitkerja
Varchar
150
isikomentar
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
10. Tabel Diskusi Forum Database
: dbkmsteknisi
Primary Key
: idkomentarforum Tabel III.13. Tabel Diskusi Forum
Nama Field
Tipe Data
Nilai
idkomentarforum (*)
Bigint
225
idforum
Bigint
225
judulforum
Text
-
nama
Varchar
150
unitkerja
Varchar
150
isikomentar
Text
-
updated
Timestamp
-
61
Keterangan (*) : Primary Key
11. Tabel Pesan Database
: dbkmsteknisi
Primary Key
: idhubungi Tabel III.14. Tabel Pesan
Nama Field
Tipe Data
Nilai
idhubungi (*)
Bigint
225
topik
Text
-
nama
Varchar
150
unitkerja
Varchar
150
email
Varchar
150
isitopik
Text
-
updated
Timestamp
-
Keterangan (*) : Primary Key
II.13. Desain User Interface Berikut adalah bentuk dari rancangan user interface yang akan penulis rancang,
yang
nantinya
akan
diterapkan
dalam
pembuatan
knowledge
management system maintenace hardware dan software berbasis web pada Universitas Potensi Utama.
62
III.4.1. Desain Input Berikut ini adalah rancangan form masukan (input) yang akan penulis gunakan dalam pembuatan knowledge management system maintenace hardware dan software berbasis web pada Universitas Potensi Utama.
1.
Desain Halaman Tambah Admin Desain halaman tambah admin pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum
Profil
Forum Forum
Hubungi Hubungi
Tambah Admin Nama : Unit Kerja : Jabatan : Username : Password : Tambah Admin
Ulangi
Tambah Gambar Tambah File Daftar Pesan Logout
Footer
Gambar III.21. Desain Halaman Tambah admin
63
2.
Desain Halaman Tambah User Desain halaman tambah user pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum
Profil
Forum Forum
Hubungi Hubungi
Tambah User Nama : Unit Kerja : Jabatan : Username : Password : Tambah User
Ulangi
Tambah Gambar Tambah File Daftar Pesan Logout
Footer
Gambar III.22. Desain Halaman Tambah User
3.
Desain Halaman Tambah Artikel Desain halaman tambah artikel pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
64
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum
Profil
Forum Forum
Hubungi Hubungi
Tambah Artikel Judul Artikel : Kategori Berita : Upload Gambar : Browse... Diposting Oleh : Isi Berita :
Tambah Kategori
Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout
Tambah Artikel
Ulangi
Footer
Gambar III.23. Desain Halaman Tambah Artikel
4.
Desain Halaman Tambah Forum Desain halaman tambah forum pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
65
Header
Beranda Beranda
Profil
Forum Forum
Tambah Forum – Knowledge Maintenance
Hubungi Hubungi Selamat Datang Pencarian
Form Tambah Forum :
Cari
Judul : Kategori : Diposting Oleh : Unit Kerja : Isi Forum :
Kirim Pesan
Tambah Forum Logout
Ulangi
Footer
Gambar III.24. Desain Halaman Tambah Forum
5.
Desain Halaman Tambah Gambar Desain halaman tambah gambar pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
66
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User Daftar Artikel
Profil
Forum Forum
Hubungi Hubungi
Tambah Gambar Nama Gambar : Gambar : Browse... Keterangan Gambar :
Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar
Tambah Gambar
Ulangi
Tambah File Daftar Pesan Logout
Cari Gambar
ID
Gambar
Nama Gambar
Pengaturan
no-id
gambar
judul-gambar
Ubah | Hapus
Footer
Gambar III.25. Desain Halaman Tambah Gambar
6.
Desain Halaman Tambah File Desain halaman tambah file pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
67
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel
Profil
Forum Forum
Hubungi Hubungi
Tambah File ID Artikel : Nama File : File : Browse... Keterangan File :
Daftar Forum Tambah Forum Tambah Gambar Tambah File
Tambah File
Ulangi
Daftar Pesan Logout
Cari File
ID
Nama File
Pengaturan
no-id
judul-file
Ubah | Hapus
Footer
Gambar III.26. Desain Halaman Tambah File
7.
Desain Halaman Tambah Video Desain halaman tambah video pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
68
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum
Profil
Forum Forum
Hubungi Hubungi
Tambah Video ID Artikel : Nama Video : File : Browse... Url Video : Keterangan Video :
Tambah Forum Tambah Gambar Tambah Video
Tambah Video
Ulangi
Daftar Pesan Logout
Cari File
ID
Nama Video
Pengaturan
no-id
judul-video
Ubah | Hapus
Footer
Gambar III.27. Desain Halaman Tambah Video
8.
Desain Halaman Diskusi Artikel Desain halaman diskusi artikel pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
69
Header
Beranda Beranda
Profil
Forum Forum
Judul Artikel – Nama Admin – Kategori – Updated
Hubungi Hubungi Selamat Datang Pencarian
Gambar
Cari
Tambah Forum Logout
Isi Artikel
Form Diskusi : Nama : Unit Kerja : Isi Diskusi :
Tambah Diskusi
Ulangi
Footer
Gambar III.28. Desain Halaman Diskusi Artikel
9.
Desain Halaman Diskusi Forum Desain halaman diskusi forum pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
70
Header
Beranda Beranda
Profil
Forum Forum
Judul Forum – Nama User – Kategori – Updated
Hubungi Hubungi Selamat Datang Pencarian
Isi Forum
Cari
Form Diskusi :
Tambah Forum
Nama : Unit Kerja : Isi Diskusi :
Logout
Tambah Diskusi
Ulangi
Footer
Gambar III.29. Desain Halaman Diskusi Forum
10. Desain Halaman Hubungi Kami Desain halaman hubungi kami pada knowledge management system maintenace hardware dan software adalah sebagai berikut:
71
Header
Beranda Beranda
Profil
Forum Forum
Hubungi Kami – Knowledge Maintenance
Hubungi Hubungi Selamat Datang Pencarian
Form Hubungi Kami :
Cari
Judul Pesan : Alamat Email : Nama : Unit Kerja : Pesan :
Tambah Diskusi
Tambah Forum Logout
Ulangi
Footer
Gambar III.30. Desain Halaman Hubungi Kami
III.4.2. Desain Output Berikut ini adalah rancangan form keluaran (output) yang akan penulis gunakan dalam pembuatan knowledge management system maintenace hardware dan software berbasis web pada Universitas Potensi Utama.
1.
Desain Halaman Login Desain halaman login pada knowledge management system maintenace
hardware dan software adalah sebagai berikut:
72
Form Login Username : Password : Login
Ulangi
Kembali
Gambar III.31. Desain Halaman Login
2.
Desain Halaman Awal Admin Desain halaman awal admin pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
73
Header
Beranda Beranda Halaman Admin Tambah Admin Tambah User
Profil
Forum Forum
Hubungi Hubungi
Admin Knowledge Maintenance Selamat Datang Admin . . . , Anda berhasil login ke Halaman Admin dari website Knowledge Maintenance.
Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout
Footer
Gambar III.32. Desain Halaman Awal Admin
3.
Desain Halaman Beranda Desain halaman Beranda pada knowledge management system maintenace
hardware dan software adalah sebagai berikut:
74
Header
Beranda Beranda
Profil
Forum Forum
Judul Artikel – Nama Admin – Kategori – Updated
Hubungi Hubungi Selamat Datang Pencarian
Isi Artikel Gambar
Cari
Tambah Forum Judul Artikel – Nama Admin – Kategori – Updated
Logout
Isi Artikel Gambar
Footer
Gambar III.33. Desain Halaman Beranda
4.
Desain Halaman Daftar Artikel Admin Desain halaman daftar artikel admin pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
75
Header
Beranda Beranda Halaman Admin
Profil
Forum Forum
Hubungi Hubungi
Daftar Artikel
Tambah Admin Tambah User Daftar Artikel
Cari Artikel
ID
Gambar
Judul Artikel
Pengaturan
no-id
gambar
judul-artikel
Ubah | Hapus
Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout
Footer
Gambar III.34. Desain Halaman Daftar Artikel Admin
5.
Desain Halaman Daftar Forum Admin Desain halaman daftar forum admin pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
76
Header
Beranda Beranda Halaman Admin
Profil
Forum Forum
Hubungi Hubungi
Daftar Forum
Tambah Admin Tambah User Daftar Artikel Tambah Artikel
Cari Forum
ID
Nama
Judul Forum
Pengaturan
no-id
nama-user
judul-forum
Ubah | Hapus
Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout
Footer
Gambar III.35. Desain Halaman Daftar Forum Admin
6.
Desain Halaman Daftar Forum User Desain halaman daftar forum user pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
77
Header
Beranda Beranda
Profil
Forum Forum
Hubungi Hubungi
Judul Artikel – Nama Admin – Kategori – Updated
Selamat Datang
Isi Artikel
Pencarian Cari
Judul Artikel – Nama Admin – Kategori – Updated
Tambah Forum
Isi Artikel
Logout
Footer
Gambar III.36. Desain Halaman Daftar Forum User
7.
Desain Halaman Daftar Pencarian Artikel Desain halaman daftar pencarian artikel pada knowledge management
system maintenace hardware dan software adalah sebagai berikut:
78
Header
Beranda Beranda
Profil
Forum Forum
Judul Artikel – Nama Admin – Kategori – Updated
Hubungi Hubungi Selamat Datang Pencarian
Isi Artikel Gambar
Cari
Tambah Forum Judul Artikel – Nama Admin – Kategori – Updated
Logout
Isi Artikel Gambar
Footer
Gambar III.37. Desain Halaman Daftar Pencarian Artikel
8.
Desain Halaman Daftar Pesan Desain halaman daftar pesan pada knowledge management system
maintenace hardware dan software adalah sebagai berikut:
79
Header
Beranda Beranda Halaman Admin
Profil
Forum Forum
Hubungi Hubungi
Daftar Pesan
Tambah Admin Tambah User Daftar Artikel Tambah Artikel
Cari Pesan
ID
Nama Pengirim
Judul Pesan
Pengaturan
no-id
nama-user
judul-pesan
Lihat | Hapus
Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout
Footer
Gambar III.38. Desain Halaman Daftar Pesan
