DAFTAR ISI ABSTRACT... i ABSTRAK... ii KATA PENGANTAR... iii DAFTAR ISI... v DAFTAR GAMBAR... viii DAFTAR TABEL... xi DAFTAR SIMBOL... xii BAB I... I-1 PENDAHULUAN... I-1 1.1 Latar Belakang... I-1 1.2 Rumusan Masalah... I-2 1.3 Tujuan Penelitian... I-2 1.4 Batasan Masalah... I-3 1.5 Metodologi Penelitian... I-3 1.6 Sistematika Penulisan... I-5 BAB II... II-1 LANDASAN TEORI... II-1 2.1 Layanan Informasi... II-1 2.1.1 Tujuan... II-1 2.2 Mobile Website... II-1 2.2.1 Keuntungan dari Mobile Website... II-2 2.2.2 Keterbatasan dari Mobile Website... II-3 2.3 Multi Platform... II-4 2.3.1 Multi Platform Mobile Website... II-5 2.3.1.1 Device Detection... II-5 2.3.1.2 Rendering System... II-7 2.4 Perancangan Sistem dengan UML (Unified Modeling Languange)... II-13 2.4.1 Use Case Diagram... II-13 2.4.2 Class Diagram... II-14 2.4.3 Statechart Diagram... II-15 v
2.4.4 Activity Diagram... II-15 2.4.5 Sequence Diagram... II-16 2.4.6 Collaboration Diagram... II-17 2.5 Implementasi... II-18 2.5.1 PHP... II-18 2.5.2 CodeIgniter Framework... II-20 2.5.3 MySQL... II-21 BAB III... III-1 ANALISIS & PERANCANGAN SISTEM... III-1 3.1 Analisis Sistem... III-1 3.1.1 Mobile Website... III-1 3.1.2 Multi Platform Mobile Website... III-2 3.2 Hasil Analisis Kebutuhan Sistem... III-2 3.3 Deskripsi Sistem... III-3 3.4 Perancangan Sistem... III-3 3.5 Use Case Diagram... III-3 3.6 Deskripsi Use Case... III-4 3.7 Activity Diagram... III-13 3.8 Sequence Diagram... III-18 3.9 Statechart Diagram... III-24 3.9 Class Diagram... III-25 3.11 Perancangan Database... III-26 3.12 Perancangan Antarmuka... III-31 3.12.1 Rancangan Antarmuka Layanan Informasi Perkuliahan Berbasis Multi Platform Mobile Website... III-31 BAB IV... IV-1 IMPLEMENTASI SISTEM... IV-1 4.1 Lingkungan Implementasi... IV-1 4.1.1 Lingkungan Perangkat Keras (Hardware)... IV-1 4.1.2 Lingkungan Perangkat Lunak (Software)... IV-1 4.2 Implementasi Device Detection... IV-2 4.3 Implementasi Antarmuka... IV-3 vi
4.3.1 Implementasi Antarmuka Website Layanan Informasi Perkuliahan... IV-3 4.3.2 Implementasi Antarmuka Website Layanan Informasi Perkuliahan Platform Mobile Website... IV-11 4.3.2.1 Implementasi Antarmuka Website Layanan Informasi Perkuliahan Platform Mobile Website Tampilan Basic... IV-11 4.3.2.2 Implementasi Antarmuka Website Layanan Informasi Perkuliahan Platform Mobile Website Tampilan Standard... IV-20 4.4 Pengujian (Testing)... IV-32 BAB V... V-1 PENUTUP... V-1 5.1 Kesimpulan... V-1 5.2 Saran... V-2 DAFTAR PUSTAKA LAMPIRAN vii
DAFTAR GAMBAR Gambar 1.1 Fase-fase dalam Waterfall Model menurut Sommerville... I-4 Gambar 2.1 Ilustrasi Device Detection... II-6 Gambar 2.2 Basic Rendering... II-7 Gambar 2.3 Standard Rendering... II-8 Gambar 2.4 Advanced Rendering... II-9 Gambar 2.5 Contoh Use Case Diagram... II-13 Gambar 2.6 Contoh Class Diagram... II-14 Gambar 2.7 Contoh Statechart Diagram... II-15 Gambar 2.8 Contoh Activity Diagram... II-16 Gambar 2.9 Contoh Sequence Diagram... II-17 Gambar 2.10 Tampilan Perancangan Menu Login... II-18 Gambar 3.1 Use Case Diagram... III-4 Gambar 3.2 Activity Diagram untuk Akses Website... III-13 Gambar 3.3 Activity Diagram untuk Login... III-14 Gambar 3.4 Activity Diagram untuk Pengaturan Konten Web... III-14 Gambar 3.5 Activity Diagram untuk Jadwal Perkuliahan... III-15 Gambar 3.6 Activity Diagram untuk Info Perubahan Jadwal... III-15 Gambar 3.7 Activity Diagram untuk Jadwal Ujian... III-16 Gambar 3.8 Activity Diagram untuk Nilai Akademik... III-16 Gambar 3.9 Activity Diagram untuk Direktori Pengajar... III-17 Gambar 3.10 Activity Diagram untuk Jadwal Mengajar... III-17 Gambar 3.11 Activity Diagram untuk Perubahan Jadwal Mengajar... III-18 Gambar 3.12 Sequence Diagram untuk Akses Website... III-19 Gambar 3.13 Sequence Diagram untuk Login... III-19 Gambar 3.14 Sequence Diagram untuk Pengaturan Konten Web... III-20 Gambar 3.15 Sequence Diagram untuk Jadwal Perkuliahan... III-20 Gambar 3.16 Sequence Diagram untuk Info Perubahan Jadwal... III-21 Gambar 3.17 Sequence Diagram untuk Jadwal Ujian... III-21 Gambar 3.18 Sequence Diagram untuk Nilai Akademik... III-22 Gambar 3.19 Sequence Diagram untuk Direktori Pengajar... III-22 viii
Gambar 3.20 Sequence Diagram untuk Jadwal Mengajar... III-23 Gambar 3.21 Sequence Diagram untuk Perubahan Jadwal Mengajar... III-23 Gambar 3.22 Statechart Diagram... III-24 Gambar 3.23 Class Diagram... III-25 Gambar 3.24 Relasi Database... III-24 Gambar 3.25 Desain Tampilan Halaman Depan Layanan Informasi Perkuliahan... III-31 Gambar 3.26 Desain Tampilan Login Form... III-32 Gambar 3.27 Desain Tampilan Menu Utama User Mahasiswa... III-33 Gambar 3.28 Desain Tampilan Jadwal Perkuliahan Mahasiswa... III-34 Gambar 3.29 Desain Tampilan Info Perubahan Jadwal Kuliah... III-35 Gambar 3.30 Desain Tampilan Jadwal UTS/UAS Mahasiswa... III-36 Gambar 3.31 Desain Tampilan Nilai Akademik Mahasiswa... III-37 Gambar 3.32 Desain Tampilan Direktori Pengajar... III-38 Gambar 3.33 Desain Tampilan Menu Utama User Dosen... III-39 Gambar 3.34 Desain Tampilan Jadwal Mengajar Dosen... III-40 Gambar 3.35 Desain Tampilan Perubahan Jadwal Dosen... III-41 Gambar 4.1 Tampilan Halaman Depan Website Layanan Informasi Akademik Diakses dari PC... IV-3 Gambar 4.2 Tampilan Menu Utama Website Layanan Informasi Akademik Hak Akses Administrator Diakses dari PC... IV-4 Gambar 4.3 Tampilan Menu Direktori Mahasiswa... IV-5 Gambar 4.4 Tampilan Menu Direktori Dosen... IV-6 Gambar 4.5 Tampilan Menu Data Jadwal Kuliah Mahasiswa... IV-7 Gambar 4.6 Tampilan Menu Data Jadwal Ujian Mahasiswa... IV-8 Gambar 4.7 Tampilan Menu Data Jadwal Mengajar Dosen... IV-9 Gambar 4.8 Tampilan Menu Data Nilai Akademik... IV-10 Gambar 4.9 Tampilan Basic Halaman Depan Format Mobile Web... IV-11 Gambar 4.10 Tampilan Basic Login Form Format Mobile Web... IV-12 Gambar 4.11 Tampilan Basic Menu Utama User Mahasiswa... IV-13 Gambar 4.12 Tampilan Basic Jadwal Perkuliahan Mahasiswa... IV-14 Gambar 4.13 Tampilan Basic Informasi Perubahan Jadwal Kuliah... IV-15 ix
Gambar 4.14 Tampilan Basic Jadwal ujian Mahasiswa... IV-16 Gambar 4.15 Tampilan Basic Nilai Akademik... IV-17 Gambar 4.16 Tampilan Basic Direktori Pengajar... IV-28 Gambar 4.17 Tampilan Basic Detail Direktori Pengajar... IV-19 Gambar 4.18 Tampilan Standard Halaman Depan Format Mobile Web... IV-20 Gambar 4.19 Tampilan Standard Login Form Format Mobile Web... IV-21 Gambar 4.20 Tampilan Standard Menu Utama User Mahasiswa... IV-22 Gambar 4.21 Tampilan Standard Jadwal Perkuliahan Mahasiswa... IV-23 Gambar 4.22 Tampilan Standard Informasi Perubahan Jadwal Kuliah... IV-24 Gambar 4.23 Tampilan Standard Jadwal ujian Mahasiswa... IV-25 Gambar 4.24 Tampilan Standard Nilai Akademik... IV-26 Gambar 4.25 Tampilan Standard Direktori Pengajar... IV-27 Gambar 4.26 Tampilan Standard Detail Direktori Pengajar... IV-28 Gambar 4.27 Tampilan Standard Menu Utama Dosen... IV-29 Gambar 4.28 Tampilan Standard Jadwal Mengajar Dosen... IV-30 Gambar 4.29 Tampilan Standard Perubahan Jadwal Mengajar Dosen... IV-31 x
DAFTAR TABEL Tabel 3.1 Use case Akses Website... III-5 Tabel 3.2 Use case Login... III-6 Tabel 3.3 Use case Pengaturan Konten Web... III-7 Tabel 3.4 Use case Jadwal Perkuliahan... III-7 Tabel 3.5 Use case Info Perubahan Jadwal... III-8 Tabel 3.6 Use case Jadwal Ujian... III-9 Tabel 3.7 Use case Nilai Akademik... III-10 Tabel 3.8 Use case Direktori Pengajar... III-10 Tabel 3.9 Use case Jadwal Mengajar... III-11 Tabel 3.10 Use case Perubahan Jadwal Mengajar... III-12 Tabel 3.11 Tabel mahasiswa... III-27 Tabel 3.12 Tabel jadwal_kuliah... III-27 Tabel 3.13 Tabel jadwal_ujian... III-28 Tabel 3.14 Tabel nilai... III-28 Tabel 3.15 Tabel dosen... III-29 Tabel 3.16 Tabel jadwal_mengajar... III-29 Tabel 3.17 Tabel perubahan_jadwal... III-30 Tabel 4.1 Penjelasan Pengujian Layanan Informasi Perkuliahan dengan Multi Platform Mobile Website... IV-32 xi
DAFTAR SIMBOL SIMBOL NAMA KETERANGAN Aktor Aktor menggambarkan segala pengguna aplikasi (user) Use Case Class Use Case menjelaskan urutan kegiatan yang dilakukan aktor dan sistem untuk mencapai suati tujuan tertentu. Class digunakan untuk mengimplementasikan interface. Interface Interface merupakan kumpulan operasi tanpa implementasi dari suatu class. Interaction Interaction digunakan untuk menunjukkan baik aliran pesan atau informasi antar objek amaupun hubungan antar objek. Note Note digunakan untuk memberikan keterangan atau komentar tambahan dari suatu elemen sehingga bisa langsung terlampir dalam model. Dependency Dependency merupakan relasi yang menunjukkan bahwa perubahan pada salah satu elemen memberi pengaruh pada elemen lain. xii
SIMBOL NAMA KETERANGAN Association Generalization Realization Branching/Diamond Initial State Final State Activity State Association menggambarkan navigasi antar class. Generalization menunjukkan hubungan antar elemen yang lebih umum ke elemen yang lebih spesifik. Realization menunjukkan hubungan bahwa elemen yang ada di bagian tanpa panah akan merealisasikan apa yang dinyatan oleh elemen yang ada di bagian dengan panah. Branching/Diamond merepresentasikan keputusan bercabang dengan output beberapa jalur. Hasil dari keputusan harus ditandai dengan kondisi. Initial State digambarkan dengan lingkaran penuh diikuti dengan tanda panah, merepresentasikan keadaan awal. Final State digambarkan dengan lingkaran penuh yang dibungkus dengan lingaran. Merepresentasikan kondisi akhir dari suatu keadaan. Activity merepresentasikan tindakan dari suatu objek yang tidak bisa terputus. State merepresentasikan sutuasi selama masa aktif suatu objek. xiii