[Januari 2018]

## APLIKASI KELAS ONLINE JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS PALANGKA RAYA
Nova Noor Kamala Sari a,1* , Deddy Ronaldo b,2 a Jurusan Teknik Informatika FT UPR, Jl H. Timang Tunjung Nyaho
b Jurusan Teknik Informatika FT UPR, Jl H. Timang Tunjung Nyaho nova.nks@gmail.com 1 ; deddy.ronaldo@gmail.com 2 * corresponding author

## 1. PENDAHULUAN
1.1 Latar Belakang
Peningkatan  kapasitas  pendidikan  mengharuskan  kita  berbenah  baik  dalam  hal  sistem pendidikan,  metode  pendidikan  maupun  media  pembelajaran  yang  digunakan.  Seiring  dengan berkembangnya  teknologi  Informasi  saat  ini  maka  kita  sebagai  pengajar  harus  bisa  memanfaatkan kemajuan teknologi yang ada dengan sebaik- baiknya guna memaksimalkan potensi peserta didik dan kemudahan dalam menyampaikan bahan ajar.
Aplikasi  Kelas  Online  merupakan  proses  pembelajaran  yang  memanfaatkan  teknologi informasi,  dalam  hal  ini  memanfaatkan  media  online  seperti  internet  sebagai  metode  penyampaian, interaksi dan fasilitasi. Di dalamnya terdapat dukungan layanan belajar yang dapat dimanfaatkan oleh peserta  belajar  yang  dapat  membantu  peserta  belajar  apabila  mengalami  kesulitan.  Selain  itu  juga tersedia rancangan sistem pembelajaran yang dapat dipelajari dan diketahui oleh tiap peserta belajar. Salah  satu  keunggulan  dari  kelas  online  ini  adalah  pada  saat  penyampaian  materi  perkuliahan  bisa diunduh  dimanapun  serta  pada  saat  pengumpulan  tugas  yang  diberikan  kepada  peserta  didik  dapat dilakukan  dengan  cara  upload  softcopy  hasil  tugas  ke  aplikasi  online/  website  yang  telah  tersedia sehingga pengajar tidak perlu memeriksa email satu persatu, selain itu dengan memanfaatkan sistem aplikasi  online  ini  juga  mengurangi  atau  bahkan  meniadakan  pengumpulan  tugas  secara  hard  copy karena dinilai kurang efisien.

## A R T I C L E I N F O A B S T R A C T
Keywords Application of online class UML-based Web Engineering (UWE) The  designed  online  class  is  used  to  provide  additional  values  to  the learning  process  in  the  Department  of  Informatics  Engineering  of University  of  Palangka  Raya.  It  basically  does  not  replace  the  entire learning  process  because  the  learning  process  is  thus  far  implemented in the classroom. Yet,the application of online classroom provides extra features,  such  as  creating  written  materials  directly  on  the  web  and uploading  the  materials  in  PDF  or  PPT  which  then  can  be  obtained directly  by  students  on  the  web.  Students  can  upload  their  given assignments on the web as well; therefore the lecturers no longer need to bring a stack of  printed reports or papers of the student assignments. Modeling  application  of  online  class  in  this  research  aims  at  applying UML-based  Web  Engineering  method  (UWE)  apart  from  waterfall engineering method which is often taught to the students of Department of Informatics Engineering of University of Palangka Raya.
The result of this research shows that  the website program on online class  can  be  implemented  by  the  lecturers  and  students  majoring  in Informatics Engineering by applying model application of UML-based Web Engineering method (UWE) .
[Januari 2018]
Pemanfaatan  aplikasi  online  untuk  pengajaran  dinilai  sangat  bermanfaat  terutama  apabila pengajar  sedang  berada  diluar  kota  maka  proses  pembelajaran  masih  bisadilakukan.  Penggunaan aplikasi  online  dinilai  sangat  relevan  dengan  kemajuan  teknologi  informasi  mengingat  banyaknya manfaat yang didapat dengan penerapannya secara luas pada taraf pengajaran di Perguruan Tinggi.

## 1.2 Rumusan Masalah
Berdasarkan  latar  belakang  masalah  tersebut,  disusun  perumusan  masalah  yaitu  Bagaimana pemodelan  website  kelas  online  dengan  mengunakan  metode  rekayasa  web  UML-based  Web Engineering?.

## 1.3 TINJAUAN PUSTAKA
UML-based  Web  Engineering  (UWE) merupakan  salah  satu  metode rekayasa  web,  Karakter utamanya  adalah  pengunaan  diagram Unified  Modeling  Language  (UML) untuk  semua  model  dan tahapan perancangannya.

## Gambar 1. Alur pemodelan mengunakan UWE

## Tahapan pemodelan
1. Use Case Model (Requirements Model).
• Analisis penguna
• Use case diagram digunakan untuk mengambarkan fungsi-fungsi didalam web.
• Definisi Aktor dan Definisi Use case.
• Activity diagram digunakan untuk mengambarkan aliran kerja ( Workflow ) didalam web.
2. Conceptual Model (Content Model).
• Membuat konten web berdasarkan kegiatan aktor (use case).
• Class diagram untuk mengambarkan struktur web, hubungan kegiatan aktor dan database.
• Sequence diagram &State Chart diagram untuk mengambarkan interaksi dan sifat web.
3. Navigation Model
• Mendesain alur Navigasi didalam Web.
• Mempresentasikan Nodes dan Link didalam struktur web.
• Mencegah disorientasi didalam Web.
[Januari 2018]
Gambar 2. Navigation Model
4. Presentation Model
• Representasi struktur web kedalam sebuah user interface.
• Desain Halaman Web
Gambar 3. Presentation Model
2. Metode Penelitian
Langkah-langkah penelitian, adalah sebagai berikut:

## Gambar 4. Langkah-langkah penelitian
Langkah  pengumpulan  data  dilakukan  untuk  memahami  konsep  dan  kebutuhan  untuk membangun  konsep  website  kelas  online.  Langkah  analisis  kebutuhan  langkah  untuk  menganalisis cara kerja sistem sesuai konsep dan kebutuhan jurusan teknik informatika Universitas Palangkaraya. Langkah  pemodelan  adalah  langkah  perancangan  sistem  website  kelas  online.  Dan  langkah implementasi dan testing adalah langkah pengkodean aplikasi dan pengujian aplikasi.

## 3. Hasil Dan Pembahasan
Pemodelan  desain  perangkat  lunak  mengunakan  diagram  UML.  Diagram  pertama  mengunakan usecase  untuk  mendefinisikan  penguna  (aktor)  dan  aktivitasi  penguna  (case)  menjadi class didalam aplikasi kelas online.
Usecase Model 1. Definis Aktor
No Aktor Deskripsi 1 Admin Pengelola Web E-Learning bertugas mengelola peraturan web. 2 Pengajar Pengajar yang memberikan materi dan penilaian 3 Siswa Siswa yang mengikuti pelajaran pada web E- learning 4 Pengunjung Pengunjung web yang ingin membuat akun pengajar atau akun siswa. 2. Definisi Usecase No Aktor Deskripsi 1 Login Fungsi untuk masuk kedalam sistem dengan mengecek username dan password pada tabel akun dan tabel siswa. 2 Kelola Materi Web Fungsi untuk Pengajar untuk memasukan bahan ajar yang dapat dibuat langsung di web Pengumpulan Data
1. Studi Literatur/Pustaka 2. Wawancara
Analisis Kebutuhan
Pemodelan Mengunakan UWE
Implementasi dan testing
[Vol 12. No. 1] [Januari 2018]
dan langsung dibaca oleh siswa. Pengajar bisa memasukan Text, image dan Video pada materi. 3 Upload PPT/PDF Fungsi untuk Pengajar memasukan bahan ajar ke web dengan format PPT atau PDF sehingga siswa dapat langsung membaca dan mendonwload 4 Update Password Pengajar Fungsi untuk Pengajar merubah Password untuk login 5 Kelola Pelajaran Fungsi untuk Pengajar menambah pelajaran yang diampu, juga didalam fungsi ini terdapat fungsi tambahan kelola Tugas dan Nilai dimana pengajar dapat melihat tugas yang masuk dan memberikan penilaian. 6 Lihat Data Siswa Fungsi untuk Pengajar melihat data siswa yang dia ajar per mata pelajaran. 7 Update Password Siswa Fungsi untuk Siswa merubah Password untuk login 8 Pilih Pelajaran Fungsi untuk Siswa memilih pelajaran yang ingin diikuti 9 Lihat Materi Fungsi untuk Siswa membaca materi web atau file PPT/PDF dan mendonwload materi PPT/PDF 10 Upload Tugas Fungsi untuk Siswa mengupload tugas 11 Daftar Fungsi untuk Pengunjung mendaftar menjadi Pengajar atau Siswa. 12 Lihat Peraturan Fungsi untuk Pengunjung melihat peraturan 13 Kelola Akun Fungsi untuk Admin kelola Seluruh Akun yang ada pada database website 14 Kelola Peraturan Fungsi untuk Admin untuk kelola peraturan.
Setelah mendefiniskan aktivitas ( case ) maka dibuatlah diagram usecase berdasarkan definisi case yang  telah  dibuat.  Diagram  usecase  mengambarkan  kelompok  class  dan  hubungannya  dengan tabel  pada  database,  sehingga  memudahkan  untuk  membuat  desain  antarmuka  penguna  dan pengkodean pembuatan aplikasi.
[Januari 2018]

## 4. Kesimpulan
Desain dan perancangan dengan mengunakan UML-based Web Engineering dengan langkah sebagai berikut:  pembuatan  usecase  model  untuk  mendefiniskan class-class untuk  digunakan  kembali  pada proses berikutnya seperti concptual model, navigation model dan presentation model .

## Daftar Pustaka
[1] Koch, Nora, Knapp, Alexander, Zhang, Gefei, and Baumeister, Hubert. 2005. UML-based WEB ENGINERRING [Online]. Situs :
https://pdfs.semanticscholar.org/cd42/5948157ed10a42279ff367caf0340cf2c26f.pdf  [Di akses pada Juni 2017]
[2] Aji Supriyanto. 2007. Web dengan HTML dan XML . Yogyakarta.  Penerbit : Graha Ilmu.
[3] Al-Bahra Bin Ladjamudin. 2013. Analisis dan Desain Sistem Informasi . Yogyakarta.  Penerbit : Graha Ilmu
login Kelola Materi Kelola Materi Web Tambah Data Ubah Data <<Extend>> Upload PPT/PDF <<Extend>> <<Include>> Update Password Pengajar <<Include>> Kelola Kelas Kelola Pelajaran Lihat Data Siswa <<Include>> Tambah Pelajaran Update Data <<Extend>> <<Extend>> TMateri Kelola Tugas & Nilai <<Extend>> TAkun TPelajaran TTugasNilai TSiswa Daftar Pengunjung Daftar Siswa Daftar Pengajar <<Extend>> <<Extend>> Baca Peraturan Update Password Siswa login Lihat Materi 1 * Download Materi <<Include>> <<Include>> Siswa Upload Tugas Kelola Akun Admin login Kelola Peraturan TPeraturan Siswa Pilih Pelajaran
[Vol 12. No. 1] [Januari 2018]
[4] Arikunto, 2006. Prosedur Penelitian Suatu Pendekatan Praktik. Jakarta. Penerbit: Rineka Cipta.
[5] Bunafit Nugroho. .2008. Aplikasi Pemrograman Web Dinamis Dengan PHP dan MySQL .  Yogyakarta. Penerbit : Gava Media.
[6] Henderi. 2006. UnifiedModellingLanguage . Tangerang.  Penerbit: Raharja Enrichment Centre (REC).
[7] Ian, Sommerville. 2009. Software Engineering / Ian Sommerville – 9th ed. United State of America. Penerbit : PearsonEducation, Inc.
[8] Nugroho, Adi. 2011. Perancangan dan Implementasi Sistem Basis Data .  Yogyakarta. Penerbit: ANDI
[9] Rossa A.S dan M. Shalahuddin. 2013. Rekayasa perangkat lunak : terstruktur dan Berorientasi Objek . Bandung. Penerbit : Informatika