DESAIN DAN IMPLEMENTASI WEB UNTUK

 DESAIN DAN IMPLEMENTASI WEB UNTUK SISTEM UJIAN
ONLINE MAHASISWA
(Studi Kasus Program Studi Teknik Telekomunikasi Jurusan
Teknik Elektro Politeknik Negeri Bandung)
Web Design and Implementation for Student Online Test System
(Study Case of Telecommunication Engineering Study Program
Electronical
Engineering Major Politeknik Negeri Bandung)
Tugas Akhir
untuk memenuhi sebagai persyaratan
menyelesaikan pendidikan Diploma IV
Progam Diploma IV Teknik Telekomunikasi Wireless
Jurusan Teknik Elektro
diajukan oleh:
MOCHAMAD IKRAR FAHREZA
08334017
POLITEKNIK NEGERI BANDUNG
2012
DAFTAR RIWAYAT HIDUP
Nama
: MOCHAMAD IKRAR FAHREZA
NIM
: 08334017
Tempat/Tanggal lahir : Bandung/28 Oktober 1990
SD lulus tahun
: 2001/2002
di SDN Cibeureum 2, Sumedang
SLTP lulus tahun
: 2004/2005 di SMPN 2 Cimalaka, Sumedang
SLTA lulus tahun
: 2007/2008 di SMAN 1 Cimalaka, Sumedang
Prestasi yang pernah dicapai:
1. Koordinator
Lapangan
kaderisasi
Himpunan
Mahasiswa
Teknik
Telekomunikasi tahun 2009
2. Peserta Olimpiade Informatika SMA tingkat Kabupaten Sumedang tahun 2008
3. Peserta Olimpiade Matematika SMP tingkat Kabupaten Sumedang tahun 2005
4. Peserta Lomba Cepat Tepat Matematika tingkat Kabupatan Sumedang dan
Bandung Timur tahun 2005
5. Juara 1 Lomba Baris Berbaris PASKIBRA SMP se Pulau Jawa dan Bali tahun
2004
6. Juara 3 Lomba Baris Berbaris dan Pengibaran Bendera PASKIBRA SMP
tingkat Kabupaten Sumedang tahun 2004
7. Peserta Lomba Mengarang bebas (essay) SD tingkat Provinsi Jawa Barat
tahun 2002
Hai orang-orang beriman apabila dikatakan kepadamu: "Berlapang-lapanglah
majlis", maka lapangkanlah niscaya Allah akan memberi kelapangan
dalam
untukmu. Dan apabila dikatakan: "Berdirilah kamu", maka berdirilah, niscaya
Allah akan meninggikan orang-orang yang beriman di antaramu dan orangorang
yang diberi ilmu pengetahuan beberapa derajat. Dan Allah Maha
Mengetahui apa yang kamu kerjakan.
QS. Al-Mujaadilah: 11
Semua pencapaian ini untuk kalian yang kucintai . . .
Teruntuk ibu..ibu..dan ibu terima kasih aa ucapakan untuk semua yang
telah kau berikan kepada kami, anak-anakmu. Semoga Allah SWT selalu
memberikan kesehatan dan limpahan rezeki untukmu. Amin . .
Meskipun hanya 17 tahun ayah berada di dunia ini sejak aa dilahirkan
tetapi begitu banyak pelajaran yang ayah berikan. Semua kenangan bersama
ayah akan tetap aa simpan selamanya. Terima kasih ayah, kau lelaki
terhebat yang pernah aa temui. Semoga kau tenang di sisi-Nya. Hanya do’a
yang bisa kami berikan. Salam rindu dari kami untukmu.
Untuk kedua adikku Kania Noor Fazriani dan Ayumi Rahmah Fauziah.
Aa harap pencapaian kalian nanti harus bisa lebih dari ini. Buatlah orangorang disekitar kita, keluarga, terutama ibu kita mengeluarkan air mata
bahagia karena prestasi kita.
Semua keluarga besar pak aki & mamah nini (alm), pak adi dan anggota
keluarga besar lainnya saya ucapkan terima kasih. I love you all . . .
Juga tentunya untuk semua NK 2008. Senang rasanya mengenal orangorang hebat seperti kalian. Memori kebersamaan kita selama 4 tahun ini
akan tetap hidup. Sukses untuk kita semua. Salam titik dua bintang :*
KATA PENGANTAR
Puji dan syukur kehadirat Allah SWT, karena hanya dengan rahmat dan
karunia-Nya sehingga penulis dapat menyelesaikan Laporan Tugas Akhir ini tepat
pada waktunya. Penyusunan laporan Tugas Akhir ini dimaksudkan untuk
melengkapi salah satu syarat menyelesaikan pendidikan di program studi Teknik
Telekomunikasi Nirkabel, jurusan Teknik Elektro, Politeknik Negeri Bandung.
Penulis menyadari bahwa dalam penyusunan Laporan Tugas Akhir ini masih
terdapat
banyak kekurangan dalam penyajian dan pembahasan materi maupun
susunan kalimatnya sebagai suatu bentuk laporan yang baik. Hal ini disebabkan
karena keterbatasan yang ada pada penulis. Pada kesempatan ini, penulis tidak
lupa mengucapkan terima kasih kepada Allah SWT dan pihak-pihak yang telah
memberikan bantuan, bimbingan dan semua fasilitas serta pengarahan-pengarahan
yang telah diberikan kepada penulis selama penulisan Laporan Tugas Akhir ini.
Ucapan terima kasih penulis tujukan kepada:
1. Ibunda tercinta Susi Rosdiana beserta adinda Kania Noor Fazriani dan
Ayumi Rahmah Fauziah yang telah memberi dukungan berupa materi,
semangat, dan juga do’a yang tiada henti
2. Bapak Tata Supriyadi selaku dosen pembimbing I dan Bapak Eril Mozef
Selaku dosen pembimbing II
3. Teman-teman seperjuangan Nirkabel 2008 yang telah berbagi suka dan
duka
4. Seluruh keluarga besar penulis yang berada di Bandung maupun di
Sumedang
5. Seluruh anggota HIMATEL
6. Pihak-pihak lain yang tidak dapat disebutkan satu persatu.
Penulisan Laporan Proyek Akhir ini masih jauh dari sempurna, oleh sebab
itu penulis mengharapkan kritik dan saran untuk menyempurnakan laporan ini dan
semoga dapat bermanfaat bagi rekan-rekan dan pembaca.
.
Bandung, Juli 2012
Penulis
ABSTRAK
Perkembangan teknologi informasi dibarengi dengan makin meluasnya
jaringan internet memudahkan kita untuk bisa akses ke internet. Kondisi ini bisa
dimanfaatkan untuk memfasilitasi proses belajar mengajar. Salah satunya adalah
ujian
secara online. Pada tugas akhir ini, didesain dan diimplementasikan sebuah
prototipe sistem ujian secara online yang diperuntukan dosen dan mahasiswa
Program
Studi Teknik Telekomunikasi Politeknik Negeri Bandung. Dalam sistem
ini terdapat tiga buah user yaitu administrator, dosen, dan mahasiswa dengan hak
akses berbeda untuk setiap user. Administrator diberi hak untuk mengelola data
dosen, mahasiswa dan matakuliah. Dosen dapat memasukkan soal pilihan ganda,
isian singkat serta menjodohkan yang ditampilkan secara acak. Mahasiswa dapat
mengerjakan soal yang diberikan dosennya sekaligus bisa juga melihat hasilnya
langsung setelah selesai mengerjakan ujian. Perancangan sistem menggunakan
metode
Unified Modelling Language (UML). Untuk implementasinya
menggunakan bahasa pemrograman PHP dan Javascript. Dari pengujian secara
online telah berhasil diujicoba beberapa contoh soal dari beberapa matakuliah
untuk ketiga jenis soal tersebut.
Kata Kunci: ujian online, pilihan ganda, essay, menjodohkan, soal acak
ABSTRACT
The development of information technology and the vast internet network
made internet access easier for us. This condition can be used to faclitate learning
procces. Online exam is one of them. In this final project, an prototype of exam
system was designed and implemented where can be accessed online by lecturer
and student majoring in telecommunication engineering of Politeknik Negeri
Bandung. This system contain three users which is administrator, lecturer, and
student each with different access for every user. Administrator is given the right
to add, change, or delete students and lecturers data, and subject. Lecturer can
entering multiple choice, essay, match question with random order for every exam
participant. Student can answer the question given by the lecturer, the student
also capable to know their score after finishing the exam. The design of the system
using Unified Modelling Language (UML) method. PHP and Javascript
programming language is used in the implemetation. The three kind of questions
from several lecture has been succesfully tested in online testing.
Keyword: online exam, multiple choice, essay, matching question, random
quetions
DAFTAR ISI
ABSTRAK .......................................................................................................... vii
DAFTAR
GAMBAR .......................................................................................... x
DAFTAR
TABEL ............................................................................................... xiv
BAB I ..................................................................................................................1
PENDAHULUAN...............................................................................................1
1.1 Latar Belakang Masalah ........................................................................1
1.2 Perumusan Masalah ..............................................................................1
1.3 Pemecahan Masalah ..............................................................................2
1.4 Tujuan Tugas Akhir ..............................................................................2
1.5 Metodologi ............................................................................................2
1.6 Batasan Masalah....................................................................................3
1.7 Manfaat yang Diharapkan .....................................................................3
BAB 2 .................................................................................................................4
LANDASAN TEORI ..........................................................................................4
2.1 Tinjauan Pustaka ....................................................................................4
2.2 Arsitektur Aplikasi Berbasis Web ..........................................................5
2.3 Tinjauan Software yang Digunakan .......................................................7
2.3.1 PHP ...............................................................................................7
2.3.2 MySQL..........................................................................................10
BAB 3 .................................................................................................................14
ANALISA DAN PERANCANGAN SISTEM ...................................................14
3.1 Analisa Kebutuhan Sistem .....................................................................14
3.1.1 Analisa Bisnis ................................................................................14
3.1.2 Analisa Pengguna ...........................................................................15
3.1.3 Analisa Fungsi ................................................................................16
3.1.4 Analisa Basis Data .........................................................................17
3.1.5 Analisa Antarmuka ........................................................................17
3.1.6 Analisa Pengkodean .......................................................................18
3.2 Perancangan Sistem ...............................................................................20
3.2.1 Lingkup Batasan Perancangan .......................................................20
3.2.2 Perancangan ERD (Entity Relation Diagram) ..............................20
3.2.3 Perancangan UML (Unified Modelling Language) ......................21
3.2.4 Perancangan Database ...................................................................31
3.2.5 Perancangan Antarmuka ...............................................................33
BAB
4 .................................................................................................................39
IMPLEMENTASI DAN PENGUJIAN SISTEM ...............................................39
4.1 Lingkungan Implementasi Sistem ..........................................................39
4.1.1 Spesifikasi Perangkat Keras ..........................................................39
4.1.2 Spesifikasi Perangkat Lunak .........................................................39
4.2 Implementasi Graphical User Interface (GUI) .......................................40
4.2.1 Antarmuka Laman Utama (Beranda) ............................................40
4.2.2 Antarmuka Pengguna ....................................................................40
4.3 Pengujian Sistem ....................................................................................57
4.3.1 Pengujian Soal Pilihan Ganda .......................................................57
4.3.2 Pengujian Soal Isian Singkat .........................................................59
4.3.3 Penguijan Soal Menjodohkan .......................................................62
4.4 Pembahasan Hasil Pengujian .................................................................64
BAB 5 .................................................................................................................65
PENUTUP ...........................................................................................................65
5.1 Kesimpulan ............................................................................................65
5.2 Saran .......................................................................................................65
DAFTAR PUSTAKA .........................................................................................66
DAFTAR ISTILAH
DAFTAR GAMBAR
Gambar 1. 1 Langkah-Langkah Pengerjaan Sistem ............................................3
Gambar
2. 1 Topologi star pada jaringan LAN [1] .............................................4
Gambar
2. 2 Prosedur Transfer Script pada Aplikasi Web [6] ...........................7
Gambar 3. 1 ERD Aplikasi Ujian Online Teknik Telekomunikasi POLBAN ...21
Gambar 3. 2 Use Case Diagram Administrator ..................................................22
Gambar 3. 3 Use Case Diagram Dosen ...............................................................23
Gambar
3. 4 Use Case Diagram mahasiswa .......................................................23
Gambar
3. 5 Class Diagram Menu Administrator ..............................................24
Gambar 3. 7 Sequence Diagram memasukkan data dosen .................................25
Gambar 3. 8 Sequence Diagram mengubah/menghapus data dosen...................26
Gambar 3. 9 Sequence Diagram menampilkan daftar dosen ..............................26
Gambar 3. 10 Sequence Diagram memasukkan data mahasiswa .......................26
Gambar 3. 11 Sequence Diagram mengubah/menghapus data mahasiswa ........27
Gambar 3. 12 Sequence Diagram menampilkan daftar mahasiswa ....................27
Gambar 3. 13 Sequence Diagram memasukkan data mata kuliah ......................27
Gambar 3. 14 Sequence Diagram mengubah/menghapus data mata kuliah .......28
Gambar 3. 15 Sequence Diagram menampilkan daftar mata kuliah ...................28
Gambar 3. 16 Sequence Diagram menampilkan daftar hasil ujian .....................28
Gambar 3. 17 Sequence Diagram memasukkan soal ..........................................29
Gambar 3. 18 Sequence Diagram mengubah/menghapus soal ...........................29
Gambar 3. 19 Sequence Diagram menampilkan soal .........................................29
Gambar 3. 20 Sequence Diagram menampilkan nilai ujian ................................30
Gambar 3. 21 Sequence Diagram ujian...............................................................30
Gambar 3. 22 Sequence Diagram melihat nilai hasil ujian .................................30
Gambar 3. 23 Rancangan antarmuka halaman menu administrator ...................33
Gambar 3. 24 Rancangan antarmuka halaman menu dosen ...............................34
Gambar 3. 25 Rancangan antarmuka halaman menu mahasiswa .......................34
Gambar 3. 26 Rancangan antarmuka untuk login pengguna ..............................34
Gambar 3. 27 Rancangan antarmuka form pengisian data dosen untuk
administrator ...............................................................................35
Gambar 3. 28 Rancangan antarmuka form ubah data dosen untuk administrator
.....................................................................................................35
Gambar 3. 29 Rancangan antarmuka form hapus data dosen untuk administrator
.....................................................................................................35
Gambar
3. 30 Rancangan antarmuka form isian data mahasiswa untuk
administrator ................................................................................35
Gambar 3. 31 Rancangan antarmuka form ubah data mahasiswa untuk
administrator ................................................................................36
Gambar
3. 32 Rancangan antarmuka form hapus data mahasiswa untuk
administrator ................................................................................36
Gambar 3. 33 Rancangan antarmuka form isian data mata kuliah untuk
administrator ................................................................................36
Gambar 3. 34 Rancangan antarmuka form ubah data mata kuliah untuk
administrator ................................................................................37
Gambar 3. 35 Rancangan antarmuka form hapus data mata kuliah untuk
administrator ................................................................................37
Gambar 3. 36 Rancangan antarmuka tampilan daftar dosen untuk administrator
.....................................................................................................37
Gambar 3. 37 Rancangan antarmuka tampilan daftar mahasiswa untuk
administrator ................................................................................37
Gambar 3. 38 Rancangan antarmuka tampilan daftar mata kuliah untuk
administrator ................................................................................38
Gambar 3. 39 Rancangan antarmuka tampilan daftar nilai untuk dosen ............38
Gambar 3. 40 Rancangan antarmuka tampilan daftar nilai untuk mahasiswa ....38
Gambar 4. 1 Antarmuka Laman Menu Utama (Beranda) ...................................40
Gambar 4. 2 Antarmuka Login Administrator ....................................................41
Gambar 4. 3 Antarmuka Menu Administrator ....................................................41
Gambar 4. 4 Antarmuka Form Pengisian Mahasiswa .........................................42
Gambar 4. 5 Antarmuka Ubah/Hapus Mahasiswa ..............................................42
Gambar 4. 6 Antarmuka Tampil Daftar Mahasiswa ...........................................43
Gambar 4. 7 Antarmuka Form Pengisian Dosen ................................................43
Gambar 4. 8 Antarmuka Ubah/Hapus Dosen ......................................................44
Gambar 4. 9 Antarmuka Tampil Daftar Dosen ...................................................44
Gambar 4. 10 Antarmuka Form Pengisian Mata Kuliah.....................................45
Gambar 4. 11 Antarmuka Ubah/Hapus Mata Kuliah ..........................................45
Gambar
4. 12 Antarmuka Tampil Daftar Mata Kuliah .......................................46
Gambar
4. 13 Antarmuka Form Pengisian Data Soal .........................................46
Gambar 4. 14 Form Ubah/Hapus Data Soal........................................................47
Gambar 4. 15 Antarmuka Daftar Data Soal ........................................................47
Gambar 4. 16 Antarmuka Login Dosen ..............................................................48
Gambar
4. 17 Antarmuka Menu Dosen ..............................................................48
Gambar
4.18 Antarmuka Form Pengisian Jumlah Soal ......................................49
Gambar 4. 19 Antarmuka Form Pengisian Soal Pilihan Ganda ..........................49
Gambar 4. 20 Antarmuka Form Pengisian Soal Uraian Singkat ........................49
Gambar 4. 21 Antarmuka Form Pengisian Soal Menjodohkan ..........................50
Gambar 4. 22 Antarmuka Ubah/Hapus Soal .......................................................50
Gambar 4. 23 Tampil Soal Pilihan Ganda Untuk Dosen ....................................51
Gambar 4. 24 Tampil Soal Isian Singkat Untuk Dosen ......................................51
Gambar 4. 25 Tampil Soal Menjodohkan Untuk Dosen .....................................52
Gambar 4. 26 Antarmuka Tampil Nilai Mahasiswa Untuk Dosen .....................52
Gambar 4. 28 Antarmuka Lihat/Hapus File ........................................................53
Gambar 4. 27 Antarmuka Unggah File ...............................................................53
Gambar 4. 29 Antarmuka Login Mahasiswa ......................................................54
Gambar 4. 30 Antarmuka Menu Mahasiswa.......................................................54
Gambar 4. 31 Antarmuka Form Pengerjaan Soal Pilihan Ganda Untuk
Mahasiswa ...................................................................................55
Gambar 4. 32 Antarmuka Form Pengerjaan Soal Isian Singkat Untuk
Mahasiswa ...................................................................................55
Gambar 4. 33 Antarmuka Form Pengisian Soal Menjodohkan Untuk
Mahasiswa ...................................................................................56
Gambar 4. 34 Antarmuka Melihat Nilai Untuk Mahasiswa ...............................56
Gambar 4. 35 Antarmuka Mengunduh File Untuk Mahasiswa ..........................56
Gambar 4. 36 Soal nomor 1 untuk peserta pertama ............................................58
Gambar 4. 37 Soal nomor 1 untuk peserta kedua ...............................................58
Gambar 4. 38 Soal nomor 1 untuk peserta ketiga ...............................................59
Gambar 4. 39 Semua jawaban benar pada soal uraian singkat ...........................60
Gambar 4. 40 Hasil jika semua jawaban benar pada soal uraian singkat ...........61
Gambar
4. 41 Kesalahan penulisan pada soal uraian singkat .............................61
Gambar
4. 42 Hasil jika terdapat satu kesalahan pengetikan ..............................62
Gambar 4. 43 Semua soal dijawab dengan benar ...............................................62
Gambar 4. 44 Hasil jika semua soal dijawab dengan benar ................................63
Gambar 4. 45 Memasukkan jawaban yang salah pada soal menjodohkan .........63
Gambar
4. 46 Hasil jika terdapat satu jawaban yang salah pada soal
menjodohkan ..............................................................................64
DAFTAR TABEL
Tabel 3. 1 Analisa Pengkodean ID Dosen ............................................................ 18
3. 2 Analisa Pengkodean ID Mahasiswa ..................................................... 19
Tabel
3. 3 Analisa Pengkodean ID Soal................................................................ 19
Tabel
Tabel 3. 4 Analisa pengkodean ID Administrator ................................................ 20
Tabel 3. 5 Struktur Tabel daftar_admin ............................................................... 31
3. 6 Struktur Tabel daftar_dosen ................................................................. 31
Tabel
Tabel
3. 7 Struktur Tabel daftar_mahasiswa......................................................... 31
Tabel 3. 8 Struktur Tabel daftar_mata_kuliah ...................................................... 32
Tabel 3. 9 Struktur Tabel daftar_data_soal ........................................................... 32
Tabel 3. 10 Struktur Tabel hasil_ujian .................................................................. 32
DAFTAR PUSTAKA
[1]
Chandra, Ivanho. 2011. Desain dan Implementasi Sistem Pra-Ujian
Berbasis
Komputer Pada Jaringan LAN Jurusan Teknik Elektro Polbam.
Bandung
[2]
Kadir, Abdul. 2008. Dasar Pemrograman Web Dinamis Mengguanakan
PHP. Yogyakarta: Andi
[3]
Andriana, Dian, (2010), Sistem manajemen basis data relasional, (Mar
2012).http://id.wikipedia.org/wiki/Sistem_manajemen_basis_data_relasional.
[4] Nugroho, Bunafit, (2004), Aplikasi Pemograman Web Dinamis dengan PHP
dan MYSQL , Gava Media,Yogyakarta
[5] Bunafit KomputerTRIK PEMROGRAMAN PHP: Script PHP untuk Membuat
Soal
Ujian
Pilihan
GandaTampil
Acak.
Available:
http://www.scribd.com/35824032[14 Juni 2012]
[6] Materi PHP.http://pusdatin.deptan.go.id/admin
/Materi%20PHP.pdf (April 2012)
[7]
/RB
/Programming
Konsep
Pemrograman
Internet.
http://wa2n.staff.uns.ac.id/files/2009/02/01konseppemrogramaninternet.pdf(
April 2012)
DAFTAR ISTILAH
HTML
PHP : Personal Home Page adalah bahasa pemograman berbasis web
FI
: Form Interpreted adalah nama PHP pada awal diremukan
SQL
: Structured Query Language. adalah sebuah konsep pengoperasian
basisdata, terutama untuk pemilihan atau seleksi dan pemasukan
data, yang memungkinkan pengoperasian data dikerjakan dengan
mudah secara otomatis
RDBMS
: Relational Data Base Management System
GPL
: General Public License
ERD
: Entity Relational Diagram.
UML
hanya dimengerti oleh web browser
yang memiliki kemampuan untuk memproses data dinamis
: Hypertext Markup Language adalah bahasa atau script yang
: Unified Modelling Language