Sistem Virtual Laboratorium Berbasis Web

Sistem Virtual Laboratorium Berbasis Web Untuk Praktikum Mysql
Menggunakan Php, Mysql, Dan Javascript
Rio Wirawan
1

Fakultas Ilmu Komputer, UPN Veteran Jakarta
Jl. RS Fatmawati Pondok Labu, Jakarta Selatan, Indonesia
R10_1234@yahoo.com rio.myself@gmail.com

Abstraksi
Internet saat ini menjadi suatu pilihan yang paling efektif dalam menyebarkan informasi karena
internet memiliki jangkauan jaringan yang sangat luas. Salah satu informasi yang mendapat porsi besar
di internet antara lain adalah informasi yang berkaitan dengan pendidikan, terutama pendidikan bahasa
Inggris. Bahasa Inggris adalah bahasa dunia. Dalam segala bidang terutama bidang teknologi informasi.
Salah satu bidang yang menggunakan perkembangan internet adalah bidang pendidikan. Proses belajarmengajar dapat diterapkan secara teori dan praktek. Pada umumnya praktek, dilakukan didalam ruang
laboratorium yang telah disediakan sebelumnya. Namun, beberapa lainnya menyelenggarakan virtual
laboratorium bebasis web sebagai alternatif untuk pengganti pelaksanaan praktikum secara reguler.
Dengan adanya Praktikum Virtual dapat menjadi sebuah solusi dalam mengatasi keterbatasan
masalah penyediaan tempat untuk melaksanakan praktikum beserta keterbatasan tenaga pengajarnya.
Sistem virtual laboratorium ini, didalamnya terdapat beberapa proses yang harus dikerjakan mahasiswa
(praktikan), yaitu mengerjakan pretest, latihan query mysql, dan mengerjakan post test. Praktikan dalam

mengerjakan latihan query mysql juga disediakan fasilitas compile berbasiskan web untuk mengkompile
query – query mysql, jadi praktikan dapat langsung menjalankan query mysql tanpa harus membuka
aplikasi mysql pada umumnya.
Kata Kunci : Sistem Virtual Laboratorium, PHP, MySQL, JAVASCRIPT.
Abstract
Internet is now a choice of the most effective in disseminating information because the internet
has a very extensive network coverage. One gets a large portion of information on the internet include
information relating to education, especially English education. English is the language of the world. In
all fields, especially in information technology. One area that uses Internet development is education.
Teaching-learning process can be applied in theory and practice. In general practice, conducted in a
laboratory space that has been provided previously. However, some others hold bebasis virtual
laboratory web as an alternative to replacement for practical implementation on a regular basis.
With the Virtual Lab can be a solution to overcome the limitations of the problem of providing a
place to carry out the teaching practicum with limited manpower. This virtual laboratory system, in
which there are several processes that must be done student (practitioner), which is working on the
pretest, mysql query drills, and working on the post test. Praktikan in mysql query exercises are also
provided the facility to compile compile a web-based query - mysql query, so the practitioner can directly
run mysql query without having to open the application mysql in general.
Keywords : Virtual Laboratorium System, PHP, MySQL, JAVASCRIPT.


menekankan

Pendahuluan
Dewasa

ini

semakin

pada

prosedurnya

dan

bertambah

menekankan pada komponen atau elemennya.

banyak jumlah lembaga di berbagai negara


Pendekatan sistem yang menekankan pada

yang menyajikan materi pembelajaran secara

prosedur

elektronik, baik sebagai pelengkap maupun

berikut :

pengganti pembelajaran tatap muka. Beberapa
diantaranya

menyelenggarakan

kegiatan

mendefinisikan


sistem

sebagai

“Sistem adalah suatu jaringan kerja
dari

prosedur-prosedur

yang

saling

pembelajaran elektronik sebagai tambahan

berhubungan, berkumpul bersama-sama untuk

terhadap materi pelajaran yang disajikan

melakukan


secara reguler di kelas. Namun, beberapa

menyelesaikan suatu sasaran tertentu”.

lainnya

menyelenggarakan

virtual

suatu

kegiatan

atau

untuk

Suatu prosedur adalah suatu urut-


laboratorium bebasis web sebagai alternatif

urutan

untuk pengganti pelaksanaan praktikum secara

biasanya melibatkan beberapa orang di dalam

reguler.

satu atau lebih departemen, yang diterapkan

Tujuan penelitian ini adalah untuk
menyediakan

suatu

fasilitas


Virtual

operasi

klerikal

(tulis

menulis),

untuk menjamin penanganan yang seragam
dari transaksi-transaksi bisnis yang terjadi.

Laboratorium dengan materi Mysql, dimana

Pendekatan sistem yang menekankan

menganalisa dan merancang bangun (design)

pada


elemen

atau

komponennya

Sistem Virtual Laboratorium Mysql yang

mendefinisikan sistem sebagai berikut :

berbasis web. Dengan penulisan ini diharapkan

“Sistem adalah kumpulan dari elemen-

proses praktikum Mysql dapat dilakukan

elemen yang berinteraksi untuk mencapai

dengan efektif dan efisien, dimana tidak


tujuan tertentu”.

memerlukan banyak tenaga pengajar dan
masalah keterbatasan penyediaan tempat dapat
diatasi.

Pengertian Dasar Analisis Sistem
Analisis

sistem

(systems

analysis)

dapat didefinisikan sebagai :
Tinjauan Pustaka

“penguraian dari suatu system informasi yang


Konsep Dasar Analisis dan Perancangan

utuh ke dalam bagian-bagian komponennya

Sistem

dengan maksud untuk mengidentifikasikan dan
Terdapat

mendefinisikan

dua

kelompok

sistem,

yaitu


didalam
yang

mengevaluasi

permasalahan-permasalahan,

kesempatan-kesempatan, hambatan-hambatan

yang terjadi dan kebutuhan-kebutuhan yang

dengan

diharapkan

memberikan kesempatan kepada mahasiswa

sehingga

dapat

diusulkan

perbaikan-perbaikannya.”

adanya

khususnya

ini

Virtual-Lab

dapat

untuk melakukan praktikum

Di dalam tahap analisis sistem terdapat

melalui akses internet sehingga mahasiswa

langkah-langkah dasar yang harus dilakukan

tersebut tidak perlu hadir untuk mengikuti

oleh analis sistem sebagai berikut :

praktikum. Hal ini menjadi pembelajaran

1. Identify, yaitu mengidentifikasi masalah.

efektif karena mahasiswa dapat belajar sendiri

2. Understand, yaitu memahami kerja dari

secara aktif tanpa bantuan instruktur ataupun

sistem yang ada.

asisten seperti sistem yang berjalan. Dengan

3. Analyze, yaitu menganalisis sistem.

format

4. Report, yaitu membuat laporan hasil

membantu mahasiswa untuk dapat mengikuti

analisis.

tampilan

berbasis

web

cukup

praktikum secara mandiri.

Pengertian Dasar Perancangan Sistem
Perancangan

sistem

Tujuan Virtual Lab

menetukan

bagaimana suatu sistem akan menyelesaikan
apa yang harus diselesaikan. Tahap ini
melibatkan konfigurasi-konfigurasi perangkat

Tujuan dari Virtual lab ini adalah :



Di dalam pembelajaran ‘e - learning’
fokus utamanya adalah siswa.
Siswa

menjadi

mandiri

dan

keras dan perangkat lunak dari suatu sistem

bertanggung-jawab

sehingga setelah instalasi dari sistem benar-

pembelajarannya (siswa aktif).

benar

memuaskan

seperti

yang

telah

ditetapkan pada akhir tahap analisis sistem.



Menjadi

alternatif

dalam

untuk

bidang

pendidikan.

Keluaran dari Virtual Lab
Konsep

Dasar

Virtual

Laboratorium

aktif dalam belajar ( lebih interaktif )

(Virtual Lab)
Virtual lab adalah merupakan sistem
yang dapat
sistem

Diharapkan mahasiswa dapat lebih

digunakan untuk mendukung

praktikum

berjalan

mempelajarinya di mana saja. Mahasiswa juga

secara

juga disediakan fasilitas compile berbasiskan

konvensional. Virtual Laboratory ini biasa

web untuk mengkompile query – query mysql,

disebut

jadi praktikan dapat langsung menjalankan

dengan

yang

Mahasiwa dapat mendownload materi dan

Virtual-Lab.

Diharapkan

query mysql tanpa harus membuka aplikasi



Implementation Diagram

mysql pada umumnya. Tugas – tugas dan ujian

o

Component Diagram

juga dapat dilakukan sehingga dosen dapat

o

Deployment Diagram

dengan

mudah

mengikuti

perkembangan

pembelajaran seluruh mahasiswanya.

Dari diagram yang dimiliki oleh UML,
tidak seluruhnya wajib digunakan. Diagram
yang digunakan dapat disesuaikan dengan
kebutuhan.

UML (Unified Modeling Language)
Unified Modelling Language adalah
suatu bahasa standar untuk menulis cetak biru

Diagram Use_Case (Use_Case Diagram)

software. UML digunakan untuk visualisasi,
spesifikasi,

Diagram Use_Case menggambarkan

konstruksi,

dan

apa saja aktivitas yang dilakukan oleh suatu

artifacts

(sepotong

sistem dari sudut pandang pengamatan luar,

mendokumentasikan

informasi yang digunakan atau dihasilkan

yang

dalam

dilakukan

suatu

proses

rekayasa

software.

Artifacts dapat berupa model, deskripsi, atau

menjadi

persoalan

dan

bukan

itu

Apa

yang

Bagaimana

melakukannya.

software). Pada bagian ini akan dibahas

Diagram Use_Case juga menjelaskan

mengenai diagram dalam UML dan bagaimana

manfaat sistem jika dilihat menurut actor di

pemanfaatannya.

luar sistem. Maksud aktor di sini bisa

UML menggunakan beberapa diagram yang

merupakan orang maupun sistem lain yang

memiliki fungsi tersendiri. Diagram tersebut

terpisah dari sistem yang sedang dibuat.

antara lain adalah :

Diagram ini menunjukkan fungsionalitas suatu








Use_Case Diagram

sistem atau kelas dan bagaimana sistem

Class Diagram

berinteraksi dengan dunia luar. Dalam sebuah

Behaviour Diagram

model mungkin terdapat satu atau beberapa

o

Activity Diagram

o

Statechart Diagram

o

Interaction Diagram

Sequence Diagram
Collaboration Diagram

diagram Use_Case.

bagaimana aktivitas tersebut bergantung satu

Diagram Kelas (Class Diagram)
Diagram kelas merupakan diagram

sama lain.

paling umum dipakai di semua pemodelan

Diagram Aktivitas dapat digunakan untuk :

berorientasi

objek.

1. Pandangan dalam yang dilakukan di

merupakan

pemodelan

Pemodelan
paling

kelas

utama

di

operasi

pendekatan berorientasi objek. Pemodelan

2. Pandangan dalam bagaimana objek bekerja

kelas menunjukkan kelas yang ada di sistem

3. Pandangan dalam aksi dan pengaruhnya

dan hubungan antar kelas itu, atribut, dan
operasi pada kelas.

4. Pandangan dalam dari suatu Use_Case

Fungsi yang dilakukan oleh diagram
kelas

tergantung

pada objek

proses

yang

5. Logik dari proses bisnis

sedang

dikerjakan. Selama proses analisis, diagram ini

Diagram Interaksi (Interaction Diagram)

memperlihatkan aturan dari tanggung jawab

Diagram Interaksi terdiri dari dua buah

entitas yang menunjukkan perilaku sistem.

diagram, yaitu Diagram Urutan (Sequence

Sementara pada tahap desain diagram ini

Diagram)

berperan untuk menangkap struktur dari semua

(Collaburation Diagram). Diagram Sequence

kelas yang membentuk sistem tersebut. Di

menekankan pada hubungan (relationship)

samping itu, diagram ini juga merupakan dasar

antar objek, sedangkan Diagram Kolaborasi

bagi pembuatan diagram komponen dan

menekankan pada urutan kerja.

diagram penyebaran. Tabel 2 memuat lambang

Diagram Urutan (Sequence Diagram)

yang terdapat dalam diagram kelas.

dan

Diagram

Kolaborasi

Interaksi antar objek dijelaskan melalui
diagram Sequence. Interaksi ini disusun
berdasarkan

Diagram Aktivitas (Activity Diagram)
Pada dasarnya diagram aktivitas sering
digunakan
berhubungan

oleh

flowchart.

dengan

Diagram

diagram

ini

statechart.

urutan

waktu.

Diagram

ini

memperlihatkan secara bertahap apa yang
terjadi

di

dalam

proses

pada

Diagram

Use_Case.

Diagram statechart berfokus pada objek yang

Diagram sequence juga merupakan

dalam suatu proses (proses menjadi suatu

salah

satu

diagram

interaction

yang

objek). Diagram Aktivitas berfokus pada

menjelaskan bagaimana suatu operasi itu

aktivitas yang terjadi dan terkait dalam suatu

dilakukan, message (pesan) apa yang dikirim

proses tunggal. Jadi, diagram ini menunjukkan

dan kapan pelaksanaannya. Diagram ini diatur

berdasarkan waktu. Objek yang berkaitan

mempunyai halaman percabangan yang

dengan proses berjalannya operasi diurutkan

disebut slave page (halaman pendukung)

dari

dan jika dipilih akan menjadi kedua, begitu

kiri

ke

kanan

berdasarkan

waktu

terjadinya dalam pesan yang terurut.

seterusnya.

Struktur Navigasi
Sebelum menyusun aplikasi web,
harus menentukan terlebih dahulu alur apa
yang dipakai dalam aplikasi. Alur ini disebut
dengan struktur navigasi. Ada empat macam

Gambar 2. Navigasi Hirarki

bentuk dasar dari struktur navigasi yang
biasa digunakan dalam proses pembuatan

3.

aplikasi web, yaitu:

struktur navigasi linier, hanya saja pada

1. linear,

merupakan

struktur

Non linier, merupakan pengembangan

yang

struktur ini diperkenankan untuk membuat

mempunyai satu rangkaian berurutan.

percabangan. Percabangan pada struktur non

Struktur ini menampilkan satu demi

linier berbeda dengan percabangan pada

satu tampilan layar secara berurutan

struktur hirarki, pada struktur ini kedudukan

menurut aturannya.

ini semua page sama, sehingga tidak dikenal
adanya master atau slave page.

Gambar 1. Navigasi Linier

2.

Hrarki, merupakan struktur navigasi

yang sering disebut navigasi bercabang,
yaitu merupakan suatu struktur yang
mengandalkan

percabangan

untuk

menampilkan data atau gambar pada layar

Gambar 3. Navigasi Non Linier

dengan criteria tertentu. Tampilan pada
menu

pertama

disebut

master

page

(halaman utama satu), halaman tersebut

4. Campuran, merupakan gabungan dari
struktur sebelumnya dan disebut juga struktur

navigasi bebas, maksudnya adalah jika suatu
tampilan membutuhkan percabangan maka
dibuat percabangan. Struktur ini paling
Admin

Pra ktik an

banyak digunakan dalam pembuatan aplikasi
multimedia.
Gambar 5 Actor

Adapun Use Case dalam sistem ini adalah
seperti pada gambar berikut ini :
Gambar 4. Navigasi Campuran

Hasil Dan Pembahasan
Perancangan Sistem
Untuk membuat sebuah sistem yang
dapat dipergunakan dengan baik maka dibuat
perancangan

sistem

terlebih

dahulu.

Perancangan sistem ini menggunakan UML,
adapun urutan perancangan untuk diagramdiagram tersebut adalah :

Diagram Use Case
Use case diagram menggambarkan
interaksi antara actor dengan proses atau
sistem

yang

dibuat.

Use

case

diagram

mempunyai beberapa bagian penting seperti:
Actor, Use Case,Undirectional Association ,
Generalization. Dalam sistem ini terdapat dua
actor yang terlibat, yaitu :

Gambar 6. Diagram Use Case Sistem Virtual
Lab mySQL

Diagram Activity
Activity

diagram

menggambarkan

proses-proses yang terjadi mulai aktivitas
dimulai sampai aktivitas berhenti.

Gambar

8

Diagram

Activity

untuk

administrator dalam memanajemen pretest

Gambar 7 Diagram Activity untuk praktikan.

Gambar 9 Diagram Activity untuk
administrator dalam memanajemen

Gambar 10 Diagram Activity untuk

Latihan Query

administrator dalam memanajemen Post test

Diagram class
Class

diagram

yang

ditampilkan

merupakan class entity yang mempelihatkan
hubugan antar enttity atau tabel.

Gambar 11 Diagram Activity untuk
administrator dalam memanajemen Modul

Gambar 12 Class Entity Diagram

Sequence diagram
Sequence diagram merupakan interaksi
antara objek-objek dalam suatu sistem dan
terjadi

komunikasi

yang

berupa

pesan(message) serta parameter waktu.

Gambar 14 Diagram Sequence untuk
Praktikan sampai menghasilkan nilai pretest

Gambar 13 Diagram Sequence untuk
Praktikan sampai verifikasi login.

Gambar 15 Diagram Sequence untuk
Praktikan dalam mengerjakan
Latihan query

Struktur Navigasi
Struktur Navigasi Vlab untuk Praktikan
Pada halaman untuk praktikan, terdapat
menu untuk mengerjakan soal pretest, latihan
query, dan soal post test. Dan praktikan dapat
melihat

absensi

atau

keaktifan

dalam

mengerjakan soal - soal.

Gambar 16 Diagram Sequence untuk Admin
sampai merubah berita

Gambar 18 Struktur Navigasi Vlab untuk
praktikan

Struktur Navigasi Vlab untuk Admin
Pada halaman administrator, terdapat
menu untuk mengelola data mahasiswa, nilai
Gambar 17 Diagram Sequence untuk Admin
sampai merubah berita

praktikum, modul praktikum, soal pretest, soal
post test dan materi praktikum..

Kesimpulan Dan Saran
Kesimpulan
Sistem Praktikum Virtual mySQL yang
berbasis web ini memiliki dua user, yaitu
praktikan dan administrator. Keuntungan pada
sistem ini adalah semua proses jalannya
praktikum yang biasanya dilakukan secara
manual, dengan sistem ini dapat dilakukan
secara terkomputerisasi dan berbasis web,
meliputi penilaian, upload soal dan data-data
user. Sehingga implementasi diharapkan dapat
membantu jalannya praktikum mySQL.

Saran
Dalam

Sistem

Praktikum

Virtual

mySQL ini penulis menemukan beberapa hal
yang dapat digunakan untuk pengembangan
lebih lanjut. Hal tersebut antara lain adalah :
Sistem dapat dikembangkan lebih lanjut
dengan membuat tampilan atau desain yang
lebih menarik Penulis
pembaca

mengharapkan

memahami

serta

agar
dapat

mengembangkan aplikasi ini menjadi suatu
aplikasi yang lebih sempurna dan lebih
bermanfaat.

DAFAR PUSTAKA
1. Anonim,

“Plus

Internet

Tabloid PCplus, Jakarta, 2002
Gambar 19 Struktur Navigasi Admin Vlab

Authoring”.

2. Eriek, “Aplikasi Web dengan PHP dan
Mysql”. Property Of a Ples Ardelindo,
2004
3. H Rafiza “Panduan dan Referensi Kamus
Fungsi PHP5 Untuk Membangun Database
Berbasis Web”. Elex Media Komputindo,
Oktober 2006
4. Haryanto, Steven “Kumpulan Resep Query
Menggunakan Mysql”. Dian Rakyat, April
2005
5. Martina, Inge “36 Jam Belajar Microsoft
Sql

Server

2000”.

Elex

Media

Komputindo, November 2002
6. Munawar, “Pemodelan Visual dengan
UML”. Graha Ilmu, 2005
7. http://www.planet-sourcecode.com/xq/ASP/txtcodeId.3200/lngWid.
2/qx/vb/scripts/showcode.htm Web Page
Timer, September 2006
8. http://elearning.gunadarma.ac.id:80/BukuP
anduanElearningUG.zip
Laboratorium.pdf, Agustus 2008

05Virtual