Pendahuluan
Dalam proses belajar mengajar, guru dan siswa
tidak harus didalam satu tempat yang sama atau didalam kelas. Dengan
memanfaatkan teknologi internet guru dapat tetap memberikan materi pelajaran
dengan cara mengunggah bahan ajarnya kedalam suatu situs. Siswa dapat mengunduh
materi pelajaran tersebut dimana siswa itu berada dan dapat mengerjakan latihan
soal dari setiap pelajaran dengan menggunakan teknolgi internet. Di sekolah SMA
Adi Luhur terletak didaerah Condet Raya, Balekambang Jakarta
Timur masih menggunakan sistem
pembelajaran secara konvensional dan belum memiliki website E-Learning yang bisa meningkatkan sistem pembelajaran. Dimana
dengan adanya website E-Learning ini
dapat meningkatkan daya belajar Siswa-Siswi di SMA Adi Luhur dan dapat mempersiapkan diri dalam
menghadapi UAN dan UAS dengan pembelajaran yang variatif.
Metodologi
Penelitian
Dalam
membuat aplikasi website e-learning ini penulis menggunakan metode SDLC (Software Development Life Cycle). Pada
fase perencanaan, dilakukan perencanaan sistem yang akan memecahkan masalah
yang ada, kemudian pada fase analisis, penulis menganalisis siapa pengguna
sistem, sistem apa yang akan dibuat. Setelah itu pada fase perancangan, penulis
mulai merancang sistem dengan merancang struktur navigasi, membuat levellisasi
user serta merancang tampilan input dan output aplikasi. Kemudian dilanjutkan
dengan fase uji coba, Penulis melakukan uji coba terhadap rancangan aplikasi
tersebut kepada para beberapa user, agar mendapatkan masukan atau kekurangan
dari pengujian awal. Diakhiri dengan Fase implementasi, pada fase ini penulis
mengimplementasikan mengunggah aplikasi agar dapat diakses dimana saja.
UML
Unified Modelling Language dapat
menggambarkan visual pemodelan bahasa untuk memvisualisasikan, menentukan, membangun
dan dokumen sistem perangkat lunak. UML umumnya digunakan untuk model perangkat
lunak sistem. UML cukup kuat untuk mewakili semua konsep-konsep yang ada dalam
analisis berorientasi objek dan desain. UML diagram merupakan representasi dari
konsep-konsep berorientasi objek.
Usecase
Diagram
Use Case Diagram merupakan diagram untuk
menangkap atau mendapatkan persyaratan fungsional dari suatu sistem. Diagram
ini terdiri dari actors, usecase dan relationship. Diagram digunakan untuk
model sistem/subsistem aplikasi. Actor dapat didefinisikan sebagai sesuatu yang
berinteraksi dengan sistem. Actor dapat pengguna manusia, beberapa aplikasi
internal atau mungkin beberapa aplikasi eksternal.
Activity Diagram
Activity Diagram adalah salah satu diagram
penting didalam UML yang dapat menggambarkan berbagai aspek dinamis dari
sistem. Activity Diagram merupakan sebuah diagram mewakili aliran formulir satu
aktivitas ke aktivitas lain seperti diagram alur. Aktifitas dapat digambarkan
sebagai suatu operasi atau kegiatan. Activity Diagram tidak hanya digunakan
untuk memvisualisasikan sistem yang dinamis tapi juga digunakan untuk membangun
sistem yang dapat dieksekusi dengan menggunakan ke depan dan teknik rekayasa
terbalik
Pembahasan
Website
E-learning ini menggunakan dua buah struktur navigasi yaitu struktur navigasi
untuk admin dan struktur navigasi siswa. Struktur navigasi ini digunakan untuk
memberika gambaran tentang hak akses pengguna aplikasi e-learning ini. Gambar 1
merupakan struktur navigasi user dengan menggunakan struktur navigasi campuran yaitu
hirarki dan non linier.
Gambar 1 Struktur Navigasi Fasilitas Siswa
Keterangan
:
Ø Halaman Pencarian
Pada halaman ini user dapat mencari
halaman yang diperlukan dan langsung mengerluarkan hasil pencarian.
Ø Halaman Download
Materi
Pada halaman ini merupakan halaman untuk
user mengunduh materi – materi mata pelajaran yang dibutuhkan
Ø Halaman Soal UAS
Pada halaman ini terdapat halaman untuk
melihat soal UAS yang tersedia pada website bagi user
Ø Halaman Soal UAN
Pada halaman ini terdapat halaman untuk
melihat soal UAN yang tersedia pada website bagi user
Ø Galeri Foto
Pada halaman ini berisikan kumpulan foto
kegiatan yang diselenggarakan sekolah Adi Luhur
Ø Halaman Kritik
& Saran
Pada halaman ini, semua siswa dan guru
dapat memberikan kritik & saran nya untuk SMA Adi Luhur
Sedangkan Pada Gambar 2 merupakan gambar yang menjelaskan
tentang struktur navigasi admin, menggunakan struktur navigasi hirarki.
Gambar 2 Struktur Navigasi Fasilitas Admin
Keterangan
:
1.
Halaman
penambahan data siswa
Pada halaman ini, Admin dapat menambah,
mengubah dan menghapus data siswa.
2.
Halaman
penambahan materi
Pada
halaman ini, Admin dapat menambah, mengubah dan menghapus data materi pelajaran
dan soal UAS dan UAN
3.
Halaman Kritik
& Saran
Pada halaman ini Admin
dapat melihat siswa dan guru serta pada halaman ini terdapat halaman menghapus Komentar.
4.
Halaman
penambahan berita
Pada halaman ini Admin dapat melakukan penambahan
berita terbaru.
Hak Akses
Aplikasi berbasis web ini dengan fasilitas internet dapat diakses oleh
siapa saja dan dimana saja, untuk itu diperlukan adanya
pembatasan akses fasilitas pada aplikasi ini. Adapun hak akses aplikasi web ini yaitu terdiri dari:
· Admin (instruktur)
Merupakan pengguna aplikasi yang
telah terdaftar sebagai instruktur/ pengajar dan berhak atas fasilitas yang di
berikan oleh admin. Dalam hal ini materi belajar yang di kelola oleh
admin/instruktur tersebut, seperti pengelolaan materi belajar, ruang diskusi virtual dan pemberian soal latihan.
· User (siswa)
Merupakan pengguna yang telah terdaftar sebagai
siswa/pelajar dan memiliki hak untuk mengakses materi, soal latihan, dan ruang
diskusi virtual yang telah
diberikan oleh admin.
Sehingga dari tingkatan hak akses diatas dapat digambarkan sbb:
Gambar 3 Skema
Hak Akses E-Learning
Perancangan Design
Website
Aktor
Aktor merupakan pengguna dari aplikasi web e-learning ini.
Gambar 4 Diagram
Usecase Aktor
Keterangan
:
1.
Siswa
= siswa SMA Adi Luhur
2.
Admin
= bertugas sebagai admin sekaligus instruktur
Usecase Diagram
Buka Tutup Sistem
Gambar 5 Diagram
Usecase Buka Tutup Sistem
Pada diagram ini dijelaskan bahwa user
dapat membuka sistem dengan memasukan username
dan password dengan benar. User juga
dapat menutup alilkasi web ini.
Usecase Diagram
E-learning Untuk Siswa
Gambar 6 Diagram
Usecase E-learning Untuk Siswa
Pada halaman ini
user dapat melakukan kegiatan seperti membuka halaman berita, membuka halaman
unduh materi, membuka soal-soal ujian, membuka halaman galeri dan memberikan
kritik dan saran.
Usecase Diagram
Admin
Gambar 7 Diagram
Usecase Admin
Pada Gambar 7. Admin dapat melakukan kegiatan seperti menambah
data siswa, menambah materi dan soal, menambah berita dan melihat kritik dan
saran.
Activity Diagram
Activity Diagram
Buka Tutup Sistem
Gambar 8 Diagram
Activity Buka Tutup Sistem
Pada
gambar 8, diagram activity buka dan
tutup program, sistem menampilkan halaman login lalu user masuk kedalam
aplikasi website dengan memasukan username dan passwordnya, kemudian sistem
melakukan pengecekan terhadap data tersebut, apakah sesuai atau tidak. Bila
tidak sesuai maka user wajib memasukan data yang benar dan sistem kembali
memunculkan halaman login. Bila data yang diterima sistem sesuai maka sistem
menampilkan halam utama dari aplikasi. User dapat keluar dari sistem dengan
melakukan proses logout.
Activity Diagram Elearning
untuk Siswa
Gambar 9 Diagram
Activity E-learning Siswa
Pada Gambar
9, diagram activity tersebut menjelaskan proses siswa dapat melakukan kegiatan
yang dapat diaksesnya.
Activity Diagram E-learning
Admin
Gambar 10 Diagram
Activity Admin
Pada Gambar 10, diagram activity
admin, memperlilhatkan admin dapat
memgelola data materi dan soal pada aplikasi website e-learning. Halaman menambah materi UAN & UAS akan
menampilkan halaman untuk mengisi kd_soal ,nomor, materi, soal dan jawaban.
Pada Halaman menambah berita akan masuk kedalam sistem dan menampilkan halaman
untuk mengisi judul,isi_berita dan pengirim.
Perancangan Basis Data
Basis
data yang digunakan dalam aplikasi web ini digunakan untuk pembuatan latihan
soal, materi pembelajaran. Nama basis data yang digunakan adalah db_elearning,
berikut ini data tabel pada db_elearning :
Tabel 1
Struktur tabel admin
FIELD
|
TYPE
|
KETERANGAN
|
UserID
|
Varchar(30)
|
Primary Key
|
PassID
|
Int (10)
|
|
Kelas
|
Int(5)
|
Tabel 2
Struktur tabel Berita
FIELD
|
TYPE
|
KETERANGAN
|
Id
|
Int(4)
|
Auto_increment,
Primary Key
|
Judul
|
Varchar(100)
|
|
Headline
|
Varchar(30)
|
|
Isiberita
|
Text
|
|
Pengirim
|
Varchar(25)
|
|
Tanggal
|
Date
|
Tabel 3
Struktur tabel buku_tamu
FIELD
|
TYPE
|
KETERANGAN
|
Id
|
Int(4)
|
Auto increment,
Primary Key
|
Nama
|
Varchar(35)
|
|
Email
|
Varchar(50)
|
|
Kesan
|
Varchar(30)
|
|
Pesan
|
Text
|
Tabel 4 Struktur
tabel download
FIELD
|
TYPE
|
KETERANGAN
|
Id
|
Int(4)
|
Primary key
|
kd_soald
|
Varchar(6)
|
|
Judul
|
Varchar(30)
|
|
Link
|
Varchar(30)
|
Tabel 5 Struktur tabel learn
FIELD
|
TYPE
|
KETERANGAN
|
Id
|
Int(4)
|
Primary key
|
Judul
|
Varchar(30)
|
|
Jurusan
|
Enum(‘IPA’,’IPS’)
|
|
kd_soall
|
Varchar(6)
|
|
Elearn
|
Text
|
|
Referensi
|
Varchar(30)
|
|
Tanggal
|
Date
|
Tabel 6 Struktur
tabel soaluan
FIELD
|
TYPE
|
KETERANGAN
|
Id
|
Int
|
Primary key
|
Judul
|
Text
|
|
Jurusan
|
Enum(‘IPA’,’IPS’)
|
|
No
|
Int(3)
|
|
kd_soals
|
Varchar(6)
|
|
Soals
|
Varchar(60)
|
|
Jawaban
|
Enum(‘a’,’b’,’c’,’d’,’e’)
|
Tabel 7 Struktur
tabel soaluas
FIELD
|
TYPE
|
KETERANGAN
|
Id
|
Int
|
Primary key
|
Judul
|
Text
|
|
Jurusan
|
Enum(‘IPA’,’IPS’)
|
|
No
|
Int(3)
|
|
kd_soalu
|
Varchar(6)
|
|
Soalu
|
Varchar(60)
|
|
Jawaban
|
Enum(‘a’,’b’,’c’,’d’,’e’)
|
Implementasi
Aplikasi
Aplikasi Website e-learning ini sudah diunggah ke perusahaan
penyediaan jasa webhosting yaitu 000webhost.com yang menyediakan paket hosting.
Untuk
melihat web yang telah di unggah ke
server yaitu pada web browser masukkan alamat web www.elearningadiluhur.host56.com.
Dimana tampilan aplikasi ini dapat dilihat pada gambar 11 berikut ini.
Gambar 11. Tampilan home User
Pada
Gambar 11. Merupakan halaman utama dari aplikasi e-learning ini. Semua menu
akan terlihat. Bila memilih menu login maka akan keluar tampilan seperti Gambar
12. Yang merupakan halaman untuk login bagi siswa.
Gambar 12. Tampilan Halaman Login Siswa
Untuk
tampilan soal UAN jurusan IPA dan IPS ditampilkan pada Gambar 13 dan Gambar 14.
Gambar 13. Tampilan Soal UAN IPA
Gambar 14. Tampilan Soal UAN IPS
Tampilan
materi belajar ditampilkan pada Gambar 15 dan Gambar 16. Dimana setiap siswa
dapat memilih mata pelajaran dari jurusan mereka masing-masing.
Gambar 15. Tampilan
Bahan Belajar Kelas IPA
Gambar 16. Tampilan
Bahan Belajar Kelas IPS
Pada gambar 17 menampilkan halaman saran dan kritik,
sedangkan pada Gambar 18 menampilkan halaman galeri yang berisikan
kegiatan-kegiatan sekolah dan dokumentasi foto.
Gambar 17. Tampilan Saran & Kritik
Gambar 18. Tampilan Galeri
Kesimpulan
Fokus yang diterapkan pada website ini adalah fungsinya sebagai
manajemen bahan ajaran dan mempermudah pendistribusian materi belajar dan
soal-soal latihan UAN dan UAS kepada para siswa, dan saat ini sudah di upload dengan alamat url:http//:www.elearningadiluhur.host56.com.
Kelebihan website ini adalah
kemudahan mencari soal belajar, mendownload
materi bahan belajar dan kecepatan akses yang tidak memakan waktu.
Daftar
Pustaka
[1] Andi.
2009. Panduan Praktis Adobe Dreamweaver
CS. Yogyakarta : Wahana Komputer
[2] Muhammad Sadeli. 2011. Membuat Web Pembelajaran Mudah Dengan
PHP untuk Orang Awam.
[3] Munawar. 2005. Pemodelan
Visual dengan UML. Yogyakarta : Graha Ilmu.
[4] Tutorialspoint,
UML Use Case Diagram, 2012.
[5] Tutorialspoint,
UML Activity Diagram, 2012
No comments:
Post a Comment