Pengguna dapat memilih salah satu mata kuliah untuk melihat informasi tugas yang ada pada mata kuliah tersebut.
a. Halaman list tugas
Pengguna dapat memilih salah satu tugas untuk melihat informasi tentang tugas tersebut dengan cara menyentuh
salah satu judul tugas.
Gambar 3.9 Design user interface list tugas
b.
Halaman detail tugas
Halaman ini menampilkan soal-soal dari tugas yang diberikan oleh dosen.
Gambar 3.10 Design user interface detail tugas
Tugas 1 Tugas 2
Tugas 3 Tugas 4
1. Soal 1
2. Soal 2
3. Soal 3
4. Soal 4
Tugas 1
8. Tampilan halaman view profile
Halaman ini menampilkan header logo exelsa. Halaman ini berisi detail informasi tentang pengguna.
Gambar 3.11 Design user interface view profile 3.3.3.
Diagram Activity
1. Diagram Activity Login
Aktor Sistem
Memasukan username dan password Memanggil login.php
Melakukan query ke database Memvalidasi username
password Menampilkan halaman utama
Gambar 3.12 Diagram Activity Login
Detail 1 Detail 2
Detail 3 Nama Pengguna
2. Diagram Activity Melihat Matakuliah
Aktor Sistem
Menekan menu materi di halaman utama
Memanggil tampilcourse.php Melakukan query ke database
Mengirim data list matakuliah
Menampilkan halaman course
Gambar 3.13 Diagram Activity Melihat Matakuliah
3. Diagram Activity Melihat Daftar Materi
Aktor Sistem
Menekan salah satu matakuliah di halaman course
Memanggil coursedetailjs.php
Melakukan query ke database
Mengirimkan data list materi Menampilkan halaman course
detail
Gambar 3.14 Diagram Activity Melihat Daftar Materi
4. Diagram Activity Download Materi
Aktor Sistem
Menekan salah satu materi yang akan di download pada halaman
course detail Memanggil web service moodle
Web service memproses download
Menampilkan hasil download
Gambar 3.15 Diagram Activity Download Materi
5. Diagram Activity Melihat Matakuliah yang Memiliki Tugas
Aktor Sistem
Menekan button menu tugas pada halaman utama
Memanggil tampilcoursetugas.php
Melakukan query ke database Mengirimkan data list matakuliah yang
memiliki tugas Menampilkan list matakuliah pada
halaman course tugas
Gambar 3.16 Diagram Activity Melihat Matakuliah yang Memiliki Tugas
6. Diagram Activity Melihat Daftar Tugas
Aktor Sistem
Menekan salah satu matakuliah pada halaman course tugas
Memanggil tampillisttugas.php Melakukan query ke database
Mengirim data list tugas dari matakuliah yang dipilih
Menampilkan list tugas pada halaman list tugas
Gambar 3.17 Diagram Activity Melihat Daftar Tugas
7. Diagram Activity Melihat Isi Tugas
Aktor Sistem
Menekan salah satu judul tugas pada halaman list tugas
Memanggil tampilisitugas.php
Melakukan query ke database
Mengirimkan data isi tugas Menampilkan data isi tugas
pada halaman view tugas
Gambar 3.18 Diagram Activity Melihat Isi Tugas
8. Diagram Activity View Profile
Aktor Sistem
Menekan menu user profile pada halaman utama
Memanggil viewprofile.php Melakukan query ke database
Mengirimkan data profile user Menampilkan data profile user
pada halaman view profile
Gambar 3.19 Diagram Activity View Profile
9. Diagram Activity Logout
Aktor Sistem
Menekan navigasi logout pada halaman utama
Menghapus history tags
Menampilkan halaman login
Gambar 3.20 Diagram Activity Logout
3.4. Design Detail
Pada bagian ini akan dijelaskan secara detail rancangan dari design user interface yang akan diwakilkan dengan diagram sequence dan
kolaborasi dari setiap use case yang ada pada Gambar 3.2.
3.4.1. Login
Diagram Sequence
:mahasiswa :login
:halamanutama :login.php
DBmoodle
2.mengirimkan username password 1.menginputkan username dan password
3. meminta konfirmasi usernamepassword 4.mengirim konfirmasi
5. mengirim konfirmasi
7. menampilkan halaman utama 6. memanggil halaman utama
Gambar 3.21 Diagram Sequence Login
Diagram Kolaborasi
1 3
4 6
7 Login.java
halaman utama.java
login.php moodle
database
mahasiswa
2
5
Gambar 3.22 Diagram Kolaborasi Login
3.4.2. Melihat Daftar Matakuliah
Diagram Sequence
:mahasiswa DBmoodle
:halaman utama :course
:tampilcourse
1.memilih menu materi 2. memanggil kelas course
3. memanggil tampilcourse.php 4. melakukan query tampil course
5. mengirim data list matakuliah 6. mengirim data list matakuliah
7. menampilkan list matakuliah pada halaman course
Gambar 3.23 Diagram Sequence Melihat Daftar Matakuliah
Diagram Kolaborasi
1 2
3 4
5 6
7 halaman
utama.java course.java
tampil course.php
moodle database
mahasiswa
Gambar 3.24 Diagram Kolaborasi Melihat Daftar Matakuliah 3.4.3.
Melihat Daftar Materi
Diagram Sequence
mahasiswa :course
coursedetailjs :tampilisicoursejs
moodle DB 1. memilih salah satu matakuliah
2. memanggil coursedetailjs 3. memanggil tampilisicoursejs
4. melakukan query tampil materi 5. mengirim data hasil query
6. mengirim data list materi 7. menampilkan list materi di halaman coursedetailjs
Gambar 3.25 Diagram Sequence Melihat Daftar Materi
Diagram Kolaborasi
moodle database
1 2
3 4
5 6
7 course.java
coursedetail js.java
tampilisi course.php
mahasiswa
Gambar 3.26 Diagram Kolaborasi Melihat Daftar Materi 3.4.4.
Mendownload Materi
Diagram Sequence
mahasiswa :coursedetailjs
:moodle web service 1. memilih salah satu materi
2. meminta materi yang akan di download 3. mengirim file hasil download
4. melihat file hasil download
Gambar 3.27 Diagram Sequence Mendownload Materi
Diagram Kolaborasi
1 2
coursedetail js.java
Web service Moodle
mahasiswa
3 4
Gambar 3.28 Diagram Kolaborasi Mendownload Materi
3.4.5. Melihat Daftar Materi yang Memiliki Tugas
Diagram Sequence
mahasiswa halaman utama
coursetugasjs tampilcoursetugas
moodleDB 1. memilih menu tugas
2.memanggil coursetugasjs 3.memanggil tampilcoursetugas
4. melakukan query coursetugas 5. mengirimkan hasil query
6. mengirimkan data list matakuliah 7. menampilkan matakuliah yang memiliki tugas
Gambar 3.29 Diagram Sequence Melihat Daftar Materi yang Memiliki Tugas
Diagram Kolaborasi
moodle database
1 2
3 4
5 6
7 halamanuta
ma.java coursetugas
js.java tampilcourse
tugas.php
mahasiswa
Gambar 3.30 Diagram Kolaborasi Melihat Daftar Materi yang Memiliki Tugas
3.4.6. Melihat Daftar Tugas
Diagram Sequence
mahasiswa :coursetugasjs
:listtugas :tampillisttugas
moodleDB 1.memilih salah satu matakuliah
2.memanggil list tugas 3.memanggil tampil list tugas
4. melakukan query listtugas 5. mengirim hasil query
6. mengirim data list tugas 7. melihat list tugas
Gambar 3.31 Diagram Sequence Melihat Daftar Tugas
Diagram Kolaborasi
moodle database
1 2
3 4
5 6
7 coursetugas
js.java listtugas.java
tampillist tugas.php
mahasiswa
Gambar 3.32 Diagram Kolaborasi Melihat Daftar Tugas 3.4.7.
Melihat Isi Tugas
Diagram Sequence
mahasiswa :listtugas
:viewtugas :tampilisitugas
moodleDB 1. memilih salah satu tugas
2. memanggil viewtugas 3.memanggil tampilisitugas
4.melakukan query viewtugas 5. mengirim hasil query
6. mengirim isi tugas 7. melihat isi tugas
Gambar 3.33 Diagram Sequence Melihat Isi Tugas
Diagram Kolaborasi
moodle database
1 2
3 4
5 6
7 listtugas.java
viewtugas.java tampilisi
tugas.php
mahasiswa
Gambar 3.34 Diagram Kolaborasi Melihat Isi Tugas
3.4.8. View Profile
Diagram Sequence
mahasiswa :halamanutama
:viewprofile :viewprofilejs
moodleDB 1. memilih menu view profile
2. memanggil view profile 3. memanggil viewprofilejs
4. melakukan query view profile 5. mengirim data profile
6. mengirim data profile 7. menampilkan profile user
Gambar 3.35 Diagram Sequence View Profile
Diagram Kolaborasi
moodle database
1 2
3 4
5 6
7 halamanutama.java
viewprofile.java viewprofilejs.
php
mahasiswa
Gambar 3.36 Diagram Kolaborasi View Profile 3.4.9.
Logout
Diagram Sequence
mahasiswa : halaman utama
: login 1.menekan navigasi logout
2.menghapus history memanggil login 3. menampilkan halaman login
Gambar 3.37 Diagram Sequence Logout
Diagram Kolaborasi
1 2
halamanutama.java login.java
mahasiswa
3
Gambar 3.38 Diagram Kolaborasi Logout
