63
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 objek-objeknya.
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.
64
1. Sistem menampilkan menu kelola pengguna
2. Admin memilih menu tambah pengguna
3. Sistem menampilkan format isian
4. Admin mengisi format isian dan menekan tombol daftar dan mengirim sms link persetujuan
System Border MobileView userCtrl
View()
User
Selection key
Add()
View()
User data, key add(user data)
User data
Send SMS
Gambar IV.1 Sequence diagram case add user
1 1 userCtrl Idx() Add() Edit() Delete() Approve() Login() Logout() View() Register() Approve() ApproveIdx() Name: Helpers:array Componen:array <<type>> mobileView User Id: Text Pass: Desc: No Hp: Role: Status: Address: Tutor Siswa 1 1 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.
65 1. Sistem menampilkan daftar
pembelajaran yang tersedia
2. User memilih salah satu pembelajaran yang tersedia
3. Sistem menampilkan sub pembelajaran yang tersedia
4. User memilih membuat bahan pembelajaran baru
5. sistem menampilkan daftar isian bahan pembelajaran baru
6. Mengisi format isian dan menekan tombol simpan
7. sistem memproses pembuatan bahan pembelajaran
System Border MobileView tutorialCtrl
Idx() Tutorial Idx object viewByCourse() Key object Add() View() Learning Objek Idx() Add() Add(learningObj) courseCtrl
Gambar IV.3 Sequence diagram case membuat bahan pembelajaran
1 1 <<type>> mobileView courseCtrl Idx() Add() Edit() View() Acess() Manage() Name: Helpers: tutorialCtrl Idx() Add() Edit() View() Acess() Manage() ReadOnly() Name: Tutorial Idx: Text Name: Desc: 1 1..* 1 0…*
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.
66
1. Sistem menampilkan bahan pembelajaran yang tersedia
2. User memilih Isi pembelajaran yang tersedia
3. Sistem menampilkan menu isi pembelajaran yang tersedia
4. User memilih membuat isi pembelajaran baru
5. sistem menampilkan format isi pembelajaran
6. Mengisi format isian dan menekan tombol simpan
7. sistem memproses pembuatan isi pembelajaran
System Border MobileView tutorialCrl
Property()
contentCtrl
Idx object viewByTutorial()
Key object Add() View() Learning Objek Idx() Add() Add(Content) Send SMS Content
Gambar IV.5 Sequence diagram case pembuatan isi pembelajaran
<<type>> mobileView tutorialCtrl Idx() Add() Edit() View() Acess() Manage() ReadOnly() Property() Name: Helpers: contentCtrl Add() Edit() Delete() View() ViewByTutorial() Search() Name: Content Idx: Text Name: Desc: Link: Attc: TutId: 1 1 1 1..* 1 0…*
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.
67
1. Sistem menampilkan bahan pembelajaran yang tersedia
2. User memilih tugas pembelajaran yang tersedia
3. Sistem menampilkan menu Tugas pembelajaran yang tersedia
4. User memilih membuat Tugas pembelajaran baru
5. Sistem menampilkan format tugas pembelajaran
6. Mengisi format isian dan menekan tombol simpan
7. Sistem memproses pembuatan tugas pembelajaran
System Border MobileView tutorialCrl
Property()
taskCtrl
Idx object viewByTutorial()
Key object Add() View() Task Object Idx() Add() Add(Task Send SMS Task
Gambar IV.7 Sequence diagram case pembuatan tugas pembelajaran
<<type>> mobileView tutorialCtrl Idx() Add() Edit() View() Acess() Manage() ReadOnly() Property() Name: Helpers: taskCtrl Add() Edit() Delete() View() ViewByTutorial() Search() Name: Task Idx: Text Question: 1 1 1 1..* 1 0…*
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.
68 1. Sistem menampilkan menu siswa
2. User memilih melakukan pembelajaran sinkron
3. Sistem menampilkan pembelajaran sinkron
System Border MobileView pageCtrl
Display()
chatCtrl
Idx object Idx(Chats)
Idx() Chat
Gambar IV.9 Sequence diagram case pembelajaran sinkron
<<type>> mobileView pageCtrl Dislpay() Name: Helpers: chatCtrl Idx() Name: Chat Id: Key: Name: 1 1 1 1 0…* 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.
69 Menu Pembelajaran
Siswa Search
Akses Pembelajaran
Mata Pelajaran Sub Pembelajaran
Evaluasi
Tugas Forum Rencana
Isi Pembelajaran Tulis Pesan Ke Forum login Pembelajaran Sinkron Kirim Jawaban ke evaluasi Kirim Jawaban tugas Melihat profil Tutor
Kirim pesan ke pembelajaran
sinkron Tampilan awal
Register
Ket: pada halaman manapun siswa dapat keluar dari sistem
70 Menu Pembelajaran
Tutor
Akses Pembelajaran
Mata Pelajaran Sub Pembelajaran
Evaluasi
Tugas Forum Rencana
Isi Pembelajaran Lihat Pesan di Forum login Pembelajaran Sinkron Lihat Jawaban ke evaluasi Lihat Jawaban tugas Melihat profil Tutor
Kirim pesan ke pembelajaran sinkron Tampilan awal Register Kelola Pembelajaran Kelola Objek Pembelajaran
Cek Siswa Daftar Log Siswa
K Ket: pada halaman manapun Tutor dapat keluar dari sistem
71
Menu Pembelajaran Administrator
Akses Pembelajaran
Mata Pelajaran Sub Pembelajaran
Evaluasi
Tugas Forum Rencana
Isi Pembelajaran Lihat Pesan di Forum login Pembelajaran Sinkron Lihat Jawaban ke evaluasi Lihat Jawaban tugas Melihat profil Tutor
Kirim pesan ke pembelajaran sinkron Tampilan awal Register Kelola Pembelajaran Kelola Objek Pembelajaran
Cek Siswa Daftar Log Siswa Kelola Pengguna Setujui pengguna
Daftar pengguna yang bisa di sunting
Daftarkan pengguna baru Daftar isian pengguna baru Penyuntingan pengguna
Ket: pada halaman manapun Administrator dapat keluar dari sistem
72 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:
Gambar IV.14 Rancangan antar muka mobiledu untuk paket pengaksesan pembelajaran User ID : Password : Belum Terdaftar ? Daftar disini logo Mobiledu Login logo Mobiledu Bar Navigasi @Search @ Pembelajaran sinkron @ Pembelajaran logo Mobiledu Bar Navigasi @ Mata Pelajaran 1 @Mata Pelajaran2 @ Mata Pelajaran 3 @ Mata Pelajaran 4 dst logo Mobiledu Bar Navigasi @ Judul Pembelajaran 1 @ Judul Pembelajaran 2 @Judul Pembelajaran3 @ Judul Pembelajaran 4 dst logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh: @ Materi Pembelajaran @Evaluasi @ Tugas @Forum @ Rencana logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh: Materi Pembelajaran Isi Pembelajaran
73
Gambar IV.15 Rancangan antar muka mobiledu untuk paket pengaksesan pembelajaran lanjutan
Gambar IV.16 Rancangan antar muka mobiledu untuk paket pengelolaan isi pembelajaran
User ID:
Password :
Belum Terdaftar? Daftar
Lihat Pembelajaran yang tersedia
logo Mobiledu Login logo Mobiledu Bar Navigasi @ Cek Siswa @ Pembelajaran SInkron @Kelola Pembelajaran logo Mobiledu Bar Navigasi Cek Siswa By Date , All logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh : Evaluasi Isi Evaluasi logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh : Tugas Isi Tugas logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh : Rencana Calender Pembelajaran logo Mobiledu Bar Navigasi Judul Pembelajaran1 Oleh : Forum Isi Forum
Tulis Pesan ke Forum
logo Mobiledu Bar Navigasi Nama User Id : Password : Konfirm Password : dst
74
Gambar IV.17 Rancangan antar muka mobiledu untuk paket pengelolaan isi pembelajaran lanjutan
logo Mobiledu
Bar Navigasi
Daftar Siswa yang akan dipanggil : @ Siswa 1 @Siswa2 @ Siswa 3 @ Siswa 4 dst logo Mobiledu Bar Navigasi Pembelajaran Sinkron : Tutor : words Siswa 1 : ???? Siswa2: ???? Siswa 3 : ???? Siswa4: ???? logo Mobiledu Bar Navigasi
Kelola Objek Pembelajaran @ Mata Pelajaran 1 @ Mata Pelajaran 2 @Mata Pelajaran3 @ Mata Pelajaran 4
Kelola Objek Pembelajaran>Mata Pelajaran 1 Tambah Judul Pembelajaran1 Judul Pembelajaran 2 Judul Pembelajaran 3 dst logo Mobiledu Bar Navigasi logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh : Deskripsi : logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh: Deskripsi : @ Isi Pembelajaran @ Tugas @ Evaluasi @ Forum @ Rencana logo Mobiledu Bar Navigasi Judul Pembelajaran1 Oleh : Isi Forum
Tulis Pesan ke Forum Tulis Pesan Create logo Mobiledu Bar Navigasi Judul Pembelajaran 1 Oleh : Deskripsi @ Isi Pembelajaran Lampiran Browse
