i
Penyusun
: Reni Susanti
Pembimbing I
: Hj. Asti Dwi Irfianti, S.Kom, M.Kom
Pembimbing II
: Wahyu S.J. Saputra, S.Kom
ABSTRAK
Selama ini semua proses pembelajaran di STT YPM Sidoarjo masih
bersifat konvensional, dengan kata lain bahwa proses belajar mengajar antara
mahasiswa dengan dosennya hanya dapat dilakukan dengan syarat terjadinya
pertemuan antara mahasiswa dengan dosen di dalam kelas. Jika pertemuan antara
mahasiswa dengan dosen tidak terjadi atau dosen yang bersangkutan tidak hadir
dan waktu pembelajaran yang dibatasi pihak sekolah, maka secara otomatis proses
pembelajaran pun akan terhambat. Berbagai konsep dan teknik baru dalam
pengajaran telah banyak dikembangkan untuk menggantikan metode tradisional
yang hanya mengandalkan pada metode pengajaran satu arah dikelas. Salah satu
metode pengajaran yang sedang berkembang dimasa sekarang adalah e-learning.
Pengembangan aplikasi web di internet yang disebut sebagai AJAX
merupakan model baru untuk antar-muka aplikasi web yang lebih responsif dan
cepat layaknya aplikasi desktop. Untuk merancang aplikasi ini digunakan metode
perancangan structural yaitu pembuatan pembuatan Data Flow Diagram (DFD)
untuk perancangan dan mendokumentasikan sistem perangkat lunak berdasarkan
aliran data. Dalam pembuatan perangkat lunak ini menggunakan PHP sebagai
bahasa
script yang digunakan untuk membuat halaman website dan MySQL
sebagai database tempat penyimpanan data.
Program diuji dengan melakukan pengujian program dengan memasukan
data-data yang telah ada. Dengan adanya e-learning ini dapat membantu proses
belajar mengajar agar lebih optimal. Memudahkan para dosen untuk dapat
mendistribusikan materi pelajaran untuk mahasiswa/I di STT YPM Sidoarjo dan
juga mahasiswa/I dapat dengan mudah mendapat materi pelajaran. Website
e-learning ini dapat dijadikan media diskusi tambahan untuk membahas materi
pelajaran yang belum tuntas serta dapat mengerjakan dan mengumpulkan
tugas-tugas yang diberikan oleh dosen.
KATA PENGANTAR
Bismillahirrahmannirahim,
Syukur Alhamdulillaahi rabbil ‘alamin terucap ke hadirat Allah SWT atas
segala limpahan Kekuatan-Nya sehingga dengan segala keterbatasan waktu,
tenaga, pikiran dan keberuntungan yang dimiliki penyusun, akhirnya penyusun
dapat menyelesaikan Tugas Akhir yang berjudul
″
IMPLEMENTASI AJAX
PADA APLIKASI E-LEARNING BERBASIS WEB (STUDY KASUS DI
SEKOLAH TINGGI TEKNIK YPM SIDOARJO)″
dengan tepat waktu,
Shalawat dan salam diperuntukkan kepada junjungan kita nabi besar Muhammad
SAW.
Skripsi dengan beban 4 SKS ini disusun guna diajukan sebagai salah satu
syarat untuk menyelesaikan program Strata Satu (S1) pada jurusan Teknik
Informatika, Fakultas Teknologi Industri, UPN
″
VETERAN
″
Jawa Timur.
Penyusun menyadari bahwasanya dalam menyelesaikan Skripsi ini telah
mendapat banyak bantuan dan dukungan dari berbagai pihak, untuk itu pada
kesempatan yang berharga ini, penyusun mengucapan terima kasih kepada:
1.
Bapak Ir. Sutiyono, MT selaku Dekan Fakultas Teknologi Industri Universitas
Pembangunan Nasional “Veteran” Jawa Timur Surabaya
iii
serta memberi motivasi sehingga penulis dapat menyelesaikan Tugas Akhir
ini.
4.
Bapak Wahyu S.J. Saputra, S.Kom selaku Dosen Pembimbing II di jurusan
Teknik Informatika Universitas Pembangunan Nasional
″
Veteran
″
Jawa
Timur Surabaya yang telah memberikan saran, arahan, ilmu dan telah
meluangkan waktunya sehingga penulis dapat menyelesaikan Tugas Akhir ini.
5.
Ibu dan Bapak tercinta di rumah yang senantiasa memberikan dukungan baik
moral maupun spiritual serta tak henti-hentinya mendoakan penyusun agar
selalu sukses dalam segala hal termasuk menyelesaikan skripsi ini .
6.
Adekku tercinta di rumah yang mendoakan dan mendukung penyusun untuk
menyelesaikan skripsi ini.
7.
Bapak Wahyu S.J. Saputra, S.Kom dan Ibu Fetty Tri Anggraeny, S.Kom
selaku Penguji Seminar Tugas Akhir yang telah banyak memberi masukan
serta membuka wawasan baru.
8.
Bapak dan Ibu Dosen Jurusan Teknik Informatika Universitas Pembangunan
Nasional “Veteran” Jawa Timur Surabaya yang selalu memberikan motivasi,
pengalaman bagi penyusun.
iv
10. Tutut gujes-gujes, best friendku..
thankyou very very much, karena selalu
menemani saat mengerjakan skripsi dan selalu memberikan semangat untuk
menyelesaikan tugas akhir ini.
11. Mas Dafit, Aziz, Po’Oneng dan Mbak Pia terima kasih banyak atas semua
bantuannya dan ajarannya sehingga penulis bisa menyelesaikan Tugas Akhir
ini, terima kasih juga buat referensinya ya.
12. Teman-teman kuliah khususnya Rose Production Tutut, Po’Oneng, Wisnu
dan Rendra, makasih banyak ya buat dukungan dan do’anya.
13. Teman-teman penulis lainnya yang tidak mungkin penulis sebutkan namanya
satu per satu terima kasih telah membantu dan memberikan do’anya kepada
penulis untuk menyelesaikan skripsi ini.
Melalui Skripsi ini penyusun merasa mendapatkan kesempatan emas untuk
memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan,
terutama berkenaan tentang penerapan teknologi kecerdasan buatan. Namun,
penyusun menyadari bahwa Skripsi ini masih jauh dari sempurna. Oleh karena itu
penyusun sangat mengharapkan saran dan kritik dari para pembaca untuk
pengembangan aplikasi lebih lanjut.
Surabaya, 13 April 2011
Penyusun
v
Gambar 2.1
Arsitektur Web... 11
Gambar 2.2
Prinsip kerja PHP ... 12
Gambar 2.3
Hasil dari file coba1.php ... 13
Gambar 2.4
Model aplikasi web tradisional ... 14
Gambar 2.5
Model aplikasi web dengan AJAX ... 14
Gambar 3.1
Deskripsi Umum Sistem ... 21
Gambar 3.2
DFD Level 0 ... 24
Gambar 3.3
DFD Level 1 ... 25
Gambar 3.4
DFD level 2 Proses Dosen ... 27
Gambar 3.5
DFD Level 2 Proses Admin ... 28
Gambar 3.6
DFD Level 2 Proses E-learning ... 31
Gambar 3.7
DFD Level 2 Proses Forum ... 32
Gambar 3.8
DFD Level 3 Proses Peserta Kuliah... 34
Gambar 3.9
DFD Level 3 Proses Nilai Peserta Kuliah... 34
Gambar 3.10
DFD Level 3 Materi Kuliah ... 35
Gambar 3.11
DFD Level 3 Tugas Kuliah... 36
Gambar 3.12
DFD Level 3 Manajemen Mahasiswa... 37
Gambar 3.13
DFD Level 3 Manajemen Mahasiswa... 37
Gambar 3.14
DFD Level 3 Manajemen Mata Kuliah... 38
Gambar 3.15
DFD Level 3 Manajemen Kuliah... 39
Gambar 3.16
Conceptual Data Model ... 41
Gambar 3.17
Physical Data Model ... 42
Gambar 3.18
Rancangan Antarmuka Halaman Depan Administrator... 48
Gambar 3.19
Rancangan Antarmuka Halaman Utama Administrator ... 49
Gambar 3.20
Rancangan Antarmuka Halaman Depan Dosen... 50
Gambar 3.21
Rancangan Antarmuka Halaman Utama Dosen... 51
Gambar 3.22
Rancangan Antarmuka Halaman Depan Mahasiswa ... 52
Gambar 3.23
Rancangan Antarmuka Halaman Utama Mahasiswa... 52
Gambar 4.1
Script form login ... 55
Gambar 4.2
Javascript animasi login ... 56
Gambar 4.3
Script cek_login.php ... 56
Gambar 4.4
Javascript untuk form JQuery ... 58
Gambar 4.5
Script form upload materi ... 58
Gambar 4.6
Script proses upload materi... 59
Gambar 4.7
Script halaman manajemen kuliah ... 60
Gambar 4.8
Javascript untuk halaman manajemen kuliah ... 61
Gambar 4.9
Halaman login administrator... 63
Gambar 4.10
Halaman utama administrator ... 64
Gambar 4.11
Halaman manajemen mahasiswa ... 65
Gambar 4.12
Halaman tambah data mahasiswa ... 65
Gambar 4.13
Halaman edit data mahasiswa ... 66
Gambar 4.14
Halaman manajemen dosen ... 66
vi
Gambar 4.16
Halaman edit data dosen ... 67
Gambar 4.17
Halaman manajemen jurusan ... 68
Gambar 4.18
Halaman tambah data jurusan ... 68
Gambar 4.19
Halaman edit data jurusan... 69
Gambar 4.20
Halaman manajemen mata kuliah ... 69
Gambar 4.21
Halaman tambah data mata kuliah ... 70
Gambar 4.22
Halaman edit data mata kuliah... 70
Gambar 4.23
Halaman manajemen kuliah... 71
Gambar 4.24
Halaman tambah data kuliah... 71
Gambar 4.25
Halaman edit data kuliah ... 72
Gambar 4.26
Halaman ubah password ... 72
Gambar 4.27
Halaman selamat datang untuk dosen... 73
Gambar 4.28
Halaman profil dosen ... 73
Gambar 4.29
Halaman kuliah ... 74
Gambar 4.30
Tampilan form upload materi ... 74
Gambar 4.31
Tampilan daftar materi... 75
Gambar 4.32
Halaman peserta kuliah... 75
Gambar 4.33
Halaman penilaian ... 76
Gambar 4.34
Halaman penugasan ... 76
Gambar 4.35
Halaman daftar jawaban tugas ... 77
Gambar 4.36
Halaman awal e-learning untuk mahasiswa... 77
Gambar 4.37
Halaman utama e-learning ... 78
Gambar 4.38
Halaman daftar perkuliahan ... 79
Gambar 4.39
Halaman detail perkuliahan ... 79
Gambar 4.40
Halaman detail materi perkuliahan ... 80
Gambar 4.41
Halaman download materi ... 80
Gambar 4.42
Halaman tugas... 81
Gambar 4.43
Halaman detail tugas... 81
Gambar 4.44
Halaman upload tugas... 82
Gambar 4.45
Halaman Peserta... 82
Gambar 4.46
Halaman lihat profil peserta lain... 83
Gambar 4.47
Halaman profil user... 83
Gambar 4.48
Halaman utama forum... 84
Gambar 4.49
Halaman topik forum ... 85
Gambar 4.50
Halaman reply forum ... 85
Gambar 5.1
Uji Coba Halaman Login Admin ... 87
Gambar 5.2
Uji Coba Halaman Utama Admin... 87
Gambar 5.3
Uji Coba Halaman Utama Admin... 88
Gambar 5.4
Halaman hasil tambah kuliah... 88
Gambar 5.5
Uji Coba Form Login dosen ... 89
Gambar 5.6
Halaman utama dosen ... 90
Gambar 5.7
Uji Coba Halaman Ubah Profil Dosen... 90
Gambar 5.8
Halaman kuliah dosen... 91
Gambar 5.9
Uji Coba Form Upload Materi ... 92
Gambar 5.10
Uji Coba Form Penugasan ... 92
Gambar 5.11
Tampilan data penugasan... 93
Gambar 5.12
Halaman utama e-learning ... 93
vii
Gambar 5.18
Halaman detail tugas... 96
Gambar 5.19
Uji Coba Form Upload Tugas ... 97
Gambar 5.20
Halaman profil user... 97
Gambar 5.22
Uji Coba Form Ganti Foto ... 98
Gambar 5.23
Uji Coba Pada Browser Opera/9.80... 99
Gambar 5.24
Hasil Eksekusi Uji Coba Pada Browser Opera/9.80 ... 99
Gambar 5.25
Uji Coba Pada Browser Mozilla Firefox Version 3.6.13... 100
Gambar 5.26
Hasil Uji Coba Pada Mozilla Firefox Version 3.6.13 ... 100
Gambar 5.27
Uji Coba Pada Browser Internet Explorer 8 ... 101
viii
DAFTAR TABEL
Tabel 3.1
Tabel Jurusan ... 43
Tabel 3.2
Tabel Mata Kuliah ... 43
Tabel 3.3
Tabel Dosen ... 43
Tabel 3.4
Tabel Kuliah ... 44
Tabel 3.5
Tabel Mahasiswa ... 45
Tabel 3.6
Tabel Materi... 45
Tabel 3.7
Tabel Perkuliahan ... 45
Tabel 3.8
Tabel Tugas... 46
Tabel 3.9
Tabel Detail Tugas ... 46
Tabel 3.10
Tabel Forum... 47
ix
ABSTRAK ... i
KATA PENGANTAR ... ii
DAFTAR GAMBAR ...v
DAFTAR TABEL... viii
DAFTAR ISI... ix
BAB
I
PENDAHULUAN ...Error! Bookmark not defined.
1.1.
Latar Belakang ...Error! Bookmark not defined.
1.2. Perumusan Masalah ...Error! Bookmark not defined.
1.3. Batasan Masalah ...Error! Bookmark not defined.
1.4. Tujuan ...Error! Bookmark not defined.
1.5. Manfaat ...Error! Bookmark not defined.
1.6. Metode Analisa ...Error! Bookmark not defined.
1.7. Sistematika Pembahasan ...Error! Bookmark not defined.
BAB II TINJAUAN PUSTAKA ...Error! Bookmark not defined.
2.1. Sekolah Tinggi Teknik YPM SidoarjoError! Bookmark not
defined.
2.2. E-learning...Error! Bookmark not defined.
2.3. Web Arsitektur...Error! Bookmark not defined.
2.4. PHP ...Error! Bookmark not defined.
2.5. AJAX ...Error! Bookmark not defined.
2.6. MySQL ...Error! Bookmark not defined.
2.6.1.Koneksi Database MySQL dengan PHPError! Bookmark
not defined.
2.6.2.Membuat Tabel pada MySQLError! Bookmark not
defined.
2.6.3.Memasukkan data pada tabel
Error! Bookmark not defined.
2.6.4.Menampilkan data dari tabel.Error! Bookmark not defined.
BAB III ANALISA DAN PERANCANGAN SISTEMError! Bookmark not
defined.
x
4.2.3.Implementasi Proses Manajemen KuliahError! Bookmark
not defined.
4.3. Implementasi Antarmuka...Error! Bookmark not defined.
4.3.1.Implementasi Halaman AdministratorError! Bookmark not
defined.
4.3.2.Implementasi Halaman DosenError! Bookmark not
defined.
4.3.3.Implementasi Halaman MahasiswaError! Bookmark not
defined.
4.3.4.Implementasi Halaman ForumError! Bookmark not
defined.
BAB
V
UJI
COBA
DAN
EVALUASI
PROGRAMError! Bookmark not
defined.
5.1. Uji Coba Sistem ...Error! Bookmark not defined.
5.2. Uji Coba Halaman Administrator ...Error! Bookmark not defined.
5.2.1.Uji Coba Halaman Login AdminError! Bookmark not
defined.
5.2.2.Uji Coba Halaman Utama AdminError! Bookmark not
defined.
5.2.3.Uji Coba Form Tambah KuliahError! Bookmark not
defined.
5.3. Uji Coba Halaman Dosen ...Error! Bookmark not defined.
5.3.1.Uji Coba Halaman Login DosenError! Bookmark not
defined.
5.3.2.Uji Coba Halaman Utama DosenError! Bookmark not
defined.
5.3.3.Uji Coba Form Ubah Profil DosenError! Bookmark not
defined.
5.3.4.Uji Coba Halaman Kuliah...Error! Bookmark not defined.
5.3.5.Uji Coba Form Upload MateriError! Bookmark not
defined.
5.3.6.Uji Coba Form Penugasan ....Error! Bookmark not defined.
5.4. Uji Coba Halaman Mahasiswa...Error! Bookmark not defined.
5.4.1.Uji Coba Halaman Utama MahasiswaError! Bookmark not
defined.
5.4.2.Uji Coba Halaman PerkuliahanError! Bookmark not
defined.
5.4.3.Uji Coba Halaman Detail PerkuliahanError! Bookmark not
defined.
5.4.4.Uji Coba Download Materi PerkuliahanError! Bookmark
not defined.
5.4.5.Uji Coba Upload Tugas ...Error! Bookmark not defined.
5.4.6.Uji Coba Halaman Profil MahasiswaError! Bookmark not
defined.
5.4.7.Uji Coba Form Ubah Foto Profil Mahasiswa ...
Error!
Bookmark not defined.
xi
5.5.3.Uji Coba Pada Browser Internet Explorer 8 ...
Error!
Bookmark not defined.
1
1.1. Latar Belakang
Sistem pembelajaran pada dunia pendidikan selama ini masih menggunakan sistem pembelajaran secara konvensional, sistem ini kental dengan suasana instruksional dan dirasa kurang sesuai dengan perkembangan ilmu pengetahuan dan teknologi yang demikian pesat. Lebih dari itu kewajiban pendidikan dituntut untuk juga memasukkan nilai-nilai moral, kreatifitas, dan kemandirian yang sangat sulit dilakukan dalam sistem pembelajaran yang konvensional.
Untuk mengatasi permasalahan pada sistem pembelajaran konvensional tersebut, dapat dibuatkan sebuah sistem pembelajaran yang baru, dimana mahasiswa bisa belajar tanpa harus berada dalam ruang dan waktu yang sama. Selain itu juga bisa belajar dengan tahapan dan cakupan yang diinginkan. Fasilitas komunikasi dan interaksi dalam sistem tersebut juga akan membuat interaksi dosen dan mahasiswa tidak hanya terbatas pada ruangan kelas saja tapi bisa diperluas dengan komunikasi secara elektronik melalui internet.
Dalam mengembangkan sistem pembelajaran secara elektronik atau biasa
disebut dengan e-learning ini, tidak sekedar menyajikan materi pelajaran kedalam internet tetapi perlu dikembangkan secara logis dan senantiasa memegang prinsip
pembelajaran. Begitu pula desain yang sederhana, personal cepat serta unsur
hiburan baik berupa materi dalam bentuk tulisan (teks, html, file PDF dan
2
Akhir-akhir ini, muncul trend baru dalam pengembangan aplikasi web di
internet yang disebut sebagai AJAX. AJAX merupakan model baru untuk antar-muka aplikasi web yang lebih responsif dan cepat layaknya aplikasi desktop.
Halaman yang memanfaatkan teknologi AJAX lebih berlaku sebagai aplikasi yang berdiri sendiri ketimbang sebagai sebuah halaman web. Mengklik
suatu link pada halaman web berteknologi AJAX akan membuat halaman terbarui secara dinamis, sementara browser tidak perlu memanggil ulang seluruh halaman. Dengan demikian diperoleh peningkatan kecepatan respon. Oleh karena hal-hal
diatas, maka dalam tugas akhir ini AJAX dipilih untuk diimplementasikan dalam pembuatan sistem e-learning yang fungsional dan interaktif. Implementasi AJAX
akan terlihat pada bagian interface dari sistem ini.
Melalui sistem e-learning tersebut diharapkan dapat membantu dosen dalam memperbaiki efektivitas dan efisiensi proses pembelajaran serta membantu
dalam pencapaian tujuan-tujuan pembelajaran. Selain itu, mahasiswa diharapkan
dapat lebih mudah memperoleh informasi-informasi tentang perkuliahan yang
diikuti sehingga dapat lebih giat dalam mengikuti aktivitas perkuliahan.
1.2. Perumusan Masalah
a. Bagaimana pengimplemetasian AJAX sebagai teknik pemrograman
berbasis web untuk menciptakan aplikasi yang lebih responsif ?
b. Bagaimana membuat aplikasi e-learning yang user friendly agar peserta
didik tidak merasa bosan belajar didepan internet ?
1.3. Batasan Masalah
Batasan-batasan masalah yang diberikan sesuai dengan permasalahan yang telah diterangkan diatas, antara lain :
a. Sistem ini bersifat sebagai fasilitator, data-data tentang materi perkuliahan, penugasan yang sepenuhnya diperoleh dari dosen.
b. Proses yang ditangani fokus pada autentifikasi pengguna, penugasan dari dosen kemahasiswa, evaluasi oleh dosen, komunikasi antara dosen dan mahasiswa melalui fasilitas forum diskusi dan pengiriman pesan yang ada pada sistem.
c. Sistem ini dikembangkan dengan menggunakan PHP sebagai side scriptnya dan MySQL sebagai databasenya. Serta menggunakan AJAX
sebagai teknik programmingnya.
1.4. Tujuan
Adapun tujuan dari penelitian ini adalah untuk membuat sebuah sistem pembelajaran secara elektronik yang user friendly dengan menggunakan teknologi
4
1.5. Manfaat
Adanya penelitian tentang pembuatan sistem ini diharapkan dapat memiliki manfaat sebagai berikut :
a. Mahasiswa dapat lebih mudah memperoleh informasi-informasi tentang mata kuliah yang diikuti sehingga lebih giat dalam mengikuti aktivitas pelajaran.
b. Dapat membantu dosen dalam proses pembelajaran, sehingga proses belajar lebih efektif dan mutu pendidikan lebih meningkat.
c. Memudahkan administrator dalam memaintenance data, dalam hal ini manambah data, mengubah data, menghapus data dan mencari data.
1.6. Metode Analisa
Pembuatan tugas akhir ini terbagi menjadi beberapa tahap pengerjaan yang tertera sebagai berikut :
a. Survey Lapangan
Pada tahap ini untuk penyusunan laporan dan requeriment yang dibutuhkan dalam pengembangan aplikasi dilakukan dengan metode wawancara dengan pihak Sekolah Tinggi Teknik Yayasan Sosial dan Pendidikan Ma’arif.
b. Studi Litertur
c. Analisa dan Perancangan Aplikasi
Dari survey lapangan dan study litertur akan dibuat tugas akhir tentang aplikasi yang akan dibuat serta dilakukan analisa kebutuhan system, selain itu juga dilakukan perancangan awal sistem informasi yang akan dibuat, sehingga akan dihasilkan sistem yang akan digunakan sesuai dengan yang diharapkan yang sebelumnya telah dirancang.
d. Pengembangan Aplikasi
Pada tahap ini aplikasi yang telah dirancang sebelumnya akan diimplementasikan ke komputerisasi dengan menggunakan PHP untuk membuat aplikasinya dan MySQL untuk menyimpan data-data.
e. Uji Coba dan Evaluasi
Pada tahap ini aplikasi yang telah dibuat ini akan diuji coba penggunaannya dan juga akan dievaluasi untuk kelayakan sistem tersebut untuk digunakan, serta errorhandling-nya.
f. Penyusunan Buku Tugas Akhir
Pada tahap ini merupakan tahap terakhir dalam penyusunan Tugas Akhir. Buku ini disusun sebagai laporan dari seluruh proses pengerjaan Tugas Akhir, dan dari hasil laporan dari buku ini akan memudahkan pembaca untuk mengetahui alur dari aplikasi ini bekerja atau sebagai penduan untuk pembaca.
1.7. Sistematika Pembahasan
6
BAB I : PENDAHULUAN
Bab ini berisi tentang deskripsi umum tentang Tugas Akhir yang meliputi diantaranya latar belakang, batasan masalah, tujuan, manfaat, serta metodologi serta sistematika pembahasan.
BAB II : TINJAUAN PUSTAKA
Bab ini berisi tentang konsep dari teori pembelajaran yang menjadi dasar pembuatan Tugas Akhir diantaranya tentang e-learning,Web Arsitektur,PHP, AJAX, dan MySQL.
BAB III : ANALISA DAN PERANCANGAN SISTEM
Bab ini berisi tentang analisa dari sistem yang akan dibuat dan perncangan sistem yang meliputi diantaranya deskripsi umum sistem, kebutuhan sistem, perancangan proses latar dan perancangan antar muka (interface).
BAB IV : IMPLEMENTASI
Bab ini berisi tentang hasil implementasi dari perancangan sistem sebelumnya yang meliputi implementasi basis data, implementasi design database, implementasi pembuatan program dan implementasi form-form antarmuka aplikasi
(interface).
BAB V : UJI COBA DAN EVALUASI
BAB VI : PENUTUP
8
BAB II
TINJAUAN PUSTAKA
Dalam bab ini akan dibahas beberapa teori dasar yang akan digunakan
dalam pengerjaan tugas akhir ini. Bab ini akan membahas beberapa konsep yang
berhubungan dengan e-learning. Selain itu juga membahas teori-teori yang
berkaitan dengan AJAX, PHP, XHTML, dan MySQL.
2.1. Sekolah Tinggi Teknik Yayasan Pendidikan dan Sosial Ma’arif
Sidoarjo
Sekolah Tinggi Teknik Yayasan Pendidikan dan Sosial Ma’arif (disingkat:
STT YPM) Sidoarjo berada di Jalan ngelom Megare, Sepanjang, Taman, Sidoarjo.
STT ini memiliki status terdaftar : SK. Mendikbud. No. 37/D/O/1998 dan SK.
Dikti No. 307/DIKTI/Kep/2000.
STT YPM Sidoarjo ini terdapat 3 jurusan antara lain:
a. Jurusan Teknik Komputer (D3)
b. Teknik Mesin (S1)
c. Teknik Industri (S1)
2.2. E-learning
Istilah e-Learning mengandung pengertian yang sangat luas, sehingga
banyak pakar yang menguraikan tentang definisi eLearning dari berbagai sudut
pandang. Salah satu definisi yang cukup dapat diterima banyak pihak misalnya
“e-Learning merupakan suatu jenis belajar mengajar yang
memungkinkan tersampaikannya bahan ajar ke siswa dengan menggunakan media
Internet, Intranet atau media jaringan komputer lain.”
LearnFrame.Com dalam Glossary of eLearning Terms (Glossary, 2001)
menyatakan suatu definisi yang lebih luas bahwa:
“e-Learning adalah sistem pendidikan yang menggunakan aplikasi
elektronik untuk mendukung belajar mengajar dengan media Internet, jaringan
komputer,maupun komputer standalone.”
Actor yang ada dalam pelaksanakan e-Learning boleh dikatakan sama
dengan proses belajar mengajar konvensional, yaitu perlu adanya pengajar
(instruktur) yang membimbing, peserta didik yang menerima bahan ajar dan
administrator yang mengelola administrasi dan proses belajar mengajar.
Metode Penyampaian Bahan Ajar Di E-Learning Ada Dua:
a. Synchrounous e-Learning: Guru dan siswa dalam kelas dan waktu
yang sama meskipun secara tempat berbeda.
b. Asynchronous e-Learning: Guru dan siswa dalam kelas yang sama
(kelas virtual), meskipun dalam waktu dan tempat yang berbeda.
2.3. Web Arsitektur
Website adalah sebutan bagi sekelompok halaman web (web page) yang
umumnya merupakan bagian dari suatu nama domain (domain name) di World
Wide Web (WWW) pada Internet. Web adalah ruang informasi di dalam internet
10
menemukan informasi dengan mengikuti link yang disediakan dalam dokumen
web yang ditampilkan dalam web browser. Informasi web didistribusikan melalui
pendekatan hyperteks, yang memungkinkan suatu teks pendek menjadi acuan
untuk membuka dokumen lain. Halaman-halaman sebuah situs web (website)
diakses dari sebuah URL.
Server web adalah sebuah perangkat lunak server yang berfungsi
menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser
web dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web
yang umumnya berbentuk dokumen HTML. Browser web adalah perangkat lunak
yang berfungsi menampilkan dan melakukan interaksi dengan dokumen-dokumen
yang disediakan oleh server web.
Aplikasi web terdiri dari tampilan (user interface), proses bisnis
(program) dan pengolahan data (DBMS). Presentation Logic adalah bagian yang
berhubungan langsung dengan pemakai. Supaya isi dapat bersifat dinamis, maka
data yang ditampilkan tersebut sebelum dikirim ke web browser diubah terlebih
dahulu dengan memanfaatkan variable yang nilainya diambil dari DBMS.
Business Logic adalah proses mengisi variable dan menyusun kode HTML dan
pekerjaan ini dikakukan oleh suatu program (middle ware). Data Access Logic
adalah tempat untuk melakukan pengolahan dan manajemen data.
Alur diagram mengenai arsitektur web dapat dilihat pada gambar 2.1
Gambar 2.1 Arsitektur Web
2.4. PHP
PHP adalah teknologi yang dibuat oleh Rasmus Lerdorf. PHP singkatan
dari PHP Hypertext Preprocessor. PHP bisa berinteraksi dengan hampir semua
teknologi web yg sudah ada. PHP merupakan bahasa script yang dibundel
bersama HTML dan dijalankan di sisi server. Bahasa ini memungkinkan para
pembuat aplikasi web menyajikan halaman HTML dinamis dan interktif yang
dihasilkan oleh server, meskipun teknologi baru semakin bermunculan terkait
dengan penyajian konten web yang dinamis dan interktif seperti penggunaan
AJAX, OpenLAZLO, atau yang sedang hangat dibicarakan yaitu Silverlight buatan
12
a. Perhatikan script PHP dalam HTML dalam file coba1..php
<HTML><HEAD><TITLE></TITLE></HEAD> <BODY>
<?php print(“Hallo Belajar PHP”);?>
</BODY> </HTML>
b. Jika file tersebut dijalankan melalui browser cara kerjanya sebagai berikut:
Gambar 2.2 Prinsip kerja PHP
Prinsip kerja PHP diawali dengan permintaan suatu halaman web oleh
browser di komputer client, browser mendapatkan alamat dari web server,
mengidentifikasikan halaman yang dikehendaki dan menyampaikan segala macam
informasi, misalnya mencari informasi dari suatu database. Selanjutnya web
server akan mencarikan berkas dan memberikan isi ke mesin PHP dan mesin
itulah yang memproses dan memberikan hasilnya berupa kode html ke web
server, selanjutnya web server menyampaikan ke Client.
Kode PHP menyatu dengan tag – tag HTML dalam satu file. Kode PHP
diawali dengan tag <? atau <?PHP dan ditutup dengan ?>. Berikut ini adalah cara
<HTML><HEAD><TITLE></TITLE></HEAD> <BODY>
<?php print(“Hallo Belajar PHP”);?>
</BODY> </HTML>
Secara default semua file PHP harus diletakkan didalam direktori root.
Biasanya terletak di didalam direktori htdocs bila anda menggunakan engine
phpTriad atau menggunakan paket Apache secara sendiri. Atau direktori www
bila anda menggunakan engine appServer. Contoh pemanggilan pada browser
adalah sebagai berikut : Misal direktori root anda ditambah satu folder bernama
laporan, maka pemanggilannya adalah http://localhost/laporan/coba1.php.
Hasil dari eksekusi dari file coba1.php, seperti yang terlihat pada gambar
dibawah ini :
Gambar 2.3 Hasil dari file coba1.php
2.5. AJAX
AJAX merupakan kepanjangan dari Asynchronous Javascript And XML.
14
suatu teknik yang memungkinkan untuk membuat aplikasi web yang interaktif.
Dengan menggunakan AJAX, aplikasi web dapat berinteraksi dengan server di
latar belakang sehingga tidak memengaruhi halaman web secara keseluruhan.
Gambar 2.4 Model aplikasi web tradisional
Pada aplikasi web yang berbasis AJAX terdapat bagian yang disebut
lapisan AJAX. Lapisan inilah yang mengatur komunikasi antar klien dan server.
Butir penting yang perlu diperhatikan dalam lapisan AJAX :
a. Lapisan AJAX meminta layanan keserver atau tidak, tergantung pada jenis
layanan dari antarmuka. Sebagai contoh validasi terhadap objek formulir
tidak perlu melakukan permintaan keserver karena harus berhubungan
dengan database.
b. Sekalipun penambahan lapisan AJAX berkesan memperlambat proses
(karena komunikasi tidak lagi dilakukan secara langsung), pada
kenyataannya yang terjadi adalah sebaliknya. Hal ini karena permintaan
yang dilakukan oleh lapisan AJAX menghasilkan informasi yang jauh
lebih sedikit disbanding kalau yang diminta adalah untuk keseluruhan
halaman.
c. Lapisan AJAX berkeja dengan pendekatan asinkron. Asinkron berarti
bahwa klien bisa meminta layanan dari server dan tidak perlu menunggu
sampai server melayaninya. Dengan demikian, saat informasi dari server
belum didapat, layanan kepada pemakai tetap bisa dilakukan.
d. Komunikasi antara klien dan server tidak perlu mengubah keseluruhan
antarmuka dalam halaman web, tetapi cukup hanya bagian tertentu yang
terpengaruh. Hal seperti ini tidak bisa dilakukan pada aplikasi web yang
tidak menggunakan AJAX.
Istilah AJAX pertama kali diperkenalkan oleh Jesse James Garret,
presiden dan pendiri perusahaan konsultan adaptive path pada tahun 2005.
Menurut beliau didalam artikel yang berjudul “AJAX: A New Approach to Web
16
a. XHTML (Extensible HyperText Markup Language), sebagai perluasan
dari HTML.
b. CSS (Cascading Style Sheets) sebagai pemformat bagian dari dokumen.
c. DOM (Document Object Model) untuk mengatur interaksi dan penampilan
isi HTML dan XML secara dinamis.
d. XML (Extensible Markup Language) memungkinkan untuk melakukan
pertukaran data.
e. XSLT (Extensible Stylesheet Language Transformation) adalah bahasa
berbasis XML yang ditujukan untuk melakukan transformasi dokumen
XML kebentuk yang lain.
f. XMLHttpRequest untuk melakukan pertukaran data secara asinkron.
g. Javascript sebagai bahasa untuk membentuk lapisan AJAX.
2.6. MySQL
MySQL adalah sebuah implementasi dari sistem manajemen basisdata
relasional (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL
(General Public License). Setiap pengguna dapat secara bebas menggunakan
MySQL, namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan
produk turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan
salah satu konsep utama dalam basisdata yang telah ada sebelumnya; SQL
(Structured Query Language). SQL adalah sebuah konsep pengoperasian
basisdata, terutama untuk pemilihan atau seleksi dan pemasukan data, yang
Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara
kerja pengoptimasi-nya dalam melakukan proses perintah-perintah SQL yang
dibuat oleh pengguna maupun program-program aplikasi yang memanfaatkannya.
Sebagai peladen basis data, MySQL mendukung operasi basisdata transaksional
maupun operasi basisdata non-transaksional.
2.6.1. Koneksi Database MySQL dengan PHP
Berikut ini adalah contoh penulisan script PHP untuk koneksi ke dalam
databaseMySql :
<?php
$hostmysql = “localhost”;
$username = “mysqlusername”;
$password = “mysqlpassword”;
$database = “namadatabase”;
$conn = mysql_connect(”$hostmysql”, ”$username”,
”$password”);
if (!$conn) die (”Koneksi gagal”);
mysql_select_db($database,$conn) or die (”Database tidak ditemukan”);
?>
Penjelasannya :
a.mysql_connect
Digunakan untuk membuat koneksi dari PHP ke server MySQL. Data
mengenai hostname, mysql username, dan password yang digunakan telah
diwakilkan oleh variabel $hostmysql, $username, $password.
Penulisannya akan sama dengan:
18
b. mysql_select_db
Untuk memilih database yang akan digunakan. Dalam contoh script diatas
database diwakilkan oleh variable $database
c. if (!$conn) die (”Koneksi gagal”);
Jika koneksi gagal dibuat (!$conn), maka akan muncul pesan peringatan
“koneksi gagal”.
2.6.2. Membuat Tabel pada MySQL
Berikut ini adalah contoh penulisan script PHP untuk membuat tabel ke
dalam databaseMySql :
<?php
include (”db_config.php”);
mysql_query(”CREATE TABLE user (nama VARCHAR(20),namablkg VARCHAR(20), kota VARCHAR(20))”);
?>
Penjelasannya :
a. include (”db-config.php”);
Perintah include digunakan untuk mengikut sertakan sebuah file (pada
contoh diatas adalah file db-config.php).
b. mysql_query
Format umum dari perintah ini adalah mysql_query(string dari query).
2.6.3. Memasukkan data pada tabel
Berikut ini adalah contoh penulisan script PHP untukm memasukkan
<?php
include (”db-config.php”);
$insert = “INSERT INTO users (namadpn,namablkg,negara)VALUES (’Saya’,'Sendiri’,'Indonesia’)”;
mysql_query($insert) or die (”tidak dapat memasukkan data ke tabel”);
?>
2.6.4. Menampilkan data dari tabel
Berikut ini adalah contoh penulisan script PHP untuk menampilkan data pada tabel ke dalam databaseMySql :
<?php
include (”db_config.php”); $query = “SELECT * FROM user”; $result = mysql_query($query);
$numrows = mysql_num_rows($result); while($row = mysql_fetch_array($result)){ echo “Jumlah data: $numrows <br>”;
echo “Nama Depan: $row[namadpn] <br>”; echo “Nama Belakang: $row[namablkg] <br>”; echo “Negara: $row[negara]“; }
?>
Penjelasannya :
a. mysql_num_rows
Digunakan untuk menghitung jumlah baris yang didapat dari hasil
eksekusi query (mysql_query).
b. while ( ) { }digunakan untuk melakukan perulangan selama data yang
yang diinginkan masih ada.(dalam contoh diatas: akan menampilkan
semua isi dari table).
c. mysql_fetch_array
20
BAB III
ANALISA DAN PERANCANGAN SISTEM
Bab ini akan menjelaskan mengenai analisa sistem perangkat lunak yang
akan dibuat. Proses perancangan sistem dalam bab ini akan dibagi menjadi 2 (dua)
bagian yaitu : analisa sistem dan perancangan sistem .
3.1. Analisa Sistem
Dalam sub bab ini akan dijelaskan mengenai analisa dan pernacangan
sistem pembeljaran elektronik. Sistem ini nantinya akan dijadikan media
pembelajaran secara online untuk sekolah tinggi atau universitas khususnya
Sekolah Tinggi YPM Sidoarjo.
Aplikasi ini dikembangkan dengan menggunakan teknologi AJAX sebagai
teknik programmingnya. Pengguna aplikasi ini terdiri dari administrator, dosen
dan mahasiswa yang mempunyai hak akses sesuai kebutuhan masing-masing
pengguna. Administrator merupakan pengguna yang mempunyai hak akses
tertinggi dalam sistem ini. Dosen mempunyai peran yang sangat penting dalam
kelangsungan proses pembelajaran. Dalam hal ini dosen mempunyai tugas untuk
mengelola isi rencana pembelajaran mata kuliah yang diajarkan. Mahasiswa
berhak melihat dan mengambil materi dalam mata kuliah yang diikutinya. Selain
itu dapat melihat informasi atau pengumuman dalam mata kuliah yang diikuti dan
3.2. Perancangan Sistem
Dalam rancang bangun web interaktif ini, dibuat beberapa perancangan
yang menjelaskan penggambaran sistem secara umum dan menyeluruh, sistem
perancangan tersebut diantaranya adalah : deskripsi umum sistem, klasifikasi
pengguna sistem, perancangan proses, perancangan data, dan parancangan antar
muka (interface).
3.2.1. Deskripsi Umum Sistem
Deskripsi umum dalam sistem ini dapat dilihat dalam bentuk diagram
[image:33.612.161.480.384.684.2]sebagai berikut :
22
Dari Gambar 3.1 dapat dijelaskan sebagai berikut: Administrator
bertugas untuk mengelola sistem serta melakukan manajemen data (data
mahasiswa, data dosen, data mata kuliah, dan data jurusan). Selain itu
administrator juga dapat mengatur pengguna lain beserta hak aksesnya. Dosen
mempunyai tugas untuk mengelola materi mata kuliah serta pengumuman yang
diajarkan olehnya. Selain itu dosen juga diberi fasilitas untuk member. Untuk
dapat tetap berdiskusi dengan mahasiswanya dapat dilakukan melalui suatu forum
kelas. Mahasiswa berhak melihat dan mengambil materi dalam mata kuliah yang
diikutinya. Selain itu dapat melihat informasi atau pengumuman dalam mata
kuliah yang diikuti serta melihat dan mengumpulkan tugas.
3.2.2. Klasifikasi Pengguna Sistem
Adapun pengguna dari sistem ini terdiri dari 3 (tiga) kategori pengguna
antara lain :
a. Administrator
Administrator merupakan pengguna yang mempunyai hak akses tertinggi
dalam sistem ini. Administrator bertugas untuk mengelola aplikasi ini serta
melakukan manajemen terhadap berbagai data seperti data mahasiswa, data
dosen, data mata kuliah, dan data fakultas/jurusan. Selain itu admin juga
dapat mengatur pengguna lain beserta hak aksesnya.
b. Dosen
Dalam sistem ini dosen mempunyai peran yang sangat penting dalam
untuk mengelola isi rencana pembelajaran mata kuliah yang diajarkan.
Rencana pembelajaran yang dimaksud yaitu meliputi : materi mata kuliah
serta pengumuman yang diajarkan olehnya. Selain itu dosen juga diberi
fasilitas untuk memberi kepada mahasiswa. Untuk dapat tetap berdiskusi
dengan mahasiswanya dapat dilakukan melalui suatu forum kelas.
c. Mahasiswa
Mahasiswa berhak melihat dan mengambil materi dalam mata kuliah yang
diikutinya. Selain itu dapat melihat informasi atau pengumuman dalam mata
kuliah yang diikuti serta melihat dan mengumpulkan tugas.
3.2.3. Perancangan Proses
Dalam sub-bab ini dijelaskan mengenai perancangan proses dari sistem
yang akan dibuat nantinya. Dalam perancangan proses ini akan dijelaskan dalam
perancangan proses menggunakan Data Flow Diagram (DFD).
1) DFD Level Contex
DFD level Contex menjelaskan entitas-entitas dan proses-proses yang
terjadi secara umum di dalam aplikasi e-learning. Pada DFD level Contex ini
masing-masing entitas akan berinteraksi dengan sistem dan data masukan yang
selanjutnya memperoleh data keluaran.
Rancangan DFD level Contex pada aplikasi ini ada beberapa entitas
eksternal yang terlibat dalam situs e-learning antara lain Fakultas, Dosen, dan
24
peran untuk masing-masing entitas diatas sudah dijelaskan pada sub bab 3.2.2
[image:36.612.128.511.207.608.2]yaitu tentang klasifikasi pengguna sistem. Untuk rancangannya dapat dilihat pada
gambar 3.2 berikut ini :
2) DFD Level 0
[image:37.612.127.513.148.657.2]Rancangan DFD level 0 dapat dilihat pada gambar 3.3 dibawah ini :
26
DFD level 0 menjelaskan lebih terperinci setiap proses yang ada di DFD
level 0. Pada DFD level 0 untuk aplikasi ini terdapat beberapa proses antara lain :
a. Proses Dosen
Pada proses ini terdapat satu entitas yaitu fakultas. Fakultas
memasukkan data detail dosen yang kemudian datanya akan disimpan
pada tabel dosen.
b. Proses fakultas
Pada proses ini terdapat satu entitas yaitu fakultas, fakultas harus
memasukkan username dan password admin untuk dapat mengakses menu
utama admin. Didalam menu utama, admin dapat mengupdate data-data
master mulai dari data mahasiswa, data jurusan, data mata kuliah, dan data
kuliah. Data yang sudah diupdate akan disimpan pada tabel
masing-masing yang ada pada database, dan kemudian fakultas dapat melihat hasil
dari data yang telah dimasukkan.
c. Proses E-learning
Pada proses ini terdapat dua entitas yaitu dosen dan mahasiswa.
Dosen yang sudah terdaftar sebagai pengajar dalam kuliah, dapat
mengupload materi yang kemudian akan disimpan dalam tabel materi,
dosen juga dapat memasukkan data peserta perkuliahaanya dan disimpan
pada tabel perkuliahan. Setelah memasukkan data peserta dosen dapat
memberikan soal tugas sesuai kuliah yang diajarkannya dan disimpan
dalam tabel tugas. Dosen juga dapat memasukkan nilai pada
perkuliahan. Sedangkan mahasiswa dapat melihat data materi yang telah
diupload oleh dosen, serta mendownload materi tersebut. Selain itu
mahasiswa juga dapat melihat data nilai, dan data tugas-tugas yang
diberikan oleh dosen. Setelah melihat tugas mahasiswa dapat mengerjakan
tersebut dan mengupload jawaban dari tugas yang diberikan dosen
sebelum batas tanggal yang ditentukan dosen. Data file tugas yang
diupload akan disimpan pada tabel detail tugas.
d. Proses Forum
Pada proses ini terdapat dua entitas yaitu dosen dan mahasiswa,
setiap entitas dapat membuat topik forum yang kemudian disimpan pada
tabel forum. Selain itu dapat memberikan reply pada topik yang sudah ada.
Reply tersebut kemudian disimpan pada tabel reply.
[image:39.612.186.454.491.675.2]3) DFD Level 1 Proses dosen
28
Gambar 3.4 adalah DFD level 1 Proses Dosen yang merupakan subproses
dari proses dosen yang ada pada DFD level 0 diatas, dimana didalamnya terdapat
dua proses yaitu update data dosen yang dilakukan oleh admin dan view dosen
untuk melihat data dosen.
4) DFD Level 1 Proses fakultas
DFD level 1 Proses fakultas merupakan subproses dari proses fakultas
yang ada pada DFD level 0. Rancangan DFD level 1 proses fakultas dapat dilihat
[image:40.612.160.480.338.656.2]pada gambar 3.5 dibawah ini :
Dari gambar 3.5 DFD level 1 proses fakultas, dapat dilihat bahwa pada DFD level
1 proses fakultas terdapat beberapa proses yaitu :
a. Proses cek login
Pada proses ini, dilakukan pengecekan username dan password yang dimasukkan oleh admin pada tabel admin apakah sudah valid. Jika
hasilnyavalid maka admin dapat melihat menu utama dari halaman admin.
b. Proses manajemen mahasiswa
Pada proses ini admin dapat memasukkan, mengubah serta menghapus
data mahasiswa yang ada pada tabel mahasiswa.
c. Proses manajemen jurusan
Pada proses ini fakultas dapat memasukkan, mengubah serta menghapus
data jurusan yang ada pada tabel jurusan.
d. Proses manajemen mata kuliah
Pada proses ini fakultas dapat memasukkan, mengubah serta menghapus
data mata kuliah yang ada pada tabel mata kuliah.
e. Proses manajemen kuliah
Pada proses ini fakultas dapat memasukkan, mengubah serta menghapus
data kuliah yang ada pada tabel kuliah.
5) DFD Level 1 Proses E-learning
30
a. Proses cek login
Pada proses ini dilakukan pengecekan pada username dan password yang dimasukkan oleh dosen, jika data yang dimasukkan valid, maka akan tampil menu utama dari halaman dosen.
b. Proses peserta kuliah
Pada proses ini dosen mendaftarkan peserta pada perkuliahan yang
diajarkannya. Data peserta kuliah akan dimasukkan kedalam tabel
perkuliahan.
c. Proses nilai peserta kuliah
Pada proses ini dosen memasukkan nilai peserta pada perkuliahan yang
diajarkannya. Data nilai peserta kuliah akan dimasukkan kedalam tabel
perkuliahan sesuai dengan NIM peserta.
d. Materi kuliah
Pada proses ini dosen dapat mengupdate data materi mulai dari upload
sampai dengan menghapus data, materi yang diupload dimasukkan
kedalam tabel materi. Materi yang sudah diupload oleh dosen dapat
dilihat dan didownload oleh mahasiswa.
e. Tugas kuliah
Pada proses ini dosen memasukkan data tugas, yang kemudian dapat
dilihat oleh mahasiswa. Setelah melihat soal tugas mahasiswa dapat
mengupload jawaban tugas. File dari jawaban tugas yang diupload akan
Rancangan dari DFD level 1 Proses e-learning dapat dilihat pada gambar 3.6 berikut ini:
32
6) DFD Level 1 Proses Forum
Rancangan dari DFD level 1 Proses forumdapat dilihat pada gambar 3.7
[image:44.612.133.507.205.638.2]berikut ini:
DFD level 1 Proses forum merupakan subproses dari proses forum yang
ada pada DFD level 0 diatas, dimana didalamnnya terdapat beberapa proses yaitu:
a. Proses Post Forum
Pada proses ini mahasiswa dan dosen dapat memasukkan postingan forum. Yang kemudian akan disimpan pada tabel forum.
b. Proses View Forum
Pada proses ini mahasiswa dan dosen dapat melihat data forum yang sudah
dimasukkan.
c. Proses Reply Forum
Pada proses ini mahasiswa dan dosen dapat memberikan reply pada
postingan forum. Reply tersebut akan disimpan pada tabel reply. d. Proses View Reply
Pada proses ini mahasiswa dan dosen dapat melihat data reply yang sudah dimasukkan.
7) DFD Level 2 Proses Peserta Kuliah
Gambar 3.8 adalah DFD level 2 proses peserta kuliah merupakan
subproses dari proses peserta kuliah yang ada pada DFD level 1 proses e-learning
diatas, dimana didalamnya terdapat dua proses yaitu tambah dan hapus peserta
yang dilakukan oleh dosen dan view peserta kuliah untuk melihat data peserta kuliah. Data peserta kuliah akan disimpan pada tabel perkuliahan. Selain
menambahkan, dosen juga dapat menghapus data peserta kuliah yang ada ditabel
34
Gambar 3.8 DFD Level 2 Proses Peserta Kuliah
8) DFD Level 2 Proses Nilai Peserta Kuliah
Gambar 3.9 adalah DFD level 2 proses nilai peserta kuliah merupakan
subproses dari nilai peserta kuliah yang ada pada DFD level 1 proses e-learning
diatas, dimana didalamnya terdapat dua proses yaitu update data nilai peserta yang
dilakukan oleh dosen dan view nilai peserta untuk melihat data nilai peserta.
9) DFD Level 2 Proses Materi Kuliah
Gambar 3.10 adalah DFD level 2 proses materi kuliah merupakan
subproses dari proses materi kuliah yang ada pada DFD level 2 proses e-learning
diatas, dimana didalamnya terdapat empat proses yaitu update data materi yang
dilakukan oleh dosen, view materi untuk melihat data materi kuliah, download
materi yang dilakukan mahasiswa dan melihat file materi. Data materi disimpan
pada tabel materi.
36
10) DFD Level 2 Proses Tugas Kuliah
Gambar 3.11 adalah DFD level 2 proses tugas kuliah merupakan
subproses dari nilai tugas kuliah yang ada pada DFD level 1 proses e-learning
diatas, dimana didalamnya terdapat enam proses antara lain : proses membuat soal
tugas, proses lihat data soal tugas, proses upload jawaban tugas, proses view
jawaban tugas, proses lihat file jawaban tugas, proses download jawaban tugas peserta.
Gambar 3.11 DFD Level 2 Tugas Kuliah
11) DFD Level 2 Manajemen Mahasiswa
Gambar 3.12 adalah DFD level 2 manajemen mahasiswa merupakan
subproses dari proses manajemen mahasiswa yang ada pada DFD level 1 proses
fakultas diatas, dimana didalamnya terdapat dua proses yaitu update data
Gambar 3.12 DFD Level 2 Manajemen Mahasiswa
[image:49.612.200.442.496.659.2]12) DFD Level 2 Manajemen Jurusan
Gambar 3.13 adalah DFD level 2 manajemen jurusan merupakan
subproses dari proses manajemen jurusan yang ada pada DFD level 1 proses
fakultas diatas, dimana didalamnya terdapat dua proses yaitu update data jurusan
yang dilakukan oleh fakultas dan view jurusan untuk melihat data jurusan.
38
[image:50.612.137.502.284.556.2]13) DFD Level 2 Manajemen Mata Kuliah
Gambar 3.14 adalah DFD level 2 manajemen mata kuliah merupakan
subproses dari proses manajemen mata kuliah yang ada pada DFD level 1 proses
fakultas diatas, dimana didalamnya terdapat dua proses yaitu update data mata
kuliah yang dilakukan oleh fakultas dan view mata kuliah untuk melihat data mata kuliah.
Gambar 3.14 DFD Level 2 Manajemen Mata Kuliah
14) DFD Level 2 Manajemen Kuliah
Gambar 3.15 adalah DFD level 2 manajemen kuliah merupakan subproses
dimana didalamnya terdapat dua proses yaitu update data kuliah yang dilakukan
oleh fakultas dan view kuliah untuk melihat data kuliah.
Gambar 3.15 DFD Level 2 Manajemen Kuliah
3.2.4. Perancangan Data
Perancangan data digunakan untuk membuat suatu database yang dibutuhkan oleh sistem informasi berbasis web yang dibuat. Database dapat didefinisikan dalam sejumlah sudut pandang sebagai berikut :
1. Himpunan kelompok data (arsip) yang saling berhubungan yang
diorganisasikan sedemikian rupa agar kelak dapat dimanfaatkan kembali
[image:51.612.165.476.181.454.2]40
2. Kumpulan data yang saling berhubungan yang disimpan secara bersama
sedemikian rupa dan tanpa pengulangan (redudansi) yang tidak perlu untuk
memenuhi berbagai kebutuhan.
3. Kumpulan file atau tabel atau arsip yang saling berhubungan yang tersimpan dalam media penyimpanan elektronik.
Rancangan basisdata adalah proses perancangan ER Data Model (ERD).
ERD dibuat berdasarkan pengamatan dunia nyata yang terdiri dari entitas dan
relasi antara entitas-entitas tersebut. Dibawah ini adalah ER Data Model dalam
bentuk CDM untuk E-learning STT YPM Sidoarjo.
1) Conseptual Data Model
Setelah pembuatan Data Flow Diagram di atas maka tahap selanjutnya
adalah pembuatan Entity Relationship Diagram yang biasa disingkat dengan
ERD. Untuk menggambar ERD yaitu menggunakan aplikasi Power Designer
version 6. Dalam ERD tersebut menjelaskan hubungan atau adanya keterkaitan
antara tabel satu dengan tabel yang lain.
Conceptual Data Model (CDM) memodelkan struktur logis dari keseluruhan aplikasi data, tidak tergantung pada software atau pertimbangan model struktur data. CDM yang valid dapat dikonversi ke PDM.
Rancangan CDM untuk aplikasi e-learning terdapat 10 tabel yaitu tabel dosen, mahasiswa, jurusan, matakuliah, kuliah, perkuliahan, materi, tugas, detail
tugas, forum, dan reply. Rancangan CDM untuk aplikasi ini dapat dilihat pada
Gambar 3.16 Conceptual Data Model
2) Physical Data Model
Model data ini dibuat dengan cara me-generate diagram data konseptual di atas. Diagram data fisik ini menghasilkan tabel-tabel yang akan digunakan dalam
42
fisik hasil pengembangan dari sebuah konsep.Untuk lebih jelasnya bisa dilihat
pada gambar 3.17.
Gambar 3.17 Physical Data Model
3.2.5. Perancangan Tabel
Tabel yang dibutuhkan dalam membuat sistem ini adalah :
a. Tabel Jurusan
[image:54.612.128.514.189.512.2]Tabel 3.1 Tabel Jurusan
b. Tabel Mata Kuliah
Tabel ini digunakan untuk menyimpan data mata kuliah. Field tabel ini antara lain :
Tabel 3.2 Tabel Mata Kuliah
c. Tabel Dosen
Tabel ini digunakan untuk menyimpan data dosen. Field tabel ini antara lain :
44
d. Tabel Kuliah
Tabel ini digunakan untuk menyimpan data kuliah. Field tabel ini antara lain :
Tabel 3.4 Tabel Kuliah
e. Tabel Mahasiswa
Tabel ini digunakan untuk menyimpan data mahasiswa. Field tabel ini antara lain :
f. Tabel Materi
Tabel ini digunakan untuk menyimpan data materi. Field tabel ini antara lain :
Tabel 3.6 Tabel Materi
g. Tabel Perkuliahan
Tabel ini digunakan untuk menyimpan data perkuliahan. Field tabel ini antara lain :
46
h. Tabel Tugas
Tabel ini digunakan untuk menyimpan data tugas. Field tabel ini antara lain:
Tabel 3.8 Tabel Tugas
i. Tabel Detail Tugas
Tabel ini digunakan untuk menyimpan data detail tugas. Field tabel ini antara lain :
j. Tabel Forum
Tabel ini digunakan untuk menyimpan data forum. Field tabel ini antara lain :
Tabel 3.10 Tabel Forum
k. Tabel Reply
Tabel ini digunakan untuk menyimpan data reply. Field- field pada tabel ini antara lain :
48
3.2.6. Perancangan Antarmuka
Pada tahap ini, rancangan yang dibuat berupa rancangan halaman-halaman
web yang akan ditampilkan kepada masing-masing pengguna. Secara umum,
rancangan antarmuka ini dibagi menjadi halaman depan administrator, halaman
utama administrator, halaman depan dosen, halaman utama dosen, halaman depan
mahasiswa, dan halaman utama mahasiswa.
1) Halaman depan administrator
Halaman depan administrator dari aplikasi e-learning ini berupa sebuah
halaman dengan form untuk melakukan login dimana pengguna harus
memasukkan username dan password yang kemudian dicocokkan pada database
yang sudah ada.
Rancangan antarmuka halaman depan administrator dapat dilihat pada
gambar 3.18.
2) Halaman utama administrator
Admin merupakan pemegang hak akses tertinggi pada aplikasi e-learning
ini. Seperti yang telah dijelaskan diatas admin mempunyai hak akses untuk
manajemen data dan mengolah aplikasi ini secara keseluruhan. Perancanagn
antarmuka untuk admin terdiri atas beberapa bagian utama antara lain:
a. Bagian atas berupa judul sistem/aplikasi,
b. Bagian bawah berupa nama pemegang hak cipta aplikasi,
c. Bagian samping kiri berupa informasi hak aksesnya dan menu utama untuk
admin dalam melakukan proses administrasi dan manajemen aplikasi
e-learning,
d. Bagian tengah yang berupa halaman utama yang akan ditampilkan pada
saat melakukan navigasi terhadap fitur-fitur/menu yang ingin ditelusuri.
Adapun bagian-bagian pada halaman utama untuk admin dapat dilihat
dengan lebih jelas pada gambar 3.19.
50
3) Halaman depan dosen
Halaman depan dosen dari aplikasi e-learning ini terdiri atas beberapa
bagian utama antara lain:
a. Bagian atas berupa sebuah button dengan form untuk melakukan login
dimana pengguna memasukkan username dan password yang kemudian
dicocokkan pada database yang sudah ada,
b. Bagian bawah berupa daftar nama-nama dosen yang ada di STT YPM.
Jika dipilih maka akan dapat melihat biodata dosen yang diinginkan.
Gambar 3.20 Rancangan Antarmuka Halaman Depan Dosen
4) Halaman utama dosen
Dosen merupakan pemegang hak akses tertinggi pada aplikasi e-learning
ini. Seperti yang telah dijelaskan diatas dosen mempunyai peran yang sangat
penting dalam kelangsungan proses pembelajaran. Perancangan antarmuka untuk
a. Bagian atas berupa judul sistem/aplikasi,
b. Bagian bawah berupa nama pemegang hak cipta aplikasi,
c. Bagian samping kiri berupa informasi hak aksesnya dan menu utama untuk
dosen dalam melakukan proses,
d. Bagian tengah yang berupa halaman utama yang akan ditampilkan pada
saat melakukan navigasi terhadap fitur-fitur/menu yang ingin ditelusuri.
Adapun bagian-bagian pada halaman utama untuk admin dapat dilihat
dengan lebih jelas pada gambar 3.21.
Gambar 3.21 Rancangan Antarmuka Halaman Utama Dosen
5) Halaman depan mahasiswa
Perancangan halaman depan mahasiswa dari aplikasi e-learning ini terdiri
atas beberapa bagian utama antara lain:
a. Bagian atas berupa sebuah button dengan form untuk melakukan login
dimana pengguna memasukkan username dan password yang kemudian
dicocokkan pada database yang sudah ada,
52
Gambar 3.22 Rancangan Antarmuka Halaman Depan Mahasiswa
6) Halaman utama mahasiswa
Rancangan antarmuka untuk halaman utama mahasiswa dapat dilihat
pada gambar 3.23 .
Mahasiswa memiliki hak akses sebagai user pada aplikasi e-learning ini
yang berhak mengakses rencana pembelajaran yang dibuat dosen pengajar kelas
yang diikutinya, mengerjakan tugas yang ada, dan mendownload materi.
Perancangan antarmuka untuk mahasiswa terdiri atas beberapa bagian utama :
a. Bagian atas berupa judul sistem/aplikasi,
b. bagian tengah yang berupa halaman utama terdiri dari pengumuman, berita
terpopuler, berita terkini, dan daftar kematakuliah berdasarkan jurusan
masing-masing mahasiswa,
54
BAB IV
IMPLEMENTASI
Pada bab IV ini akan dibahas mengenai implementasi dari perancangan
sistem yang telah dibuat pada bab III. Bagian implementasi sistem kali ini
meliputi: lingkungan implementasi, implementasi proses, dan implementasi
antarmuka.
4.1. Latar Belakang
Pada bagian ini akan dijelaskan mengenai perangkat keras dan perangkat
lunak yang digunakan pada implementasi sistem ini.
Perangkat keras :
a. Komputer dengan processor Intel Dual Core 1.73Ghz.
b. Memori 2 GB.
Perangkat lunak :
a. Sistem operasi windows XP.
b. Power designer 6 untuk membuat data flow diagram.
c. XAMPPsebagai web development tool.
d. MySQL 5.0.45 untuk menyimpan data dan mengolah data di aplikasi ini.
e. AJAX JQuery versi 1.4.2.min
f. Adobe Photoshop CS untuk mengolah gambar.
4.2. Implementasi Proses
Pada bagian bab ini membahas mengenai implementasi bagian dari
program atau potongan script program.
4.2.1. Implementasi Proses Login
Agar pengguna baik admin, dosen ataupun mahasiswa dapat mengakses
menu-menu yang telah disediakan sesuai dengan hak aksesnya masing-masing,
oleh karena itu harus melakukan identifikasi data login user dengan memasukkan
username dan password yang kemudian jika data tersebut benar maka data
pengguna akan disimpan di session. Script untuk form login dapat dilihat pada
gambar 4.1.
Gambar 4.1 Script form login
Dalam animasi form login tersebut, akan dilakukan oleh ajax jQuery.
56
Gambar 4.2 Javascript animasi login
Pada script gambar 4.2 menjelaskan bahwa pada tampilan form login
menggunakan jQuery versi-1.4.2.min. Untuk menampilkan dan menutup form
login secara responsive menggunakan slideToggle.
Dan dalam proses tersebut untuk melakukan proses login akan dilakukan pada cek_login.php, script cek_login.php dapat dilihat pada gambar 4.3 :
Pada script gambar 4.3 menjelaskan :
a. Melakukan pengecekan apakah username kosong atau tidak, jike kosong akan muncul peringatan “username masih kosong” jika sudah terisi proses selanjutnya melakukan pencarian data dengan username yang dimasukkan. b. Lalu mencocokkan password dari username tersebut.
c. Apabila tidak sama dengan yang terdaftar dalam database maka akan terdapat peringatan “login gagal”.
d. Apabila username dan password cocok dan terdaftar dalam database maka “login sukses”.
e. Dan setelah “login sukses” maka akan masuk kedalam halaman utama e-learning.
4.2.2. Implementasi Proses Upload Materi
Untuk upload materi menggunakan form dengan jQuery yaitu menggunakan “jquery.form.js”. dengan javascript ini. Hasil dari file yang diupload dapat update secara otomatis pada tabel yang ada dibawahnya. Tabel tersebut berisi judul materi, nama file dari materi yang diupload, tipe materi dan
ukuran materi. Dengan begitu pada proses upload materi ini membuat aplikasi e-learning terlihat responsive.
58
Gambar 4.4 Javascript untuk form JQuery
Sedangkan script untuk menampilkan form upload materi dapat dilihat pada gambar 4.5.
[image:70.612.191.451.444.674.2]Form upload materi tersebut akan diproses pada file “upload_materi.php”, script untuk proses ini dapat dilihat pada gambar 4.6.
60
Pada script gambar 4.6 menjelaskan tentang : a. File yang diupload dicopy ke folder materi.
b. Atribut-atributnya seperti : nama file, type, dan size disimpan pada
database tepatnya pada tabel materi.
c. Setelah sukses menyimpan ke-database, atribut dari file tersebut dipanggil untuk ditampilkan.
4.2.3. Implementasi Proses Manajemen Kuliah
Pada proses manajemen data kuliah, ada proses insert, edit, delete dan
view. Proses delete pada manajemen kuliah ini juga bersifat responsive, karena setelah konfirmasi hapus telah disetujui, baris dari data kuliah yang ingin dihapus
otomatis terhapus. Script untuk proses ini dapat dilihat pada gambar 4.7.
Dan untuk javascript pada proses manajemen kuliah dapat dilihat pada
gambar 4.8.
Gambar 4.8 Javascript untuk halaman manajemen kuliah
Gambar 4.8 menjelaskan tentang :
a. Menampilkan halaman sesuai menu yang diinginkan.
b. Jika tombol hapus diKlik maka akan muncul peringatan “yakin data ini
62
4.3. Implementasi Antarmuka
Pada tahap ini akan dijabarkan tentang implementasi antarmuka dari
aplikasi yang dibuat berdasarkan perancangan sistem yang telah dibahas pada bab
III. Sistem ini berfungsi untuk memberikan layanan untuk mahasiswa mulai dari
mendownload materi, sampai proses pembelajaran selesai.
Pada sistem ini terdapat 4 (empat) halaman utama yaitu halaman yang
ditujukan untuk administrator, halaman yang ditujukan untuk dosen dan halaman
yang ditujukan untuk mahasiswa, halaman forum. Halaman yang ditujukan untuk
administrator terdiri dari :
a. Halaman login.
b. Halaman manajemen data mahasiswa.
c. Halaman manajemen data dosen.
d. Halaman manajemen data jurusan.
e. Halaman manajemen data mata kuliah.
f. Halaman manajemen data kuliah.
g. Halaman ubah password.
Halaman yang ditujukan untuk dosen terdiri dari :
a. Halaman selamat datang
b. Halaman profil dosen
c. Halaman kuliah
d. Halaman peserta perkuliahan
e. Halaman penilaian
Halaman yang ditujukan untuk mahasiswa terdiri dari :
a. Halaman awal e-learning
b. Halaman utama e-learning
c. Halaman perkuliahan
d. Halaman Profil
Halaman Forum terdiri dari :
a. Halaman Utama forum
b. Halaman Kategori
c. Halaman Topik dan reply
4.3.1. Implementasi Halaman Administrator
1) Halaman Login Administrator
Halaman login ini akan tampil ketika admin pertama kali membuka aplikasi direktori admin. Di halaman login admin memasukan username dan
password untuk verifikasi data, setelah itu halaman login administrator akan memproses otentifikasinya. Berikut ini tampilan dari halaman login seperti pada gambar 4.9.
64
2) Halaman Utama Administrator
Setelah melalui proses login pada halaman login maka admin akan menjumpai menu utama admin. Pada halaman ini admin dapat memilih menu antara lain :
a. Manajemen Mahasiswa,
b. Manajemen Dosen,
c. Manajemen Jurusan,
d. Manajemen Mata kuliah,
e. Manajemen Kuliah,
f. Ubah Password,
g. Logout.
Berikut ini tampilan dari halaman menu admin seperti pada gambar 4.10.
3) Halaman Manajemen Mahasiswa
Pada halaman manajemen mahasiswa, admin dapat melihat,
menambahkan, mengubah serta menghapus data mahasiswa. Halaman manajemen
mahasiswa dapat dilihat seperti pada gambar 4.11.
Gambar 4.11 Halaman manajemen mahasiswa
Untuk menambahkan data mahasiswa klik pada tombol Tambah, maka akan
tampil halaman tambah data mahasiswa seperti pada gambar 4.12.
[image:77.612.223.412.513.672.2]66
Untuk mengubah data mahasiswa klik pada tombol edit, maka akan tampil
halaman edit data mahasiswa seperti pada gambar 4.13.
Gambar 4.13 Halaman edit data mahasiswa <
