APLIKASI SUMBER BELAJAR DIGITAL DALAM BENTUK
VISUALISASI QUERY TERBATAS UNTUK MATAKULIAH
BASISDATA
Tugas Akhir
Diajukan Untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Teknik
Jurusan Teknik Informatika
Disusun Oleh: Antonius Adiyoso Nugroho
NIM : 045314028
JURUSAN TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI
UNIVERSITAS SANATA DHARMA YOGYAKARTA
ii
THE APPLICATION OF DIGITAL LEARNING SOURCE
IN THE FORM OF LIMITED QUERY VISUALIZATION
FOR DATABASE COURSE
A THESIS
Presented as Partial Fulfillment of the Requirements To Obtain The Sarjana Teknik Degree
In Informatics Engineering Department
by :
Antonius Adiyoso Nugroho NIM : 045314028
INFORMATICS ENGINEERING STUDY PROGRAM INFORMATICS ENGINEERING DEPARTMENT
FACULTY OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY
v
Motto
“Allah mungkin tidak pernah
menjanjikan sukacita tanpa kesedihan,
kedamaian tanpa penderitaan,
namun
Ia menjanjikan rahmat dan kekuatan untuk menmpuh
hari-hari hidup ini.”
Tulisan ini kupersembahkan kepada :
Tuhan Yesus Kristus,
Bunda Maria,
Kedua orang tua ku,
&
Ochi tersayang
Terima kasih untuk semua doa, rasa sayang, perhatian,
dorongan semangat, dan kesabaran yang tak terhinnga yang
viii
INTISARI
Matakuliah Basisdata berisi tentang bagaimana cara merancang basisdata secara sederhana sampai pada tingkatan yang rumit, di dalam matakuliah tersebut juga diajarkan bagaimana cara untuk melihat, mencari, menambah, mengubah dan menghapus data dengan bahasa pemrograman khusus yang disebut SQL (Structured Query Language) yaitu bahasa query yang berhubungan dengan basisdata. Pada bahasa pemrograman SQL, terdapat keterbatasan bahwa pengguna tidak dapat melihat terjadinya proses query secara visual di dalam basisdata untuk melihat, mencari, menambah, mengubah, dan menghapus data-data. Dari latar belakang itulah aplikasi sumber belajar digital dalam bentuk visualisasi query
terbatas untuk matakuliah basisdata dibuat untuk menangani masalah-masalah tersebut
Implementasi aplikasi ini dikembangkan menggunakan PHP, Macromedia Flash 8, dan database MySQL. Proses visualisasi query yang akan ditampilkan dibagi menjadi dua bagian, yaitu : visualisasi animasi dan visualisasi dinamis
ix
ABSTRACT
The study of database contains how to design the limited database up to the complicated one. In this subject, we are taught the way to see, to search, to add, to change and to delete data using the special program called SQL as a query which is related to database. In SQL program, users aren’t able to see how query happens visually in the database to see, to search, to add, to change and to delete data. Therefore, the digital application as the source of study is made to overcome these problems.
The implementation of this application is improved through the usage of
PHP, Macromedia Flash 8 and MySQL database. The query process which is going to be shown is divided into two parts : animation visualization and dynamic visualization.
x
KATA PENGANTAR
Puji syukur saya ucapkan kehadirat Tuhan Yang Maha Esa atas berkat dan
limpahan kasih karunia yang telah diberikan-Nya sehingga saya dapat
menyelesaikan skripsi ini dengan judul “APLIKASI SUMBER BELAJAR DIGITAL DALAM BENTUK VISUALISASI QUERY TERBATAS UNTUK MATAKULIAH BASISDATA” .
Dalam penulisan skripsi ini, penulis telah banyak memperoleh bantuan dan
bimbingan dari berbagai pihak, oleh karena itu tidak lupa penulis mengucapkan
terima kasih kepada ;
1. Tuhan Yesus Kristus, yang telah menganugerahkan kasih karunia dan
rahmat-Nya serta selalu memberikan keberuntungan.
2. Bunda Maria yang telah mendengarkan segala doa dan permohonan.
3. Bapak Yosef Agung Cahyanta, S.T., M.T. selaku Dekan Fakultas Sains
dan Teknologi Universitas Sanata Dharma Yogyakarta.
4. Bapak Puspaningtyas Adi Sanjaya, S.T., M.T., selaku Ketua Jurusan
Teknik Informatika Fakultas Sains dan Teknologi Universitas Sanata
Dharma Yogyakarta.
5. Ibu Agnes Maria Polina, S.Kom., M.Sc., selaku Dosen pembimbing I dan
Pembimbing Akademik Angkatan 2004 Jurusan Teknik Informatika
xi
6. Bapak H. Agung Hernawan, S.T. selaku Dosen pembimbing II yang telah
memberikan waktu, bantuan dan bimbingan serta ide-ide dalam
menyelesaikan tugas akhir ini.
7. Bapak dan Mama yang selalu memberikan doa, dorongan dan semangat
baik moral maupun spiritual.
8. Rosiana Bumbungan yang telah banyak memberikan doa, dukungan dan
bantuan baik moral maupun spiritual dalam pengerjaan tugas akhir.
9. Bapak Emanuel Bele Bau, S.Pd dan Mas Rusdanang Ali Basuni yang
membantu dalam kegitan-kegiatan di kampus.
10. Teman-teman TI angkatan 2004 yang lain telah menjadi teman
seperjuangan dalam melalui kuliah selama ini.
Akhirnya tugas akhir ini terselesaikan, disadari bahwa skripsi ini jauh dari
sempurna.Untuk itu penulis dengan rendah hati mengharapkan kritik dan saran
yang dapat memberikan kesempurnaan pada penulisan skripsi ini. Akhir kata,
semoga skripsi ini dapat bermanfaat bagi penulis, juga pihak yang membutuhkan.
Yogyakarta, 20 Mei
2009
Penulis
xii
DAFTAR ISI
Halaman
Halaman Judul...i
Halaman Judul... ii
Halaman Persetujuan Pembimbing ... iii
Halaman Pengesahan ...iv
Halaman Motto dan Persembahan ...v
Halaman Pernyataan Keaslian Karya...vi
Lembar Pernyataan Persetujuan Publikasi Karya Ilmiah... vii
Intisari ... viii
Abstract ...ix
Kata Pengantar ...x
Daftar Isi ...xi
Daftar Tabel ...xvi
Daftar Gambar... xviii
BAB I PENDAHULUAN...1
1.1 Latar Belakang Masalah...1
1.2 Rumusan Masalah ...1
1.3 Batasan Masalah ...2
1.4 Tujuan Penelitian ...2
1.5 Metodologi Penelitian ...3
xiii
BAB II LANDASAN TEORI...7
2.1Konsep Visualisasi ...7
2.2 Pengertian Visualisasi ...8
2.3CAI (Computer Asisted Instruction)...10
2.4 Rekayasa Perangkat Lunak Paradigma Terstruktur ...10
2.5 Basisdata ...14
2.6 PHP (PHP Hypertext Preprocessor)...15
2.7 SQL (Structured Query Language)...28
2.8 MySQL...31
2.9 Multimedia ...34
2.10 Macromedia Flash 8...36
2.10.1 Timeline ...37
2.10.2 Simbol ...37
2.10.3 Library...37
2.10.4 Action Script ...38
BAB III ANALISIS dan DESAIN SISTEM...41
3.1 Gambaran Umum Sistem ...41
3.2 Analisis Sistem...43
3.2.1 Use Case...44
3.3 Desain Sistem...44
3.3.1Desain Proses ...45
3.3.1.1 Diagram Konteks (Context Diagram)...45
xiv
3.2.1.3 DFD (Data Flow Diagram) ...46
3.2.1.3.1 DFD Level 0...46
3.2.1.3.2 DFD Level 1 Proses 1 ...47
3.2.1.3.3 DFD Level 1 Proses 2 ...48
3.2.1.3.4 DFD Level 1 Proses 3 ...49
3.3.2 Desain Basisdata ...50
3.3.2.1 ER Diagram...50
3.3.2.2 Relasi Antar Tabel...52
3.3.2.3 Struktur File Basisdata ...53
3.3.3 Desain Antarmuka...55
3.3.3.1 Desain Tampilan Form Utama ...55
3.3.3.2 Desain Menu Materi Pembelajaran...56
3.3.3.2.1 Desain Pengenalan Konsep Database ...56
3.3.3.2.2 Desain Perintah SQL...57
3.3.3.2.3 Desain Visualisasi SQL Animasi ...57
3.3.3.2.4 Desain Visualisasi SQL Dinamis ...58
3.3.3.3 Desain Menu Visualisasi SQL ...58
3.3.3.3.1 Desain Animasi ...58
3.3.3.3.2 Desain Dinamis ...59
3.3.3.4 Desain Menu Bantuan ...59
3.3.3.4.1 Desain Pengantar...59
3.3.3.4.2 Desain Kebutuhan Sistem ...60
xv
3.3.3.4.4 Desain Memulai Program ...61
BAB IV IMPLEMENTASI DAN PEMBAHASAN...62
4.1 Implementasi Program ...62
4.1.1 Menjalankan Program ...62
4.1.2 Menggunakan Program ...67
4.1.2.1 Menu Utama...67
4.1.2.2 Menu Materi Pembelajaran ...69
4.1.2.2.1 Sub Menu Materi ...69
4.1.2.2.2 Sub Menu Visualisasi SQL Animasi ...78
4.1.2.2.3 Sub Menu Visualisasi SQL Dinamis ...79
4.1.2.3 Menu Visualisasi...80
4.1.2.3.1 Sub Menu Animasi...80
4.1.2.3.2 Sub Menu Dinamis...83
4.1.2.4 Menu Bantuan ...90
4.1.2.4.1 Sub Menu Pengantar ...90
4.1.2.4.2 Sub Menu Kebutuhan Sistem...91
4.1.2.4.3 Sub Menu Instalasi Aplikasi ...92
4.1.2.4.4 Sub Menu Memulai Program ...93
BAB V ANALISIS HASIL...94
5.1 Hasil Pengujian Program ...94
5.1.1 Ujicoba Inputan Query...94
5.2 Kelebihan Aplikasi...98
xvi
5.4 Uji Coba ke User...99
BAB VI PENUTUP...113
6.1 Kesimpulan ...113
6.2 Saran...113
DAFTAR PUSTAKA...115
xvii
DAFTAR TABEL
Halaman
Tabel 2.1 Contoh Pengenal ...20
Tabel 2.2 Operator aritmatika ...22
Tabel 2.3 Operator Penugasan ...22
Tabel 2.4 Operator Perbandingan ...24
Tabel 3.1 Deskripsi Konsep Sistem ...42
Tabel 3.2 Jurusan ...53
Tabel 3.3 Mahasiswa...53
Tabel 3.4 Mahasiswa2...54
Tabel 3.5 Matakuliah ...54
Tabel 3.6 Nilai...55
Tabel 5.1 Beta Test...101
xviii
DAFTAR GAMBAR
Halaman
Gambar 2.1 Model Waterfall...13
Gambar 2.2 Skema PHP...19
Gambar 2.3 Operand, Operator, dan Ungkapan...22
Gambar 3.1 Use Case User...44
Gambar 3.2 Diagram Konteks...45
Gambar 3.3 Diagram Berjenjang ...46
Gambar 3.4 DFD Level 0...46
Gambar 3.5 DFD Level 1 Proses 1 ...47
Gambar 3.6 DFD Level 1 Proses 2 ...48
Gambar 3.7 DFD Level 1 Proses 3 ...49
Gambar 3.8 ER Diagram Visualisasi Animasi...50
Gambar 3.9 ER Diagram Visualisasi Dinamis...51
Gambar 3.10 Database Visualisasi Animasi ...51
Gambar 3.11 Database Visualisasi Dinamis ...52
Gambar 3.12 Form Utama...55
Gambar 3.13 Desain Pengenalan Konsep Database ...56
Gambar 3.14 Desain Perintah SQL...57
Gambar 3.15 Desain Visualisasi SQL Animasi ...57
Gambar 3.16 Desain Visualisasi SQL Dinamis ...58
xix
Gambar 3.18 Form Query Dinamis...59
Gambar 3.19 Desain Pengantar...59
Gambar 3.20 Desain Kebutuhan Sistem ...60
Gambar 3.21 Desain Instalasi Aplikasi...60
Gambar 3.22 Desain Memulai Program...61
Gambar 4.1 XAMPP Control Panel Application ...63
Gambar 4.2 Menu Utama dengan XAMPP ...64
Gambar 4.3 Koneksi server2go...65
Gambar 4.4 Menu Utama dengan server2go...66
Gambar 4.5 Menu Utama...67
Gambar 4.6 Sub Menu Pengenalan Konsep Basisdata ...69
Gambar 4.7 Modul Flash Pengenalan Konsep Basisdata... ...70
Gambar 4.8 Modul Flash Pengenalan Konsep Basisdata (Tabel Animasi) ...70
Gambar 4.9 Sub Menu Perintah SQL ...71
Gambar 4.10 Modul Flash Perintah SQL...72
Gambar 4.11 Modul Flash Sintak Select...72
Gambar 4.12 Modul Flash Sintak Where...73
Gambar 4.13 Modul Flash Sintak Group By...74
Gambar 4.14 Modul Flash Sintak Order By. ...74
Gambar 4.15 Modul Flash Sintak Insert...75
Gambar 4.16 Modul Flash Sintak Update...75
Gambar 4.17 Modul Flash Sintak Delete...76
xx
Gambar 4.19 Modul Flash Sintak Fungsi ...77
Gambar 4.20 Sub Menu Visualisasi SQL Animasi...78
Gambar 4.21 Sub Menu Visualisasi SQL Dinamis...79
Gambar 4.22 Sub Menu Animasi...80
Gambar 4.23 Daftar Query Animasi ...81
Gambar 4.24 Animasi.... ...81
Gambar 4.25 Animasi Berjalan...82
Gambar 4.26 Sub Menu Dinamis...83
Gambar 4.27 Perintah SQL Isi ...83
Gambar 4.28 Hasil Visualisasi SQL Dinamis...86
Gambar 4.29 Query yang telah dieksekusi.... ...87
Gambar 4.30 Pesan Kesalahan Pada Tombol Petunjuk ...88
Gambar 4.31 Sub Menu Pengantar ...90
Gambar 4.32 Sub Menu Kebutuhan Sistem...91
Gambar 4.33 Sub Menu Instalasi Aplikasi ...92
Gambar 4.34 Sub Menu Memulai Program.... ...93
Gambar 5.1 Perintah SQL Isi (input salah)...94
Gambar 5.2 Pesan Kesalahan...95
Gambar 5.3 Sintak Pada Tombol Petunjuk.... ...96
Gambar 5.4 Perintah SQL Isi (input salah2)...97
Gambar 5.5 Pesan Kesalahan Spesifik Tombol Petunjuk...98
Gambar 5.6 Hasil Kuesioner Pernyataan no 1 ...103
xxi
Gambar 5.8 Hasil Kuesioner Pernyataan no 3 ...105
Gambar 5.9 Hasil Kuesioner Pernyataan no 4 ...106
Gambar 5.10 Hasil Kuesioner Pernyataan no 5 ...107
Gambar 5.11 Hasil Kuesioner Pernyataan no 6 ...108
Gambar 5.12 Hasil Kuesioner Pernyataan no 7 ...109
Gambar 5.13 Hasil Kuesioner Pernyataan no 8 ...110
1
BAB I
PENDAHULUAN
1.1 Latar Belakang Masalah
Penyampaian informasi dalam bentuk ilmu pengetahuan khususnya dalam
matakuliah pengantar Basisdata, dapat disampaikan dalam berbagai bentuk,
misalnya disampaikan melalui proses belajar-mengajar (interaksi dosen dengan
mahasiswa), atau menyampaikan materi dalam bentuk tulisan atau teks.
Masalahnya adalah bagaimana cara mengemas materi yang akan disampaikan
menjadi lebih menarik dan dapat dijadikan program visual untuk dapat dipahami
oleh mahasiswa dengan atau tanpa harus berinteraksi langsung dengan pengajar.
Salah satu contohnya adalah menyediakan media alternatif pembelajaran dalam
bentuk visualisasi.
Dari latar belakang tersebut, penulis tertarik untuk mengembangkan
aplikasi sumber belajar digital dalam bentuk visualisasi query terbatas untuk
mendukung pemahaman tentang basisdata. Aplikasi ini berisi materi pembelajaran
dalam bentuk visualisasi query, animasi gambar, teks, dan interaksi antara user
dengan perangkat lunak ini.
1.2 Rumusan masalah
Bagaimana cara mengemas materi sumber belajar digital dalam bentuk
visualisasi query terbatas yang interaktif untuk mendukung matakuliah Basisdata
Sejauh mana mahasiswa merasa terbantu dalam memahami matakuliah
pengantar Basisdata dengan menggunakan aplikasi sumber belajar digital dalam
bentuk query terbatas untuk matakuliah basisdata ?
1.3 Batasan Masalah
Dalam pembuatan program visualisasi ini dilakukan batasan sebagai
berikut:
Aplikasi ini terdiri dari dua bagian, yaitu visualisasi animasi dan
visualisasi dinamis. Pada visualisasi animasi disediakan sepuluh perintah SQL
yang tergolong perintah DML (Data Manipulation Language), agar user dapat
memahami visualisasi proses query, dan pada visualisasi dinamis materi
pembelajaran terkoneksi dengan MySQL.
1.4 Tujuan dan Manfaat
Tujuan dari penulisan ini adalah sebagai berikut :
Membangun suatu aplikasi sumber belajar digital dalam bentuk visualisasi
query terbatas untuk mendukung matakuliah Basisdata.
Manfaat dari penulisan ini adalah sebagai berikut :
1. Membantu dosen atau staf pengajar dalam menyampaikan matakuliah
Basisdata.
2. Aplikasi ini dapat dijadikan program bantu belajar baik bagi mahasiswa
atau orang awam yang ingin belajar query untuk perintah-perintah DML
1.5 Metodologi Penelitian
a) Metode yang digunakan untuk menyelesaikan masalah pada aplikasi ini
yaitu dengan paradigma terstruktur (model waterfall).
Langkah-langkah yang dilakukan adalah sebagai berikut:
1. Analisis
Tahap analisis dilakukan dengan mengumpulkan kebutuhan yang
diperlukan untuk memahami sifat aplikasi yang akan dibangun.
Pada tahap ini membuat DFD (Data Flow Diagram), ER-Diagram,
narasi proses dan kamus data.
2. Desain
Tahap desain dilakukan dengan memunculkan kode yang membahas
struktur data, arsitektur perangkat lunak, representasi interface, dan
algoritma prosedural.
3. Pengkodean
Tahap pengkodean dilakukan untuk menerjemahkan hasil desain ke
dalam bahasa pemrograman.
4. Pengujian
Tahap pengujian program dilakukan untuk mengetahui apakah terdapat
kesalahan pada program dan memastikan bahwa input yang dibatasi
akan memberikan hasil aktual yang sesuai dengan hasil yang
5. Pemeliharaan
Tahap pemeliharaan tetap dilakukan karena tidak bisa dihindari,
adanya perubahan ketika perangkat lunak berada di pelanggan.
b) Uji coba ke user
Menguji coba aplikasi ini kepada sepuluh orang user (dengan mengambil
sampel mahasiswa jurusan Teknik Informatika) untuk menggunakan aplikasi dan
mengisi kuesioner sehingga diperoleh kesimpulan umum mengenai apakah
aplikasi ini secara garis besar sudah dapat membantu pengguna dalam memahami
1.6 Sistematika Penulisan
Sistematika penulisan tugas akhir ini adalah sebagai berikut:
1. Bab I Pendahuluan
Dalam bab pembuka ini secara umum dijelaskan beberapa hal, diantaranya
latar belakang masalah, rumusan masalah, batasan masalah, tujuan
penulisan, metode penelitian, serta sistematika penulisan.
2. Bab II Landasan Teori
Bab ini menjelaskan landasan teori dari metodologi yang digunakan dan
mengemukakan teori-teori yang mendukung mengenai teknologi yang
mendasari pembuatan program visualisasi ini, yaitu pemrograman dengan
menggunakan Macromedia Flash 8 dan PHP.
3. Bab III Analisis dan Perancangan Sistem
Bab ini membahas analisis dan perancangan sistem, mencakup rancangan
basisdata dan rancangan antar muka yang akan digunakan.
4. Bab IV Implementasi
Bab ini berisi tentang implementasi yang dilakukan terhadap analisis yang
telah dilakukan sebelumnya pada bab III.
5. Bab V Analisis Hasil
Bab ini menjelaskan secara rinci tentang analisis hasil yang menyangkut
6. Bab VI Penutup
Bab ini berisi berisi tentang kesimpulan yang dapat diambil untuk
menjawab permasalahan yang sudah diajukan dalam bab I dan saran yang
7
BAB II
LANDASAN TEORI
2.1 Konsep Visualisasi
Sistem pendidikan dewasa ini telah mengalami kemajuan yang sangat
pesat. Berbagai cara telah dikenalkan serta digunakan dalam proses belajar
mengajar (PBM) dengan harapan pengajaran oleh pendidik akan lebih berkesan
dan pembelajaran bagi siswa akan lebih bermakna. Sejak beberapa tahun
belakangan ini teknologi informasi dan komunikasi telah banyak digunakan dalam
proses belajar mengajar, dengan satu tujuan mutu pendidikan akan selangkah
lebih maju seiring dengan kemajuan teknologi. Perkembangan teknologi
multimedia telah menjanjikan potensi besar dalam merubah cara seseorang untuk
belajar, untuk memperoleh informasi, menyesuaikan informasi dan sebagainnya.
Multimedia juga menyediakan peluang bagi pendidik untuk
mengembangkan teknik pembelajaran sehingga menghasilkan hasil yang
maksimal. Demikian juga bagi pelajar, dengan multimedia diharapkan mereka
akan lebih mudah untuk menentukan dengan apa dan bagaiamana siswa untuk
dapat menyerap informasi secara cepat dan efisien. Sumber informasi tidak lagi
terfokus pada teks dari buku semata-mata tetapi lebih luas dari itu. Kemampuan
teknologi multimedia yang telah terhubung internet akan semakin menambah
kemudahan dalam mendapatkan informasi yang diharapkan.
Dengan diharapkan dapat menambahkan metode belajar dan mendukung
CD-ROM dan pelatihan komputer non internet. Hal-hal lain yang dapat
bermanfaat bagi siswa adalah membekali siswa pengetahuan, keterampilan dan
sikap profesional dengan cara melaksanakan KBM yang efektif di sekolah dan
industri, kemudian dapat mengembangkan materi pembelajaran sesuai kebutuhan
industri serta perkembangan ilmu pengetahuan dan teknologi.
Penyelenggaraan sangat ditentukan antara lain oleh:
a. Sikap positif peserta didik (motivasi yang tinggi untuk belajar mandiri).
b. Sikap positif tenaga kependidikan terhadap teknologi komputer dan
internet.
c. Ketersediaan fasilitas komputer dan akses ke internet.
d. Adanya dukungan layanan belajar.
e. Biaya akses internet yang terjangkau untuk kepentingan
pembelajaran/pendidikan.
2.2 Pengertian Visualisasi
Pengertian visualisasi adalah rekayasa dalam pembuatan gambar, diagram
atau animasi untuk penampilan suatu informasi (www.wikipedia.org). Visualisasi
dapat dijaidkan salah satu alternatif kegiatan pembelajaran dilaksanakan melalui
pemanfaatan teknologi komputer dan dapat juga dengan menggunakan media
internet. Seseorang yang tidak dapat mengikuti pendidikan konvensional karena
berbagai faktor penyebab, misalnya harus bekerja, kondisi geografis, jarak yang
jauh, kondisi fisik yang tidak memungkinkan, daya tampung sekolah
atau karena memang dididik melalui pendidikan keluarga di rumah (home
schoolers) dimungkinkan.
Berbagai elemen yang terdapat dalam sistem program visualisasi adalah:
a. Komunitas: para pelajar dapat mengembangkan komunitas online untuk
memperoleh dukungan dan berbagi informasi yang saling menguntungkan.
b. Multimedia: penggunaan teknologi audio, video dan animasi dalam
penyampaian materi sehingga menarik minat dalam belajar.
Perkembangan di berbagai negara memperlihatkan bahwa jumlah
pengguna internet teus meningkat. Fungsi program visualisasi dapat sebagai
pelengkap atau tambahan, dan pada kondisi tertentu bahkan dapat menjadi
alternatif lain dari pembelajaran konvensional. Peserta didik maupun
dosen/guru/instruktur dapat memperoleh manfaat dari penyelenggaraan program
visualisasi.
Beberapa di antara manfaat program visualisasi adalah fleksibilitas kegiatan
pembelajaran, baik dalam arti interaksi peserta didik dengan materi/bahan
pembelajaran, maupun interaksi peserta didik dengan dosen/guru/insruktur, serta
interaksi antara sesama peserta didik untuk mendiskusikan materi pembelajaran.
Lembaga pendidikan konvensional (universitas, sekolah, lembaga-lembaga
pelatihan, atau kursus-kursus yang bersifat kejuruan dan lanjutan) secara ekstensif
telah menyelenggarakan perluasan kesempatan belajar bagi ’target audience’
mereka melalui pemanfaatan teknologi komputer dan internet (Collier, 2002).
Seiring dengan hal ini, peserta didik usia sekolah yang mengikuti kegiatan
2.3 CAI (Computer Assisted Instruction)
Pemanfaatan komputer sekarang sudah menjangkau dunia pendidikan.
Aplikasi pengajaran yang menggunakan komputer salah satunya meliputi CAI
(Computer Assited Instruction). CAI atau pengajaran berbantuan komputer adalah
sistem komputer dimana dalam prosentase tertentu mengganti peran seorang
guru/pengajar dalam penyampaian materi pembelajaran (Surjono, 1996).
Ada beberapa media pengajaran yang dapat diimplementasikan untuk
menyampaikan materi pengajaran bagi para siswa, antara lain :
a. Media cetak, termasuk diantaranya adalah textbooks dan modul.
b. Media audio visual, termasuk diantaranya soundslides, video dan televisi.
c. Komputer, yaitu CAI.
d. Media audio, termasuk diantaranya radio, dan program audio cassette.
2.4 Rekayasa Perangkat Lunak Paradigma Terstruktur
Rekayasa perangkat lunak merupakan tahapan-tahapan kegiatan yang
bertujuan untuk mencapai :
a. Pengoptimalan sumber daya (biaya, personil maupun peralatan).
b. Pembangunan perangkat lunak yang sesuai dengan jadwal (cepat).
c. Pemeliharaan perangkat lunak yang lebih mudah.
Terdapat empat tahapan dalam rekayasa perangkat lunak, yaitu :
a) Pengumpulan Kebutuhan
Tahapan ini merupakan tahapan dasar yang digunakan oleh pengembang
untuk mengumpulkan seluruh informasi yang akan dikelola suatu
perangkat lunak. Informasi-informasi yang dikumpulkan untuk
pengembang adalah informasi yang dinilai bermanfaat atau dibutuhkan
oleh pengguna.
Ada beberapa kegiatan yang dilakukan dalam mengumpulan informasi,
antara lain :
1) Mengumpulkan informasi pennyebab masalah.
2) Mengumpulkan informasi yang menjadi dasar dalam proses
pengambilan keputusan.
3) Mengumpulkan informasi untuk mengidentifikasi personil-personil
kunci yang akan menggunakan sistem.
b) Analisis Sistem
Tahapan ini merupakan tahapan pemodelan sistem dalam bentuk diagram
berupa Data Flow Diagram dan ER-Diagram.
c) Desain
Desain perangkat lunak meliputi beberapa kegiatan, yaitu :
1) Desain Data
Kegiatan ini berupa desain tabel-tabel basisdata yang akan
berpengaruh bagi perangkat lunak. Desain ini sudah mulai mendefinisikan
digunakan dalam perangkat lunak, tipe-tipe dari field yang digunakan, dan
sebagainya.
2) Desain Arsitektural (fungsi-fungsi serta proses-proses pada
perangkat lunak)
Desain arsitektur meliputi :
• Pembuatan Data FlowDiagram yang rinci. • Pendefinisian dari algoritma modul.
• Pembuatan struktur modul. 3) Desain Antar Muka
Antar muka pemakai merupakan jembatan penghubung antara
entitas-entitas dan sistem. Desain antar muka yang baik sangat dibutuhkan
agar pengguna mampu mengoperasikan perangkat lunak dengan mudah.
Selain itu, antar muka juga memiliki peranan membentuk “image”
pengguna terhadap citra, misi, dan visi perangkat lunak yang dibangun.
Desain antar muka pengguna meliputi beberapa hal, yaitu :
• Desain Struktur Menu
Mendesain menu-menu yang akan ditampilkan dalam suatu
sistem.
• Desain jendela-jendela yang ditampilkan.
d) Implementasi (pengkodean)
Tahap ini merupakan tahapan pengkodean dari hasil perancangan. Pada
tahapan ini pengembang mulai membuat sistem aplikasi dengan
menggunakan bahasa pemrograman, misalnya PHP (Personal Home
Pages) dan action script. Pengkodean ini disesuaikan dengan
diagram-diagram yang telah dibuat, tabel-tabel basisdata yang telah didesain
ataupun algoritma dan struktur dari modul.
Gambar di bawah ini merupakan gambar pemodelan secara terstruktur
(waterfall) :
2.5 Basisdata
Basisdata merupakan sekumpulan data yang saling berhubungan yang
berisi informasi untuk pemakainya (F. Korth, 1986).
Konsep basisdata dibuat operasional oleh suatu sistem perangkat lunak yang
mengerjakan fungsi penciptaan dan peremajaan file, mencari data dan
menghasilkan laporan. Semua data dalam rangkaian file dapat terjangkau oleh
program apapun yang bisa menggunakan basisdata.
Basisdata dirancang atas dasar pendekatan aplikatif maupun pendekatan
sistem. Pendekatan aplikatif merupakan cara yang tradisional, dimana basisdata
dirancang hanya untuk memenuhi satu aplikasi tertentu, sehingga terdapat
kemungkinan satu data disiapkan dalam beberapa file berbeda untuk memenuhi
aplikasi-aplikasi yang berbeda. Sedangkan basisdata dirancang dengan
pendekatan sistem, memberikan suatu basisdata yang dapat dipergunakan untuk
lebih dari satu aplikasi, dengan mengurangi terjadinya duplikasi data.
Basisdata dapat berperan sebagai landasan bagi sistem informasi untuk
tujuan manajemen dan dapat mempengaruhi proses manajemen di dalam
organisasi, dengan cara menurunkan kendala-kendala penggunaan waktu yang
2.6 PHP (PHP Hypertext Presprocessor)
PHP singkatan dari PHP Hypertext Preprocessor atau Personal Home
Page Tools adalah sebuah bahasa server side scripting yang bisa digunakan
dengan bahasa HTML atau dokumennya secara bersamaan untuk membangun
sebuah aplikasi di web yang sangat banyak kegunaannya. Maksud dari server side
scripting adalah sintaks dan perintah-perintah yang diberikan akan sepenuhnya
dijalankan di server tetapi disertakan pada dokumen HTML.
PHP merupakan teknologi yang diperkenalkan pada tahun 1994 oleh
Rasmus Lerdorf. Berupa sekumpulan script PERL digunakan pada situs
pribadinya untuk mencatat siapa saja yang mengakses daftar riwayat hidup
onlinenya. Rasmus menulis ulang script- script PERL tersebut dengan
menggunakan bahasa C, kemudian menambahkan fasilitas untuk form HTML,
koneksi MySQL dan pada tahun 1996 Rasmus meluncurkan PHP versi kedua
yang diberi nama PHP/FI (PHP Interpreter). PHP ketiga dirilis pada pertengahan
1997. PHP versi ketiga ini dikembangkan oleh Rasmus beserta Zeew Suraski,
Andi Gutman, Stig Bakken, Shane Caravero dan Jim Winstead. Versi keempat
PHP dirilis pada bulan Oktober 2000. Perubahan mendasar pada PHP 4.0 adalah
integrasi Zend Engine. Zend dibuat oleh Zeef Suraski dan Andi Gutmans yang
merupakan penyempurnaan dari PHP 3.0, pada PHP 4.0 tidak lagi menggunakan
library tambahan pada 3.0.
PHP merupakan bahasa scripting yang menyatu dengan HTML dan berada
di sisi server (server side HTML – embedded scripting ). PHP didisain untuk
bekerja pada web server lain seperti Microsoft Internet Information Server.
Platform sistem operasi yang didukung oleh PHP pada awalnya hanya sistem
operasi Unix dan variannya. Namun sekarang ini PHP 4.0 telah mendukung
banyak platform sistem operasi Windows 9x, Windows NT, Mac, dan lain-lain.
Seluruh aplikasi berbasis web dapat dibuat dengan PHP, namun keunggulan PHP
yang paling utama adalah untuk konektivitas basisdata dengan web. PHP
membuat aplikasi web yang terkoneksi ke basisdata menjadi lebig murah. Sistem
basisdata yang telah didukung oleh PHP saat ini adalah Oracle, Sybase, MySQL,
Solid, Postgresql, Dbase, Unix Dbm, dan semua basisdata dengan interface
ODBC.
Script PHP dijalankan di sisi server kemudian hasilnya ditransfer ke client.
Keuntungan yang dapat diperoleh dengan proses yang dijalankan di server yaitu :
a. Keamanan data atau prosedur, dengan meletakkan aplikasi dan data di
server maka dapat lebih terkontrol. Tidak ada client yang dapat melihat
program dan mengubah data secara mudah.
b. Keamanan komunikasi, dengan terintegrasinya SSL atau HTTPS, PHP
dapat membuat data lebih aman dari pembajakan. Ini penting digunakan
terutama jika data tersebut dilewatkan pada jaringan public seperti
internet.
c. Terkontrol, server side application secara umum lebih mudah untuk
dimonitor, dibandingkan dengan pengawasan terhadap aplikasi yang
Kode program PHP menyatu dengan tag-tag HTML dalam suatu file. Kode PHP
diawali dengan tag <? Atau <?PHP dan ditutup dengan tag ?>. File yang berisi tag
HTML dan kode PHP ini diberi ekstensi .php atau ekstensi lainnya yang
ditetapkan pada apache / web server. Berdasarkan ekstensi ini, pada saat file
diakses, server akan tahu bahwa file ini mengandung kode PHP. Server akan
menerjemahkan kode ini dan menghasilkan output dalam bentuk tag HTML yang
akan dikirim ke browser client yang mengakses file tersebut.
Untuk lebih jelasnya dapat dilihat dalam format di bawah ini .Kode berikut ini
adalah contoh kode PHP yang berada di dalam kode HTML :
<HTML>
<HEAD>
<TITLE>Latihan Pertama</TITLE>
</HEAD>
<BODY>
<?PHP
echo ”Selamat mencoba PHP”;
?>
</BODY>
</HTML>
Perhatikan baris-baris berikut :
<?PHP
echo ”Selamat mencoba PHP”;
?>
Kode inilah yang merupakan kode PHP. Kode PHP diawali dengan <?PHP dan diakhiri dengan ?>. Pasangan kedua kode inilah yang berfungsi sebagai tag kode PHP. Berdasarkan tag inilah, pihak server dapat memahami kode PHP dan
kemudian memprosesnya. Hasilnya dikirim ke browser.
Pada skema di atas dapat dijelaskan cara kerja PHP pada web sebagai berikut :
a. Pemakai mengakses suatu situs web, dengan mengetikkan alamat yang
dituju pada web browser.
b. Web browser akan memberikan permintaan HTTP yaitu file-file PHP ke
web server.
c. Web server akan menerjemahkan file PHP tersebut melalui mesin PHP.
d. Kemudian hasilnya akan ditampilkan pada web browser beserta hasil
terjemahan HTML oleh web browser.
Sekilas mengenai script-script PHP
a. Variabel
Variabel berfungsi untuk menyimpan suatu nilai dan nilai yang ada dapat
diubah sewaktu-waktu.
Contoh :
$nama = ”data”;
$nama adalah variabel.
b. Pengenal
Pengenal (identifier) banyak digunakan dalam program untuk memberi
nama variabel, fungsi atau kelas.
Aturan yang berlaku untuk pengenal :
1) Karakter yang dapat digunakan adalah huruf, angka, atau garis bawah
(_ ).
3) Panjang pengenal bisa berapa saja.
4) Huruf kecil dan huruf kapital dibedakan.
Tabel 2.1 Contoh Pengenal
Contoh Pengenal
Benar Salah
Nama 3bulan
Nama_pemakai Nama pemakai
_nama Nama-pemakai
|
kuartal3
NamaBarang
c. Tipe data
Tipe data dasar PHP ada tiga macam, yaitu ;
1) integer
2) double
3) string
d. Konstanta
Konstanta menyatukan nilai yang tetap di dalam program
Contoh :
e. Operator
Operator adalah simbol yang digunakan dalam program untuk melakukan
suatu operasi, misalnya penjumlahan datau perkalian, perbandingan
kesamaan dua buah nilai, atau bahkan memberikan nilai ke variabel. Nilai
yang diperlukan oleh operator (disebut operand atau argument)
bersama-sama operator membentuk ungkapan (ekspresi).
1) Operator Aritmatika
Operator aritmatika adalah operator yang digunakan dalam operasi
matematika.
Tabel 2.2 Operator aritmatika
Operator Kegunaan Prioritas
+ Penjumlahan Ketiga
- Pengurangan Ketiga
* Perkalian Kedua
/ Pembagian Kedua
% Sisa pembagian Kedua
++ Penaikan Pertama
-- penurunan Pertama
2) Operator Penugasan
Tabel 2.3 Operator Penugasan
Operator Kegunaan Prioritas
+=
Menambahkan variabel di sisi kiri
dengan nilai di sisi kanan.
X += 2;
Berarti X =
X+2;
-=
Mengurangi isi variabel di sisi kiri
dengan nilai di sisi kanan.
X -= 2;
Berarti X =
X-2;
nilai di sisi kanan. Berarti X =
X%2;
%=
Memperoleh sisa pembagian antara
variabel di sisi kiri dengan nilai variabel
di sisi kanan.
X %= 2;
Berarti X =
X%2;
&=
Melakukan operasi ”dan” / ”and”
terhadap variabel di sisi kiri dengan nilai
di sisi kanan.
X &= 2;
Berarti X =
X&2;
!=
Melakukan operasi ”atau” / ”or”
terhadap variabel di sisi kiri dengan nilai
di sisi kanan.
X != 2;
Berarti X =
X!2;
^=
Melakukan operasi ”XOR” terhadap
variabel di sisi kiri dengan nilai di sisi
kanan.
X ^= 2;
Berarti X =
^!2;
.=
Melakukan operasi konkatenasi
terhadap variabel di sisi kiri dengan nilai
di sisi kanan.
X .= ’A’;
Berarti X =
3) Operator Perbandingan
Operator perbandingan atau dikenal juga dengan operator relasional
adalah operator yang digunakan untuk melakukan perbandingan dua
buah operand dan menghasilkan nilai benar atau salah.
Tabel 2.4 Operator Perbandingan
operator Makna
== Sama dengan
< Kurang dari
> Lebih dari
<= Kurang dari atau sama dengan
>= Lebih dari atau sama dengan
!= Tidak sama dengan
<> Tidak sama dengan
4) Operator logika
Operator logika bisa digunakan untuk menggabungkan kondisi
berganda dan menghasilkan sebuah ekspresi yang bernilai benar (nilai
1) atau salah (nilai 0).
Jenis operator logika :
a) AND atau &&
b) OR atau ||
c) XOR
f. Pernyataan kontrol
a) Pernyataan IF
Contoh :
if (ekspresi)
pernyataan
b) Pernyataan Switch
Contoh :
switch (ekspresi)
{
case ekspresi_case1;
pernyataan_1;
break;
case ekspresi_case2;
pernyataan_2;
break;
case ekspresi_case2;
...
default;
pernyataan_n;
c) pernyataan while
Contoh :
while (ekspresi)
{
pernyataan
}
d) pernyataan do-while
Contoh :
do
{
pernyataan
}
while (ekspresi);
g. Array
Array adalah suatu wadah yang dapat menampung sejumlah nilai.
Contoh :
h. Fungsi-fungsi MySQL yang umum digunakan untuk mengakses basisdata
MySQL antara lain :
1) Fungsi mysql_connect
digunakan untuk membuat hubungan ke basisdata MySQL yang
terdapat pada suatu host.
Contoh :
mysql_connect("$host","$username", "$passwd")
2) Fungsi mysql_select_db
Digunakan untuk memilih basisdata
Contoh :
mysql_select_db($basisdata, $pengenal_hubungan)
3) Fungsi mysql_query
Digunakan untuk mengeksekusi permintaan terhadap sebuah tabel atau
sejumlah tabel.
Contoh :
mysql_query ($permintaan, $pengenal_hubungan)
4) Fungsi mysql_num_rows
Digunakan untuk memperoleh jumlah baris dari suatu hasil permintaan
5) Fungsi mysql_fetch_row
digunakan untuk menghasilkan suatu array yang berisi seluruh kolom
dari sebuah baris pada suatu himpunan hasil.
contoh :
mysql_fetch_row($pengenal_hasil)
6) Fungsi mysql_fetch_array
Fungsi ini mempunyai kegunaan serupa dengan mysql_fetch_row.
Hanya saja setiap kolom akan disimpan dua kali pada array hasil. Yang
pertama memiliki indeks angka (dimulai dari nol) dan yang kedua
berindekskan nama kolom.
Contoh ;
mysql_fetch_array($pengenal_hasil)
2.7 SQL
SQL (Structured Query Language) adalah bahasa yang digunakan untuk
berkomunikasi atau bekerja dengan menggunakan sebuah basisdata. Melalui
perintah query kita dapat bekerja atau memanipulasi objek basisdata seperti
melihat status tabel, mengubah data-data yang ada di dalam tabel dan lain-lain.
Pengetahuan akan SQL sangat berguna karena bahasa ini yang umum digunakan
oleh produk RDBMS sebagai standar bahasa query bagi kebanyakan RDBMS.
Beberapa hal yang menjadikan SQL sangat populer diantaranya karena
penggunaan bahasa ini relatif mudah dimengerti sehingga memudahkan seorang
Pada dasarnya bahasa query SQL secara garis besar dapat dibagi menjadi
tiga bagian yaitu:
a. DDL (Data Definition Language)
DDL adalah bahasa-bahasa SQL yang digunakan untuk membuat,
memanipulasi atau menghapus skema yang ada di dalam basisdata. Bahasa
yang terdapat di dalam DDL hanya berhubungan dengan skema basisdata,
tidak berhubungan dengan data di dalamnya. Skema adalah struktur yang
dimiliki oleh sebuah basisdata.
Perintah-perintah SQL yang termasuk DDL antara lain:
1) CREATE - digunakan untuk membuat tabel.
2) ALTER – digunakan untuk mengubah (modify) tabel yang telah dibuat,
seperti menambah kolom baru, mengubah ukuran kolom, mengubah
aturan-aturan yang berlaku untuk satu kolom.
3) DROP – digunakan untuk menghapus sebuah tabel.
b. DML (Data Manipulation Language)
DML adalah bahasa-bahasa SQL yang digunakan untuk
memanipulasi data yang terdapat di dalam basisdata seperti membuat data,
menghapus data, dan lain-lain. Bahasa DML relatif lebih banyak
digunakan sehari-hari dibandingkan perintah DDL.
Perintah-perintah SQL yang termasuk dalam DML adalah:
1) Perintah select digunakan untuk membaca (query) isi tabel. Contoh
Contoh :
FROM nama tabel [INTO tabel tujuan]
WHERE [kondisi]
Tanda (*) menunjukkan semua field yang ada akan dipilih.
2) Perintah insert digunakan untuk memasukkan data ke dalam tabel.
Contoh :
INSERT INTO nama_tabel [(nama_field,…)] VALUES
expresi
3)Perintah delete digunakan untuk menghapus sebuah record atau
seluruh record dalam tabel.
Contoh :
DELETE FROM nama_tabel WHERE kondisi
4) Perintah update digunakan untuk memperbarui nilai suatu data.
Contoh :
UPDATE namatabel SET criteria WHERE kondisi
c. DCL (Data Control Language)
DCL adalah bahasa-bahasa SQL yang digunakan untuk mengatur
2.8 MySQL
MySQL adalah sebuah sistem manajemen basisdata. Untuk menambah,
mengakses, dan memproses data yang tersimpan dalam basisdata komputer
diperlukan suatu manajemen basisdata seperti MySQL. Sejak komputer dapat
menangani data yang sangat besar dengan baik, manajemen basisdata memainkan
peran inti dalam dunia komputer, baik sebagai perlengkapan yang berdiri sendiri,
maupun sebagai bagian dari aplikasi lain.
MySQL merupakan sistem manajemen basisdata relasional. Relasional
basisdata biasanya menempatkan data dalam tabel-tabel yang terpisah daripada
menempatkan semuanya ke dalam suatu ruang penyimpanan besar. Hal tersebut
bertujuan untuk meningkatkan kecepatan dan fleksibilitas.
MySQL merupakan software yang open source. Open source di sini
berarti setiap orang diperbolehkan untuk menggunakan dan mengubahnya atau
memodifikasinya. Semua orang dapat mendownload MySQL dari internet dan
menggunakannya tanpa membayar.
Perintah-perintah dasar dalam MySQL
a. Untuk membuat basisdata.
Contoh :
CREATE BASISDATA MYSQL;
b. Untuk menghapus basisdata.
Contoh :
c. Untuk melihat atau menampilkan semua basis data yang ada pada server.
Contoh :
SHOW BASISDATA;
d. Untuk masuk atau menggunakan basisdata yang dikehendaki.
Contoh :
USE MYSQL;
e. Untuk membuat tabel.
Contoh :
CREATE TABLE mahasiswa (nim varchar(10) NOT NULL
default '', nama varchar(50) NOT NULL default
'', PRIMARY KEY (nim) );
Perintah create table adalah perintah SQL untuk menciptakan tabel.
Kolom nim dan nama masing-masing bertipe varchar dan dengan panjang
masing-masing 10 dan 50 karakter. Artinya kolom ini dapat menampung
karakter maksimal sebanyak jumlah tersebut.
f. Untuk melihat tabel-tabel yang ada di dalam basisdata.
Contoh :
SHOW TABLES;
g. Untuk menghapus tabel yang ada di dalam basisdata
Contoh :
h. Untuk menampilkan secara lengkap atas detail suatu tabel ataupun
field-field dan tipe data.
Contoh :
DESC MAHASISWA;
i. Untuk menampilkan data-data dari basisdata sesuai dengan yang
diinginkan.
Contoh :
SELECT * FROM MAHASISWA;
SELECT NIM, NAMA FROM MAHASISWA;
SELECT * FROM MAHASISWA WHERE NAMA LIKE ”ANTON”
j. Untuk memasukkan data ke dalam basisdata.
Contoh :
INSERT INTO MAHASISWA VALUES ('045314010', 'YUDI
PRIHARTANTO');
k. Untuk mengupdate ataupun mengubah data yang ada pada basisdata.
Contoh :
UPDATE MAHASISWA SET NIM = '045314001' WHERE NAMA
= 'YUDI PRIHARTANTO';
l. Untuk menghapus data-data yang ada pada basisdata.
Contoh :
2.9 Multimedia
Dalam dunia komputer, multimedia adalah program perangkat lunak yang
menggunakan lebih dari satu cara untuk mengkombinasikan informasi pada user
(Tway, 1992). Multimedia juga pada dasarnya dapat didefinisikan sebagai
teknologi yang mengkombinasikan teks, gambar, animasi, audio, video dan link
interaktif. Suatu multimedia yang dapat menangani interaktif user disebut juga
interactive multimedia (multimedia interaktif), dimana user dapat memilih apa
yang dikerjakan selanjutnya dan tindakan tersebut akan mempengaruhi komputer
untuk mengerjakan fungsi berikutnya (Hadi Sutopo, 2003). Sebagaimana telah
disebutkan sebelumnya, beberapa objek yang terdapat dalam multimedia antara
lain adalah:
a. Teks: merupakan dasar dari pengolahan kata yang terdiri dari kumpulan
huruf atau karakter untuk menampilkan informasi. Dapat tersaji sebagai
bagian dari grafik bitmap maupun vektor. Format standar untuk file teks
antara lain: text (.txt), RichText(.rtf), atau Hypertext Markup Languange
(HTML) untuk pembuatan halaman web.
b. Image: biasa disebut grafik yang merupakan gambar diam (still image)
seperti foto atau lukisan. Pada dasarnya format grafik bitmap adalah
gambar yang terbentuk dari garis dan kurva. Format standar filenya antara
lain: bitmap (.bmp). Join Photography Expert (JPEG) dan sebagainya.
Sedangkan grafik vektor adalah sebuah grafik yang terbentuk dari
titik-titik yang diwarnai dan tersusun dalam sebuah grid yang dinamakan pixel.
c. Animasi: menunjukkan sebuah seri dari gambar grafik yang menirukan
gerakan dan memiliki sifat dinamis juga berisi penyamaan suara, serta
dapat menerangkan sesuatu yang sulit diterangkan melalui teks. Animasi
dalam multimedia bertipe frame-based yaitu sebuah layer atau frame yang
ditunjukkan berurutan dengan kecepatan tertentu. Format umum file
animasi antara lain: Gif Animator (.Gif), Shockwave Flash (.swf), Quick
Time Movie (.mov), dan sebagainya.
d. Audio: suara atau bunyi yang digunakan untuk memperjelas pengertian
suatu informasi atau karakteristik suatu gambar. Penyajian suatu sistem
akan lebih menarik bila disertai efek, musik latar atau voice. Beberapa
format standar media suara antara lain: Wave Form Audio (.wav), Mpeg
Layer-3 Audio (.mp3), Musical Instrumen Digital Interface (MIDI), dan
sebagainya.
e. Video: untuk full-motion berupa clip, sedangkan live video terdiri dari
bagian dari gambar-gambar yang diproyeksikan ke layer dan merupakan
hasil pemrosesan yang diperoleh dari kamera. Berupa format standar
media video antara lain: Audio Visual Interface (AVI), Mpeg Video
(MPG), dan sebagainya.
f. Link: digunakan untuk menunjuk pada statu objek atau tombol agar dapat
mengakses program tertentu sehingga menjadi informasi yang terpadu.
Karena kemampuannya dalam penyampaian informasi yang menarik dan
keperluan diantaranya: presentasi, iklan, game, web, dan keperluan
lainnya.
2.10 Macromedia Flash 8
Macromedia flash 8 adalah salah satu program animasi grafis yang banyak
digunakan para designer untuk menghasilkan karya-karya profesional, khususnya
dalam bidang animasi. Perangkat ini cukup fleksibel untuk keperluan pembuatan
animasi.
Macromedia flash 8 sering digunakan untuk pembuatan animasi interaktif
maupun non interaktif, seperti animasi pada halaman web, animasi kartun,
presentasi, portofolio sebuah perusahaan, game, dan beberpa media animasi
lainnya.
Keunggulan Macromedia Flash 8 dibanding program lain yang sejenis,
antara lain:
a. Membuat tombol interaktif dengan sebuah movie atau objek yang lain.
b. Membuat perubahan transparansi warna dalam movie.
c. Membuat perubahan animasi dari satu bentuk ke bentuk yang lain.
d. Membuat gerakan animasi dengan mengikuti alur yang telah ditetapkan.
e. Dikonvesi dan dipublikasi ke dalam beberapa tipe di antaranya adalah:
2.10.1 Timeline
Timeline merupakan panel utama yang berfungsi untuk mengatur cepat
atau lambatnya animasi yang kita buat dan sebagai wadah untuk menyatukan
objek-objek dari setiap layer.
2.10.2 Simbol
Dengan merubah suatu objek menjadi simbol, itu artinya objek tersebut
sudah menjadi bentuk yang pasti dan kita tidak bisa memanipulasinya lagi di
dalam stage misalnya berubah warna atau memberikan coretan di atasnya.
Jenis simbol (behavior) antara lain :
a. Movieclip : objek digunakan untuk beranimasi.
b. Button : objek dibuat sebagai tombol.
c. Grafik : objek dibuat sebagai gambar yang statis atau tidak beranimasi.
2.10.3 Library
Library di dalam flash fungsinya sesuai dengan namanya adalah sebuah
tempat penyimpanan simbol yang sudah kita buat. Jika kita membuat sebuah
simbol maka secara otomatis simbol tersebut akan masuk ke dalam library. Jadi
selama kita bekerja semua simbol yang sudah pernah kita buat, walaupun sudah
2.10.4 Action Script
Action Script adalah bahasa yang menjembatani antara bahasa yang kita
kenal dengan dengan bahasa yang dikenal oleh flash. Action Script mengijinkan
kita membuat instruksi berorientasi action dan instruksi logic (analisa masalah
sebelum melakukan perintah). Sama dengan bahasa pemrograman yang lain,
action script berisi banyak elemen yang berbeda serta strukturnya sendiri. Sebuah
action biasanya berada pada beberapa baris yang menginstruksi pada flash untuk
berbuat, membuat, mengubah, me-load atau menghapus.
Dalam action script terdapat beberapa perintah yang sering digunakan untuk
membuat animasi, antara lain :
Action Script – goto a. gotoAndPlay
Digunakan untuk menuju ke frame tertentu dan memainkan animasi yang
ada di frame tersebut.
Contoh :
on (release)
{ gotoAndPlay(”Scene 1”, 25); }
sintak di atas adalah menuju ke scene 1 frame 25 dan langsung memainkan
b. gotoAndStop
Digunakan untuk menuju ke frame tertentu dan berhenti di frame tersebut.
Contoh :
on (release)
{gotoAndStop(”Scene 1”, 25); }
Sintak di atas adalah menuju ke scene 1 frame 25 dan langsung berhenti
pada frame 25.
Action Script – on
Sintak on digunakan untuk mendukung sintaks yang lain.
Contoh :
on ()
{}
Action Script – play
Sintak play digunakan untuk menjalankan movie.
Contoh :
Action Script – loadMovie
Sintak loadMovie digunakan untuk memanggil dan menjalankan animasi flash
yang telah disimpan.
Contoh :
on (release)
41
BAB III
ANALISIS DAN DESAIN SISTEM
3.1 Gambaran Umum Sistem
Sistem ini digunakan sebagai progam bantu untuk pembelajaran basisdata.
dalam sistem ini secara khusus hanya dibahas materi select, insert, update, dan
delete. Sistem ini dikemas dalam bentuk visualisasi yang interaktif. Berdasarkan
perihal di atas terdapat beberapa pertimbangan yang berkaitan dengan kebutuhan
sistem, antara lain :
a. Penyesuaian aplikasi dengan kemampuan pengguna dalam memahami
aplikasi yang dibuat.
b. Pengguna sistem adalah mahasiswa atau dapat pula orang awam yang
ingin belajar tentang basisdata.
Dari kedua hal tersebut, spesifikasi fasilitas sistem yang diperlukan adalah :
a. Komponen atau elemen yang menjadi daya tarik, antara lain :
1) gambar
2) animasi
b. Materi pembelajaran antara lain meliputi pembelajaran basisdata, yang
memuat materi antara lain :
1) Pengenalan konsep basisdata.
Gambaran umum sistem dapat dilihat pada tabel beriikut ini :
Tabel 3.1 Deskripsi Konsep Sistem
Judul
Aplikasi Sumber Belajar Digital Dalam Bentuk
Visualisasi Query Terbatas Untuk Matakuliah
Basisdata
User Mahasiswa
Durasi Sesuai dengan kebutuhan user
Image Menggunakan IMG, GIF, dan PNG
Video Tidak menggunakan
Animasi Menggunakan animasi teks dan grafis
3.2 Analisis Sistem
Analisis sistem dapat didefinisikan sebagai pengurai dari suatu sistem
informasi yang utuh ke dalam bagian-bagian komponennya dengan maksud
mengidentifikasikan dan mengealuasi permasalahan-permasalahan dan
hambatan-hambatan yang terjadi, serta kebutuhan yang diharapkan sehingga dapat diusulkan
perbaikannya.
Metode yang digunakan untuk pembuatan aplikasi ini adalah metode terstruktur
yang digambarkan dengan DFD (Data Flow Diagram).
a. Indentifikasi kesatuan luar (external entity) yang terlibat dalam sistem
adalah pengguna (user).
b. Identifikasi input dan output yang terlibat dengan kesatuan luar (external
entity)
• Pengguna (user)
1) Input : pilih menu, perintah SQL.
3.2.1 Use Case
Use Case diagram dari sistem yang akan dibuat dapat dilihat pada gambar
di bawah ini :
3.3 Desain Sistem
Desain sistem didefinisikan sebagai penggambaran, perencanaan, dan
pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah dalam satu
kesatuan yang utuh dan berfungsi (John Burch & Gary Grudnitski).
Tahap desain sistem memiiki dua tujuan utama, yaitu :
a. Untuk memenuhi kebutuhan kepada pemakai sistem.
b. Untuk memberikan gambaran yang jelas dan rancang bangun yang
lengkap kepada pemrogram komputer dan ahli-ahli teknik lainnya
yang terlibat.
Desain sistem Aplikasi Sumber Belajar Digital Dalam Bentuk Visualisasi Query
Terbatas Untuk Matakuliah Basisdata dimulai dari desain proses, desain basisdata,
3.3.1 Desain Proses
Sistem ini dirancang dengan menggunakan pendeketan SDLC. SDLC
merupakan urutan terstrukturdari suatu tugas pengembangan sistem informasi.
SDLC terstruktur sangat bermanfaat dan diperlukan untuk menyusun,
mengembangkan, dan membuat sistem informasi baru. Untuk dapat melakukan
langkah-langkah sesuai dengan yang diberikan oleh pendekatan SDLC, maka
dibutuhkan DFD (Data Flow Diagram).
3.3.1.1 Diagram Konteks (Context Diagram)
Diagram konteks merupakan sebuah diagram sederhana yang
menggambarkan hubungan antara entitas luar, masukkan dan keluaran dati sistem.
Berikut adalah gambar diagram konteks dari aplikasi sumber belajar
digital dalam bentuk visualisasi query terbatas untuk matakuliah Basisdata :
Gambar 3.2 Diagram Konteks
3.3.1.2Diagram Berjenjang
Gambar 3.3Diagram Berjenjang
3.2.1.3 DFD (Data Flow Diagram) 3.2.1.3.1 DFD Level 0
3.2.1.3.2 DFD Level 1 Proses 1
3.2.1.3.3 DFD Level 1 Proses 2
3.2.1.3.4 DFD Level 1 Proses 3
3.3.2 Desain Basisdata
Basisdata adalah suatu wadah untuk menyimpan dan menyediakan
data-data atau informasi yang akan dipakai oleh sistem informasi, oleh karena itu
basisdata merupakan komponen yang penting dalam pembuatan sistem.
Basisdata merupakan salah satu komponen yang sangat penting di sistem
informasi, karena berfungsi sebagai penyedia informasi bagi para penggunanya.
Penerapan basisdata dalam sistem informasi disebut dengan sistem basisdata
(database system). Sistem basisdata ini adalah salah satu sistem informasi yang
mengintegrasikan kumpulan data yang saling berhubungan satu dengan yang
lainnya dan membuat tersedia untuk beberapa aplikasi yang bermacam-macam
dalam suatu organisasi.
3.3.2.1ER Diagram
Maksud dibuatnya ER diagram adalah untuk menjelaskan entitas-entitas
dari basisdata beserta atribut-atributnya dan menggambarkan hubungan
entitas-entitas yang dibangun.
ER diagram untuk sistem yang akan dibangun dapat dilihat pada gambar di bawah
ini :
Pada ER diagram tersebut terlihat adanya relasi antara entitas jurusan dengan
entitas mahasiswa yang merupakan relasi one-to-many, relasi tersebut bernama
terdaftar. Pada relasi ini mahasiswa dapat terdaftar pada satu jurusan, dan untuk
setiap jurusan dapat diambil oleh lebih dari satu mahasiswa.
Gambar 3.9 ER Diagram Visualisasi Dinamis
Pada ER diagram tersebut terlihat adanya relasi antara entitas matakuliah dengan
entitas mahasiswa2 yang merupakan relasi many-to-many, relasi tersebut bernama
mengambil. Pada relasi ini mahasiswa2 dapat mengambil lebih dari satu
matakuliah, demikian juga sebaliknya setiap matakuliah dapat diambil oleh lebih
3.3.2.2Relasi Antar Tabel
Gambar 3.10 Basisdata Visualisasi Animasi
Desain basisdata ini dibuat menggunakan diagram relasi entitas atau ER diagram
yang didasarkan atas entitas dan terdapat hubungan.
a. entitas jurusan, dengan atribut : kode_jurusan, jurusan, kajur.
b. entitas mahasiswa, dengan atribut : nim, nama, kode_jurusan
Desain basisdata ini dibuat menggunakan diagram relasi entitas atau ER diagram
yang didasarkan atas entitas dan terdapat hubungan.
a. Entitas mahasiswa2, dengan atribut : nim, dan nama
b. Entitas matakuliah, dengan atribut : kode_mk, nama_mk.
c. Entitas nilai, dengan atribut : nim, kode_mk, dan nilai.
3.3.2.3Struktur File Basisdata
Berikut adalah rancangan tabel-tabel yang akan dibuat :
Tabel 3.2 Jurusan
Nama Field Tipe Panjang Keterangan
PK kode_jurusan Varchar 4 not null
jurusan Varchar 25 not null
kajur Varchar 100 not null
kode_jurusan digunakan sebagai primary_key. Tabel jurusan ini memiliki relasi
one-to-many dengan tabel mahasiswa.
Tabel 3.3 Mahasiswa
Nama Field Tipe panjang Keterangan
PK nim Varchar 10 not null
nama Varchar 50 not null
nim digunakan sebagai primary key. Tabel mahasiswa ini memiliki relasi
many-to-one antara tabel mahasiswa2 dengan matakuliah.
Tabel 3.4 Mahasiswa2
Nama Field tipe Panjang Keterangan
PK nim varchar 10 not null
nama varchar 50 not null
nim digunakan sebagai primary key. Tabel mahasiswa2 ini memiliki relasi
one-to-many dengan nilai.
Tabel 3.5Matakuliah
Nama Field tipe panjang Keterangan
PK kode_mk varchar 10 not null
nama_mk varchar 50 not null
kode_mk digunakan sebagai primary key. Tabel matakuliah ini memiliki relasi
Tabel 3.6Nilai
Nama Field Tipe panjang Keterangan
PK Nim Varchar 10 not null
PK kode_mk Varchar 10 not null
Nilai Char 1 not null
nim dan kode_mk digunakan sebagai primary key. Tabel nilai ini merupakan hasil
relasi many-to-many antara tabel mahasiswa2 dengan matakuliah.
3.3.3 Desain Antarmuka
Sistem ini mempunyai beberapa antarmuka yang memungkinkan user
berinteraksi dengan sistem, yaitu :
3.3.3.1Desain Tampilan Form Utama
Menu utama :
a. Materi Pembelajaran : fasilitas untuk mempelajari materi-materi yang
diberikan.
b. Visualisasi SQL : fasilitas untuk mencoba melihat proses query dan
menerapkan materi-materi yang didapat untuk dilihat hasilnya.
c. Bantuan : fasilitas untuk membantu pengguna jika mengalami kesulitan
dalam memakai program.
3.3.3.2Desain Menu Materi Pembelajaran 3.3.3.2.1 Desain Pengenalan Konsep Database
3.3.3.2.2 Desain Perintah SQL
Gambar 3.14 Desain Perintah SQL
3.3.3.2.3 Desain Visualisasi SQL Animasi
3.3.3.2.4 Desain Visualisasi SQL Dinamis
Gambar 3.16 Desain Visualisasi SQL Dinamis
3.3.3.3Desain Menu Visualisasi SQL 3.3.3.3.1 Desain Animasi
3.3.3.3.2 Desain Dinamis
Gambar 3.18 Form Query Dinamis
3.3.3.4Desain Menu Bantuan 3.3.3.4.1 Desain Pengantar
3.3.3.4.2 Desain Kebutuhan Sistem
Gambar 3.20 Desain Kebutuhan Sistem
3.3.3.4.3 Desain Instalasi Aplikasi
3.3.3.4.4 Desain Memulai Program
62
BAB IV
IMPLEMENTASI DAN PEMBAHASAN
4.1 Implementasi Program
Implementasi merupakan tahap pengembangan dari hasil perancangan.
Pada bab ini akan dijelaskan hasil implementasi (pengembangan) dan jalannya
program. Aplikasi ini dapat digunakan oleh siapapun yang ingin mempelajari
proses berjalannya query, dan juga dasar-dasar sintak query tersebut, dalam hal ini
query yang dimaksud adalah query DML (Data Manipulation Language).
Susunan dari program ini terdiri dari sekumpulan file-file PHP, modul
flash movie dan basisdata yang terintegrasi antara satu dengan yang lainnya,
sehingga membentuk sebuah aplikasi pembelajaran yang utuh.
4.1.1 Menjalankan Program
Program ini dapat dijalankan dengan cara menginstall program xampp atau
server2go.
Cara menginstall program pada xampp : a. Install xampp-win32-1.5.5-installer.exe
b. Instalasi pada drive C, klik next sampai instalasi selesai.
c. Copy database ta di dalam folder ta ke c:\Program files\xampp\mysql\data\
e. Buka XAMPP Control Panel Application jalankan MySQL dengan
menekan tombol start, setelah tombol start ditekan maka akan muncul
pesan seperti di bawah ini.
f. Jika program sudah terinstal dengan benar dapat dicek dengan cara pada
alamat browser ketikan http://localhost/visualisasisql, maka akan muncul
gambar di bawah ini :
Cara menginstall program pada server2go :
a. Copy folder server2go_a2 ke salah satu drive dalam hardisk anda.
b. Copy database dengan nama ta ke dalam drive C:\MyS2GApp\Data
c. Copy folder visualisasisql pada folder server2go yang telah dicopy pada
drive(langkah no 1) misalkan dicopy di drive D. Contoh sebagai berikut
D:\server2go\htdocs\
d. Jalankan Server2Go.exe di dalam folder yang anda copy pada no 1.
Sehingga sampai muncul gambar di bawah ini
e. Pada address tertulis alamat http://127.0.0.1:4001, silahkan anda
tambahkan visualisasisql di belakang http://127.0.0.1:4001 Contoh sebagai berikut http://127.0.0.1:4001/visualisasisql
4.1.2 Menggunakan Program 4.1.2.1 Menu Utama
Setelah koneksi terhubung maka akan muncul gambar di bawah ini :
Gambar 4.5Menu Utama
Gambar di atas merupakan tampilan menu utama program. Dapat dilihat
pada tulisan sebelah kiri adalah menu-menu yang disediakan, menu-menu tersebut
terdiri dari tiga bagian yaitu :
a. Materi Pembelajaran
Pada menu ini terdapat tiga sub materi yaitu :
1) Pengenalan Konsep Database.
2) Perintah SQL.
3) Visualisasi SQL animasi.
b. Visualisasi SQL
Pada menu ini terdapat dua sub menu yaitu :
1) Animasi
2) Dinamis
c. Bantuan
Pada menu ini terdapat empat sub menu yaitu :
1) Pengantar.
2) Kebutuhan sistem.
3) Instalasi aplikasi
4.1.2.2 Menu Materi Pembelajaran 4.1.2.2.1 Sub Menu Materi
Pada sub menu ini berisi materi singkat tentang pengenalan konsep basisdata, di
dalamnya juga dijelaskan tujuan pembuatan, dan cara mengoperasian aplikasi, dan
modul flash seperti gambar di bawah ini ;
Di bawah ini terdapat gambar modul flash tentang pengenalan konsep basisdata
Gambar 4.7Modul Flash Pengenalan Konsep Basisdata
Pada halaman ini berisi pengantar basisdata, dan teori singkat tentang basisdata.
Setelah tekan tombol masuk, pada gambar di bawah ini berupa contoh diambil
dari halaman ke empat :
Pada sub menu ini berisi materi singkat tentang perintah sql, di dalamnya juga
dijelaskan tujuan pembuatan, dan cara mengoperasian aplikasi, dan modul flash
seperti gambar di bawah ini ;
Di bawah ini terdapat gambar modul flash tentang Perintah SQL
Gambar 4.10Modul Flash Perintah SQL.
Pada halaman ini berisi standar kompetensi, kompetensi dasar, dan pokok bahasan
Tekan tombol next maka akan masuk ke halaman dua, seperti gambar di bawah
ini :
