BAB IV PERANCANGAN SISTEM

(1)

IV - 1 4.1 Deskripsi Sistem

Pembangunan e-learning praktikum perencanaan dan pengendalian produksi teknik industri universitas widyatama merupakan satu kesatuan perangkat lunak yang diharapkan mampu :

1. Menyediakan fasilitas yang dapat digunakan mahasiswa untuk belajar

mandiri di luar jam perkuliahan.

2. Untuk memudahkan proses belajar mengajar bagi dosen maupun mahasiswa

4.2 Pengguna Sistem

Software aplikasi ini dirancang untuk dapat digunakan oleh pengguna atau

user, yaitu :

1. Administrator sebagai user yang mempunyai hak otoritas paling tinggi

karena administrator bertugas untuk mengelola user dan mengelola berita.

2. Dosen sebagai user yang mempunyai hak akses melakukan proses

perkuliahan (pengajar).

3. Mahasiswa mempunyai hak akses sebagai pengguna yang melakukan

aktifitas perkuliahan.

4.3 Perancangan Sistem

Berdasarkan informasi permasalahan, maka di kembangkan sebuah

perangkat lunak atau software yang dapat memudahkan proses belajar mengajar

bagi dosen maupun mahasiswa. Oleh karena itu, langkah awal dalam perancangan suatu sistem perangkat lunak yaitu sebagai berikut :

(2)

Berikut ini adalah Activity Diagram pembangunan e-learning:

Gambar 4.1 Activity Diagram Login User (Mahasiswa,Dosen dan Admin)

Finish mem buka

website

mem asukan usernam e dan password

Start

mahasiswa, dosen dan admin

Halaman utam a mahasiswa

redirect halam an utama adm in

admin cek hak aksen/ jabatan

mahasiswa _dosen menekan tombol login redirect halam an utama dosen halam an utama elearning

username dan password invalid

(3)

Gambar 4.2 Activity Diagram mengelola User (Mahasiswa,Dosen)

Mahasiswa dan Dosen

memilih menu biodata

tampil detail data biodata user

pilih edit biodata

ubah nama,alamat,email,phone dan pilih submit

form masih kosong / invalid

simpan perubahan data user

start

finish form terisi/valid

(4)

Gambar 4.3 Activity Diagram mengelola User (Admin) admin pilih menu pengolahan user tampil detail data user pilih insert

user pilih update _user

pilih delete user

input npm/nip, nama, email, phone, alamat, password

ubah npm/nip, email, phone, alamat, password

konfirmasi hapus data user simpan penambahan data user simpan perubahan data user simpan perubahan data user form data terisi /valid

form tidak terisi/invalid form tidak terisi/invalid

form data terisi/valid form data terisi/valid form tidak terisi/invalid start

(5)

mahasiswa

pilih menu modul praktikum

pilih sub menu modul

tampil modul dengan pilihan user

start

Finish

Gambar 4.4 Activity Diagram view modul praktikum (Mahasiswa)

Gambar 4.5 Activity Diagram view kuis (Mahasiswa)

mahasiswa

pilih menu quiz

tampil soal quiz dan waktu ujian

user menjawab soal quiz

tampil nilai quiz user

simpan nilai quiz

ujian selesai dan menekan tombol jawab waktu ujian habis

start

(6)

Gambar 4.6 Activity Diagram view referensi (Mahasiswa) mahasiswa pilih menu referensi tampil list referensi pilih tombol download

tampil referensi pilihan yang di unduh

start

(7)

Gambar 4.7 Activity Diagram mengelola berita (Administrator) Administrator

tampil list data berita

pilih insert berita

pilih edit berita

masukan judul,isi berita dan menekan tombol submit merubah judul,isi berita dan menekan tombol submit

simpan penambahan data berita ke data base

simpan perubahan data berita ke database data di isi/valid data kosong/invalid finish insert berita edit berita pilih delete berita konformasi penghapusan berita delete berita start pilih menu pengolahan berita

(8)

Gambar 4.8 Activity Diagram mengelola referensi (Dosen)

Dosen dan Admin

tampil list pengolahan referensi

pilih insert

soal quiz pilih edit soal quiz

pilih delete soal quiz

masukan soal,pilihan a,pilihan b, pilihan c,pilihand,jawaban,publish dan menekan tombol submit

merubah soal,pilihan a,pilihan b, pilihan c,pilihand,jawaban,publish dan menekan tombol submit

konformasi penghapusan soal quiz

simpan penambahan data soal quiz ke data base

simpan perubahan data soal quiz ke database data di isi/valid

data kosong/invalid

finish insert berita

edit berita delete berita start

tampil list pengolahan referensi

pilih upload photo

pilih file photo dan menekan tombol upload

simpan perubahan data soal quiz ke database

pilih menu pengolahan referensi

(9)

Gambar 4.9 Activity Diagram mengelola Kuis (Dosen)

Dosen

tampil list data soal quiz

pilih insert soal uts atau uas

pilih edit soal uts atau uas

masukan soal, jawaban a, jawaban b, jawaban c, jawaban d, jawaban, publish, tipe ujian dan menekan tom...

merubah soal, jawaban a, jawaban b, jawaban c, jawaban d, jawaban, publish, tipe ujian dan menekan tom...

simpan penambahan data soal

uts atau uas ke data base _{simpan perubahan data uts} atau uas ke database data di isi/valid

data kosong/invalid

finish

insert soal quiz _{edit soal quiz}

pilih delete soal uts atau uas

konformasi penghapusan soal uts atau uas

delete soal quiz pilih menu

pengolahan quiz start

(10)

Gambar 4.10 Activity Diagram mengelola Nilai(Dosen)

pilih menu pengolahan nilai

simpan perubahan nilai mahasiswa merubah nilai mahasiswa

dan menekan submit tampil nilai npm dan

nilai mahasiswa pilih edit nilai finish start Dosen

(11)

Gambar 4.11 Activity Diagram mengelola Tugas(Dosen) pilih menu pengolahan tugas tampil list tugas pilih delete tugas pilih download

laporan _{tugas pendahuluan}pilih download

konfirmasi

hapus tugas tampil file yg di

download tampil file yg di _download

Start

Finish Dosen

(12)

Gambar 4.12 Activity Diagram select Tugas(Mahasiswa)

4.4 Sequence Diagram

Untuk mengetahui interaksi sistem dengan pengguna, maka digunakan

sequence diagram untuk memodelkan sistem yang dirancang. Dengan sequence

diagram, alur kerja dan cara interaksi sistem dengan user dapat dilihat.

pilih menu tugas

tampil list tugas

pilih sub menu upload laporan

pilih sub menu upload tugas pendahuluan

tampil form upload

tugas laporan _{upload tu...}tampil form start

Finish Mahasiswa

(13)

Gambar 4.13 Sequence Diagram untuk Login (Mahasiswa, Dosen dan Admin)

Administrator, Dosen ,Mahasiswa : User Administrator, Dosen

,Mahasiswa : User

: Form Login

: Form Login : authentikasi : authentikasi : T_user : T_user

memasukan data user()

kirim data user()

cek data user()

data user valid()

menampilkan halaman utama administrator()

data user valid()

menampilkan halaman utama dosen()

data user valid()

menampilkan halaman utama mahasiswa()

data user invalid()

mengirim pesan user tidak terdaftar()

menampilkan form login()

(14)

Gambar 4.14 Sequence Diagram untuk Kelola User (insert)

: Administrator

: Administrator : Form Kelola User : Form Kelola User : Controller Admin : Controller Admin : T_user : T_user menampilkan form insert user dosen()

mem asukan data user ()

cek data user()

tam bah data dosen()

mem anggil kelola user dosen() mengirim pesan berhasil ditam bahkan()

menampilkan halaman kelola user dosen() menampilkan pesan berhasil ditam bahkan()

pilih kelola user m ahasiswa()

kirim pilihan kelola m ahasiswa()

mem anggil kelola user m ahasiswa()

menampilkan halaman kelola user mahasiswa()

pilih insert mahasiswa()

kirim pilihan insert m ahasiswa()

tam bah data mahasiswa() mem anggil kelola user ()

mengirim pesan berhasil ditam bahkan() menampilkan halaman kelola user mahasiswa()

menampilkan pesan berhasil ditam bahkan()

cek data m ahasiswa()

mem anggil form insert m ahasiswa()

menampilkan form insert mahasiswa()

mem asukan data user()

(15)

Gambar 4.15 Sequence Diagram untuk Kelola User (Update)

: Administrator

: Administrator _{: Form Kelola User}_{: Form Kelola User} : Controller Adm in : Controller Adm in : T_user : T_user pilih edit dosen()

kirim pilihan edit dosen()

cek id dosen()

mem angil form edit dosen()

menampilkan form edit dosen()

mem asukan data dosen()

cek data user()

ubah data dosen()

mem anggil kelola user()

mengirim pesan berhasil diubah()

menampilkan halam an kelola dosen()

menampilkan pesan berhasil diubah()

pilih edit m ahasiswa()

kirim pilihan edit mahasiswa()

cek id m ahasiswa()

mem anggil form edit mahasiswa()

menampilkan form edit mahasiswa()

mem asukan data mahasiswa()

cek data user()

ubah data m ahasiswa()

mem anggil kelola user mahasiswa()

menampilkan halam an kelola user mahasiswa()

(16)

Gambar 4.16 Sequence Diagram untuk Kelola User (Delete)

: Administrator

: Administrator : Form Kelola User : Form Kelola User : Controller Admin : Controller Admin : T_user : T_user pilih delete dosen()

kirim hapus dosen()

cek id dosen()

mengirim pesan konfirmasi hapus dosen()

menampilkan pesan konfirm asi hapus dosen() konfirmasi pesan hapus dosen()

konfirmasi pilihan hapus dosen()

hapus data dosen() mem anggil kelola user()

mengirim pesan berhasil dihapus() menampilkan halaman kelola user dosen()

menampilkan pesan berhasil dihapus()

pilih delete mahasiswa()

kirim pilihan hapus mahasiswa()

cek id m ahasiswa()

mengirim pesan konfirmasi hapus m ahasiswa()

menapilkan pesan konfirmasi hapus mahasiswa()

konfirmasi hapus m ehasiswa()

konfirmasi pilihan hapus m ahasiswa()

hapus data m ahasiswa()

mem anggil kelola user m ahasiswa() mengirim pesan berhasil dihapus()

menampilkan halaman kelola user m ahasiswa() menampilkan pesan berhasil dihapus()

(17)

Gambar 4.17 Sequence Diagram untuk Kelola Account User

: T_us er : T_us er Dos en, Mahas is wa :

Us er Dos en, Mahas is wa :

Us er : Form kelola account us er : Form kelola account us er

: Controller Dosen

: Controller Dosen : Controller Mhs : Controller Mhs menam pilkan detail biodata dos en()

pilih edit biodata()

kirim pilihan edit biodata()

cek id dos en()

mem anggil forl edit biodata()

menam pilkan form edit biodata() mem as ukan biodata dos en()

cek data us er()

ubah biodata dos en()

mem anggil form biodata dosen()

menam pilkan halam an biodata dos en()

menam pilkan detail biodata mahas is wa()

pilih edit biodata()

kirim pilihan edit biodata()

cek id m ahas is wa()

mem anggil form edit biodata () menam pilkan form edit biodata()

mem as ukan biodata mahas is wa()

cek data us er()

ubah biodata mahas is wa()

mem anggil form biodata mahas is wa()

(18)

Gambar 4.18 Sequence Diagram untuk Kelola Modul Praktikum

Dos en, Mahas is wa : Us er Dos en, Mahas is wa :

Us er

: Form Kelola Modul_prak

: Form Kelola Modul_prak : Controller Dos en : Controller Dos en : Controller Mhs : Controller Mhs : T_modul_prak : T_modul_prak mem asukan data modul praktikum()

cek data m as ukan()

tam bah data modul praktikum () mem anggil form kelola m odul prak()

mengirim pes an berhas il ditam bahkan() menampilkan data m odul praktikum()

pilih edit m odul praktikum () menampilkan pes an berhas il ditam bahkan()

kirim pilihan edit modul prak()

cek data m odul prak() mem anggil form edit modul prak()

menampilkan form edit m odul prak() mengubah data m odul prak()

cek data m as ukan()

ubah data m odul prak() mem anggil form kelola m odul prak()

mengirim pes an berhas il diubah() menampilkan data m odul prak()

menampilkan pes an berhas il diubah() pilih delete modul prak()

kirim pilihan delete m odul prak()

cek id m odul prak() mengirim pes an konfirmas i hapus m odul prak()

menampilkan pes an konfirmas i hapus m odul prak() konfirmas i hapus m odul prak()

kirim pilihan hapus modul prak()

hapus data m odul prak() mem anggil form kelola m odul prak()

mengirim pes an berhas il dihapus () menampilkan data m odul prak()

menampilkan pes an berhas il dihapus() pilih m odul prak()

kirim pilihan modul prak()

cek id m odul prak() mem anggil halam an modul prak()

(19)

Gambar 4.19 Sequence Diagram untuk mengelola Soal

Us er : Form kelola Soal : Form kelola Soal : Controller Dos en : Controller Dos en

: Controller Mhs

: Controller Mhs : T_s oal : T_s oal m enam pilkan form ins ert s oal()

m em as ukan data s oal()

cek data s oal()

tam bah data s oal() m em anggil form kelola s oal()

m enam pilkan halam an kelola s oal()

m engirim pes an berhas il ditam bahkan()

m enam pilkan pes an berhas il ditam bahkan() pilih edit s oal ()

kirim pilihan edit s oal()

m em anggil form edit s oal() m enam pilkan form edit s oal()

m em as ukan data s oal()

cek data s oal()

ubah data s oal() m em anggil form kelola s oal()

m engirim pes an berhas il diubah() m enam pilkan halam an kelola s oal()

m enam pilkan pes an berhas il diubah() pilih delete s oal()

kirim pilihan hapus s oal()

cek id s oal()

cek id s oal() m engirim pes an konfirm as i hapus s oal()

m enam pilkan pes an konfirm as i hapus s oal() konfirm as i hapus s oal()

kirim pilihan konfirm as i hapus s oal()

hapus data s oal() m em anggil form kelola s oal()

m engirim pes an berhas il dihapus () m enam pilkan halam an kelola s oal()

m enam pilkan pes an berhas il dihapus () pilih m enu pilih s oal kuis ()

kirim pilihan m enu s oal kuis ()

cek data s oal() m em anggil halam an s oal kuis ()

m enam pilkan halam an s oal kuis () m enjawab s oal kuis ()

cek jawaban s oal kuis ()

cek data jawaban() m em anggil form has il nilai kuis ()

(20)

Gambar 4.20 Sequence Diagram untuk mengelola Nilai

Dosen,Mahasiswa : User Dosen,Mahasiswa :

User

: Form Kelola Nilai

: Form Kelola Nilai : Controller Dosen : Controller Dosen : Controller Mhs : Controller Mhs : T_nilai : T_nilai

menampilkan form edit nilai()

mengubah nilai kuis mahasiswa()

cek data kuis()

ubah data nilai()

memanggil kelola nilai()

menampilkan halaman kelola nilai()

menampilkan pesan berhasil diubah()

pilih menu nilai kuis()

kirim pilihan menu nilai kuis()

cek id nilai()

memanggil form nilai kuis()

(21)

Gambar 4.21 Sequence Diagram untuk mengelola Referensi

Us er

: Form Kelola Referens i

: Form Kelola Referens i : Controller Dos en : Controller Dos en : Controller Mhs : Controller Mhs : T_referens i : T_referens i m enam pilkan form ins ert referens i()

m em asukan data referens i()

cek data referens i() m eng-upload file referens i()

tam bah data referens i() m em anggil form kelola referensi()

m enam pilkan halam an kelola referens i() pilih edit referens i()

kirim pilihan edit referens i()

m em anggil form edit ferensi() m enam pilkan form edit referensi()

m em asukan data referens i()

cek data referens i()

ubah data referens i() m em anggil form kelola referensi()

m engirim pes an berhas il ditam bahkan()

m engirim pes an berhas il diubah() m enam pilkan halam an keiola referens i()

m enam pilkan pes an berhas il ditam bahkan()

m enam pilkan pes an berhas il diubah() pilih delete referens i()

kirim pilihan hapus referens i()

cek id referens i()

cek id referens i() m em asukan pes an konfirm as i hapus referens i()

m enam pilkan pes an konfirm as i hapus referensi() konfirm as i hapus referens i()

kirim pilihan konfirm as i hapus referensi()

hapus data referens i() m em anggil form kelola referensi()

m engirim pes an berhas il dihapus () m enam pilkan halam an kelola referens i()

m enam pilkan pes an berhas il dihapus () pilih m enu referens i()

kirim pilihan m enu referens i()

cek data referens i() m em anggil form kelola referensi()

m enam pilkan halam an referens i() pilih download referensi()

kirim pilihan download referens i()

cek id referens i() m enam pilkan file referensi()

(22)

Gambar 4.22 Sequence Diagram untuk mengelola Berita

: Adm inis trator

: Adm inis trator : Form Kelola Berita : Form Kelola Berita : Controller Adm in : Controller Adm in : T_berita : T_berita m enam pilkan form ins ert kelola berita()

m em asukan data berita()

cek data berita()

tam bah data berita()

m em anggil kelola berita() m engirim pes an berhas il ditam bahkan()

m enam pilkan halam an kelola berita() m enam pilkan pes an berhas il ditam bahkan()

pilih edit berita()

kirim pilihan edit berita()

cek id berita() m em anggil form edit berita()

m enam pilkan form edit berita() m em asukan data berita()

cek data berita()

ubah data berita()

m em anggil kelola berita() m engirim pes an berhas il diubah()

m enam pilkan halam an kelola berita() m enam pilkan pes an berhas il diubah()

pilih delete berita()

kirim pilihan hapus berita()

cek id berita() m engirim pes an konfirm as i hapus berita()

m enam pilkan pes an konfirm as i hapus berita() konfirm as i pes an hapus berita()

kirim konfirm as i hapus berita()

hapus data berita() m enam pilkan kelola berita()

m engirim pes an berhas il dihapus() m enam pilkan halam an kelola berita()

(23)

Gambar 4.23 Sequence Diagram untuk mengelola Tugas

Dos en, Mahas iswa : Us er Dos en, Mahas iswa :

Us er

: Form Kelola tugas

: Form Kelola tugas : Controller Dos en : Controller Dos en : Controller Mhs : Controller Mhs : T_tugas : T_tugas menampilkan detail tugas mhs ()

pilih hapus tugas m hs ()

kirim pilihan hapus tugas mhs ()

cek id tugas mhs ()

mengirim pes an konfirmas i hapus tugas mhs () menampilkan pes an konfirmas i hapus tugas mhs ()

konfirmas i hapus tugas mhs ()

kirim pilihan konfirmas i hapus tugas mhs ()

hapus tugas m hs () mem anggil form kelola tugas()

menampilkan halam an kelola tugas ()

pilih upload tugas laporan()

mem asukan file laporan() pilih download laporan()

kirim pilihan download laporan()

cek id laporan() kirim file download laporan()

menampilkan file laporan yg di download()

kirim data file laporan()

ins ert data laporan() mem anggil form kelola tugas()

menampilkan halam an kelola tugas () pilih upload tugas pendahuluan()

kirim pilihan upload tugas pendahuluan() mem anggil form upload tugas pendahuluan()

kirim pilihan upload laporan() mem anggil form upload laporan() menampilkan form upload laporan()

menampilkan form upload tugas pendahuluan() mem asukan file tugas pendahuluan()

kirim data file tugas pendahuluan()

ins ert data tugas pendahuluan() mem anggil form kelola tugas()

(24)

Gambar 4.24 Sequence Diagram untuk Kelola Presentase Nilai

4.5 Class Diagram

Class diagram menggambarkan struktur dan deskripsi class, package dan

objek beserta hubungan antar class. Berikut adalah class diagram dari sistem yang

dibangun.

: Dosen

: Dosen : form kelola perentase nilai : form kelola perentase nilai : Controller Dosen : Controller Dosen : T_rums_nilai : T_rums_nilai menampilkan form presentase nilai

pilih edit presentase nilai()

kirim pilihan edit presentase nilai()

cek id presentase()

memanggil form edit presentase nilai()

menampilkan form edit presentase nilai()

memasukan data presentase nilai()

kirim data masukan presentase nilai()

mengubah data presentase nilai()

memanggil form list presentase nilai()

(25)

(26)

(27)

Field Tipe Data Kunci Keterangan

username varchar(100) Username user

npm varchar(100) Nomor pokok

mahasiswa.

nip int(100) Nomor pokok

pengajar.

nama varchar(100) Nama mahasiswa.

phone varchar(20) Nomor telepon

mahasiswa.

email varchar(100) Primary

key

Alamat e-mail

mahasiswa.

alamat text Alamat mahasiswa.

password varchar(255) Password user

jabatan varchar(255) Jabatan dosen

status Int(10) Status user 1= aktif

dan 0=tidak aktif

type Varchar(255) Type user (admin,

dosen,mahasiswa)

photo Varchar(255) Photo user

tgl_lahir Varchar(255) Tanggal lahir user

(28)

Id_soal int(10) Primary Key Id Pertanyaan

Soal Text Isi Pertanyaan

Jawaban_a Varchar(255) Isi jawaban A

Jawaban_b Varchar(255) Isi jawaban B

Jawaban_c Varchar(255) Isi jawsaban C

Jawaban_d varchar(255) Isi jawaban D

Jawaban varchar(255) Isi jawaban

Publish Enum(‘yes’,’no’) Mem-publish-kan

pertanyaan dan soal

Jenis_ujian Varchar(100) Jenis ujian UAS

dan UTS

Tabel 4.3 Tabel Nilai

Npm Varchar(255) Primary_key Nomor Pokok

Mahasiswa

Nilai int(10) Nilai mahasiswa

Benar int(10) Nilai benar

(29)

Point_uts int(10) Nilai Point

Date Datetime Waktu pelaksaan kuis

Laporan Int(10) Nilai tugas laporan

praktikum

Tugas-pendahuluan

Int(10) Nilai tugas pendahuluan

praktikum

Point_uas Int(10) Nilai ujian UAS

Tabel 4.4 Tabel Pesan

Id_pesan int(100) Primary Key Id pesan

Email_to Varchar(255) Alamat email yang akan

dikirim

Email_from Varchar(255) Alamat email penngirim

Subjek Varchar(255) Subjek pesan

Isi_pesan Text Isi pesan yang akan dikirim

Npm Varchar(255) Nomor pokok mahasiswa

Nip Varchar(255) Nomor pokok dosen

(30)

Id_berita Int(4) Primary Key Id Berita

judul Varchar(255) Subjek berita

isi Text Isi berita

Tanggal Varchat(255) Waktu pembuatan pesan

Tabel 4.6 Tabel Modul_prak

Id_modul int(10) Primary Key Id Modul praktikum

Judul Varchar(255) Judul modul praktikum

Isi Text Isi modul praktikum

Tabel 4.7 Tabel Ebook

Id_ebook int(100) Primary Key Id ebook

Judul Varchar(255) Judul referensi

Photo Varchar(255) Gambar cover referensi

File Varchar(255) File referensi

Publish Enum(‘yes’,’no’) Mem-publish-kan referensi

(31)

Id int(100) Primary Key Id tugas

NPM Varchar(255) Nomor Pokok Mahasiswa

Laporan Varchar(255) File tugas laporan

Tp Varchar(255) File tugas pendahuluan

Id_modul Varchar(255) Modul praktikum

Tabel 4.9 Tabel Rums_nilai

Id int(100) Primary Key Nilai

Tp Int(10) Nilai Tugas Pendahuluan

Lp Int(10) Nilai Laporan Praktikum

Uts Int(10) Nilai uts

Uas Int(10) Nilai uas

4.6 Perancangan Antarmuka

Perancangan antarmuka menjelaskan rutinitas program yang akan

dijalankan oleh sebuah sistem untuk menjelaskan interaksi antara user

dengan program. Penelitian ini membahas mengenai Pembangunan Perangkat Lunak E-learning Praktikum Perencanaan dan Pengendalian

Produksi Teknik Industri Universitas Widyatama. Berikut adalah

(32)

learning Praktikum Perencanaan dan Pengendalian Produksi Teknik Industri Universitas Widyatama

1. Tampilan utama

Tampilan utama dari website e-learning praktikum perencanaan dan pengendalian proses produksi pada saat dioanggil melalui web browser

Content Pengumuman

Login

(33)

Desain tampilan halaman home dari user berisi konten-konten atau menu yang dapat diakses oleh user dalam menampilkan halaman yang akan dilihat oleh user.

Isi konten

Konten Menu

Modul Praktikum Download Ebook Profil Pesan Soal logout

Gambar 4.27 Desain Tampilan Halaman Home E-learning

3. Halaman Referensi

Desain halaman referensi dimana di halaman ini berisi detail referensi

(electronic books) yang dapat user lihat maupun di unduh.

photo photo photo Detail ebook Detail ebook Detail ebook

(34)

Desain halaman biodata ini adalah halaman menampilkan detail atau identitas pengguna website e-learning.

photo

Detail data user

Gambar 4.29 Desain Tampilan Halaman Biodata user

5. Halaman Soal Ujian

Desain halaman soal ujian ini adalah halaman dimana user dapat melakukan ujian secara online.

Soal Pilihan A Pilihan C Pilihan B Pilihan D Submit

(35)

Halaman pengolahan kuis halaman ini ditunjukan hanya untuk user

dengan identitas sebagai dosen, dimana didalam halaman ini dosen dapat melakukan penambahan ujian maupun pengurangan soal ujian, nantinya

user yang bertindak sebagai mahasiswa dapat melakukan ujian secara

online

No Pilihan A Pilihan B Pilihan D

1 Soal Pilihan C 2 3 4 5 6 Add soal Jawaban

Pilihan A Pilihan B Pilihan D

Soal Pilihan C Jawaban

Soal Pilihan C jawaban

Pengolahan soal Pengolahan Ebook Profil Pesan Logout

Gambar 4.31 Desain Tampilan Pengolahan kuis

7. Halaman pengolahan referensi

Halaman pengolahan referensi pada halaman ini yang dapat memproses hanya dosen, dimana pada halaman ini dosen dapat menambahkan maupun mengurasi data referensi yang dapat diunduh oleh mahasiswa yang telah memiliki akun ke dalam website.

No Nama File edit

1 Photo Keterangan 2 3 4 5 6 Add ebook Delete A a edit 1.jpg Keterangan Delete b b edit 2.jpg Keterangan Delete c c edit 3.jpg Keterangan Delete d d edit 4.jpg Keterangan Delete e e edit 5.jpg Keterangan Delete f f edit 6.jpg Keterangan Delete

(36)

Halaman pengolahan data user pada halaman ini hanya user yang

bertindak sebagai administrator, dimana didalam halaman ini user dapat

melakukan penambahan akun mahasiswa maupun dosen.

Konten Menu

No Npm Nama Phone email Alamat Add User

Password Jurusan edit Delete

1 06 a 12 email Alamat Password Jurusan edit Delete

2 06 b 34 email Alamat Password Jurusan edit Delete

Pengolahan user Logout

Gambar 4.33 Desain Tampilan Pengolahan data user

9. Form Tambah Soal

Form tambah soal, terdiri dari filed Soal, Pilihan A, Pilihan B,

Pilihan C, Pilihan D, Jawaban dan tombol submit juga cancel

Soal Pilihan A Pilihan B Pilihan C Pilihan D Jawaban Simpan Cancel Konten Menu

(37)

Form tambah referensi,terdiri dari filed jusul, file, photo, keterangan, publish dan tombol simpan juga cancel.

Yes Judul Photo Keterangan Publish Simpan Cancel Konten Menu Browse

Gambar 4.35 Form Tambah referensi

11.Halaman Pengolahan Tugas

Halaman pengolahan tugas pada halaman ini yang dapat memproses hanya dosen, dimana pada halaman ini dosen mengurangi data tugas yang telah di upload oleh mahasiswa yang dapat diunduh oleh dosen yang telah memiliki akun ke dalam website.

Konten Menu

2 06 34 email Alamat Password Jurusan edit Delete

No Npm Laporan Tugas Pendahuluan Modul

1 06 a 12 Modul

2 06 b 34 modul

Pengolahan user Logout

Aksi delete delete Modul Praktikum Soal Upload Tugas Referensi Profil Pesan logout

(38)

Form tambah tugas ,terdiri dari filed NPM, upload tugas, , keterangan, modul dan tombol simpan juga cancel.

NPM Upload Tugas Modul Simpan Cancel Konten Menu Browse

Modul Praktikum Soal Upload Tugas Referensi Profil Pesan logout