## PERANCANGAN SISTEM E-LEARNING BERBASIS WEB PADA SMP N 2 BUSALANGGA

## Jimi Asmara
STIKOM  Uyelindo Kupang, Nusa Tenggara Timur 85111 jimmyasmara26@gmail.com

## Abstrak
Perkembangan  Teknologi  saat  ini  berkembang  begitu  pesat,  hampir  semua  aspek kehidupan  manusia  semua  menggunakan  teknologi.  Kebutuhan  akan  satu  konsep  dan mekanisme  belajar  mengajar  (pendidikan)  berbasis  TI  semakin  lebih  maju  yang  kemudian dikenal dengan sebutam E-learning ini membawa pengaruh terjadinya transformasi pendidikan konvensional  ke  dalam  bentuk  digital,  baik  secara  isi  (contens)  dan  sistemnya.  E -learning merupakan  model  pembelajaran  yang  memanfaatkan  fasilitas  teknologi  informasi  dan komunikasi.  Dengan  teknologi  informasi  ini  dapat  berperan  sebagai  yang  menyediakan informasi antara siswa dan pelajar, sumber belajar dan sarana untuk mengefektifkan evaluasi pembelajaran.  SMP  Negeri  2  Busalangga  sebagai  salah  satu  sekolah  negeri  yang  proses kegiatan  belajar  mengajarnya  masih  menggunakan  cara konvensional.  Untuk mendidik  para siswa atau anak didiknya dalam menghadapi ujian nasional maka para guru atau pihak sekolah selalu  mengadakan  bimbingan  belajar  atau  try  out,  pra  ujian  nasional  di  luar  jam  sekolah. Metode yang digunakan pada penelitian ini adalah metode kualitatif, Hasil yang didapat berupa rancangan  media  website  e-learning  yang  akan  dapat  digunakan  untuk  kegiatan  belajar mengajar berbasis IT
Kata Kunci : e-learning, informasi, sekolah, website

## 1. PENDAHULUAN
Perkembangan  Teknologi  saat  ini berkembang  begitu  pesat,  hampir  semua aspek kehidupan manusia semua menggunakan  teknologi.  Kebutuhan  akan satu  konsep  dan mekanisme belajar mengajar (pendidikan) berbasis TI semakin lebih maju yang kemudian terkenal  dengan sebutam E-learning ini membawa pengaruh terjadinya transformasi pendidikan konvensional ke  dalam bentuk digital,  baik secara isi ( contens ) dan  sistemnya. Saat  ini konsep E-learning sudah  banyak  diterima oleh  masyarakat  dunia,  terbukti  dengan maraknya implementasi di lembaga pendidikan oleh masyarakat, terbukti dengan  maraknya E-learning di  lembaga pendidikan (sekolah, training dan universitas) maupun industri ( Cisco System , IBM, HP, Oracle ).
E-learning
merupakan model
pembelajaran yang  memanfaatkan  fasilitas teknologi  informasi dan  komunikasi.
Dengan  teknologi  informasi  ini  dapat berperan sebagai yang menyediakan antara siswa  dan  pelajar,  sumber  belajar  dan sarana  untuk  mengefektifkan  evaluasi pembelajaran. SMP Negeri 2 Rote
Busalangga  sebagai  salah  satu  sekolah negeri  yang  sudah  menggunakan  ujian nasional berbasis computer ( online ), sehingga  sekolah  ini  berusaha  menjaga kualitas peserta didiknya.
Dengan  adanya  Program  bimbingan belajar dan Try Out yang dilaksanakan pada sekolah  SMP  Negeri  2  Rote  Busalangga selama ini menggunakan metode
pembelajaran  konvensional  yang pelaksanaannya membutuhkan waktu
kurang  lebih  dari  2  jam  setiap  1  mata pelajaran.  Sehingga  siswa  tidak  banyak waktu untuk  mengerjakan latihan  soal  dan mendalami materi yang sudah ada. Hal ini mengindikasikan bahwa bimbingan belajar atau  Try  Out  yang  menggunakan  system konvensional  masih memiliki keterbatasan waktu  yang  dimiliki  oleh  siswa  membuat siswa  tidak  maksimal  untuk  belajar  dan mengerjakan  latihan  soal  yang  diberikan sehingga nilai yang dihasilkan tidak sesuai dengan standar kelulusan yang diharapkan. Maka  diperlukan  metode  tambahan  yaitu system  E-learning  berbasis  online  yang mana  system  ini  akan  membantu  siwa untuk belajar dan mengerjakan latihan soal untuk menghadapi persiapan ujian nasional dengan  maksimal  sehingga  menghasilkan nilai yang diharapkan oleh guru.
Yang menjadi rumusan  masalah pada penelitian ini adalah : Bagaimana merancang  sebuah  sistem E-learning ditinjau  dari  SDM,  materi  dan  bahan  ajar dan infrastruktur untuk membangun sistem pembelajaran materi dan ujian Try Out bagi SMP Negeri 2 Busalangga?
Penelitian  terdahulu  yang  pernah dilakukan oleh Dewi dengan judul perangan  aplikasi  e-learning  berbasis  web pada  SMA/SMK  Dharma  Bakti  Medan, pada penelitian ini menekan pada pengembangan  sistem  untuk  membantu pihak  guru  di  SMA/SMK  dharma  bakti medan [1]. Penelitian  yang dilakukan oleh Kosasih  dengan  judul  perancangan  e- learning  untuk  meningkatkan  motivasi siswa  dan  guru  dengan  adanya  penelitian ini  membantu  para  guru  dalam  proses belajar mengajar secara daring [2].
Website .
Website  merupakan  kumpulan  dari halaman–halaman yang berhubungan denganfile–file  lain  yang  saling  terkait. Dalam  sebuah  website  terdapat  satu halamanyang  dikenal  dengan  sebutan homepage . Homepage adalah  sebuah halaman  yang  pertama  kali  dilihat  ketika seseorang mengunjungi sebuah website [3]

## PHP.
PHP  ( Hypertext Preprocessor ), merupakan  bahasa  pemrograman  scrip yang  ditanam  dalam  HTML.    pada  sisi server  yang  memperbolehkan programmer menyisipkan perintah – perintah perangkat lunak web server ( apache , IIS, atau apapun) akan  dieksekusi  sebelum  perintah  itu dikirim oleh halaman ke browser yang me- request -nya [3].
.
Pengertian  E-learning .
E-learning  adalah  salah  satu  bentuk pendidikan yang menggabungkan motivasi, komunikasi, efisiensi dan teknologi. Sering kali proses pembelajaran mengalami keterbatasan  waktu  dan  jarak  tetapi  tidak dengan  e-learning  yang  bisa  diakses diamana saja [3].
Manfaat E-learning. Pada pembelajaran e-learning pelajar  secara  invidu  pada  waktu  tertentu dan  bertanggungjawab  untuk  pelajarannya sendiri.  E-learning  sendiri  menyediakan perangkat  yang  dapat  memperkaya  nilai belajar  konvensional.  Kapasitas  siswa sangat bervariasi tergantung pada bentuk isi dan penyampaiannya, semakin baik keselarasan antar konten dan alat penyampaian  belajar  maka  akan  memberi hasil yang baik. [3]

## 2. METODE PENELITIAN
Kebutuhan  sistem.  Berikut  adalah penjelasan berbagai hal mengenai software yang  akan  digunakan  dalam  merancangan
sistem  e-learning pada SMP  N  2 Busalangga. MySQL adalah database yang menghubungkan script PHP menggunakan perintah query dan escaps  character yang sama  dengan  PHP.  MySQL  mempunyai tampilan client yang mempermudah dalam mengakses  database  dengan  kata  sandi untuk  mengizinkan  proses  yang  bias dilakukan [4].
Kebutuhan Perangkat Keras dan Perangkat lunak Laptop dengan prosesor Intel(R)
Celeron(R)  CPU  N3060  @  1.60GHZ ,RAM 4 GB DDR3 , Harddisk 500 GB.
Microsoft  Windows  10  Home  Single language XAMPP Editor Web  Notepad++, Sublime Text Web Browser, ms visio
Berikut    flowchart  rancangan  sistem  e- learning pada SMP N 2 Busalangga.
Gambar 1. Diagram alur proses
Berdasarkan alur flowchart penelitian pada gambar 1, maka dapat dijelaskan sebagai berikut:
a. Studi  Literatur:  penelitian  dimulai dengan  studi  literatur  yaitu  dilakukan
dengan  mencari  referensi-referensi  dari berbagai  jurnal,  buku,  dan  skripsi  yang ada untuk memperkaya sumber penelitian ini.
b. Pengumpulan  Data:  pengumpulan  data dilakukan  dengan  cara  melakukan wawancara dengan Pegawai dan melakukan observasi langsung ke tempat penelitian yaitu di  SMP Negrei 2 Busalangga,
c. Analisis Data: analisis data yaitu dengan cara  menganalisa  data  apa  yang  akan dipakai dalam penelitian ini.
d. Perancangan: tahap ini merupakan tahap merancang  sebuah  perancangan  yang sesuai dengan data yang telah dikumpulkan, dianalisa dan siap dilakukan perancangan.
e. Implementasi:  pada  tahap ini dilakukan implementasi  atau  penerapan  program yang telah  dibangun ke lapangan untuk digunakan sebagaimana mestinya.
f. Pengujian:  pada  tahap  ini  dilakukan pengujian  dari  aplikasi  yang  telah dibangun  dan  dirancang  apakah  sudah benar  dan  sesuai  dengan  hasil  yang diharapkan, jika aplikasi tersebut  sudah benar  dan  sesuai  dengan  hasil  yang diharapkan  maka  aplikasi  tersebut  siap diimplementasikan  dan  jika  aplikasi tersebut  masih  belum  benar  dan  belum sesuai  dengan  hasil  yang  diharapkan maka akan kembali ke tahap perancangan untuk perbaikan.
g. Selesai.

## 3. HASIL DAN PEMBAHASAN
Dalam prakteknya e-learning memerlukan  bantuan  teknologi  karena  itu dikenal  istilah  computer  based  learning (CBL) yaitu
pembelajaran yang sepenuhnya  menggunakan  komputer  dan computer assisted learning yaitu pembelajaran  yang  menggunakan  alat bantu utama komputer.
Mulai Studi Literatur Pengumpulan Data Analisis Data Perancangan Pengujian Implementasi Berhasil? Selesai Tidak Ya
Database Server Broser Siswa Admin Web Server LoginSiswa LoginAdmin Menampilkan FileMateri Guru L o g in G u ru M e n g u p lo a d fi le M a te ri Untuk mengelolag data dalam database Gambar 2 . Rancangan Arsitektur Sistem E-learning Start Halaman Login User Login Guru Masukan Username dan Password Database Cek Username dan Password Salah Benar Upload Materi Form Upload Materi End Login Siswa tidak Form melihat materi pelajaran Benar
Gambar 3. Rancangan Sistem flowchart Login Guru dan Siswa Aplikasi E-learning
Start Halaman Login Admin Login Admin Masukan Username dan Password Database Cek Username dan Password Salah Simpan Data Form Upload Materi End Benar Gambar 4 . Rancangan Sistem flowchart Login Admin Aplikasi E-learning
Siswa Guru MengelolaDataSiswa MengelolaDataAdmin MengelolaDataGuru MengelolaDataKelas MengelolaDataMataPe lajaran MengelolaDataFileUp load Login MelihatdanMendownload MateriMata Pelajaran Admin
Gambar 5. Use Case Diagram
Pada gambar diatas dijelaskan bahwa pada  aplikasi  ini  terdapat    aktor  yang berinterkasi  dengan  system  yaitu  aktor pengguna  ( User )  dan  aktor  pengelola (Admin).  Masing  masing actor memiliki interaksi  dan  tugas  yang  berbeda-beda dimana  aktor  (User)  hanya  bisa  melihat, mendowload  dan  mengupload  data  materi mata  pelajarantanpa  bisa  mengelola  data, sedangkan  aktor  pengelola  (Admin)  bisa dapat  melihat  dan  mengelola  data  yang terdapat di dalam database [5].
LoginUserUI MengelolaDataMata PelajaranUI Guru User Interface Control Entity MengelolaDataAdminUI MengelolaDataGuruUI MengelolaDataSiswaUI MengelolaDataKelasUI LoginAdminUi Control Admin Admin Siswa Kelas MataPelajaran Control Guru Control Siswa Control Kelas Control Mata Pelajaran Control Data File MengelolaDataUploadFile MelihatdanMendownloadMa teriMataPelajaranUi Data File
Gambar 6. Rancangan Arsitektur layer
Admin Admin LoginUI() Admin Control Admin LoginUI() InputDataLogin() ValidasiDataLogin GetInformasiLogin() 1 2 3 4
Gambar 7. Rancangan Sequence diagram Login (admin).
Admin Admin LoginUI() Admin Control Admin LoginUI() InputDataLogin() ValidasiDataLogin GetInformasiLogin() 1 2 3 4 Guru ControlGuru Guru
Gambar 8. Rancangan Sequence diagram
login guru Class  diagram merupakan  suatu diagram yang memperlihatkan atau menampilkan  struktur  dari  sebuah  sistem, sistem  tersebut  akan  menampilkan  sistem kelas,  atribut,  dan  hubungan  antara  kelas ketika  suatu  sistem  telah  selesai  membuat diagram.  Gambar  class  diagram  dapat dilihat pada gambar  disamping [5].
+Masukan Username() +MasukanPassword() +Login() +UbahData() LoginUI() +ValidasiDataLogin() ControlLogin() +GetKelolaData() -UserNAme -Password Login() User Interface Control Entity +tambah() +ubah() +hapus() Guru +tambah() +ubah() +hapus() Siswa +tambah() +ubah() +hapus() Kelas +tambah() +ubah() +hapus() Mata Pelajaran +tambah() +ubah() +hapus() DataFile -PilihLoginSiswa() -ShowDataMapel() MelihatdanDownloadMateriMapel +CariDataGuru() +ShowDataGuru() +CariDataSiswa() +ShowDataSiswa() +CariDataKelas() +ShowDatakelas() +CariDataMataPelajaran() +ShowDataMataPelajaran() +CariDataFileMateri() +ShowDataFileMateri() CariData +ValidasiDataGuru() ControlDataGuru +ValidasiDataSiswa() ControlDataSiswa +ValidasiDataKelas() ControlDataKelas +ValidasiDataMapel() ControlDataMapel +ValidasiDataFile() ControlDataFile +ValidasiDataMateriMapel() ControlMelihatMateriMapel +ValidasiDataGuru() +ValidasiDataSiswa() +ValidasiDataKelas() +ValidasiDataMataPelajaran() +ValidasiDataFileMateri() ControlCariData +tambah() +ubah() +hapus() +caridataguru() -idGuru -username -password -nama -nip -jk T_Guru +tambah() +ubah() +hapus() +caridataguru() -idsiswa -username -password -nama -nis -jk -alamat -tlp -email -idKelas T_Siswa +tambah() +ubah() +hapus() +caridataguru() -idkelas -kodekelas -namakelas T_Kelas +tambah() +ubah() +hapus() +caridataguru() -idMapel -KodeMapel -namaMapel -idkelas -idguru T_MataPelajaran +tambah() +ubah() +hapus() +caridataguru() -iddata -namadata -namafile -deskripsi -idmapel T_DataFile Gambar 9 . Rancangan Class diagram sistem e-learning

## Perancangan Antarmuka
Perancangan antarmuka (dialog layar terminal interface )  merupakan  rancang bangun  dari  percakapan  antara  pemakai sistem  dengan  komputer  [5].  Percakapan tersebut  terdiri  dari  proses  memasukkan data ke dalam input , menampilkan keluaran (output)  informasi,  atau  dapat  keduanya.
Tampilannya  secara  lengkap  dapat  dilihat pada gambar berikut ini.
a. Rancangan Login User Login  user  digunakan  guru  untuk masuk mengupload materi pelajaran, login user  juga  digunakan  siswa  untuk  melihat materi setiap mata pelajaran.
Dapartemen Pendidikan Nasional
Logo Pendidikan

## Copyrigth
Gambar 10 Rancangan login user
b. Rancangan Login Admin Login admin merupakan pintu yang digunakan untuk masuk mengelola data di dalam sistem.
Dapartemen Pendidikan Nasional
Logo Pendidikan Copyrigth Login Admin
Gambar 11 Rancangan login admin
c. Rancangan Form Admin Panel Rancangan tampilan awal form untuk mengelola data.
Admin Panel                                                                                                                                       Admin Sekolah Menengah Pertama (SMP) Negeri 2 Busalangga Rote Ndao                                                                                                                          xxxxxxxxxxx
E-Learning SMPN 2 Busalangga Rote Ndao
Gambar 12. Rancangan Tampilan Form Admin Panel
d. Rancangan Form tambah data admin Form tambah data admin merupakan form  yang  akan  digunakan  admin  untuk mengelola  username  dan  password  admin sistem
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 13. Rancangan Form tambah data admin
e.  Rancangan  formTampilan  data  admin form  ini  akan  menampilkan  data  admin pengelola sistem.
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 14. Rancangan Tampilan data admin

## f. Rancangan Tambah data guru
Form ini digunakan admin untuk mengelola atau menambahkan data guru.
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 15. Rancangan Tamba data  guru
g. Rancangan  form Tampilan data guru ini akan  menampilkan  data  guru  yang  telah diinput
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 16 Rancangan data guru
h. Rancangan Form tambah data kelas
Form ini digunakan admin untuk menambah data kelas.
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 17. Rancangan Form tambah data kelas i.  Rancangan  form  Tampilan  data  kelas yang telah diinput
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 18. Rancangan Tampilan data kelas
j. Rancangan Form tambah mata pelajaran Form ini digunakan admin untuk menginput data mata pelajaran.
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 19. Rancangan Form tambah mata pelajaran
k.  Rancangan  Form  tampilan  data  mata pelajaran ini menampilkan data matapelajaran yang telah diinput
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 20. Rancangan Form tampilan data mata pelajaran
l.  Rancangan  Form  tambah  data  siswa Form ini digunakan admin untuk menginput data siswa.
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 21. Rancangan Form tambah data
siswa
k. Rancangan  Form  tampilan  data  siswa menampilkan  data  siswa  yang  telah diinput
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 22. Rancangan Form tampilan data siswa
l. Rancangan Form tambah data file materi Form  ini  digunakan  oleh  admin  untuk menginput  data  file  materi,  form  ini  juga bisa  digunakan  guru  untuk  mengupload materi.
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 23. Rancangan Form tambah data file materi
m.  Rancangan  Form  tampilan  data  file materi yang sudah diinput
Admin panel                                                                                                                                                        Admin Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                                                                                                            xxxxxxxxxxx
Copyrigth
Gambar 24. Rancangan Form tampilan data file materi yang sudah diinput

## 4.  KESIMPULAN
Rancangan  Aplikasi  ini  nantinya akan mempermudah  guru dan  siswa untuk kegiatan belajar mengajar, latihan soal dan dapat  mengatasi  kendala  kegiatan  proses belajar  mengajar  dan  implementasi e- learning di  SMP  Negeri  2  Busalangga.
Guru  juga  dapat  login  kesistem  untuk menguplod berita, materi pembelajan,artikel, soal-soal latihan. Sedangkan siswa dapat melihat berita,artikel  pengumuman  dan  download materi pelajaran.

## SARAN
Penelitian  yang  dilakukan  masih  ada beberapa  kekurangan,  sehingga  penulis memberikan saran :
a. Perlu  adanya  perbaikan  infrastruktur jaringan internet khususnya di Kabupaten Rote Ndao untuk penerapan
e-learning.
b. Perlu  adanya  bimbingan  penggunaan aplikasi e-learning pada guru
c. Perlunya pengembangan
sistem dengan  media  interaktif  yang  lebih menarik  untuk  proses  pembelajaran pada aplikasi.

## DAFTAR PUSTAKA
[1] Kosasi,  Sandi,  ” Perancangan  E- learning untuk meningkatkan motivasi belajar  guru  dan  siswa ”  prosiding seminar  nasional  pendidikan  teknik informatika, 2015.
[2] Dewi, Rofiqoh “ perancangan aplikasi e-learning    berbasis  website  pada SMA/SMK  Dharma  Bakti  Medan ” konferensi nasional sistem dan informatika, 2015.
[3].  Turban, Effraim “Pengertian  E- Learning”, Penerbit  Andi Yogyakarta, 2006.
[4]  Sianipan,R.H, “Membangun  Web
dengan  PHP  &  MySQL”,  untuk pemula dan programe, penerbit
Informatika, 2007
[5]  H.M,  Jogiyanto  ”Analisis  dan  Desain Sisem”,  penerbit  Andi,  Yogyakarta, 2002.