BAB III ANALISIS DAN DESAIN SISTEM. Analisa masalah dilakukan agar mengetahui masalah-masalah yang terkait

Transkripsi

1 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

2 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 >> << include >> << include >> Artikel Forum Hubungi Kami Halaman Admin User << include >> Tambah Artikel << include >> Tambah Kategori << include >> Tambah Diskusi << include >> Upload Gambar << include >> Upload File << include >> Upload Video Tambah Forum << include >> << include >> << include >> Tambah Tambah Pesan Admin << include >> Daftar Pesan << include >> Daftar Admin << include >> Tambah User << include >> Admin Daftar User Logout << extend >> << extend >> Gambar III.1. Use Case Diagram

3 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

4 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

5 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

6 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

7 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

8 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 Memeriksa Kelengkapan Data Edit Ulang Data Artikel 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

9 42 7. Activity Diagram Ubah & Hapus Forum Operator Sistem Klik Link Ubah Mengambil Data Forum Tampil Data Forum Mengubah Data Forum Memeriksa Kelengkapan Data Edit Ulang Data Forum 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

10 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.

11 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.

12 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.

13 Activity Diagram Kirim Pesan Operator Sistem Input Judul Pesan, & 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.

14 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 Not Valid Username & Password Benar Gambar III.13. Squence Diagram Login 2. Sequence Diagram Tambah User Adapun bentuk rancangan sequence diagram tambah user yang dirancang penulis adalah sebagai berikut:

15 48 Operator Form User Proses Database List User Input Data User Memproses Simpan Data 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 Proses Database List Admin Input Data Admin Memproses Simpan Data 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:

16 49 Operator Form Artikel Proses Database List Artikel Input Data Artikel Memproses Simpan Data 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:

17 50 Operator Form Forum Proses Database List Forum Input Data Forum Memproses Simpan Data 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:

18 51 Operator Form Video Proses Database List Video Cari Video Memproses Kapasitas Video Tarlalu Besar Upload Video Tampil List Video 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 Proses Database List File Cari File Memproses Kapasitas File Tarlalu Besar Upload 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:

19 52 Operator Form Diskusi Proses Database Form Artikel/Forum Input Data Diskusi Memproses Data Tidak Lengkap Simpan Data Diskusi Tampil Form Artikel/Forum 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:

20 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 Memperbaiki PC 3 1 BAAK Sekarang ini saya lagi bingung :14:45 2 Cara Melakukan Sharing Printer 4 5 Kemahasiswaan Gimana sih cara untuk sharing :18:59 4 Tips Untuk Menghemat Battery Laptop 3 3 Perpustakaan Baru-baru ini tiba-tiba aja :23:10 5 Recommended Antivirus Terbaik 1 1 BAAK Minta sarannya dong suhu atau :54:11 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 Memperbaiki PC 3 1 BAAK Sekarang ini saya lagi bingung :14:45 2 Cara Melakukan Sharing Printer 4 5 Kemahasiswaan Gimana sih cara untuk sharing :18:59 4 Tips Untuk Menghemat Battery Laptop 3 3 Perpustakaan Baru-baru ini tiba-tiba aja :23:10 5 Recommended Antivirus Terbaik 1 1 BAAK Minta sarannya dong suhu atau :54:11

21 54 idforum judul kategori iduser unitkerjauser updated 1 Bagaimana Cara Untuk Memperbaiki PC 3 1 BAAK :14:45 2 Cara Melakukan Sharing Printer 4 5 Kemahasiswaan :18:59 4 Tips Untuk Menghemat Battery Laptop 3 3 Perpustakaan :23:10 5 Recommended Antivirus Terbaik 1 1 BAAK :54:11 idforum judul iduser 1 Bagaimana Cara Untuk 1 Memperbaiki PC 2 Cara Melakukan Sharing 5 Printer 4 Tips Untuk Menghemat 3 Battery Laptop 5 Recommended Antivirus Terbaik 1 3. Bentuk Normal Tahap 3 (1NF) Tabel III.3. Normalisasi Bentuk Normal Tahap 3 (3NF) idforum judul iduser 1 Bagaimana Cara Untuk 1 Memperbaiki PC 2 Cara Melakukan Sharing 5 Printer 4 Tips Untuk Menghemat 3

22 55 Battery Laptop 5 Recommended Antivirus Terbaik 1 iduser namauser 1 Jenny Yulio 5 Devi Trianda Sari 3 Tamara Anggreini 1 Jenny Yulio idforum kategori judul 1 3 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 Primary Key : dbkmsteknisi : idadmin

23 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 Primary Key : dbkmsteknisi : iduser Tabel III.5. Tabel User Nama Field Tipe Data 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. Tabel Artikel Database : dbkmsteknisi

24 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 Primary Key : dbkmsteknisi : 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

25 58 5. Tabel Kategori Database Primary Key : dbkmsteknisi : 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 Primary Key : dbkmsteknisi : 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

26 59 7. Tabel Upload File Database Primary Key : dbkmsteknisi : 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 Primary Key : dbkmsteknisi : 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

27 60 9. Tabel Diskusi Artikel Database Primary Key : dbkmsteknisi : 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 Primary Key : dbkmsteknisi : 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 -

28 61 Keterangan (*) : Primary Key 11. Tabel Pesan Database Primary Key : dbkmsteknisi : idhubungi Tabel III.14. Tabel Pesan Nama Field Tipe Data Nilai idhubungi (*) Bigint 225 topik Text - nama Varchar 150 unitkerja Varchar 150 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.

29 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 Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Tambah Admin Nama : Unit Kerja : Jabatan : Username : Password : Tambah Admin Ulangi Footer Gambar III.21. Desain Halaman Tambah admin

30 63 2. Desain Halaman Tambah User Desain halaman tambah user pada knowledge management system maintenace hardware dan software adalah sebagai berikut: Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Tambah User Nama : Unit Kerja : Jabatan : Username : Password : Tambah User Ulangi 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:

31 64 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Tambah Artikel Judul Artikel : Kategori Berita : Upload Gambar : Diposting Oleh : Isi Berita : Tambah Artikel Ulangi Browse... Tambah Kategori 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:

32 65 Header Beranda Profil Forum Hubungi Tambah Forum Knowledge Maintenance Form Tambah Forum : Judul : Kategori : Diposting Oleh : Unit Kerja : Isi Forum : Selamat Datang Pencarian Cari Tambah Forum Logout Kirim Pesan 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:

33 66 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Tambah Gambar Nama Gambar : Gambar : Browse... Keterangan Gambar : Tambah Gambar Ulangi 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:

34 67 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Tambah File ID Artikel : Nama File : File : Browse... Keterangan File : Tambah File Ulangi 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:

35 68 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah Video Daftar Pesan Logout Tambah Video ID Artikel : Nama Video : File : Browse... Url Video : Keterangan Video : Tambah Video Cari File Ulangi 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:

36 69 Header Beranda Profil Forum Hubungi Judul Artikel Nama Admin Kategori Updated Selamat Datang Pencarian Gambar Cari Isi Artikel Tambah Forum Logout 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:

37 70 Header Beranda Profil Forum Hubungi Judul Forum Nama User Kategori Updated Isi Forum Selamat Datang Pencarian Cari Form Diskusi : Nama : Unit Kerja : Isi Diskusi : Tambah Forum 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:

38 71 Header Beranda Profil Forum Hubungi Hubungi Kami Knowledge Maintenance Form Hubungi Kami : Judul Pesan : Alamat Nama : Unit Kerja : Pesan : Selamat Datang Pencarian Cari Tambah Forum Logout Tambah Diskusi 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:

39 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:

40 73 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Admin Knowledge Maintenance Selamat Datang Admin..., Anda berhasil login ke Halaman Admin dari website Knowledge Maintenance. 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:

41 74 Header Beranda Profil Forum Hubungi Judul Artikel Nama Admin Kategori Updated Selamat Datang Gambar Isi Artikel Pencarian Cari Judul Artikel Nama Admin Kategori Updated Gambar Isi Artikel Tambah Forum Logout 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:

42 75 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Daftar Artikel Cari Artikel ID Gambar Judul Artikel Pengaturan no-id gambar judul-artikel Ubah Hapus 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:

43 76 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Daftar Forum Cari Forum ID Nama Judul Forum Pengaturan no-id nama-user judul-forum Ubah Hapus 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:

44 77 Header Beranda Profil Forum Hubungi Judul Artikel Nama Admin Kategori Updated Isi Artikel Judul Artikel Nama Admin Kategori Updated Isi Artikel Selamat Datang Pencarian Cari Tambah Forum 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:

45 78 Header Beranda Profil Forum Hubungi Judul Artikel Nama Admin Kategori Updated Selamat Datang Gambar Isi Artikel Pencarian Cari Judul Artikel Nama Admin Kategori Updated Gambar Isi Artikel Tambah Forum Logout 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:

46 79 Header Beranda Profil Forum Hubungi Halaman Admin Tambah Admin Tambah User Daftar Artikel Tambah Artikel Daftar Forum Tambah Forum Tambah Gambar Tambah File Daftar Pesan Logout Daftar Pesan Cari Pesan ID Nama Pengirim Judul Pesan Pengaturan no-id nama-user judul-pesan Lihat Hapus Footer Gambar III.38. Desain Halaman Daftar Pesan