Aplikasi E-Learning Materi Ujian Nasional Untuk Siswa Sekolah Menengah Atas

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