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
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