Bab IV Perancangan mLMS untuk Telepon Seluler Berdasarkan hasil pada tahap analisis, pada tahap ini akan dirancang model mLMS untuk telepon seluler untuk mempermudah implementasi sistem.
IV.1 Perancangan mLMS untuk Mobiledu Perancangan model mLMS mobiledu akan dilakukan dengan membuat diagram interaksi atau sequence diagram dan diagram kelas. Sebuah diagram interaksi digambarkan dengan menggunakan kotak yang menggambarkan objek yang ditempatkan pada garis putus-putus untuk menggambarkan lama hidup objek tersebut, serta tanda panah yang menunjukkan data yang dikirimkan pada objek lain. Kemudian diagram kelas akan digunakan pada perancangan digunakan untuk menggambarkan jenis objek pada sistem dan hubungan statik antar objekobjeknya.
IV.1.1 Realisasi Use Case Tahap Perancangan Pada bagian ini akan dijelaskan beberapa realisasi use case yang menjadi fokus penelitian, realisasi paket-paket use case yang lain beserta diagram kelas keseluruhan dijelaskan pada lampiran C. IV.1.1.1 Realisasi Use Case Add User Gambar IV.1 berikut ini adalah realisasi use case pengelolaan pengguna baru mobiledu yang digambarkan melalui diagram interaksi (sequence diagram), sedangkan pada gambar IV.2 menunjukkan kelas diagram case pengelolaan pengguna menambah pengguna baru.
63
System Border
MobileView
userCtrl
User
View()
1. Sistem menampilkan menu kelola pengguna
2. Admin memilih menu tambah pengguna
Selection key Add()
3. Sistem menampilkan format isian
4. Admin mengisi format isian dan menekan tombol daftar dan mengirim sms link persetujuan
View() User data, key
add(user data) User data Send SMS
Gambar IV.1 Sequence diagram case add user userCtrl User
Name: Helpers:array Componen:array
<
> mobileView
1
1
Idx() Add() Edit() Delete() Approve() Login() Logout() View() Register() Approve() ApproveIdx()
Id: Text 1 Pass: Desc: No Hp: Role: Status: Address:
1
Tutor
Siswa
Admin
Gambar IV.2 Diagram kelas case add user IV.1.1.2 Realisasi Use Case Membuat Bahan Pembelajaran Gambar IV.3 berikut ini adalah realisasi use case membuat bahan pembelajaran mobiledu yang digambarkan melalui diagram interaksi (sequence diagram), sedangkan pada gambar IV.4 menunjukkan kelas diagram case membuat bahan pembelajaran.
64
System Border
MobileView
tutorialCtrl
Tutorial
courseCtrl
Idx()
1. Sistem menampilkan daftar pembelajaran yang tersedia Idx object
2. User memilih salah satu pembelajaran yang tersedia
viewByCourse() Idx()
3. Sistem menampilkan sub pembelajaran yang tersedia 4. User memilih membuat bahan pembelajaran baru
Key object Add()
5. sistem menampilkan daftar isian bahan pembelajaran baru
View()
6. Mengisi format isian dan menekan tombol simpan Learning Objek Add()
7. sistem memproses pembuatan bahan pembelajaran
Add(learningObj)
Gambar IV.3 Sequence diagram case membuat bahan pembelajaran tutorialCtrl courseCtrl <> mobileView
Name:
Name: Helpers:
1
1
Idx() Add() Edit() View() Acess() Manage()
1
1..*
Idx() Add() Edit() View() Acess() Manage() ReadOnly()
Tutorial
1 0…* Idx: Text Name: Desc:
Gambar IV.4 Diagram kelas case membuat bahan pembelajaran
IV.1.1.3 Realisasi Use Case Membuat Isi Pembelajaran Gambar IV.5 berikut ini adalah realisasi use case membuat isi pembelajaran mobiledu yang digambarkan melalui diagram interaksi (sequence diagram), sedangkan pada gambar IV.6 menunjukkan kelas diagram case membuat bahan pembelajaran.
65
System Border
MobileView
tutorialCrl
contentCtrl
Content
Property()
1. Sistem menampilkan bahan pembelajaran yang tersedia
2. User memilih Isi pembelajaran yang tersedia
viewByTutorial()
Idx object
Idx() 3. Sistem menampilkan menu isi pembelajaran yang tersedia 4. User memilih membuat isi pembelajaran Key object baru
Add()
5. sistem menampilkan format isi pembelajaran
View()
6. Mengisi format isian dan menekan tombol Learning Objek simpan
Add() Add(Content)
7. sistem memproses pembuatan isi pembelajaran
Send SMS
Gambar IV.5 Sequence diagram case pembuatan isi pembelajaran tutorialCtrl contentCtrl
Name: Helpers: <> mobileView
1
1
Idx() Add() Edit() View() Acess() Manage() ReadOnly() Property()
Name:
1
1..*
Add() Edit() Delete() View() ViewByTutorial() Search()
Content
1 0…*
Idx: Text Name: Desc: Link: Attc: TutId:
Gambar IV.6 Diagram kelas case pembuatan isi pembelajaran
IV.1.1.4 Realisasi Use Case Membuat Tugas Pembelajaran Gambar IV.7 berikut ini adalah realisasi use case membuat tugas pembelajaran mobiledu yang digambarkan melalui diagram interaksi (sequence diagram), sedangkan pada gambar IV.8 menunjukkan kelas diagram case membuat tugas pembelajaran.
66
System Border
MobileView
tutorialCrl
taskCtrl
Task
Property()
1. Sistem menampilkan bahan pembelajaran yang tersedia
2. User memilih tugas pembelajaran yang tersedia
viewByTutorial()
Idx object
Idx() 3. Sistem menampilkan menu Tugas pembelajaran yang tersedia 4. User memilih membuat Tugas pembelajaran baru
Key object Add()
5. Sistem menampilkan format tugas pembelajaran
View()
6. Mengisi format isian dan menekan tombol simpan
Task Object
Add() Add(Task
7. Sistem memproses pembuatan tugas pembelajaran
Send SMS
Gambar IV.7 Sequence diagram case pembuatan tugas pembelajaran
tutorialCtrl taskCtrl
Name: Helpers: <> mobileView
1
1
Idx() Add() Edit() View() Acess() Manage() ReadOnly() Property()
Name:
1
1..*
Add() Edit() Delete() View() ViewByTutorial() Search()
Task
1 0…*
Idx: Text Question:
Gambar IV.7 Kelas diagram case pembuatan tugas pembelajaran
IV.1.1.3 Realisasi Use Case Melakukan Pembelajaran Sinkron Gambar IV.9 berikut ini adalah realisasi use case membuat bahan pembelajaran mobiledu yang digambarkan melalui diagram interaksi (sequence diagram), sedangkan pada gambar IV.10 menunjukkan kelas diagram case membuat bahan pembelajaran.
67
System Border
MobileView
pageCtrl
chatCtrl
Chat
Display() 1. Sistem menampilkan menu siswa Idx(Chats)
Idx object
2. User memilih melakukan pembelajaran sinkron
Idx()
3. Sistem menampilkan pembelajaran sinkron
Gambar IV.9 Sequence diagram case pembelajaran sinkron
pageCtrl
<> mobileView
Name: Helpers:
1
1
Dislpay()
1
Chat chatCtrl
1 0…*
Name:
Id: Key: Name:
Idx()
1
Gambar IV.10 Sequence diagram case pembelajaran sinkron
IV. 2 Diagram Alir Mobiledu Perancangan diagram alir mobiledu dirancang berdasarkan sudut pandang otoritas akses pada sistem yang terbagi pada 3 pengguna sistem yaitu, administrator, tutor dan siswa yang dijelaskan melalui gambar-gambar IV.11, IV.12 dan IV.13 dibawah ini.
68
login
Search
Tampilan awal
Menu Pembelajaran Siswa
Register
Akses Pembelajaran
Pembelajaran Sinkron
Mata Pelajaran
Kirim pesan ke pembelajaran sinkron
Sub Pembelajaran
Isi Pembelajaran
Tugas
Evaluasi
Forum
Melihat profil Tutor
Kirim Jawaban tugas
Kirim Jawaban ke evaluasi
Tulis Pesan Ke Forum
Ket: pada halaman manapun siswa dapat keluar dari sistem Gambar IV.11 Diagram alir mobiledu siswa
69
Rencana
login
Menu Pembelajaran Tutor
Cek Siswa
Tampilan awal
Daftar Log Siswa
Kelola Pembelajaran
Pembelajaran Sinkron
Kirim pesan ke pembelajaran sinkron
Akses Pembelajaran Kelola Objek Pembelajaran
Register
Mata Pelajaran
Sub Pembelajaran
Isi Pembelajaran
Tugas
Evaluasi
Forum
Melihat profil Tutor
Lihat Jawaban tugas
Lihat Jawaban ke evaluasi
Lihat Pesan di Forum
Ket: pada halaman manapun Tutor dapat keluar dari sistem Gambar IV.12 Diagram alir tutor
70
Rencana
K
Penyuntingan pengguna
Daftar isian pengguna baru
Daftar pengguna yang bisa di sunting
Daftarkan pengguna baru
Kelola Pengguna
Setujui pengguna
Menu Pembelajaran Administrator
Cek Siswa
login
Tampilan awal
Daftar Log Siswa
Kelola Pembelajaran
Pembelajaran Sinkron
Kirim pesan ke pembelajaran sinkron
Akses Pembelajaran Kelola Objek Pembelajaran
Register
Mata Pelajaran
Sub Pembelajaran
Isi Pembelajaran
Tugas
Evaluasi
Forum
Melihat profil Tutor
Lihat Jawaban tugas
Lihat Jawaban ke evaluasi
Lihat Pesan di Forum
Ket: pada halaman manapun Administrator dapat keluar dari sistem Gambar IV.13 Diagram alir adminsitrator
71
Rencana
IV.3 Perancangan Antarmuka Mobiledu Antarmuka mobiledu dirancang agar bisa tampil dengan maksimal pada ukuran layar yang tidak dimaksudkan pada satu jenis telepon seluler tertentu saja/pada beberapa jenis telepon seluler, sehingga ukuran mobile web yang akan dipakai sesuai dengan apa yang direkomendasikan W3C melalui DDC pada bab sebelumnya yaitu dengan ukuran lebar layar minimum 120 pixels.
Rancangan antarmuka yang akan digunakan pada mobiledu akan dibagi menjadi 3 dilihat dari sisi penggunanya, yaitu administrator, tutor dan siswa. Berikut ini adalah beberapa rancangan antarmuka umum yang akan digunakan dan beberapa antarmuka yang akan digunakan untuk administrator: Mobiledu
logo
User ID:
logo
Mobiledu
logo
Mobiledu
Bar Navigasi
Bar Navigasi
@Search @Pembelajaran sinkron @Pembelajaran
@Mata Pelajaran1 @Mata Pelajaran2 @Mata Pelajaran3 @Mata Pelajaran4 dst
Password:
Login Belum Terdaftar? Daftar disini
logo
Mobiledu
Bar Navigasi
logo
Mobiledu
Bar Navigasi
Mobiledu
Bar Navigasi Judul Pembelajaran1 Oleh:
Judul Pembelajaran1 Oleh: @Judul Pembelajaran1 @Judul Pembelajaran2 @Judul Pembelajaran3 @Judul Pembelajaran4 dst
logo
@Materi Pembelajaran @Evaluasi @Tugas @Forum @Rencana
Materi Pembelajaran
Isi Pembelajaran
Gambar IV.14 Rancangan antar muka mobiledu untuk paket pengaksesan pembelajaran 72
Mobiledu
logo
logo
Mobiledu
logo
Mobiledu
Bar Navigasi Judul Pembelajaran1 Oleh:
Bar Navigasi Judul Pembelajaran1 Oleh:
Bar Navigasi Judul Pembelajaran1 Oleh:
Evaluasi
Tugas
Rencana
Isi Evaluasi
Mobiledu
logo
Bar Navigasi Nama
Calender Pembelajaran
Isi Tugas
logo
Mobiledu
Bar Navigasi Judul Pembelajaran1 Oleh: Forum
User Id:
Password: Isi Forum Konfirm Password:
Tulis Pesan ke Forum
dst
Gambar IV.15 Rancangan antar muka mobiledu untuk paket pengaksesan pembelajaran lanjutan
logo
Mobiledu
User ID:
logo
Mobiledu
Bar Navigasi
Login
Mobiledu
Bar Navigasi Cek Siswa By Date, All
Password:
Belum Terdaftar? Daftar Lihat Pembelajaran yang tersedia
logo
@Cek Siswa @Pembelajaran SInkron @Kelola Pembelajaran
Gambar IV.16 Rancangan antar muka mobiledu untuk paket pengelolaan isi pembelajaran 73
logo
Mobiledu
logo
Bar Navigasi Daftar Siswa yang akan dipanggil: @Siswa1 @Siswa2 @Siswa3 @Siswa4 dst
Mobiledu
logo
Mobiledu
Bar Navigasi
Bar Navigasi
Pembelajaran Sinkron: Tutor: words Siswa1: ???? Siswa2: ???? Siswa3: ???? Siswa4: ????
Kelola Objek Pembelajaran @Mata Pelajaran1 @Mata Pelajaran2 @Mata Pelajaran3 @Mata Pelajaran4
Tulis Pesan
logo
Mobiledu
logo
Bar Navigasi Kelola Objek Pembelajaran>Mata Pelajaran1 Tambah Judul Pembelajaran1 Judul Pembelajaran2 Judul Pembelajaran3 dst
logo
logo
Mobiledu
Bar Navigasi
Bar Navigasi
Judul Pembelajaran1 Oleh: Deskripsi:
Judul Pembelajaran1 Oleh: Deskripsi: @ Isi Pembelajaran @ Tugas @ Evaluasi @ Forum @ Rencana
Create
logo
Mobiledu
Mobiledu
Mobiledu
Bar Navigasi
Bar Navigasi
Judul Pembelajaran1 Oleh: Deskripsi @ Isi Pembelajaran
Judul Pembelajaran1 Oleh:
Isi Forum
Lampiran
Browse Tulis Pesan ke Forum
Gambar IV.17 Rancangan antar muka mobiledu untuk paket pengelolaan isi pembelajaran lanjutan
74
