SISTEM INFORMASI PEMBELAJARAN ONLINE BERBASIS WEB DI SMK N 1 DEPOK
Fahri Rusliyadi1*, Linda Sari Dewi2
1,2Sistem Informasi, Universitas Nusa Mandiri email: [email protected] *
Abstrak: Walaupun penggunaan Google Classroom sedikit banyak sudah memfasilitasi kegiatan belajar antara peserta didik dengan guru di SMK N 1 Depok, tetapi masih ditemukan kekurangan dan keterbatasan. Absensi yang dilakukan secara manual tidak efektif dan rentan kesalahan saat proses rekap. Informasi dan pengumuman terkait pembelajaran hanya dilakukan melalui WhatsApp Group juga tidak efektif karena seringkali terlewatkan oleh siswa. Oleh karena itu dibutuhkan media pembelajaran secara online menggunakan e-learning yang dilengkapi fitur absensi dan pengumuman agar kegiatan belajar mengajar dapat dilakukan dengan lebih efektif dan efisien. E-learning ini dibuat berupa website menggunakan metode waterfall, yang pengembangan sistemnya menggunakan bahasa pemrograman PHP dan basis data MySQL. Pembangunan web juga menggunakan framework Laravel dan Vue.js agar proses lebih cepat dan mudah. Dengan adanya e-learning ini maka kegiatan belajar mengajar dapat lebih mudah karena dapat diakses kapan saja serta memudahkan bagi siswa dan guru melihat pengumuman serta proses absensi dan rekap absensi tidak perlu lagi dilakukan secara manual.
Kata Kunci : aplikasi, e-learning, web
Abstract: Although the use of Google Classroom has more or less facilitated learning activities between students and teachers at SMK N 1 Depok, there are still shortcomings and limitations. Attendance performed manually is ineffective and prone to errors during the recap process. Information and announcements related to learning only done through WhatsApp Groups are also not effective because they are often missed by students. Therefore, online learning media is needed using e-learning which is equipped with attendance and announcement features so that teaching and learning activities can be carried out more effectively and efficiently. This e-learning is made in the form of a website using the waterfall method, whose system development uses the PHP programming language and MySQL database. Web development also uses the Laravel and Vue.js frameworks to make the process faster and easier. With this e-learning, teaching and learning activities can be easier because it can be accessed at any time and makes it easier for students and teachers to see announcements and the attendance process and attendance recap no longer need to be done manually.
Keywords : app, e-learning, web
PENDAHULUAN
Kegiatan pembelajaran online dengan menggunakan media online seperti e-learning dan Google Classroom saat ini merupakan salah satu solusi untuk mengatasi masalah dan keterbatasan kegiatan belajar mengajar yang disebabkan oleh dampak pandemi Covid-19 [1]. E-learning adalah seperangkat aplikasi dan proses yang menggunakan media elektronik yang tersedia untuk memberikan pendidikan dan pelatihan kejuruan [2]. E-learning dianggap layak dan mendapatkan respon yang baik dari siswa dan guru sebagai alternatif media pembelajaran [3].
E-learning atau dikenal juga dengan istilah e- education, online learning atau distance learning adalah aplikasi pembelajaran yang menggunakan media elektronik yang memungkinkan untuk mengakses pembelajaran kapan saja, sebanyak yang diperlukan, dan memungkinkan pelajar untuk mengingat lebih baik informasi yang diperlukan untuk pendidikan tradisional [2]. Google Classroom dan Moodle saat ini merupakan aplikasi e-learning gratis yang populer digunakan.
Sekolah sebagai tempat berlangsungnya kegiatan belajar mengajar perlu memperhatikan proses belajar agar tidak menurunkan minat belajar siswa. Minat belajar siswa bisa dipengaruhi dari
proses pembelajaran yang masih menggunakan metode pembelajaran tradisional yang menyebabkan terbatasnya penyampaian materi oleh guru. Sehingga diperlukan metode pembelajaran baru seperti e- learning yang dapat menaikkan minat belajar siswa dan penyampaian materi pelajaran dapat lebih jelas dan tidak terbatas [4].
Teknik pembelajaran secara konvensional memiliki kekurangan dimana siswa merasa cepat bosan dan menghabiskan banyak waktu hanya untuk penyampaian materi saja. Oleh karena itu diperlukan sistem pembelajaran baru yang dapat mendukung pembelajaran menggunakan media elektronik dengan konsep e-learning sehingga siswa dapat lebih memahami teknologi dan materi pembelajaran sekaligus menarik minat belajar siswa[5].
Kegiatan belajar mengajar di SMK N 1 Depok selama pandemi terbatas hanya pada penggunaan Google Classrom saja. Walaupun penggunaan Google Classroom sedikit banyak sudah memfasilitasi kegiatan belajar antara peserta didik dengan guru tetapi masih ditemukan kekurangan dan keterbatasan seperti proses absensi, dimana saat ini proses absensi masih dilakukan secara manual atau melalui Google Form. Proses ini akan menjadi kendala ketika guru harus memproses rekap absensi dimana rentan terjadi kesalahan dalam penghitungan.
Informasi atau pengumuman penting untuk peserta didik saat ini masih disampaikan pihak sekolah, guru atau wali kelas hanya melalui aplikasi chat di grup WhatsApp. Hal ini tidak efektif karena kemungkinan besar peserta didik melewatkan pengumuman penting yang disampaikan.
Oleh karena itu perlu diterapkan sebuah sistem informasi untuk pembelajaran secara online menggunakan media e-learning dimana media ini tidak hanya dimanfaatkan untuk kegiatan belajar mengajar tetapi juga digabungkan dengan proses absensi setiap mata pelajaran. Selain itu sistem juga perlu menyediakan fitur pengumuman dimana ketika ada info dan pengumuman penting maka setiap peserta didik akan mendapatkan notifikasi ke akun masing-masing.
TINJAUAN PUSTAKA Sistem Informasi
Sistem informasi merupakan aturan prosedur formal yang digunakan mulai dari tahap mengumpulkan data sampai dengan menghasilkan informasi dan kemudian menyalurkannya kepada pihak-pihak yang memiliki kepentingan [6]. Sistem informasi terdiri dari kumpulan komponen yang saling berhubungan untuk mengumpulkan, memproses, menyimpan dan mendistribusikan informasi dan dapat digunakan untuk membantu proses pengambilan keputusan.
Basis Data
Basis data adalah kumpulan data yang saling terhubung, disimpan di dalam satu media, diorganisasikan berdasarkan skema tertentu dan dapat dimanipulasi menggunakan software untuk tujuan tertentu [7]. Basis data terdiri dari kumpulan beberapa tabel yang saling memiliki relasi maupun tidak. Dalam database, data dimodelkan ke serangkaian tabel yang berisi baris dan kolom dan digunakan untuk memproses kueri data menjadi lebih efisien dan data dapat dengan mudah dimanipulasi, diakses dan dikelola. Sebagian besar database menggunakan bahasa SQL yang digunakan untuk menulis dan mengambil data pada database.
Entity Relationship Diagram (ERD)
Entity Relationship Diagram (ERD) adalah pemodelan relational database, berdasarkan persepsi dunia nyata yang terdiri dari kumpulan objek yang saling berhubungan satu sama lain[8],[9]. ERD terdiri dari entitas yang merupakan objek dalam basis data yang dapat dibedakan satu sama lain, atribut sebagai himpunan entitas yang merupakan keterangan dari entitas, dan relasi yang merupakan hubungan antara dua entitas atau lebih. Ketiga elemen tersebut terkait di dalam sistem dan diwujudkan di dalam basis data.
Website
Website merupakan kumpulan dari halaman web yang tersebar di beberapa server dan terhubung ke seluruh dunia membentuk suatu jaringan terpadu yang kita sebut dengan internet [10]. Perkembangan website saat ini semakin maju dan banyak digunakan baik oleh intitusi swasta maupun institusi pemerintahan.
Laravel
Laravel merupakan salah satu framework PHP yang menggunakan paradigma pemrograman berorientasi objek yang dikembangkan oleh Taylor Otwell yang ingin mengembangkan framework PHP yang sudah ada [11]. Framework Laravel didukung oleh bahasa pemrograman PHP versi 5.3 ke atas.
Vue.js
Vue.js adalah Framework Javascript progresif yang bersifat open-source yang menggunakan arsitektur MVC (Model View Controller) dan digunakan untuk membuat tampilan user interface [11]. Vue.js saat ini terkenal di kalangan web developer dalam mempercepat dan membuat tampilan agar lebih interaktif.
Unified Modelling Laguage (UML)
UML adalah sebuah pemodelan perangkat lunak yang digunakan sebagai sarana perancangan dari sistem yang berbasis objek [12]. UML dapat diklasifikasikan ke dalam beberapa diagram, yaitu:
1. Use Case Diagram
Memberikan memberikan narasi hubungan antara usecase, aktor dan sistem. untuk memberikan gambaran interaksi antara pengguna sistem dengan sistem itu sendiri.
2. Activity Diagram
Menggambarkan langkah-langkah atau prosedur dari suatu proses bisnis dari sistem yang kita buat.
3. Class Diagram
Menggambarkan struktur sistem seperti kelas sistem (class), atribut (property), operasi (method) dan hubungan antar objek.
4. Component Diagram
Menggambarkan komponen terhubung melalui user inteface yang dibutuhkan dalam pemodelan fisik pada sistem object-oriented dan berfokus pada komponen sistem yang sering digunakan.
5. Deployment Diagram
Menggambarkan bagian dari perangkat lunak mana yang berjalan pada perangkat keras yang mana.
METODE
Teknik Pengumpulan Data A. Observasi
Melakukan pengumpulan data melalui pengamatan secara langsung proses pembelajaran di SMK N 1 Depok.
B. Wawancara
Melakukan wawancara berupa tanya jawab secara langsung kepada pihak-pihak yang berhubungan dan mengetahui gambaran proses pembelajaran di SMK N 1 Depok diataranya yaitu kepala sekolah, kepala jurusan dan guru mata pelajaran.
C. Studi Pustaka
melihat hasil penelitian dan karya penulisan baik itu dari buku-buku, jurnal-jurnal, studi literatur maupun dari internet, dengan tema yang sejenis, dengan tujuan untuk menghindari kesalahan yang pernah terjadi di penelitian sebelumnya.
Model Pengembangan Sistem
Model pengembangan sistem yang digunakan adalah metode pengembangan perangkat lunak Waterfall yaitu sebuah metode yang berurutan dan terstruktur mulai dari analisis sampai dengan pemeliharaan dengan pendekatan linear [13][14].
Urutan pengembangan perangkat lunak dengan metode Waterfall adalah [13]:
A. Analisa Kebutuhan Sistem
Pada tahapan ini dilakukan analisa terhadap permasalahan yang ada pada proses belajar mengajar yang sekarang dilakukan di SMK N 1 Depok.
Kemudian masalah yang ada didefinisikan yang kemudian digunakan untuk mendeskripsikan sistem yang dibutuhkan untuk menangani permasalahan yang ada. Pada sistem informasi pembelajaran online berbasis web ini, guru dapat mengupload materi pembelajaran dan tugas pelajaran berupa dokumen maupun video, guru dapat memasukkan nilai tugas, peserta didik dapat melakukan absensi tiap mata pelajaran, absensi akan direkap otomatis dan peserta didik dapat melihat rekap absen setiap mata pelajaran, dan admin sistem dapat memasukkan pengumuman yang nanti setiap peserta didik akan mendapatkan notifikasi di akunnya masing-masing.
B. Desain
Pada tahapan ini dibuat rancangan yang merepresentasikan kebutuhan user berupa rancangan user interface, proses bisnis dan rancangan database.
Proses bisnis digambarkan menggunakan metode pemodelan Unified Modelling Language (UML), dan untuk perancangan database menggunakan Entity Relationship Diagram (ERD) dan Logical Record Structure (LRS).
C. Code Generation
Hasil rancangan user interface, desain dan proses bisnis diterjemahkan melalui proses coding dengan menggunakan metode pemrograman berbasis objek menggunakan code editor Microsoft Visual Studio Code. Bahasa pemrograman menggunakan PHP dan JavaScript. Pengembangan aplikasi juga
menggunakan framework Laravel untuk back end dan Vue.js untuk front end..
D. Testing
Untuk mengurangi kesalahan (error) dan memastikan agar output (keluaran) yang dihasilkan sesuai dengan yang diinginkan maka diperlukan proses testing (pengujian). Black box testing dilakukan dengan menguji antarmuka perangkat lunak yang dibuat dengan tujuan agar error dan kekurangan dapat diminimalisir dan fungsi dari aplikasi dapat berjalan sesuai dengan yang diinginkan [15].
E. Support
Perangkat keras pendukung pembuatan aplikasi ini adalah laptop dengan 2,6 GHz Dual-Core Intel Core i5, RAM 8 GB dan Hardisk 250 GB. Agar aplikasi dapat diakses secara online maka digunakan hosting dan domain.
PEMBAHASAN Analisa Kebutuhan
Spesifikasi kebutuhan sistem dari sistem e- learning yang dibuat:
1. Admin dapat mengelola data user, kelas, pelajaran dan pengumuman
2. Guru dapat mengelola materi pelajaran dan tugas
3. Siswa dapat menjawab tugas dan melakukan presensi
Gambar 1. Use Case Diagram Halaman Admin Pada gambar 1 di atas menggambarkan proses admin dalam mengelola data user, data kelas, data pelajaran dan data pengumumum
Gambar 2. Class Diagram
Pada gambar 2 menggambarkan struktur dan hubungan antar objek dari sistem informasi pembelajaran online.
Gambar 3. Deployment Diagram
Hubungan antara perangkat lunak dan perangkat keras sistem pembelajaran online yang dibangun digambarkan dengan deployment diagram pada gambar 3.
User Interface
Pada halaman login, terdapat form dengan multiuser login, dimana user dapat login sebagai admin, guru atau siswa seperti pada gambar 4.
Gambar 4. Halaman Login
Gambar 5 adalah tampilan halaman admin dan pada gambar gambar 6 adalah tampilan form ketika admin menambahkan pengumuman.
Gambar 5. Halaman Admin
Gambar 6. Halaman Tambah Pengumuman Pada halaman guru, guru dapat melihat jadwal mengajar, memberikan materi dan tugas seperti pada gambar 7.
Gambar 7. Halaman Guru
Pada halaman siswa, siswa dapat melihat jadwal pelajaran, melihat materi dan menjawab tugas yang diberikan guru seperti pada gambar 8.
Gambar 8. Halaman Siswa
Siswa juga dapat melakukan presensi permata pelajaran seperti terlihat pada gambar 9.
Gambar 9. Halaman Presensi Siswa Code Generation
Listing program hasil generate dari class-class yang telah dibuat.
A. Class Teacher
<?php
namespace App\Models;
use App\Casts\StringOrNull;
use
Illuminate\Database\Eloquent\Collection;
use Illuminate\Database\Eloquent\Model;
/**
* @property int $id * @property int $user_id * @property string $nip * @property string $nuptk
* @property Collection|Meeting[] $meetings * @property Collection|Schedule[]
$schedules
* @property User $user */
class Teacher extends Model {
/**
* The attributes that are mass assignable.
*
* @var array */
protected $fillable = [ 'nip', 'nuptk', ];
/**
* The attributes that should be cast.
*
* @var array */
protected $casts = [
'nip' => StringOrNull::class, 'nuptk' => StringOrNull::class, ];
/**
* Indicates if the model should be timestamped.
*
* @var bool */
public $timestamps = false;
/**
* The meetings that belong to the teacher.
*/
public function meetings() {
return $this-
>hasMany(Meeting::class);
}
/**
* The schedules that belong to the teacher.
*/
public function schedules() {
return $this-
>hasMany(Schedule::class);
}
/**
* Get the user that owns the student.
*/
public function user() {
return $this-
>belongsTo(User::class);
} }
B. Class Student
<?php
namespace App\Models;
use
Illuminate\Database\Eloquent\Collection;
use Illuminate\Database\Eloquent\Model;
/**
* @property string $nisn * @property int $grade_id * @property int $user_id * @property string $nis
* @property Collection|Answer[] $answers * @property Collection|Attendance[]
$attendances
* @property Grade $grade * @property User $user */
class Student extends Model {
const SCENARIO_LOGIN = 'LOGIN';
/**
* The primary key associated with the table.
*
* @var string */
protected $primaryKey = 'nisn';
/**
* The "type" of the primary key ID.
*
* @var string */
protected $keyType = 'string';
*
* @var array */
protected $fillable = [ 'nisn', 'grade_id', 'nis', ];
/**
* Indicates if the model should be timestamped.
*
* @var bool */
public $timestamps = false;
/**
* Validation rules.
*/
public static function rules(string
$scenario = null): array {
switch ($scenario) {
case static::SCENARIO_LOGIN:
return [
'nisn' => ['required', 'numeric'],
'password' =>
['required'], ];
} }
/**
* Field labels.
*/
public static function labels(): array {
return [
'nisn' => 'NISN',
'password' => 'Password', ];
}
/**
* The answers that belong to the student.
*/
public function answers() {
return $this-
>hasMany(Answer::class);
}
/**
* The attendances that belong to the student.
*/
public function attendances() {
return $this-
>hasMany(Attendance::class);
}
/**
* Get the grade that owns the student.
*/
public function grade() {
return $this-
>belongsTo(Grade::class);
}
/**
* Get the user that owns the student.
*/
public function user() {
return $this-
>belongsTo(User::class);
} }
Testing
Proses pengujian dilakukan menggunakan metode black box testing dengan memeriksa fungsional aplikasi seperti mengevaluasi tampilan
luar (interface), fungsi masukan dan keluaran, tanpa mengetahui proses internal-nya. Contoh pada tabel 1 pengujian dilakukan pada form login.
Tabel 1. Black Box Testing Form Login Admin
No Data Masukan Hasil yang Diharapkan Hasil Pengujian Kesimpulan 1 email
password
Sistem mampu memvalidasi data apabila email dan password yang dimasukkan benar atau salah,
Berhasil/gagal login Valid
2 email password
Sistem menampilkan pesan kesalahan apabila data yang dimasukkan salah satu atau semua salah.
Pesan kesalahan muncul Valid
Gambar 10. Pesan Kesalahan Jika Email dikosongkan Gambar 10 di atas adalah notifikasi yang muncul apabila email dikosongkan.
Gambar 11. Pesan Kesalahan Jika Password Salah Gambar 11 di atas adalah notifikasi yang muncul apabila ketika password yang dimasukkan salah.
KESIMPULAN DAN SARAN
Setelah menganalisa proses pembelajaran di SMK Negeri 1 Depok, dan mencoba memberikan solusi dengan mengembangkan sebuah sistem informasi pembelajaran online yang berbasis web, maka dapat diambil kesimpulan bahwa melalui sistem informasi pembelajaran online proses pembelajaran dapat dilakukan dengan lebih efektif dan efisien. karena web yang dibangun ini
memudahkan guru dalam melakukan rekapitulasi absensi dan tugas setiap mata pelajaran. Dengan adanya fitur pengumuman pada sistem informasi pembelajaran online ini siswa tidak lagi melewatkan pengumuman penting yang diumumkan oleh sekolah.
DAFTAR PUSTAKA
[1] L. Marlinda, F. Handayanna, T. Agasya Tutupoly, and F. Aziz, “Pemanfaatan Google Classroom Untuk Proses Pembelajaran Siswa Sekolah Pada Masa Pandemi Covid-19,” J.
AbdiMas Nusa Mandiri, vol. 3, no. 1, pp. 17–
22, 2021.
[2] A. Y. Alqahtani and A. A. Rajkhan, “E- learning Critical Success Factors during the Covid-19 Pandemic: A Comprehensive Analysis of E-learning Managerial Perspectives,” Educ. Sci., vol. 10, no. 9, pp.
1–16, 2020.
[3] A. Budiman, A. Arifin, and F. Marlianto,
“Pengembangan Media Pembelajaran Berbasis E-Learning Pada SMK di Pontianak,” J. Nas. Komputasi dan Teknol.
Inf., vol. 2, no. 2, p. 133, 2019.
[4] J. Andry and M. Stefanus, “Pengembangan Aplikasi E-learning Berbasis Web Menggunakan Model Waterfall Pada SMK Strada 2 Jakarta,” J. Fasilkom, vol. 10, no. 1, pp. 1–10, 2020.
[5] A. B. Putra and S. Nita, “Perancangan dan Pembangunan Sistem Informasi E-Learning Berbasis Web ( Studi Kasus Pada Madrasah Aliyah Kare Madiun ),” Semin. Nas. Teknol.
Inf. dan Komun. 2019, vol. 1, no. 1, pp. 81–
85, 2019.
[6] D. L. Puspitawati, Sistem Informasi Akuntansi: Kualitas dan Faktor Lingkungan Organisasi yang Mempengaruhi. Bandung:
Penerbit Rekayasa Sains, 2021.
[7] C. A. Pamungkas, Pengantar dan Implementasi Basis Data. Penerbit Deepublish, 2017.
[8] D. Puspitasari, “Sistem Informasi Perpustakaan Sekolah Berbasis Web,” J.
Pilar Nusa Mandiri Vol. XII, vol. 12, no. 2,
pp. 227–240, 2016.
[9] A. Anisah and M. S. Mayasari, “Desain Database Sistem Informasi Penerimaan Peserta Didik Baru Pada Selective English Course,” Simetris J. Tek. Mesin, Elektro dan Ilmu Komput., vol. 7, no. 1, p. 183, 2016.
[10] I. Fetriany and I. A. Sobari, “Perancangan Aplikasi Simulasi Ujian Nasional Berstandar Komputer Berbasis Web Di Sds Mentari Jakarta Barat,” J. Ilm. Komput. dan Inform., vol. 9, no. 2, 2020.
[11] I. K. Aditya, H. Putra, D. Pramana, N. Luh, and P. Srinadi, “Sistem Manajemen Arsip Menggunakan Framework Laravel dan Vue . Js ( Studi Kasus : BPKAD Provinsi Bali ),”
Sist. dan Inform., vol. 13, no. 2, pp. 97–104, 2019.
[12] N. Nuraeni and P. Astuti, “Rancang Bangun Sistem Informasi Penjualan Online (E- Commerce) Pada Toko Batik Pekalongan Dengan Metode Waterfall,” J. Tek. Komput.
AMIK BSI, vol. V, no. 2, pp. 59–64, 2019.
[13] I. Nawawi, A. Abdilah, and N. Nurajijah,
“Sistem Monitoring Barang Cetak Berbasis Web Menggunakan Model Waterfall,” Inti Nusa Mandiri, vol. 14, no. 1, pp. 77–84, 2019.
[14] M. Mukrodin and S. Sugiyamta,
“Implementasi Metode Waterfall Dalam Membangun Tracer Study Dan Pendaftaran Siswa Baru Dengan Pengujian Black Box Testing,” Dinamik, vol. 25, no. 1, pp. 39–50, 2020.
[15] A. Puspita, M. Fahmi, and Y. Yuningsih,
“Perancangan Dan Pembuatan Aplikasi E- Learning Menggunakan Model Waterfall Pada Sekolah Menengah,” J. Ris. Inform., vol. 1, no. 4, 2019.
