Sistem Virtual Laboratorium Berbasis Web Untuk Praktikum Mysql Menggunakan Php, Mysql, Dan Javascript
Rio Wirawan
1Fakultas 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 belajar-mengajar 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.
Pendahuluan
Dewasa ini semakin bertambah
banyak jumlah lembaga di berbagai negara
yang menyajikan materi pembelajaran secara
elektronik, baik sebagai pelengkap maupun
pengganti pembelajaran tatap muka. Beberapa
diantaranya menyelenggarakan kegiatan
pembelajaran elektronik sebagai tambahan
terhadap materi pelajaran yang disajikan
secara reguler di kelas. Namun, beberapa
lainnya menyelenggarakan virtual
laboratorium bebasis web sebagai alternatif
untuk pengganti pelaksanaan praktikum secara
reguler.
Tujuan penelitian ini adalah untuk
menyediakan suatu fasilitas Virtual
Laboratorium dengan materi Mysql, dimana
menganalisa dan merancang bangun (design)
Sistem Virtual Laboratorium Mysql yang
berbasis web. Dengan penulisan ini diharapkan
proses praktikum Mysql dapat dilakukan
dengan efektif dan efisien, dimana tidak
memerlukan banyak tenaga pengajar dan
masalah keterbatasan penyediaan tempat dapat
diatasi.
Tinjauan Pustaka
Konsep Dasar Analisis dan Perancangan Sistem
Terdapat dua kelompok didalam
mendefinisikan sistem, yaitu yang
menekankan pada prosedurnya dan
menekankan pada komponen atau elemennya.
Pendekatan sistem yang menekankan pada
prosedur mendefinisikan sistem sebagai
berikut :
“Sistem adalah suatu jaringan kerja
dari prosedur-prosedur yang saling
berhubungan, berkumpul bersama-sama untuk
melakukan suatu kegiatan atau untuk
menyelesaikan suatu sasaran tertentu”.
Suatu prosedur adalah suatu
urut-urutan operasi klerikal (tulis menulis),
biasanya melibatkan beberapa orang di dalam
satu atau lebih departemen, yang diterapkan
untuk menjamin penanganan yang seragam
dari transaksi-transaksi bisnis yang terjadi.
Pendekatan sistem yang menekankan
pada elemen atau komponennya
mendefinisikan sistem sebagai berikut :
“Sistem adalah kumpulan dari
elemen-elemen yang berinteraksi untuk mencapai
tujuan tertentu”.
Pengertian Dasar Analisis Sistem
Analisis sistem (systems analysis)
dapat didefinisikan sebagai :
“penguraian dari suatu system informasi yang
utuh ke dalam bagian-bagian komponennya
dengan maksud untuk mengidentifikasikan dan
mengevaluasi permasalahan-permasalahan,
yang terjadi dan kebutuhan-kebutuhan yang
diharapkan sehingga dapat diusulkan
perbaikan-perbaikannya.”
Di dalam tahap analisis sistem terdapat
langkah-langkah dasar yang harus dilakukan
oleh analis sistem sebagai berikut :
1. Identify, yaitu mengidentifikasi masalah.
2. Understand, yaitu memahami kerja dari
sistem yang ada.
3. Analyze, yaitu menganalisis sistem.
4. Report, yaitu membuat laporan hasil
analisis.
Pengertian Dasar Perancangan Sistem
Perancangan sistem menetukan
bagaimana suatu sistem akan menyelesaikan
apa yang harus diselesaikan. Tahap ini
melibatkan konfigurasi-konfigurasi perangkat
keras dan perangkat lunak dari suatu sistem
sehingga setelah instalasi dari sistem
benar-benar memuaskan seperti yang telah
ditetapkan pada akhir tahap analisis sistem.
Konsep Dasar Virtual Laboratorium (Virtual Lab)
Virtual lab adalah merupakan sistem
yang dapat digunakan untuk mendukung
sistem praktikum yang berjalan secara
konvensional. Virtual Laboratory ini biasa
disebut dengan Virtual-Lab. Diharapkan
dengan adanya Virtual-Lab ini dapat
memberikan kesempatan kepada mahasiswa
khususnya untuk melakukan praktikum
melalui akses internet sehingga mahasiswa
tersebut tidak perlu hadir untuk mengikuti
praktikum. Hal ini menjadi pembelajaran
efektif karena mahasiswa dapat belajar sendiri
secara aktif tanpa bantuan instruktur ataupun
asisten seperti sistem yang berjalan. Dengan
format tampilan berbasis web cukup
membantu mahasiswa untuk dapat mengikuti
praktikum secara mandiri.
Tujuan Virtual Lab
Tujuan dari Virtual lab ini adalah :
Di dalam pembelajaran ‘e - learning’ fokus utamanya adalah siswa.
Siswa menjadi mandiri dan
bertanggung-jawab untuk
pembelajarannya (siswa aktif).
Menjadi alternatif dalam bidang
pendidikan.
Keluaran dari Virtual Lab
Diharapkan mahasiswa dapat lebih
aktif dalam belajar ( lebih interaktif )
Mahasiwa dapat mendownload materi dan
mempelajarinya di mana saja. Mahasiswa juga
juga disediakan fasilitas compile berbasiskan
web untuk mengkompile query – query mysql,
query mysql tanpa harus membuka aplikasi
mysql pada umumnya. Tugas – tugas dan ujian
juga dapat dilakukan sehingga dosen dapat dengan mudah mengikuti perkembangan
pembelajaran seluruh mahasiswanya.
UML (Unified Modeling Language)
Unified Modelling Language adalah
suatu bahasa standar untuk menulis cetak biru
software. UML digunakan untuk visualisasi,
spesifikasi, konstruksi, dan
mendokumentasikan artifacts (sepotong
informasi yang digunakan atau dihasilkan
dalam suatu proses rekayasa software.
Artifacts dapat berupa model, deskripsi, atau
software). Pada bagian ini akan dibahas
mengenai diagram dalam UML dan bagaimana
pemanfaatannya.
UML menggunakan beberapa diagram yang
memiliki fungsi tersendiri. Diagram tersebut
antara lain adalah :
Use_Case Diagram
Class Diagram
Behaviour Diagram
o Activity Diagram
o Statechart Diagram
o Interaction Diagram
Sequence Diagram
Collaboration Diagram
Implementation Diagram
o Component Diagram
o Deployment Diagram
Dari diagram yang dimiliki oleh UML,
tidak seluruhnya wajib digunakan. Diagram
yang digunakan dapat disesuaikan dengan
kebutuhan.
Diagram Use_Case (Use_Case Diagram)
Diagram Use_Case menggambarkan
apa saja aktivitas yang dilakukan oleh suatu
sistem dari sudut pandang pengamatan luar,
yang menjadi persoalan itu Apa yang
dilakukan dan bukan Bagaimana
melakukannya.
Diagram Use_Case juga menjelaskan
manfaat sistem jika dilihat menurut actor di
luar sistem. Maksud aktor di sini bisa
merupakan orang maupun sistem lain yang
terpisah dari sistem yang sedang dibuat.
Diagram ini menunjukkan fungsionalitas suatu
sistem atau kelas dan bagaimana sistem
berinteraksi dengan dunia luar. Dalam sebuah
model mungkin terdapat satu atau beberapa
Diagram Kelas (Class Diagram)
Diagram kelas merupakan diagram
paling umum dipakai di semua pemodelan
berorientasi objek. Pemodelan kelas
merupakan pemodelan paling utama di
pendekatan berorientasi objek. Pemodelan
kelas menunjukkan kelas yang ada di sistem
dan hubungan antar kelas itu, atribut, dan
operasi pada kelas.
Fungsi yang dilakukan oleh diagram
kelas tergantung proses yang sedang
dikerjakan. Selama proses analisis, diagram ini
memperlihatkan aturan dari tanggung jawab
entitas yang menunjukkan perilaku sistem.
Sementara pada tahap desain diagram ini
berperan untuk menangkap struktur dari semua
kelas yang membentuk sistem tersebut. Di
samping itu, diagram ini juga merupakan dasar
bagi pembuatan diagram komponen dan
diagram penyebaran. Tabel 2 memuat lambang
yang terdapat dalam diagram kelas.
Diagram Aktivitas (Activity Diagram)
Pada dasarnya diagram aktivitas sering
digunakan oleh flowchart. Diagram ini
berhubungan dengan diagram statechart.
Diagram statechart berfokus pada objek yang
dalam suatu proses (proses menjadi suatu
objek). Diagram Aktivitas berfokus pada
aktivitas yang terjadi dan terkait dalam suatu
proses tunggal. Jadi, diagram ini menunjukkan
bagaimana aktivitas tersebut bergantung satu
sama lain.
Diagram Aktivitas dapat digunakan untuk :
1. Pandangan dalam yang dilakukan di
operasi
2. Pandangan dalam bagaimana objek bekerja
3. Pandangan dalam aksi dan pengaruhnya
pada objek
4. Pandangan dalam dari suatu Use_Case
5. Logik dari proses bisnis
Diagram Interaksi (Interaction Diagram)
Diagram Interaksi terdiri dari dua buah
diagram, yaitu Diagram Urutan (Sequence
Diagram) dan Diagram Kolaborasi
(Collaburation Diagram). Diagram Sequence
menekankan pada hubungan (relationship)
antar objek, sedangkan Diagram Kolaborasi
menekankan pada urutan kerja.
Diagram Urutan (Sequence Diagram)
Interaksi antar objek dijelaskan melalui
diagram Sequence. Interaksi ini disusun
berdasarkan urutan waktu. Diagram ini
memperlihatkan secara bertahap apa yang
terjadi di dalam proses pada Diagram
Use_Case.
Diagram sequence juga merupakan
salah satu diagram interaction yang
menjelaskan bagaimana suatu operasi itu
dilakukan, message (pesan) apa yang dikirim
berdasarkan waktu. Objek yang berkaitan
dengan proses berjalannya operasi diurutkan
dari kiri ke kanan berdasarkan waktu
terjadinya dalam pesan yang terurut.
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
bentuk dasar dari struktur navigasi yang
biasa digunakan dalam proses pembuatan
aplikasi web, yaitu:
1. linear, merupakan struktur yang
mempunyai satu rangkaian berurutan.
Struktur ini menampilkan satu demi
satu tampilan layar secara berurutan
menurut aturannya.
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
dengan criteria tertentu. Tampilan pada
menu pertama disebut master page
(halaman utama satu), halaman tersebut
mempunyai halaman percabangan yang
disebut slave page (halaman pendukung)
dan jika dipilih akan menjadi kedua, begitu
seterusnya.
Gambar 2. Navigasi Hirarki
3. Non linier, merupakan pengembangan
struktur navigasi linier, hanya saja pada
struktur ini diperkenankan untuk membuat
percabangan. Percabangan pada struktur non
linier berbeda dengan percabangan pada
struktur hirarki, pada struktur ini kedudukan
ini semua page sama, sehingga tidak dikenal
adanya master atau slave page.
Gambar 3. Navigasi Non Linier
4. Campuran, merupakan gabungan dari
navigasi bebas, maksudnya adalah jika suatu
tampilan membutuhkan percabangan maka
dibuat percabangan. Struktur ini paling
banyak digunakan dalam pembuatan aplikasi
multimedia.
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
diagram-diagram 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 5 Actor
Adapun Use Case dalam sistem ini adalah
seperti pada gambar berikut ini :
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 7 Diagram Activity untuk praktikan.
Gambar 8 Diagram Activity untuk
Gambar 9 Diagram Activity untuk
administrator dalam memanajemen
Latihan Query
Gambar 10 Diagram Activity untuk
Gambar 11 Diagram Activity untuk
administrator dalam memanajemen Modul
Diagram class
Class diagram yang ditampilkan
merupakan class entity yang mempelihatkan
hubugan antar enttity atau tabel.
Sequence diagram
Sequence diagram merupakan interaksi
antara objek-objek dalam suatu sistem dan
terjadi komunikasi yang berupa
pesan(message) serta parameter waktu.
Gambar 13 Diagram Sequence untuk
Praktikan sampai verifikasi login.
Gambar 14 Diagram Sequence untuk
Praktikan sampai menghasilkan nilai pretest
Gambar 15 Diagram Sequence untuk
Praktikan dalam mengerjakan
Gambar 16 Diagram Sequence untuk Admin
sampai merubah berita
Gambar 17 Diagram Sequence untuk Admin
sampai merubah berita
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 18 Struktur Navigasi Vlab untuk
praktikan
Struktur Navigasi Vlab untuk Admin
Pada halaman administrator, terdapat
menu untuk mengelola data mahasiswa, nilai
praktikum, modul praktikum, soal pretest, soal
Gambar 19 Struktur Navigasi Admin Vlab
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 mengharapkan agar
pembaca memahami serta dapat
mengembangkan aplikasi ini menjadi suatu
aplikasi yang lebih sempurna dan lebih
bermanfaat.
DAFAR PUSTAKA
1. Anonim, “Plus Internet 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-source-code.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 05Virtual
