pembuatan bahan ajar interaktif smp - …... · digital untuk semua komputer. ... meliputi materi...

52
perpustakaan.uns.ac.id digilib.uns.ac.id commit to user i PEMBUATAN BAHAN AJAR INTERAKTIF SMP “RANGKAIAN LISTRIK” BERBASIS FLASH - XML TUGAS AKHIR Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika Disusun oleh : ALBERT NICKO ARWIN PUTRA NIM. M3109007 PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET 2012

Upload: truongmien

Post on 02-Feb-2018

251 views

Category:

Documents


8 download

TRANSCRIPT

Page 1: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

i

PEMBUATAN BAHAN AJAR INTERAKTIF SMP

“RANGKAIAN LISTRIK” BERBASIS FLASH - XML

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Disusun oleh :

ALBERT NICKO ARWIN PUTRA

NIM. M3109007

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET

2012

Page 2: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ii

HALAMAN PERSETUJUAN

PEMBUATAN BAHAN AJAR INTERAKTIF SMP

“RANGKAIAN LISTRIK” BERBASIS FLASH - XML

Disusun oleh

ALBERT NICKO ARWIN PUTRA

NIM. M3109007

Tugas Akhir ini telah disetujui untuk dipertahankan

Di hadapan Dewan Penguji

pada tanggal ……………..

Pembimbing

Fendi Aji Purnomo, S.Si

NIDN.0626098402

Page 3: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iii

HALAMAN PENGESAHAN

PEMBUATAN BAHAN AJAR INTERAKTIF SMP

“RANGKAIAN LISTRIK” BERBASIS FLASH - XML

Disusun oleh :

ALBERT NICKO ARWIN PUTRA

NIM. M3109007

Dibimbing Oleh :

Fendi Aji Purnomo, S.Si

NIDN.0626098402

Tugas Akhir ini telah diterima dan disahkan oleh Dewan Penguji

Tugas Akhir Program Diploma III Teknik Informatika

pada hari……..tanggal………..

Dewan Penguji

1. Fendi Aji Purnomo, S.Si ( )

NIDN.0626098402

2. Taufiqurrahman N.H., S.Kom ( )

NIDN.0622058201

3. Didiek Sri Wiyono, S.T, M.T ( )

NIP.197503312005011001

Disahkan oleh :

Dekan FMIPA UNS Ketua Program

Diploma III Teknik Informatika

FMIPA UNS

Prof. Ir. Ari Handono Ramelan, MSc(Hons). Ph.D Drs. Ys. Palgunadi, MSc

NIP. 19610223 198601 1 001 NIP. 19560407 198303 1 004

Page 4: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

iv

ABSTRACT

Albert Nicko Arwin Putra, 2012. Building Interactive Application of

Electrical Circuit Based Flash - XML for Junior High School. Diploma III

Informatics Engineering, Faculty of Mathematic and Natural Sciences, Sebelas

Maret University.

Multimedia is expanding very rapidly, because it has penetrated into every

field. In the world of education, multimedia plays a very important and can serve

as a very useful interactive media, and with the development of multimedia

applications, the education world no longer require paper media as a medium of

learning, just the files in digital form to all computers. Multimedia applications is

an amalgamation of various components such as text, sound, images, and

animations that will make users be more interested in learning something new.

The purpose of this project is to ease and creates realistic understanding of science

subjects studied chapter of Electric Circuits.

Preparation of multimedia-based interactive teaching materials is to use

some design and animation software such as Corel Draw X5, Adobe Photoshop

CS3 and Adobe Flash CS4 running on Windows operating system. Interactive

multimedia-based teaching materials are designed and developed using several

methods, such as: observation by collecting data through observation, recording,

and search for information about all the information about the electrical circuit. In

this case using a syllabus that has been implemented, particularly the electric

chapter. Interview is one of the most accurate data collection, because in practice

the authors conducted interviews with the parties directly concerned. Literature

study is a method which is done by looking for reference books and tutorial that

discusses about how to manufacture an electric chain of interactive teaching

materials based on flash-XML.

The study produced an interactive multimedia-based teaching materials

that provide interactive learning media, including material about electrical

circuits, simulation experiments and evaluation of the subject matter of Electrical

Science section

Keyword : Interactive application, electrical circuit simulation, flash

Page 5: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

v

ABSTRACT

Albert Nicko Arwin Putra, 2012. Pembuatan Bahan Ajar Interaktif

SMP “Rangkaian Listrik” Berbasis Flash - XML. Program Diploma III Teknik

Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas

Sebelas Maret Surakarta.

Multimedia mengalami pengembangan yang sangat pesat, sebab telah

merambah ke segala bidang.Didalam dunia pendidikan, multimedia berperan

sangat penting dan dapat dijadikan sebagai media interaktif yang sangat berguna,

dan dengan berkembangnya aplikasi multimedia, dunia pendidikan tidak lagi

membutuhkan media kertas sebagai media pembelajaran, cukup file dalam bentuk

digital untuk semua komputer. Aplikasi multimedia merupakan penggabungan

dari berbagai komponen seperti teks, suara, gambar, dan animasi yang akan

membuat pengguna menjadi lebih tertarik dalam mempelajari suatu hal baru.

Tujuan dari proyek ini adalah untuk memeberikan kemudahan dan pemahaman

mempelajari mata pelajaran IPA bab Rangkaian Listrik.

Pembuatan bahan ajar interaktif berbasis multimedia ini menggunakan

beberapa software desain dan animasi seperti Corel Draw X5, Adobe Photoshop

CS3 dan Adobe Flash CS4 yang berjalan pada system operasi Windows. Bahan

ajar interaktif berbasis multimedia ini dirancang dan dikembangkan menggunakan

beberapa metode, diantaranya adalah: Observasi dengan cara mengumpulkan data

yang dilakukan melalui pengamatan, pencatatan, dan pencarian informasi tentang

semua informasi mengenai rangkaian listrik. Dalam hal ini menggunakan silabus

yang telah diterapkan, khususnya bab listrik.Wawancara yaitu salah satu metode

pengumpulan data yang paling akurat, karena dalam pelaksanaannya penulis

langsung melakukan wawancara dengan pihak yang bersangkutan.Studi pustaka

merupakan suatu metode yang dilakukan dengan cara mencari buku-buku

referensi serta tutorial yang membahas mengenai cara pembuatan bahan ajar

interaktif rangkain listrik berbasis flash-XML.

Penelitian ini menghasilkan bahan ajar interaktif berbasis multimedia yang

memberikan media pembelajaran interaktif, meliputi materi tentang rangkaian

listrik, simulasi percobaan dan evaluasi soal mata pelajaran IPA bab Listrik.

Kata Kunci : Media pembelajaran interaktif, Simulasi Rangkaian Listrik, Flash

Page 6: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vi

MOTTO

Belajar merupakan suatu kegiatan yang akan selalu dilakukan ketika semua

orang dilahirkan sampai kembali kepada Sang Penguasa Hidup.

Ketika membuka mata hingga menutup mata.

Belajar merupakan suatu hal yang sederhana namun memiliki arti yang lebih dari

diketahui semua orang

Page 7: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

vii

PERSEMBAHAN

Karya ini dipersembahkan kepada :

1. Kedua orang tua serta segenap keluarga yang saya cintai dalam

memberikan doa dan dukungannya.

2. Bapak Drs. Ys. Palgunadi, M. Sc. Selaku Ketua Program Diploma

III Teknik Informatika Fakultas MIPA Universitas Sebelas Maret

Surakarta.

3. Bapak Fendi Aji Purnomo, S.Si selaku dosen pembimbing yang telah

memberikan masukan, pengarahan, dan petunjuk kepada saya.

4. Untuk Andhyka Widya yang selalu memberikan doa, semangat serta

segala hal yang membantu dalam pekerjaan projek ini.

5. Teman-teman jurusan Teknik Informatika angkatan 2009.

Page 8: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

viii

KATA PENGANTAR

Dengan penuh rasa syukur kehadirat Tuhan YME, yang telah

melimpahkah segala rahmat dan karunia-Nya, sehingga penulis dapat

menyelesaikan Laporan Tugas Akhir dengan judul “Pembuatan Bahan Ajar

Interaktif SMP “Rangkaian Listrik” Berbasis Flash - XML”.

Adapun tujuan dari penulisan Laporan Tugas Akhir ini adalah untuk

memenuhi sebagian persyaratan kelulusan Program Studi Diploma III Teknik

Informatika Fakultas MIPA Universitas Sebelas Maret Surakarta.

Atas terselesaikannya Laporan Tugas Akhir ini, penulis tidak lupa

mengucapkan banyak terima kasih kepada :

1. Allah SWT yang telah memberikan kemudahan dan kelancaran sehingga

laporan ini dapat terselesaikan tepat pada waktunya.

2. Kedua orang tua penulis yang selalu memberikan dukungan secara moril

dan materiil.

3. Bapak Drs.Y.S. Palgunadi,M.Sc selaku Ketua Program Diploma III

Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam

Universitas Sebelas Maret Surakarta.

4. Bapak Fendi Aji Purnomo selaku dosen pembimbing yang telah banyak

memberikan bimbingan dan saran dalam pembuatan Laporan ini.

5. Semua pihak yang telah banyak membantu penulis dalam menyelesaikan

laporan ini yang tidak bisa disebutkan satu persatu.

Surakarta, Juni 2012

Penulis

Page 9: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

ix

DAFTAR ISI

HALAMAN JUDUL…………………………………………..………….……….i

HALAMAN PERSETUJUAN……………………..…………….…….…………ii

HALAMAN PENGESAHAN……………………………………….…….……..iii

HALAMAN ABSTRACT………………..…………………….…….…………..iv

HALAMAN ABSTRAK………………………………………….…..…………..v

MOTO…………………………………………………………………..………...vi

HALAMAN PERSEMBAHAN……………………………………………..…..vii

KATA PENGANTAR……………………………………………………….….viii

DAFTAR ISI………………………………………………………………..…….ix

DAFTAR GAMBAR……………………………………………………….……xii

BAB I PENDAHULUAN…………………….……………..................................1

1.1 Latar Belakang Masalah…….…………………………….…...….......1

1.2 Rumusan Masalah………………………………………………...…..2

1.3 Batasan Masalah……………………………………………………....2

1.4 Tujuan Penelitian…………………………………………..……….....2

1.5 Manfaat Penelitian……………………………………….………........2

1.6 Metodologi Penelitian………………………………………………...3

1.7 Sistematika Penulisan…………………………………………………5

BAB II LANDASAN TEORI..................................................................................6

2.1 Pengertian Multimedia ………...…………….………………….……6

2.2 Struktur Navigasi ……………………………………………..………6

2.3 XAMPP …………………………………………………....................9

Page 10: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

x

2.4 PHP…………………………………………………………...…….....9

2.5 Action Script……………………………………………...…………10

2.6 Basis Data……………………………………………………………10

a. Operasi Dasar Basis Data ………………………………………….10

b. Keuntungan Basis Data ……………………………………………12

2.7 MySQL……………………………………………………………....12

2.8 XML…………………………………………………………………13

BAB III DESAIN DAN PERANCANGAN SISTEM.……………...…………...14

3.1 Context Diagram(CD)..………………………………………….......14

3.2 Data Flow Diagram(DFD).………………………………………....15

3.2.1 DFD Level 0………..………………………………................15

3.2.2 DFDLevel 1 Manage Data Soal ..……....…………..................16

3.3 Entity Relationship Diagram (ERD)………………………...............17

3.4 Rancangan Database…………………………………………...........18

3.5 Document Type Definition (DTD) XML Quiz……………………...19

3.6 Site Map…………………………………………….……………….20

3.7 Struktur dan Desain……………………………………………….…21

3.7.1 Desain Layout untuk Halaman Awal……………...…………..21

3.7.2 Desain Layout untuk Halaman Siswa…………………………21

3.7.3 Desain Layout untuk Halaman Admin………………..………22

3.7.4 Desain Layout untuk Login Admin……………………...……22

3.7.5 Desain Layout untuk Register Siswa…………………………23

3.7.6 Desain Layout untuk Login Siswa…………………………….23

3.7.7 Desain Layout untuk Manage Data Siswa…………………….24

3.7.8 Desain Layout untuk Evaluasi………………………………...24

BAB IV IMPLEMENTASI DAN ANALISA…………...……………………....25

4.1 Implementasi…………………………………...……………………25

4.1.1 Implementasi Database………………………………………..25

4.1.2 Implementasi XML Quiz……………………………………...26

Page 11: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xi

4.1.3 Implementasi Aplikasi………………………………………...30

4.1.3.1 Halaman User…………………………………………30

4.1.3.2 Halaman Administrator………………………………..35

4.2 Analisa…………………………………………..……………….…..37

BAB V PENUTUP…………………….…………………………………………38

5.1 Kesimpulan…………………………………………………………..38

5.2 Saran………………………………………………………………....38

DAFTAR PUSTAKA……………………………………………………………39

Page 12: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xii

DAFTAR GAMBAR

Gambar 2.1 Struktur Linier……..……….…………...............................................6

Gambar 2.2 Struktur Menu ………..………………….…………………………..7

Gambar 2.3 Struktur Hierarki …………………….…….………………………...7

Gambar 2.4 Struktur Jaringan …………………….….…………………...………8

Gambar 2.5 Struktur Kombinasi ………………….……..………………………..8

Gambar 2.6 Tampilan XAMPP ………………….…………...……...……...........9

Gambar 3.1 Context Diagram Aplikasi Bahan Ajar Rangkaian Listrik…...…….14

Gambar 3.2 DFD Level 0 ………….……...…….…………….............................15

Gambar 3.3 DFD Level 1 Manage Data Soal ………..….………….…………...16

Gambar 3.4 ERD ………….……..…….………………..……………………….17

Gambar 3.5 Site Map Aplikasi ………....………….…………………………….20

Gambar 3.6 Layout Awal …...……………………………………………….…..21

Gambar 3.7 Layout Siswa ……………………………….……………………....21

Gambar 3.8 Layout Admin …………………….………...………………………22

Gambar 3.9 Layout Login Admin ………………………….…………….....…...22

Gambar 3.10 Layout Register Siswa …………………………………………….23

Gambar 3.11 Layout Login Siswa ………………..……………………………..23

Gambar 3.12 Layout Manage Data Siswa ……………………………...………..24

Gambar 3.13 Layout Evaluasi …………………………………………….……..24

Gambar 4.1 Tabel Admin …………..……………………………………………25

Page 13: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiii

Gambar 4.2 Tabel Siswa ………………………………..………………………25

Gambar 4.3 Halaman Home …………………….................................................30

Gambar 4.4 Halaman Deskripsi Singkat ……………………………………......31

Gambar 4.5 Halaman Standar Kompetensi ……………………………….…….31

Gambar 4.6 Halaman Jenis Materi …………………...……………………...….32

Gambar 4.7 Halaman About ……..………………………………………...……32

Gambar 4.8 Halaman Petunjuk ………………………………………………....33

Gambar 4.9 Halaman Register Siswa …………………………...………………33

Gambar 4.10 Halaman Materi ……………………………….…………...……..34

Gambar 4.11 Halaman Login Siswa ……………………………………………34

Gambar 4.12 Halaman Uji Kompetensi …………………………………….......35

Gambar 4.13 Halaman Home Administrator……………………………………35

Gambar 4.14 Halaman Manage Siswa…………………………………………..36

Page 14: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

xiv

Page 15: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

1

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Listrik adalah kondisi dari partikel subatomik tertentu, seperti elektron

dan proton, yang menyebabkan penarikan dan penolakan gaya di antaranya

sedangkan rangkaian listrik adalah susunan komponen-komponen elektronika

yang dirangkai dengan sumber tegangan menjadi satu kesatuan yang memiliki

fungsi dan kegunaan tertentu. Arus listrik dalam suatu rangkaian listrik hanya

dapat mengalir jika rangkaian listrik tersebut berada dalam keadaan terbuka.

Pada intinya listrik merupakan hal yang terpenting dan digunakan sehari-hari

dalam kehidupan, tanpa listrik mungkin dunia akan gelap gulita. Selain

digunakan dalam kehidupan sehari-hari, listrik juga dipelajari agar dapat

dikembangkan menjadi sesuatu yang lebih berguna lagi, oleh karena itu

muncul pelajaran tentang rangkaian listrik.Disamping itu listrik juga memiliki

berbagai macam bahaya yang mengancam nyawa.

Selain memiliki banyak manfaat, listrik juga memiliki banyak bahaya

jika kurang tepat dalam penggunaannya. Hal itu dapat terjadi karena

kurangnya pengetahuan tentang listrik yang disebabkan oleh kurangnya

pengenalan tentang rangkaian listrik dan kurangnya minat siswa-siswi smp

pada khususnya untuk semakin mengenal rangkaian listrik. Oleh karena itu

diperlukan sebuah media pengenalan yang mengena namun mudah

digunakan. Tetapi pengenalan tentang listrik itu sendiri tidak luput dari

berbagai kendala, karena tentunya akan membutuhkan suatu sistem yang

kompleks namun tetap user friendly.

Berdasarkan uraian diatas dapat dilihat bahwa rangkaian listrik

memegang peran penting bagi proses belajar mengajar dibidang pendidikan.

Maka sebaiknya diperkenalkan lebih dalam tentang rangkaian listrik pada

khususnya untuk siswa-siswi kelas IX SMP dengan menggunakan media

multimedia agar lebih menarik, karena bab tentang listrik memiliki banyak

kendala dan butuh penanganan yang lebih baik lagi. Dengan menggunakan

Page 16: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

2

media multimedia diharapkan akan membantu siswa-siswi smp dalam hal

pengenalan rangkaian listrik sehingga proses belajar mengajar akan lebih

efektif, efisien serta ramah pada berbagai kalangan.

1.2 Rumusan Masalah

Berdasarkan latar belakang masalah yang telah diuraikan diatas, maka

dapat dituliskan rumusan masalah sebagai berikut : Bagaimanakah membuat

bahan ajar interaktif untuk SMP “rangkaian listrik” berbasis Flash-XML ?

1.3 Batasan Masalah

Dalam pembuatan tugas akhir ini hanya akan membuat bahan ajar

interaktif smp “rangkaian listrik” berbasis Flash-XML secara efektif dan

efisien yang deskripsinya adalah bahan ajar interaktif untuk siswa SMP yang

telah disesuaikan dengan BSE (Buku Sekolah Elektronik) bab rangkaian

listrik dan diperuntukan untuk siswa-siswi kelas IX SMP.

1.4 Tujuan Penelitian

Tujuan dari adanya penelitian ini adalah untuk membuat sebuah aplikasi

bahan ajar interaktif SMP “rangkaian listrik” berbasis Flash-XML.

1.5 Manfaat Penelitian

Dengan adanya penelitian ini diharapkan proses belajar untuk mata

pelajaran IPA-Fisika khususnya bab rangkaian listrik berjalan lebih interaktif

dan lebih menarik minat belajar anak.

Page 17: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

3

1.6 Metodologi Penelitian

Metodologi penelitian yang digunakan untuk membuat proposal tugas

akhir ini adalah sebagai berikut :

1. Tahap Awal, meliputi :

a. Observasi lingkungan

Tahap observasi lingkungan merupakan tahap paling awal

dalam kegiatan penelitian ini. Pada tahap ini dilakukan

identifikasi permasalahan yang berhubungan dengan pengenalan

rangkaian listrik serta isu-isu sulitnya materi listrik untuk siswa-

siswi khususnya kelas IX SMP.

b. Pengumpulan data

Didalam proses pengumpulan data terdiri dari beberapa metode

yaitu :

1. Studi pustaka

Studi pustaka merupakan suatu metode yang dilakukan

dengan cara mencari buku-buku referensi serta tutorial yang

membahas mengenai cara pembuatan bahan ajar interaktif

rangkain listrik berbasis flash-XML.

2. Browsing

Browsing merupakan proses pencarian data dengan

menggunakan perantara koneksi internet. Browsing

digunakan untuk penambahan data atau sebagai pelengkap

didalam suatu pembahasan masalah.

2. Pembuatan Sistem

Tahapan ini digunakan untuk melakukan pembuatan sistem aplikasi

bahan ajar rangkaian listrik beberbasis flash-XML.

a. Tahap pembuatan aplikasi sistem aplikasi bahan ajar rangkaian

listrik beberbasis flash-XML, meliputi :

1. Perancangan basis data

Perancangan basis data akan menjelaskan tentang tabel apa

saja yang diperlukan dan tipe data dari masing-masing tabel

Page 18: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

4

yang digunakan serta bagaimana relasi tabel yang dapat

terjadi.

2. Perancangan sistem

Perancangan sistem akan menjelaskan bagaimana sistem

bekerja untuk memperoleh data input menjadi data output

berdasarkan fungsi-fungsi yang telah direncanakan.

3. Perancangan desain aplikasi user

Digunakan untuk merancang desain aplikasi untuk user

sebelum melakukan proses pembuatan aplikasi user. Ini

diperlukan agar aplikasi yang dibuat dapat terstruktur dengan

baik.

4. Perancangan desain aplikasi admin

Digunakan untuk merancang desain aplikasi untuk admin

sebelum melakukan proses pembuatan aplikasi admin. Ini

diperlukan agar aplikasi yang dibuat dapat terstruktur dengan

baik.

5. Pembuatan aplikasi untuk user

Tahap ini merupakan tahap pengimplementasian aplikasi user

secara nyata.Pembuatan aplikasi ini menggunakan Adobe

Flash, XML, PHP dan MySQL.

6. Pembuatan aplikasi untuk admin

Tahap ini merupakan tahap pengimplementasian aplikasi

admin secara nyata.Pembuatan aplikasi ini menggunakan

Adobe Flash, XML, PHP dan MySQL.

3. Tahap uji coba

Tahapan ini digunakan untuk melakukan pengujian sistem agar

sistem yang dioperasikan terbebas dari kesalahan yang dapat

muncul.Tujuan utama dari tahapan ini adalah untuk memastikan

bahwa elemen dari sistem berfungsi sesuai dengan yang

diharapkan.Apabila sistem aplikasi yang telah dibentuk masih

dianggap kurang layak, maka harus dilakukan perbaikan agar sistem

Page 19: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

5

aplikasi yang dibentuk lengkap dan akurat. Sistem yang telah

diperbaiki akan diuji kembali sampai sistem itu lengkap dan akurat

serta dengan layak dapat untuk digunakan.

a. Tahap kesimpulan dan saran

Tahap ini berisi kesimpulan mengenai semua tahapan yang telag

dilalui serta saran yang berkenaan dengan hasil yang sudah

dicapai.

1.7 Sistematika Penulisan

Dalam laporan ini terdapat 5 bab yang masing-masing akan

diuraikan secara singkat dalam sistematika penulisan sebagai berikut :

a. BAB I PENDAHULUAN

Bab ini merupakan bab awal dalam laporan penelitian ini. Bab

ini berisi latar belakang masalah, perumusan masalah, batasan

masalah, tujuan dan manfaat, metodologi penelitian serta

sistematika penulisan

b. BAB II LANDASAN TEORI

Bab ini memuat tinjauan pustaka, teori-teori yang disajikan

dalam landasan teori hanyalah yang mendukung pembuatan

bahan ajar interaktif smp “rangkaian listrik” berbasis flash-xml

c. BAB III DESAIN DAN PERANCANGAN

Bab ini memuat data-data yang diperlukan dalam perancangan

sistem, yaitu context diagram, data flow diagram, desain

database, dan desain tampilan

d. BAB IV IMPLEMENTASI DAN ANALISA

Bab ini berisi tentang langkah dan hasil analisa yang disajikan

dalam bentuk tabel, gambar, dan keterangannya.

e. BAB V PENUTUP

Bab ini berisi kesimpulan dan saran.

Page 20: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

6

BAB II

LANDASAN TEORI

2.1 Pengertian Multimedia

Multimedia bukanlah hal baru, sudah digunakan bahkan sebelum

komputer menampilkan presentasi atau penyajian yang menggunakan

berbagai macam cara. Pada awal 1990, multimedia berarti kombinasi dari

teks dan dokumen image. Menurut Hofstetter (2001) multimedia dalam

konteks komputer adalah: pemanfaatan komputer untuk membuat dan

menggabungkan teks, grafik, audio, video, dengan menggunakan tool yang

memungkinkan pemakai berinteraksi, berkreasi, dan berkomunikasi.

Multimedia terdiri dari beberapa objek, yaitu teks, image, animasi, audio,

video dan link interaktif

(Sutopo.2003 : 3-11)

2.2 STRUKTUR NAVIGASI

Struktur navigasi merupakan alat bantu untuk merancang aliran

aplikasi multimedia. Ada beberapa cara yang digunakan dalam mendesain

aliran aplikasi multimedia, diantaranya adalah struktur linier, struktur

menu, struktur hierarki, struktur jaringan dan struktur kombinasi.

(Sutopo.2007)

1. Struktur Linear

Struktur yang paling sederhana dalam mendesain aliran aplikasi

multimedia adalah struktur linier. Dalam menampilkan aplikasi

multimedia dapat maju (next) dan mundur (back), jika mouse di klik

akan menampilakan isi informasi dan aplikasi multimedia tersebut

dan bila di klik lagi akan muncul pada halaman berikutnya. Skema

dari struktur linier dapat dilihat seperti Gambar 2.1

Gambar 2.1 Struktur Linier

Page 21: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

7

2. Struktur Menu

Struktur kedua untuk merancang aliran apalikasi multimedia

adalah dengan struktur menu.Objek dalam menu dapat diwujudkan

dalam garis-garis hypertext, grafik, audio, video, dan animasi atau

kombinasi dari semua objek tersebut. Skema dari struktur hirarki

dapat dilihat pada Gambar 2.2

Gambar 2.2 Struktur Menu

3. Struktur Hierarki

Struktur hierarki merupakan struktur seperti tangga atau pohon,

dimana masing-masing objek menyediakan sebuah pilihan yang

memeliki lebih banyak menu dengan lebih banyak pilihan. Tidak

ada batas ukuran atau jumlah menu dan sub menu yang dapat

dimiliki dalam sebuah struktur hirarki. Skema dapat dilihat pada

Gambar 2.3

Gambar 2.3 Struktur Hierarki

Page 22: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

8

4. Struktur Jaringan

Bentuk struktur jaringan merupakan desain yang paling

kompleks dengan banyak objek dalam setiap arah pada setiap objek

dalam aplikasi multimedia. Skema dari struktur jaringan dapat

dilihat pada Gambar 2.4

Gambar 2.4 Struktur Jaringan

5. Struktur Kombinasi

Struktur kombinasi merupakan struktur navigasi yang

mengkombinasikan struktur-struktur yang ada. Skema dari struktur

kombinasi dapat dilihat pada Gambar 2.5

Gambar 2.5 Struktur Kombinasi

Page 23: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

9

2.3 XAMPP

XAMPP merupakan paket PHP berbasis open source yang

dikembangkan oleh sebuah komunitas open source. Dengan

menggunakan XAMPP pengguna tidak perlu lagi melakukan

penginstalan paket-paket pendukung pengerjaan PHP seperti

Interpreter PHP, Web server, dan database MySQL karena didalam

XAMPP telah disediakan paket-paket seperti Apache, MySQL,

FileZilla FTP Server, phpMyAdmin dan lain-lain.(Nugroho.2008).

Gambar 2.6 Tampilan XAMPP

2.4 PHP

PHP memiliki beberapa pandangan dalam mengartikannya, akan

tetapi kurang lebih PHP dapat kita ambil arti sebagai PHP : Hypertext

Preeprocessor. Ini merupakan bahasa yang hanya dapat berjalan pada

server dan hasilnya dapat ditampilkan pada Client.PHP adalah produk

Open Source yang dapat digunakan secara gratis tanpa harus membayar

untuk menggunakannya.

PHP merupakan bahasa standar yang digunakan dalam dunia Web

site, PHP adalah bahasa program yang berbentuk skrip yang diletakkan

didalam server web. Jika kita lihat dari sejarah mulanya PHP diciptakan

dari ide Rasmus Lerdof untuk kebutuhan pribadinya, skrip tersebut

sebenarnya dimaksudkan untuk digunakan sebagai keperluan membuat

Web site pribadi, akan tetapi kemudian dikembangkan lagi sehingga

Page 24: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

10

menjadi sebuah bahasa yang disebut “Personal Home Page”, inilah awal

mula munculnya PHP sampai saat ini. (Nugroho.2008).

2.5 ACTION SCRIPT

Pemograman dengan ActionScript dapat digunakan untuk

pembuatan visualisasi di segala bidang terutama apalikasi interaktif

berbasis web.ActionScript adalah pemograman visual berorientasi objek.

Seperti JavaScript, ActionScript mempunyai sintaks, tata bahasa dan

struktur mirip dengan bahasa pemograman C++.

ActionScript mempunyai beberapa komponen, seperti predefined

object dan fungsi. ActionScipt mempunyai sintaks, keywords, operator dan

variable untuk menyimpan dan mengambil informasi.European Computers

Manufacture Association (ECMA) membuat dokumen ECMA-262 yang

diambil dari JavaScript, dan ECMA-262 menjadi spesifikasi

ActionScript.ActionScript merupakan bahasa pemograman (scripting)

yang digunakan dalam Macromedia Flash. Penggunanna ActionScript

mempunyai tujuan:

Memberikan kebebasan berkreasi bagi desainer

Membuat animsi interaktif

Dapat menampilkan animasi tertentu (non linier)

(Sutopo.2007: 19 - 20)

2.6 Basis Data

a. Operasi Dasar Basis Data

Di dalam sebuah disk, basis data dapat diciptakan dan dapat pula

ditiadakan.Di dalam sebuah disk, kita dapat pula menempatkan

beberapa (lebih dari satu) basis data.Sementara dalam sebuah basis

data, kita dapat menempatkan satu atau lebih file/tabel.Pada file/tabel

inilah sesungguhnya data disimpan/ditempatkan.Setiap basis data

umumnya dibuat untuk mewakili sebuah semesta data yang spesifik.

Karena itu, operasi-operasi dasar yang dapat kita lakukan berkenaan

dengan basis data dapat meliputi :

Page 25: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

11

1. Pembuatan basis data baru (create database), yang identik dengan

pembuatan lemari arsip yang baru.

2. Penghapusan basis data (drop database), yang identik dengan

perusakan lemari arsip (sekaligus beserta isinya, jika ada).

3. Pembuatan file/tabel baru ke suatu basis data (create tabel), yang

identik dengan penambahan map arsip baru ke sebuah lemari arsip

yang telah ada.

4. Penghapusan file/tabel dari suatu basis data (drop tabel), yang

identik dengan perusakan map arsip lama yang ada di sebuah

lemari arsip.

5. Penambahan/pengisisan data baru ke sebuah file/tabel di sebuah

basis data (insert), yang identik dengan penambahan lembaran

arsip ke sebuah map arsip.

6. Pengambilan data dari sebuah file/tabel (retrieve/search), yang

identik dengan pencarian lembaran arsip dari sebuah map arsip.

7. Pengubahan data dari sebuah file/tabel (update), yang identik

dengan perbaikan isi lembaran arsip yang ada di sebuah map arsip.

8. Penghapusan data dari sebuah file/tabel (delete), yang identik

dengan penghapusan sebuah lembaran arsip yang ada di sebuah

map arsip.

Operasi yang berkenaan dengan pembuatan objek (basis data dan

tabel) merupakan operasi awal yang hanya dilakukan sekali dan

berlaku seterusnya. Sedang operasi-operasi yang berkaitan dengan isi

tabel (data) merupakan operasi rutin yang akan berlangsung berulang-

ulang dan arena itu operasi-operasi inilah yang lebih tepat mewakili

aktivitas pengelolaan (management) dan pengolahan (processing) data

dalam basis data.

Secara singkat, pemanfaatan basis data dilakukan utnuk memenuhi

sejumlah tujuan (objektif) seperti berikut ini :

1. Kecepatan dan kemudahan (speed)

2. Efisiensi ruang penyimpanan (space)

Page 26: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

12

3. Keakuratan (accuracy)

4. Ketersediaan (availability)

5. Kelengkapan (completeness)

6. Keamanan (security)

7. Kebersamaan pemakaian (sharability)

(Fathansyah.1999)

b. Keuntungan Basis Data

Penyusunan suatu basis data digunakan untuk mengatasi

permasalahan-permasalahan pada saat pengolahan data. Basis data

yang dikembangkan dengan benar, sesuai dengan batasan/kaidah basis

data akan memberikan beberapa keuntungan, yaitu :

1. Kerangkapan data dapat diminimalkan

2. Inkonsistensi data dapat dihindari

3. Data dalam basis data dapat digunakan secara bersama (multiuser)

4. Standarisasi data dapat dilakukan

5. Pembatasan untuk keamanan data dapat diterapkan

6. Integritas data dapat dipelihara

7. Perbedaan kebutuhan data dapat diseimbangkan

(Sutanta. 2004)

2.7 MySQL

MySQL (My Structured Query Language) atau yang biasa dibaca

mai-sekuel adalah sebuah program pembuat dan pengelola database atau

yang sering disebut dengan DBMS (DataBase Management System), sifat

dari DBMS ini adalah Open Source dan bisa didapatkan secara gratis pada

alamat http://www.mysql.com.

MySQL sebenarnya produk yang berjalan pada platform Linux,

dengan adanya perkembangan dan banyaknya pengguna serta lisensi dari

database ini adalah Open Source, maka para pengembangnya kemudian

merilis versi Windows.Selain itu MySQL juga merupakan program

pengakses database yang bersifat jaringan, sehingga dapat digunakan

untuk aplikasi Multi User (Banyak Pengguna). Kelebihan lain dari

Page 27: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

13

MySQL adalah menggunakan bahasa query (permintaan) standar SQL

(Structured Query Language). SQL adalah suatu bahasa permintaan yang

terstruktur, SQL telah distandarkan untuk semua program pengakses

database seperti Oracle, PosgreSQL, SQL Server, dan lain-

lain.(Nugroho.2008)

2.8 XML

XML kependekan dari eXtensible Markup Language,

dikembangkan mulai tahun 1996 dan mendapatkan pengakuan dari W3C

pada bulan Februari 1998. Teknologi yang digunakan pada XML

sebenarnya bukan teknologi baru, tapi merupakan turunan dari SGML yang

telah dikembangkan pada awal 80-an dan telah banyak digunakan pada

dokumentasi teknis proyek-proyek berskala besar. Ketika HTML

dikembangkan pada tahun 1990, para penggagas XML mengadopsi bagian

paling penting pada SGML dan dengan berpedoman pada pengembangan

HTML menghasilkan markup language yang tidak kalah hebatnya dengan

SGML.

Seperti halnya HTML, XML juga menggunakan elemen yang

ditandai dengan tag pembuka (diawali dengan „<‟ dan diakhiri dengan „>‟),

tag penutup(diawali dengan „</ „diakhiri „>‟) dan atribut elemen(parameter

yang dinyatakan dalam tag pembuka misal <form name=”isidata”>). Hanya

bedanya, HTML medefinisikan dari awal tag dan atribut yang dipakai

didalamnya, sedangkan pada XML kita bisa menggunakan tag dan atribut

sesuai kehendak kita. (Anonim 1, 2012)

Page 28: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

14

BAB III

DESAIN DAN PERANCANGAN SISTEM

Pembuatan aplikasi bahan ajar rangkaian listrik ini diawali dengan pembuatan

rancangan sistem yang diwujudkan dengan perancangan Context Diagram, Data

Flow Diagram, dan Entity Relationship Diagram.

3.1 Context Diagram(CD)

Context Diagram aplikasi dapat dilihat pada Gambar 3.1

Gambar 3.1 Context Diagram Aplikasi Bahan Ajar Rangkaian Listrik

Terdapat dua aktor yang berperan didalam aplikasi ini, yaitu guru dan

siswa. Admin merupakan guru mata pelajaran Fisika yang mengelola

seluruh sirkulasi data didalam aplikasi. Siswa merupakan siswa kelas

IX Sekolah Menengah Pertama.

Page 29: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

15

3.2 Data Flow Diagram (DFD)

3.2.1 Data Flow Diagram (DFD) Level 0

Data Flow Diagram Level 0 aplikasi dapat dilihat pada Gambar 3.2

Gambar 3.2 DFD Level 0

Admin langsung mendapatkan username dan password untuk login.

Setelah itu admin dapat mengelola data siswa dan data soal. Siswa

melakukan registrasi dahulu untuk melihat materi, kemudian login

untuk mengerjakan soal-soal evaluasi serta mendapatkan nilai dari

hasil evaluasi

Page 30: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

16

3.2.2 Data Flow Diagram (DFD) Level 1 Manage Data Soal

Data Flow Diagram Level 1 Manage Data Soal untuk aplikasi ini dapat

dilihat pada Gambar 3.3

Gambar 3.3 DFD Level 1 Manage Data Soal

Pada proses manage data soal, admin dapat melihat, mengedit,

menambah, dan menghapus data soal . Admin melakukan proses ini

melalui file XML karena soal-soal dalam aplikasi ini terletak pada file

XML.

Page 31: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

17

3.3 Entity Relationship Diagram (ERD)

ERD untuk aplikasi bahan ajar Rangkaian Listrik dapat dilihat pada

Gambar 3.4

Gambar 3.4 ERD

Page 32: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

18

3.4 Rancangan Database

Database merupakan elemen penting yang digunakan untuk menyimpan

seluruh data dari sistem. Dalam pembuatan aplikasi ini, rancangan database yang

dibuat adalah sebagai berikut :

3.4.1 Tabel Admin

Nama tabel : admin

Fungsi : menyimpan data admin

Primary key : id

Foreign key : id_siswa

Tabel 3.1 Tabel Admin

Field Type Null Ket

id varchar(10) no Id admin

username varchar(20) no Username

pass varchar(10) no Password

3.4.2 Tabel Siswa

Nama tabel : siswa

Fungsi : menyimpan data siswa

Primary key : id_siswa

Tabel 3.3 Tabel Siswa

Field Type Null Ket

id_siswa varchar(8) no id siswa

nickname varchar(20) no username

pass varchar(20) no password

date date yes tanggal

Page 33: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

19

3.5 Document Type Definition (DTD) XML Quiz

Dalam pembuatan aplikasi ini, soal yang dibuat adalah sebagai berikut :

<?xml version="1.0"?>

<!DOCTYPE quiz [

<!ELEMENT quiz (title, items)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT items (item)+>

<!ELEMENT item (question, answer, answer+)>

<!ELEMENT question (#PCDATA)>

<!ELEMENT answer (#PCDATA)>

<!ATTLIST answer correct (y) #IMPLIED>

]>

<quiz>

<title>The Quiz</title>

<numberOfQuestionsToDisplay>5</numberOfQuestionsToDisplay>

<items>

<item>

<question>Untuk memindahkan 10 coulomb muatan listrik dari A ke B

diperlukan energi 50 joule. Beda potensial antara A dan B adalah</question>

<answer correct="y">5 volt</answer>

<answer>50 volt</answer>

<answer>0.2 volt</answer>

<answer>500 volt</answer>

</item>

……………

<item><question>Sebuah kawat penghantar memiliki panjang L dan luas

penampang A dan memiliki hambatan 120 ohm. Jika kawat dengan bahan yang

Page 34: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

20

sama memiliki panjang 2 L dan luas penampang 3 A, tentukan hambatan kawat

kedua ini! </question>

<answer>50 ohm</answer>

<answer>100 ohm</answer>

<answer correct="y">80 ohm</answer>

<answer>30 ohm</answer>

</item>

</items>

</quiz>

3.6 Site Map

Site Map adalah peta situs yang menjelaskan struktur dari menu yang ada

dalam sistem. Pada aplikasi ini dapat digambarkan sebagai berikut :

Gambar 3.5 Site Map Aplikasi

Page 35: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

21

3.7 Struktur dan Desain

3.7.1 Desain Layout untuk Halaman Awal

Desain Layout untuk halaman Awal ditunjukkan pada Gambar 3.6

Gambar 3.6 Layout Awal

3.7.2 Desain Layout untuk Halaman Siswa

Desain Layout untuk halaman Siswa ditunjukkan pada Gambar 3.7

Gambar 3.7 Layout Siswa

Page 36: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

22

3.7.3 Desain Layout untuk Halaman Admin

Desain Layout untuk halaman Admin ditunjukkan pada Gambar 3.8

Gambar 3.8 Layout Admin

3.7.4 Desain Layout untuk Login Admin

Desain Layout untuk login admin ditunjukkan pada Gambar 3.9

Gambar 3.9 Layout Login Admin

Page 37: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

23

3.7.5 Desain Layout untuk Register Siswa

Desain Layout untuk register siswa ditunjukkan pada Gambar 3.10

Gambar 3.10 Layout Register Siswa

3.7.6 Desain Layout untuk Login Siswa

Desain Layout untuk login siswa ditunjukkan pada Gambar 3.11

Gambar 3.11 Layout Login Siswa

Page 38: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

24

3.6.7 Desain Layout untuk Manage Data Siswa

Desain Layout untuk manage data siswa ditunjukkan pada Gambar 3.12

Gambar 3.12 Layout Manage Data Siswa

3.6.8 Desain Layout untuk Evaluasi

Desain Layout untuk evaluasi siswa ditunjukkan pada Gambar 3.13

Gambar 3.13 Layout Evaluasi

Page 39: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

25

BAB IV

IMPLEMENTASI DAN ANALISA

4.6.8 Implementasi

4.1.1 Implementasi Database

a. Tabel Admin

Tabel admin berisi id, username, dan password yang digunakan admin

untuk login. Tabel admin ditunjukkan pada gambar 4.1

Gambar 4.1 Tabel Admin

b. Tabel Siswa

Tabel siswa berisi data-data siswa yang telah registrasi untuk melihat

materi dan mengerjakan evaluasi. Tabel siswa ditunjukkan pada gambar

4.2

Gambar 4.2 Tabel Siswa

Page 40: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

26

4.1.2 Implementasi XML Quiz

Berikut adalah file XML yang berisi soal-soal evaluasi bagi siswa :

<?xml version="1.0"?>

<!DOCTYPE quiz [

<!ELEMENT quiz (title, items)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT items (item)+>

<!ELEMENT item (question, answer, answer+)>

<!ELEMENT question (#PCDATA)>

<!ELEMENT answer (#PCDATA)>

<!ATTLIST answer correct (y) #IMPLIED>]>

<quiz>

<title>The Quiz</title>

<numberOfQuestionsToDisplay>5</numberOfQuestionsToDisplay>

<items>

<item>

<question>Untuk memindahkan 10 coulomb muatan listrik dari A ke B

diperlukan energi 50 joule. Beda potensial antara A dan B adalah</question>

<answer correct="y">5 volt</answer>

<answer>50 volt</answer>

<answer>0.2 volt</answer>

<answer>500 volt</answer>

</item>

<item>

<question>Sebuah rangkaian tertutup dengan sumber arus 12V menghasilkan arus

listrik 400 mA. Hambatan listrik rangkaian tersebut adalah</question>

<answer>48 ohm</answer>

<answer correct="y">30 ohm</answer>

Page 41: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

27

<answer>33 ohm</answer>

<answer>3 ohm</answer>

</item>

<item>

<question>Sumber listrik sebesar 6 V menghasilkan arus listrik 0,5 A selama 1

menit. Energi dan daya listrik rangkaan itu adalah</question>

<answer>180 joule dan 2 watt</answer>

<answer correct="y">180 joule dan 3 watt</answer>

<answer>100 joule dan 3 watt</answer>

<answer>80 joule dan 3 watt</answer>

</item>

<item>

<question>Sebuah lampu dipasang pada tegangan 220 volt dan menghasilkan kuat

arus listrik sebesar 0,25 A. Berapa daya lampu tersebut</question>

<answer>60 watt</answer>

<answer>30 watt</answer>

<answer>50 watt</answer>

<answer correct="y">55 watt</answer>

</item>

<item>

<question>Budi membeli lampu bertuliskan 220 volt, 100 watt, perkirakan

hambatan yang dimiliki lampu tersebut adalah</question>

<answer correct="y">484 ohm</answer>

<answer>22 ohm</answer>

<answer>50 ohm</answer>

<answer>120 ohm</answer>

</item>

<item>

Page 42: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

28

<question>Anto membeli lampu dengan spesifikasi 220 volt, 100 watt dan lampu

dipasang pada tegangan 110 volt, berapakah daya lampu saat

menyala?</question>

<answer correct="y">25 watt</answer>

<answer>484 ohm</answer>

<answer>120 ohm</answer>

<answer>50 ohm</answer>

</item>

<item>

<question>Muatan sebesar 360 C mengalir dalam dua menit dalam suatu

rangkaian. Kuat arus rangkaian listrik tersebut adalah</question>

<answer>2 ampere</answer>

<answer>5 ampere</answer>

<answer>7.2 ampere</answer>

<answer correct="y">3 ampere</answer>

</item>

<item>

<question>Dalam waktu dua menit arus listrik sebesar 2 A mengalir sepanjang

kawat penghantar. Berapa muatan yang berpindah</question>

<answer correct="y">240 coulomb</answer>

<answer>30 coulomb</answer>

<answer>120 coulomb</answer>

<answer>80 coulomb</answer>

</item>

<item>

<question>Sebuah rumah terdapat 4 lampu 20 W, 2 lampu 10 W, 3 lampu 40 W

yang menyala 5 jam setiap hari. Jika harga listrik per kWh Rp 500,00, maka biaya

yang harus dibayar dalam 30 hari</question>

<answer>Rp 25.000,00</answer>

Page 43: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

29

<answer>Rp 20.000,00</answer>

<answer correct="y">Rp 16.500,00</answer>

<answer>Rp 15.000,00</answer>

</item>

<item><question>Sebuah kawat penghantar memiliki panjang L dan luas

penampang A dan memiliki hambatan 120 ohm. Jika kawat dengan bahan yang

sama memiliki panjang 2 L dan luas penampang 3 A, tentukan hambatan kawat

kedua ini! </question>

<answer>50 ohm</answer>

<answer>100 ohm</answer>

<answer correct="y">80 ohm</answer>

<answer>30 ohm</answer>

</item>

</items>

</quiz>

Page 44: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

30

4.1.3 Implementasi Aplikasi

4.1.3.1 Halaman User

a. Halaman Home

Tampilan Halaman Home yang merupakan tampilan awal halaman user

dapat dilihat pada gambar 4.3.

Gambar 4.3 Halaman Home

Page 45: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

31

b. Halaman Deskripsi Singkat

Tampilan Halaman Deskripsi Singkat dapat dilihat pada gambar 4.4.

Halaman Deskripsi Singkat berisi gambaran singkat aplikasi.

Gambar 4.4 Halaman Deskripsi Singkat

c. Halaman Standar Kompetensi

Tampilan Halaman Standar Kompetensi dapat dilihat pada gambar 4.5.

Halaman Standar Kompetensi berisi target pencapaian yang harus dipenuhi

oleh siswa setelah mendapatkan materi.

Gambar 4.5 Halaman Standar Kompetensi

Page 46: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

32

d. Halaman Jenis Materi

Tampilan Halaman Jenis Materi dapat dilihat pada Gambar 4.6. Halaman

Materi berisi jenis-jenis materi yang ada di dalam aplikasi.

Gambar 4.6 Halaman Jenis Materi

e. Halaman About

Tampilan Halaman About dapat dilihat pada Gambar 4.7. Halaman ini

berisi biodata pembuat aplikasi

Gambar 4.7 Halaman About

Page 47: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

33

f. Halaman Petunjuk

Halaman Petunjuk dapat dilihat pada gambar 4.8. Halaman petunjuk berisi

petunjuk penggunaan aplikasi.

Gambar 4.8 Halaman Petunjuk

g. Halaman Register Siswa

Halaman Register Siswa digunakan untuk registrasi siswa sebelum melihat

materi. Halaman Register Siswa dapat dilihat pada gambar 4.9.

Gambar 4.9 Halaman Register Siswa

Page 48: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

34

h. Halaman Materi

Halaman Materi dapat dilihat pada gambar 4.10. Halaman Materi berisi

materi-materi dan simulasi bab rangkaian listrik.

Gambar 4.10 Halaman Materi

i. Halaman Login Siswa

Halaman Login Siswa dapat dilihat pada gambar 4.11. Halaman ini

digunakan untuk login siswa sebelum mengerjakan uji kompetensi.

Gambar 4.11 Halaman Login Siswa

Page 49: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

35

j. Halaman Uji Kompetensi

Halaman Uji Kompetensi dapat dilihat pada gambar 4.12. Halaman Uji

Kompetensi berisi evaluasi materi-materi yang telah diterima oleh siswa.

Gambar 4.12 Halaman Uji Kompetensi

4.1.3.2 Halaman Administrator

a. Halaman Home Administrator

Tampilan Halaman Home Administrator dapat dilihat pada Gambar 4.13

Gambar 4.13 Halaman Home Administrator

Page 50: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

36

b. Halaman Manage Siswa

Tampilan Halaman Manage Siswa dapat dilihat pada Gambar 4.14.

Halaman ini digunakan admin untuk mengelola data siswa yang telah

mengikuti evaluasi.

Gambar 4.14 Halaman Manage Siswa

Page 51: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

37

4.2 Analisa

Aplikasi Bahan Ajar Interaktif Rangkaian Listrik ini pada dasarnya adalah

berupa kumpulan informasi dan alat pengolah data dalam format otomatisasi

dengan tujuan mempermudah guru dalam menyampaikan materi dan evaluasi

mata pelajaran IPA Fisika khususnya bab Rangkaian Listrik.

Fitur yang diberikan yaitu materi yang telah disesuaikan dengan

kurikulum yang ditampilakan secara menarik dan disertai simulasi beserta soal-

soal evaluasi yang akan membantu siswa dalam mengukur sejauh mana

pemahaman mereka terhadap materi yang telah disediakan. Guru dapat

mengupdate soal-soal yang ada sesuai dengan keinginan dan guru mendapatkan

hasil evaluasi siswa berupa nilai.

Kelebihan aplikasi ini terletak pada tampilan yang menarik dan

interaktif.Selain itu aplikasi ini bersifat otomatis sehingga mempermudah guru

dalam mengolah data-data yang ada. Sedangkan kekurangan aplikasi ini terletak

pada materi dan simulasi yang masih statis sehingga guru tidak dapat menambah

materi atau simulasi baru.

Page 52: PEMBUATAN BAHAN AJAR INTERAKTIF SMP - …... · digital untuk semua komputer. ... meliputi materi tentang rangkaian ... Desain Layout untuk Register Siswa………………………

perpustakaan.uns.ac.id digilib.uns.ac.id

commit to user

38

BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan hasil analisis yang penulis lakukan, dapat ditarik kesimpulan

:telah dibuat aplikasi bahan ajar interaktif dengan fasilitas materi listrik yang

sesuai dengan kurikulum yang ditampilkan semenarik mungkin dan disertai

simulasi beserta soal-soal evaluasi yang akan membantu siswa dalam mengukur

sejauh mana pemahaman mereka terhadap materi yang telah disediakan. Guru

dapat mengupdate soal-soal yang ada sesuai dengan keinginan dan guru

mendapatkan hasil evaluasi siswa berupa nilai.

5.2 Saran

Saran-saran yang dapat disampaikan adalah diharapkan hasil Tugas Akhir

yang telah dibuat dapat menjadi tambahan referensi bagi perpustakaan Fakultas

Matematika dan Ilmu Pengetahuan serta perlu dikembangkan lagi ke dalam

aplikasi smartphone dan menggunakan HTML 5 untuk pengembangan yang lebih

baik.