Skripsi Akbar Riski

1.2 Tambah User (Admin) Gambar 4.72 Perancangan Interface Tambah User untuk Admin 315

1.3 Detail User (Admin) Gambar 4.73 Perancangan Interface Detail User untuk Admin 316

1.4 Edit User (Admin) Gambar 4.74 Perancangan Interface Edit User untuk Admin 317

2. Materi Kuliah 2.1 Halaman Kelola Mata Kuliah (Admin dan Kaprodi) Gambar 4.75 Perancangan Interface Halaman Kelola Mata Kuliah untuk Admin dan Kaprodi 318

2.2 Tambah Mata Kuliah (Admin dan Kaprodi) Gambar 4.76 Perancangan Interface Tambah Mata Kuliah untuk Admin dan Kaprodi 319

2.3 Edit Mata Kuliah (Admin dan Kaprodi) Gambar 4.77 Perancangan Interface Edit Mata Kuliah untuk Admin dan Kaprodi 320

2.4 Halaman Kelola Materi Kuliah (Admin dan Kaprodi) Gambar 4.78 Perancangan Interface Halaman Kelola Materi Kuliah untuk Admin dan Kaprodi 321

2.5 Approval Materi Kuliah (Admin dan Kaprodi) Gambar 4.79 Perancangan Interface Approval Materi Kuliah untuk Admin dan Kaprodi 322

2.6 Edit Materi Kuliah (Admin dan Kaprodi) Gambar 4.80 Perancangan Interface Edit Materi Kuliah untuk Admin dan Kaprodi 323

2.7 Halaman Materi Kuliah (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.81 Perancangan Interface Halaman Materi Kuliah untuk Mahasiswa, Dosen, dan Kaprodi 324

2.8 Lihat Materi Kuliah (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.82 Perancangan Interface Lihat Materi Kuliah untuk Mahasiswa, Dosen, dan Kaprodi 325

2.9 Detail Materi Kuliah (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.83 Perancangan Interface Detail Materi Kuliah untuk Mahasiswa, Dosen, dan Kaprodi 326

2.10 Tambah Materi Kuliah E-book (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.84 Perancangan Interface Tambah Materi Kuliah E-book untuk Mahasiswa, Dosen, dan Kaprodi 327

2.11 Tambah Materi Kuliah E-journal (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.85 Perancangan Interface Tambah Materi Kuliah E-journal untuk Mahasiswa, Dosen, dan Kaprodi 328

2.12 Tambah Materi Kuliah File Lainnya (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.86 Perancangan Interface Tambah Materi Kuliah File Lainnya untuk Mahasiswa, Dosen, dan Kaprodi 329

3. Forum Diskusi 3.1 Kelola Forum Diskusi (Admin dan Kaprodi) Gambar 4.87 Perancangan Interface Kelola Forum Diskusi (Admin dan Kaprodi) 330

3.2 Approval Forum Diskusi (Admin dan Kaprodi) Gambar 4.88 Perancangan Interface Approval Forum Diskusi untuk Admin dan Kaprodi 331

3.3 Halaman Forum Diskusi (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.89 Perancangan Interface Halaman Forum Diskusi untuk Mahasiswa, Dosen, dan Kaprodi 332

3.4 Tambah Diskusi (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.90 Perancangan Interface Tambah Diskusi untuk Mahasiswa, Dosen, dan Kaprodi 333

3.5 Lihat Diskusi (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.91 Perancangan Interface Lihat Diskusi untuk Mahasiswa, Dosen, dan Kaprodi 334

3.6 Cari Diskusi Gambar 4.92 Perancangan Interface Cari Diskusi untuk Mahasiswa, Dosen, dan Kaprodi 335

3.7 Cari Knowledge Diskusi Gambar 4.93 Perancangan Interface Cari Knowledge Diskusi untuk Mahasiswa, Dosen, dan Kaprodi 336

3.8 Knowledge Diskusi Gambar 4.94 Perancangan Interface Knowledge Diskusi untuk Mahasiswa, Dosen, dan Kaprodi 337

4. Pelayanan Akademik Prodi 4.1 Halaman Kelola Jenis Pelayanan Akademik (Admin dan Kaprodi) Gambar 4.95 Perancangan Interface Halaman Kelola Jenis Pelayanan Akademik untuk Admin dan Kaprodi 338

4.2 Tambah Jenis Pelayanan Akademik (Admin dan Kaprodi) Gambar 4.96 Perancangan Interface Tambah Jenis Pelayanan Akademik untuk Admin dan Kaprodi 339

4.3 Edit Jenis Pelayanan Akademik (Admin dan Kaprodi) Gambar 4.97 Perancangan Interface Edit Jenis Pelayanan Akademik untuk Admin dan Kaprodi 340

4.4 Halaman Kelola Prosedur Pelayanan Akademik (Admin dan Kaprodi) Gambar 4.98 Perancangan Interface Halaman Kelola Prosedur Pelayanan Akademik untuk Admin dan Kaprodi 341

4.5 Edit Prosedur Pelayanan Akademik (Admin dan Kaprodi) Gambar 4.99 Perancangan Interface Edit Prosedur Pelayanan Akademik untuk Admin dan Kaprodi 342

4.6 Halaman Pelayanan Akademik (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.100 Perancangan Interface Halaman Pelayanan Akademik untuk Mahasiswa, Dosen, dan Kaprodi 343

4.7 List Pelayanan (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.101 Perancangan Interface List Pelayanan untuk Mahasiswa, Dosen, dan Kaprodi 344

4.8 Lihat Pelayanan (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.102 Perancangan Interface Lihat Pelayanan untuk Mahasiswa, Dosen, dan Kaprodi 345

4.9 Request Prosedur Pelayanan Gambar 4.103 Perancangan Interface Request Prosedur Pelayanan untuk Mahasiswa, Dosen, dan Kaprodi 346

5. Account 5.1 Halaman Account (Admin) Gambar 4.104 Perancangan Interface Halaman Account untuk Admin 347

5.2 Halaman Account (Mahasiswa dan Dosen) Gambar 4.105 Perancangan Interface Halaman Account untuk Mahasiswa dan Dosen 348

5.3 Halaman Account (Kaprodi) Gambar 4.106 Perancangan Interface Halaman Account untuk Kaprodi 349

5.4 Materi Kuliah Diunggah (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.107 Perancangan Interface Materi Kuliah Diunggah untuk Mahasiswa, Dosen, dan Kaprodi 350

5.5 Edit Materi Kuliah (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.108 Perancangan Interface Edit Materi Kuliah untuk Mahasiswa, Dosen, dan Kaprodi 351

5.6 Diskusi Dibuat (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.109 Perancangan Interface Diskusi Dibuat untuk Mahasiswa, Dosen, dan Kaprodi 352

5.7 User Profile (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.110 Perancangan Interface User Profile untuk Mahasiswa, Dosen, dan Kaprodi 353

5.8 Rank Medal Details (Mahasiswa, Dosen, dan Kaprodi) Gambar 4.111 Perancangan Interface Rank Medal Details untuk Mahasiswa, Dosen, dan Kaprodi 354

4.3 Implementation 4.3.1 Coding (Pengkodean) Pada tahap pengkodean Knowledge Management System Sharing Materi Kuliah, Forum Diskusi dan Prosedur Pelayanan Akademik Program Studi Sistem Informasi, peneliti menggunakan bahasa pemrograman JavaScript dengan framework React Native dengan versi 0.63 dan Google Firebase sebagai databasenya. Untuk penulisan kodenya, peneliti menggunakan tool code editor Microsoft Visual Studio Code versi 1.47 (source code dilampirkan). 4.3.2 Testing (Pengujian) Peneliti menggunakan teknik black box testing untuk menguji fungsional, antarmuka, struktur data dan akses database dengan menjalankan sistem pada Knowledge Management System Sharing Materi Kuliah, Forum Diskusi dan Prosedur Pelayanan Akademik Program Studi Sistem Informasi. Pada pengujian ini, yang menjalankan sistem adalah beberapa mahasiswa Program Studi Sistem Informasi UIN Jakarta. 355

1. Pengujian Use Case Login Tabel 4.58 Pengujian Use Case Login Prosedur Pengujian Masukan Keluaran yang Kesimpulan didapat 1. Input Nomor Induk dan - Nomor - Menampilkan Diterima Password. Induk tampilan utama setiap 2. Klik Login. - Password aktor jika nomor induk dan password yang dimasukkan terdaftar. - Menampilkan notifikasi error jika nomor induk dan password yang dimasukkan tidak terdaftar. 356

2. Pengujian Use Case Logout Tabel 4.59 Pengujian Use Case Logout Prosedur Pengujian Masukan Keluaran Kesimpulan yang didapat 1. Klik tombol - - Kembali ke Diterima “Account” pada halaman Login menu navigasi bagian bawah. 2. Klik tombol “Logout”. 3. Pengujian Use Case Kelola User/Tambah User Tabel 4.60 Pengujian Use Case Kelola User/Tambah User Prosedur Masukan Keluaran yang Pengujian didapat Kesimpulan 1. Klik tombol - Nomor - Menampilkan Diterima “Kelola Induk notifikasi User” pada “user telah menu - Password ditambah” - E-mail 357

navigasi - Nama dan bagian - Jenis menambah bawah. user ke 2. Klik salah Kelamin dalam sistem satu jenis - Tanggal jika seluruh user pada data input dropdown Lahir tervalidasi. list jenis - Tahun - Menampilkan user. notifikasi 3. Klik tombol Angkatan error jika “tambah”. (khusus data input 4. Input jenis user gagal Nomor mahasiswa) tervalidasi. Induk, - Nomor Password, Telepon E-mail, Nama, Jenis Kelamin, Tanggal Lahir, Tahun Angkatan (khusus 358

jenis user mahasiswa), dan Nomor Telepon. 5. Klik tombol “checklist”. 6. Klik tombol “ya”. 4. Pengujian Use Case Kelola User/Edit User Tabel 4.61 Pengujian Use Case Kelola User/Edit User Prosedur Masukan Keluaran yang Pengujian didapat Kesimpulan 1. Klik tombol - Nomor - Menampilkan Diterima “Kelola Induk notifikasi User” pada “user telah menu - Password diubah” dan navigasi - E-mail menambah bawah. - Nama user ke - Jenis dalam sistem 2. Klik salah jika seluruh satu jenis Kelamin 359

user pada - Tanggal data input dropdown Lahir tervalidasi. list jenis - Menampilkan user. - Tahun notifikasi 3. Klik salah Angkatan error jika satu user. (khusus data input 4. Klik tombol jenis user gagal “edit”. mahasiswa) tervalidasi. 5. Input Nomor - Nomor Induk, Telepon Password, E-mail, Nama, Jenis Kelamin, Tanggal Lahir, Tahun Angkatan (khusus jenis user mahasiswa), 360

dan Nomor Telepon. 6. Klik tombol “checklist”. 7. Klik tombol “ya”. 5. Pengujian Use Case Kelola User/Hapus User Tabel 4.62 Pengujian Use Case Kelola User/Hapus User Prosedur Pengujian Masukan Keluaran yang didapat Kesimpulan 1. Klik tombol - - Menampilkan Diterima “Kelola User” notifikasi pada menu “user telah navigasi bawah. dihapus” dan menghapus 2. Klik salah satu user dari jenis user pada sistem. dropdown list jenis user. 3. Klik salah satu user. 361

4. Klik tombol “hapus”. 5. Klik tombol “ya”. 6. Pengujian Use Case Tambah Mata Kuliah Tabel 4.63 Pengujian Use Case Tambah Mata Kuliah Prosedur Pengujian Masukan Keluaran yang didapat Kesimpulan 1. Klik tombol - Input - Menampilkan Diterima “materi Kode notifikasi kuliah” pada Mata “mata kuliah menu Kuliah berhasil navigasi ditambah” bawah. - Nama dan Mata menambah 2. Klik tombol Kuliah mata kuliah “mata ke dalam kuliah”. - Semester sistem jika - Jumlah data input 3. Klik tombol tervalidasi. “tambah”. SKS. 362

4. Input Kode - Menampilkan Mata Kuliah, notifikasi Nama Mata error jika Kuliah, data input Semester, dan gagal Jumlah SKS. tervalidasi. 5. Klik tombol “checklist”. 6. Klik tombol “ya”. 7. Pengujian Use Case Edit Mata Kuliah Tabel 4.64 Pengujian Use Case Edit Mata Kuliah Prosedur Pengujian Masukan Keluaran yang didapat Kesimpulan 1. Klik tombol - Input - Menampilkan Diterima “materi Kode notifikasi kuliah” pada Mata “mata kuliah menu Kuliah berhasil navigasi diubah” dan bawah. menambah 363

2. Klik tombol - Nama mata kuliah “mata Mata ke dalam kuliah”. Kuliah sistem jika data input 3. Klik salah - Semester tervalidasi. satu semester - Jumlah - Menampilkan pada notifikasi dropdown list SKS. error jika semester. data input gagal 4. Klik salah tervalidasi. satu mata kuliah. 5. Klik tombol “edit”. 6. Input Kode Mata Kuliah, Nama Mata Kuliah, Semester, dan Jumlah SKS. 7. Klik tombol “checklist”. 8. Klik tombol “ya”. 364