Perancangan dan Implementasi Sistem Pendaftaran

Pengajaran Matakuliah Berbasis Web Untuk Dosen Tidak

Tetap di Prodi S1 Teknik Informatika FTI-UKSW

Artikel Ilmiah

Peneliti: Chrisdano Ryan Chandra Dasmasela (672010044)

Suprihadi, S.Si., M.Kom.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga 2016

1

1. Pendahuluan

Perkembangan Teknologi saat ini telah digunakan setiap perusahaan,

organisasi maupun perguruan tinggi untuk mendukung kinerja para karyawan /

pengajar. Fakultas Teknologi Informasi di UKSW telah menggunakan teknologi

Informasi sebagai pendukung sistem proses pembelajaran.

Suatu sistem pasti mempunyai tujuan (goal) atau sasaran (objective).

Sasaran dari sistem menentukan input yang dibutuhkan sistem dan keluaran yang

akan dihasilkan sistem [1], namun diketahui masih terdapat hambatan dalam

proses pendaftaran pengajaran matakuliah. Sistem pendaftaran pengajaran

matakuliah di fakultas teknologi informasi saat ini masih manual yaitu, proses

pendaftaran yang dilakukan dengan cara bertatap muka langsung pada saat

pertemuan kemudian prodi memberikan informasi matakuliah yang akan dibuka

pada semester baru dan menanyakan ketersediaan waktu kepada dosen tidak tetap

untuk nantinya dipilih kelas yang akan diajarkan. Data pengajar yang sudah

memilih kelas kemudian disimpan ke dalam File Microsoft word untuk dijadikan

laporan pengajaran matakuliah. Hal ini terjadi khususnya pada prodi Teknik

Informatika.

Berdasarkan latar belakang masalah dari penelitian ini yaitu, proses

pendaftaran yang masih manual maka diperlukan suatu sistem yang berkapabilitas

untuk mengorganisir list para pengajar berdasarkan kemampuan tiap pengajar

tersebut. Adanya penelitian ini bermanfaat guna merancang dan

mengimplementasikan sistem pedaftaran pengajaran matakuliah berbasis web

untuk memudahkan para pengajar dalam memilih matakuliah. Penelitian ini

menjelaskan bagaimana merancang dan mengimplementasikan sistem

pendaftaran pengajaran matakuliah berbasis web untuk dosen tidak tetap di prodi

S1 teknik informatika pada fakultas teknologi informasi (FTI), Universitas

Kristen Satya Wacana (UKSW).

Dalam penelitian ini yang menjadi batasan masalah adalah sebagai berikut:

(1) Tidak membahas tentang keamanan pada website pendaftaran; (2) Data yang

ada didalam web berupa kode dosen dan kode matakuliah di Fakultas Teknologi

Informasi; (3) Pengembangan aplikasi menggunakan bahasa pemograman PHP

dan Bootstrap Framework dengan MySQL database. Berbagai teori aplikasi yang

dikembangkan untuk mendukung proses perancangan dan implementasi sistem

pendaftaran pengajar diantaranya adalah PHP dan WAMP, framework bootstrap

sebagai pendukung dalam membangun desain web secara responsif.

2. Tinjauan Pustaka

Beberapa penelitian terdahulu yang berkaitan dengan penelitian ini

berjudul “Perancangan dan Implementasi Web Pariwisata Kota Palu Sulawesi

Tengah Berbasis Web”. Pada penelitian ini dirancang suatu website menggunakan

script php dan database MySQL sebagai media penyimpanan data [2].Hasil dari

perancangan website ini adalah sebuah situs website pariwisata yang

menampilkan informasi tentang objek wisata di kota palu. Berbeda dengan

penelitian ini adalah, pada penelitian ini website dirancang untuk mengolah dan

menampilkan data pengajaran matakuliah. website ini memiliki proses input dan

output yang menampilkan laporan pengajaran matakuliah.

2

Adapun penelitian sebelumnya yang membahas tentang penggunaan

framework bootstrap, berjudul “Prototype Web Responsive Design Pada UIN

Syarif Hidayatullah Jakarta Menggunakan Framework Bootstrap” [3]. Latar

belakang penggunaan bootstrap pada penelitian ini adalah meningkatnya akses

website UIN Syariaf Hidayatullah Jakarta dengan menggunakan perangkat mobile

yang memiliki resolusi layar berbeda dengan aplikasi desktop. Sehingga,

diperlukan bootstrap yang mampu beradaptasi dengan masalah pada web browser

dan perangkat keras yang menjalankannya untuk menciptakan respon terhadap

kebutuhan pengguna. Hal ini menjadi alasan mengapa pada penelitian di Fakultas

Teknologi Informasi, Universitas Kristen Satya Wacana juga memanfaatkan

bootstrap dalam rangka membangun sebuah responsive website.

Sistem Informasi adalah suatu kombinasi teratur apapun dari people

(orang), hardware (perangkat keras), software (piranti lunak), computer networks

and data communications (jaringan komunikasi), dan database (basis data) yang

mengumpulkan, mengubah dan menyebarkan informasi di dalam suatu bentuk

organisasi [4]. Untuk lebih jelasnya dapat dilihat pada Gambar 1 tentang

komponen sistem informasi.

Gambar 1 Aktivitas dan komponen Sistem Informasi [4]

Semua sistem informasi menggunakan sumber daya – sumber daya yang

terdapat didalam perusahaan untuk melakukan aktivitas input, pemrosesan,

output, penyimpanan, dan pengendalian yang mengubah sumber daya data

menjadi produk informasi.

Gambar 1 mengilustrasikan model sistem informasi yang menunjukan

kerangka kerak konsep dasar untuk berbagai komponen dan aktivitas sistem

informasi. Model sistem informasi ini memperlihatkan hubungan antarkomponen

dan aktivitas sistem informasi yang menekankan dan menggunakan pada lima

sumber daya yang terdapat didalam suatu perusahaan (in sourcing) [5].

Pada penelitian ini aplikasi yang dirancang adalah merupakan aplikasi

berbasis web. WWW atau world wide web atau web saja merupakan sebuah

sistem yang saling terkait dalam sebuah dokumen yang berformat hypertext yang

berisi beragam informasi, baik tulisan, gambar, suara, video, dan informasi

multimedia lainnya dan dapat diakses melalui sebuah perangkat yang disebut web

browser. Untuk menterjemahkan dokumen dalam bentuk hypertext ke dalam

bentuk dokumen yang bisa dipahami, maka web browser melalui web client akan

3

membaca halaman web yang tersimpan di sebuah web server melalui protokol

yang biasa disebut http atau Hypertext Transfer Protocol [7].

Beberapa keunggulan aplikasi berbasis web, antara lain:1) Dapat

dijalankan dimanapun kapanpun tanpa harus melakukan penginstalan; 2) Tidak

memerlukan lisensi ketika menggunakan aplikasi berbasis web, sebab lisensi telah

menjadi tanggung jawab dari web penyedia aplikasi; 3) Dapat dijalankan di sistem

operasi manapun; 4) Dapat diakses lewat banyak media seperti: komputer dan

handphone yang sudah sesuai dengan standard WAP; 5) Tidak perlu spesifikasi

komputer yang tinggi untuk menggunakan aplikasi berbasis web, sebab di

beberapa kasus, sebagian besar proses dilakukan di web server penyedia aplikasi

berbasis web ini [7].

Pustaka lain yang mendukung penelitian ini adalah mengenai framework.

Framework adalah kerangka kerja. Framework adalah sekumpulan fungsi, class

dan aturan. Berbeda dengan library yang sifatnya untuk tujuan tertentu saja,

framework bersifat menyeluruh mengatur bagaimana membangun sebuah aplikasi

[8]. Beberapa contoh framework yang biasa digunakan adalah framework

CakePHP, CodeIgniter (CI) Symphony, Zend, Yii, JQuery, dan Bootstrap.

Responsive design merupakan salah satu teknik yang dapat membuat

proses perancangan aplikasi dan situs web untuk berbagai jenis perangkat menjadi

lebih mudah. Adanya responsive design, perancang dimungkinkan untuk dapat

menerapkan solusi bagi berbagai resolusi layar, density, dan rasio aspek pada

banyak jenis perangkat. Responsive design memiliki kemampuan untuk mengelola

aset media dengan efektif. Hal ini memberikannya keunggulan untuk dapat

diterapkan ke dalam perancangan situs web sehingga situs dapat diakses melalui

smartphone, tablet, desktop, ataupun smart TV tanpa memperlihatkan perbedaan

yang terlalu besar dalam hal penggunaan. Dengan menggunakan konfigurasi

responsive design, sebuah situs web mampu memberikan respon secara otomatis

terhadap ukuran layar, sehingga situs dapat beradaptasi dengan optimal dalam

perangkat apapun yang digunakan pengguna untuk mengaksesnya Kemampuan

adaptasi tersebut jelas merupakan poin penting dalam proses perancangan situs.

Sebab, untuk dapat menciptakan sebuah desain situs yang baik, maka proses

perancangan perlu berfokus pada penyediaan layanan dan mobilisasi yang baik

bagi pengguna [9].

Responsive web pada penelitian ini berfungsi untuk membuat tampilan

web dapat menyesuikan sesuai ukuran layar browser. Sehingga tidak hanya dapat

diakses melalui komputer, namun juga dapat diakses melalui browser pada

perangkat mobile seperti handphone atau tablet. Hal ini diperlukan oleh tiap dosen

dalam melakukan registrasi secara fleksibel menggunakan perangkat mobile.

Untuk membuat web yang responsif (responsive web), dapat digunakan

teknologi bootstrap. Bootstrap adalah front-end framework yang mengedepankan

tampilan untuk mobile device guna mempercepat dan mempermudah

pengembangan website. Bootstrap adalah template responsif yang bisa

menyesuaikan lebar tampilan secara otomatis sesuai gadget yang dipakainya.

Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk

dikembangkan. Kelebihan yang dimiliki bootstrap adalah template yang

menggunakan bootstrap lebih ringan [10].

4

3. Metode dan Perancangan Sistem

Penelitian yang dilakukan, diselesaikan melalui tahapan penelitian yang

terbagi dalam lima tahapan, yaitu: (1) Identifikasi masalah dan studi literatur, (2)

Perancangan sistem, (3) Implementasi sistem, (4) Pengujian sistem dan analisis

hasil pengujian, (5) Penulisan laporan.

Gambar 2 Tahapan Penelitian

Tahapan penelitian pada Gambar 2, dapat dijelaskan sebagai berikut.

Tahap pertama: identifikasi masalah, yaitu masih manualnya sistem yang terdapat

di Fakultas Teknologi Informasi terutama sistem input dan output pendaftaran

yang menyusahkan bagi ketua program studi, dan diperlukan sebuah sistem

informasi pendaftaran yang mengandalkan teknologi komputer yang dapat

memudahkan pekerjaan tersebut. Setelah identifikasi masalah maka langkah

selanjutnya adalah mencari studi literatur yang memiliki penyelesaian masalah

yang mirip dengan penelitian ini; Tahap kedua: perancangan sistem yang meliputi

perancangan proses input dan proses output pendaftaran, Tahap ketiga:

perancangan prototype sistem, yaitu membuat aplikasi sesuai perancangan proses

pada tahap kedua; Tahap keempat: pengujian sistem dan analisis hasil pengujian,

yaitu dilakukan pengujian terhadap proses yang telah dirancang, dan melihat

kesesuaian solusi terhadap masalah yang telah teridentifikasi sebelumnya; dan

Tahap kelima: melakukan penulisan laporan penelitian.

Metode perancangan sistem dilakukan dengan menggunakan metodologi

pengembangan perangkat lunak prototype model [11].

5

Gambar 3 Prototype Model [11]

Pada proses implementasi dihasilkan beberapa prototype yang dapat

dijelaskan sebagai berikut. Tahap pertama: mendengarkan atau wawancara

customer atau user; Tahap kedua; merancang program kemudian membuat

perbaikan terhadap hasil yang diperoleh; Tahap ketiga: melakukan evaluasi ke

customer atau user dimana pada tahap ini proses akan kembali lagi ketahap

pertama. Diagram prototype model ditunjukkan pada Gambar 3.

Gambar 4 Use Case Diagram Sistem

Sistem terdiri dari dua pengguna (actor), yaitu Sekretaris dan dosen.

Dosen berperan untuk mengatur data kompetensi dan melakukan registrasi,

sekretaris berperan untuk mengatur data dosen, data matakuliah, data kompetensi,

dan data laporan jadwal mengajar.

6

Gambar 5 Activity Diagram Proses Registrasi Matakuliah

Sekertaris mendata dosen tidak tetap (pengajar) kemudian menambahkan

matakuliah yang dibuka. Dosen login dan Registrasi matakuliah. Laporan jadwal

mengajar akan didapat oleh Sekretaris setelah Dosen berhasil melakukan

Registrasi matakuliah.

7

Gambar 6 Class Diagram Sistem

Gambar 6 menunjukkan hubungan antara class-class yang digunakan di

dalam sistem. class DosenTidakTetap, class Registrasi, class Kompetensi, class

Matakuliah. class-class ini saling terhubung satu sama lain melalui attribute.

4. Hasil dan Pembahasan

Gambar 7 Halaman Pengaturan Data Dosen yang diakses oleh Sekretaris

Gambar 7 menampilkan pendaftaran data Dosen oleh Sekretaris. data

dosen terdiri dari nomor induk, nama, kompetensi, alamat dan telp. Dosen akan

mendapatkan username dan password untuk login dan melakukan registrasi

matakuliah berdasarkan kompetensi yang dimilikinya.

8

Gambar 8 Halaman Pengaturan Data Matakuliah yang diakses oleh Sekretaris

Gambar 8 menampilkan pembuatan daftar matakuliah oleh sekretaris.

matakuliah yang ada di bagi sesuai bidang dan dan akan dipilih oleh dosen sesuai

dengan kompetensi dosen.

Gambar 9 Halaman Laporan Jadwal Mengajar per Matakuliah

Gambar 9 menampilkan laporan jadwal mengajar per matakuliah yang

diterima oleh sekretaris ketika dosen telah berhasil melakukan registrasi.

Sekretaris bisa melihat laporan per matakuliah untuk mengetahui bahwa

matakuliah tersebut memiliki dosen pengajar.

9

Gambar 10 Halaman Laporan Jadwal Mengajar per Dosen

Gambar 10 menampilkan laporan jadwal mengajar per dosen yang

diterima oleh sekretaris ketika dosen telah berhasil melakukan registrasi.

Sekretaris bisa melihat laporan per dosen untuk mengetahui bahwa matakuliah

apa saja yang diregistrasi dosen pengajar.

Gambar 11 Halaman Profil Dosen

Gambar 11 menampilkan form pendaftaran data dosen ketika dosen login.

Pada halaman ini dosen dapat mengupdate data profilnya. Misalnya merubah

password atau merubah alamat.

10

Gambar 12 Halaman Registrasi Matakuliah

Gambar 12 menampilkan registrasi matakuliah yang dilakukan oleh dosen

saat dosen sedang melakukan registrasi untuk memilih matakuliah. matakuliah

yang ditampilkan berdasarkan kompetensi yang dimiliki oleh dosen.

Gambar 13 Halaman Jadwal Mengajar Dosen Tidak Tetap

Gambar 13 menampilkan Jadwal Mengajar yang telah dipilih oleh Dosen

saat dosen selesai melakukan registrasi. Dosen dapat melihat daftar mengajar pada

jadwal.

Kode Program 1 Perintah penggunaan bootstrap untuk responsive web 1.

2.

3.

4.

5.

6.

7.

8.

<head>

<link id="bootstrap-style"

href="css/bootstrap.min.css"

rel="stylesheet">

<link

href="css/bootstrap-responsive.min.css"

rel="stylesheet">

</head>

Kode Program 1 merupakan baris perintah yang terdapat di bagian atas

dokumen html, tepatnya di dalam taghead. Baris perintah tersebut berfungsi untuk

mendeklarasikan penggunaan file css dari bootstrap.

Kode Program 2 Perintah menyimpan data registrasi matakuliah

1.

2.

3.

4.

5.

6.

if(isset($_REQUEST["reg"])){

$kodemk = $_REQUEST["reg"];

$mk = MK::selectByField("kodemk", $kodemk);

$mk->kodedosen = $u->username;

MK::update($mk, "kodemk", $kodemk);

}

11

Kode Program 2 merupakan perintah untuk menyimpan hasil registrasi

matakuliah yang dilakukan oleh Dosen. Matakuliah yang dipilih, diberi nilai kode

dosen sesuai dengan username dosen. Username dosen berisi nomor induk dosen.

Kode Program 3 Perintah untuk menampilkan laporan jadwal mengajar

1.

2.

3.

4.

5.

6.

7.

8.

9.

10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26.

foreach ($daftar as $d) {

$dosen = Dosen::selectByField("username",

$d->kodedosen );

if($dosen!=null){

echo "<tr id='$d->kodemk'

style='background-color: #f9f9f9;

font-weight: bold;'>";

echo "<td>".($nomor++)."</td>";

echo "<td><a onclick='return

confirm(\"Batalkan MK Ini?\")'

href='?unreg=$d->kodemk#$d->kodemk'

class='btn btn-danger'>Batalkan</a></td>";

echo "<td>$dosen->nama</td>";

}else{

echo "<tr id='$d->kodemk'>";

echo "<td>".($nomor++)."</td>";

echo "<td></td>";

echo "<td></td>";

}

echo "<td>$d->kodemk</td>";

echo "<td>$d->nama</td>";

echo "<td>$d->hari, $d->mulai-$d->selesai </td>";

echo "<td>$d->ruang</td>";

echo "<td>$d->sks</td>";

echo "</tr>";

}

Kode Program 3 merupakan baris perintah untuk menampilkan hasil

registrasi matakuliah. Laporan ini juga berlaku sebagai laporan jadwal mengajar.

Variabel $daftar berisi daftar matakuliah yang dibuka, kemudian dilakukan proses

perulangan untuk tiap matakuliah di dalam variabel tersebut. Pada tiap

matakuliah, ditampilkan informasi mengenai dosen yang mengajar matakuliah

tersebut, hari, jam, ruang dan bobot sks.

Pada sistem yang dikembangkan, dilakukan dua jenis pengujian. Pengujian

alpha, dan pengujian beta. Pengujian alpha berfungsi untuk mengetahui apakah

sistem sudah menyimpan, mengolah, dan menampilkan data dengan benar.

Pengujian alpha dilakukan oleh pengembang sistem, untuk memastikan bahwa

sistem bekerja semestinya. Jika pada pengujian alpha sistem berhasil lolos maka

dapat diujikan kepada calon pengguna.

Tabel 1 Hasil Pengujian Alpha

Modul Pengujian Ekspektasi Hasil Sistem Kesimpulan

Login

Login dengan

username dan

password yang

tepat

Muncul form data

dosen tidak tetap

Muncul form

data dosen tidak

tetap

Lolos

Pengujian

Login dengan

username ATAU

password yang

salah

Muncul pesan

kesalahan login.

Muncul pesan

kesalahan login.

Lolos

Pengujian

Pendaftaran

dosen tidak Data diisi lengkap

Data dosen tidak

tetap tersimpan

Data dosen tidak

tetap tersimpan

Lolos

Pengujian

12

tetap sesuai input sesuai input

Nama dosen tidak

tetap dikosongkan

Muncul pesan

peringatan.

Muncul pesan

peringatan.

Lolos

Pengujian

Alamat

dikosongkan

Muncul pesan

peringatan

Muncul pesan

peringatan

Lolos

Pengujian

Registrasi

Kelas untuk

mengajar

Pilih kelas yang

belum dipilih oleh

dosen lain

Kelas terpilih dan

dan tersimpan

dalam database

Kelas terpilih

dan tersimpan

dalam database

Lolos

Pengujian

Pilih kelas yang

telah dipilih oleh

dosen lain

Muncul pesan

peringatan

Muncul pesan

peringatan

Lolos

Pengujian

Pilih kelas yang

bertabrakan

dengan kelas

yang sudah

dipilih

Muncul pesan

peringatan

Muncul pesan

peringatan

Lolos

Pengujian

Berdasarkan hasil pengujian alpha, disimpulkan bahwa sistem dapat

menyimpan dan mengolah data dengan baik. Jika terdapat kekurangan input maka

sistem dapat memberikan peringatan, sehingga dapat mengurangi kelasahan pada

proses registrasi matakuliah.

Pengujian yang kedua menggunakan pengujian beta yang dilakukan

kepada sekretaris dan beberapa dosen tidak tetap selaku actor pengguna aplikasi

ini.

Tabel 2 Hasil Pengujian Kuesioner (15 Responden)

No Pertanyaan Jawaban

SS S C TS STS

1

Sistem memudahkan dalam proses

pendaftaran pengajaran

15

2 Sistem mudah untuk digunakan

13 2

3

Sistem memberikan pesan

kesalahan yang jelas, ketika terjadi

kesalahan proses registrasi

matakuliah

15

4

Desain tulisan dan icon menarik

dan dipahami

15

5

Sistem memberikan informasi yang

lengkap

15

6 Sistem dapat mempercepat proses

pendaftaran pengajaran matakuliah 14 1

Dari pengujian tersebut didapatkan hasil bahwa pengguna dapat

menggunakan aplikasi dengan mudah serta aplikasi dapat memudahkan proses

pendaftaran pengajaran matakuliah

.

13

5. Simpulan

Dalam penelitian ini dirancang sebuah aplikasi sistem pendaftaran

pengajaran matakuliah berbasis web yang memanfaatkan teknologi responsive

web untuk desain user interface, dan menggunakan metode prototype dalam

pengerjaannya.

Berdasarkan hasil pengujian alpha dan pengujian beta kepada pengguna

disimpulakan bahwa aplikasi sistem pendaftaran pengajaran matakuliah berbasis

web ini dapat memudahkan user dalam proses pendaftaran pengajaran matakuliah

di Prodi S1 Teknik Informatika FTI-UKSW. Adanya database yang menyimpan

proses pendaftaran dapat membantu sekretaris untuk membuat sebuah laporan

pendaftaran berupa laporan jadwal mengajar. Sekretaris juga dapat melihat daftar

laporan per dosen atau per matakuliah. Adanya aplikasi ini proses pembelajaran

yang tidak relevan dapat diminimalisir. Adapun saran dari pengujian yaitu untuk

memperluas aplikasi untuk dipakai di prodi selain prodi S1 Teknik Informatika

FTI-UKSW.

6. Daftar Pustaka

[1]. Hutahaean, J. 2015. Konsep Sistem Informasi. Budi Utama, Yogyakarta,

2015.

[2]. Siombo, E. S. 2013. Perancangan dan Implementasi Web Pariwisata Kota

Palu Sulawesi Tengah Berbasis Web.

[3]. Reza, F. 2015. Prototype Web Responsive Design Pada Uin Syarif

Hidayatullah Jakarta Menggunakan Framework Bootstrap.

[4]. O’Brient, J. A. 2005. Pengantar Sistem Informasi: Perspektif Bisnis dan

Manajerial, Edisi Keenam; Salemba Empat, Jakarta J. Glenn Brookshear;

2003. Computer Science

[5]. Chaerunnisa, D. 2014. Pengembangan Sistem Informasi Dengan

Menggunakan Pendekatan Insourcing Atau Outsourcing Pada Perusahaan.

Institut Pertanian Bogor

[6]. Erinawati, H. D. H. D. 2013. Pembangunan Sistem Informasi Pembayaran

Sekolah Pada Sekolah Menegah Atas (SMA) Negeri 1 Rembang Berbasis

Web. Speed-Sentra Penelitian Engineering dan Edukasi 10, 40–46.

[7]. Putra., A. W. 2014. Pengertian Aplikasi Berbasis Web dan Desktop.

http://www.aldo-expert.com/writers/pengertian-aplikasi-berbasis-web-dan-

desktop.html. Diakses pada 18 Desember 2015.

[8]. Tsani, S. S. 2013. Perancangan dan Pembuatan Content Management

System (CMS) Barca CMS Menggunakan Framework CodeIgniter.

[9]. Syachbana & Akib, Z. 2014. Perancangan Website Menggunakan

Responsive Web Design. Jurnal Sigmata LPPM AMIK Sigma

[10]. Mark Otto, J. T. 2015. Getting started with Bootstrap.

http://getbootstrap.com/getting-started/. Diakses pada 18 Desember 2015.

[11]. Pressman, R. S. & Jawadekar, W. S. 1987. Software engineering. New

York 1992