E-LEARNING SEBAGAI MEDIA PEMBELAJ ARAN DENGAN
BOOTSTRAP FRAMEWORK
SKRIPSI
Disusun oleh :
ISHA SINETRIA PRIBADI
NPM. 0934010142
J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
2013
SKRIPSI
Diajukan Untuk Memenuhi Sebagai Persyaratan Dalam Memperoleh Gelar Sarjana Komputer
Jurusan Teknik Informatika
Disusun oleh :
ISHA SINETRIA PRIBADI
NPM. 0934010142
J URUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN”
J AWA TIMUR
LEMBAR PENGESAHAN
E-LEARNING SEBAGAI MEDIA PEMBELAJ ARAN DENGAN
BOOTSTRAP FRAMEWORK
Disusun Oleh :
ISHA SINETRIA PRIBADI
NPM. 0934010142
Telah disetujui untuk mengikuti Ujian Negara Lisan Gelombang VI Tahun Akademik 2012/2013
Pembimbing Utama Pembimbing Pendamping
Intan Yuniar Purbasari , S.Kom, M.Sc Faisal Muttaqin, S.Kom
NIDN. 380060401981 NIP. 385121303511
Mengetahui,
Ketua J urusan Teknik Infor matika Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur
Dr. Ir. Ni Ketut Sar i, MT NIP. 19650731 199203 2 001
Disusun Oleh :
ISHA SINETRIA PRIBADI
NPM. 0934010142
Telah dipertahankan di hadapan dan diterima oleh Tim Penguji Skr ipsi Pr ogram Studi Teknik Infor matika Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur Pada Tanggal 20 Desember 2013
Pembimbing : Tim Penguji :
1. 1.
Intan Yuniar Purbasari, S.Kom, M.Sc Dr. Ir. Ni Ketut Sar i, MT NIDN. 380060401981 NIP. 19650731 199203 2 001
2. 2.
Faisal Muttaqin, S.Kom I Made Susrama, S.Kom, M.Kom
NIP. 385121303511 NPT.
3.
Sugiar to, S.Kom NPT. 387021303431 Mengetahui,
Dekan Fakultas Teknologi Industri
Univer sitas Pembangunan Nasional ”Veteran” J awa Timur
YAYASAN KESEJ AHTERAAN PENDIDIKAN DAN PERUMAHAN UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” J AWA TIMUR
FAKULTAS TEKNOLOGI INDUSTRI PANITIA UJIAN SKRIPSI / KOMPREHENSIF
J l. Raya Rungkut Madya Gunung Anyar Telp. (031) 8706369 (Hunting). Fax. (031) 8706372 Sur abaya 60294
KETERANGAN REVISI Mahasiswa di bawah ini :
Nama : Isha Sinetria Pribadi NPM : 0934010142
Jurusan : Teknik Informatika
Telah mengerjakan revisi/ tidak ada revisi*) PRA RENCANA (DESIGN) / SKRIPSI / TUGAS AKHIR Ujian lisan gelombang VI, TA 2012/2013 dengan judul:
”
E-LEARNING SEBAGAI MEDIA PEMBELAJARAN DENGAN BOOTSTRAP FRAMEWORK “Surabaya, 09 Januari 2014 Dosen Penguji yang memerintahkan revisi:
1) Dr. Ir. Ni Ketut Sari, MT NIP. 19650731 199203 2 001 2) I Made Suartana, S.Kom, M.Kom
NPT.
3) Sugiarto, S.Kom NPT. 387021303431
Mengetahui,
Pembimbing Utama Pembimbing Pendamping
Intan Yuniar Purbasari, S.Kom, M.Sc. Faisal Muttaqin, S.Kom. NIDN.380060401981 NIP.385121303511
{
}
{
}
{
}
Syukur Alhamdulillaahi robbil ‘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 Skripsi yang berjudul “ E-Learning Sebagai Media Pembelajaran Dengan Bootstrap Framewor k”
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.
Melalui Skripsi ini penyusun merasa mendapatkan kesempatan emas untuk memperdalam ilmu pengetahuan yang diperoleh selama di bangku perkuliahan, terutama berkenaan tentang penerapan teknologi perangkat bergerak. 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, Desember 2013
vi
2.2.1 Manfaat Pembelajaran Online ... 12
2.2.2 Keterbatasan Pembelajaran Online ... 14
2.3 E-Learning ... 15
2.3.1 Sejarah E-Learning ... 15
2.3.2 Teknologi Pendukung E-Learning ... 15
2.3.3 Alur Sistem E-Learning Student Center Course ... 16
2.4 XAMPP ... 22
2.5 MySQL ... 24
2.6 PHPMyAdmin ... 24
2.6.1 Sejarah PHPMyAdmin ... 25
2.7 Bootstrap Framework ... 26
BAB III METODOLOGI PENELITIAN ... 27
3.1 Data Flow Diagram (DFD) ... 27
3.1.1 DFD Level 0 ... 29
3.1.2 DFD Level 1 ... 31
3.1.3. DFD Level 2 ... 35
3.2 Desain Database ... 45
3.2.1 Entitas yang ada pada CDM dan PDM ... 45
3.2.2 Relasi yang digunakan pada CDM dan PDM di dalam sistem... 46
3.2.3 CDM (Conceptual Data Model) ... 47
3.2.4 PDM (Physical Data Model) ... 49
3.2.5 Hierarki Menu ... 50
3.3 Rancangan Interface ... 51
BAB IV HASIL DAN PEMBAHASAN ... 53
4.1 Implementasi Program ... 53
4.1.1 Halaman Index ... 53
4.1.2 Halaman Login & Signup... 64
4.1.3 Halaman E-Learning ... 81
4.1.4 Halaman Akun ... 92
4.1.5 Halaman Admin ... 98
4.1.6 Halaman Video ... 113
BAB V KESIMPULAN DAN SARAN ... 116
5.1 Kesimpulan ... 116
5.2 Saran ... 117
E-LEARNING SEBAGAI MEDIA PEMBELAJ ARAN DENGAN BOOTSTRAP FRAMEWORK
ISHA SINETRIA PRIBADI NPM : 0934010142
DOSEN PEMBIMBING I : INTAN YUNIAR PURBASARI, S.Kom, M.Sc DOSEN PEMBIMBING II : FAISAL MUTTAQIN, S.Kom
FAKULTAS TEKNOLOGI INDUSTRI J URUSAN TEKNIK INFORMATIKA UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” J AWA TIMUR
2013
i
ABSTRAK
Pada dunia teknologi dan pendidikan yang ada pada kehidupan kita sehari-hari dapat kita amati bahwa banyak sekali perkembangan kedua hal tersebut yang berkaitan satu sama lain untuk mengembangkan wawasan dan informasi yang disajikan dalam bentuk teknologi modern. Saat ini dunia pendidikan menjadi kebutuhan utama dalam kehidupan kita untuk meningkatkan kualitas diri. Untuk itu penulis menciptakan sebuah sistem sebagai media pembelajaran yang terstruktur dalam sebuah database sehingga penyimpanan data pengajar, siswa maupun member dalam sistem informasi tersebut dapat tersimpan dengan baik dimana siapapun dapat belajar atau memperoleh ilmu didalam sistem ini tanpa batasan usia. Selain itu pula, pengguna juga dapat menikmati informasi yang disajikan oleh sistem serta dapat menjadi bagian dari sistem informasi ini sebagai member baru maupun siswa reguler yang ingin belajar langsung di lembaga maupun sebagai siswa online yang ingin belajar melalui online.
Didalam laporan skripsi e-learning sebagai media pembelajaran dengan bootstrap framework ini digambarkan dengan alur data flow diagram mulai level 0 sampai level 2 tiap hak akses user account, dimana hak akses dibagi menjadi 4 hak akses diantaranya admin, siswa online, pengajar, dan member. Sedangkan untuk database dan entitas yang digunakan akan digambarkan pada Conceptual Data Model dan Physical Data Model.
Sistem informasi course ini sebagai salah satu solusi untuk membantu proses pendaftaran siswa dan member dalam menerima fasilitas belajar mengajar antara siswa online dengan pengajar dan forum chat dengan user yang online, mengunduh dan sharing materi serta pengarsipan file data pengajar yang lebih baik dengan adanya sebuah sistem yang bekerja secara online sehingga mudah untuk menginformasikan kepada semua siswa yang ingin belajar dimanapun dan kapanpun terkait dengan jadwal pengajar yang telah ditentukan. Sistem ini akan dipaparkan terkait seluruh aplikasi yang sudah dibuat, mulai dari interface serta coding sistem Student Center Course.
Keyword: Student Course, Sistem informasi E-learning, Bootstrap Framework
1.1 Latar Belakang
Pada dunia teknologi dan pendidikan yang ada pada kehidupan kita sehari-hari dapat kita amati bahwa banyak sekali perkembangan kedua hal tersebut yang berkaitan satu sama lain untuk mengembangkan wawasan dan informasi yang disajikan dalam bentuk teknologi modern. Saat ini dunia pendidikan menjadi kebutuhan utama dalam kehidupan kita untuk meningkatkan kualitas diri. Namun, banyak juga kita melihat diluar sana pendidikan masih sangat minim dan masih sulit didapatkan seperti pada daerah tertentu yang belum memiliki sumber daya manusia sebagai pengajar.
Untuk itu penulis menciptakan sebuah sistem sebagai media pembelajaran yang terstruktur guna dapat dijadikan sarana belajar bagi mereka dimana data disimpan dalam sebuah database yang terstruktur sehingga penyimpanan data pengajar, siswa maupun member dalam sistem informasi tersebut dapat tersimpan dengan baik dimana siapapun dapat belajar atau memperoleh ilmu didalam sistem ini tanpa batasan usia.
2
pemanfaatan media pembelajaran. Pembelajaran berbasis web dengan pemanfaatan media pembelajaran online merupakan salah satu solusi agar pembelajaran tidak hanya berlangsung secara formal dalam kelas akan tetapi bisa berlangsung diluar kebiasaan tersebut.
Apalagi kegandrungan pelajar terhadap teknologi jaringan internet melalui situs jejaring sosial semakin besar, hal ini menjadi peluang bagi guru tentang bagaimana menjadikan belajar tidak hanya berlangsung di dalam kelas tetapi tidak dibatasi oleh ruang dan waktu.[11]
Brown (1973) mengungkapkan bahwa media pembelajaran yang digunakan dalam kegiatan pembelajaran dapat mempengaruhi terhadap efektivitas pembelajaran. Pada mulanya, media pembelajaran hanya berfungsi sebagai alat bantu guru untuk mengajar yang digunakan adalah alat bantu visual. Sekitar pertengahan abad Ke –20 usaha pemanfaatan visual dilengkapi dengan digunakannya alat audio, sehingga lahirlah alat bantu audio-visual. Sejalan dengan perkembangan ilmu pengetahuan dan teknologi (IPTEK), khususnya dalam bidang pendidikan, saat ini penggunaan alat bantu atau media pembelajaran menjadi semakin luas dan interaktif, seperti adanya komputer dan internet. [14]
Dengan E-Learning memungkinkan terjadinya proses pembelajaran tanpa
melalui tatap muka langsung dan pengembangan ilmu pengetahuan kepada siswa bisa dilakukan dengan efektif melalui komputer di tempat mereka masing-masing
tanpa harus secara fisik pergi mengikuti pelajaran di kelas.
E-Learning merupakan cara baru dalam proses belajar mengajar yang menggunakan media elektronik khusus yaitu internet sebagai sistem
pembelajarannya. Maka dari itu, penulis membuat E-Learning Sebagai Media Pembelajaran Dengan Bootstrap Framework agar lebih mudah diakses oleh semua user, sehingga aplikasi sistem informasi course dengan E-Learning ini dapat digunakan untuk pembelajaran secara online. Pada sistem pengembangan sistem informasi course ini di desain dan di implementasikan menggunakan framework
Bootstrap.
Sistem informasi course ini atau sistem e-learning berfungsi untuk menampilkan data pengajar, materi-materi yang dapat di upload oleh pengajar dan
siswa (e-book), seputar informasi berupa informasi tentang course dan formulir pendaftaran pada course tersebut, informasi lowongan kerja, dan forum diskusi
(chat box) untuk member, lecturer, siswa online, dan admin serta informasi lainnya seperti : Galeri, Video Pendidikan, Video Kursus, Video Pembelajaran, Info Kursus, Beasiswa, Bahasa Asing, Informasi Lowongan Kerja, Formulir
Siswa, Kontak, Bantuan.
1.2 Perumusan Masalah
Pada latar belakang yang sudah diuraikan di atas, maka di dapatkan rumusan masalah sebagai berikut.
a. Bagaimana cara mengimplementasikan Sistem Informasi Course Sebagai Media Pembelajaran Online Menggunakan E-Learning Berbasis Web dan PHP Dengan Bootstrap Framework yang dapat diakses dengan mudah ? b. Bagaimana cara memperkenalkan ke masyarakat tentang pembelajaran
online ?
4
d. Bagaimana mempermudah pengajar dan siswa melakukan sistem pembelajaran tanpa mengadakan kelas ?
e. Bagaimana agar masyarakat yang minim pendidikan dapat memperoleh ilmu pengetahuan?
1.3 Batasan Masalah
Pada pembuatan skripsi ini, peneliti membatasi pembahasan masalah yang ada sebagai berikut :
a. Sistem informasi berisi tentang course, kegiatan siswa, metode pembelajaran melalui media video dan kegiatan belajar mengajar secara online serta seputar informasi seperti berita pendidikan dan informasi lowongan kerja.
b. Pada daftar pengajar, data yang ditampilkan ialah daftar nama dan program studi untuk user umum dan member. Dan untuk siswa maupun pengajar ditambahkan jadwal pengajar.
c. Pengajar dan siswa hanya bisa edit akun online-nya, upload materi, dan download materi atau tugas, serta pengajar dapat melihat siswa online-nya yang sedang login dan siswa juga dapat melihat pengajar yang sedang login. Pengajar dan siswa dapat menjelajah seputar informasi yang ada pada sistem informasi course. Member yang sedang login juga tampil pada data statistik.
d. Materi dapat di download oleh siswa dan pengajar. Siswa atau pengajar dapat melihat data pengajar dan jadwal pengajar, upload tugas, serta siswa
dapat browsing informasi seputar course yang ada pada sistem informasi course.
e. Group chat hanya dapat digunakan oleh admin, member, pengajar, dan siswa
online course.
1.4 Tujuan
Tujuan dalam menciptakan Sistem Informasi Course Sebagai Media Pembelajaran Online Menggunakan E-learning Berbasis Web dan PHP Dengan Bootstrap Framework ini adalah diantaranya :
a. Mengimplementasikan E-Learning Sebagai Media Pembelajaran Dengan Bootstrap Framework yang dapat diakses dengan mudah.
b. Membuat aplikasi e-learning berbasis web agar proses belajar mengajar menjadi lebih interaktif yang ditujukan untuk siapapun yang ingin
memperoleh ilmu didalam sistem ini tanpa batasan usia karena materi disajikan berdasarkan pertanyaan yang diajukan oleh siswa online didalam
chat room dan siswa online adalah siapa saja yang ingin belajar di course
ini.
c. Menyediakan media pembelajaran secara online dan informasi tentang
Student Center Course serta informasi lainnya dengan konsep E-Learning. d. Mengadakan kelas virtual untuk siapapun yang ingin belajar dan
6
e. Memberikan informasi kepada semua user maupun siswa dan member berupa media video pembelajaran, artikel tentang informasi lowongan kerja, dan artikel informasi berita ataupun events yang ada pada Student Center Course.
1.5 Manfaat
Manfaat yang diperoleh dalam E-learning Sebagai Media Pembelajaran Dengan Bootstrap Framework adalah :
a. Dengan adanya sistem informasi course pengajar dapat memberikan pembelajaran secara online tanpa harus mengadakan kelas dan siswa dapat mengambil atau download materi melalui e-learning yang diberikan pengajar dengan cepat.
b. Siswa dan pengajar dapat melakukan diskusi atau tanya jawab didalam sistem informasi course menggunakan forum chat didalam e-learning. c. Ketersediaan informasi berupa data pengajar, siswa, materi pelajaran yang
dapat disimpan dalam database server untuk digunakan di kemudian hari, sehingga dapat meminimalisir dokumen-dokumen yang berbentuk hard copy.
d. Sistem informasi course dapat diakses oleh semua pengguna atau user yang ingin mengetahui informasi tentang course dan sebagai media pembelajaran secara online.
1.6 Sistematika Penu lisan
Laporan skripsi ini akan menjelaskan tentang proses membuat
learning Sebagai Media Pembelajaran Dengan Bootsrap Framework. Untuk lebih mempermudah memahami materi yang sudah disusun dan dibuat, laporan skripsi ini dibagi menjadi lima bab yang dilengkapi dengan penjelasan pada tiap bab.
BAB I PENDAHULUAN
Bab ini akan menjelaskan tentang latar belakang, perumusan masalah, batasan masalah, tujuan, manfaat, dan sistematika penulisan.
BAB II TINJ AUAN PUSTAK A
Bab ini akan menjelaskan tentang landasan teori yang dipakai sebagai penunjang pembuatan laporan ini. Penjelasannya meliputi profil course, visi dan misi serta sasaran mutu course dan Sejarah course. Bab ini juga menjelaskan bagian yang terlibat di dalam sistem, alur di dalam sistem serta diagram alir (flowchart).
BAB III METODOLOGI PENELITIAN
Bab ini menjelaskan tentang alur sistem secara terkomputerisasi. Desain model sistem yang diterjemahkan kedalam Data Flo w Diagram (DFD) serta desain database yang diterjemahkan kedalam Conceptual Data Model (CDM) dan Physical Data Model (PDM).
BAB IV HASIL DAN PEMBAHASAN
8
aplikasi yang dibuat dari proses pendaftaran sebagai member user sampai informasi lowongan kerja pada course tersebut.
BAB V K ESIMPULAN DAN PENUTUP
Bab ini akan menjelaskan tentang kesimpulan dan saran terhadap aplikasi yang telah dibuat. Berupa masukan yang membangun atau konstruktif untuk kesempurnaan aplikasi.
DAFTAR PUSTAKA
Pada bagian ini akan dipaparkan tentang sumber-sumber literatur yang digunakan dalam pembuatan skripsi ini.
9
BAB II
TINJ AUAN PUSTAKA
2.1. Cour se
Course atau dalam bahasa Indonesia lembaga bimbingan belajar adalah salah satu lembaga non formal dalam pendidikan. Karena non formal maka lembaga bimbingan belajar berbeda dengan lembaga non fomal. Lembaga formal adalah lembaga yang berada langsung dibawah pemerintahan. Semua biaya dan kendalinya berada di pemerintah. Mulai dari cara mengajar, materi ajar, guru yang mengajar dan bahkan gedung yang digunakan juga berasal dari pemerintah. Sementara lembaga non formal adalah lembaga non pemerintah atau swasta. Karena non pemerintah. Maka segala biaya keperluan yang di butuhkan dalam pendidikan tersebut di biayai oleh swasta tanpa bantuan dari pemerintah.
Maka dari itu, kebanyakan lembaga non formal itu mahal dan sulit di jangkau oleh rakyat miskin. Begitu juga dengan lembaga bimbingan belajar. Karena non formal. Maka harga di sebuah lembaga bimbingan belajar sangat mahal. Namun kualitasnya memang berbeda dengan pendidikan yang ada di sekolah. Akan tetapi, lembaga bimbingan belajar masa kini atau masa modern seperti sekarang ini telah dipermudah dengan suatu teknologi yang biasa disebut course online.
Sistem informasi course yang menggunakan E-Learning adalah sistem pembelajaran jarak jauh yang memanfaatkan teknologi komputer, jaringan
komputer, dan internet.[5]
2.2. Pembelajaran Online
Pembelajaran online juga dikenal dengan pembelajaran elektronik, atau e-learning merupakan hasil dari suatu pembelajaran yang disampaikan secara elektronik dengan menggunakan komputer dan media berbasis komputer. Pembelajaran elektronik online merupakan bagian dari pembelajaran jarak jauh. Bahannya biasa sering diakses melalui sebuah jaringan. Sumbernya berasal dari website, internet, intranet, CD-ROM, dan DVD. Selain memberikan instruksi, e-learning juga dapat memonitor kinerja peserta didik. E-learning tidak hanya mengakses informasi (misalnya : halaman web), tetapi juga membimbing peserta didik untuk mencapai hasil belajar yang spesifik (misalnya : tujuan).
Sebagai guru, kita perlu menyadari variasi pilihan terbaik dari pendidikan jarak jauh dan pembelajaran online. Kita harus mampu untuk menyeleksi teknologi dan media terbaik yang dapat membantu siswa dalam belajar.
Potensi untuk aplikasi pendidikan pembelajaran online telah berkembang. Siswa tidak hanya dapat mengakses pengetahuan dari buku pelajaran, tetapi juga dapat mengakses materi pelajaran dari luar sekolah. Guru dan siswa dapat memperoleh informasi yang banyak, tidak terbatas, dan dapat di akses dari beberapa perpustakaan di seluruh dunia.
11
siswa dan guru bersama-sama untuk menuai keuntungan dari menghubungkan jaringan nasional siswa, guru, dan ilmuwan untuk menyelidiki berbagai topik.
Guru dan siswanya dapat mengakses dokumen elektronik untuk memperkaya pengetahuannya. Siswa dapat berpartisipasi aktif karena pembelajaran online menyediakan sebuah lingkungan belajar yang interaktif. Siswa dapat menghubungkan informasi elektronik ke dokumen dan proyek mereka, membuat dokumen elektroniknya “hidup” dengan tombol hypertext.
Karena komputer memiliki kemampuan untuk memberikan informasi dengan berbagai media (termasuk cetakan, video, dan rekaman suara dan musik) komputer menjadi sebuah perpustakaan yang tidak terbatas. Betapapun siswa mampu untuk segera berkomunikasi dengan teks, gambar, suara, data dan video dua arah, interaksi yang dihasilkan dapat mengubah peran siswa dan guru. Guru dapat dipisahkan secara geografis dari siswanya, siswa dapat belajar dari siswa lain di kelas seluruh dunia.[9]
Media pembelajaran adalah segala sesuatu yang dapat digunakan untuk menyalurkan pesan, dapat merangsang pikiran, perasaan, dan kemauan peserta didik sehingga dapat mendorong terciptanya proses belajar pada diri peserta didik. Pada awal mulanya media hanya dianggap sebagai alat Bantu mengajar guru (teaching aids) alat bantu yang dipakai adalah alat bantu siswa, misalnya gambar, model, objek, dan alat – alat lain yang dapat memberikan pengalaman konkrit, motivasi belajar serta mempertinggi serap dan retensi belajar siswa.
Teknologi pembelajaran memberikan pengaruh terhadap perubahan paradigma pembelajaran. Perubahan tersebut berimplikasi terhadap proses
pembelajaran yang meliputi tujuan materi, metode dan strategi, media dan evaluasi. Media pembelajaran dan teknologi pembelajaran memiliki hubungan yang sanggat erat karena penyampaian guru pada saat mengajar pasti menggunakan media pembelajaran.[12]
2.2.1 Manfaat Pembelajaran Online
Manfaat dari media pembelajaran adalah meningkatkan mutu pendidikan dengan jalan mempercepat rate of learning, membantu guru menggunakan waktu belajar secara lebih baik, serta mengurangi beban guru dalam menyajikan informasi.[12]
Adapun mantaat yang lain dari pembelajaran online antara lain :
a. Media yang bervariasi
Internet adalah sarana serbaguna yang memberikan informasi kepada pelajar di seluruh dunia. Situs-situs internet berisi media yang bervariasi termasuk teks, audio, grafik, animasi, video, dan software yang dapat di download.
b. Informasi yang up-to-date.
Sampai saat ini, para pendidik terbatas pada sumber yang ada di kelas atau gedung sekolahnya. Sekarang, dengan kemampuan untuk menghubungkan ke sumber-sumber di komunitas dan di seluruh dunia, membuka pandangan baru tentang pengajaran dan pembelajaran.
13
luar batasan lokal; ini memperluas cakrawala yang lebih kecil dan sekolah pedesaan serta partisipasi individu dalam home schooling. c. Navigasi
Keuntungan utama dari internet adalah mampu untuk bergerak dengan mudah dalam dan antar dokumen. Dengan menekan tombol atau mengklik dari mouse, pengguna dapat mencari berbagai macam dokumen di berbagai lokasi tanpa bergerak dari komputernya.
d. Bertukar ide
Siswa dapat terlibat dalam “percakapan” dengan para ahli di bidang studi tertentu. Selanjutnya, mereka dapat berpartisipasi dalam aktivitas yang memungkinkan untuk bertukar ide dengan siswa lain, bahkan mereka yang tinggal di negara-negara lain.
e. Komunikasi yang nyaman
E-mail memungkinkan orang-orang diberbagai lokasi untuk berbagai ide, sama seperti yang mereka lakukan di telepon sekarang, tanpa memainkan “tag telepon” begitu umumnya di kalangan orang sibuk. Pengguna dapat “bercakap” satu sama lain di waktu yang berbeda dan meresponnya sesuai kenyamanan mereka masing-masing. Rekaman yang ditukar dapat disimpan.
f. Biaya rendah
Biaya hardware, software, waktu telepon, dan servis telekomunikasi adalah nominal menurun.
2.2.2 Keter batasan Pembelajar an Online a. Umur materi yang tidak pantas
Salah satu hal yang menjadi keprihatinan beberapa topik pada jaringan komputer, utamanya di internet, adalah tidak cocoknya materi tersebut untuk siswa sekolah dasar. Iklan tembakau dan alkohol di internet dapat ditampilkan bersama permainan dan musik yang bisa dinikmati anak-anak.
b. Hak cipta
Karena informasi begitu mudah untuk diakses, hal itu juga sangat sederhana untuk seorang individu untuk secepatnya download sebuah berkas dan dengan beberapa perubahan, ia dapat mengerjakan tugasnya tanpa bersusah-susah payah lagi.
c. Pertumbuhan yang belum pernah terjadi sebelumnya
Diperkirakan setiap harinya ribuan situs baru ditambahkan ke internet. Pertumbuhan ini membuat penemuan informasi menjadi sangat sulit. Untuk membantu dalam pencarian informasi, beberapa perusahaan komersial dan universitas menyediakan mesin pencari dengan mengikuti link web dan menampilkan hasil yang sesuai dengan pertanyaan anda.
d. Pendukung
15
e. Akses
Baik dengan cara sistem bertanam atau nirkabel atau modem, semua pengguna harus memiliki sebuah cara untuk menghubungkan ke jaringan.[5]
2.3. E-learning
E-learning atau Electronic Learning adalah cara pembelajaran jarak jauh (distance learning) yang memanfaatkan teknologi komputer, jaringan komputer dan teknologi internet. E-learning memungkinkan pelajar untuk belajar melalui komputer tanpa harus pergi mengikuti pelajaran atau perkuliahan di kelas.[6]
2.3.1. Sejarah E-learning
Sistem E-learning pertama kali digunakan dalam pendidikan pada tahun 2003/2005 dimana ada dua sistem e-learning, diantaranya :
a. Computer Based Learning, sistem ini ditekankan pada komputer sebagai alat untuk mengakses.
b. Computer Supported Collaborative Learning, inovasi terbaru dalam sistem pembelajaran e-learning dan lebih dikenal dengan e-learning 2.0 dimana menekankan bahwa informasi dapat diakses secara bebas dan dapat dibagi dengan pengguna lainnya.[7]
2.3.2. Teknologi Pendukung E-learning
Dalam e-learning memerlukan bantuan teknologi dalam perkembangannya.
a. Computer Based Learning (CBL), yaitu pembelajaran yang sepenuhnya
menggunakan komputer.
b. Computer Assisted Learning (CAL), yaitu pembelajaran yang menggunakan alat bantu utama komputer.[1]
2.3.3. Alur Sistem E-learning Student Center Course
Dalam sistem ini, untuk user umum memiliki batas akses yang tidak dimiliki member maupun lecturer atau siswa. Pertama user membuka halaman web dimana menu – menu di dalamnya antara lain : beranda, e-learning, video, bahasa asing, form siswa. Di dalam menu e-learning, user hanya dapat mengakses data pengajar, e-book (materi), registrasi siswa reguler maupun siswa online, informasi terkait, dan info lowongan kerja.
Untuk member, menu sama dengan user tetapi pada menu e-learning disediakan fasilitas untuk chat room dengan admin, lecturer dan siswa yang sedang online lainnya.
Lecturer atau siswa memiliki menu yang sama dengan user, namun kelebihannya di dalam menu e-learning hak akses lecturer dan siswa dapat mengunduh dan menambahkan file (upload) serta chat room untuk berinteraksi dengan member dan siswa-siswi yang online lainnya maupun pengajar lainnya. Sedangkan admin memiliki semua akses yang dimiliki oleh user, member serta lecturer dan siswa.
17
1. Flowchart Admin
Ya
Tidak
Gambar 2.1 Flowchart Admin Start
Login melalui halaman admin
Input username admin dan password admin
dicocokkan dengan database
Sistem merespon dan
menerima data inputan
login
Masuk dashboard
admin
logout
end
2. Flowchart Member
Ya
Tidak
Gambar 2.2 Flowchart Member Start
Register dan login melalui form
member
Input data username member dan password member dicocokkan
dengan database
Sistem
merespon Berhasil masuk
Member masuk, sistem
menampilkan indeks member
logout
end Daftar sebagai
19
3. Flowchart Pengajar
Ya
Tidak
Gambar 2.3 Flowchart Pengajar Start
Login melalui ‘registrasi kelas online’form siswa
klik “masuk”
Input username dan password pada form “login kelas online” dan sistem memproses
data
Sistem merespon dan menerima data inputan login
pengajar
Masuk halaman indeks pengajar
online
logout
end
4. Flowchart Siswa Online
Ya
Tidak
Gambar 2.4 Flowchart Siswa Online Start
Registrasi dan login melalui form
siswa online
Input username dan password dan sistem
memproses data
Sistem merespon dan
menerima inputan login siswa
Masuk indeks
siswa online
logout Indeks siswa
online
end Registrasi
21
5. Flowchart Guest atau Visitor
Gambar 2.5 Flowchart Guest Atau Visitor start
Browsing, mengisi kontak, komentar
dan formulir siswa reguler
Sistem menyimpan data yang diinputkan
Menampilkan komentar yang dikirim dan menampilkan data dan
informasi
end
2.4. XAMPP
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.
Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.
XAMPP dikembangkan dari sebuah tim proyek bernama Apache Friends, yang terdiri dari Tim Inti (Core Team), Tim Pengembang (Development Team) & Tim Dukungan (Support Team).
23
X : Program ini dapat dijalankan dibanyak sistem operasi, seperti
Windows, Linux, Mac OS, dan Solaris. A : Apache, merupakan aplikasi web server.
Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. jika diperlukan juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan.
M : MySQL, merupakan aplikasi database server.
Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database. P : PHP, bahasa pemrograman web.
Merupakan salah satu bahasa pemrograman web yang paling banyak digunakan saat ini. Hasil dari NetCraft, menyatakan bahwa ada kurang lebih 52 juta pengguna PHP diseluruh dunia atau kalau di presentase sekitar 70,9%. Sebuah angka yang fantastis untuk sebuah bahasa permrograman.
P : Perl, bahasa pemrograman.
Mengenal bagian XAMPP yang biasa digunakan pada umumnya : Htdoc adalah folder tempat meletakkan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML dan skrip lain. phpMyAdmin merupakan bagian
untuk mengelola basis data MySQL yang ada dikomputer. Kontrol Panel yang berfungsi untuk mengelo la layanan (service) XAMPP. Seperti menghentikan (stop) layanan, ataupun memulai (start).
2.5 MySQL
MySQL adalah sebuah perangkat lunak IASM manajemen basis data SQL
(bahasa Inggris: database management system) atau biasa disingkat dengan
DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh
dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis
dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual
dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok
dengan penggunaan GPL.
Tidak sama dengan proyek-proyek seperti Apache, dimana perangkat
lunak dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber
dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh
sebuah perusahaan komersial Swedia MySQL AB, dimana memegang hak cipta
IASM atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia
yang mendirikan MySQL AB adalah: David Axmark, Allan Larsson, dan Michael
“Monty” Widenius.[13]
2.6. PhpMyAdmin
Phpmyadmin adalah perangkat lunak bebas yang ditulis dalam bahasa
pemrograman php yang digunakan untuk menangani administrasi MYSQL
25
berbagai aplikasi mysql, diantaranya (mengelola basis data, table- table, bidang,
relasi, indeks, pengguna, perizinan, dll).
2.6.1. Sejarah PhpMyAdmin
PhpMyAdmin dimulai pada tahun 1998 oleh Tobias Ratschiller seseorang
konsultan IT. Ratschiller mengerjakan sebuah program bernama
MYSQL-webadmin dengan bebas, yang merupakan produk dari Petrus Kuppelwieser, yang
telah berhenti mengembangkannya pada saat itu. Ratschiller menulis kode baru
untuk phpmyadmin, dan ditingkatkan pada konsep dari proyek Kuppelwieseer.
Ratschiller meninggalkan proyek phpmyadmin pada tahun 2001. Sekarang sebuah
tim dari delapan pengembang yang dipimpin oleh Oliver Muller meneruskan
pengembangan PhpMyAdmin di SourceForge.net. Beberapa pengembang
diantaranya :
a. Marc Delisle
b. Michal Cihar
c. Sebastian Mendel
d. Herman van Rink
PHPMyAdmin biasa digunakan untuk membuat database. Langkah
membuatnya adalah :
a. Buka browser anda. Kemudian ketik http://localhost/phpmyadmin b. Tulis nama database yang akan dibuat. Kemudain klik create.[4]
2.7. Bootstrap Framework
Bootstrap framework merupakan sebuah alat atau bisa disebut juga framework pembuatan gratis dari Twitter. Dengan sedikit CSS dan JavaScript, membantu kita membuat website dengan cepat, intuitif, dan mudah.[8]
27
BAB III
METODOLOGI PENELITIAN
3.1 Data Flow Diagram (DFD)
Desain sistem merupakan gambaran dari perencanaan yang dibuat oleh programmer untuk diaplikasikan ke dalam sistem. Desain sistem terdiri dari contex diagram, data flow diagram mulai dari level 0 sampai level terbesar dari sistem yang akan dibuat. Karena semakin besar level yang dibuat,akan semakin detail konsep yang dipaparkan ke dalam sistem informasi.[2]
Desain sistem yang ada pada Data Flow Diagram dijelaskan dengan desain DFD mulai level 0 hingga level 2 pada masing – masing user. Entitas yang terlibat didalam sistem ada 22 entitas diantaranya :
a. anggota. Merupakan entitas didalam database yang digunakan untuk menyimpan data member.
b. chat_rooms. Merupakan entitas yang digunakan untuk meyimpan list room seperti room khusus bahasa Itali, room khusus membahas tentang kesenian ada didalam room ‘Kesenian’, dan sebagainya. Juga menyimpan pesan chat yang dilakukan oleh user yang mengirim pesan chat.
c. chat_users. Merupakan entitas yang ada didalam database untuk menyimpan data user yang online seperti member, siswa online dan pengajar yang online dimana akan ditampilkan didalam kolom user online pada tabel chat room. d. chat_users_room. Merupakan entitas yang digunakan untuk menyimpan data e. comments. Merupakan entitas yang digunakan didalam database untuk menyimpan komentar yang dikirimkan oleh pengunjung maupun user yang memiliki akun didalam sistem course dimana komentar yang ditujukan adalah
f. contact. Merupakan entitas yang digunakan untuk menyimpan data pesan kontak dari pengunjung maupun user yang memiliki akun dimana admin dapat menerima pesan dari pengunjung didalam sistem admin.
g. events. Merupakan entitas yang ada didalam database untuk menyimpan data events yaitu kegiatan yang akan diselenggarakan oleh course.
h. formulir_pendaftaran. Merupakan entitas yang ada didalam database untuk menyimpan data siswa reguler.
i. gallery. Merupakan entitas yang digunakan untuk menyimpan data foto – foto atau dokumentasi course.
j. jobs. Merupakan entitas yang digunakan untuk menyimpan data info lowongan kerja didalam database.
k. materi. Merupakan entitas yang digunakan untuk menyimpan data e-book. l. meta. Merupakan entitas yang digunakan didalam database untuk menyimpan judul situs, keywords, footer, copyright, e-mail course dan lokasi course.
m. news. Merupakan entitas yang digunakan untuk menyimpan data informasi berita.
n. page. Merupakan entitas yang digunakan untuk menyimpan data menu halaman Student Center Course.
o. page_sub. Merupakan entitas yang digunakan untuk menyimpan data sub-menu di halaman Student Center Course.
p. pengajar. Merupakan entitas didalam database yang digunakan untuk menyimpan data pengajar.
29
r. prodi. Merupakan entitas yang digunakan untuk menyimpan data bidang studi yang ada didalam course dimana bidang studi yang tersimpan digunakan admin dalam meng-input jadwal pengajar.
s. slider. Merupakan entitas didalam database yang digunakan untuk menyimpan data header halaman.
t. statistik. Merupakan entitas didalam database yang digunakan untuk menyimpan data user yang sedang online untuk ditampilkan pada halaman indeks ketika user telah login.
u. tab_user. Merupakan entitas yang digunakan untuk menyimpan data akun admin, siswa online dan akun pengajar online.
v. videos. Merupakan entitas didalam database yang digunakan untuk menyimpan data video.
3.1.1 DFD Level 0
Level ini menjelaskan runtutan aliran data pada sistem Student Center Course. Secara umum pengguna sistem terdiri dari admin, member, lecturer, siswa dan guest. Admin merupakan pengelola dari semua aktivitas student center course, lecturer dan siswa adalah yang ikut terkait dalam data dan aktifitas di dalam sistem course, sedangkan member adalah pengunjung yang sudah mendaftar di website ini, serta user non member atau guest hanya menjelajah (browse) berbagai informasi yang disediakan oleh sistem. Terdapat lima aktor yang terlibat dalam sistem dengan deskripsi pekerjaan yang berbeda sesuai dengan peran yang dimilikinya dalam sistem.
Sistem akan memberikan batasan tertentu kepada setiap level user, tergantung kebutuhan tiap user yang tercatat pada sistem database seperti level admin, admin
Level lecturer memiliki hak akses sebagai pengguna yang tidak sepenuhnya mengatur data – data atau informasi keseluruhan, hanya dapat melakukan integrasi dengan siswa online. Level siswa memiliki hak akses sebagai siswa online untuk berinteraksi dengan semua lecturer yang online dan menyimpan tugas – tugas serta materi – materi yang diberikan oleh lecturer. Level member memiliki hak akses untuk berinteraksi kepada semua pengguna sebagai user yang ingin mengetahui lebih banyak tentang course tersebut, seperti tanya jawab secara langsung (online). Sedangkan guest hanya sebagai pengunjung yang hanya sekedar menjelajah seputar informasi atau mengirim komentar.
menampilkan chat untuk pengajar
siswa mengisi kontak dan komentar member mengisi kontak dan komentar
mengisi formulir pendaftaran siswa reguler mengisi kontak dan komentar informasi untuk guest atau visitor tanpa akun
menampilkan chat untuk siswa online informasi untuk siswa online
masuk chat room daftar dan login akun siswa online
menampilkan chat untuk member informasi untuk member member masuk chat room register dan login akun member
31
3.1.2 DFD Level 1
menampilkan chat dan notifikasi informasi untuk admin masuk chat room admin input edit delete semua data mengelola data melalui dashboard
login akun admin admin
admin
admin
admin
admin
admin
1
sistem untuk admin
Gambar 3.2 DFD level 1 Admin
Seperti terlihat pada gambar 3.2 pada level ini terdapat 1 sub proses, yaitu:
1. Sistem Untuk Admin
Proses ini digunakan untuk menangani proses pengolahan data untuk admin. Dalam proses ini terdapat beberapa sub-proses yaitu: login akun admin, mengelola data di dashboard, input update dan delete data, masuk chat room admin, output dari sistem antara lain informasi untuk admin dan menampilkan chat serta notifikasi.
member mengisi kontak dan komentar menampilkan chat untuk member
informasi untuk member member masuk chat room register dan login akun member member
member
member
member
member
2
sistem untuk member
Gambar 3.3 DFD level 1 Member
1. Pengolahan Data Sistem Untuk Member
33
upload ebook
siswa mengisi kontak dan komentar
menampilkan chat untuk siswa online informasi untuk siswa online daftar dan login akun siswa online
masuk chat room
Gambar 3.4 DFD level 1 Siswa Online 1. Pengolahan Data Sistem Untuk Siswa Online
Disini sistem memberikan siswa untuk melakukan interaksi dalam forum chat serta upload dan download e-book, siswa dapat menulis komentar dan kontak dan siswa online dapat mengetahui pengajar yang online serta siswa dapat mengelola data akun online-nya.
menampilkan chat untuk pengajar informasi untuk pengajar mengisi kontak dan komentar
masuk chatroom upload ebook pengajar
login akun pengajar pengajar
pengajar
pengajar
pengajar
pengajar
pengajar
4
sistem untuk pengajar
Gambar 3.5 DFD level 1 Pengajar 1. Pengolahan Data Sistem Untuk Pengajar
35
mengisi formulir pendaftaran siswa reguler
informasi untuk guest atau visitor tanpa akun mengisi kontak dan komentar
guest guest
guest
5
sistem untuk guest
Gambar 3.6 DFD level 1 user / guest
Sistem informasi dapat dinikmati oleh user pengunjung dimana mereka dapat mengetahui segala bentuk informasi tentang Student Center Course dan pengunjung dapat mengisi data formulir pendaftaran siswa juga. Data flow yang digunakan antara lain : mengisi kontak dan komentar, mengisi formulir pendaftaran siswa reguler, dan informasi untuk guest atau visitor tanpa akun online.
3.1.3 DFD Level 2
Pada tahap ini, aliran proses akan diuraikan lagi menjadi lebih rinci sehingga menghasilkan aliran - aliran proses yang akan mencerminkan setiap sub-bagian proses dengan lebih detail.
menampilkan data video add dan delete video
menampilkan data akun siswa online dan pengajar online add edit delete akun online siswa dan pengajar
menampilkan visitor dan page views di dashboard menampilkan slideshow
add edit delete slideshow menampilkan daftar program studi add edit delete program studi
menampilkan jadwal pengajar add edit delete jadwal pengajar
menampilkan data pengajar add edit delete akun pengajar
menampilkan sub menu situs add edit delete sub menu situs
menampilkan menu situs add edit dan delete menu situs menampilkan informasi berita add edite delete dan approve data news
menampilkan profil situs manage situs menampilkan list ebook upload dan delete ebook
menampilkan informasi job add edit delete approve data job menampilkan gallery add dan delete dokumentasi add edit dan delete data siswa reguler
mengisi form siswa reguler menampilkan informasi events add edit delete dan publish event
menampilkan kontak yang masuk
menampilkan jumlah user online didalam room menampilkan user online didalam forum chat
menampilkan list room add dan delete room
menampilkan chat dan notifikasi informasi untuk admin masuk chat room admin input edit delete semua data mengelola data melalui dashboard
37
Seperti terlihat pada gambar 3.7 pada level ini terdapat 1 sub proses, yaitu:
1. Pengolahan Data Sistem Untuk Admin
Disini admin mengisi username dan password dan sistem akan menerima data yang telah dimasukkan lalu sistem menampilkan sub-menu admin di sistem informasi course. Admin kemudian mengelola data yang dapat ditambahkan ke dalam sistem informasi melaui dashboard. Admin dapat melakukan upload data, manage data, update dan insert data. Admin juga dapat melakukan interaksi chat online.
Sistem memberikan output berupa informasi yang telah ditambahkan oleh admin. Dimana data yang dimasukkan dan di kelola admin disimpan di dalam database “course” yang memiliki 22 entities yang semuanya diperlukan oleh admin dalam proses pengolahan data dan jalannya data sistem dengan menggunakan sistem flow.
Data flow yang digunakan didalam proses ini diantaranya meliputi : edit dan delete akun member, menampilkan data akun member, add dan delete room, menampilkan list room, menampilkan user online didalam forum chat, login otomatis chat room, menampilkan jumlah user online didalam room, hapus dan publish komentar, menerima komentar yang masuk, menampilkan komentar pada sistem, hapus kontak yang diterima, menampilkan kontak yang masuk, add edit delete dan publish events, mengisi form siswa reguler, add edit dan delete data siswa reguler, add dan delete dokumentasi, menampilkan gallery, add edit delete approve data job, menampilkan informasi job, upload dan delete ebook, dan sebagainya seperti yang ada pada gambar 3.7.
menampilkan video menampilkan slideshow menampilkan pilihan program studi menampilkan bidang studi pengajar
menampilkan daftar pengajar menampilkan sub menu halaman course
menampilkan menu halaman course
menampilkan user online pada list room chat menampilkan list user yang online chat login akun member chat otomatis
menampilkan list room ke member menampilkan data akun member dan statistik
edit akun online member input username dan password member
member mengisi kontak dan komentar menampilkan chat untuk member
informasi untuk member member masuk chat room register dan login akun member
member
39
Seperti terlihat pada gambar 3.8 pada level ini terdapat 1 sub proses, yaitu:
1. 1. Proses Pengolahan Sistem Untuk Member
Proses ini digunakan untuk menangani proses pengolahan data member yang di-input. Dalam proses ini terdapat beberapa sub-proses yaitu: register dan login lecturer siswa, mengelola profil, upload dan download e-book, dan akses halaman lecturer atau siswa. Sistem memberikan output materi kepada lecturer atau siswa yang telah upload kepada sistem dan sistem menyimpan data tersebut ke dalam database. Sistem keluaran terdiri dari : informasi untuk lecturer dan siswa, dan chat online untuk lecturer dan siswa.
Flow dalam database antara lain : menambah komentar, menampilkan daftar komentar, mengisi kontak, tampil info events, menampilkan data gallery, menampilkan info lowker, upload materi, download materi, menampilkan informasi berita, kelola profil pengajar dan siswa, menampilkan profil siswa dan pengajar, saving data otomatis, memilih bidang studi, daftar dan login siswa online, login akun lecturer, akses balik ke lecturer dan siswa, menampilkan data video, saving activity chat, dan login untuk chat.
Entity yang digunakan ada 19 entities, diantaranya : anggota, chat_rooms, chat_users, chat_users_rooms, comments, contact, events, gallery, jobs, materi, meta, news, page, page_sub, pengajar, pengajar_detail, prodi, slider, dan videos.
menampilkan video menampilkan statistik online user edit akun profil siswa online
register dan login
menampilkan user yang online pada list room menampilkan list user yang online login chat akun siswa online otomatis
menampilkan list room ke siswa online
upload ebook siswa mengisi kontak dan komentar
menampilkan chat untuk siswa online informasi untuk siswa online daftar dan login akun siswa online
masuk chat room
41
Seperti terlihat pada gambar 3.9 pada level ini terdapat 1 sub proses, yaitu:
1. Proses Pengolahan Data Sistem Untuk Siswa Online
Proses ini digunakan untuk menangani proses pengolahan data sistem untuk siswa online dimana sistem menerima input dan sistem menampilkan output. Dalam proses ini terdapat beberapa proses input dan output data yaitu: daftar dan login akun siswa online, masuk chat room, menampilkan chat untuk siswa online, informasi untuk siswa online, siswa mengisi kontak dan komentar, dan upload ebook.
Data flow yang digunakan kedalam sistem database antara lain : menampilkan list room ke siswa online, login chat akun siswa online otomatis, menampilkan list user yang online, menampilkan user yang online pada list room, mengisi komentar, menampilkan komentar, mengisi kontak, menampilkan informasi events, menampilkan gallery, menampilkan informasi lowongan kerja, upload ebook, download ebook, menampilkan list ebook, menampilkan profil halaman, menampilkan informasi berita, menampilkan menu halaman, menampilkan daftar pengajar, menampilkan jadwal pengajar, menampilkan program studi, menampilkan slideshow, register dan login, edit akun profil siswa online, menampilkan statistik online user, dan flow terakhir adalah menampilkan video.
menampilkan statistik siswa online dan pengajar online
menampilkan list user online pada room chat menampilkan list user chat online login chat akun pengajar online
menampilkan list room ke pengajar
login akun pengajar
43
Seperti terlihat pada gambar 3.10 pada level ini terdapat 1 sub proses, yaitu:
1. Proses Pengolahan Data Sistem Untuk Pengajar
Proses ini digunakan untuk menangani proses pengolahan data sistem untuk pengajar dimana sistem menerima input dan sistem menampilkan output. Dalam proses ini terdapat beberapa proses input dan output data yaitu: login akun pengajar, upload ebook pengajar, masuk chatroom, mengisi kontak dan komentar, informasi untuk pengajar dan menampilkan chat untuk pengajar.
Data flow yang digunakan kedalam sistem database antara lain : menampilkan list room ke pengajar, login chat akun pengajar online, menampilkan list user chat online, menampilkan list user online pada room chat, mengisi komentar, menampilkan komentar, mengisi kontak, menampilkan informasi events, menampilkan gallery, menampilkan informasi lowongan kerja, upload ebook, download ebook, menampilkan daftar ebook, menampilkan profil halaman, menampilkan informasi berita, menampilkan menu halaman, menampilkan list data pengajar, menampilkan jadwal pengajar, menampilkan program studi, menampilkan slideshow, login akun online pengajar, edit akun online pengajar, menampilkan statistik siswa online dan pengajar online, dan flow terakhir adalah menampilkan video.
menampilkan video mengisi formulir pendaftaran siswa reguler
menampilkan events mengisi kontak menampilkan komentar mengisi komentar
mengisi kontak dan komentar
informasi untuk guest atau visitor tanpa akun
mengisi form siswa reguler member atau siswa online guest
45
Seperti terlihat pada gambar 3.11 pada level ini terdapat 1 sub proses, yaitu:
1. Proses Pengolahan Data Sistem Untuk Guest / Pengunjung
Proses ini digunakan untuk menangani proses pengolahan data sistem untuk pengunjung dimana sistem menerima input dan sistem menampilkan output. Dalam proses ini terdapat beberapa proses input dan output data yaitu: mengisi kontak dan komentar, informasi untuk guest atau visitor tanpa akun, dan mengisi form siswa reguler member atau siswa online.
Data flow yang digunakan kedalam sistem database antara lain : register sebagai member, mengisi komentar, menampilkan komentar, mengisi kontak, menampilkan events, mengisi formulir pendaftaran siswa reguler, menampilkan gallery, menampilkan informasi lowongan kerja, menampilkan list ebook, menampilkan profil situs, menampilkan informasi berita, menampilkan menu situs, menampilkan sub menu situs, menampilkan list pengajar, menampilkan program studi, menampilkan slideshow, dan menampilkan video.
3.2 Desain Database
Desain database sistem akan menjelaskan konsep CDM dan PDM. Sebagai bahan input database ke dalam sistem, dikerjakan pada CDM kemudian di generate ke dalam PDM.
3.2.1 Entitas yang ada pada CDM dan PDM
Entitas merupakan simbol yang menggambarkan orang, bagian, organisasi, sistem lain atau bentuk kesatuan lainnya yang berada diluar sistem yang akan memberikan input pada sistem dan menerima output dari sistem.[3]
bagian, diantaranya: a. anggota b. comments c. contact d. events
e. formulir_pendaftaran f. gallery
g. jobs h. materi i. news j. pengajar k. pengajar_detail l. prodi
m.tab_user n. videos o. chat_rooms p. chat_users
3.2.2 Relasi yang digunakan pada CDM dan PDM di dalam sistem
47
ke dalam desain dan implementasi sistem informasi course diantaranya :
a. User umum Student Center Course melakukan browsing bebas dimana dapat menjelajahi semua informasi course yang disediakan oleh sistem.
b. User yang belum terdaftar pada sistem, diharapan untuk melakukaan registrasi pendaftaran pada form register yang telah disediakan sistem. User tidak dapat melakukan chat live.
c. Form registrasi member meliputi nama, email, dan password yang nantinya registrasi ini akan diberikan oleh sistem agar member dapat menjelah semua informasi didalam Sistem Informasi Course Sebagai Media Pembelajaran Online Menggunakan E-Learning Berbasis Web dan PHP Dengan Bootstrap Framework.
d. Setelah member melakukan login maka member akan masuk pada halaman index member. Halaman member ini menampilkan informasi tentang informasi course dan menyediakan fasilitas melalui live chat.
e. Data di E-learning ditampilkan sesuai batasan level masing-masing, data siswa, data pengajar atau jadwal pengajar dan data materi yang pengelolaannya dilakukan oleh admin yang datanya tersimpan pada database.
3.2.3 CDM (Conceptual Data Model)
CDM merupakan implementasi sistem untuk membuat database. Entity merupakan objek yang terlibat didalam sistem. Untuk menghubungkan antar entitas dibutuhkan relationship.
Selain itu CDM dipakai untuk menggambarkan secara detail struktur basis data dalam bentuk logik.
Struktur ini independen terhadap semua software maupun struktur data storage tertentu yang digunakan dalam aplikasi ini. CDM terdiri dari objek yang tidak diimplementasikan secara langsung kedalam basis data yang sesungguhnya.[10]
Dijelaskan pada gambar 3.12
49
3.2.4 PDM (Physical Data Model)
PDM adalah hasil generate dari CDM. Sebelum di generate, programmer bisa melakukan check model, untuk mengetahui apakah ada relasi yang error. Apabila error maka harus diulangi proses relasinya, apabila sekedar warning maka masih bisa ditoleransi untuk melakukan generate.[10]
Gambar 3.13 PDM Sistem Student Center Course
Hierarki menu merupakan skema menu dari sistem informasi dimana page utama memiliki beberapa menu bagian (sub-menu) dari menu utama. Berikut gambar dari hierarki menu dari sistem informasi E-Learning Student Center Course.
51
3 . 3 Rancangan Interface
Rancangan interface merupakan rancangan halaman aplikasi yang berinteraksi langsung antara sistem dengan pengguna. Rancangan interface sistem merupakan salah satu bagian penting dalam tahap rancangan sistem. Dalam merancang antar muka aplikasi harus memudahkan pengguna dalam mengoperasikan sistem atau aplikasi tersebut.
Konsep rancangan yang sangat penting untuk mendesain halaman web adalah resolusi monitor. Terdapat tiga buah resolusi yang umum digunakan pada monitor, diantaranya 640x480, 800x600, 1024x768 piksel. Namun, dalam sistem Informasi Student Center Course, resolusi yang digunakan adalah responsive sehingga dapat digunakan secara otomatis mengikuti layar monitor atau perangkat mobile lainnya. Rancangan interface pada sistem Student Center Course dapat dilihat pada gambar 3.15
Gambar 3.15 Rancangan Halaman Utama Student Center Course
yang akan dibuat yang nantinya akan digunakan oleh semua user dalam sistem informasi e-learning online.
Gambar 3.16 Rancangan Halaman Login untuk Admin
Pada gambar 3.16 merupakan sketsa untuk halaman login untuk admin didalam sistem informasi Student Center Course.
Gambar 3.17 Rancangan Halaman Index Admin
53 BAB IV
HASIL DAN PEMBAHASAN
Pada Bab IV Hasil Dan Pembahasan ini akan dipaparkan terkait seluruh aplikasi yang sudah dibuat, mulai dari interface serta coding sistem Student Center Course. Halaman web Student Center Course dapat diakses di alamat
http://www.studentcentercourse.allalla.com
4.1 Implemantasi Program
Pada bab ini dijelaskan mengenai pembahasan program aplikasi Student Center Course yang telah dirancang menggunakan data-data yang sebelumnya telah dijelaskan pada bab sebelumnya. Ada beberapa halaman yang akan dibahas yaitu :
4.1.1 Halaman Index
Halaman ini merupakan halaman utama pada situs Student Center Course. Yang digunakan oleh user atau visitor. Ketika visitor atau user membuka halaman utama, maka akan terlihat di dalam page Student Center Course beberapa content sistem informasi course seperti title page, header page, lastest jobs, lastest news, download e-book, lastest video, lastest photo, dan footer page.
Halaman index user memiliki isi page yang dapat dilihat dengan mudah seperti bagian – bagian menu utama dengan sub menu didalam page index tersebut, diantaranya :
Beranda : Tentang, Galeri, Info Kursus, Bantuan, Kontak. E-learning : E-Book, Daftar Pengajar, dan Beasiswa. Video : Video Pendidikan, Video Kursus, Video Pembelajaran. Bahasa Asing : Bahasa Korea, Bahasa Italia, Bahasa Jepang,
Bahasa Mandarin, daan menu Form Siswa : Registrasi Kelas Regular dan Registrasi Kelas Online.
55
Source code untuk implementasi halaman index user adalah sebagai berikut :
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<?php require $dir."/header.php"; ?>
<h1><span><a href="<? echo $url ?>"><?php echo $meta['title'] ?></a></span></h1>
</div>
<?php require $dir."/menu.php"; ?>
<?php require $dir."/slider.php"; ?>
<div class="container_all masterbg margintop">
<div class="container marketing">
<div class="row margintop marginbottom">
<?php require $dir."/sidebar.php"; ?>
<?php require $dir."/news.php"; ?>
<?php require $dir."/rsidebar.php"; ?>
</div>
<div class="clear"></div>
</div>
<div class="container_all margintop bandbg">
</div>
</div>
<div class="clear"></div>
<div class="container_all_footer">
<!-- Footer -->
<?php require $dir."/footer.php"; ?>
</div>
<? } ?>
<div id="fb-root"></div>
Index halaman sistem informasi course online diatas merupakan halaman utama yang pertama kali dibuka oleh user untuk mengakses berbagai informasi didalam sistem informasi student center course Merupakan gerbang utama (bridge) sistem dalam pengaplikasian informasi di Student Center Course. Pada halaman utama ini terdapat beberapa fitur untuk memberikan informasi kepada pengunjung. Informasi tersebut diantaranya adalah :
1. Lowongan Kerja Terkini, yaitu berfungsi untuk menampilkan informasi lowongan kerja terbaru kepada pengunjung (visitor).
2. Kegiatan Events, yaitu berfungsi untuk menampilkan informasi kegiatan events yang diadakan oleh pihak Student Center Course atau kegiatan yang diadakan oleh pihak lain.
3. Berita Terkini, yaitu berfungsi untuk menampilkan informasi yang terkait tentang cara – cara atau tips, panduan, motivasi dan lainnya.
4. Video Terkini, yaitu berfungsi untuk menampilkan video terbaru tentang video animasi pembelajaran, video tata cara melakuan kegiatan belajar – mengajar, mengadakan kelas dan video tutorial.
5. Foto Terkini, yaitu berfungsi untuk menampilkan foto terbaru meliputi foto kegiatan belajar – mengajar, foto events, dan foto aktifitas siswa di Student Center Course.
57
tersebut maka dapat menerima informasi terbaru meskipun semua pengguna tidak berada di sistem informasi Student Center Course.
Gambar 4.2 Implementasi halaman index admin
Source code untuk implementasi halaman index admin adalah sebagai berikut :
<?php
session_start();
error_reporting(0);
include "../conn/config.inc.php";
if(!isset($_SESSION['username'])){
header('Location: index.php');
}
$act = $_GET['act'];
?>
...
<?php include "content.php"; ?>
...
<?php
session_start();
$act = $_GET['act']; // request halaman dari variabel
switch ($act)
{
case "dashboard":
include "widget.php";
break;
case "manage-site":
include "meta.php";
break;
...
Pada interface ini, merupakan halaman utama admin atau dashboard yang berfungsi penting dalam pengelolaan data – data sistem informasi course seperti User Account, Comments, User Online, Job Information, Visitors, Page Views dan semua form data seperti data lecturer, data siswa, data e-book, data gallery, dan data video. Selain Dashboard halaman ini juga menampilkan menu – menu lainnya untuk mengelola data – data tersebut diantaranya Forms, Data Tables, File Manager, dan Comments.
1. User Account, berfungsi untuk menampilkan jumlah user yang terdaftar sebagai siswa online dan akun pengajar online.
59
3. User Online, berfungsi untuk menampilkan status online siswa maupun pengajar yang sedang online.
4. Job Informations, berfungsi untuk menampilkan data info lowongan kerja. Pada fitur ini terdapat beberapa fungsi yaitu :
a. Untuk menyetujui info lowongan kerja dipublikasikan
b. Untuk menyimpan info lowongan kerja sebagai draft
c. Untuk mengubah data info lowongan kerja
d. Untuk menghapus info lowongan kerja
5. Visitors, berfungsi untuk menampilkan jumlah pengunjung berdasarkan ip address yang terhitung pada tanggal saat berkunjung.
6. Page Views, berfungsi untuk menampilkan jumlah halaman yang dilihat.
Gambar 4.3 Implementasi halaman index member
Source code untuk implementasi halaman index member adalah sebagai berikut :
...
<?php require $dir."/member/header.php"; ?>
<h1><span><a href="<? echo $url ?>member/"><?php echo $meta['title'] ?></a></span></h1>
</div>
<?php require $dir."/member/menu.php"; ?>
<?php require $dir."/member/slider.php"; ?>
<div class="container_all masterbg margintop">
<div class="container marketing">
<div class="row margintop marginbottom">
<?php require $dir."/member/sidebar.php"; ?>
<?php require $dir."/member/news.php"; ?>
<?php require $dir."/rsidebar.php"; ?>
...
Index halaman member sama dengan halaman index user, hanya saja function menu sama dengan akses lecturer dan siswa online kecuali untuk mengakses e-book, member hanya dapat melihat list e-book seperti halnya user umum. Tetapi member juga dapat melakukan chat online didalam sistem informasi Student Center Course.
Pada halaman utama ini terdapat beberapa fitur untuk memberikan informasi kepada pengunjung. Informasi tersebut diantaranya adalah :
