## Intecoms: Journal of Information Technology and Computer Science
Volume 1 Nomor 2, Desember 2018 e-ISSN : 2614-1574 p-ISSN : 2621-3249 DOI : https://doi.org/10.31539/intecoms.v1i2.291

## RANCANG BANGUN WEBSITE E-LEARNING DENGAN PEMODELAN UML

## DESIGN OF E-LEARNING WEBSITE WITH UML MODELING

## Zulkifli
STIA Setih Setio Muara Bungo zulkifli@stiasetihsetiomb.ac.id

## ABSTRACT
The learning system that takes place is only done in the classroom and there is no online learning media that uses information technology to support learning. This e-learning application is network based, which is  an  international  standard  application,  a  learning  application  that  is  supported  by  information technology.  This  study  aims  to  determine  the  e-learning  website  design  with  UML  modeling.  Searching for information and learning that is only done face-to-face in the classroom is very clear can hamper the learning process with limited time. In supporting teaching and learning activities by utilizing information technology,  it  is  necessary  to  make  a  web-based  E-Learning  application  using  PHP  and  MySQL database.
Keywords : E-learning, MySQL, PHP, Web

## ABSTRAK
Sistem  pembelajaran  yang  berlangsung  hanya  dilakukan  didalam  kelas  dan  belum  adanya  suatu  media belajar online yang menggunakan teknologi informasi untuk menunjang terhadap pembelajaran. Aplikasi E-Learning ini  berbasis  jaringan  yang  merupakan  sebuah  aplikasi  standar  internasional,  aplikasi pembelajaran yang didukung oleh teknologi informasi. Penelitian ini bertujuan untuk mengetahui rancang bangun  websitr  e-learning  dengan  pemodelan  UML.  Pencarian  informasi  dan  belajar  yang  hanya dilakukan  tatap  muka  didalam  kelas  sangat  jelas  dapat  menghambat  proses  pembelajaran  dengan  waktu yang  terbatas.  Dalam  mendukung  aktivitas  belajar  mengajar  dengan  memanfaatkan  teknologi  informasi perlu dibuat suatu aplikasi E-Learning berbasis web menggunakan php dan database MySQL.
Kata Kunci : E-learning, MySQL, PHP, Web

## PENDAHULUAN
Belajar  merupakan  suatu  kegiatan untuk  mencari  informasi,  menambah pengetahuan dan gagasan tentang sesuatu  hal.  Belajar  bukan  hanya  suatu kewajiban seseorang, akan tetapi belajar merupakan  kebutuhan yang wajib dipenuhi.
Seseorang yang telah mempelajari sesuatu hal yang baru akan mendapatkan  perubahan  tingkah  laku, pengetahuan dan sikap. Proses pembelajaran secara formal dapat dilaksanakan  di  sekolah-sekolah  dan dimaksudkan  agar  perubahan  diri  yang terjadi  pada  peserta  didik  terencana, baik  dalam  tingkah  laku,  pengetahuan,
dan  sikap.  Pembelajaran  tidak  hanya dapat  dilakukan  didalam  kelas  saja tetapi juga dapat dilaksanakan di rumah dan di lingkungan sekitar. Pembelajaran juga  dapat  dilakukan  kapan  saja  dan dimana  saja,  karena  belajar  tidak terbatas ruang dan waktu
Tumbuhnya  teknologi  multimedia adalah  hasil  dari  kemajuan  teknologi elektronik, Sistem komputer dan perangkat lunak. Dengan adanya modul tentang pembelajaran teknologi informasi dan komunikasi dalam kurikulum  yang  baru,  maka  fungsi  dari komputer  sebagai  salah  satu  komponen utama dalam tik mempunyai posisi yang
sangat  penting  sebagai  media  dalam belajar-mengajar.
E-Learning  adalah  Suatu  metode pembelajaran  Menggunakan  jaringan internet  yang  bisa  dilakukan  tampa harus tatap muka secara langsung, dapat digunakan untuk mengadaptasi kebutuhan  belajar-mengajar  yang  dapat mendukung pembelajaran secara konvensional. Pada pembelajaran konvensional, sering ditemukan keterbatasan  waktu,  jarak  serta  biaya. Hal  ini  terus  berlangsung  hingga ditemukannya suatu metode pembelajaran  E-learning,  yang  dapat mengatasi masalah keterbatasan tersebut.    Hadirnya  E-Learning  dapat mengubah keterbatasan tersebut menjadi sebuah peluang dalam memudahkan suatu proses pembelajaran (Winarno, 2013). E-learning merupakan suatu bentuk teknologi informasi yang diterapkan  didalam  bidang  pendidikan dalam  bentuk  dunia  maya.  Istilah  E- learning  lebih  tepat  diarahkan  sebagai usaha untuk membuat suatu
transformasi  proses  belajar-mengajar yang  ada  di  sekolah  maupun  di perguruan  tinggi  ke  dalam  bentuk digital  yang  menggunakan  teknologi internet  (Mufidatul  Islamiyah  &  Lilis Widayanti, 2016 ).
Sesungguhnya  pengertian  dari  E- learning  itu  sendiri  mempunyai  arti yang sangat luas dan masih dipersepsikan secara berbeda-beda. Pengertian  dari  E-learning  merupakan sebuah  garis  kontinum  dari  mulai menambahkan komputer kedalam
proses  belajar-mengajar  sampai  dengan pembelajaran berbasis web atau menggunakan  jaringan  internet.  Sebuah kelas  yang  dilengkapi  hanya  dengan satu  unit  computer  saja  untuk  memutar sebuah  CD  pembelajaran  interaktif, dalam  sebuah  batasan  yang  minimal telah  dapat  disimpulkan  bahwa  kelas
tersebut  telah  menerapkan  sistem  E- Learning.  Dan  ada  juga  yang  disebut dengan  M-Learning  yaitu  pembelajaran berbasis  teknologi  smartphone  seperti android,  ios,  dan  lainnya(Santoso  dkk, 2009).  Zaus  dkk  (2018)  merancang media  pembelajaran  Listrik  Statis  dan Dinamis menggunakan Smartphone android yang berfungsi membantu siswa dapat  lebih  dalam  memahami  materi tersebut,  sedangkan  Rahmadoni  (2018) merancang simulasi pembelajaran
Kriptografi  Klasik  menggunakan  Web Based Learning, yang mana siswa dapat mengakses  dan  belajar  tentang  materi kriptografi klasik kapanpun dan dimanapun  dan  Budi  (2012)  juga  telah mengembangkan  metode  pembelajaran online pada mata kuliah pemograman. Didalam peraturan Menteri
Pendidikan Nasional No. 24 pada Tahun 2006, Semenjak tahun ajaran 2006/2007 diberlakukan Kurikulum Tingkat Satuan Pendidikan  (KTSP).  Guru  di  tuntut untuk  menyajikan  materi  dalam  bentuk yang lebih variatif  (Widiastuti N. I. dan Setiawan I, 2012).
Unified Modelling Language adalah  sebuah  bahasa  yang  telah menjadi  standar  dalamindustri  untuk visualisasi, merancang dan mendokumentasikan sistem piranti lunak. UML menawarkan sebuah standar  untuk  merancang  model  sebuah sistem. Unified Modelling Language
merupakan  alat  untuk  perancangan sistem    pada  objek (Haviluddin,  2011).
Dengan menggunakan alat bantu unified modelling language kita dapat membuat sesuatu  model  untuk  semua  jenis aplikasi perangkat lunak, dimana aplikasi ini dapat berjalan pada perangkat  keras,  sistem  operasi  dan jaringan  internet  apapun,  serta  ditulis dalam bahasa pemrograman.

## METODE PENELITIAN
Metode  penelitian  ini  dilakukan dengan  cara/model  sistematik  yang digunakan sebagai pedoman dari penelitian. Pengumpulan Data Penelitian ini menggunakan pengumpulan data yang diambil dengan data  mahasiswa  dan  dosen  di  STKIP Muhammadiyah Muara Bungo.

## Metode Dokumentasi
Dengan  mengumpulkan  data  dari berbagai  buku  referensi  atau  Jurnal yang  diperoleh  untuk  memperoleh informasi yang berkaitan dalam permasalahan yang terjadi dalam pembuatan E-Learning di STKIP
Muhammadiah Muara Bungo.

## HASIL DAN PEMBAHASAN Analisa Kebutuhan Sistem
Analisa  sistem  merupakan  uraian dari  sebuah  sistem  yang  utuh  ke  dalam beberapa  komponen  dengan  tujuan untuk mengidentifikasi
serta mengevaluasi permasalahan, hambatan– hambatan  yang  terjadi  serta  kebutuhan- kebutuhan  yang  diharapkan,  sehingga dapat di usulkan perbaikannya.
Tahap  analisis  merupakan  tahap yang  kritis  serta  tahap  yang  sangat penting,  karena  didalam  tahap  ini  akan menyebabkan kesalahan
untuk selanjutnya  yaitu  pada  perancangan sistem.
Penjelasan  dari  bagan  alur  sistem yang berjalan adalah sebagai berikut :
1. Dosen
a. Dosen datang ke kampus memberikan  materi  pelajaran  dan tatap  muka  langsung  dengan Mahasiswa.
b. Dosen membuat soal untuk evaluasi atau tugas kepada mahasiswa.
c. Dosen melaksanakan ujian tertulis atau evaluasi dengan membagikan
lembar soal ujian kepada mahasiswa.
d. Dosen  akan  melakukan  penilaian mahasiswa dari hasil ujian tertulis serta  dalam  membagikan  atau mengumumkan nilai secara manual.
2. Mahasiswa
a. Mahasiswa pergi kekampus untuk mengikuti kegiatan belajar- mengajar  (KBM)  dengan  cara tatap  muka  langsung  dengan dosen yang bersangkutan
b. Jika ada latihan, mahasiswa mengerjakan latihan yang diberikan dosen. c. Mahasiswa  melaksanakan  ujian tertulis atau evaluasi secara manual  denganmengisi  lembar soal yang dibagikan.
d. Mahasiswa  melihat  nilai  yang dibagikan.

## Use Case Diagram
Suatu use  case diawali  dengan masukan  input  dari  seorang  pemakai. Use  case merupakan  suatu  kejadian- kejadian  yang  diajukan  oleh  seorang pemakai  serta  spesifikasi  interaksi antara pemakai dengan sistem. Use case yang sederhana hanya melibatkan beberapa  interaksi/hubungan  dengan sebuah  pemakai,  dan use  case yang lebih  kompleks  melibatkan  beberapa interaksi  dengan  pemakai. Use  cases yang  lebih  kompleks  juga  melibatkan lebih dari satu aktor. Untuk menjelaskan use  case dalam  sistem, sangat  bagus  bila  diawali  dengan memperhatikan  pemakai  dan  aksi  yang dilakukan  didalam  sistem.  Setiap use case menggambarkan  suatu  urutan interaksi  antara  admin  dan  dosen dengan sistem seperti gambar berikut :
Gambar. 1 Use Case Diagram
Menjelaskan tentang jumlah
pemakai  sistem  pada use  case diagram ada tiga pemakai yaitu admin, mahasiswa  dan  dosen.  Setiap  pemakai mempunyai  hak  akses  masing-  masing di  dalam  sistem E-Learning yang dijelaskan menggunakan anak panah.
Activity Diagram Administrator Activity  Diagram menjelaskan berbagai  alur  dari  aktivitas  didalam sistem  yang  sedang  dibuat,  bagaimana masing-masing aktivitas dimulai, kejadianyang  mungkin  terjadi,  serta bagaimana berakhirnya sistem tersebut.
Menjelaskan tentang bagaimana Sistem yang berjalan yang terdapat pada Menu  dan  hak  akses  admin  pada system, di mana admin dapat menambah,mengedit  dan  menghapus dan  dapat  mengelola  seluruh  system yang  berjalan  pada E-Learning di STKIP Muhammadiyah Muara bungo.
Activity Diagram Mahasiswa
Gambar. 3 Activity Diagram Mahasiswa
Menjelaskan  Menu  yang  tersedia di  dalam  Login  Sebagai  mahasiswa, yang mana mahasiswa dapat melakukan melihat kelas, download materi, mengedit  profil,  mengerjakan  tugas serta melihat nilai tugas yang dikerjakan oleh mahasiswa.

## Activity Diagram Dosen
Menjelaskan  menu  yang  tersedia  di dalam login dosen, di mana dosen dapat melakukan mengedit, menghapus, menambah serta dapat memberikan quiz atau tugas kepada mahasiswa.
Sequence Diagram Sequence diagram didalamAplikasi  Pembelajaran Online ( E-Learning ) ini dibagi atas tiga sequencediagram yaitu sebagai berikut : 1. Sequence diagram admin menambahkan kategori 2. Sequence diagram siswa dapat mendownload materi
3. Sequence  diagram siswa  dapat mengerjakan ujian Login Kategori Verivikasi() Lihat() Tambah() Edit() Hapus() Logout Logout() Admin Login() Gambar. 5 Sequence Diagram Admin
Menjelaskan  alur  bagaimana  admin ketika  akan  menambah  data  kelas. Mula-mula  admin  masuk  halaman kategori, admin melakukan penambahan data.  Ketika  admin  melakukan  aksi menambah  data,  proses  tersebut  akan dilempar  pada  sql  handler.  Ketika  error terjadi,  maka  error  handler  akan dipanggil.  Apabila  sql  benar  maka manipulasi data berhasil.
Halaman pemilihan pelajaran Halaman pelajaran Lihat dan download materi berhasil admin Setelah memilih pelajran masuk kehalaman materi mahasiswa melihat dan mendownload materi Sql error maka memanggil method dapat error() Cek keberan sql koneksi Asumsi sql benar dan memanggil method dapat sql() Kembali untuk melihat atau mendownload materi Dapatsql() Getdata() Halaman materi Clas handler Get data: materi materi Clas handler
Gambar 6. Sequence Diagram

## Mahasiswa Download Materi
Menjelaskan alur ketika mahasiswa mendownload materi. Mula- mula    masuk  ke  menu  pelajaran, kemudian  memilih  pelajaran.  Ketika matakuliah sudah dipilih maka mahasiswa  dapat  memilih  menu  materi sehingga siswa dapat melihat materi dan mendownload materi.
Setelah login masuk ke halaman pemilihan pelajaran Mengerjakan ujian berhasil Mahasiswa request untuk mengerjakan ujian atau quiz Cek kebenaran sql koneksi Mahasiswa mengirim jawaban ujian atau quiz Cek jawaban ujian atau quiz Masukan nilai Sql error maka memanggil method dapat error() User Halaman Halaman ClassHandler GetData:ujian atau quiz Ujian atau quiz ClassHandler Nilai ujian atau quiz Keluarkan Nilai() Dapatsql() Cocok_jawaban() dapatInfo() DapatPesan() Gambar. 7 Sequence Diagram
Mahasiswa  Mengerjakan  Ujian  dan Quiz Menjelaskan tentang alur
mahasiswa  dalam  mengerjakan  ujian atau quiz. Mula-mula mahasiswa masuk ke  menu  pelajaran,  kemudian  memilih pelajaran.  Ketika  mata    kuliah  sudah dipilih  maka  mahasiswa  dapat  memilih menu ujian atau quiz. Dimana soal ujian tersebut  dapat  dipilih  dari  mata  kuliah yang diberikan oleh dosen.

## Class Diagram
Class  Diagram adalah  suatu
spesifikasi jika diinstansiasi akan menghasilkan suatu objek serta
merupakan  inti  dari  pengembangan  dan desain berorientasi objek (atribut/ properti) suatu sistem, sekaligus memberikan pelayanan untuk memanipulasi keadaan tersebut (metoda/  fungsi). Class  diagram juga menggambarkan  suatu  struktur  dan deskripsi class,  package dan  objek beserta  hubungan  satu  dengan  lainnya seperti containment , pewarisan, asosiasi, dan lain-lain.
+SetPassword() +Verifikasi() -Username -Password Login +Update() +View() +Blokir() -NIM -Nama -Username -Password -kelas -jabatan -alamat -tmp lahir -Tgl Lahir -JK -agama -Nm Ayah -Nm Ibu -Thn Masuk -email -No Telp -Foto Mahasiswa +Update() +Hapus() +Edit() -Id Kelas -Nm Kelas Kelas +Update() +Hapus() -Judul -kelas -File Materi +Update() +Hapus() +Edit() -Id Matakuliah -Nm Matakuliah -Kelas -Pengajar Matakuliah +SetPassword() +Insert() +Update() +Delete() -Username -Password -alamat -Email -No telpon Admin +Update() +View() +Delete() -Nip -Nama -Alamat -Tpt Lahir -Tgl Lahir -Jk -Agama -Telpon -Email -Foto -Jabatan Dosen +Set Nilai() +View Nilai() +Inser() -Id kelas -Nim -Id matakuliah -Nilai Nilai
Gambar. 8 Class Diagram
Implementasi sistem  merupakan tahap  instalasi  dan  penerapan  sistem, agar aplikasi ini  siap dioperasikan pada keadaan  yang  sebernarnya,  sehingga dapat  diketahui  sejauh  mana  aplikasi dapat menghasilkan tujuan yang diinginkan sesuai dengan hasil penelitian dan perancangan. Antarmuka Pengguna (User Interface) Antarmuka pengguna yaitu tampilan  halaman  aplikasi  sistem  yang dapat  dilihat  oleh user untuk  kemudian digunakan  dalam  mengelola  informasi yang ada pada sistem.
Gambaran rancangan Halaman Utama Gambaran  halaman  Utama  sistem merupakan sebuah tampilan awal ketika mengunjungi  sistem  aplikasi.  Pada tampilan halaman utama terdapat pilihan  yang  mana  ada  pilihan  profil, login mahasiswa, login  dosen dan login administrator.  Cara  menjalankannya ketik alamat : www.elearningstkipmmb. co.id pada  url  di  Mozila  atau  yang lainnya.
Gambar 9. Menu Utama Pada Home

## Tampilan  Halaman  Utama  pada Profil
Tampilan  halaman  Utama  pada Profil  merupakan sebuah tampilan awal ketika  mengunjungi  sistem  aplikasi. Yang  didalamnya  terdapat  keterangan tentang  profil  kampus.  Setelah  masuk ke alamat urlnya klik kategori Profil.
Gambar. 10 Menu Utama Kategori Profil

## Tampilan  Halaman  Utama  pada Menu Pengumuman
Tampilan  halaman  Utama  pada menu  pengumuman  merupakan  sebuah tampilan  awal  ketika  mengunjungi sistem  aplikasi.  Dimana  pengunjung dapat  melihat  pengumuman  yang  ada pada  STKIP  Muhammadiyah  Muara bungo.  Untuk  menjalankannya  klik kategori pengumuman.
Gambar 11. Menu Utama Kategori Pengumuman
Tampilan  Halaman  Login  Pada Admin Dimana admin diminta mengisikan  username  dan  Password untuk melanjutkan pada menu administrator,  untuk  menjalankannya klik  kategori  login  admin,  isi  username dan password klik login.
Gambar. 12 Login Admin

## Tampilan Halaman Administrator
Tampilan  halaman  Administrator merupakan sebuah tampilan awal ketika admin  sudah  melakukan  login  pada login admin.disini banyak pilihan kategori yang bisa di kelola oleh admin.
Gambar. 13 Halaman Utama Setelah Login Admin

## SIMPULAN
Setelah  melakukan  perancangan
dan implementasi sistem dalam penelitian  ini,  maka  penulis  dapat menarik  beberapa  kesimpulan  sebagai berikut:
Sistem  Informasi  Pembelajaran Online ( E-Learning  ) Berbasis Web yang  dibangun  dapat  mempermudah memberikan informasi kepada pengunjung  mahasiswa  dan  masyarakat yang  akan  belajar,  mencari  tentang informasi STKIP Muhammadiyah Muara  Bungo  ini  yang  bisa  diakses secara online tanpa harus  mencari buku atau tulisan atau artikel yang
menceritakan  tentang  Kampus  STKIP
MMB.

## DAFTAR PUSTAKA
Budi,  B.  N.  (2012).  Pengembangan Metode Pembelajaran Online Berbasis E-Learning (Studi Kasus Mata Kuliah Bahasa Pemrograman) . Jurnal Sains Terapan Edisi II, 2 (1), 103-113 Haviluddin,  H.  (2011).  Memahami Penggunaan UML (Unifled Modelling Language. Jurnal Informatika Mulawarman, 6 (1), 1- 15 Islamiyah, M., & Widayanti,  L. (2016). Efektifitas Pemanfaatan E- Learning Berbasis Website Terhadap Hasil Belajar Mahasiswa  STMIK  Asia  Malang Pada Mata Kuliah Fisika Dasar. Jurnal  Ilmiah  Teknologi Informasi  Asia,  10 (1),  41-46. Retrieved from https://jurnal.stmikasia.ac.id/ index.php/jitika/article/view/73 Rahmadoni,  J.  (2018).  Perancangan Simulasi Pembelajaran Kriptografi  Klasik  Menggunakan Metode Web Based Learning. Intecoms:  Journal  of Information Technology and Computer  Science , 1 (1),  34-43. https://doi.org/https://doi.org/10.3 1539/intecoms.v1i1.160 Santoso,  G.,  Susanto,  A.,  &  Wardani, M. B. (2009). Perancangan Konten M-Learning dengan Sistem  Live  Multimedia  Berbasis Selular . Jurnal Teknologi, 2 (2) Widiastuti, N. I., & Setiawan, I. (2012). Membangun Game Edukasi Sejarah  Walisongo. Jurnal  Ilmiah Komputer dan Informatika (KOMPUTA) , 41 Winarno,  J.  (2013).    Penerapan  Sistem E-Learning pada Komunitas Pendidikan Sekolah Rumah. Jurnal Jurusan Teknik Informatika
Zaus,  M.,  Wulansari,  R.,  Islami,  S.,  &
Pernanda, D. (2018). Perancangan Media Pembelajaran Listrik Statis dan Dinamis Berbasis Android. Intecoms:  Journal  of Information Technology and Computer Science , 1 (1), 1-7. https://doi.org/https://doi.org/10.3 1539/intecoms.v1i1.140