BAB III
PERANCANGAN SISTEM
Pada bab ini akan dijelaskan perancangan aplikasi dimulai dengan kebutuhan
fungsional sistem, desain arsitektur dari sistem, perancangan database, perancangan
aplikasi web server, dan perancangan aplikasi mobile.
3.1. Gambaran Sistem
Pada sistem yang dibuat ini terbagi menjadi dua yaitu aplikasi mobile dan aplikasi
web server. Aplikasi mobile digunakan oleh pengguna bertipe dosen dan mahasiswa,
sedangkan aplikasi web server digunakan oleh pengguna bertipe administrator. Aplikasi
mobile dijalankan menggunakan smartphone Android, sedangkan aplikasi web server
diakses dengan menggunakan Chrome web browser.
3.1.1 Aplikasi Mobile
Dalam aplikasi mobile terdapat dua pengguna yaitu dosen dan mahasiswa. Pengguna
bertipe mahasiswa dapat memiliki hak sebagai asisten dosen yang diatur di dalam aplikasi
web server. Semua pengguna dapat melihat semua materi yang ada. Pengguna bertipe
dosen dan mahasiswa yang memiliki hak asisten dosen dapat membuat materi, perintah
tugas, dan pengumuman yang berkaitan dengan kegiatan belajar mengajar. Pengguna
bertipe mahasiswa hanya dapat melihat pengumuman dan tugas berdasarkan matakuliah
yang diambil yang diambil oleh mahasiswa tersebut. Use case untuk dosen menggunakan
aplikasi mobile dapat dilihat pada Gambar 3.1 dan use case untuk mahasiswa dapat dilihat
pada Gambar 3.2a dan Gambar 3.2b.
Gambar 3.1 Use Case Dosen Aplikasi Mobile
Penjelasannya adalah sebagai berikut:
1. Melihat Semua Materi, Pengumuman dan Tugas
Pengguna dapat melihat materi, pengumuman dan tugas di semua kategori
matakuliah.
2. Membuat dan Mengelola Materi, Surat Tugas, Pengumuman yang dibuat
Pengguna dapat membuat materi, tugas, dan pengumuman di semua kategori
matakuliah serta dapat mengubah isi maupun menghapus yang telah dibuat oleh
pengguna.
3. Melihat Mahasiswa yang telah Mengirim Tugas
Pengguna dapat melihat daftar mahasiswa yang telah mengirimkan tugasnya.
Gambar 3.2a Use Case Mahasiswa dengan Hak Asisten Aplikasi Mobile
Penjelasannya adalah sebagai berikut:
1. Melihat Semua Materi
Pengguna dapat melihat materi di semua kategori matakuliah.
2. Mengirim Tugas berdasarkan Matakuliah yang Diambil
Pengguna dapat mengirimkan tugas apabila perintah tugas bertipe submit atau
mahasiswa diminta untuk mengumpulkan tugas tersebut.
3. Membuat dan Mengelola Materi, Surat Tugas, Pengumuman yang dibuat
Pengguna dapat membuat materi, tugas, dan pengumuman di semua kategori
matakuliah serta dapat mengubah isi maupun menghapus yang telah dibuat oleh
pengguna.
4. Melihat Mahasiswa yang telah Mengirim Tugas
Pengguna dapat melihat daftar mahasiswa yang telah mengirimkan tugasnya..
5. Melihat Perintah Tugas dan Pengumuman berdasarkan Matakuliah yang
Diambil
Pengguna hanya dapat melihat perintah tugas dan pengumuman berdasarkan
matakuliah yang diambil oleh pengguna.
Gambar 3.2b Use Case Mahasiswa tanpa Hak Asisten Aplikasi Mobile
Penjelasannya adalah sebagai berikut:
1. Melihat Semua Materi
Pengguna dapat melihat materi di semua kategori matakuliah.
2. Melihat Perintah Tugas dan Pengumuman berdasarkan Matakuliah yang diambil
Pengguna hanya dapat melihat perintah tugas dan pengumuman berdasarkan
matakuliah yang diambil oleh pengguna.
3. Mengirim Tugas berdasarkan Matakuliah yang diambil
Pengguna dapat mengirimkan tugas apabila perintah tugas bertipe submit atau
mahasiswa diminta untuk mengumpulkan tugas tersebut.
Dari ketiga use case dalam aplikasi mobile terdapat hubungan dua arah antara dosen
dengan mahasiswa ataupun asisten dengan mahasiswa. Seorang dosen ataupun seorang
asisten dosen dapat membuat perintah tugas yang disertai batas waktu pengumpulan tugas.
Mahasiswa yang menerima tugas ini dapat melakukan pengumpulan dengan menggunakan
aplikasi mobile sebelum batas waktu yang telah ditentukan sebelumnya. Pengumpulan
setiap tugas hanya dapat dilakukan sekali saja oleh seorang mahasiswa, oleh karena itu
mahasiswa harus berhati-hati dalam hal ini agar tidak salah saat mengumpulkan tugasnya.
Oleh karena aplikasi mobile lebih dikhususkan sebagai media informasi, maka pembuat
perintah tugas hanya dapat melihat daftar mahasiswa yang telah mengumpulkan tugas.
Gaftar alir aplikasi mobile learning dapat dilihat pada Gambar 3.3. Penjelasan gaftar
alir aplikasi mobile learning sebagai berikut:
1. Ketika aplikasi mobile dibuka maka aplikasi akan mengecek apakah session pengguna
tersimpan atau tidak. Jika session pengguna tersimpan maka aplikasi akan menuju ke
halaman utama, namun jika tidak tersimpan session pengguna maka aplikasi akan
menampilkan form login dimana pengguna harus melakukan autentikasi diri. Jika
autentikasi berhasil maka session baru akan dibuat dan aplikasi akan menuju halaman
utama.
2. Pada halaman utama terdapat tiga bagian besar yaitu konten utama, drawer layout, dan
quick button. Konten utama akan menampilkan halaman berdasarkan menu yang
dipilih oleh pengguna di drawer layout. Saat pertama kali pengguna masuk halaman
utama maka menu thread yang dipilih secara otomatis. Bagian kedua adalah drawer
layout, dalam drawer layout ini terdapat lima menu yang bisa dipilih yaitu menu
thread, menu task, menu news, menu my profile dan menu logout. Bagian ketiga
adalah quick button, bagian ini terdapat tiga button yaitu create thread, create task,
create news.
3. Saat pengguna memilih menu thread maka konten utama akan menampilkan daftar
ulasan singkat materi dengan urutan teratas adalah materi yang terbaru dipublikasikan.
Pengguna dapat mengetahui lebih detil isi materi tersebut dengan menyentuh pada
bagian materi yang dikehendakinya.
4. Saat pengguna memilih menu task maka konten utama akan menampilkan daftar tugas
dengan urutan teratas adalah tugas yang terbaru dipublikasikan. Pengguna dapat
mengetahui lebih detil isi tugas tersebut dengan menyentuh pada bagian tugas yang
dikehendakinya.
5. Saat pengguna memilih menu news maka konten utama akan menampilkan daftar
pengumuman dengan urutan teratas adalah pengumuman yang terbaru dipublikasikan.
6. Saat pengguna memilih menu my profile maka konten utama akan menampilkan
halaman yang berisi menu change password untuk mengganti password pengguna,
menu my post untuk mengelola materi yang dibuat oleh pengguna, menu my news
untuk mengelola pengumuman yang dibuat oleh pengguna, menu my task untuk
mengelola perintah tugas yang dibuat oleh pengguna dan melihat siapa saja yang sudah
mengirimkan tugas tersebut, menu my draft untuk mengelola materi yang belum
sempat dipublikasikan oleh pengguna.
7. Saat pengguna memilih quick button create thread maka aplikasi akan mengecek
terlebih dahulu apakah pengguna memiliki akses atau tidak untuk membuat materi
baru. Apabila aplikasi mendapati pengguna memiliki akses maka halaman akan
berpindah ke halaman form membuat materi baru. Jika tidak memiliki akses maka akan
muncul pesan yang memberi tahu pengguna bahwa pengguna tidak memiliki akses.
Apabila pengguna belum menyelesaikan materi yang sedang dibuatnya maka aplikasi
akan menyimpan langkah demi langkah yang telah dibuat pengguna sebelumnya dan
dapat melanjutkannya dengan masuk ke menu my draft pada menu my profile di
drawer layout.
8. Saat pengguna memilih quick button create task maka aplikasi akan mengecek terlebih
dahulu apakah pengguna memiliki akses atau tidak untuk membuat tugas baru. Apabila
aplikasi mendapati pengguna memiliki akses maka halaman akan berpindah ke
halaman form membuat tugas baru. Jika tidak memiliki akses maka akan muncul pesan
yang memberi tahu pengguna bahwa pengguna tidak memiliki akses.
9. Saat pengguna memilih quick button create news maka aplikasi akan mengecek
terlebih dahulu apakah pengguna memiliki akses atau tidak untuk membuat
pengumuman baru. Apabila aplikasi mendapati pengguna memiliki akses maka
halaman akan berpindah ke halaman form membuat pengumuman baru. Jika tidak
memiliki akses maka akan muncul pesan yang memberi tahu pengguna bahwa
pengguna tidak memiliki akses.
10. Saat pengguna memilih menu logout maka aplikasi akan menghapus data session
pengguna dan kemudian halaman menuju halaman login.
Mulai
Session
tersimpan?
Halaman List
Materi
Ya
Halaman Login
Tidak
Verifikasi Login Login Sukses?
YaTidak
User memilih menu
materi?
Halaman Detil
Materi
User memilih menu
Pengumuman?
Tidak
Halaman List
PengumumanYa
User memilih menu
Tugas?
Tidak
Halaman List
TugasYa
User memilih button
Create Materi
User memiliki
akses?
Ya
Form Tambah
Materi
Ya
Materi selesai
dibuat?
Halaman
Preview
Publikasikan
Materi?
Simpan di
database
tabel thread
Ya
User memilih button
Create Task
User
memiliki
akses?
Ya Form Tambah
Tugas
User memilih button
Create News
User
memiliki
akses?
Ya Form Create
PengumumanYa
User memilih menu
My Profile
Tidak
Halaman My
ProfileYa
User memilih button
My Post
Tampilkan List
My MateriYa
KelolaUser memilih My
News
Tidak
Tampilkan List
My NewsYa
User memilih My
Task
Tidak
Tampilkan List
My TaskYa
Lihat Pengirim
Tugas?
Tidak
Selesai
Ya
User memilih
salah satu
materi?
YaYa
Tidak
Tidak
Tidak
Ya
Halaman Detil
Materi
User memilih
salah satu
Tugas?
Ya
Tidak
Sign Out?
Tidak
Ya
Tidak
Tidak
Simpan di
database tabel
draftTidak
User memilih My
Draft
Tidak
Tampilkan
List My Draft
Tidak
Ya
Tampilkan List
Pengirim
Tugas
Ya
Tidak
Tidak
Tidak
Tidak
Gambar 3.3 Gaftar Alir Aplikasi Mobile Learning
3.1.2 Aplikasi Web Server
Dalam aplikasi web server terdiri dari dua bagian yaitu aplikasi administrator dan
aplikasi e-learning. Aplikasi administrator lebih fokus menangani manajemen data - data
yang akan mengalami perubahan secara berkala maupun dalam kondisi mendesak. Data -
data yang ditangani di aplikasi ini seperti data dosen, data mahasiswa, data matakuliah, data
registrasi matakuliah, dan data kegiatan belajar mengajar. Use case untuk administrator
menggunakan aplikasi web server dapat dilihat pada Gambar 3.4.
.
Gambar 3.4 Use Case Administrator
Penjelasannya adalah sebagai berikut:
1. Import Data Perkuliahan
Administrator dapat mengimpor data - data yang berhubungan dengan
perkuliahan agar memudahkan penambahan data dalam jumlah besar.
2. Manajemen Data Perkuliahan
Administrator dapat memanajemen data meliputi melihat data, memasukkan
data baru, melakukan perubahan data, atau menghapus data.
Gaftar alir aplikasi administrator dapat dilihat pada gambar 3.5.
Mulai Halaman Login Verifikasi AdminVerifikasi
berhasil?
Selesai
Menu UtamaPilih menu
Pengajar?
Pilih menu
Mahasiswa?
Tidak
Menu Manajemen
PengajarYa
Menu Manajemen
MahasiswaYa
Pilih menu
Matakuliah?
Tidak
Menu Manajemen
MahasiswaYa
Pilih menu
RMK?
Tidak
Menu Manajemen
MahasiswaYa
Ya
Sign Out?Tidak Ya
Tidak
Tidak
Gambar 3.5 Gaftar Alir Aplikasi Administrator
Penjelasannya adalah sebagai berikut:
1. Ketika aplikasi web server dibuka maka akan ditampilkan halaman sign in
dimana administrator harus melakukan autentikasi diri. Jika autentikasi berhasil
maka administrator dapat masuk ke menu aplikasi. Jika tidak tetap pada halaman
sign in dengan pesan autentikasi tidak berhasil.
2. Pada halaman menu utama terdapat empat menu utama yaitu pengajar untuk
masuk pada manajemen data pengajar, mahasiswa untuk masuk pada manajemen
data mahasiswa, matakuliah untuk masuk pada manajemen data matakuliah dan
RMK untuk masuk pada manajemen data registrasi matakuliah. Selain itu
terdapat pilihan sign out untuk keluar dari aplikasi.
3. Jika administrator memilih menu pengajar maka akan masuk pada halaman
menu manajemen pengajar dimana admin dapat melakukan aksi menambah,
melakukan perubahan, menghapus, atau melakukan pencarian data pengajar. Jika
tidak maka tetap pada halaman menu utama.
4. Jika administrator memilih menu mahasiswa maka akan masuk pada halaman
menu manajemen mahasiswa dimana administrator dapat melakukan aksi
menambah, melakukan perubahan, menghapus, atau melakukan pencarian data
mahasiswa. Jika tidak maka tetap pada halaman menu utama.
5. Jika administrator memilih menu matakuliah maka akan masuk pada halaman
menu manajemen matakuliah dimana administrator dapat melakukan aksi
menambah, melakukan perubahan, menghapus, atau melakukan pencarian data
matakuliah. Jika tidak maka tetap pada halaman menu utama.
6. Jika administrator memilih menu RMK maka akan masuk pada halaman menu
manajemen registrasi matakuliah dimana admin dapat melakukan aksi import
data registrasi matakuliah. Jika tidak maka tetap pada halaman menu utama.
7. Jika administrator memilih untuk sign out maka akan keluar dari aplikasi. Jika
tidak maka tetap pada halaman menu utama.
Aplikasi e-learning memiliki fungsi yang hampir sama dengan aplikasi mobile
learning. Dengan adanya aplikasi e-learning akan membantu memudahkan proses belajar
mengajar apabila tidak memungkinkan atau menjadi tidak praktis jika menggunakan
aplikasi mobile. Use case untuk pengguna menggunakan aplikasi e-learning dapat dilihat
pada Gambar 3.6 dan Gambar 3.7.
Gambar 3.6 Use Case Dosen Aplikasi Web Server
Penjelasannya adalah sebagai berikut:
1. Melihat Semua Materi, Pengumuman dan Tugas
Pengguna dapat melihat materi, pengumuman dan tugas di semua kategori
matakuliah.
2. Membuat dan Mengelola Materi, Surat Tugas, Pengumuman yang dibuat
Pengguna dapat membuat materi, tugas, dan pengumuman di semua kategori
matakuliah serta dapat mengubah isi maupun menghapus yang telah dibuat oleh
pengguna.
3. Mengunduh Tugas yang Dikirimkan Mahasiswa
Pengguna dapat mengunduh dokumen yang telah dikirimkan mahasiswa sebagai
tanda telah melakukan perintah tugas yang dibuat oleh pengguna.
Gambar 3.7a Use Case Mahasiswa dengan Hak Asisten Aplikasi Web Server
Penjelasannya adalah sebagai berikut:
1. Melihat Semua Materi
Pengguna dapat melihat materi di semua kategori matakuliah.
2. Mengirim Tugas berdasarkan Matakuliah yang Diambil
Pengguna dapat mengirimkan tugas apabila perintah tugas bertipe submit atau
mahasiswa diminta untuk mengumpulkan tugas tersebut.
3. Membuat dan Mengelola Materi, Surat Tugas, Pengumuman yang dibuat
Pengguna dapat membuat materi, tugas, dan pengumuman di semua kategori
matakuliah serta dapat mengubah isi maupun menghapus yang telah dibuat oleh
pengguna.
4. Mengunduh Tugas yang Dikirimkan Mahasiswa
Pengguna dapat mengunduh dokumen yang telah dikirimkan mahasiswa sebagai
tanda telah melakukan perintah tugas yang dibuat oleh pengguna.
5. Melihat Perintah Tugas dan Pengumuman berdasarkan Matakuliah yang
Diambil
Pengguna hanya dapat melihat perintah tugas dan pengumuman berdasarkan
matakuliah yang diambil oleh pengguna.
Gambar 3.7b Use Case Mahasiswa tanpa Hak Asisten Aplikasi Web Server
Penjelasannya adalah sebagai berikut:
1. Melihat Semua Materi
Pengguna dapat melihat materi di semua kategori matakuliah.
2. Melihat Perintah Tugas dan Pengumuman berdasarkan Matakuliah yang diambil
Pengguna hanya dapat melihat perintah tugas dan pengumuman berdasarkan
matakuliah yang diambil oleh pengguna.
3. Mengirim Tugas berdasarkan Matakuliah yang diambil
Pengguna dapat mengirimkan tugas apabila perintah tugas bertipe submit atau
mahasiswa diminta untuk mengumpulkan tugas tersebut.
Gaftar alir aplikasi web e-learning dapat dilihat pada gambar 3.8.
Mulai
Session
tersimpan?
Halaman List
Materi
Ya
Halaman Login
Tidak
Verifikasi Login Login Sukses?
YaTidak
User memilih menu
materi?
Halaman Detil
Materi
User memilih menu
Pengumuman?
Tidak
Halaman List
PengumumanYa
User memilih menu
Tugas?
Tidak
Halaman List
TugasYa
User memilih button
Create Materi
User memiliki
akses?
Ya
Form Tambah
Materi
Ya
Materi selesai
dibuat?
Halaman
Preview
Publikasikan
Materi?
Simpan di
database
tabel thread
Ya
User memilih button
Create Task
User
memiliki
akses?
Ya Form Tambah
Tugas
User memilih button
Create News
User
memiliki
akses?
Ya Form Create
PengumumanYa
User memilih menu
My Profile
Tidak
Halaman My
ProfileYa
User memilih button
My Post
Tampilkan List
My MateriYa
KelolaUser memilih My
News
Tidak
Tampilkan List
My NewsYa
User memilih My
Task
Tidak
Tampilkan List
My TaskYa
Lihat Pengirim
Tugas?
Tidak
Selesai
Ya
User memilih
salah satu
materi?
YaYa
Tidak
Tidak
Tidak
Ya
Halaman Detil
Materi
User memilih
salah satu
Tugas?
Ya
Tidak
Sign Out?
Tidak
Ya
Tidak
Tidak
Simpan di
database tabel
draftTidak
User memilih My
Draft
Tidak
Tampilkan
List My Draft
Tidak
Ya
Tampilkan List
Pengirim
Tugas
Ya
Unduh File
Tugas?
Tidak
Unduh FileYa
Tidak
Tidak
Tidak
Tidak
Gambar 3.8 Gaftar Alir Aplikasi Web E-learning
Penjelasan gaftar alir aplikasi e-learning sebagai berikut:
1. Ketika aplikasi mobile dibuka maka aplikasi akan mengecek apakah session
pengguna tersimpan atau tidak. Jika session pengguna tersimpan maka aplikasi
akan menuju ke halaman utama, namun jika tidak tersimpan session pengguna
maka aplikasi akan menampilkan form login dimana pengguna harus melakukan
autentikasi diri. Jika autentikasi berhasil maka session baru akan dibuat dan
aplikasi akan menuju halaman utama.
2. Pada halaman utama terdapat tiga bagian besar yaitu konten utama, drawer
layout, dan quick button. Konten utama akan menampilkan halaman
berdasarkan menu yang dipilih oleh pengguna di drawer layout. Saat pertama
kali pengguna masuk halaman utama maka menu thread yang dipilih secara
otomatis. Bagian kedua adalah drawer layout, dalam drawer layout ini terdapat
lima menu yang bisa dipilih yaitu menu thread, menu task, menu news, menu
my profile dan menu logout. Bagian ketiga adalah quick button, bagian ini
terdapat tiga button yaitu create thread, create task, create news.
3. Saat pengguna memilih menu thread maka konten utama akan menampilkan
daftar ulasan singkat materi dengan urutan teratas adalah materi yang terbaru
dipublikasikan. Pengguna dapat mengetahui lebih detil isi materi tersebut
dengan menyentuh pada bagian materi yang dikehendakinya.
4. Saat pengguna memilih menu task maka konten utama akan menampilkan daftar
tugas dengan urutan teratas adalah tugas yang terbaru dipublikasikan. Pengguna
dapat mengetahui lebih detil isi tugas tersebut dengan menyentuh pada bagian
tugas yang dikehendakinya.
5. Saat pengguna memilih menu news maka konten utama akan menampilkan
daftar pengumuman dengan urutan teratas adalah pengumuman yang terbaru
dipublikasikan.
6. Saat pengguna memilih menu my profile maka konten utama akan menampilkan
halaman yang berisi menu change password untuk mengganti password
pengguna, menu my post untuk mengelola materi yang dibuat oleh pengguna,
menu my news untuk mengelola pengumuman yang dibuat oleh pengguna, menu
my task untuk mengelola perintah tugas yang dibuat oleh pengguna dan melihat
siapa saja yang sudah mengirimkan tugas tersebut serta mengunduh file tugas
tersebut, menu my draft untuk mengelola materi yang belum sempat
dipublikasikan oleh pengguna.
7. Saat pengguna memilih quick button create thread maka aplikasi akan
mengecek terlebih dahulu apakah pengguna memiliki akses atau tidak untuk
membuat materi baru. Apabila aplikasi mendapati pengguna memiliki akses
maka halaman akan berpindah ke halaman form membuat materi baru. Jika
tidak memiliki akses maka akan muncul pesan yang memberi tahu pengguna
bahwa pengguna tidak memiliki akses. Apabila pengguna belum menyelesaikan
materi yang sedang dibuatnya maka aplikasi akan menyimpan langkah demi
langkah yang telah dibuat pengguna sebelumnya dan dapat melanjutkannya
dengan masuk ke menu my draft pada menu my profile di drawer layout.
8. Saat pengguna memilih quick button create task maka aplikasi akan mengecek
terlebih dahulu apakah pengguna memiliki akses atau tidak untuk membuat
tugas baru. Apabila aplikasi mendapati pengguna memiliki akses maka halaman
akan berpindah ke halaman form membuat tugas baru. Jika tidak memiliki akses
maka akan muncul pesan yang memberi tahu pengguna bahwa pengguna tidak
memiliki akses.
9. Saat pengguna memilih quick button create news maka aplikasi akan mengecek
terlebih dahulu apakah pengguna memiliki akses atau tidak untuk membuat
pengumuman baru. Apabila aplikasi mendapati pengguna memiliki akses maka
halaman akan berpindah ke halaman form membuat pengumuman baru. Jika
tidak memiliki akses maka akan muncul pesan yang memberi tahu pengguna
bahwa pengguna tidak memiliki akses.
10. Saat pengguna memilih menu logout maka aplikasi akan menghapus data
session pengguna dan kemudian halaman menuju halaman login.
DA
TA
QU
ER
Y
JSON
3.2. Desain Arsitektur Sistem
Sistem yang dibangun terdiri dari aplikasi mobile sebagai client untuk menampilkan
informasi seperti data produk dan aplikasi web server yang menyediakan informasi ke
client. Arsitektur dari sistem dapat dilihat pada gambar 3.9.
Gambar 3.9 Bagan Arsitektur Sistem
Penjelasan dari arsitektur adalah sebagai berikut:
1. Web Server
Aplikasi ini bertugas mengatur data pengguna, materi, pengumuman, dan lain
sebagainya dimana data tersebut disimpan dalam database server. Selain itu
aplikasi ini bertugas juga sebagai server web service untuk menerima permintaan
dari client melalui HTTP POST atau HTTP GET untuk diolah dan mengirimkan
hasilnya kembali ke client dalam format JSON.
2. Database Server
Database server bertugas sebagai media penyimpanan data pengguna, materi,
pengumuman, dan lain sebagainya.
3. Aplikasi Mobile
Aplikasi mobile adalah aplikasi client yang digunakan oleh pengguna untuk
menampilkan informasi. Data dan informasi mengenai materi, tugas,
pengumuman dan lain sebagainya didapat dari web server.
HT
TP
PO
ST
/GE
T
Internet
JS
ON
HTTP POST/GET
Komputer
Server
Database
Server Aplikasi
Mobile
3.3. Perancangan Database
Database yang digunakan pada aplikasi web server adalah MySQL. Entity
Relationship Diagram (ERD) pada database server ditunjukkan pada Gambar 3.10 dan
Enhanced Entity Relationship Diagram ditunjukkan pada Gambar 3.11.
Gambar 3.10 Entity Relationship Diagram Database Server
Gambar 3.11 Enhanced Entity Relationship Diagram Database Server
Tabel pada database yaitu tabel Administrator, User, TypeUser, Category,
Thread, ThreadContent, Draft, DraftContent, Task, TaskSubmit, News, KBM
dan RegMakul. Tabel Administrator digunakan untuk menyimpan informasi
administrator. Tabel User digunakan untuk menyimpan informasi pengguna client. Tabel
TypeUser digunakan untuk informasi macam - macam tipe pengguna client. Tabel
Category digunakan untuk menyimpan informasi matakuliah. Tabel Thread digunakan
untuk menyimpan data materi utama dan berhubungan langsung dengan tabel
ThreadContent yang menyimpan langkah - langkah dari materi itu sendiri. Tabel Draft
digunakan untuk menyimpan data materi yang belum dipublikasikan atau belum selesai
dibuat dan berhubungan langsung dengan tabel DraftContent yang menyimpan langkah
– langkah dari draft itu sendiri. Tabel Task digunakan untuk menyimpan informasi
perintah tugas, sedangkan tabel TaskSubmit digunakan untuk menyimpan informasi
submit tugas. Tabel News digunakan untuk menyimpan informasi pengumuman, tabel KBM
digunakan untuk menyimpan informasi kegiatan belajar mengajar di kelas dan tabel
RegMakul yang berisi informasi registrasi matakuliah mahasiswa. Attribute masing-masing
tabel dapat dilihat pada Tabel 3.1.
Tabel 3.1. Tabel Atribut Database Server
TABLE
NAME
ATTRIBUTE
NAME
CONTENTS TYPE FORMAT REQUIRED PK/FK FK
REFERENCE
TABLE
Administrat
or
idAdministrator Administrator
number
int(10) Yes PK
userid Administrator id varchar(45) Yes
password Password
Administrator
varchar(45) Yes
nameAdministrat
or
Nama
Administrator
varchar(45) Yes
TypeUser idTypeUser tipe user id int(10) Yes PK
nameTypeUser nama tipe user varchar(45) Yes
User idUser id pengguna int(10) Yes PK
Email email pengguna varchar(75) Yes
Password password
pengguna
varchar(45) Yes
nameUser nama pengguna varchar(45) Yes
noInduk nomor Induk varchar(45) Yes
photoUser foto pengguna varchar(45) Yes
activeUser status keaktifan enum(‘0’,’1’) Yes
TypeUser_idTyp
eUser
tipe user id int(10) Yes FK TypeUser
Tabel 3.1. Tabel Atribut Database Server (lanjutan)
TABLE
NAME
ATTRIBUTE
NAME
CONTENTS TYPE FORMAT REQUIRED PK/FK FK
REFERENCE
TABLE
Category idCategory kategori id int(10) Yes PK
kodeCategory kode kategori varchar(45) Yes
nameCategory nama kategori varchar(45) Yes
statusCategory status kategori varchar(45) Yes
ThreadCont
ent
idThreadContent konten thread id int(10) Yes PK
levelContent level konten tinyint(3) Yes
titleContent judul konten varchar(255) Yes
descContent deskripsi konten text No
imageContent gambar konten varchar(255) No
videoContent video konten varchar(255) No
fileContent file konten varchar(255) No
Thread_idThread id Thread int(10) Yes FK Thread
Tabel 3.1. Tabel Atribut Database Server (lanjutan)
TABLE
NAME
ATTRIBUTE
NAME
CONTENTS TYPE FORMAT REQUIRED PK/FK FK
REFERENCE
TABLE
Thread idThread thread id int(10) Yes PK
timeCreated waktu thread
dibuat
timestamp yyyy-mm-dd hh:mm:ss Yes
lastEdited waktu terakhir
diubah
timestamp yyyy-mm-dd hh:mm:ss No
Category_idCate
gory
id kategori int(10) Yes FK Category
User_idUser id pembuat
thread
int(10) Yes FK User
Draft idThread draft id int(10) Yes PK
timeCreated waktu draft
dibuat
timestamp yyyy-mm-dd hh:mm:ss Yes
lastEdited waktu terakhir
diubah
timestamp yyyy-mm-dd hh:mm:ss No
Category_idCate
gory
id kategori int(10) Yes FK Category
User_idUser id pembuat draft int(10) Yes FK User
Tabel 3.1. Tabel Atribut Database Server (lanjutan)
TABLE
NAME
ATTRIBUTE
NAME
CONTENTS TYPE FORMAT REQUIRED PK/FK FK
REFERENCE
TABLE
DraftConte
nt
idThreadContent konten draft id int(10) Yes PK
levelContent level konten tinyint(3) Yes
titleContent judul konten varchar(255) Yes
descContent deskripsi konten text No
imageContent gambar konten varchar(255) No
videoContent video konten varchar(255) No
fileContent file konten varchar(255) No
Thread_idThread id Thread int(10) Yes FK Draft
News idNews id berita int(10) Yes PK
contentNews deskripsi berita text Yes
titleNews judul berita varchar(255) Yes
timeNews waktu berita
dibuat
timestamp yyyy-mm-dd hh:mm:ss Yes
userNews pembuat berita int(10) Yes
categoryNews id kategori
berita
int(10) Yes FK Category
Tabel 3.1. Tabel Atribut Database Server (lanjutan)
TABLE
NAME
ATTRIBUTE
NAME
CONTENTS TYPE FORMAT REQUIRED PK/FK FK
REFERENCE
TABLE
Task idTask id tugas int(10) Yes PK
titleTask judul tugas varchar(255) Yes
contentTask konten tugas text Yes
fileTask sisipan file varchar(255) No
timeTask waktu tugas
dibuat
timestamp yyyy-mm-dd hh:mm:ss Yes
deadlineTask batas waktu
pengumpulan
timestamp yyyy-mm-dd hh:mm:ss No
submitTask tipe tugas tinyint(3) Yes
categoryTask kategori tugas int(10) Yes FK Category
userTask pembuat tugas int(10) Yes FK User
TaskSubmit idTaskSubmit id pengumpulan
tugas
int(10) Yes PK
fileTaskSubmit file tugas varchar(255) Yes
noTaskSubmit id tugas int(10) Yes FK Task
userTaskSubmit pengumpul
tugas
int(10) Yes FK User
dateTaskSubmit waktu
dikumpulkan
timestamp yyyy-mm-dd hh:mm:ss Yes
Tabel 3.1. Tabel Atribut Database Server (lanjutan)
TABLE
NAME
ATTRIBUTE
NAME
CONTENTS TYPE FORMAT REQUIRED PK/FK FK
REFERENCE
TABLE
KBM idKBM id KBM int(10) Yes PK
idCategoryKBM kategori KBM int(10) Yes FK Category
tipePengajar tipe pengajar int(10) Yes FK TypeUser
idUserKBM id pengguna int(10) Yes FK User
RegMakul idRegMakul id registrasi
matakuliah
int(10) Yes PK
categoryRegMak
ul
id kategori int(10) Yes FK Category
userRegMakul id pengguna int(10) Yes FK User
3.4. Perancangan Aplikasi Web Server
Aplikasi web server dirancang dengan menggunakan bahasa script PHP: Hypertext
Preprocessor (PHP) versi 5.4.16 dengan framework Codeigniter versi 2.2.0 yang telah
mendukung arsitektur Model-View-Controller (MVC). Arsitektur dari aplikasi web server
bisa dilihat pada Gambar 3.12.
Gambar 3.12 Arsitektur Aplikasi Web Server
Penjelasan dari arsitektur aplikasi web server adalah sebagai berikut:
CI_Controller
CI_Controller adalah class yang berfungsi sebagai controller untuk menangani
dan menjembatani model, libraries, helpers, view, dan resources lain.
PHP CODEIGNITER
CONTROLLER
CI_CONTROLLER
VIEW
HTML
MODEL
CI_MODEL
WEB SERVICE CONTROLLER
REST CONTROLLER
MO
BIL
E C
LIE
NT
AN
DR
OID
JSON
HTTP POST / GET
Update Presentation
Update Data
Get Data
DATA QUERY
DATABASE MYSQL
CI_Controller akan memanggil model, atau resources lain sesuai permintaan,
mengolah data, dan menampilkannya melalui view. Terdapat juga controller khusus
untuk menangani operasi web services ke client yaitu REST_Controller. Pada
aplikasi ini terdapat 14 buah controller yaitu admin.php untuk menangani fungsi
administrator, home.php untuk menangani fungsi manajemen data thread dan
sekaligus menjadi halaman utama pada aplikasi web server, login.php untuk
menangani fungsi halaman login, task.php untuk menangani fungsi manajemen
data tugas, news.php untuk menangani fungsi manajemen data pengumuman,
category.php untuk menangani fungsi manajemen data matakuliah,
profile.php untuk menangani fungsi manajemen data yang dimiliki pengguna,
download.php untuk menangani fungsi yang berhubungan dengan unduh
dokumen, upload.php untuk menangani fungsi yang berhubungan dengan unggah
dokumen, lecture.php untuk menangani fungsi manajemen data dosen pada
aplikasi administrator, student.php untuk menangani fungsi manajemen data
mahasiswa pada aplikasi administrator, rmk.php untuk menangani manajemen data
registrasi matakuliah, verifylogin.php untuk menangani fungsi login, dan
services.php untuk menangani fungsi web services.
CI_Model
CI_Model adalah class yang berfungsi sebagai model dimana berfungsi untuk
menangani operasi pada database, atau fungsi-fungsi pengolahan data. Terdapat tujuh
buah model yang dibuat yaitu userModel.php untuk menangani operasi query pada
database khusus data yang berhubungan dengan client user, adminModel.php untuk
menangani operasi query pada database khusus data yang berhubungan dengan
aplikasi administrator, categoryModel.php untuk menangani operasi query pada
database khusus data yang berhubungan dengan matakuliah, threadModel.php
untuk menangani operasi query pada database khusus data yang berhubungan dengan
materi, taskModel.php untuk menangani operasi query pada database khusus data
yang berhubungan dengan tugas, newsModel.php untuk menangani operasi query
pada database khusus data yang berhubungan dengan pengumuman, dan
rmkModel.php untuk menangani operasi query pada database khusus data yang
berhubungan dengan registrasi matakuliah.
View
View berfungsi untuk menangani tampilan web pada aplikasi dimana dipanggil secara
spesifik oleh controller. File view mempunyai format PHP.
3.4.1. Konfigurasi Aplikasi Web Server
Untuk melakukan konfigurasi pada aplikasi, codeigniter sudah menyediakan file-file
konfigurasi yang terletak pada berkas config. Konfigurasi yang dilakukan antara lain:
Konfigurasi Database
Untuk dapat mengakses dan melakukan operasi pada database, maka perlu
dilakukan konfigurasi database pada codeigniter. Konfigurasi database ditangani
oleh file database.php. Konfigurasi database dapat dilihat pada Kode 3.1.
Kode 3.1 Konfigurasi Database
Pada kode tersebut dapat dilihat hostname dari database adalah localhost yang
berarti database yang digunakan terletak pada mesin server lokal. Database yang
digunakan bernama mlearning, dengan username root dan tanpa password.
Tipe dari database dapat dilihat pada $db['default']['dbdriver'] yaitu
menggunakan mysql.
Konfigurasi URL
Konfigurasi URL dilakukan untuk menentukan base url dari aplikasi.
Konfigurasi URL pada codeigniter ditangani oleh file config.php.
Konfigurasinya dapat dilihat pada Kode 3.2.
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = mlearning';
$db['default']['dbdriver'] = 'mysql';
Kode 3.2 Konfigurasi URL
Konfigurasi Route
Konfigurasi route dilakukan untuk menentukan controller standar dari aplikasi
dan halaman yang diakses jika URL tidak valid. Konfigurasi route ditangani oleh
file routes.php. Konfigurasinya dapat dilihat pada Kode 3.3.
Kode 3.3 Konfigurasi Route
Pada kode tersebut dapat dilihat controller standar dari aplikasi adalah login
yang berarti ketika pertama membuka aplikasi maka akan masuk ke controller
login. Sedangkan $route['404_override'] = 'errors/error_404'
menjelaskan halaman web yang akan ditampilkan jika alamat URL tidak valid.
Konfigurasi Format Web services
Konfigurasi format web services dilakukan untuk menentukan format standar
untuk web services. Konfigurasi format web services ditangani oleh file
rest.php. Konfigurasinya dapat dilihat pada Kode 3.4.
Kode 3.4 Konfigurasi Format Web services
Pada Kode tersebut dapat dilihat format standar dari web service adalah JSON.
Selain JSON juga dapat ditentukan format standar yang lain seperti XML atau
CSV.
$config['rest_default_format'] = 'json';
$route['default_controller'] = 'login';
$route['404_override'] = 'errors/error_404';
$config['base_url'] = 'http://moodlemobile.site40.net ';
$config['index_page'] = 'index.php';
3.4.2. Autentikasi User
Ketika aplikasi web server pertama kali dibuka maka controller pertama yang
dijalankan adalah controller login dimana akan mengecek terlebih dahulu session bernama
logged in sudah aktif atau belum. Jika session belum ada maka controller login akan
menampilkan halaman sign in, namun jika session ada maka controller home akan
dipanggil. Controller verifylogin berfungsi untuk menangani autentikasi user. Proses
autentikasi user pada aplikasi dapat dilihat pada Kode 3.5.
Kode 3.5 Autentikasi User
Dari Kode 3.5 dapat dilihat bahwa aplikasi akan memanggil model user_model
untuk menjalankan fungsi pemeriksaan data admin yang tersimpan pada model tersebut
melalui fungsi $this->user_model->checkLogin().Jika fungsi tersebut
function check_database($password)
{
$session = $this->session->userdata('logged_in');
//Field validation succeeded. Validate against database
$email = $this->input->post('email');
//query the database
$result = $this->user_model->checkLogin($email, $password);
if($result)
{
$sess_array = array();
$sess_array = array(
'id' => $result->idUser,
'nama' => $result->nameUser,
'tipe' => $result->TypeUser_idTypeUser
);
$this->session->set_userdata('logged_in', $sess_array);
return TRUE;
}
else
{
$this->form_validation->set_message('check_database',
'Invalid username or password');
return false;
}}
mengembalikan nilai true maka aplikasi akan menyimpan data user pada session dan
masuk ke halaman home, tetapi jika tidak maka akan kembali ke halaman login_form
dengan pesan error. Fungsi $this->user_model->checkLogin() bertujuan
melakukan pemeriksaan data user pada database, kode nya dapat dilihat pada Kode 3.6.
Kode 3.6 checkLogin()
Dari Kode 3.6 dapat dilihat bahwa fungsi checkLogin() melakukan query ke
database dengan mencocokkan nama username dan password. Jika query memiliki data
lebih dari 0 berarti data ditemukan dan menjadi nilai kembalian pada fungsi tersebut.
3.4.3. Halaman User
Jika proses autentikasi berhasil, maka pengguna dapat memasuki halaman user.
Halaman user ini dikelola oleh controller home, controller task, controller news, controller
profile. Untuk melindungi agar semua controller tersebut hanya dapat diakses oleh user,
maka setiap controller akan melakukan pemeriksaan pada session apakah pengguna
berstatus log in atau tidak. Proses pemeriksaan tersebut dapat dilihat pada Kode 3.7.
$this->db-
>select(array('idUser','photoUser','TypeUser_idTypeUser','name
User','noInduk'));
$this->db->where('email',$username);
$this->db->where('password',$password);
$query = $this->db->get('user',1);
if($query->num_rows() > 0)
{
return $query->row();
}
else return 0;
Kode 3.7 Pemeriksaan Session
Pada Kode 3.7 dapat dijelaskan bahwa aplikasi akan menjalankan fungsi
__construct() terlebih dahulu dimana akan dilakukan pemeriksaan apakah $session
bernilai true atau tidak. Jika true maka halaman user dapat dimasuki, dan jika tidak maka
akan menampilkan pesan untuk melakukan login terlebih dahulu. Nilai $session
diperoleh dari session $this->session-> userdata('logged_in').
Pada halaman ini, pengguna dapat melihat, menambah, mengubah, menghapus, dan
mencari data materi, tugas dan berita. Sebagai contoh pengguna akan melihat data
pengumuman dan pengguna melakukan klik pada link berita maka controller news akan
dijalankan dan memanggil fungsi userNews() untuk menampilkan list berita. Ketika
pengguna memilih untuk menambahkan data baru, maka controller news akan memanggil
fungsi create()yang akan menampilkan view user_news_create. Jika pengguna
sudah memasukkan data dan melakukan validasi, maka controller news akan memanggil
fungsi verifyCreate()yang akan melakukan proses menyimpan data ke database
dengan bantuan model news_model->insertNews. Proses yang sama akan dikerjakan
untuk proses melihat dan menambah materi atau tugas.
Pada saat pengguna melakukan perubahan data semisal data tugas, maka controller
task akan memanggil fungsi edit(). Fungsi tersebut akan memanggil view
user_task_edit. Setelah pengguna mengisi data dan melakukan validasi, maka
controller task akan memanggil fungsi verifyUpdate() yang akan melakukan
perubahan data pada database dengan bantuan model task_model-> updateTask().
Proses yang sama akan dikerjakan untuk proses mengubah data materi dan berita.
function __construct()
{
parent::__construct();
date_default_timezone_set('Asia/Jakarta');
$session = $this->session->userdata('logged_in');
if(!$session)
{
redirect('login');
}
}
3.4.4. Web Services
Untuk menjalankan web service, aplikasi web server menggunakan controller khusus
bernama REST_Controller dimana bekerja dengan menerapkan prinsip RESTful web
service. Class untuk menjalankan web service dapat dilihat pada Kode 3.8
Kode 3.8 Class Service
Pada kode tersebut dapat dilihat nama class Service merupakan inheritance dari
REST_Controller melalui penamaan class Service extends REST_Controller.
Untuk menjalankan fungsi REST_Controller perlu diinisialisasi library kelas tersebut
melalui fungsi require(APPPATH.'libraries/REST_Controller.php'). Kelas
ini mempunyai fungsi update_post(). Fungsi tersebut mempunyai sufiks _post yang
berarti POST, jika dipanggil dengan metode lain maka akan menampilkan pesan error.
Fungsi thread_post() berfungsi untuk mengambil data sebuah materi. Client
akan mengirim permintaan ke web server dengan menyertakan id dari materi tersebut. Web
require(APPPATH.'libraries/REST_Controller.php');
class Service extends REST_Controller{
function thread_post()
{
$json = array();
$id = $this->input->post('idThread');
$data = $this->thread_model->getThreadContent($id);
foreach($data as $row)
{
$json['thread'][]=$row;
}
if($data)
{
$this->response($json, 200);
}
else
{
$this->response(array('error' => 'Couldn\'t find any
data!'), 404);
}
}
server akan mengambil data id materi tersebut dan menjadikan data tersebut sebagai
parameter dari fungsi model thread_model->getThreadContent($id). Data hasil
dari pengembalian dari fungsi model thread_model->getThreadContent($id)
dikirimkan ke client dalam format JSON. Untuk mengakses fungsi web service ini maka
URL-nya adalah http://moodlemobile.site40.net/services/thread. Fungsi
ini akan menghasilkan JSON yang dapat dilihat pada Kode 3.9.
Kode 3.9 JSON Thread Data
{
"thread": [
{
"idThreadContent":"50",
"levelContent":"0",
"titleContent":"Make Arduino Thermometer With
LM35",
"descContent":"Hello, everyone !!! Today I'm going
to show you how to make thermometer with Arduino and LM35
termperature sensor, builded on bread board and conected
together with jumpers (bunch of cables :D).",
"imageContent":"IMG_23_0.jpg",
"videoContent":"VID_23_0.mp4",
"fileContent":"",
"Thread_idThread":"23"
},
{
"idThreadContent":"51",
"levelContent":"1",
"titleContent":"Gathering The Parts",
"descContent":"This is the list the parts needed to
make the thermometer.\r\n\r\nIf you dont have 10k pot you can
use 50k like me !\r\n\r\n1x Arduino board\r\n1x
Breadboard\r\n1x 16x2 LCD display\r\n1x LM35 sensor \r\n1x 10k
potentiometer - for adjusting the brightness of the
display\r\n19x Jumpers - to connect everything",
"imageContent":"DRAFT_2_1.jpg",
"videoContent":"","fileContent":"FILE_20_1.mp3",
"Thread_idThread":"23"}
}
]
}
3.5. Perancangan Aplikasi Mobile
Aplikasi mobile dirancang dengan menggunakan Android SDK API 18 atau Android
4.3.
3.5.1 Konfigurasi Permission dan Feature
Untuk dapat mengakses perangkat keras dan fitur yang dimiliki oleh perangkat
mobile Android, maka perlu dikonfigurasi terlebih ijin dan akses fitur atas aplikasi.
Konfigurasi permission terletak pada AndroidManifest.xml yang dapat dilihat pada
Kode 3.10
Kode 3.10 Konfigurasi Permission Aplikasi
Konfigurasi permission aplikasi antara lain:
Android.permission.INTERNET
Mengijinkan aplikasi untuk mengakses socket network.
Android.permission.ACCESS_NETWORK_STATE
Mengijinkan aplikasi untuk mengakses informasi jaringan perangkat Android.
Android.permission.WRITE_EXTERNAL_STORAGE
Mengijinkan aplikasi untuk menuliskan data pada media penyimpan luar.
Android.permission.CAMERA
Mengijinkan aplikasi untuk mengakses kamera yang ada di perangkat Android.
3.5.2 Activity
Aplikasi mobile ditangani oleh berbagai activity, dimana activity tersebut akan
menangani aksi yang ditangani oleh pengguna, dan juga menangani User Interface. Activity
yang terdapat dalam aplikasi ini adalah sebagai berikut:
LoginActivity
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission
android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission
android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
Activity ini berfungsi sebagai autentikasi pengguna sebelum masuk ke activity utama.
Ketika Button btnLogin ditekan maka permintaan verifikasi dikirim ke web
server. Kemudian, web server mengirimkan kembali respon dari verifikasi apakah
sukses atau gagal beserta pesan yang ditampilkan melalui fungsi Toast. Jika berhasil
maka data – data pengguna yang dibutuhkan di aplikasi ini akan disimpan di kelas
MyAppHelper dan intent ke MainActivity dieksekusi.
MainActivity
MainActivity merupakan activity utama dalam aplikasi ini. Semua fitur dalam
aplikasi ini haruslah melewati activity ini terlebih dahulu. Activity ini memiliki
navigation drawer sehingga dapat dengan mudah pengguna memilih menu yang
pengguna inginkan. Menu – menu yang terdapat pada navigation drawer ini yaitu
menu Thread untuk menampilkan daftar materi pada konten utama pada activity,
menu Task untuk menampilkan daftar tugas pada konten utama pada activity, menu
News untuk menampilkan daftar pengumuman pada konten utama pada activity,
menu My Profile untuk menampilkan menu-menu yang berhubungan dengan
kepemilikan dari pengguna, dan menu Logout untuk melakukan autentikasi lagi
dengan pengguna berbeda.
Dalam activity ini juga terdapat tiga quick button yaitu button create thread yang
akan menuju CreateThreadActivity, button create task yang akan menuju
CreateTaskActivity, button create news yang akan menuju
CreateNewsActivity.
ThreadActivity
Activity ini berfungsi menampilkan isi lengkap dari materi yang dipilih oleh
pengguna di MainActivity. Ketika gambar pada activity ini ditekan maka akan
menuju FullScreenImageActivity. Terdapat tautan file yang jika ditekan maka
proses mengunduh akan dilakukan. Terdapat tautan video juga yang jika ditekan akan
menuju ViewVideoActivity.
FullScreenImageActivity
Activity ini berfungsi menampilkan sebuah gambar dalam bentuk full screen. Fitur
memperbesar dan memperkecil ukuran gambar juga disertakan dalam activity ini.
ViewVideoActivity
Activity ini berfungsi menampilkan sebuah video.
TaskDetailActivity
Activity ini berfungsi menampilkan isi lengkap dari tugas yang dipilih oleh pengguna
di MainActivity. Terdapat tautan file yang jika ditekan maka proses mengunduh
akan dilakukan.
CreateThreadActivity
Activity ini berfungsi memilih category sebagai langkah awal dalam membuat materi
baru.
IntroActivity
Activity ini berfungsi sebagai form pembuatan materi yang berisi pengisian judul,
pengisian deskripsi, dan penambahan gambar.
OverviewActivity
Activity ini berfungsi menampilkan langkah - langkah yang telah dibuat di
IntroActivity dalam bentuk gridview. Pengguna dapat memilih salah satu
langkah yang akan menuju EditStepActivity.
EditStepActivity
Activity ini berfungsi sebagai form ubah langkah materi yang telah dibuat
sebelumnya.
CreateTaskActivity
Activity ini berfungsi sebagai form pembuatan perintah tugas baru.
EditTaskActivity
Activity ini berfungsi sebagai form ubah perintah tugas yang telah dibuat sebelumnya.
CreateNewsActivity
Activity ini berfungsi sebagai form pembuatan pengumuman baru.
EditNewsActivity
Activity ini berfungsi sebagai form ubah pengumuman yang telah dibuat sebelumnya.
MateriListActivity
Activity ini berfungsi menampilkan semua materi yang dibuat oleh pengguna.
TaskListActivity
Activity ini berfungsi menampilkan semua perintah tugas yang dibuat oleh pengguna.
NewsListActivity
Activity ini berfungsi menampilkan semua pengumuman yang dibuat oleh pengguna.
3.5.3 Web Services
Untuk dapat mengakses web server dan menjalankan fungsi web server, aplikasi
mobile menggunakan API org.apache.http dan org.json. Pada proses web service, aplikasi
mobile mengirimkan permintaan ke web server melalui protokol HTTP. Kemudian di web
server fungsi akan dijalankan dan akan mengembalikan data dalam format JSON. Ada dua
tahapan kerja yang dilakukan pada proses web service aplikasi mobile yaitu:
Melakukan koneksi HTTP
Aplikasi mobile mengirimkan permintaan web server dan mendapatkan data melalui
koneksi HTTP. Proses koneksinya dapat dilihat pada Kode 3.11.
Kode 3.11 Kelas ServiceHandler
static String response = null;
public final static int GET = 1;
public final static int POST = 2;
public String makeServiceCall(String url, int method) {
return this.makeServiceCall(url, method, null);
}
public String makeServiceCall(String url, int
method,List<NameValuePair> params) {
try {
DefaultHttpClient httpClient = new
DefaultHttpClient();
HttpEntity httpEntity = null;
HttpResponse httpResponse = null;
if (method == POST) {
HttpPost httpPost = new HttpPost(url);
if (params != null) {
httpPost.setEntity(new
UrlEncodedFormEntity(params));
}
httpResponse = httpClient.execute(httpPost);
} else if (method == GET) {
if (params != null) {
String paramString =
URLEncodedUtils.format(params, "utf-8");
url += "?" + paramString;
}
HttpGet httpGet = new HttpGet(url);
httpResponse = httpClient.execute(httpGet);
}
httpEntity = httpResponse.getEntity();
response = EntityUtils.toString(httpEntity);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return response;
}
Proses yang dikerjakan:
a. Menginisialisasi DefaultHttpClient httpClient dan HttpPost
httppost = new HttpPost(url) dimana aplikasi akan melakukan
koneksi dengan HTTP POST ke variabel url. Apabila melakukan koneksi
dengan HTTP GET maka HttpGet httpGet = new HttpGet(url);
b. Jika ada parameter pada metode POST maka httpPost.setEntity(new
UrlEncodedFormEntity(params)), sedangkan pada metode GET maka
akan dilakukan penambahan pada variabel url.
c. Melakukan eksekusi httpResponse =
httpclient.execute(httppost). httpResponse berisi hasil respon dari
fungsi httppost yang dieksekusi. Kemudian httpResponse diambil entity
nya dan disimpan di httpEntity.
d. Melakukan eksekusi response =
EntityUtils.toString(httpEntity). Kode ini berarti mengubah entity
ke bentuk String dan disimpan ke dalam variabel response.
Parsing JSON
Pada tahap ini data JSON yang telah diterima dari web server akan diuraikan untuk
kemudian dipakai sesuai dengan kebutuhan di activity tersebut. Contoh proses
parsing JSON dapat dilihat pada kode 3.12.
Kode 3.12 Parsing JSON
JSONObject jsonObj = new JSONObject(jsonStr);
// Getting JSON Array node
tasks = jsonObj.getJSONArray("task");
// looping through All Contacts
for (int i = 0; i < tasks.length(); i++) {
JSONObject c = tasks.getJSONObject(i);
String id = c.getString("idTask");
String title = c.getString("titleTask");
String time = c.getString("timeTask");
String cat = c.getString("nameCategory");
String submit = c.getString("submitTask");
}
Proses yang dikerjakan:
a. Membuat sebuah JSONObject dan mengisinya berdasarkan respon dari web
server melalui fungsi JSONObject jsonObj = new
JSONObject(response);
b. Melakukan penyaringan data produk dan dimasukkan pada JSONArray
tasks melalui fungsi JSONArray
products=jsonObj.getJSONArray("task").
c. Mengambil data JSONObject c = tasks.getJSONObject(i). Proses
mengambil data ditentukan dengan format data yang akan disimpan semisal data
String dengan cara c.getString("idTask").