Embed Size (px)
Citation preview
PERANCANGAN WEBSITE E-LEARNING PADA SMA BUDI MULIA
BOGOR
Dewi Anggraini Puspa Hapsari
Fakultas Ekonomi Universitas Gunadarma
Jalan Margonda Raya No.100 Depok
ABSTRAK
Proses belajar mengajar dapat terjadi dengan syarat adanya pertemuan antara siswa
dengan murid dikelas, namun jika ada guru yang bersangkutan tidak hadir dan adanya
durasi waktu belajar yang dibatasi oleh pihak sekolah maka hal ini dapat mengakibatkan
proses belajar mengajar menjadi terhambat.Tujuan penelitian ini adalah membuat suatu
website e-learning mata pelajaran yang dapat digunakan oleh siswa untuk bisa selalu
mendapat materi pelajaran atau mengerjakan soal-soal latihan yang nantinya akan
diberikan oleh guru yang bersangkutan yaitu pada mata pelajaran geografi. Penelitian ini
menggunakan software php mysql dan moodle, selain itu penelitian ini menggunakan
model SDLC dalam tahap proses perancangannya.
Kata Kunci : E-learning, Moodle, Geografi, PHP, MYSQL
PENDAHULUAN
Metode belajar secara online dan interaktif membuat siswa dapat belajar dimanapun
dan kapanpun tanpa adanya masalah dengan ruang dan waktu, namun hasil observasi
yang dilakukan pada SMA BUDI MULIA kepada 30 siswa kelas 1 sampai dengan 3
bahwa hampir 60% lebih siswa menganggap pelajaran Geografi sangat sulit untuk
dihafalkan dan dipahami. Model yang digunakan dalam pembelajaran Geografi kurang
bervariasi yang menyebabkan rasa ketertarikan terhadap mata pelajaran Geografi menjadi
berkurang sehingga motivasi belajar siswa menjadi rendah. Kurangnya ketertarikan siswa
sekolah pada pelajaran IPS di bidang Geografi disebabkan dalam pembelajaran geografi
lebih menekankan pada hafalan seperti permukaan bumi, di luar bumi, bahkan benda-
benda di ruang angkasa pun turut menjadi objek kajian Geografi. Banyak sekali yang
dihafalkan dalam pelajaran Geografi sehingga seringkali siswa menjadi malas untuk
memahami atau membaca buku-buku tentang Geografi. Untuk itu penulis akan membuat
suatu aplikasi berbasis web yang dapat dipergunakan oleh sekolah sebagai sarana
pembelajaran dan dapat menambahkan pengetahuan kepada siswa khususnya dalam mata
pelajaran geografi sehingga menambah ketertarikan siswa karena proses belajar yang
lebih bervariasi.
METODE PENELITIAN
Penelitian ini menggunakan metode studi pustaka dengan mengumpulkan
informasi dari berbagai sumber seperti dari buku dan internet, selain itu penelitian ini
juga menggunakan model SDLC (Software Development Life Cycle) dalam tahap proses
perancangannya. Model SDLC yang dipakai dalam penelitian ini adalah model Waterfall.
Gambar 1. Model Waterfall
HASIL DAN PEMBAHASAN
Pada tahap ini dilakukan perancangan struktur navigasi dan perancangan halaman
tampilan website.
Struktur navigasi
Struktur navigasi yang digunakan pada aplikasi ini terbagi menjadi dua bagian
yaitu stuktur navigasi untuk admin dan stuktur navigasi untuk user. Namun keduannya
sama-sama menggunakan jenis struktur navigasi campuran karena terdiri dari struktur
navigasi non linear dan struktur navigasi hirarki.
a. Struktur Navigasi User
Gambar 2. Struktur navigasi user
Halaman awal ketika web pertama kali dibuka yaitu setelah user login
dengan memasukkan username dan password, user dapat melakukan registrasi
sesuai petunjuj yang telah ada pada halaman ini. Setelah login user akan masuk
kehalaman course yang isinya adalah pilihan materi yang tersedia.
index
Log in
courses
register Log out
1
2
3 4 5
6
7
8 12 14 16 18
9 11 13 15 17 19
10 25
21
22 23 24
52
27 29 31
26 28 30 32
33
38 37 36 35 34
39 41 43 45 47
40 42 44 46 48
49
51 50
53
20
54
55
56
57 58
59 60
61 62
63
1 20 33 39
b. Struktur Navigasi Admin
Gambar 3. Struktur navigasi admin
Admin login dengan memasukkan username dan password
sebagai admin dan dapat mengakses dan memantau semua fitur dari isi website.
Rancangan Tampilan Aplikasi Website
Pada bagian ini penulis akan membuat rancangan tampilan situs yang akan
dibuat beserta tampilan outputnya dari website.
index
Log in Log out
Site management
1
2 3 4
5
6
7
8
9 10
11
12
13 14
15
16 17 18
22 23 24 25 26
19
20
27 28
31 30 29
32
34 33
35
21
a. Rancangan Tampilan Situs untuk User
Rancangan Halaman Index User
Gambar 4. Rancangan halaman index user
Gambar 5. Tampilan halaman index user
Halaman ini merupakan halaman awal bagi user saat masuk e-learning
sebagai index.php. Terdapat available courses yang dapat dipilih oleh user untuk
Logo1 Link1
Pull1
Text2 Link2
Link3
Link4
Link 5
Misc1
Text1
diikuti yaitu, kelas 1 sma, kelas 2 sma, kelas 3 sma, try out, dan juga terdapat
kalender di sisi kanannya.
Rancangan Halaman Form Log In
Gambar 6. Rancangan halaman form log in
Logo1 Link1
Pull1
Text1
Text2
Text3
Fill1
Fill2
But1
But2
But3
Text4
But4
Link1
Gambar 7. Tampilan halaman form log in
Pada halaman ini merupakan halaman untuk log in user ke dalam e-
learning. Jika user belom terdaftar dapat mendaftarkan diri di create new accounts.
Di create new accounts user dapat mengisi username, password, dan email untuk
di daftarkan.
Rancangan Halaman Register
Gambar 8. Rancangan halaman register
Gambar 9. Tampilan halaman register
Logo1 Link1
Pull1
Form1
But1 But2
Link1
Pada halaman ini user yang belom terdaftar dapat mendaftar disini dengan
mengisikan data dengan benar. Jika data yang diisi sudah benar maka klik tombol
create a new account. Setelah itu tunggu sampai account di accept oleh admin
sehingga dapat masuk.
Rancangan Halaman Home User
Gambar 10. Rancangan halaman home user
Gambar 11. Tampilan halaman home user
Halaman ini merupakan halaman log in bagi user yang sukses masuk pada
saat log in. Terdapat available courses yang dapat dipilih oleh user untuk diikuti
yaitu, kelas 1 sma, kelas 2 sma, kelas 3 sma, try out, dan juga terdapat kalender di
sisi kanannya.
Rancangan Halaman Kursus untuk User
Logo1 Link1
Pull1
Text2
Link2
Misc1 Text1
Link1
Logo1
Gambar 12. Rancangan halaman kursus untuk user
Link1
Pull1
Link2
Link3
Link4
Link5
Box1
Link6
Link7
Link8
Link9
Link10
Link11
Link12
Link13
Link14
Link15
Link16
Text1
Text2
Text3
Link1
Gambar 13. Tampilan halaman kursus untuk user
Ini merupakan contoh halaman kursus yang diikuti oleh user contohnya
pada kelas 1 SMA. Terdapat juga participants, forums, quiz, resources, search,
grades, dan profiles yang dapat diakses oleh user.
Rancangan Halaman Materi
Gambar 14. Rancangan halaman materi
8
9
1 2 3 4 5 6 7
Gambar 15. Tampilan halaman materi
Pada halaman ini merupakan contoh dari materi yang diambil pada
halaman kursus. Materi ini berbentuk word yang dapat dibaca oleh user sebelum
mengerjakan latihan pada kursus tersebut
Rancangan Halaman Quiz/Latihan
Logo1 Link1
Pull1
Text1
But1 But2 But3
Link1
Gambar 16. Rancangan halaman quiz/latihan
Gambar 17. Tampilan halaman quiz/latihan
Pada halaman ini merupakan halaman quiz/latihan yang diikuti oleh user.
Halaman ini terdapat 20 soal yang harus dikerjakan oleh user. User yang sudah
mengerjakan soal dapat submit persoal atau dapat submit all and finish dan
langsung member nilai pada user.
Rancangan Halaman Participants
Gambar 17. Rancangan halaman participants
Logo1 Pull1
Pull2
Tab1
Link1
Gambar 18. Tampilan halaman participants
Pada halaman ini user dapat melihat daftar peserta yang mengikuti kursus.
User dapat mengakses halaman participants ini di semua kursus yang ada.
Rancangan Halaman Forum
Gambar 19. Rancangan halaman forum
Logo1
Pull1
For1
Link1
Gambar 20. Tampilan halaman forum
Pada halaman forum user dapat melihat berita mengenai kursus yang
diikuti.
Rancangan Halaman Quizzes
Gambar 21. Rancangan halaman quiz
Gambar 22. Tampilan halaman quizzes
Logo1 Pull1
Tab1
Link1
Pada halaman ini user dapat melihat quiz apa saja yang terdapat pada
kursus yang diikuti.
Rancangan Halaman Resources
Gambar 23. Rancangan halaman resources
Gambar 24. Tampilan halaman resources
Pada halaman ini user dapat melihat materi apa saja yang terdapat pada
kursus yang diikuti.
Logo1 Pull1
Tab1
Link1
Rancangan Halaman Search
Gambar 25. Rancangan halaman search
Gambar 26. Tampilan halaman search
Rancangan Halaman Grades
Gambar 27. Rancangan halaman grades
Logo1 Pull1
Sch1
Link1
Logo1 Pull1
Pull2
Tab1
Link1
Gambar 28. Tampilan halaman grades
Pada halaman ini user dapat melihat nilai dari latihan yang sudah diikuti
dalam kursus ini.
Rancangan Halaman Profiles
Gambar 29. Rancangan halaman profiles
Logo1 Pull1
Text1
Link1
Gambar 30. Tampilan halaman profile
Pada halaman ini user dapat mengubah data dirinya dari foto, email, kota,
courses apa saja yang diikuti. User juga dapat mengubah foto dengan apa yang
diinginkannya
Rancangan Tampilan Situs untuk Admin
Rancangan Halaman Index Admin
Gambar 31. Rancangan halaman index administrator
Logo1 Link1
Pull1
Text2 Link2
Link3
Link4
Link 5
Misc1
Text1
Gambar 32. Tampilan halaman index adminstrator
Rancangan Halaman Form Log In
Gambar 33. Rancangan halaman form log in
Logo1 Link1
Pull1
Text1
Text2
Text3
Fill1
Fill2 But1
But2
But3
Text4
But4
Link1
Gambar 34. Rancangan halaman form log in
Rancangan Halaman Home Admin
Gambar 35. Rancangan halaman home admin
Logo1 Link1
Pull1
Link2
Link3
Link4
Link5
Link6
Link7
Link8
Link9
Link10
Link11
Link12
Link13 Text1
Link1
Misc1
Gambar 36. Tampilan halaman home admin
Rancangan Halaman Site Admin
Logo1 Link1
Pull1
Link2
Link3
Link4
Link5
Link6
Link7
Link8
Link9
Link10
Link11
Link12
Box1
Text1
Tab1
Frm1
Link1
Gambar 37. Tampilan halaman site administrator
38. Tampilan halaman authentications
Gambar 39. Tampilan halaman accounts
Gambar 40. Tampilan halaman permissions
Gambar 41. Tampilan halaman courses
Gambar 42. Tampilan halaman grades
Gambar 43. Tampilan halaman location
Gmabar 44. Tampilan halaman language
Gambar 45. Tampilan halaman modules activities
Gambar 46. Tampilan halaman security
Gambar 47. Tampilan halaman reports
Gambar 48. Tampilan halaman miscellaneous experimental
Gambar 49. Tampilan halaman search results
KESIMPULAN
Dengan adanya aplikasi e-learning berbasis web ini membantu para siswa untuk
dapat melaksanakan proses belajar mandiri, serta memberi kemudahan bagi siswa
yang tidak sempat belajar di kelas untuk tetap dapat mendapatkan materi,
mengerjakan soal-soal dan evaluasinya berupa penilaian langsung yang diberikan
secara online.
DAFTAR PUSTAKA
[1]. Arsyad,Azhar, (2011). Media Pembelajaran, Jakarta : PT Raja Grafindo
Persada.
[2]. Dewi Nurmala, Geografi : Untuk Kelas XI SMA dan MA, 2009.
[3]. Kurniawan Rulianto, Membangun Media Ajar Online untuk Orang
Awam, Maxikom,2009.
[4]. Munir. (2009), Pembelajaran Jarak Jauh Berbasis Teknologi Informasi
dan Komunikasi, Bandung : Alfabeta.
[5]. Nianto M. Bambang, Suhandini Purwadi, Geografi : Untuk Kelas XII
SMA dan MA, 2012.
[6]. Nugroho, Jurnal Ilmiah Pendidikan, stkipdrnugroho.ac.id>fujiekaariyanti.
[7]. Sanaky, Hujair AH, (2009), Media Pembelajaran, Yogyakarta : Safira
Insana Press.
[8]. Surjono, Dwi Harman, (2010), Membangun Course E-learning Berbasis
Moodle, Yogyakarta : UNY Press.
[9]. Waluya Bagja, Geografi : Untuk Kelas X SMA dan MA,2010.
[10]. Zyainuri, Jurnal Pendidikan, journal.uny.ac.id > article > download.
