PUTRI HARDIANTI KUMALA M3209069

(1)

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

commit to user

i

PEMBANGUNAN WEB-BASED LEARNING BIOLOGI SEBAGAI

SARANA PEMBELAJARAN INTERAKTIF

TUGAS AKHIR

Diajukan untuk memenuhi salah satu syarat mencapai gelar Ahli Madya Program Diploma III Teknik Informatika

Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret

OLEH :

PUTRI HARDIANTI KUMALA

M3209069

TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

(2)

commit to user

ii 2012

HALAMAN PERSETUJUAN

PEMBANGUNAN WEB-BASED LEARNING BIOLOGI SEBAGAI

Disusun Oleh :

PUTRI HARDIANTI KUMALA

NIM. M3209069

Tugas Akhir ini disetujui untuk dipresentasikan

pada Ujian TA

pada tanggal 27 Juni 2012

Pembimbing Utama

Drs. YS Palgunadi, M.Sc

(3)

commit to user

iii

HALAMAN PENGESAHAN

PEMBANGUNAN WEB-BASED LEARNING BIOLOGI SEBAGAI

Disusun Oleh :

PUTRI HARDIANTI KUMALA NIM. M3209069

Dibimbing oleh : Pembimbing Utama

Drs. YS Palgunadi, M.Sc NIP. 19560407 198303 1 004

Tugas Akhir ini telah diterima dan disahkan Oleh dewan penguji Tugas Akhir Program Diplom III Teknik Informatika

Pada hari Rabu tanggal 27 Juni 2012

Dewan Penguji

1. Drs. YS Palgunadi, M.Sc ( )

NIP. 19560407 198303 1 004

2. Muh. A. Safi’ie, S.Si ( )

NIDN.0603118103

3. Meiyanto Eko Sulistyo,S.T,M.Eng ( )

NIP. 19770513 200912 1 004

Disahkan Oleh Dekan

Fakultas MIPA UNS

(4)

commit to user

iv

Prof.Ir. Ari Handono Ramelan M.Sc(Hons),Ph.D. NIP. 19610223 198601 1 001

Drs. YS Palgunadi, M.Sc NIP. 19560407 198303 1 004 ABSTRACT

Putri Hardianti Kumala, 2012. DEVELOPING BIOLOGY WEB-BASED LEARNING AS INTERACTIVE LEARNING F ACILITY. DIII Informatic

Enginering, Faculty of Mathematics and Sains, Sebelas Maret University

Surakarta.

Web based Learning is along distance learning application system using

internet interactively. Learning method with this application resolves the

problems come with the conventional learning problem such as limited time

available to the teachers and students in discussing at a classroom.The

development of technology that has advanced rapidly can drive the use of

technology to conduct the learning process . The aim of this final project is to

developed a web-based learning as an interactive media study tipically in biology

for senior high school.

The analytical method used in the design and application development

web based learning can be developed by building CD,DFD, and the program is

developed by PHP programming language, Javascript.The databse is managed by

MySQL.

It can be concluded that the web based learning applicaton system can be

use to facilitate to teachers and students for communication, accessing material,

delivering assignments, conducting quizzes , and scoring test.

Keyword : Application System, Biology, PHP, Senior High School ,Web based

(5)

commit to user

v ABSTRAK

Putri Hardianti Kumala, 2012. PEMBANGUNAN WEB-BASED LEARNING BIOLOGI SEBAGAI SARANA PEMBELAJARAN INTERAKTIF. DIII

Teknik Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta.

Web Based Learning merupakan sistem aplikasi pembelajaran jarak jauh yang memanfaatkan media online internet. Metode pembelajaran dengan aplikasi ini memberikan solusi pada permasalahan yang timbul pada pembelajaran konvensional seperti keterbatasan waktu bagi para pengajar dan pelajar diruang kelas. Perkembangan teknologi yang telah maju dengan pesat dapat membantu proses belajar mengajar. Tujuan dari tugas akhir ini adalah membangun web based learning sebagai sarana pembelajaran interaktif bagi Sekolah Menengah Atas.

Metode analisis yang digunakan dalam perancangan dan pembangunan aplikasi web based learning adalah membuat CD dan DFD, dan programnya menggunakan bahasa pemrograman PHP, javascript dan databasenya menggunakan MySQL.

Dapat disimpulkan bahwa aplikasi web based learning ini memberikan fasilitas guru dan siswa dalam berkomunikasi, pemberian materi, ujian, dan informasi nilai.

(6)

commit to user

vi MOTTO

Hidup adalah sebuah perjuangan. Tak ada kata menyerah dalam

menghadapi segala sesuatu sesulit apapun. Semangat yang tak terbatas

waktu dan kondisi, keyakinan, dan doa adalah kunci untuk sebuah

(7)

commit to user

vii

HALAMAN PERSEMBAHAN

Karya ini dipersembahkan untuk :

1. Ayah dan Ibu tersayang

2. Adikku tercinta

3. Seluruh keluarga yang selalu memberi dukungan

4. Semua sahabat dan temn-teman terbaikku

(8)

commit to user

viii

KATA PENGANTAR

Segala puji syukur kehadiran Allah SWT atas rahmatNya, penulis dapat

menyelesaikan penulisan laporan TA dengan judul ” PEMBANGUNAN

WEB-BASED LEARNING BIOLOGI SEBAGAI SARANA PEMBELAJARAN INTERAKTIF”.

Laporan Tugas Akhir ini disusun untuk memenuhi persyaratan kelulusan Diploma III Ilmu Komputer Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta. Dalam penyusunan laporan ini penulis mendapatkan banyak bantuan dari berbagai pihak. Untuk itu penulis ucapkan banyak terimakasih khususnya kepada :

1. Ir. Ari Handono Ramelan M.Sc,Ph.D selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta.

2. Bapak Y.S. Palgunadi, M.Sc selaku Ketua Program Studi DIII Ilmu Komputer Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta dan selaku dosen pembimbing Tugas Akhir (TA), yang telah memberikan banyak masukan dan arahan dalam penyelesaian Tugas Akhir ini.

3. Bapak Muh.A.Safi’ie,S.Si se dan Bapak Meiyanto Eko Sulistyo, S.T,M.Eng

selaku penguji yang telah memberikan banyak saran.

4. Kedua orang tua, adik penulis serta segenap keluarga yang penulis cintai yang telah memberikan doa dan dukungannya.

5. Seluruh sahabat dan teman-teman yang tak pernah lelah memberikan dukungan.

6. Semua pihak yang telah banyak membantu penulis dalam menyelesaikan laporan TA yang tidak bisa disebutkan satu persatu.

Semoga laporan ini bermanfaat bagi penulis khususnya dan pembaca pada umumnya.

(9)

commit to user

ix DAFTAR ISI

HALAMAN JUDUL ... i

HALAMAN PERSETUJUAN ... ii

HALAMAN PENGESAHAN ... iii

ABSTRACT ... iv

ABSTRAK ... v

MOTTO ... vi

HALAMAN PERSEMBAHAN ... vii

KATA PENGANTAR ... viii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xii

DAFTAR TABEL ... xiv

DAFTAR LAMPIRAN ... xv

BAB I. PENDAHULUAN 1.1 Latar Belakang ... 1

1.2 Perumusan Masalah ... 2

1.3 Batasan Masalah... 2

1.4 Tujuan ... 2

1.5 Manfaat ... 2

1.6 Metodelogi Penelitian ... 2

1.7 Sistematika Penulisan ... 4

BAB II. LANDASAN TEORI 2.1 Pengertian WEB ... 6

2.2 Pengertian HTML ... 6

2.3 Pengertian PHP ... 6

2.4 Pengertian DBMS ... 7

2.5 Pengertian MySQL ... 7

2.6 Pengertian E-Learning ... 8

2.7 Pengertian Web Based Learning ... 8

(10)

commit to user

x

2.9 Java Script ... 9

2.10 Desain Sistem ... 9

2.10.1 DFD (Data Flow Diagram) ... 9

2.10.2 Entity Relationship Diagram (ERD) ... 10

BAB III. DESAIN DAN PERANCANGAN 3.1 Perancangan Sistem ... 12

3.1.1 Deskripsi Proses Bisnis ... 12

3.1.1.1 Proses Pendaftaran ... 12

3.1.1.2 Proses Akses Materi ... 12

3.1.1.3 Proses Latihan Soal ... 12

3.1.1.4 Proses Ujian... 12

3.1.1.5 Proses Pengelolaan Konten ... 13

3.1.1.6 Proses User Management ... 13

3.1.1.7 Proses Lihat Hasil ... 13

3.1.2 Context Diagram ... 13

3.1.3 Data Flow Diagram ... 14

3.1.4 Data Flow Diagram level 2 Proses Akses Materi ... 15

3.1.5 Data Flow Diagram level 2 Pengelolaan Konten ... 15

3.1.6 Data Flow Diagram level 2 User Management ... 16

3.1.7 Data Flow Diagram level 3 Pengelolaan Materi ... 16

3.1.8 Data Flow Diagram level 3 Pengelolaan Soal ... 17

3.2 Perancangan Database ... 17

3.2.1 Entity Relationship Diagram (ERD) ... 18

3.2.2 Relasi antar tabel ... 19

3.2.3 Rancangan Tabel ... 19

3.2.3.1 Tabel Siswa ... 20

3.2.3.2 Tabel Materi ... 21

3.2.3.3 Tabel Akses Materi ... 22

3.2.3.4 Tabel Kategori ... 22

3.2.3.5 Tabel Soal ... 23

(11)

commit to user

xi

3.2.3.7 Tabel Nilai ... 24

3.2.3.8 Tabel Guru... 25

3.2.3.9 Tabel Admin ... 26

3.3 Struktur dan Desain Program ... 27

3.3.1 Rancangan Halaman Awal ... 27

3.3.2 Rancangan Halaman Pendaftaran ... 27

3.3.3 Rancangan Halaman Login Member ... 28

3.3.4 Rancangan Halaman Latihan Soal dan Ujian... 28

3.3.5 Rancangan Halaman Input Soal ... 29

3.3.6 Rancangan Halaman Upload Materi ... 29

3.3.7 Rancangan Halaman Materi ... 30

3.3.8 Rancangan Halaman Member ... 30

3.3.6 Rancangan Halaman Buat Soal ... 30

BAB IV. PEMBAHASAN 4.1 Analisa Sistem ... 31

4.1.1 Halaman Awal ... 31

4.1.2 Halaman Home Siswa ... 31

4.1.3 Halaman Home Guru... 32

4.1.4 Halaman Home Admin ... 32

4.1.5 Upload Materi ... 33

4.1.6 Membuat Soal ... 34

4.1.7 Latihan Soal ... 36

4.1.8 Ujian ... 38

4.1.9 Nilai ... 40

4.1.10 Peringkat ... 41

4.1.11 Halaman Member ... 41

BAB IV. PENUTUP 5.1 Kesimpulan ... 42

5.2 Saran ... 42

(12)

commit to user

xii

DAFTAR GAMBAR

Gambar 1 Context Diagram Web-Based Learning Biologi……… 12

Gambar 2 Data Flow Diagram Web-Based Learning Biologi………...……. 13

Gambar 3 Data Flow Diagram level 2 Proses Akses Materi ... 14

Gambar 4 Data Flow Diagram level 2 Pengelolaan Konten ... 14

Gambar 5 Data Flow Diagram level 2 User Management ... 15

Gambar 6 Data Flow Diagram level 3 Pengelolaan Materi ... 15

Gambar 7 Data Flow Diagram level 3 Pengelolaan Soal ... 16

Gambar 8 Entity Relationship Diagram (ERD)………..……… 17

Gambar 9 Relasi Antar Tabel………..……… 18

Gambar 10 Rancangan Halaman Awal………...……… 25

Gambar 11 Rancangan Halaman Pndaftaran ... 25

Gambar 12 Rancangan Halaman Login Member ... 26

Gambar 13 Rancangan Daftar Latihan Soal dan Ujian ... 26

Gambar 14 Rancangan Halaman Latihan Soal dan Ujian ... 27

Gambar 15 Rancangan Halaman Input Soal ... 27

Gambar 16 Rancangan Halaman Upload Materi ... 28

Gambar 17 Rancangan Halaman Daftar Materi ... 28

Gambar 18 Rancangan Halaman Daftar Member ... 28

Gambar 19 Rancangan Halaman Buat Soal ... 29

Gambar 20 Halaman Awal ... 31

Gambar 21 Halaman Siswa ... 32

Gambar 22 Halaman Guru ... 32

Gambar 23 Halaman Admin ... 33

Gambar 24 Upload Materi ... 33

Gambar 25 Halaman Materi Guru ... 34

Gambar 26 Halaman Materi Siswa ... 34

Gambar 27 Halaman Input Soal ... 35

Gambar 28 Halaman Input Pertanyaan ... 35

(13)

commit to user

xiii

Gambar 31 Halaman Daftar Latihan ... 36

Gambar 32 Halaman Latihan ... 37

Gambar 33 Halaman Hasil Latihan ... 37

Gambar 34 Halaman Daftar Ujian ... 38

Gambar 35 Halaman Ujian... 39

Gambar 36 Soal Ujian Setelah Random... 40

Gambar 37 Halaman Nilai ... 40

Gambar 38 Halaman Peringkat ... 41

Gambar 39 Halaman Daftar Siswa ... 41

(14)

commit to user

xiv

DAFTAR TABEL

Tabel 1 Simbol-simbol Data Flow Diagram...10

Tabel 2 Simbol-simbol Entity Relation Diagram...11

Tabel 3 Tabel Siswa… ...20

Tabel 4 Tabel Materi ...21

Tabel 5 Tabel Akses Materi ... 21

Tabel 6 Tabel Kategori... 22

Tabel 7 Tabel Soal ... 23

Tabel 8 Tabel Jawab... 24

Tabel 9 Tabel Nilai... ..24

Tabel 10 Tabel Guru... ..25

(15)

commit to user

xv

DAFTAR LAMPIRAN

(16)

commit to user

1 BAB I

PENDAHULUAN

1.1Latar Belakang

Teknologi komunikasi dua arah pada era globalisasi ini telah menyebabkan komunikasi dapat bergerak dengan cepat. Kemajuan teknologi informasi dan komunikasi memberikan berbagai kemudahan kepada para penggunanya dalam segala aspek kehidupan terutama dalam bidang pendidikan.

Banyak aspek yang diajukan untuk dijadikan sebagai alasan-alasan untuk mendukung pengembangan dan penerapan teknologi komunikasi untuk pendidikan yang kaitannya dengan peningkatan kualitas pendidikan nasional indonesia. Salah satunya dengan peningkatan dan perbaikan sitem pembelajaran dengan menerapkan sistem komunikasi dua arah besifat online yang telah diketahui bahwa sistem komunikasi berbasis online merupakan alat yang sangat menunjang tingkat kelancaran serta memberikan kemudahan dalam melaksanakan suatu proses kegiatan. Dengan konsep ini sistim belajar mengajar terbatas ruang dan waktu. Seorang pengajar dapat memberikan materi kuliah dari mana saja dan seorang mahasiswa atau siswa dapat mengikuti kuliah dari mana saja.

Proses kegiatan tes ataupun kuis dapat dilakukan dengan jarak jauh. Seorang dosen/guru/pengajar dapat membuat materi soal ujian secara online dengan sangat mudah. Sekaligus juga proses ujian atau kuis tersebut dapat dilakukan secara online sehingga tidak membutuhkan kehadiran peserta ujian dalam suatu tempat. Peserta ujian dapat mengikuti ujian di rumah, kantor, warnet bahkan di saat perjalanan dengan membawa laptop dan mendukung koneksi internet.

(17)

commit to user

2

memanfaatkan media internet sebagai media pembelajaran interaktif sesuai standar kompetensi siswa SMA.

1.2Perumusan Masalah

Berdasarkan latar belakang yang telah diuraikan di atas, rumusan masalah yang dibahas adalah : “Bagaimana membuat Web-Based Learning (WBL) Biologi sebagai sarana pembelajaran interaktif sesuai standar kompetensi siswa SMA ?”

1.3Batasan Masalah

Agar permasalahan tidak maluas maka penulis memberikan batasan masalah yaitu perancangan dan pembuatan Web-Based Learning Biologi sebagai sarana pembelajaran interaktif

yang mengacu pada standar kompetensi siswa Sekolah Menengah Atas (SMA) kelas X,XII,XIII

menggunakan HTML, PHP, Javascript, dan database MySQL.

1.4Tujuan

Tujuan mengembangkan perangkat lunak ini adalah untuk mempermudah proses belajar mengajar biologi di SMA secara online.

1.5 Manfaat

Manfaat dari pembangunan perangkat lunak ini adalah : a. Bagi penulis

Penulis dapat menerapkan ilmu yang selama ini didapat didalam bangku perkuliahan, serta menambah wawasan penulis mengenai pembuatan program aplikasi e-learning bidang biologi menggunakan website.

b. Bagi pengguna atau instansi yang menggunakannya

Instansi dapat menggunakan aplikasi ini dan memanfaatkannya untuk mempermudah dan memperlancar proses belajar mengajar mata pelajaran biologi.

1.6Metodologi Penelitian

1.6.1Perolehan data

a. Studi Literatur

(18)

commit to user

3

b. Observasi

Data yang diperoleh adalah dengan cara melakukan observasi di Sekolah Menengah Atas dengan mengamati langsung objek permasalahan untuk mengumpulkan data dan informasi yang dibutuhkan yaitu materi pembelajaran serta cara pembelajaran

yang dilakukan.

c. Wawancara

Metode wawancara dilakukan dengan melakukan wawancara kepada beberapa pihak terkait yang berkompeten dan dianggap memiliki data yang akurat mengenai materi biologi yaitu dengan guru biologi Sekolah Menengah Atas sehingga menghasilkan informasi metode pembelajaran yang dilaksanakan.

1.6.2Tahap-tahap Pembangunan Sistem

a. Tahap analisis

Pembelajaran biologi dilakukan didalam kelas secara konvensional yaitu dengan bertatap langsung antar guru dan siswa dengan berbagai permasalahan yang timbul yaitu waktu dan tempat yang terbatas terkadang membuat proses belajar mengajar terganggu. Penyampain informasi yang kurang cepat sering mempengaruhi kenyamanan guru dan siswa dalam belajar. Penyampaian materi menggunakan buku dirasa kurang efektif karena tidak semua siswa memiliki buku sendiri.

b. Tahap Perancangan

Tahap perancangan merupakan tahapan yang dilakukan setelah menganalisa langkah-langkah awal pembangunan aplikasi. Tahap perancangan juga langsung menerangkan tentang sistematika dan proses berjalannya aplikasi.

Dalam perancangan, langkah pertama pembangunan aplikasi, yaitu : 1. Use case diagram

Use case diagram menyajikan bentuk kebutuhan diharapkan entitas tersedia pada sistem. Melalui use case diagram akan terlihat bentuk komunikasi antara entitas dengan sistem.

2. Activity diagram

(19)

commit to user

4

3. Sequence diagram

Sequence diagram merupakan diagram yang menunjukkan proses atau keadaan yang dapat berubah

4. Class diagram

Class diagram menyajikan kelas-kelas pada sistem yang tidak akan berubah atau tetap dan terdiri dari nama kelas, atribut beserta method yang digunakan.

5. Component diagram

Component diagram menjabarkan modul-modul software dan hubungan antara satu sama lain.

6. Deployment diagram

Deployment diagram menjabarkan bentuk implementasi, membuat model arsitektur fisik hardware.

c. Tahap Implementasi

Tahap ini merupakan kegiatan untuk mengimplementasikan rancangan yang telah disusun agar dapat diwujudkan. Tahapan implementasi mencakup pengkodean program dan implementasi basis data

1.7Sistematika Penulisan

(20)

commit to user

5

(21)

commit to user

6 BAB II

LANDASAN TEORI

2.1 Pengertian Web

Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multimedia (teks,gambar,suara,animasi,video) di dalamnya yang menggunakan protocol HTTP (hypertext transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser. Beberapa jenis browser yang popular saat ini di antaranya : Internet Explorer yang diproduksi oleh Microsoft, Mozilla Firefox, Opera, dan Safari yang diproduksi oleh Apple. (Rudyanto, 2011:7)

2.2 Pengertian HTML

HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan pada web browser. (Rudyanto, 2011:23)

2.3 Pengertian PHP

PHP (PHP:Hypertext Preprocessor) adalah sebuah bahasa pemrograman yang berbentuk Scripting, system kerja dari program ini adalah sebagai interpreter bukan sebagai Compiler. (Nugroho, 2004:201)

(22)

commit to user

7

2.4 Pengertian DBMS

DBMS adalah perangkat lunak yang digunakan untuk mengelola dan mengontrol pengaksesan database. (Rudyanto, 2011:23). Basis data merupakan kumpulan data yang saling berhubungan satu dengan yang lainnya yang diaorganisasikan sesuai struktur tertentu dan disimpan dengan baik. Untuk mendapatkan informasi yang berguna dari kumpulan data maka diperlukan suatu perangkat lunak (software) untuk memanipulasi data sehingga mendapatkan informasi yang berguna. Database Manajement System (DBMS) merupakan software yang digunakan untuk membangun sebuah sistem basis data yang berbasis komputerisasi. DBMS membantu dalam pemeliharaan dan pengolahan kumpulan data dalam jumlah besar. Sehingga dengan menggunakan DBMS tidak menimbulkan kekacauan dan dapat digunakan oleh pengguna sesuai dengan kebutuhan.

DBMS merupakan perantara bagi pemakai dengan basis data. Untuk merinteraksi dengan DBMS (basis data) menggunakan bahasa basis data yang telah ditentukan oleh perusahaan DBMS. Bahasa basis data biasanya terdiri atas perintah-perintah yang di formulasikan sehingga perintah tersebut akan diproses olah DBMS. Perintah-perintah biasanya ditentukan oleh user. Ada 2 bahasa basis data:

1. Data Definition Language (DDL)

DDL digunakan untuk menggambarkan desain basis data secara keseluruhan. DDL digunakan untuk membuat tabel baru, menuat indeks, ataupun mengubah tabel. Hasil kompilasi DDL disimpan di kamus data.

2. Data Manipulation Language (DML)

DML digunakan untuk melakukan menipulasi dan pengambilan data pada suatu basis data seperti penambahan data baru ke dalam basis data, menghapus data dari suatu basis data dan pengubahan data di suatu basis data.

2.5 Pengertian MySQL

(23)

commit to user

8

sebagai sumber dan pengelolaan datanya. Kepopuleran MySQL antara lain karena MySQL menggunakan SQL sebagai bahasa dasar untuk mengkases databasenya sehingga mudah untuk digunakan, kinerja query cepat, dan mencukupi untuk kebutuhan database perusahaan – perusahaan skala menengah kecil. (Rudyanto, 2011:151)

2.6 Pengertian E-Learning

E-learning adalah sebuah proses pembelajaran yang berbasis elektronik. Salah satu media yang digunakan adalah jaringan komputer. Dengan dikembangkannya di jaringan komputer memungkinkan untuk dikembangkan dalam bentuk berbasis web, sehingga kemudian dikembangkan ke jaringan komputer yang lebih luas yaitu internet, inilah makanya sistem e-learning dengan menggunakan internet disebut juga internet enabled learning. Penyajian e-learning berbasis web ini bisa menjadi lebih interaktif. Informasi-informsai perkuliahan juga bisa real-time. Begitu pula dengan komunikasinya, meskipun tidak secara langsung tatap muka, tapi forum diskusi perkuliahan bisa dilakukan secara online dan real time. Sistem e-learning ini tidak memiliki batasan akses, inilah yang memungkinkan perkuliahan bisa dilakukan lebih banyak waktu. Kapanpun mahasiswa bisa mengakses sistem ini. Aktifitas perkuliahan ditawarkan untuk bisa melayani seperti perkuliahan biasa. Ada penyampaian materi berbentuk teks maupun hasil penyimpanan suara yang bisa di download, selain itu juga ada forum diskusi, bisa juga seorang dosen memberikan nilai, tugas dan pengumuman kepada mahasiswa. (Sumantri,2004:28-30)

2.7 Pengertian Web Based Learning

(24)

commit to user

9

2.8 XAMPP

XAMPP adalah satu paket komplit web server yang mudah dipasang di berbagai sistem operasi. Dalam paketnya sudah terkandung Apache (web server), MySQL (database), PHP (server side scripting), dan berbagai pustaka bantu lainnya. XAMPP tersedia untuk Linux, Windows, MacOS maupun Solaris sehingga sangat memudahkan membuat web server multiplatform. (Kocil, 2009)

2.9 JavaScript

JavaScript adalah bahasa scripting yang popular di internet dan dapat bekerja di sebagian besar browser popular seperti internet Explorer (IE), Mozilla FireFox, Netscape, dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.

2.10 Desain Sistem

Desain sistem adalah suatu fase dimana diperlukan suatu keahlian perencanaan untuk elemen-elemen computer yang akan menggunakan sistem baru. Ada 2 hal yang perlu diperhatikan dalam desain sistem yaitu pemilihan peralatan dan program computer untuk sistem baru.

Ada beberapa alat bantu yang digunakan dalam desain sistem yaitu DFD(Data Flow Diagram), Kamus Dara (Data Dictionary), Diagram Kontek(Context Diagram), Daftar Kejadian(Event List),dan Spesifikasi Proses(Process Spesification).

2.10.1 DFD (Data Flow Diagram)

(25)

commit to user

10

DFD menggambarkan penyimpanan data dan proses yang mentransformasikan data. DFD menunjukkan hubungan antara data pada sistem dan proses pada sistem. (Kristanto,2003:55)

Tabel 1 Simbol-simbol Data Flow Diagram

Entitas Arus Data Proses Data Storage

2.10.2 Entity Relationship Diagram (ERD)

(26)

commit to user

11

Tabel 2 Simbol-simbol Entity Relation Diagram

Simbol Keterangan

Entitas, yaitu kumpulan dari objek yang dapat diidentifikasikan secara unik

(27)

commit to user

12 BAB III

ANALISA DAN PERANCANGAN SISTEM

3.1 Perancangan Sistem

Sebelum membangun sebuah aplikasi atau sistem, faktor yang harus diperhatikan adalah tahap perancangan. Tahap perancangan sistem adalah merancang atau mendesain sistem yang baik, isinya adalah langkah-langkah operasi dalam pengolahan data dan prosedur untuk mendukung operasi sistem. Kegiatan yang dilakukan dalam tahap ini yaitu merancang atau mendesain pemodelan sistem yang baik, mengenali dan mendefinisikan masalah pembuatan sistem ini sehingga jika ada kesalahan ada alternatif pemecahannya.

3.1.1 Deskripsi Proses Bisnis

Merupakan sekumpulan tugas atau aktivitas untuk mencapai tujuan yang diselesaikan baik secara berturut atau paralel, oleh manusia atau sistem, baik di luar atau di dalam organisasi. 1. Proses pendaftaran

User melakukan pendaftaran dengan menginputkan data pribadi. Detail data member akan disimpan pada tabel siswa dan guru. Dengan mendaftarkan diri, user dapat mengakses WBL dengan username dan password yang sesuai dengan isian data member.

2. Proses akses materi

Setiap member bisa mengunduh dan mempelajari materi yang disediakan pada tabel materi berdasarkan id_materi, setiap kali member mengakses sebuah materi, data id_member dan id_materi akan disimpan sebagai history pada tabel akses_materi dengan primary key tgl_jam. 3. Proses latihan soal

Siswa bisa mengerjakan latihan soal sesuai id_kategori yang ada pada tabel kategori, dimana id_kategori menjadi foreign key pada tabel soal, soal yg sesuai id_kategori latihan akan ditampilkan secara random, hasil jawaban latihan kemudian disimpan pada tabel jawab dan hasil perolehan nilainya akan disimpan pada tabel nilai, pengerjaan latihan bisa dilakukan lebih dari satu kali.

4. Proses ujian

(28)

commit to user

13

soal, soal yg sesuai dengan id_kategori ujian akan ditampilkan secara random, hasil jawaban ujian kemudian disimpan pada tabel jawab dan hasil perolehan nilainya akan disimpan pada tabel nilai. Hasil pengerjaan ujian hanya bisa disimpan sebanyak satu kali.

5. Proses pengelolaan konten

Pengelolaan konten dilakukan oleh admin dan guru, pengelolaan ini meliputi pengelolaan materi pada tabel materi dengan proses input, lihat, update, delete, dan pengelolaan soal pada tabel soal, yang termasuk di dalamnya proses input, lihat, dan update.

6. Proses user management

Proses user management dilakukan oleh admin, di mana admin bisa melakukan proses lihat data member dan aktif atau nonaktifkan status member.

7. Proses lihat hasil

Proses lihat hasil berupa hasil rekap data yang menampilkan data member yang bersangkutan beserta detail jawaban dan perolehan nilai latihan dan ujian. Proses lihat hasil ini melibatkan tabel member, tabel soal, tabel jawaban, dan tabel nilai.

3.1.2 Context Diagram (CD)

Context Diagram atau diagram konteks ini merupakan penggambaran secara garis besar sistem informasi tugas akhir yang akan dibangun dengan menampilkan input, proses, dan output dari sistem. Context Diagram dari Web-Based Learning Biologi ditunjukkan pada gambar 1 berikut,

(29)

commit to user

14

3.1.3 Data Flow Diagram (DFD)

DFD Level 1, menggambarkan aliran data yang ada di dalam sistem seperti yang digambarkan pada proses dalam Context Diagram. DFD level 1 dari Web- Based Learning Biologi ditunjukkan pada gambar 2 berikut,

(30)

commit to user

15

[image:30.612.73.540.68.692.2]

3.1.4 Data Flow Diagram (DFD) Level 2 Proses Akses Materi

Gambar 3 DFD Level 2 Proses Akses Materi

3.1.5 Data Flow Diagram (DFD) Level 2 Proses Pengelolaan Konten

(31)

commit to user

16

[image:31.612.75.536.113.698.2]

3.1.6 Data Flow Diagram (DFD) Level 2 Proses User Management

Gambar 5 DFD Level 2 Proses User Management

3.1.7 Data Flow Diagram (DFD) Level 3 Proses Pengelolaan Materi

(32)

commit to user

17

[image:32.612.75.553.74.540.2]

3.1.8 Data Flow Diagram (DFD) Level 3 Proses Pengelolaan Soal

Gambar 7 DFD Level 3 Proses Pengelolaan Soal

3.2 Perancangan Database

(33)

commit to user

18

[image:33.612.73.543.84.693.2]

3.2.1 Entity Relationship Diagram (ERD)

(34)

commit to user

19

[image:34.612.72.542.112.522.2]

3.2.2 Relasi Antar Tabel

(35)

commit to user

20

3.2.3 RancanganTabel

a. Tabel Siswa

[image:35.612.68.536.192.534.2]

Tabel siswa berfungsi untuk menyimpan data-data milik siswa. Data yang disimpan adalah data-data yang berhubungan dengan data pribadi dan login siswa ke dalam sistem.

Tabel 3 Siswa

Nama Field Tipe Data Ukuran Keterangan Id_Siswa Varchar 6 Primary Key Kode member

Nama Varchar 20 Nama member

Email Varchar 20 Email member

Username Varchar 10 Username untuk login

Password Varchar 15 Password untuk login

Sex Varchar 6 Jenis kelamin siswa

Alamat Varchar 30 Alamat siswa

Messenger Varchar 20 Nama kontak messenger siswa Nmr_telpon Varchar 15 Nomor telephon siswa

Kelas Varchar 1 Kelas siswa

Semester Varchar 1 Semester siswa

(36)

commit to user

21

b. Tabel Materi

[image:36.612.68.537.168.463.2]

Tabel materi berfungsi untuk menyimpan data-data materi yang ada dalam Web-Based Learning Biologi.

Tabel 4 Materi

Nama Field Tipe Data Ukuran Keterangan Id_Materi Varchar 6 Primary Key Kode materi Judul_materi Varchar 10 Judul materi

Deskripsi Text Deskripsi singkat mengenai

materi

Nama_file Varchar 8 Nama file dari materi yang di upload

Tgl_upload datetime Tanggal upload materi

Jenis Varchar 5 Jenis atau tipe file

Kelas Varchar 1 Kelas materi

Semester Varchar 1 Semester materi

c. Tabel Akses Materi

Tabel akses_materi berfungsi untuk menyimpan data history antara relasi many to many tabel member dan tabel materi.

Tabel 5 Materi

Nama Field Tipe Data Ukuran Keterangan

Tgl_jam datetime Primary Key Tanggal dan jam

mengunduh materi

Id_Member varchar 6 Kode member

(37)

commit to user

22

d. Tabel Kategori

Tabel kategori berfungsi untuk menyimpan segala informasi mengenai tipe atau jenis soal yang ada dalam Web-Based Learning Biologi.

Tabel 6 Kategori

Id_kategori Integer 5 Primary Key Kode kategori soal

Judul_kategori Varchar 15 Judul kategori soal

Jml_soal Int 3 Banyak soal dalam

satu jenis soal

tipe_soal Varchar 8 Tipe soal yaitu

latihan dan ujian

Jml_tampil Int 3 Banyak soal yang

tampil saat member mengakses soal

Kelas Varchar 5 Kelas dari siswa

yaitu X,XI atau XII

Semester Varchar 5 Semester siswa

yaitu 1,2,3,4,5,6

Status Integer 1 Status aktif dan

(38)

commit to user

23

e. Tabel Soal

Tabel soal berfungsi menyimpan soal beserta pilihan jawaban dan pilihan jawaban yang benar dari tiap tipe soal.

Tabel 7 Soal

Id_soal Integer 5 Primary Key Kode soal

Id_kategori Varchar 5 Kode kategori soal

Pertanyaan Text Isi pertanyaan

Gambar_soal Varchar 100 Berisi gambar pada

soal (jika ada)

A Varchar 100 Pilihan jawaban

pada radiobutton A

B Varchar 100 Pilihan jawaban

pada radiobutton B

C Varchar 100 Pilihan jawaban

pada radiobutton C

D Varchar 100 Pilihan jawaban

pada radiobutton D

E Varchar 100 Pilihan jawaban

pada radiobutton E

Cek Varchar 100 Jawaban benar

(39)

commit to user

24

f. Tabel Jawab

[image:39.612.70.547.192.447.2]

Tabel jawab berfungsi menyimpan hasil jawaban member setelah mengerjakan soal baik soal latihan maupun ujian, dan juga berfungsi untuk menampilkan hasil kerja member yang telah dicocokan dengan jawaban benar.

Tabel 8 Jawab

Id_jawab Varchar 5 Primary Key Kode jawaban

Id_kategori Varchar 5 Kode kategori

soal

Id_soal Integer 5 Kode soal

Id_member Varchar 6 Kode member

Jawab char 1 Jawaban benar

setiap soal

Tgl_jam Datetime Waktu

pengerjaan soal

g. Tabel Nilai

Tabel nilai berfungsi untuk menyimpan hasil nilai yang didapat setelah mengerjakan soal baik soal latihan maupun ujian.

Tabel 9 Nilai

Id_nilai integer 5 Primary Key Kode nilai

Id_kategori Varchar 5 Kode kategori

soal

Id_member Varchar 6 Kode member

Nilai Integer 3 Nilai

Tgl_jam Datetime Waktu

(40)

commit to user

25

h. Tabel Guru

[image:40.612.68.535.172.463.2]

Tabel guru berfungsi untuk menyimpan data guru. Data yang disimpan adalah data-data yang berhubungan dengan data-data pribadi dan login guru ke dalam sistem.

Tabel 10 Guru

Nama Field Tipe Data Ukuran Keterangan Id_Guru Varchar 6 Primary Key Kode guru

Nama Varchar 20 Nama guru

Email Varchar 20 Email guru

Sex Varchar 6 Jenis kelamin guru

Alamat Varchar 30 Alamat guru

Messenger Varchar 20 Nama kontak messenger guru Nmr_telpon Varchar 15 Nomor telephon guru

(41)

commit to user

26

i. Tabel Admin

[image:41.612.67.536.176.503.2]

Tabel admin berfungsi untuk menyimpan data-data admin. Data yang disimpan adalah data-data yang berhubungan dengan data pribadi dan login admin ke dalam sistem.

Tabel 11 Admin

Nama Field Tipe Data Ukuran Keterangan Id_Admin Varchar 6 Primary Key Kode Admin

Nama Varchar 20 Nama Admin

Email Varchar 20 Email Admin

Sex Varchar 6 Jenis kelamin Admin

Alamat Varchar 30 Alamat Admin

Messenger Varchar 20 Nama kontak messenger

Admin

Nmr_telpon Varchar 15 Nomor telephon Admin

Status_Login char 1 Status aktif dan non aktif Admin

3.3 Struktur dan Desain Program

[image:41.612.85.529.283.682.2]

3.3.1 Rancangan Halaman Awal

[image:41.612.96.523.498.703.2]

(42)

commit to user

27

[image:42.612.85.438.111.659.2]

3.3.2 Rancangan Halaman Pendaftaran

Gambar 11 Rancangan Halaman Pendaftaran

3.3.3 Rancangan Halaman Login Member

(43)

commit to user

28

[image:43.612.92.527.89.639.2]

3.3.4 Rancangan Halaman Latihan Soal dan Ujian

Gambar 13 Daftar Latihan Soal dan Ujian

(44)

commit to user

29

[image:44.612.95.494.89.641.2]

3.3.5 Rancangan Halaman Input Soal

Gambar 15 Rancangan Halaman Input Soal

3.3.6 Rancangan Halaman Upload Materi

(45)

commit to user

30

[image:45.612.80.521.86.692.2]

3.3.7 Rancangan Halaman Materi

Gambar 17 Rancangan Halaman Materi

3.3.8 Rancangan Halaman Member

Gambar 18 Rancangan Halaman Member

3.3.9 Rancangan Halaman Buat Soal

(46)

commit to user

31 BAB IV

PEMBAHASAN

4.1 Analisa Sistem

Sesuai dengan perancangan sistem yang telah dikemukakan sebelumnya, pada Web-Based Learning Biologi ini terdapat 3 tingkatan user yaitu siswa, guru dan administrator. Berikut ini adalah implementasi tingkatan user atau halaman yang dapat diakses oleh masing-masing user.

4.1.1 Halaman Awal

[image:46.595.113.515.234.556.2]

Halaman ini merupakan halaman pertama yang tampil saat mengakses WBL. Pada halaman ini hanya ditampilkan form login bagi member sekaligus admin yang sudah terdaftar dan pilihan register bagi user yang belum terdaftar.

Gambar 20 Halaman Awal

4.1.2 Halaman Home Siswa

(47)

commit to user

32

Gambar 21 Halaman Siswa

4.1.3 Halaman Home Guru

[image:47.595.114.520.110.628.2]

Halaman ini merupakan halaman setelah guru login. Hanya guru yang telah diaktifkan oleh admin saja yang dapat login. Guru memiliki hak untuk mengatur konten yang berkaitan dengan materi yaitu upload materi serta membuat soal ujian.

Gambar 22 Halaman Guru

4.1.4 Halaman Home Admin

(48)

commit to user

33

maupun nilai yang telah ada, Admin hanya diperbolehkan mengatur member seperti mengaktifkan,menonaktifkan, serta menghapus member.

Gambar 23 Halaman Admin

4.1.5 Upload Materi

[image:48.595.112.513.172.497.2]

Guru dapat mengelola materi yang ada, diantaranya meng-upload materi, mengedit, dan juga menghapus materi yang sudah ada. Meng-upload materi dilakukan dengan mengisikan Judul materi, kemudian file yang akan di-upload, serta deskripsi singkat dari materi yang akan di-upload. Setelah materi di-upload maka file materi akan disimpan pada direktori materi sedangkan data materi disimpan pada tabel materi.

(49)

commit to user

34

[image:49.595.114.513.211.597.2]

Kemudian materi yang telah di-upload dapat dilihat pada halaman materi. Pada halaman ini guru berhak mengedit dan menghapus materi sedangkan siswa hanya dapat mendownladnya saja sehingga tidak ada menu edit dan delete pada halaman materi yang muncul pada saat siswa login. Materi dapat berupa file pdf, doc, ppt, dan lain-lain.

Gambar 25 Halaman Materi Guru

Materi-materi yang bisa di download untuk kemudian dipelajari oleh siswa. Siswa dapat mendownload materi dengan menggunakan tombol download yang ada.

Gambar 26 Halaman Materi Siswa

4.1.6 Membuat Soal

(50)

commit to user

35

[image:50.595.119.514.171.669.2]

soal tampil merupakan banyaknya soal yang akan ditampilkan dalam latihan atau ujian nantinya. Kategori soal akan disimpan dalam tabel kategori yang akan membedakan soal ujian dan latihan sesuai dengan BAB masing-masing.

Gambar 27 Halaman Input Soal

Setelah membuat kategori kemudian memasukkan pertanyaan , pilihan jawaban dan jawaban sebanyak jumlah yang telah ditentukan pada saat membuat kategori. Pertanyaan, pilihan jawaban serta jawaban yang benar disimpan dalam tabel soal.

Gambar 28 Halaman Input Pertanyaan

(51)

commit to user

36

Gambar 30 Halaman Daftar Pertanyaan

4.1.7 Latihan Soal

[image:51.595.113.516.111.542.2]

Terdapat berbagai latihan soal dalam Web Based Learning biologi. Setiap latihan yang ada merupakan pembagian per bab pembelajaran biologi. Untuk memulai latihan soal dengan menekan tombol mulai pada bab yang diinginkan.

Gambar 31 Halaman Daftar latihan

(52)

commit to user

[image:52.595.116.516.103.482.2]

37

Gambar 32 Halaman latihan

Setelah siswa menjawab seluruh soal maka siswa dapat menekan tombol jawab untuk memasukkan hasil jawabannya, dan akan mendapatkan laporan nilai beserta evaluasi soal dengan jawaban yang benar sesuai yang telah disimpan pada tabel soal.

[image:52.595.117.514.542.728.2]

(53)

commit to user

38

4.1.8 Halaman Ujian

[image:53.595.113.514.176.730.2]

Pada halaman ini akan ditampilkan pilihan ujian yang terdapat dalam WBL biologi. Admin dan guru mendapat hak akses untuk dapat melihat soal ujian dan meng-aktif/nonaktif-kan soal ujian yang ada.

Gambar 34 Halaman Daftar Ujian

Siswa dapat melakukan ujian dengan alokasi waktu tertentu yang disediakan. siswa menjawab seluruh soal maka siswa dapat menekan tombol jawab untuk memasukkan hasil jawabannya, dan akan mendapatkan laporan nilai beserta evaluasi soal dengan jawaban yang benar sesuai yang telah disimpan pada tabel soal.

(54)

commit to user

39

[image:54.595.114.514.171.552.2]

Soal ujian bersifat random sehingga memungkinkan soal antara satu anak dengan anak yang lain tidak sama, sehingga meminimalisir kecurangan.

Gambar 36 Soal Ujian Setelah Random

4.1.9 Nilai

(55)

commit to user

[image:55.595.109.516.113.177.2]

40

Gambar 37 Halaman Nilai

4.1.10 Peringkat

[image:55.595.114.500.244.482.2]

Dari sekian banyak latihan dan ujian yang ada, siswa dapat mengukur keahliannya melalui peringkat yang didapat di antara siswa lain yang terdaftar dalam Web Based Learning Biologi. Hasil peringkat ini diambil dari tabel nilai.

Gambar 38 Halaman Peringkat

4.1.11 Halaman Member

Pada halaman ini admin bisa melihat daftar member yang terdaftar, hak admin di sini adalah dapat melihat detail data member, mengedit, mengaktifkan atau menonaktifkan serta menghapus member. Data member disimpan dalam tabel member.

[image:55.595.113.514.566.623.2]

(56)

commit to user

[image:56.595.114.515.109.505.2]

41

(57)

commit to user

42 BAB V

PENUTUP

5.1 Kesimpulan

Kesimpulan dari uraian hasil dan pembahasan di atas, bahwa telah selesai dibuat perancangan dan pembuatan Web-Based Learning Biologi sebagai sarana pembelajaran interaktif yang mengacu pada standar kompetensi siswa Sekolah Menengah Atas (SMA) menggunakan HTML, PHP, Javascript, dan database MySQL. Terdapat tiga tingkatan user yaitu siswa, guru dan admin. Di mana siswa harus melakukan pendaftaran sebelumnya untuk dapat mengakses materi yang ada serta mengerjakan latihan soal latihan dan ujian yang tersedia sesuai standar yang berlaku. Guru memiliki hak untuk mengelola konten yang berhubungan dengan proses upload materi dan soal. Sedangkan admin memiliki hak penuh terhadap sistem antara lain melakukan proses pengelolaan terhadap isi konten secara keseluruhan dan melakukan pengelolaan data member.

5.2 Saran

a. Penambahan fasilitas back up dan restore data dalam database. Sehingga mempermudah admin dalam melakukan pengolahan data yang ada.

b. Pengembangan tampilan opsi jawaban yang tidak hanya berupa radiobutton sehingga tipe soal bisa lebih bervariasi.