Pada bab ini akan dibahas mengenai analisis dan perancangan aplikasi Penjadwalan Mata Kuliah Berbasis WEB dan Android. Analisis aplikasi ditujukan untuk menggambarkan secara umum bagaimana sistem bekerja. Hal ini berguna untuk menunjang aplikasi yang nantinya akan dibuat sehingga kebutuhan sistem tersebut dapat diketahui sebelumnya. Dengan adanya analisis sistem tersebut dapat mempermudah untuk pengerjaan lebih lanjut sistem yang dibuat. Perancangan sistem berguna untuk mengintegrasikan semua proses yang terjadi dalam aplikasi yang akan dibuat. Untuk perancangan, alat yang digunakan adalah DFD (Data Flow Diagram), kemudian CDM (Conceptual Data Model) dan PDM (Phisycal Data Model) yang diperoleh dari hasil generate dari CDM. Sedangkan perancangan antarmuka digunakan sebagai jembatan antara pengguna dengan sistem aplikasi yang dibuat, sehingga pengguna dapat mengoperasikan aplikasi yang dibuat. Secara umum, sistem yang dibuat digambarkan dalam skema sebagai berikut Gambar 3.1 :
3.1 Analisis Sistem
Perancangan sistem dalam pembuatan aplikasi ini melalui beberapa tahapan diantaranya pembuatan DFD (Data Flow Diagram), kemudian CDM (Conceptual Data Model) dan PDM (Phisycal Data Model) yang diperoleh dari hasil generate dari CDM.
3.1.1 DFD (Data Flow Diagram)
DFD merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi yang dapat digunakan untuk menggambarkan analisa maupun perancangan sistem.
a. Context Diagr am
Pada Context diagram terdapat dua user yang mempunyai peran sebagai admin dan pengguna (Mahasiswa). Admin mempunyai hak penuh untuk memanajemen aplikasi ini, akan tetapi admin untuk dapat masuk ke dalam aplikasi ini harus dengan mengisikan username dan password pada form login. Pengguna (Mahasiswa) hanya dapat melihat informasi jadwal mata kuliah yang sudah di inputkan oleh admin. seperti pada Gambar 3.2.
b. DFD Level 1
Pada DFD Level 1 ini terdapat 3 sub proses yaitu: Login, manipulasi data dan menampilkan (search) data.
Pada proses ini, user (admin) harus melakukan login dengan menginputkan username dan password dengan benar agar dapat masuk
ke aplikasi untuk manipulasi data. Pada aplikasi ini admin dapat melakukan aktifitas meliputi: menambah data, merubah data dan menghapus data. Setelah itu sistem akan menampilkan data pada aplikasi berbasis Web dan Android untuk user (mahasiswa). Seperti dijelaskan pada Gambar 3.3.
c. DFD Level 2
Pada DFD Level 2 ini (Gambar 3.4) terdapat 5 buah subproses yaitu:. a. Pr oses 2.1 Pr oses Input Data
Pada proses ini, admin bisa menginputkan data-data jadwal kuliah, data-data dosen, data-data hari, data-data kelas, data-data mata kuliah, data-data periode, dan data-data ruang di mana tempat diadakan jam mata kuliah.
b. Pr oses 2.2 Pr oses Rubah Data Bar u
Pada proses ini, admin bisa merubah data jadwal kuliah, data-data dosen, data-data-data-data hari, data-data-data-data kelas, data-data-data-data mata kuliah, data-data periode, dan data-data ruang di mana tempat diadakan jam mata kuliah.
c. Pr oses 2.3 Pr oses Hapus Data
Pada proses ini, admin bisa menghapus data-data jadwal kuliah, data-data dosen, data-data hari, data-data kelas, data-data mata kuliah, data-data periode, dan data-data ruang di mana tempat diadakan jam mata kuliah.
d. Pr oses Simpan Data Bar u
Proses ini merupakan proses penyimpanan data baru yang telah dimasukkan oleh admin ke dalam database. Proses ini hanya dapat dilakukan oleh administrator.
e. Pr oses Menampilkan Data
Merupakan proses untuk menampilkan data jadwal mata kuliah yang telah tersimpan di database. Proses ini akan di tampilkan pada administrator dan juga mahasiswa.
Gambar 3.4 DFD Level 2 Pr oses Manipulasi Data
3.1.2 ERD Aplikasi J adwal Mata Kuliah
Dari analisa DFD di atas, maka diperoleh rancangan ERD yang akan dijelaskan menggunakan CDM dan PDM. Untuk lebih jelasnya akan di bahas pada bagian dibawah ini:
a. CDM (Conceptual Data Model)
Pada Gambar 3.5 di bawah ini terdapat beberapa entitas, antara lain: user, modul, dosen, mata kuliah, kelas, hari, periode, ruang, dan jadwal kuliah. CDM ini berfungsi untuk memodelkan struktur logis dari keseluruhan aplikasi data, tidak tergantung pada software atau pertimbangan model struktur data. CDM yang valid dapat dikonversi ke PDM (Physical Data Model).
Ga mbar 3.5 CDM (Conceptual Data Model).
b. PDM (Physical Data Model)
Pada Gambar 3.6 di bawah ini adalah hasil generate dari CDM yang telah dibuat sebelumnya. PDM merupakan gambaran secara detail basis data dalam bentuk fisik.
3.2 Per ancangan Interface (antar muka)
Perancangan interface adalah bagian yang penting dalam aplikasi, karena yang pertama kali dilihat ketika aplikasi dijalankan adalah tampilan antar muka (interface) aplikasi.
a. Perancangan form login untuk admin
Form login, adalah form yang digunakan untuk autentifikasi user dan
password sebelum masuk pada form utama dari program. Untuk lebih jelasnya, berikut adalah perancangan dari form login.
Gambar 3.7 Per ancangan For m Login Admin.
Tabel 3.1 Keterangan Perancangan Form Login Admin
No Komponen Keter angan
1 2 3 Text Field Text Field Button User Name Password Login
b. Perancangan form utama admin
Form utama admin merupakan induk dari semua form admin. Dalam form
tambah data, update data dan delete data. Untuk lebih jelasnya, berikut adalah perancangan dari form utama admin.
Ga mbar 3.8 Per ancangan For m Utama Admin.
Tabel 3.2 Keterangan Perancangan Form Utama Admin.
No Komponen Keter angan
1 2 3 4 5 6 7 Header Tabel Button Tabel Image Button Image Button Footer
Gambar bagian atas dari form admin
Berisikan menu toolbar
Tombol OK
Berisi list data yang sudah masuk
Untuk update data
Untuk delete data
c. Perancangan form utama mahasiswa
Form utama Mahasiswa merupakan induk dari semua form mahasiswa.
Dalam form utama mahasiswa terdapat list menu yang berfungsi untuk menentukan data yang ingin di lihat oleh mahasiswa. Untuk lebih jelasnya, berikut adalah perancangan dari form utama mahasiswa.
Gambar 3.9 Per ancangan For m Utama Mahasiswa.
Tabel 3.3 Keterangan Perancangan Form Utama Mahasiswa.
No Komponen Keter a ngan
1 2 3 4 5 Header List menu Button Tabel Footer
Gambar bagian atas dari form mahasiswa
Berisikan menu drop down tahun akademik
Tombol OK
Berisi list data
d. Perancangan form jadwal kuliah
Form jadwal kuliah, digunakan untuk melihat jadwal mata kuliah sesuai
tahun akademik yang telah di pilih oleh mahasiswa dan memilih list menu berdasarkan hari. Untuk lebih jelasnya, berikut adalah perancangan dari form jadwal kuliah.
Ga mbar 3.10 Per ancangan For m J adwal Kuliah.
Tabel 3.4 Keterangan Form Jadwal Kuliah.
No Komponen Keter a ngan
1 2 3 4 5 6 7 8 Header Image Button Button Button Button Button Button Footer
Gambar bagian atas dari form jadwal kuliah Home
Tombol hari senin Tombol hari selasa Tombol hari rabu Tombol hari kamis Tombol hari jum’at
e. Perancangan form utama Android
Form utama Android merupakan induk dari semua form Android. Dalam
form utama Android terdapat list menu yang berfungsi untuk menentukan
data yang ingin di lihat oleh mahasiswa. Untuk lebih jelasnya, berikut adalah perancangan dari form utama Android.
Gambar 3.11 Per ancangan For m Utama Andr oid.
Tabel 3.5 Keterangan Form Utama Android.
No Komponen Keter a ngan
1 2 3 4 List Menu List Menu List Menu List Menu Jadwal Terbaru Tahun Akademik Jadwal Mahasiswa Keluar
f. Perancangan form Menu Jadwal Terbaru Android
Menu Jadwal Terbaru Android merupakan form yang berfungsi untuk melihat jadwal kuliah yang aktif kemudian ditambahkan dengan 5 button yang berisi pilihan hari dan mempunyai fungsi untuk memilih jadwal mata kuliah sesuai pengelompokan hari, Untuk lebih jelasnya, berikut adalah perancangan dari Menu Jadwal Sekarang android.
Gambar 3.12 Per ancangan Menu J adwal Ter bar u Andr oid.
Tabel 3.6 Keterangan Menu Jadwal Terbaru Android.
No Komponen Keter a ngan
1 2 3 4 5 Button Button Button Button Button
Tombol hari senin
Tombol hari selasa
Tombol hari rabu
Tombol hari kamis
g. Perancangan Menu Tahun Akademik Android
Menu Tahun Akademik Android merupakan form yang berfungsi untuk melihat jadwal kuliah yang terhubung langsung ke website jadwal kuliah menggunakan menu drop down, berikut adalah perancangan dari Menu Tahun Akademik Android.
Gambar 3.13 Per ancangan Menu Tahun Akademik Andr oid.
Tabel 3.7 Keterangan Menu Tahun Akademik Android.
No Komponen Keter a ngan
1
2
Drop Down
List Data
Tahun Akademik
h. Perancangan Menu Jadwal Mahasiswa Android
Menu Jadwal Mahasiswa Android merupakan form yang berfungsi untuk melihat jadwal kuliah dengan mengisikan NPM mahasiswa, berikut adalah perancangan dari Menu Jadwal Mahasiswa Android.
Gambar 3.14 Per ancangan Menu J adwal Mahasiswa Andr oid.
Tabel 3.8 Keterangan Menu Jadwal Mahasiswa Android.
No Komponen Keter a ngan
1 2 3 Edit Text Button Web View Masukkan NPM Cari Jadwal Berdasar KRS
IMPLEMENTASI
Implementasi merupakan tahap pengembangan rancangan menjadi kode program. Pada awal bagian ini dijabarkan spesifikasi perangkat keras dan perangkat lunak dimana program diimplementasikan. Bagian utama implementasi adalah penjabaran rancangan kelas menjadi kelas yang ditulis dalam sintaks Bahasa Pemrograman PHP dan Java. Di samping itu disajikan juga tampilan interface aplikasi setelah diimplementasikan pada WEB browser dan telepon
genggam SAMSUNG GT-S5670 (Fit).
4.1 Spesifikasi Per angkat Keras dan Lunak
Dalam menerapkan rancangan yang telah dibuat, ada beberapa hal yang harus dibutuhkan. Perangkat keras dan perangkat lunak merupakan dua hal yang selalu dibutuhkan dalam mengimplementasikan rancangan yang telah ada.
4.1.1 Spesifikasi Per angkat Keras
Dalam menerapkan dari rancangan yang telah dijelaskan sebelumnya dibutuhkan beberapa perangkat keras untuk menyajikan aplikasi ini. Adapun alat-alat yang dibutuhkan adalah:
1. Handphone Berbasiskan Sistem Operasi Android
Handphone digunakan untuk menjalankan program aplikasi yang telah
dikembangkan. Adapun handphone yang digunakan adalah
• Sistem Operasi Android : 2.2 (Froyo)
• CPU : 600 MHZ Qualcomm
• Ruang Penyimpanan : 181 MB (internal) dan 4GB (microSD)
• Memori : 278 MB DDR SDRAM
• Dimensi Layar : 240 x 320 Pixel
• Input : Layar sentuh kapasitif, volume controls, accelerometer. • Konektivitas : Wi-Fi (802.11b/g), Bluetooth 2.0, USB, A-GPS,
Quad band, HSDPA/HSUPA. 2. Kabel data serial port
Fungsi dari kabel data ini adalah untuk menghubungkan antara komputer dengan handphone.
3. Satu unit PC dengan spesifikasi antara lain : • Prosesor : Core 2 Duo
• Memory : 2 GB
• Penyimpanan : 160 GB
4.1.2 Spesifikasi Per angkat Lunak
Dalam menerapkan rancangan yang telah dibuat, dibutuhkan beberapa software untuk membuat aplikasi ini yaitu:
1. Bahasa Pemprograman PHP
Untuk penggunaan bahasa pemprograman PHP bisa menggunakan PHP versi berapapun, mulai dari versi terkecil hingga di atasnya.
2. Bahasa Pemrograman Java
Dalam hal ini digunakan Java Development Kid (JDK) 1.6 dan Java Runtime Environment (JRE).
3. Sistem Operasi
Untuk penggunaan sistem operasi dapat digunakan Windows XP (32-bit) atau Windows 7 (32 atau 64 (32-bit), Mac OS X 10.4.8 atau di atasnya, dan Linux.
4. Integrated Development Environment (IDE) Eclipse 1.4.1
Untuk memudahkan dalam pengembangan aplikasi, maka digunakan IDE karena memiliki beberapa fasilitas yang diperlukan dalam pembangunan perangkat lunak. Adapun dalam pengembangan ini digunakan Eclipse 1.4.1 dikarenakan telah mendukung Android Development Tools.
5. Android Software Development Kit (Android SDK)
Android SDK menyediakan development environment dengan semua komponen yang diperlukan. Antara lain tools pengembangan,
libraries, dokumentasi, dan contoh aplikasi serta disertakan pula
emulator untuk mensimulasikan aplikasi berjalan pada perangkat.
6. Android Development Tools (ADT)
Android membuat kostum plugin untuk IDE Eclipse, sehingga dengan adanya ADT ini memberikan kemudahan dalam pengembangan aplikasi, membuat tampilan antarmuka aplikasi, menambahkan komponen yang diperlukan, men-debug aplikasi dengan menggunakan perangkat SDK Android, dan bahkan membungkus aplikasi yang telah
dikembangkan untuk didistribusikan. Adapun ADT yang digunakan adalah ADT 0.9.5.
7. AppServ
Dalam hal ini digunakan AppServ versi 2.5.9, karena pada aplikasi AppServ disediakan aplikasi WEB server yaitu apache dan aplikasi basis data yaitu MySQL.
8. Database Server
Database yang digunakan bisa menggunakan database apa saja mulai
postgree SQL, SQL server, ataupun MySQL. Dalam pembuatan
aplikasi jadwal mata kuliah ini digunakan database MySQL yang sudah terdapat pada AppServ.
4.2 Penulisan Kode Pr ogr am (codding)
Kode program adalah suatu rangkaian pernyataan atau deklarasi yang ditulis dalam bahasa pemrograman komputer yang terbaca manusia.
4.2.1 Penulisan Kode Pr ogram Fitur Admin
Berdasarkan perancangan pada tampilan informasi, terdapat fitur admin yang digunakan untuk mengatur dan membuat jadwal mata kuliah. Fitur ini berfungsi untuk menambah, edit dan delete data yang berhubungan dengan jadwal mata kuliah. Disamping itu dalam fitur admin ini juga dilengkapi dengan form login yang berfungsi untuk menjaga keamanan data dan hanya bisa di akses oleh
administrator. Adapun kode-kode program untuk membuat fitur admin adalah sebagai berikut :
a. Kode Login
Login disini akan dibuat menggunakan teknik session, yaitu suatu teknik penyimpanan variabel (mendaftarkan/ register suatu fariabel) ke server. Contoh yang sering dijumpai adalah ketika user akan membuka inbox email, tentu user harus menginputkan username dan password, apabila
ditemukan datanya di database (valid), maka akan dibuatkan session username dan password untuk mengakses inbox dan selama user berada
dalam sesi tersebut, maka user akan bebas mengakses emailnya sampai user memutuskan untuk mengakhiri sesi tersebut dengan mengklik sign
out atau logout. Untuk lebih jelasnya, ditulis pada 3 buah skrip berikut:
Skr ip for m_login.php
<?php
echo “<h2>Login Admin</h2>
<form method=POST action=cek_login.php> <table>
<tr><td>Username : </td>
<td> : <input type=text name=id_user></td></tr> <tr><td>Password : </td>
<td> : <input type=password name=password></td></tr>
<tr><td colspan=2><input type=submit value=Login></td></tr> </table> </form>”; ?> Skr ip cek_login.php <?php include "../config/koneksi.php"; $pass=md5($_POST[password]);
$login=mysql_query("SELECT * FROM user WHERE id_us
er='$_POST[username]' AND password='$pass'"); $ketemu=mysql_num_rows($login);
$r=mysql_fetch_array($login);
// Apabila username dan password ditemukan if ($ketemu > 0){
session_register("namauser"); session_register("passuser"); $_SESSION[namauser] = $r[id_user]; $_SESSION[passuser] = $r[password]; header('location:media.php?module=home'); } else{
echo "<link href=../config/adminstyle.css rel=stylesheet type=
text/css>";
echo "<center>Login gagal! username & password tidak benar
<br>";
echo "<a href=index.php><b>ULANGI LAGI</b></a></center>"; } ?> Skr ip logout.php <?php session_start(); session_destroy();
echo "<center>Anda telah sukses keluar sistem <b>[L
OGOUT]<b>";
echo "<a href=index.php><br><b>KEMBALI KE LOGIN
</b></a></center>"; ?>
Adapun hasil implementasinya sebagai berikut:
b. Kode Input Jadwal Kuliah
Pada bagian input jadwal kuliah di sini akan di buat proses input data dengan menerapkan bentuk combobox yang menampilkan data yang diperlukan dalam pembuatan jadwal mata kuliah. Untuk lebih jelasnya, ditulis pada 2 buah skrip berikut:
Skr ip for m_jadwal_kuliah.php <?php
echo "<h2>Tambah Jadwal Kuliah</h2>
<form method=POST action=input_jadwal_kuliah.php> <table>
<tr><td>Hari</td>
<td> : <select name='hari'><option value=0 selected>- Pilih Hari -</option>";
$tampil=mysql_query("SELECT * FROM hari ORDER BY id_ha ri"); while($r=mysql_fetch_array($tampil)){ echo "<option value =$r[id_hari]>$r[hr]</option>"; } echo "</select></td></tr>
<tr><td>Mata Kuliah</td> <td> : <select name=
'matakuliah'>
<option value=0 selected> Pilih Mata Kuliah -</option>";
$tampil=mysql_query("SELECT * FROM matakuliah ORDER BY mata_kuliah"); while($r=mysql_fetch_array($tampil)){ echo "<option value =$r[id_matakuliah]>$r[mata_kuliah]</option>"; } echo "</select></td></tr> <tr><td>Kelas</td> <td> : <select name= 'kelas'>
<option value=0 selected> Pilih Kelas -</option>";
$tampil=mysql_query("SELECT * FROM kelas ORDER BY id_kelas"); while($r=mysql_fetch_array($tampil)){ echo "<option value =$r[id_kelas]>$r[kls]</option>"; } echo "</select></td></tr> <tr><td>Ruang</td> <td> : <select name= 'ruang'>
<option value=0 selected> Pilih Ruang -</option>";
BY ruangan"); while($r=mysql_fetch_array($tampil)){ echo "<option value =$r[id_ruang]>$r[ruangan]</option>"; } echo "</select></td></tr>
<tr><td>Nama Dosen</td> <td> : <select name=
'dosen'>
<option value=0 selected> Pilih Dosen -</option>";
$tampil=mysql_query("SELECT * FROM dosen ORDER BY nama_dosen"); while($r=mysql_fetch_array($tampil)){ echo "<option value =$r[id_dosen]>$r[nama_dosen]</option>"; } echo "</select></td></tr> <tr><td>Waktu</td> <td> : <input type=
text name='waktu' size='8' maxlength='8'><b> cth. 01:00
:00</b></td></tr>
<tr><td>Tahun Akademik</td><td> : <select name=
'periode'>
<option value=0 selected>- Pilih Tahun Akademik -</op
tion>";
$tampil=mysql_query("SELECT * FROM periode ORDER BY tahun_ajaran"); while($r=mysql_fetch_array($tampil)){ echo "<option value =$r[id_periode]>$r[tahun_ajaran]</option>"; } echo "</select></td></tr>
<tr><td colspan=2><input type=submit value=Simpan> <input type=button value=Batal oncli ck=self.history.back()></td></tr> </table></form>"; ?> Skr ip input_jadwal_kuliah.php <?php include "../config/koneksi.php";
mysql_query("INSERT INTO jadwal_kuliah(id_hari,
id_matakuliah, id_kelas, id_ruang, id_dosen, waktu, id_periode) VALUES('$_POST[hari]', '$_POST[matakuliah]', '$_POST[kelas]', '$_POST[ruang]', '$_POST[dosen]', '$_POST[waktu]', '$_POST[periode]')"); header('location:tampil_jadwal_kuliah.php); ?>
Adapun hasil implementasi form jadwal mata kuliah adalah sebagai berikut:
Gambar 4.2 Hasil Skr ip For m J adwal Kuliah
c. Kode Tampil Jadwal Kuliah
Pada bagian tampil jadwal kuliah ini akan dibuat bentuk tabel yang berisi semua jadwal mata kuliah. Untuk lebih jelasnya, ditulis pada sebuah skrip berikut:
Skr ip tampil_jadwal_kuliah.php
<?php
echo "<h2>Jadwal Kuliah</h2>
<form method=POST action=form_jadwal_kuliah.php <input type=submit value='Tambah Jadwal Kuliah'> </form> <table> <tr><th>no</th><th>Hari</th><th>Mata Kuliah</th><th>Kelas</th><th>Ruang</th><th>Waktu</th><th>Dos en</th><th>Akademik</th><th>action</th></tr>"; Include “../config/koneksi.php”; $tamp
il=mysql_query("SELECT * FROM v_mata_kuliah ORDER BY id_ha
$no=1 ; while ($r=mysql_fetch_array($tampil)){ echo "<tr><td>$no</td> <td>$r[hr]</td> <td align=center>$r[mata_kuliah]</td> <td align=center>$r[kls]</td> <td align=center>$r[ruangan]</td> <td>$r[waktu]</td> <td>$r[nama_dosen]</td> <td>$r[tahun_ajaran]</td> <td align=center><a href= ?module=jadwal_kuliah&act=editjadwal&id=$r[id_jadwal_ku liah]><img src=./images/edit.jpg></a> | <a href=./action.php?module=jadwal_kuliah&act=hapus&id=$r[id_ja dwal_kuliah] onClick=\"return confirm('Apakah anda benar-benar akan menghapus data ini?')\"><img src=. /images/hapus.jpg></a> </td></tr>"; $no++; } echo "</table>"; ?>
Adapun hasil implementasinya sebagai berikut: