IMPLEMENTASI AJAX PADA APLIKASI E-LEARNING BERBASIS WEB (STUDY KASUS DI SEKOLAH TINGGI TEKNIK YPM SIDOARJO).

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.

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

2.

Bapak Basuki Rahmat, S.Si, MT selaku Ketua Jurusan Teknik Informatika

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.

9.

Mas Lekhanku tercinta, thanks a lot karena selalu menemani dan selalu

memberikan semangat dan dukungan yang tak terhitung supaya tetap optimis

untuk menyelesaikan tugas akhir ini.

iv

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.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

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.

 

3.1. Analisa Sistem ...Error! Bookmark not defined.

3.2. Perancangan Sistem ...Error! Bookmark not defined.

3.2.1.Deskripsi Umum Sistem ...Error! Bookmark not defined.

3.2.2.Klasifikasi Pengguna Sistem.Error! Bookmark not defined.

3.2.3.Perancangan Proses...Error! Bookmark not defined.

3.2.4.Perancangan Data...Error! Bookmark not defined.

3.2.5.Perancangan Tabel ...Error! Bookmark not defined.

3.2.6.Perancangan Antarmuka ...Error! Bookmark not defined.

BAB IV IMPLEMENTASI ...Error! Bookmark not defined.

 

4.1. Latar Belakang ...Error! Bookmark not defined.

4.2. Implementasi Proses ...Error! Bookmark not defined.

4.2.1.Implementasi Proses Login...Error! Bookmark not defined.

4.2.2.Implementasi Proses Upload MateriError! Bookmark not

defined.

x

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.

BAB VI PENUTUP ...Error! Bookmark not defined.

 

6.1. Kesimpulan ...Error! Bookmark not defined.

6.2. Saran ...Error! Bookmark not defined.

DAFTAR PUSTAKA ...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 presentasi) maupun multimedia (berupa video dan audio).

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

Berdasarkan uraian mengenai latar belakang diatas bahwa pendidikan dituntut untuk juga memasukkan nilai-nilai moral, kreatifitas, dan kemandirian yang sangat sulit dilakukan dalam sistem pembelajaran yang konvensional. Dengan demikian, maka rumusan masalah yang dimunculkan dalam penelitian ini adalah:

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 AJAX.

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

Tahap ini merupakan tahap pengumpulan informasi yang diperlukan untuk pembuatan aplikasi. Termasuk diantaranya adalah pencarian literatur, diskusi dan pemahaman terhadap topik e-learning.

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

Sistematika pembahasan yang dibuat dalam tugas akhir ini disusun dalam beberapa bab, yang dijelaskan sebagai berikut :

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 ini berisi tentang penjelasan lingkungan uji coba sistem, scenario uji coba, pengujian error handling yang dilakukan untuk kelayakan sistem ini.

BAB VI : PENUTUP

Bab ini berisi tentang kesimpulan dan saran untuk pengembangan sistem lebih lanjut dalam upaya memperbaiki kelemahan pada sistem guna untuk mendapatkan hasil sistem sesuai dengan yang diinginkan dan kesempurnaan sistem.

8

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

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

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.

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

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

database MySql :

<?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:

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 database MySql :

<?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

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

sebagai berikut :

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

peran untuk masing-masing entitas diatas sudah dijelaskan pada sub bab 3.2.2

yaitu tentang klasifikasi pengguna sistem. Untuk rancangannya dapat dilihat pada

gambar 3.2 berikut ini :

2) DFD Level 0

Rancangan DFD level 0 dapat dilihat pada gambar 3.3 dibawah ini :

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.

3) DFD Level 1 Proses dosen

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 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

DFD level 1 Proses e-learning merupakan subproses dari proses e-learning yang ada pada DFD level 1 diatas, dimana dalam DFD level 2 proses e-learning ini terdapat 5 (lima) proses antara lain :

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 disimpan pada tabel detail tugas.

Rancangan dari DFD level 1 Proses e-learning dapat dilihat pada gambar 3.6 berikut ini:

6) DFD Level 1 Proses Forum

Rancangan dari DFD level 1 Proses forumdapat dilihat pada gambar 3.7 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 perkuliahan.

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.

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 mahasiswa yang dilakukan oleh fakultas dan view mahasiswa untuk melihat data mahasiswa.

Gambar 3.12 DFD Level 2 Manajemen Mahasiswa

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.

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 dari proses manajemen kuliah yang ada pada DFD level 1 prosesfakultas diatas,

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 dengan cepat dan mudah.

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 berikut ini:

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 implementasi aplikasi.Dengan Physical Data Model kita dapat mengetahui model

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

Tabel ini digunakan untuk menyimpan data jurusan. Field tabel ini antara lain :

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 :

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 :

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 :

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.

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,

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

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. g. Macromedia dreamweaver 8 sebagai editor program.

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. Script javascript untuk login dapat dilihat pada gambar 4.2 :

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.

Javascript untuk menampilkan form dengan hasil yang responsive dapat dilihat pada gambar 4.4.

Gambar 4.4 Javascript untuk form JQuery

Sedangkan script untuk menampilkan form upload materi dapat dilihat pada gambar 4.5.

Form upload materi tersebut akan diproses pada file “upload_materi.php”, script untuk proses ini dapat dilihat pada gambar 4.6.

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 mau di delete?” jika sukses dihapus baris dengan id nim yang ingin dihapus akan dihapus otomatis, tanpa me-refresh halaman keseluruhan.

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.

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.

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

4) Halaman Manajemen Dosen

Pada halaman manajemen dosen, admin dapat melihat, menambahkan, mengubah serta menghapus data dosen. Halaman manajemen dosen dapat dilihat seperti pada gambar 4.14.

Untuk menambahkan data dosen klik pada tombol Tambah, maka akan tampil

halaman tambah data dosen seperti pada gambar 4.15.

Gambar 4.15 Halaman tambah data dosen

Untuk mengubah data dosen klik pada tombol edit, maka akan tampil halaman

edit data dosen seperti pada gambar 4.16.

5) Halaman Manajemen Jurusan

Pada halaman manajemen jurusan, admin dapat melihat, menambahkan, mengubah serta menghapus data jurusan. Halaman manajemen jurusan dapat dilihat seperti pada gambar 4.17.

Gambar 4.17 Halaman manajemen jurusan

Untuk menambahkan data jurusan klik pada tombol Tambah, maka akan tampil

halaman tambah data jurusan seperti pada gambar 4.18.

Gambar 4.18 Halaman tambah data jurusan

Untuk mengubah data jurusan klik pada tombol edit, maka akan tampil halaman

Gambar 4.19 Halaman edit data jurusan

6) Halaman Manajemen Mata Kuliah

Pada halaman manajemen mata kuliah, admin dapat melihat, menambahkan, mengubah serta menghapus data mata kuliah. Halaman manajemen mata kuliah dapat dilihat seperti pada gambar 4.20.

Gambar 4.20 Halaman manajemen mata kuliah

Untuk menambahkan data mata kuliah klik pada tombol Tambah, maka akan

Gambar 4.21 Halaman tambah data mata kuliah

Untuk mengubah data mata kuliah klik pada tombol edit, maka akan tampil

halaman edit data mata kuliah seperti pada gambar 4.22.

Gambar 4.22 Halaman edit data mata kuliah

7) Halaman Manajemen Kuliah

Pada halaman manajemen kuliah, admin dapat melihat, menambahkan, mengubah serta menghapus data mata kuliah. Data-data yang harus dimasukkan adalah nama dosen, nama mata kuliah , tahun ajaran dan semester. Halaman manajemen kuliah dapat dilihat seperti pada gambar 4.23.

Gambar 4.23 Halaman manajemen kuliah

Untuk menambahkan data kuliah klik pada tombol Tambah, maka akan tampil

halaman tambah data kuliah seperti pada gambar 4.24.

Gambar 4.24 Halaman tambah data kuliah

Untuk mengubah data kuliah klik pada tombol edit, maka akan tampil halaman

Gambar 4.25 Halaman edit data kuliah

8) Halaman Ubah Password

Pada halaman ubah password, admin dapat mengubah password dengan memasukkan password yang lama untuk pengecekannya. Halaman ubah password dapat dilihat seperti pada gambar 4.26.

Gambar 4.26 Halaman ubah password

4.3.2. Implementasi Halaman Dosen

1) Halaman Selamat Datang

Pada halaman selamat datang ini, ditampilkan nama-nama dosen yang ada di STT YPM Sidoarjo. Tampilan halaman ini dapat dilihat pada gambar 4.27.

Gambar 4.27 Halaman selamat datang untuk dosen

2) Halaman Profil Dosen

Untuk dapat mengakses halaman ini harus login sebagai dosen terlebih dahulu. Pada halaman profil dosen ini, dosen dapat melihat dan mengubah data profilnya, serta dapat mengubah password dan fotonya. Halaman profil dosen ada pada gambar 4.28.

3) Halaman Kuliah

Untuk dapat mengakses halaman ini harus login sebagai dosen terlebih dahulu. Pada halaman kuliah ini, dosen dapat menambahkan materi pada mata kuliah yang diajarkannya. Halaman kuliah dapat dilihat pada gambar 4.29.

Gambar 4.29 Halaman kuliah

Untuk mengupload materi tekan tombol tambah materi, setelah tombol tambah materi diklik akan tampil form upload materi dalam bentuk thickbox, untuk form upload materi dapat dilihat pada gambar 4.30.

Untuk melihat dan mendownload materi, dapat dengan memilih tombol lihat materi, Jika ingin mendownload materi dapat dengan menklik nama file dari materi yang diinginkan. halaman daftar materi dapat dilihat pada gambar 4.31.

Gambar 4.31 Tampilan daftar materi

4) Halaman Peserta Kuliah

Untuk dapat mengakses halaman ini harus login sebagai dosen terlebih dahulu. Pada halaman ini, dosen dapat menambahkan dan menghapus peserta pada mata kuliah yang diajarkannya. Halaman peserta perkuliahan dapat dilihat pada gambar 4.32.

5) Halaman Penilaian

Untuk dapat mengakses halaman ini harus login sebagai dosen terlebih dahulu. Pada halaman ini, dosen dapat memasukkan nilai uts dan nilai uas pada peserta perkuliahannya. Halaman penilaian dapat dilihat pada gambar 4.33.

Gambar 4.33 Halaman penilaian

6) Halaman Penugasan

Untuk dapat mengakses halaman ini harus login sebagai dosen terlebih dahulu. Pada halaman ini, dosen dapat membuat soal untuk tugas perkuliahannya. Halaman penugasan dapat dilihat pada gambar 4.34.

Untuk melihat siapa saja peserta yang sudah mengumpulkan tugas, dan untuk mendownload tugas-tugas yang sudah diupload oleh peserta tekan tombol detail tugas, maka akan muncul tampilan seperti pada gambar 4.35

Gambar 4.35 Halaman daftar jawaban tugas

4.3.3. Implementasi Halaman Mahasiswa

1) Halaman awal e-learning

Pada halaman e-learning user dapat melihat materi terkini dan materi terpopuler, namun user tidak dapat men-download materi sebelum login sebagai mahasiswa.

2) Halaman utama e-learning

Untuk dapat mengakses halaman utama e-learning, user harus login

sebagai mahasiswa terlebih dahulu. pada halaman utama terdapat daftar perkuliahan yang diikuti, materi-materi terbaru dan terpopuler, tugas-tugas terkini, serta statistic user. Tampilan untuk halaman utama e-learning dapat dilihat pada gambar 4.37.

Gambar 4.37 Halaman utama e-learning

3) Halaman Perkuliahan

Untuk membuka halaman perkuliahan, mahasiswa dapat memilih mata kuliah yang ada pada kolom perkuliahan, atau untuk melihat seluruh daftar

perkuliahan yang diikuti dapat dengan menklik “Lihat semua” pada kolom perkuliahan. Tampilan seluruh daftar perkuliahan dapat dilihat pada gambar 4.38.

Gambar 4.38 Halaman daftar perkuliahan

Untuk dapat melihat detai perkuliahan, klik pada tombol “lihat perkuliahan” yang ingin dilihat. Tampilan detail perkuliahan dapat dilihat pada gambar 4.39.

Pada halaman detail perkuliahan terdapat beberapa menu antara lain: Deskripsi, Materi, Tugas, Nilai dan Peserta. Pada halaman materi mahasiswa dapat mendownload materi yang telah diupload oleh dosen. Tampilan halaman materi pada detail perkuliahan dapat dilihat pada gambar 4.40.

Gambar 4.40 Halaman detail materi perkuliahan

Untuk mendownload materi itu sendiri, user memilih materi mana yang ingin di download, maka akan tampil halaman download seperti pada gambar 4.41.

Jika mahasiswa ingin melihat ada tugas atau tidak dari dosen. Mahasiswa dapat membuka halaman tugas pada detail perkuliahan. Tampilan halaman tugas dapat dilihat pada gambar 4.42.

Gambar 4.42 Halaman tugas

Untuk melihat detail tugas, klik tombol “lihat soal” maka akan muncul tampilan dalam bentuk thickbox seperti pada gambar dibawah ini :

Gambar 4.43 Halaman detail tugas

Untuk menupload jawaban tugas klik tombol upload tugas, akan tampil halaman seperti pada gambar berikut ini:

Gambar 4.44 Halaman upload tugas

Untuk melihat peserta perkuliahan, pilih menu peserta pada halaman detail perkuliahan, maka akan tampil halaman seperti pada gambar berikut ini:

Jika ingin melihat profil dari peserta yang lain, klik tombol “lihat profil”, maka akan tampil halaman profil dari peserta yang diinginkan berupa thickbox. Tapilan lihat profil dapat dilihat pada gambar berikut :

Gambar 4.46 Halaman lihat profil peserta lain

4) Halaman Pengaturan Profil

4.3.4. Implementasi Halaman Forum

1) Halaman Utama Forum

Pada halaman utama forum ini ditampilkan kategori-kategori yang ada di forum e-learning ini, kategori diambil berdasarkan mata kuliah dari tiap jurusan yang ada di STT YPM. Berikut adalah gambar dari halaman utama forum :

Gambar 4.48 Halaman utama forum

2) Halaman Topik Forum

Pada halaman topik forum ini menampilkan topik-topik yang sudah ada berdasarkan kategori yang dipilih oleh pengguna. Kategori berdasarkan mata kuliah yang ada pada e-learning. Berikut adalah gambar dari halaman topik forum :

Gambar 4.49 Halaman topik forum

3) Halaman Reply Forum

Pada halaman reply forum ini menampilkan reply-reply dari forum yang dipilih. Berikut adalah gambar dari halaman reply forum :

100

5.5.2. Uji Coba Pada Browser Mozilla Firefox Version 3.6.13

Gambar 5.25 Uji Coba Pada Browser Mozilla Firefox Version 3.6.13

Untuk mengeksekusi proses penyimpanan data agenda seperti gambar 5.25 pada browser Mozilla Firefox Version 3.6.13, dibutuhkan waktu 2 detik. Dan kemudian data ditampilkan pada tabel yang ada dibawah form memasukkan agenda perkuliahan. hasil eksekusi dari proses diatas dapat dilihat pada gambar 5.26

5.5.3. Uji Coba Pada Browser Internet Explorer 8

Gambar 5.27 Uji Coba Pada Browser Internet Explorer 8

Untuk mengeksekusi proses penyimpanan data agenda seperti gambar 5.27 pada browser Internet Explorer 8, dibutuhkan waktu hanya 1 detik. Dan kemudian data ditampilkan pada tabel yang ada dibawah form memasukkan agenda perkuliahan. hasil eksekusi dari proses diatas dapat dilihat pada gambar 5.28

102

Dari hasil uji coba dibeberapa browser diatas kita dengan mudah mampu simpulkan bahwa dalam mengirim dan menerima data pada aplikasi yang menggunakan teknologi AJAX browser Opera/9.80 dan internet explorer 8 yang memiliki waktu yang relative cepat.

103

PENUTUP

6.1. Kesimpulan

Kesimpulan yang dapat diambil selama proses pembuatan tugas akhir ini adalah diharapkan dapat membantu para dosen dan mahasiswa STT Yayasan Pendidikan Ma’arif dan Sosial Sidoarjo dalam melakukan kegiatan pembelajaran sebagai berikut:

a. Aplikasi e-learning STT YPM Sidoarjo ini berisi tentang proses belajar mengajar mulai dari pembuatan kelas perkuliahan, upload dan download materi, pemberian dan pengumpulan tugas, sampai dengan diskusi forum. b. Tampilan menu akses yang disediakan telah sesuai dengan hak akses dari

masing-masing user dan dari aplikasi yang telah di uji coba tersebut dapat melakukan koneksi antar PHP dan MySQL dengan baik.

c. Aplikasi web ini mengunakan sedikit pemrograman ajax yang bertujuan agar tampilan dan proses pengolahan data semakin cepat, efisien dan tentunya user friendly.

Antarmuka dalam aplikasi yang berbasis web ini memudahkan para pengguna dalam berinteraksi dengan sistem dengan menyediakan beberapa fungsi antara lain hapus dan ubah. Serta menyediakan halaman-halaman yang dapat berinteraksi dengan mudah bagi pengguna, baik dalam hal pencarian produk, dan dalam pesan belanja serta dalam mengelola belanja.

104

6.2. Saran

Dalam tugas akhir ini, perancangan dan pembuatan Aplikasi E-Learning

STT YPM Sidoarjo masih terdapat banyak kekurangan, mengingat keterbatas pengetahuan, pengalaman dan waktu, karena itu masih banyak kelemahan pada aplikasi ini. Dari beberapa pengamatan dan observasi yang dilakukan penulis selama mengerjakan tugas akhir ini, maka penulis memberikan beberapa saran untuk pengembangan aplikasi ini adalah :

a. Untuk pengembangan lebih lanjut, aplikasi ini dapat di kembangkan lagi dengan menambah fitur chat untuk memudahkan user dalam berinteraksi dengan user lain secara online.

b. Untuk pengembangan lebih lanjut, statistic user dapat dibuat dalam bentuk

DAFTAR PUSTAKA

Hakim, Lukmanul. 2010. Bikin Website Super Keren dengan PHP dan jQuery,

Penerbit Lokomedia, Yogyakarta.

H. Rafiza, 2005-2006, “Panduan dan Referensi Kamus Fungsi PHP5 Untuk Membangun Database Berbasis Web”, Penerbit Elex Media Komputindo, Jakarta.

Ir. Fathansyah, 2007, “Buku Teks Komputer Basis Data”, Penerbit Informatika, Bandung.

Kadir, Abdul. 2009. Mastering AJAX dan PHP, Edisi I, Penerbit ANDI, Yogyakarta.

Wahono, Romi Satria. 2008. Meluruskan salah kaprah tentang e-learning,

diakses online pada 28 Desember 2010 dari

http://romisatriawahono.net/2008/01/23/meluruskan-salah-kaprah-tentang-e-learning/