BAB III METODE PENELITIAN
3.1
Tempat dan Waktu Penelitian Penelitian ini mengambil tempat di Universitas Muhammadiyah
Yogyakarta yang berlokasi di Jl. Lingkar Selatan, Kasihan, Bantul, Daerah Istimewa Yogyakarta. Adapun penelitian ini dilaksanakan mulai bulan Juni 2016 sampai dengan bulan Agustus 2016.
3.2
Alat dan Bahan Dalam penelitian ini dibutuhkan beberapa alat dan bahan sebagai
penunjang keberhasilan perancangan dan implementasi website. 3.2.1
Hardware Untuk membangun website Perizinan Perkuliahan Mahasiswa TI UMY
yang baru pada penilitian ini dibutuhkan beberapa hardware, yaitu: 1. Personal Computer (PC)/Laptop
32/64 bit architecture processor
2 GB Random Access Memmory (RAM)
Sistem Operasi windows XP/7/8
3.2.2
Software Selain perangkat keras (hardware), dibutuhkan juga perangkat lunak
(software) yang digunakan untuk mendukung website Perizinan Perkuliahan Mahasiswa TI UMY, yaitu: 1. XAMPP 2. PhpMyAdmin 3. MySQL
19
3.3
Alur Penelitian Dalam penelitian ini, metode yang digunakan untuk membangun website
Perizinan Perkuliahan Mahasiswa TI UMY adalah metode Waterfall. Metode Waterfall sering juga disebut model sekuensial linier (sequential linier). Model ini menyediakan pendekatan alur hidup perangkat lunak secara sekuensial atau urut yang dimulai dari beberapa tahapan, yaitu: analysis, design, code & testing, implementation dan maintenance.
Gambar 3.1 Langkah Penelitian dengan Metode Waterfall 3.3.1
Analysis Tahap pertama adalah proses pencarian kebutuhan diintensifkan dan
difokuskan pada software. Untuk mengetahui sifat dari program yang akan dibuat, maka para software engineer harus mengerti tentang domain informasi dari software, misalnya fungsi yang dibutuhkan, user interface, dsb. 3.3.2
Design Desain merupakan persiapan rancang bangun implementasi yang
menggambarkan bagaimana suatu sistem dibentuk yang berupa penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah kedalam satu kesatuan yang utuh dan berfungsi, menyangkut di dalamnya konfigurasi komponen perangkat lunak dan perangkat keras dari suatu sistem. 3.3.3
Code & Testing Menerjemahkan hasil proses perancangan menjadi sebuah bentuk program
komputer yang dimengerti oleh mesin komputer. Kemudian tahap testing atau uji coba software merupakan elemen yang kritis dari SQA (Software Quality
20
Assurance) dan mempresentasikan tinjauan ulang yang menyeluruh terhadap spesifikasi, desain dan pengkodean. Uji coba mempresentasikan kesalahan yang terjadi pada pengembangan
software. Selama definisi
awal
dan fase
pembangunan, pengembangan berusaha untuk membangun software dari konsep yang abstrak sampai dengan implementasi yang memungkinkan. 3.3.4
Implementation Fase implementasi adalah proses pembangunan dan pengujian sistem,
instalasi sistem, dan rencana dukungan sistem. 3.3.5
Maintenance Pemeliharaan (maintenance) suatu software diperlukan, termasuk di
dalamnya adalah pengembangan, karena software yang dibuat tidak selamanya hanya seperti itu. Ketika dijalankan mungkin saja masih ada error kecil yang tidak ditemukan sebelumnya, atau ada penambahan fitur-fitur yang belum ada pada software tersebut. Pengembangan diperlukan ketika adanya perubahan dari eksternal perusahaan seperti ketika ada pergantian sistem operasi, atau perangkat lainnya.
3.4
Analisis Proses Perizinan Proses perizinan yang sedang berjalan dapat dilihat pada Gambar 3.2.
Gambar 3.2 Rancangan Proses Perizinan
21
Penjelasan tentang Gambar 3.2 adalah sebagai berikut: 1.
Pertama, seorang mahasiswa mengakses website Perizinan Perkuliahan Mahasiswa TI UMY.
2.
Setelah mengakses web, mahasiswa mengisi form perizinan saat ingin melakukan perizinan perkuliahan.
3.
Form perizinan perkuliahan yang sudah diisi mahasiswa akan di proses.
4.
Terakhir, admin menerima perizinan perkuliahan mahasiswa yang sudah dilakukan mahasiswa.
3.5
Analisis Kebutuhan Sistem Berdasarkan Gambar 3.2 dapat disimpulkan bahwa kebutuhan untuk sistem
dalam perizinan perkuliahan mahasiswa meliputi: 1. Sistem website perizinan perkuliahan mahasiswa dibagian sisi admin: Data mahasiswa, data matakuliah dan data izin mahasiswa diperlukan oleh admin dalam melakukan pengelolaan data perizinan perkuliahan mahasiswa. 2. Sistem website perizinan perkuliahan mahasiswa dibagian sisi mahasiswa: Data profil, data matakuliah, tanggal dan data barang diperlukan untuk melakukan perizinan. 3. Laporan: Laporan data mahasiswa dan laporan izin perkuliahan mahasiswa. Kebutuhan fungsional sistem yang diperlukan yaitu fungsi yang harus ada dalam sistem yang dikembangkan. Fungsi-fungsi itu antara lain: 1. Sistem dapat digunakan untuk proses pengolahan data perizinan perkuliahan mahasiswa TI UMY. 2. Fasilitas login bagi admin dan mahasiswa agar dapat mengakses sistem dari website. 3. Mahasiswa menggunakan sistem untuk melakukan pengubahan profil data pribadi, melakukan perizinan perkuliahan, dan melihat laporan data perizinan perkuliahan.
22
3.6
Analisis Kebutuhan Perangkat Lunak
3.6.1
Kebutuhan Proses Adapun kebutuhan proses dalam mengembangkan website yaitu:
1. Proses perizinan perkuliahan mahasiswa. 2. Proses pengelolaan data perizinan perkuliahan mahasiswa. 3. Proses laporan perizinan perkuliahan mahasiswa. 3.6.2
Kebutuhan Input Kebutuhan input yang diperlukan dalam website yaitu data perizinan
perkuliahan mahasiswa yang berisi data matakuliah, alasan izin, tanggal, dan surat keterangan izin, 3.6.3
Kebutuhan Output Keluaran yang diharapkan dari website yaitu berupa laporan data perizinan
perkuliahan mahasiswa, sehingga diketahui mahasiswa yang melakukan perizinan perkuliahan.
3.7
Rancangan Perangkat Lunak
3.7.1
Rancangan Proses Metode perancangan yang digunakan dalam website adalah Unified
Markup Languange (UML). Seperti yang sudah dijelaskan sebelumnya, model UML yang dipakai dalam pengembangan aplikasi yaitu model Use Case Diagram, Activity Diagram, Class Diagram, dan ER Diagram.
23
Use Case Diagram CREATE DATA HAHASISWA
EDIT DATA HAHASISWA
<
>
<>
LOGIN ADMIN Admin
SAVE DATA HAHASISWA
<>
<>
VIEW DATA HAHASISWA
<>
<>
<>
EDIT PROFIL <>
CREATE ABSENCE DATA
<>
LOGIN MAHASISWA
<>
User
VIEW ABSENCE RECORD
Gambar 3.3 Use Case Diagram Website Penjelasan tentang Gambar 3.3 adalah sebagai berikut: 1. Terdapat 2 aktor pada use case diagramwebsite yakni admin Website Perizinan Perkuliahan Mahasiswa TI UMY, dan user yaitu mahasiswa TI UMY. 2. Admin website berhubungan langsung pada Update Data Master seperti data mahasiswa dan data perizinan perkuliahan mahasiswa sehingga dapat melakukan pengelolaan data. 3. Admin website, bisa menambahkan, mengedit dan menghapus data mahasiswa, melihat laporan perizinan perkuliahan mahasiswa secara keseluruhan maupun berdasarkan tanggal, nim, dan matakuliah. Admin juga dapat menyimpan laporan perizinan perkuliahan mahasiswa. 4. Untuk mahasiswa, bisa melakukan edit profil pribadi, melakukan izin perkuliahan, dan melihat laporan perizinan milik pribadi. Mahasiswa tidak dapat melakukan perizinan untuk orang lain yang bukan haknya.
24
Mahasiswa yang dapat login adalah mahasiswa yang telah didaftarkan oleh admin Website Perizinan Perkuliahan Mahasiswa TI UMY. Activity Diagram Berdasarkan usecase yang telah dibuat sebelumnya maka dapat diperoleh activity diagram berdasarakan aktor yang terlibat dalam usecase diagram. Activity diagram dalam website dibagi menjadi dua bagian yaitu activity diagram perizinan dari mahasiswa dan activity diagram laporan perizinan mahasiswa. 1. Activity Diagram Perizinan dari mahasiswa Gambaran Activity Diagram Perizinan dari mahasiswa yang digunakan dalam website Peizinan Perkuliahan Mahasiswa TI UMY dapat dilihat pada Gambar 3.4. Activity Diagram Perizinan Dari Mahasiswa Mahasiswa
Admin
Login
Mengisi form perizinan
Proses perizinan
Phase
Perizinan diterima
Gambar 3.4 Activity Diagram Perizinan Mahasiswa Penjelasan tentang Gambar 3.4 adalah sebagai berikut: 1. Terdapat alur dari kegiatan pengunggahan data oleh Admin/Mahasiswa yaitu dimulai dari melakukan login terlebih dahulu.
25
2. Setelah login mahasiswa dapat melakukan perizinan perkuliahan dengan cara mengisi form perizinan. 3. Setelah mahasiswa melakukan perizinan, admin akan memproses perizinan mahasiswa. 4. Kemudian perizinan di proses dan diterima oleh admin. Activity Diagram Laporan Perizinan Mahasiswa Gambaran Activity Diagram Laporan Perizinan Mahasiswa yang digunakan dalam website Perizinan Perkuliahan Mahasiswa TI UMY dapat dilihat pada Gambar 3.5. Activity Diagram Laporan Perizinan Mahasiswa Mahasiswa
Admin
Login
Membuat perizinan
Memasukkan data berdasarkan tgl, nim, matakuliah
Phase
Cetak Laporan
Gambar 3.5 Activity Diagram Laporan Perizinan Mahasiswa Penjelasan tentang Gambar 3.5 adalah sebagai berikut: 1. Terdapat alur kegiatan Laporan Perizinan Mahasiswa, yaitu dimulai dari admin login. 2. Mahasiswa membuat perizinan.
26
3. Admin memasukkan data berdasarkan tanggal, nim, matakuliah untuk melihat laporan perizinan perkuliahan mahasiswa. 4. Admin mencetak laporan. Class Diagram Gambaran Class Diagram yang digunakan dalam website dapat dilihat pada Gambar 3.6. Class Diagram
mahasiswa Mata Kuliah
+ NIM : String + Nama : String + TTL : String + Alamat : String + No Hp : String + Email : String + id_user : int
Perizinan
+ view_Mahasiswar() : void + update_Mahasiswa() : void + add_Mahasiswa() : void + delete_Mahasiwa() : void 1 1
+ NIM : String + nama : String + kode_matakuliah : int + idsemester : int + tanggal : date + alasan : String + file : String
+ add_izin() : void + upload_file() : void + Lihat_file() : void + lihat_data_izin() : void
+ Kode_matakuliah : int + Mata kuliah : String + idsemester : int + jumlahsks : int + jumlahsesi : int + batasizin : String
+ view_Matakuliah() : void + update_Matakuliah() : void + delete_Matakuliah() : void * 1 Semester
User
+ idsemester : int + semester : String
+ level : int + username : String + password : String
+ view_semester() : void
+ logout() : void + login() : void
Association Aggregation Compotion Dependency
Gambar 3.6 Class Diagram Website Berikut penjelasan tentang Gambar 3.6: 1. Semua kelas pada diagram digunakan untuk inisilisasi ke dalam table model dan basis data website.
27
2. Kelas perizinan memiliki agregasi dengan kelas mahasiswa dan kelas matakuliah, artinya kelas perizinan memiliki ketergantungan dengan kedua kelas tersebut yaitu idsemester dan kode_matakuliah. 3. Kelas mahasiswa memiliki relasi asosiasi dengan indikator satu dan satu yang artinya satu mahasiswa hanya memilik satu user. 4. Kelas matakuliah memiliki relasi asosiasi dengan indikator satu dan banyak yang artinya semester memiliki satu atau lebih variabel matakuliah. ER Diagram Untuk pengembangan aplikasi pemodelan basis data yang digunakan adalah ER Diagram. ER Diagram merupakan diagram yang digunakan untuk merancang basis data dan memperlihatkan relasi antar entitas atau objek dengan atributnya. Tujuan ER Diagram dalam pengembangan website adalah dapat memberikan gambaran umum tentang sistem yang dikembangkan sehingga memudahkan dalam merancang basis data. Gambaran ER Diagram yang digunakan dalam website dapat dilihat pada Gambar 3.7. TTL NAMA NIM
ID_USER
ID 1
USERNAME
1
MAHASISWA
Memiliki
ALAMAT
USER PASS
1 LEVEL
NO.HP
IDSEMESTER EMAIL
SEMESTER ID_USER
1
SEMESTER
1
M PERIZINAN
Memiliki
IDSEMESTER
ID_MAHASISWA FILE ID_IZIN
ALASAN
KODE_MATKUL
M MATAKULIAH
KODE_MATKUL
TANGGAL MATKUL IDSEMESTER
Gambar 3.7 ER DiagramWebsite
28
Berikut penjelasan tentang Gambar 3.7: 1.
Terdapat 5 entitas yang masing-masing entitas memiliki atribut dan relasi.
2.
Entitas mahasiswa memiliki relasi one-to-one dengan entitas user yang artinya satu data dari table mahasiswa hanya berhubungan dengan satu data di tabel user.
3.
Entitas mahasiswa memiliki relasi one-to-many dengan entitas perizinan, artinya satu mahasiswa dapat melakukan perizinan lebih dari satu perizinan perkuliahan.
4.
Entitas matakuliah memiliki relasi one-to-many dengan enstitas semester yang artinya satu semester memiliki banyak matakuliah.
5.
Entitas perizinan memiliki relasi one-to-many dengan entitas matakuliah yang artinya dapat melakukan izin lebih dari satu dari satu matakuliah
Kamus Data Basis Data Tabel 3.1 Tabel Kamus Data Basis Data
No. 1
Nama Tabel
Nama Atribut
mahasiswa Id Nim Nama TTL Alamat No_hp Email Id_user
Uraian Id Mahasiswa Nim Mahsiswa Nama Mahasiswa TTL Mahasiswa Alamat Mahasiswa No.Hp Mahasiswa Email Mahasiswa Id Admin
Tipe
PK/ FK
Tabel Referensi
Int(10)
PK
-
Varchar(15)
-
-
Varchar(25)
-
-
Varchar(50)
-
-
Varchar(20 0) Varchar(15)
-
-
-
-
Varchar(30)
-
-
Int(10)
FK
User
29
Tabel 3.1 (Lanjutan) Tabel Kamus Data Basis Data
No. 2
Nama Tabel
Nama Atribut
matakuliah Kode_Matk ul Matkul idsemester
3
perizinan
idizin Alasan File Kode_Matk ul Id_mahasis wa idsemester Tanggal
4
5
semester
user
idsemester semester Id_user Username Pass Level
Uraian Kode Matakuliah Nama Matakuliah Id Semester Id Perizinan Alasan Izin Bukti Izin Kode Matakuliah Id Mahasiswa Id Semester Tanggal Izin Id Semester Semester Id Admin Username Password Level Pengguna
Tipe
PK/ FK
Tabel Referensi
Int(5)
PK
-
Varchar(25)
-
-
Int(10)
PK
perizinan
Varchar(22 5) Text Int(5) Int(10)
-
-
FK FK
-
Int(10)
FK
semester
Datetime
-
-
Int(10)
PK
-
Varchar(15)
-
-
Int(10) Varchar(20) Varchar(20) Int(5) Int(5)
PK FK -
-
Salah satu komponen kunci dari DBMS adalah kamus data (data dictionary), yang mencakup informasi mengenai struktur database. Setiap elemen data yang disimpan dalam database, seperti id mahasiswa, memiliki catatan di kamus data yang mendeskripsikan elemen tersebut. Tabel 3.1 memperlihatkan jenis informasi yang terdapat dalam kamus data mengenai setiap elemen data pada basis data UMY.
30
3.7.2
Rancangan Antarmuka (user interface) User Interface sangat penting dalam suatu aplikasi karena merupakan
bagian dari perangkat lunak yang menjadi sarana komunikasi antar user dengan sistem serta dapat membantu user dalam melakukan aktivitasnya. a. Rancangan Antarmuka Halaman Login
Gambar 3.8 Rancangan Antarmuka Halaman Login Rancangan antarmuka halaman login digunakan oleh admin dan mahasiswa untuk dapat masuk ke halaman utama website. Admin dan mahasiswa harus memasukkan username dan password untuk dapat login. Gambaran rancangan antarmuka menu login dapat dilihat pada Gambar 3.8. b. Rancangan Antarmuka Bagian Admin Rancangan antarmuka halaman utama merupakan tampilan utama dari website yang dapat dibuka oleh admin dan mahasiswa setelah login. Berikut gambaran rancangan antarmuka halaman utama dari sisi admin yang dapat dilihat pada Gambar 3.9.
31
Gambar 3.9 Rancangan Antarmuka Halaman Utama c. Rancangan Antarmuka Data Izin Rancangan antarmuka halaman data izin mahasiswa berisi data laporan perizinan perkuliahan mahasiswa. Admin dapat melihat data mahasiswa secara keseluruhan maupun dengan mencari data mahasiswa berdasarkan tanggal, nim ataupun matakuliah yang dapat dilihat pada Gambar 3.10.
Gambar 3.10 Rancangan Antarmuka Halaman Data Izin
32
d. Rancangan Antarmuka Data Mahasiswa Rancangan antarmuka halaman data mahasiswa digunakan admin ketika ingin menambah, mengedit, menghapus, dan melihat data mahasiswa yang dapat dilihat pada Gambar 3.11.
Gambar 3.11 Rancangan Antarmuka Halaman Data Mahasiswa e. Rancangan Antarmuka Tambah Mahasiswa Rancangan antarmuka halaman tambah mahasiswa digunakan admin ketika ingin menambahkan data mahasiswa yang dapat dilihat pada Gambar 3.12.
33
Gambar 3.12 Rancangan Antarmuka Halaman Tambah Mahasiswa f. Rancangan Antarmuka Ubah Data Mahasiswa Rancangan antarmuka halaman ubah data mahasiswa digunakan admin ketika ingin mengubah data mahasiswa yang dapat dilihat pada Gambar 3.13.
Gambar 3.13 Rancangan Antarmuka Halaman Ubah Data Mahasiswa g. Rancangan Antarmuka Data Izin Rancangan antarmuka halaman data izin mahasiswa berisi data laporan perizinan perkuliahan mahasiswa. Admin dapat melihat data mahasiswa secara
34
keseluruhan maupun dengan mencari data mahasiswa berdasarkan tanggal, nim ataupun matakuliah yang dapat dilihat pada Gambar 3.14.
Gambar 3.14 Rancangan Antarmuka Halaman Data Izin h. Rancangan Antarmuka Data Mata Kuliah Rancangan antarmuka halaman data matakuliah berisi data matakuliah dengan semester, julah SKS, jumlah sesi dan batasan izinnya. Admin dapat mengubah dan menghapus data yang dapat dilihat pada Gambar 3.15.
Gambar 3.15 Rancangan Antarmuka Halaman Data Izin
35
i. Rancangan Antarmuka Bagian Mahasiswa Rancangan antarmuka halaman utama merupakan tampilan utama dari website yang dapat dibuka oleh admin dan mahasiswa setelah login. Berikut gambaran rancangan antarmuka halaman utama dari sisi mahasiswa yang dapat dilihat pada Gambar 3.16.
Gambar 3.16 Rancangan Antarmuka Halaman Utama j. Rancangan Antarmuka Info Rancangan antarmuka halaman info merupakan tampilan yang berisi info yang bersangkutan dengan perizinan perkuliahan mahasiswa, seperti matakuliah dengan semester, jumlah SKS, jumlah sesi, dan batas izin yang dapat dilihat pada Gambar 3.17.
36
Gambar 3.17 Rancangan Antarmuka Halaman Info k. Rancangan Antarmuka Profil Mahasiswa Rancangan antarmuka halaman profil mahasiswa merupakan tampilan yang dapat dibuka oleh mahasiswa untuk melihat profilnya. Dalam halaman tersebut mahasiswa dapat mengedit profilnya, karena sebelumnya pada halaman profil mahasiswa ini admin sudah memasukkan profil data mahasiswa. Gambaran rancangan antarmuka halaman utama dapat dilihat pada Gambar 3.18.
37
Gambar 3.18 Rancangan Antarmuka Halaman Profil Mahasiswa l. Rancangan Antarmuka Izin Rancangan antarmuka halaman izin merupakan tampilan yang dapat dibuka oleh mahasiswa untuk mengisi form perizinan. Dalam halaman tersebut mahasiswa memilih mata kuliah pada combo box, memilih alasan izin dalam combo box, memilih tanggal izin, dan memasukkan file jika diperlukan untuk melakukan perizinan. Gambaran rancangan antarmuka halaman utama dapat dilihat pada Gambar 3.19.
38
Gambar 3.19 Rancangan Antarmuka Izin m. Rancangan Antarmuka Data Izin Rancangan antarmuka halaman data izin merupakan tampilan yang dapat dibuka oleh mahasiswa untuk melihat data laporan perizinan yang sudah dilakukan. Gambaran rancangan antarmuka halaman utama dapat dilihat pada Gambar 3.20.
Gambar 3.20 Rancangan Antarmuka Halaman Data Izin
