BAB IV PERANCANGAN SISTEM
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 :
IV - 1
IV - 2
4.3.1
Activity Diagram Berikut ini adalah Activity Diagram pembangunan e-learning:
mahasiswa, dosen dan admin Start
membuka website
halaman utama elearning
menekan tombol login
memasukan username dan password username dan password invalid
username dan password valid cek hak aksen/ jabatan mahasiswa Halaman utama mahasiswa
dosen
admin
redirect halaman utama dosen
redirect halaman utama admin
Finish
Gambar 4.1 Activity Diagram Login User (Mahasiswa,Dosen dan Admin)
IV - 3
Mahasiswa dan Dosen start
memilih menu biodata
tampil detail data biodata user
pilih edit biodata
ubah nama,alamat,email,phone dan pilih submit
form masih kosong / invalid form terisi/valid
simpan perubahan data user
finish
Gambar 4.2 Activity Diagram mengelola User (Mahasiswa,Dosen)
IV - 4
admin start
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
form tidak terisi/invalid form tidak terisi/invalid
form tidak terisi/invalid
form data terisi /valid simpan penambahan data user
form data terisi/valid simpan perubahan data user
form data terisi/valid simpan perubahan data user
finish
Gambar 4.3 Activity Diagram mengelola User (Admin)
IV - 5
mahasiswa start
pilih menu modul praktikum
pilih sub menu modul
tampil modul dengan pilihan user
Finish
Gambar 4.4 Activity Diagram view modul praktikum (Mahasiswa)
mahasiswa start
pilih menu quiz
tampil soal quiz dan waktu ujian
user menjawab soal quiz
waktu ujian habis
ujian selesai dan menekan tombol jawab tampil nilai quiz user
simpan nilai quiz
finish
Gambar 4.5 Activity Diagram view kuis (Mahasiswa)
IV - 6
mahasiswa
start
pilih menu referensi
tampil list referensi
pilih tombol download
tampil referensi pilihan yang di unduh
finish
Gambar 4.6 Activity Diagram view referensi (Mahasiswa)
IV - 7
Administrator start
pilih menu pengolahan berita
tampil list data berita
insert berita
edit berita
delete berita
pilih insert berita
pilih edit berita
pilih delete berita
masukan judul,isi berita dan menekan tombol submit
merubah judul,isi berita dan menekan tombol submit
konformasi penghapusan berita
data kosong/invalid data di isi/valid
simpan penambahan data berita ke data base
simpan perubahan data berita ke database
finish
Gambar 4.7 Activity Diagram mengelola berita (Administrator)
IV - 8
Dosen dan Admin
start
pilih menu pengolahan referensi
tampil list pengolahan referensi
insert berita pilih insert soal quiz
masukan soal,pilihan a,pilihan b, pilihan c,pilihand,jawaban,publish dan menekan tombol submit
delete berita
edit berita
pilih delete soal quiz
pilih edit soal quiz
merubah soal,pilihan a,pilihan b, pilihan c,pilihand,jawaban,publish dan menekan tombol submit
konformasi penghapusan soal quiz
data kosong/invalid data di isi/valid
simpan penambahan data soal quiz ke data base
simpan perubahan data soal quiz ke database
tampil list pengolahan referensi
pilih upload photo
pilih file photo dan menekan tombol upload
finish simpan perubahan data soal quiz ke database
Gambar 4.8 Activity Diagram mengelola referensi (Dosen)
IV - 9
Dosen
start
pilih menu pengolahan quiz
tampil list data soal quiz
insert soal quiz
edit 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...
delete soal quiz pilih delete soal uts atau uas
konformasi penghapusan soal uts atau uas
data kosong/invalid data di isi/valid
simpan penambahan data soal uts atau uas ke data base
simpan perubahan data uts atau uas ke database
finish
Gambar 4.9 Activity Diagram mengelola Kuis (Dosen)
IV - 10
Dosen start
pilih menu pengolahan nilai
pilih edit nilai
tampil nilai npm dan nilai mahasiswa
merubah nilai mahasiswa dan menekan submit
simpan perubahan nilai mahasiswa
finish
Gambar 4.10 Activity Diagram mengelola Nilai(Dosen)
IV - 11
Dosen Start
pilih menu pengolahan tugas
tampil list tugas
pilih delete tugas
konfirmasi hapus tugas
pilih download laporan
pilih download tugas pendahuluan
tampil file yg di download
tampil file yg di download
Finish
Gambar 4.11 Activity Diagram mengelola Tugas(Dosen)
IV - 12
Mahasiswa start
pilih menu tugas
tampil list tugas
pilih sub menu upload laporan
pilih sub menu upload tugas pendahuluan
tampil form upload tugas laporan
tampil form upload tu...
Finish
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.
IV - 13
Administrator, Dosen ,Mahasiswa : User
: authentikasi
: Form Login
: 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() menampilkan pesan user tidak terdaftar()
Gambar 4.13 Sequence Diagram untuk Login (Mahasiswa, Dosen dan Admin)
IV - 14
: Administrator
: Controller Admin
: Form Kelola 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() cek data m ahasiswa() mem anggil kelola user m ahasiswa()
menampilkan halaman kelola user mahasiswa()
pilih insert mahasiswa() kirim pilihan insert m ahasiswa()
mem anggil form insert m ahasiswa()
menampilkan form insert mahasiswa()
mem asukan data user() cek data user() tam bah data mahasiswa() mem anggil kelola user () mengirim pesan berhasil ditam bahkan()
menampilkan halaman kelola user mahasiswa() menampilkan pesan berhasil ditam bahkan()
Gambar 4.14 Sequence Diagram untuk Kelola User (insert)
IV - 15
: Administrator
: Controller Admin
: Form Kelola User
: T_user
pilih edit dosen() kirim pilihan edit dosen()
cek id dosen()
memangil form edit dosen()
menampilkan form edit dosen()
memasukan data dosen() cek data user()
ubah data dosen()
memanggil kelola user() mengirim pesan berhasil diubah() menampilkan halaman kelola dosen() menampilkan pesan berhasil diubah()
pilih edit mahasiswa()
kirim pilihan edit mahasiswa() cek id mahasiswa() memanggil form edit mahasiswa()
menampilkan form edit mahasiswa() memasukan data mahasiswa() cek data user() ubah data mahasiswa()
memanggil kelola user mahasiswa() mengirim pesan berhasil diubah() menampilkan halaman kelola user mahasiswa() menampilkan pesan berhasil diubah()
Gambar 4.15 Sequence Diagram untuk Kelola User (Update)
IV - 16
: Form Kelola User
: Administrator
: Controller Admin
: 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()
Gambar 4.16 Sequence Diagram untuk Kelola User (Delete)
IV - 17
Dosen, Mahasiswa : User
: Form kelola account user
: Controller Dosen
: Controller Mhs
: T_user
menam pilkan detail biodata dosen()
pilih edit biodata()
kirim pilihan edit biodata()
cek id dosen()
mem anggil forl edit biodata()
menam pilkan form edit biodata() mem asukan biodata dosen()
cek data user()
ubah biodata dosen()
mem anggil form biodata dosen()
menam pilkan halam an biodata dosen()
menam pilkan detail biodata mahasiswa()
pilih edit biodata()
kirim pilihan edit biodata()
cek id m ahasiswa()
mem anggil form edit biodata () menam pilkan form edit biodata()
mem asukan biodata mahasiswa() cek data user()
ubah biodata mahasiswa()
mem anggil form biodata mahasiswa()
menam pilkan halam an biodata m ahasiswa()
Gambar 4.17 Sequence Diagram untuk Kelola Account User
IV - 18
Dos en, Mahas is wa : Us er
: Controller Dos en
: Form Kelola Modul_prak
: Controller Mhs
: 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() menampilkan pes an berhas il ditam bahkan() pilih edit m odul praktikum ()
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() menampilkan halaman modul prak ()
Gambar 4.18 Sequence Diagram untuk Kelola Modul Praktikum
IV - 19
Dos en, Mahas is wa : Us er
: Form kelola Soal
: Controller Dos en
: Controller Mhs
: T_s oal
m enam pilkan form ins ert s oal()
m em asukan data s oal()
cek data s oal()
tam bah data s oal()
m em anggil form kelola s oal() m engirim pes an berhas il ditam bahkan()
m enam pilkan halam an kelola s oal() m enam pilkan pes an berhas il ditam bahkan()
pilih edit s oal ()
kirim pilihan edit s oal() cek id s oal() m em anggil form edit s oal()
m enam pilkan form edit s oal() m em asukan 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()
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 soal()
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 soal kuis ()
m enjawab s oal kuis () cek jawaban s oal kuis() cek data jawaban()
m em anggil form has il nilai kuis ()
m enam pilkan form has il nilai kuis ()
Gambar 4.19 Sequence Diagram untuk mengelola Soal
IV - 20
Dosen,Mahasiswa : : Form Kelola Nilai User menampilkan form edit nilai()
: Controller Dosen
: Controller Mhs
mengubah nilai kuis mahasiswa()
cek data kuis()
ubah data nilai()
memanggil kelola nilai() mengirim pesan berhasil diubah()
menampilkan halaman kelola nilai() menampilkan pesan berhasil diubah()
pilih menu nilai kuis()
kirim pilihan menu nilai kuis()
cek id nilai() memanggil form nilai kuis()
menampilkan halaman nilai kuis()
Gambar 4.20 Sequence Diagram untuk mengelola Nilai
: T_nilai
IV - 21
Dos en, Mahas is wa : : Form Kelola Referens i Us er m enam pilkan form ins ert referens i()
: Controller Dos en
: Controller Mhs
: T_referens i
m em asukan data referens i() m eng-upload file referens i() cek data referens i()
tam bah data referens i()
m em anggil form kelola referensi() m engirim pes an berhas il ditam bahkan() m enam pilkan halam an kelola referens i() m enam pilkan pes an berhas il ditam bahkan() pilih edit referens i()
kirim pilihan edit referens i()
cek id 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 diubah()
m enam pilkan halam an keiola referens i() m enam pilkan pes an berhas il diubah()
pilih delete referens i()
kirim pilihan hapus 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() m enam pilkan file referensi download()
Gambar 4.21 Sequence Diagram untuk mengelola Referensi
IV - 22
: Adminis trator
: Controller Admin
: Form Kelola Berita
: T_berita
menampilkan form ins ert kelola berita()
mem asukan data berita()
cek data berita() tam bah data berita()
mem anggil kelola berita() mengirim pes an berhas il ditam bahkan()
menampilkan halaman kelola berita() menampilkan pes an berhas il ditam bahkan()
pilih edit berita() kirim pilihan edit berita()
cek id berita() mem anggil form edit berita() menampilkan form edit berita()
mem asukan data berita() cek data berita()
ubah data berita()
mem anggil kelola berita() mengirim pes an berhas il diubah()
menampilkan halaman kelola berita() menampilkan pes an berhas il diubah()
pilih delete berita()
kirim pilihan hapus berita()
cek id berita()
mengirim pes an konfirmas i hapus berita() menampilkan pes an konfirm as i hapus berita()
konfirmas i pes an hapus berita() kirim konfirmas i hapus berita()
hapus data berita() menampilkan kelola berita() mengirim pes an berhas il dihapus()
menampilkan halaman kelola berita() menampilkan pes an berhas il dihapus ()
Gambar 4.22 Sequence Diagram untuk mengelola Berita
IV - 23
Dosen, Mahasiswa : User
: Form Kelola tugas
: Controller Dosen
: Controller Mhs
: T_tugas
menampilkan detail tugas mhs()
pilih hapus tugas m hs() kirim pilihan hapus tugas mhs() cek id tugas mhs()
mengirim pesan konfirmasi hapus tugas mhs()
menampilkan pesan konfirmasi hapus tugas mhs()
konfirmasi hapus tugas mhs()
kirim pilihan konfirmasi hapus tugas mhs()
hapus tugas m hs() mem anggil form kelola tugas() menampilkan halam an kelola tugas()
pilih download laporan() kirim pilihan download laporan() cek id laporan() kirim file download laporan()
menampilkan file laporan yg di download()
pilih upload tugas laporan() kirim pilihan upload laporan() mem anggil form upload laporan() menampilkan form upload laporan() mem asukan file laporan() kirim data file laporan()
insert 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()
menampilkan form upload tugas pendahuluan() mem asukan file tugas pendahuluan()
kirim data file tugas pendahuluan()
insert data tugas pendahuluan()
mem anggil form kelola tugas() menampilkan halam an kelola tugas()
Gambar 4.23 Sequence Diagram untuk mengelola Tugas
IV - 24
: Dosen
: form kelola perentase nilai
: Controller Dosen
: 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()
menampilkan list presentase nilai
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.
IV - 25
Gambar 4.25 Class Diagram e-learning (Dosen dan Mahasiswa)
IV - 26
Gambar 4.26 Class Diagram e-learning (Administrator)
IV - 27
Tabel 4.1 Tabel User 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
Alamat
e-mail
key
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
j_kelamin
Varchar(255)
Jenis kelamin user
IV - 28
Tabel 4.2 Tabel Soal Field
Tipe Data
Kunci
Keterangan
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 Field
Tipe Data
Kunci
Keterangan
Npm
Varchar(255)
Primary_key Nomor Mahasiswa
Nilai
int(10)
Nilai mahasiswa
Benar
int(10)
Nilai benar
Salah
int(10)
Nilai salah
Pokok
IV - 29
Kosong
int(10)
Nilai kosong
Point_uts
int(10)
Nilai Point
Date
Datetime
Waktu pelaksaan kuis
Laporan
Int(10)
Nilai
tugas
laporan
praktikum Tugas-
Int(10)
Nilai tugas pendahuluan
pendahuluan Point_uas
praktikum Int(10)
Nilai ujian UAS
Tabel 4.4 Tabel Pesan Field
Tipe Data
Kunci
Keterangan
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
Date
Timestamp
Waktu pengiriman
IV - 30
Tabel 4.5 Tabel berita Field
Tipe Data
Kunci
Keterangan
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 Field
Tipe Data
Kunci
Keterangan
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 Field
Tipe Data
Kunci
Keterangan
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
Keterangan
Text
Keterangan singkat referensi
IV - 31
Tabel 4.8 Tabel Tugas Field
Tipe Data
Kunci
Keterangan
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)
foreign_key
Modul praktikum
Tabel 4.9 Tabel Rums_nilai Field
Tipe Data
Kunci
Keterangan
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
perancangan antarmukanya :
Universitas
Widyatama.
Berikut
adalah
IV - 32
4.6.1 Rancangan Antarmuka Pembangunan Perangkat Lunak Elearning 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
Login
Content Pengumuman
Gambar 4.27 Desain Tampilan Halaman Depan E-learning
IV - 33
2. Halaman Home Desain tampilan halaman home dari user berisi konten-konten atau menu yang dapat diakses oleh user dalam menampilkan halaman yang akan dilihat oleh user.
Modul Praktikum
Download Ebook
Profil Konten MenuPesan
Soal
logout
Isi konten
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.
Modul Praktikum
Download Ebook
Profil
photo
Detail ebook
photo
Detail ebook
photo
Detail ebook
Pesan
Soal
logout
Gambar 4.28 Desain Tampilan Halaman Download Referensi
IV - 34
4. Halaman Biodata Desain halaman biodata ini adalah halaman menampilkan detail atau identitas pengguna website e-learning.
Modul Praktikum
Download Ebook
Profil
Pesan
Soal
logout
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.
Modul Praktikum
Download Ebook
Profil
Pesan
Soal
logout
Soal Pilihan A
Pilihan B
Pilihan C Pilihan D
Submit
Gambar 4.30 Desain Tampilan Halaman Soal ujian
IV - 35
6. Halaman pengolahan kuis 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
Pengolahan soal
Pengolahan Ebook
Profil
Pesan
Logout
Add soal No
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
Jawaban
1
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
Jawaban
2
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
Jawaban
3
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
Jawaban
4
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
jawaban
5
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
Jawaban
6
Soal
Pilihan A
Pilihan B
Pilihan C
Pilihan D
Jawaban
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.
Pengolahan soal
Pengolahan Ebook
Profil
Pesan
Logout
Add ebook No
Photo
Nama
File
Keterangan
edit
Delete
1
1.jpg
A
a
Keterangan
edit
Delete
2
2.jpg
b
b
Keterangan
edit
Delete
3
3.jpg
c
c
Keterangan
edit
Delete
4
4.jpg
d
d
Keterangan
edit
Delete
5
5.jpg
e
e
Keterangan
edit
Delete
6
6.jpg
f
f
Keterangan
edit
Delete
Gambar 4.32 Desain Tampilan Pengolahan data referensi
IV - 36
8. Halaman pengolahan data user 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
Add User Pengolahan user Npm Nama
1
06
2
06
Logout email Phone
Alamat
Password
Jurusan
edit
email
Alamat
Password
Jurusan
edit
12
Delete Delete
No
a Add User b Npm
34 Nama
email Phone
Alamat email
Jurusan Password Password Alamat
1
06
a
12
email
Alamat
Password
Jurusan
edit
Delete
2
06
b
34
email
Alamat
Password
Jurusan
edit
Delete
edit Jurusan
Delete edit
Delete
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
Pengolahan soal
Pengolahan Ebook
Konten Menu
Profil
Soal
Pilihan A Pilihan B Pilihan C Pilihan D Jawaban Simpan
Cancel
Gambar 4.34 Form Tambah Soal
Pesan
Logout
IV - 37
10. Form Tambah Referensi Form tambah referensi,terdiri dari filed jusul, file, photo, keterangan, publish dan tombol simpan juga cancel.
Pengolahan soal
Pengolahan Ebook
Konten Menu
Profil
Pesan
Logout
Judul
Browse
Photo
Keterangan
Yes
Publish
Simpan
Cancel
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
No
Add User Pengolahan user Modul Praktikum Nama Npm
1
06
2
06
a
SoalLogout Upload Tugas Phone email Alamat
Referensi Password
Profil Jurusan
Password
Jurusan
Pesan edit
logout Delete
12
email
Alamat
email
No
34 Npm
Alamat Laporan
1
06
a
12
Modul
delete
2
06
b
34
modul
delete
Password Jurusan Tugas Pendahuluan
edit
Delete
edit Modul
Delete
Gambar 4.36 Halaman pengolahan tugas
Aksi
IV - 38
12. Form Tambah Tugas Form tambah tugas ,terdiri dari filed NPM, upload tugas, , keterangan, modul dan tombol simpan juga cancel.
Pengolahan Modul Praktikum
soal
Soal
Pengolahan UploadEbook Tugas
Profil Referensi Konten Menu
Profil
Pesan Pesan
NPM Upload Tugas
Browse
Modul
Simpan
Cancel
Gambar 4.37 Halaman pengolahan tugas
Logout logout
