47
DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE STUDY: “TELAAH PROSA INGGRIS”) Harry Aprizal Undergraduate Program, Faculty of Industrial Engineering, 2010 Gunadarma University http://www.gunadarma.ac.id Keywords: Media Web-Based Learning, Study Prose, Uml, Php, Mysql ABSTRACT Science and information technology growing today has prompted major changes in many areas of human life. One area that shows the trend of change is a large enough field of education, particularly in terms of presenting instructional materials to students in teaching and learning system. So far that has been going well at school or even university, teaching materials received by students is always based on the teaching staff such as teachers and lecturers. In the modern era like now, the presentation of teaching materials or materials may be distributed globally, meaning that the material can be accepted or given from anywhere, anytime and / or by anyone via the internet. With this Internet presence sparked a revolution in teaching and learning system, one of them is the presence of a web-based instructional media for students to be easier to obtain and understand the material you want to learn. In this case the author designed, built and experimented with a web-based media site dedicated to the students of the Faculty of English Literature Gunadarma University by the name of Wendy! stands for Welcome to England - Have a Nice Day!. This site is to provide a reference material for students learning about Prose Study of British subjects.These references are presented in the form of video streaming of multimedia elements and elements such as animation or text, so that students can better understand the contents of the content of the material contained therein. This web-based media site using UML and navigation structure as the concept of process flow development, PHP programming language as the site builder tool and also MySQL as data storage devices.

DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

  • Upload
    phamque

  • View
    220

  • Download
    3

Embed Size (px)

Citation preview

Page 1: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

 

 

DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP

AND MYSQL (CASE STUDY: “TELAAH PROSA INGGRIS”)

Harry Aprizal

Undergraduate Program, Faculty of Industrial Engineering, 2010

Gunadarma University

http://www.gunadarma.ac.id

Keywords: Media Web-Based Learning, Study Prose, Uml, Php, Mysql

ABSTRACT

Science and information technology growing today has prompted major changes in many

areas of human life. One area that shows the trend of change is a large enough field of

education, particularly in terms of presenting instructional materials to students in teaching

and learning system. So far that has been going well at school or even university, teaching

materials received by students is always based on the teaching staff such as teachers and

lecturers. In the modern era like now, the presentation of teaching materials or materials may

be distributed globally, meaning that the material can be accepted or given from anywhere,

anytime and / or by anyone via the internet. With this Internet presence sparked a revolution

in teaching and learning system, one of them is the presence of a web-based instructional

media for students to be easier to obtain and understand the material you want to learn.

In this case the author designed, built and experimented with a web-based media site

dedicated to the students of the Faculty of English Literature Gunadarma University by the

name of Wendy! stands for Welcome to England - Have a Nice Day!. This site is to provide a

reference material for students learning about Prose Study of British subjects.These

references are presented in the form of video streaming of multimedia elements and elements

such as animation or text, so that students can better understand the contents of the content of

the material contained therein. This web-based media site using UML and navigation

structure as the concept of process flow development, PHP programming language as the site

builder tool and also MySQL as data storage devices.

Page 2: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

PENGEMBANGAN MEDIA PEMBELAJARAN BERBASIS WEB

MENGGUNAKAN PHP DAN MYSQL (STUDI KASUS: TELAAH

PROSA INGGRIS)

HARRY APRIZAL

Jurusan Teknik Informatika, Fakultas Teknologi Industri, Universitas Gunadarma, Margonda

Raya 100 Depok 16424 telp (021) 78881112, 7863788

Abstraksi :

Science and information technology growing today, has prompted major changes in

many areas of human life. One area that shows the trend of change is a large enough field of

education, particularly in terms of presenting instructional materials to students in teaching

and learning system. So far that has been going well at school or even university, teaching

materials received by students is always based on the teaching staff such as teachers and

lecturers.

In the modern era like now, the presentation of teaching materials or materials may be

distributed globally, meaning that the material can be accepted or given from anywhere,

anytime and / or by anyone via the internet. With this Internet presence sparked a revolution

in teaching and learning system, one of them is the presence of a web-based instructional

media for students to be easier to obtain and understand the material you want to learn.

In this case the author designed, built and experimented with a web-based media site

dedicated to the students of the Faculty of English Literature Gunadarma University by the

name of Wendy! stands for Welcome to England - Have a Nice Day!. This site is to provide a

reference material for students learning about Prose Study of British subjects.These

references are presented in the form of video streaming of multimedia elements and elements

such as animation or text, so that students can better understand the contents of the content of

the material contained therein. This web-based media site using UML and navigation

structure as the concept of process flow development, PHP programming language as the site

builder tool and also MySQL as data storage devices.

Keyword : MEDIA WEB-BASED LEARNING, Study Prose, UML, PHP, MySQL

Tanggal Pembuatan : 5 September 2010

PENDAHULUAN

Ilmu pengetahuan dan teknologi

informasi yang semakin berkembang saat

ini, telah mendorong perubahan yang besar

di banyak bidang kehidupan manusia.

Salah satu bidang yang menunjukkan

kecenderungan perubahan cukup besar

adalah bidang pendidikan, khususnya

dalam hal penyajian bahan ajar terhadap

siswa dalam sistem belajar mengajar.

Selama ini yang telah banyak terjadi baik

di sekolah atau universitas sekalipun,

bahan ajar yang diterima siswa selalu

bersumber pada tenaga pengajar seperti

guru dan dosen. Jadi, dengan kata lain

siswa tidak diberi pilihan untuk

mendapatkan bahan ajar atau materi yang

memang lebih digemari oleh para siswa.

Contohnya, ada siswa yang lebih suka

dengan membaca teks dalam sistem

belajar. Namun, ada pula siswa yang lebih

suka dengan melihat sekaligus mendengar

Page 3: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

apa yang ingin dipelajari seperti animasi

ataupun video.

Di era modern seperti sekarang ini,

penyajian bahan ajar atau materi dapat

didistribusikan secara global, artinya

materi dapat diterima ataupun diberikan

dari manapun, kapanpun dan/atau oleh

siapa pun melalui internet. Dengan

keberadaan internet inilah memicu

terjadinya revolusi dalam sistem belajar

mengajar, salah satu nya adalah hadirnya

media pembelajaran berbasis web agar

siswa dapat lebih mudah untuk

mendapatkan serta memahami materi yang

ingin dipelajari. Menurut statistik yang

dikeluarkan oleh

www.internetworldstats.com per 30 Juni

2010, dari sekitar 6.9 milyar populasi

dunia hampir 2 milyar merupakan

pengguna internet, yang berarti sekitar

30% penduduk dunia telah memiliki akses

ke internet, dengan porsi pengguna

terbanyak di Asia berkisar 42 % dari

seluruh pengguna internet dunia. Data

selengkapnya dapat dilihat pada gambar

1.1 di bawah ini:

Gambar 1.1 Diagram Pengguna

internet dunia.

Angka penggunaan internet yang

meningkat secara signifikan beberapa

tahun terakhir belakangan menjadi faktor

kunci semakin maraknya penggunaan

media pembelajaran berbasis web. Jenis

organisasi yang banyak menerapkan media

pembelajaran berbasis web adalah institusi

pendidikan, tetapi tidak menutup

kemungkinan perusahaan berorientasi laba

menerapkan hal ini untuk pelatihan dan

pendidikan tenaga kerja mereka.

Universitas Gunadarma sebagai

salah satu institusi pendidikan tinggi di

Indonesia yang berbasis teknologi

informasi dan komunikasi, telah

menerapkan beberapa metode

pembelajaran dalam bentuk media berbasis

web seperti kelas virtual, www.v-

class.gunadarma.ac.id, pelatihan berbasis

komputer, pelatihan berbasis web, dan

praktikum berbasis web iLab (Integrated

Laboratory), serta situs pembelajaran

elektronik

www.cai.elearning.gunadarma.ac.id yang

dilengkapi dengan kebutuhan-kebutuhan

yang cukup lengkap bagi mahasiswa yaitu

seperti fitur video streaming atau video

yang dapat langsung dilihat tanpa harus

mengunduhnya terlebih dahulu, serta

terdapat fitur-fitur lain seperti animasi-

animasi flash untuk mendukung

pembelajaran dalam sebuah mata kuliah.

Selain ketiga situs diatas, Universitas

Gunadarma mempunyai situs lain sebagai

referensi mahasiswa yang disajikan dalam

bentuk media berbasis web yang bernama

WEnDy!

(www.cai.elearning.gunadarma.ac.id/auvi)

. WEnDy! inilah yang akan menjadi fokus

pada penulisan ini. WEnDy! merupakan

kepanjangan dari “Welcome to England –

Have a Nice Day!”, situs ini merupakan

situs media pembelajaran berbasis web

yang ditujukan bagi mahasiswa

Universitas Gunadarma khususnya

mahasiswa Fakultas Sastra Inggris agar

dapat mengetahui dan memahami lebih

banyak tentang pranata masyarakat

Inggris.

Melihat dari sisi fasilitas yang ada

di sekitar kampus Universitas Gunadarma

Page 4: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Depok, yang sudah memiliki akses internet

tanpa menggunakan kabel atau sering

disebut Wi-Fi. Setiap mahasiswa

Universitas Gunadarma dapat

mengaksesnya secara gratis, hanya dengan

memasukkan password yang telah

ditentukan oleh pihak Universitas

Gunadarma. Selain itu koneksi internetnya

pun sangat baik, bisa mencapai kurang

lebih 3 Mb/s. Dengan kondisi seperti ini,

sangat memungkinkan sekali untuk

keberadaan media pembelajaran berbasis

web yang bernama WenDy! di Universitas

Gunadarma yang di dalamnya terdapat

animasi, video serta grafis-grafis lainnya,

yang memang membutuhkan koneksi

internet yang baik agar situs tersebut

berjalan dengan sempurna. Oleh karena

itu, media pembelajaran berbasis web yang

memiliki fitur-fitur lengkap dan memiliki

ukuran yang besar pula, sebaiknya diakses

di dalam kampus Universitas Gunadarma,

selain seperti yang sudah disebutkan tadi,

yakni membutuhkan konektivitas yang

baik, media pembelajaran berbasis web ini

juga lebih dikhususkan untuk mahasiswa

Fakultas Sastra Inggris Universitas

Gunadarma agar dapat memahami tentang

mata kuliah tentang mata kuliah Telaah

Prosa. Namun, tidak terkecuali untuk

mahasiswa di luar Fakultas Sastra Inggris

yang ingin mengakses situs media

pembelajaran berbasis web ini.

Pengaksesan terhadap situs ini tidak

diharuskan di dalam kampus, mahasiswa

bisa juga mengakses di luar kampus,

dengan catatan koneksi internetnya pun

harus baik.

WEnDy! memang sengaja dibuat

agar dapat memudahkan para mahasiswa

untuk mendapatkan sebuah referensi dari

apa yang telah dipelajari di kelas terutama

dalam mata kuliah Telaah Prosa. Penyajian

materi di dalam situs ini dibuat semenarik

mungkin, supaya mahasiswa tidak merasa

bosan dan jenuh ketika mengakses situs

ini. Selain itu mahasiswa pun dapat men-

download video-video yang terdapat di

dalam situs ini dengan syarat registrasi

sebagai anggota terlebih dahulu yakni

mengisikan form-form yang telah

disediakan.

TINJAUAN PUSTAKA

UML (Unified Modelling Language)

UML (Unified Modelling

Language) adalah sebuah "bahasa" yang

telah menjadi standardalam industri untuk

merancang dan mendokumentasikan

sistem piranti lunak. UML menawarkan

sebuah standar untuk merancang model

sebuah sistem. Dengan menggunakan

UML dapat membuat model untuk semua

jenis aplikasi piranti lunak, dimana

aplikasi tersebut dapat berjalan pada

piranti keras, sistem operasi dan jaringan

apapun, serta ditulis dalam bahasa

pemrograman apapun. Tetapi karena UML

juga menggunakan kelas dan operasi

dalam konsep dasarnya, maka ia lebih

cocok untuk penulisan piranti lunak dalam

bahasa berorientasi objek seperti C++,

Java, C# atau VB.NET. Walaupun

demikian, UML tetap dapat digunakan

untuk pemodelan aplikasi prosedural

dalam VB atau C. Kesuksesan suatu

pemodelan piranti lunak ditentukan oleh

tiga unsur, yang kemudian terkenal dengan

sebuan segitiga sukses. Ketiga unsur

tersebut adalah metode pemodelan, proses,

dan alat yang digunakan.

Gambar 2.1 Segitiga Pemodelan

Metodologi Pemodelan

Alat Proses

Page 5: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Memahami notasi pemodelan tanpa

mengetahui cara pemakaian yang

sebenarnya (proses) akan membuat proyek

gagal. Dan pemahaman terhadap metode

pemodelan dan proses disempurnakan

dengan penggunaan tool yang tepat.

Seperti bahasa-bahasa lainnya, UML

mendefinisikan notasi dan sintaks atau

semantik. Notasi UML merupakan

sekumpulan bentuk khusus untuk

menggambarkan berbagai diagram piranti

lunak. Setiap bentuk memiliki makna

tertentu, dan UML sintaks mendefinisikan

bagaimana bentuk-bentuk tersebut dapat

dikombinasikan. Notasi UML terutama

diturunkan dari 3 notasi yang telah ada

sebelumnya: Grady Booch OOD (Object-

Oriented Design), Jim Rumbaugh OMT

(Object Modeling Technique), dan Ivar

Jacobson OOSE (Object-Oriented

Software Engineering).

Konsepsi Dasar UML(Unified

Modelling Language)

Abstraksi konsep dasar UML yang

terdiri dari klasifikasi struktural, perilaku

dinamik, dan manajemen model, bisa

dipahami dengan mudah apabila melihat

gambar diatas dari diagram. Konsep utama

bisa dipandang sebagai istilah yang akan

muncul pada saat membuat diagram. Dan

pandangan adalah kategori dari diagram

tersebut. Untuk menguasai UML,

sebenarnya cukup dua hal yang harus

diperhatikan, menguasai pembuatan

diagram UML, menguasai langkah-

langkah dalam analisa dan pengembangan

dengan UML

Tabel 2.1 Konsepsi UML

Area Utama Tampilan Diagram Konsep Utama

Struktural Tampilan

Statis

Diagram Kelas Kelas, asosiasi,

generalisasi, dependensi,

realisasi, antar muka

Tampilan

Use Case

Diagram Use Case Use Case, aktor, asosiasi,

perluasan, integrasi,

generalisasi use case

Struktural Tampilan

Implementasi

Tampilan

Penerapan

Diagram Komponen Komponen, antar muka,

dependensi, realisasi

Diagram

Implementasi

Simpul, komponen,

dependensi, lokasi

Dinamik Tampilan

Mesin Status

Diagram Statechart Status, kejadian, transisi,

aksi

Tampilan

Aktifitas

Diagram Aktifitas Status, aktifitas,

kelengkapan transisi,

percabangan, hubungan

Tampilan

Interaksi

Diagram Sekuens Interaksi, onjek, pesan,

aktifasi.

Diagram Kolaborasi Kolaborasi, interkasi,

peran kolaborasi, pesan

Manajemen

Model

Tampilan

Manajemen

Model

Diagram Kelas Paket, subsistem, model.

Kemampuan

perluasan

Semua Semua Konstrain, stereotip, nilai

dengan tanda (tag)

Page 6: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Struktur Navigasi

Struktur navigasi termasuk penting

dalam pembuatan suatu aplikasi

multimedia dan gambarnya harus sudah

ada pada tahap perancangan. Struktur

navigasi merupakan rancangan hubungan

dan rantai kerja dari beberapa area yang

berbeda dan dapat membantu

mengorganisaiskan seluruh elemen

aplikasi multimedia dengan pemberian

perintah dan pesan. Struktur navigasi juga

memberikan kemudahan dalam

menganalisa keinteraktifan seluruh objek

dalam aplikasi multimedia dan bagaimana

pengaruh keinteraktifannya terhadap

pengguna.

Struktur navigasi memiliki ciri

khas yang dapat membedakannya menurut

kebutuhan objek, kemudahan pemakaian,

keinterktifannya dan kemudahan

membuatnya yang berpengaruh terhadap

waktu pembuatan suatu aplikasi

multimedia. Ada empat macam bentuk

dasar dari peta penjejakan yang biasa

digunakan dalam proses pembuatan

aplikasi multimedia.

Navigasi Linier

Linier merupakan struktur yang

hanya mempunyai satu rangkaian cerita

yang berurut. Struktur ini menampilkan

satu demi satu tampilan layar secara

berurut menurut urutannya dan tidak

diperbolehkan adanya percabangan.

Tampilan yang dapat ditampilkan adalah

satu halaman sebelumnya atau satu

halaman sesudahnya tidak dapat dua

halaman sebelumnya atau dua halaman

sesudahnya. Pada struktur navigasi ini

tidak diperkenakan adanya percabangan.

Biasanya struktur ini digunakan untuk

membuat multimedia presentasi karena

tidak terlalu menuntut keinteraksian, tetapi

hanya memerlukan keindahan dan

kemudahan menampilkan data sebagai

informasi.

Gambar 2.10 Navigasi linier

Navigasi Hirarki

Struktur hirarki merupakan suatu

struktur yang mengandalkan percabangan

untuk menampilkan data berdasarkan

kriteria tertentu. Tampilan pada menu

pertama akan disebut sebagai Master

Page, halaman utama ke satu. Halaman

utama ini akan mempunyai halaman

percabangan yang dikatakan Slave Page,

halaman pendukung. Jika salah satu

halaman pendukung diaktifkan, maka

tampilan tersebut akan bernama Master

Page, halaman utama kedua. Pada struktur

navigasi ini tidak diperkenankan adanya

tampilan secara linear.

Navigasi Non Linier

Pada struktur non linear

diperkenankan membuat penjejakan

bercabang. Percabangan ini berbeda

dengan percabangan pada struktur hirarki.

Pada percabangan non linier walaupun

terdapat percabangan tetapi tiap-tiap

tampilan mempunyai kedudukan yang

sama tidak ada pada master page dan slave

page.

Topik Topik Topik Topik

Menu Utama

Topik

Sub

Topik

Page 7: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Gambar 2.12 Navigasi Non Linier

Navigasi Campuran

Struktur navigasi campuran

merupakan gabungan dari ketiga struktur

sebelumnya. Struktur navigasi ini banyak

digunakan dalam pembuatan aplikasi

multimedia sebab dapat memberikan

keinteraksian yang lebih tinggi.

Gambar 2.13 Navigasi Campuran.

Media Pembelajaran Berbasis Web

Media pembelajaran berbasis web

adalah kumpulan halaman-halaman dalam

internet yang didesain secara terencana

dan terpadu untuk

kepentingan pembelajaran, dengan maksud

agar proses interaksi komunikasi edukatif

antara guru dan anak didik/warga belajar

dapat berlangsung secara tepat guna dan

berdayaguna.

Media pembelajaran berbasis web dapat

dikatakan merupakan bentuk pembelajaran

terprogram dan individual. Pembelajaran

terprogram adalah sistem belajar yang

dalam penggunaan bahan-bahannya

diprogram untuk mencapai tujuan

pendidikan (Ely,1979:380). Sedangkan

pembelajaran individual adalah suatu

sistem belajar yang memperhatikan

kebutuhan dan karakteristik siswa (Burns,

1971: 45)

Website sendiri adalah sejumlah

halaman yang dapat berupa isi (content)

sesuai dengan jenis website tersebut. Isi

website disampaikan dengan berbagai

bentuk seperti text, audio, video, bahkan

teknologi streaming.

Prinsip-prinsip belajar yang mendasari

media ini adalah sebagai berikut (Filbeck,

1974 dalam Atwi Suparman ,1997) :

a. Respon-respon baru diulang

sebagai akibat dari respon tertentu.

Implikasinya pemberian umpan

balik positif dengan segera atas

keberhasilan siswa sangat perlu.

b. Perilaku tidak hanya dikontrol oleh

akibat dari respon, tetapi juga

dibawah pengaruh kondisi atau

tanda-tanda yang terdapat pada

lingkungan belajar. Implikasinya

menyatakan tujuan pembelajaran

secara jelas kepada siswa adalah

sangat perlu.

c. Perilaku yang ditimbulkan oleh

tanda-tanda tertentu akan hilang

atau berkurang frekuensinya bila

tidak diperkuat dengan pemberian

balikan yang menyenangkan.

d. Belajar yang berbentuk respon

terhadap tanda-tanda yang terbatas

akan ditransfer kepada situasi lain

yang terbatas pula oleh karena itu

penggunaan media sangat

diperlukan.

Menu

Utama

Topik

SubTopik

Menu Utama

Topik

Sub Topik

Page 8: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

e. Status mental siswa akan

berpengaruh pada perhatian dan

ketekunan selama proses belajar.

f. Kegiatan belajar dibagi menjadi

langkah-langkah kecil dan disertai

umpan balik untuk penyelesaian

setiap langkah akan membantu

siswa.

g. Urutan pelajaran harus dimulai dari

yang sederhana dan secara bertahap

menuju kepada yang lebih

kompleks.

h. Dalam pembelajaran siswa diberi

kebebasan dalam memilih waktu,

cara, dan sumber - sumber yang

lain.

Model Media Berbasis Web

Berdasarkan media dan tingkat

interaktifitas , media pembelajaran

berbasis web yang telah diidentifikasikan

terdiri dari:

a. Teks dan Grafik web-based

instructional media.

Teks dan Grafik adalah bentuk

yang paling sederhana dalam web

based learning program. Hanya

menyimpan materi-materi

pembelajaran di dalam web dan

murid dapat mengaksesnya dengan

mudah. Karena hanya

menampilkan teks dan grafik saja,

level interaktifitas dari model web

based learning seperti ini sangat

rendah.

b. Interaktif.

Model seperti ini memiliki level

interaktifitas yang lebih tinggi

dibanding model yang pertama.

Model ini dilengkapi dengan

sarana-sarana latihan atau self-test,

text entry, column matching, dan

lain-lain.

c. Multimedia Interaktif.

Kebanyakan program belajar

dengan menggunakan model

seperti ini biasanya bisa membuat

interaksi antara guru dan murid

secara real-time melalui audio dan

video streaming, interactive web

discussion, bahkan audio/video

desktop conference. Level

interaktifitas model ketiga ini

paling tinggi diantara yang lainnya

dan paling rumit dalam

pelaksanaannya, dengan model ini

diharapkan dapat mencakup semua

kondisi belajar-mengajar pada

kelas tatap muka.

Manfaat Media Pembelajaran Berbasis

Web

Secara umum penerapan media

pembelajaran berbasis web dapat

memberikan manfaat sebagai berikut :

a. Peningkatan produktifitas, melalui

web-based instructional media

waktu untuk perjalanan dapat

direduksi sehingga mahasiswa,

dosen/pakar tidak akan hilang

karena kegiatan perjalanan yang

harus dilakukan untuk memberikan

pembelajaran.

b. Fleksibilitas dan interaktif, dapat

dilakukan dari lokasi mana saja

selama memiliki koneksi sumber

pengetahuan tersebut dan

interaktifitas dimungkinkan secara

langsung.

c. Kelas tidak mengutamakan bentuk

fisik lagi, semuanya dapat

digunakan dalam aplikasi internet.

d. Program web-based instructional

media dapat dilaksanakan dan di

update secara cepat.

Page 9: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

e. Dapat diciptakan interaksi yang

bersifat real time, seperti chatting,

Net Meeting maupun non real time

seperti e-mail, mailing list.

f. Dapat mengakomodasikan

keseluruhan proses belajar mulai

dari registrasi, penyamaan materi,

diskusi dan evaluasi.

g. Dosen/pakar dapat secara cepat

menambah referensi bahan ajar

yang bersifat studi kasus, trend

industri, dan proyeksi teknologi ke

depan melalui berbagai sumber

untuk menambah wawasan peserta

terhadap bahan ajarnya.

Kelemahan Media Pembelajaran

Berbasis Web

Adapun kelemahan media pembelajaran

berbasis web adalah sebagai berikut :

a. Buruknya atau kurang

terencananya perancangan aplikasi

web learning sehingga kurang

sesuai dengan kebutuhan. Seperti :

tidak user friendly.

b. Para pengguna atau mahasiswa

tidak mengetahui dan mengenal

secara baik sistem yang digunakan

akibat kurangnya sosialisasi.

c. Lemahnya pengetahuan pengguna

tentang teknologi internet.

Untuk dapat mengatasi hal

tersebut yang kemungkinan timbul

dalam penerapan teknologi web-

based instructional media. Maka

dipertimbangkan hal-hal sebagai

berikut :

1) Pemahaman yang utuh tentang

peranan teknologi internet

pada pengguna.

2) Sosialisasi yang memadai

terhadap penerapan teknologi

web based learning kepada

pengguna.

PHP (Hypertext Preprocessor)

PHP (akronim dari PHP Hypertext

Preprocessor) yang merupakan bahasa

pemrogramman berbasis web yang

memiliki kemampuan untuk memproses

data dinamis. PHP juga merupakan bahasa

pemrograman script yang paling banyak

dipakai saat ini. PHP banyak dipakai untuk

memrogram situs web dinamis, walaupun

tidak tertutup kemungkinan digunakan

untuk pemakaian lain.

PHP dikatakan sebagai sebuah

server-side embedded script language

artinya sintaks-sintaks dan perintah yang

diberikan akan sepenuhnya dijalankan oleh

server tetapi disertakan pada halaman

HTML biasa. Aplikasi-aplikasi yang

dibangun oleh PHP pada umumnya akan

memberikan hasil pada web browser,

tetapi prosesnya secara keseluruhan

dijalankan di server.

Pada prinsipnya server akan bekerja

apabila ada permintaan dari client. Dalam

hal ini client menggunakan kode-kode

PHP untuk mengirimkan permintaan ke

server (dapat dilihat pada gambar

dibawah). Ketika menggunakan PHP

sebagai server-side embedded script

language maka server akan melakukan

hal-hal sebagai berikut :

1. Membaca permintaan dari

client/browser

2. Mencari halaman/page di server

3. Melakukan instruksi yang diberikan

oleh PHP untuk melakukan modifikasi

pada halaman/page.

4. Mengirim kembali halaman tersebut

kepada client melalui internet atau

intranet.

Page 10: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Gambar 2.14 PHP sebagai server-side

embedded script language

Kelebihan PHP

Beberapa keuntungan dari bahasa

pemrograman PHP yaitu:

1) Bahasa pemrograman PHP adalah

sebuah bahasa script yang tidak

melakukan sebuah kompilasi dalam

penggunaanya.

2) Web Server yang mendukung PHP

dapat ditemukan dimana - mana dari

mulai apache,

3) IIS, Lighttpd, nginx, hingga Xitami

dengan konfigurasi yang relatif

mudah.Dalam sisi pengembangan

lebih mudah, karena banyaknya milis-

milis dan developer yang siap

membantu dalam pengembangan.

4) Dalam sisi pemahamanan, PHP adalah

bahasa scripting yang paling mudah

karena memiliki referensi yang

banyak.

5) PHP adalah bahasa open source yang

dapat digunakan di berbagai mesin

(Linux, Unix, Macintosh, Windows)

dan dapat dijalankan secara runtime

melalui console serta juga dapat

menjalankan perintah-perintah system.

MySQL

MySQL merupakan software

sistem manajemen basis data SQL (bahasa

Inggris: database management system)

atau DBMS yang multithread dan multi-

user. MySQL AB membuat MySQL

tersedia sebagai software gratis dibawah

lisensi GNU General Public License

(GPL), tetapi mereka juga menjual

dibawah lisensi komersial untuk kasus-

kasus dimana penggunaannya tidak cocok

dengan penggunaan GPL. MySQL dimiliki

dan disponsori oleh sebuah perusahaan

komersial Swedia MySQL AB, dimana

memegang hak cipta hampir atas semua

kode sumbernya. Kedua orang Swedia dan

satu orang Finlandia yang mendirikan

MySQL AB adalah: David Axmark, Allan

Larsson, dan Michael "Monty" Widenius.

Adobe Dreamweaver CS

Adobe Dreamweaver merupakan

program penyunting halaman web

keluaran Adobe Systems yang dulu

dikenal sebagai Macromedia

Dreamweaver keluaran Macromedia.

Program ini banyak digunakan oleh

pengembang web karena fitur-fiturnya

yang menarik dan kemudahan

penggunaannya. Versi terakhir

Macromedia Dreamweaver sebelum

Macromedia dibeli oleh Adobe Systems

yaitu versi 8. Versi terakhir Dreamweaver

keluaran Adobe Systems adalah versi 11

yang ada dalam Adobe Creative Suite 5

(sering disingkat Adobe CS5).

Notepad++

Notepad + + adalah editor kode

sumber bebas dan pengganti Notepad yang

mendukung beberapa bahasa. Berjalan di

lingkungan Windows MS, penggunaannya

diatur oleh Lisensi GPL.

Berdasarkan mengedit komponen

Scintilla kuat, Notepad + + ditulis dalam C

+ + dan murni menggunakan Win32 API

dan STL yang menjamin kecepatan

eksekusi lebih tinggi dan ukuran program

Page 11: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

yang lebih kecil. Dengan mengoptimalkan

rutin sebanyak mungkin tanpa kehilangan

kemudahan, Notepad + + sedang mencoba

untuk mengurangi emisi karbon dioksida

dunia. Bila menggunakan lebih sedikit

power CPU, PC dapat throttle ke bawah

dan mengurangi konsumsi daya, sehingga

lingkungan lebih hijau.

Adobe Flash CS

Adobe Flash (dahulu bernama

Macromedia Flash) adalah salah satu

perangkat lunak komputer yang

merupakan produk unggulan Adobe

Systems. Adobe Flash digunakan untuk

membuat gambar vektor maupun animasi

gambar tersebut. Berkas yang dihasilkan

dari perangkat lunak ini mempunyai file

extension .swf dan dapat diputar di

penjelajah web yang telah dipasangi

Adobe Flash Player. Flash menggunakan

bahasa pemrograman bernama

ActionScript yang muncul pertama kalinya

pada Flash5.

Sebelum tahun 2005, Flash dirilis

oleh Macromedia. Flash 1.0 diluncurkan

pada tahun 1996 setelah Macromedia

membeli program animasi vektor bernama

FutureSplash. Versi terakhir yang

diluncurkan di pasaran dengan

menggunakan nama 'Macromedia' adalah

adalah Macromedia Flash 8. Pada tanggal

3 Desember 2005 Adobe Systems

mengakuisisi Macromedia dan seluruh

produknya, sehingga nama Macromedia

Flash berubah menjadi Adobe Flash.

Adobe Flash merupakan sebuah

program yang didesain khusus oleh Adobe

dan program aplikasi standar authoring

tool professional yang digunakan untuk

membuat animasi dan bitmap yang sangat

menarik untuk keperluan pembangunan

situs web yang interaktif dan dinamis.

Flash didesain dengan kemampuan untuk

membuat animasi 2 dimensi yang handal

dan ringan sehingga flash banyak

digunakan untuk membangun dan

memberikan efek animasi pada website,

CD Interaktif dan yang lainnya. Selain itu

aplikasi ini juga dapat digunakan untuk

membuat animasi logo, movie, game,

pembuatan navigasi pada situs web,

tombol animasi, banner, menu interaktif,

interaktif form isian, e-card, screen saver

dan pembuatan aplikasi-aplikasi web

lainnya. Dalam Flash, terdapat teknik-

teknik membuat animasi, fasilitas action

script, filter, custom easing dan dapat

memasukkan video lengkap dengan

fasilitas playback FLV. Keunggulan yang

dimiliki oleh Flash ini adalah ia mampu

diberikan sedikit code pemograman baik

yang berjalan sendiri untuk mengatur

animasi yang ada didalamnya atau

digunakan untuk berkomunikasi dengan

program lain seperti HTML, PHP, dan

Database dengan pendekatan XML, dapat

dikolaborasikan dengan web, karena

mempunyai keunggulan antara lain kecil

dalam ukuran file outputnya

Movie-movie Flash memiliki

ukuran file yang kecil dan dapat

ditampilkan dengan ukuran layar yang

dapat disesuaikan dengan keingginan.

Aplikasi Flash merupakan sebuah standar

aplikasi industri perancangan animasi web

dengan peningkatan pengaturan dan

perluasan kemampuan integrasi yang lebih

baik. Banyak fiture-fiture baru dalam

Flash yang dapat meningkatkan kreativitas

dalam pembuatan isi media yang kaya

dengan memanfaatkan kemampuan

aplikasi tersebut secara maksimal. Fiture-

fiture baru ini membantu untuk lebih

memusatkan perhatian pada desain yang

dibuat secara cepat, bukannya memusatkan

pada cara kerja dan penggunaan aplikasi

tersebut. Flash juga dapat digunakan untuk

mengembangkan secara cepat aplikasi-

aplikasi web yang kaya dengan pembuatan

script tingkat lanjut. Di dalam aplikasinya

juga tersedia sebuah alat untuk men-debug

script. Dengan menggunakan Code hint

untuk mempermudah dan mempercepat

pembuatan dan pengembangan isi

ActionScript secara otomatis.

Page 12: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Adobe Premiere Pro

Adobe Premiere Pro adalah sebuah

program penyunting video. Itu adalah

sebagian dari Adobe Creative Suite,

walaupun bisa dibeli sendirian. Bahkan

kalau dibeli sendirian, itu termasuk Adobe

Encore dan Adobe OnLocation. Walaupun

yang dua versi pertama hanya tersedia

untuk Windows, versi CS3 tersedia baik

untuk Windows maupun Mac OS X. CS3

tersedia dalam Bahasa Inggris, Bahasa

Perancis, Bahasa Jerman, Bahasa Jepang,

Bahasa Italia, dan Bahasa Spanyol.

Format Factory

Format Factory atau biasa disebut

FF adalah program freeware alias

GRATIS, fitur lengkap, konverter yang

memungkinkan untuk mengkonversi

audio, video, dan bahkan gambar, antara

format yang paling populer. Ini termasuk

WMV, AVI, MPG, MP3, WMA, AAC,

JPG, PNG, GIF, dan banyak lagi. Lebih

baik lagi, Pabrik Format mendukung

format media yang digunakan oleh

perangkat portabel yang paling utama,

termasuk PSP dan iPhone.

Format Factory ini sangat mudah

digunakan, meskipun agak tidak memiliki

“unintuitive interface”. File browser tidak

muncul sampai dipilih format targetnya.

Yang membuat Format Factory sangat

berguna adalah bahwa ia menangani

gambar serta audio dan video. Kebanyakan

converter seperti ini hanya menangani

gambar audio dan video, dan

menambahkan ke campuran itu

memberikan kelebihan, terutama

mengingat gratis. Ini merupakan

perkumpulan Audio dalam Format

Factory, yang memungkinkan untuk

mengambil dua klip terpisah, bergabung

dengan mereka bersama-sama dan

kemudian mengubah mereka. Pasti

menyenangkan memiliki profil preset

untuk konversi mobile tetapi tidak bisa

memiliki semuanya dalam sebuah aplikasi

gratis.

Ulead Video Studio 9

Aplikasi Ulead Video Studio

adalah sebagai salah satu piranti untuk

membuat video, gambar, dan mengolah

suara/musik.

XAMPP

XAMPP adalah perangkat lunak

bebas, yang mendukung banyak sistem

operasi, merupakan kompilasi dari

beberapa program.

Fungsinya adalah sebagai server

yang berdiri sendiri (localhost), yang

terdiri atas program Apache HTTP Server,

MySQL database, dan penerjemah bahasa

yang ditulis dengan bahasa pemrograman

PHP dan Perl. Nama XAMPP merupakan

singkatan dari X (empat sistem operasi

apapun), Apache, MySQL, PHP dan Perl.

Program ini tersedia dalam GNU General

Public License dan bebas, merupakan web

server yang mudah digunakan yang dapat

melayani tampilan halaman web yang

dinamis. Untuk mendapatkanya dapat

men-download langsung dari web

resminya.

Teori Pengujian Distribusi Frekuensi

Data kuantitatif yang dikumpulkan

dari lapangan (data mentah), nilainya tidak

selalu sama atau seragam tetapi bervariasi

dari satu pengamatan ke pengamatan yang

lain, misalnya data hasil produksi, data

hasil penjualan, data tingkat konsumsi dan

lain-lain. Jika data hasil pengamatan di

lapangan mempunyai jumlah yang besar

maka data mentah tersebut perlu diolah

dengan cara meringkas data tersebut dan

didistribusikan ke dalam kelas atau

kategori.

Suatu tabel yang berisi susunan

data yang terbagi ke dalam beberapa

frekuensi kelas disebut Distribusi

Frekuensi atau Tabel Frekuensi. Dengan

disajikannya data dalam bentuk distribusi

frekuensi maka akan memudahkan bagi

pihak yang berkepentingan terhadap data

Page 13: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

tersebut untuk melakukan analisis data,

dibandingkan jika data yang disajikan

masih berupa data mentah dan dalam

jumlah yang banyak.

Teori-teori Belajar.

a. Teori Behaviorisme

Behaviorisme merupakan salah

satu aliran psikologi yang memandang

individu hanya dari sisi fenomena

jasmaniah, dan mengabaikan aspek–

aspek mental. Dengan kata lain,

behaviorisme tidak mengakui adanya

kecerdasan, bakat, minat dan perasaan

individu dalam suatu belajar. Peristiwa

belajar semata-mata melatih refleks-

refleks sedemikian rupa sehingga

menjadi kebiasaan yang dikuasai

individu. Beberapa hukum belajar yang

dihasilkan dari pendekatan

behaviorisme ini, diantaranya :

1. Connectionism ( S-R Bond)

menurut Thorndike.

Dari eksperimen yang

dilakukan Thorndike terhadap

kucing menghasilkan hukum-

hukum belajar.

2. Classical Conditioning menurut

Ivan Pavlov

Dari eksperimen yang

dilakukan Pavlov terhadap seekor

anjing menghasilkan hukum-

hukum belajar.

3. Operant Conditioning menurut

B.F. Skinner

Dari eksperimen yang

dilakukan B.F. Skinner terhadap

tikus dan selanjutnya terhadap

burung merpati menghasilkan

hukum-hukum belajar.

4. Social Learning menurut Albert

Bandura

Teori belajar sosial atau disebut

juga teori observational learning

adalah sebuah teori belajar yang

relatif masih baru dibandingkan

dengan teori-teori belajar lainnya.

Berbeda dengan penganut

Behaviorisme lainnya, Bandura

memandang Perilaku individu tidak

semata-mata refleks otomatis atas

stimulus (S-R Bond), melainkan

juga akibat reaksi yang timbul

sebagai hasil interaksi antara

lingkungan dengan skema kognitif

individu itu sendiri. Prinsip dasar

belajar menurut teori ini, bahwa

yang dipelajari individu terutama

dalam belajar sosial dan moral

terjadi melalui peniruan (imitation)

dan penyajian contoh perilaku

(modeling). Teori ini juga masih

memandang pentingnya

conditioning. Melalui pemberian

reward dan punishment, seorang

individu akan berfikir dan

memutuskan perilaku sosial mana

yang perlu dilakukan.

Sebetulnya masih banyak

tokoh-tokoh lain yang

mengembangkan teori belajar

behavioristik ini, seperti : Watson

yang menghasilkan prinsip

kekerapan dan prinsip kebaruan,

Guthrie dengan teorinya yang

disebut Contiguity Theory yang

menghasilkan Metode Ambang

(the treshold method), metode

meletihkan (The Fatigue Method)

dan Metode rangsangan tak serasi

(The Incompatible Response

Method), Miller dan Dollard

dengan teori pengurangan

dorongan.

Page 14: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

b. Teori Belajar Kognitif menurut

Piaget

Piaget merupakan salah seorang

tokoh yang disebut-sebut sebagai

pelopor aliran konstruktivisme. Salah

satu sumbangan pemikirannya yang

banyak digunakan sebagai rujukan

untuk memahami perkembangan

kognitif individu yaitu teori tentang

tahapan perkembangan individu.

Menurut Piaget bahwa perkembangan

kognitif individu meliputi empat tahap

yaitu : (1) sensory motor; (2) pre

operational; (3) concrete operational

dan (4) formal operational. Pemikiran

lain dari Piaget tentang proses

rekonstruksi pengetahuan individu

yaitu asimilasi dan akomodasi. James

Atherton (2005) menyebutkan bahwa

asimilasi adalah “the process by which

a person takes material into their

mind from the environment, which

may mean changing the evidence of

their senses to make it fit” dan

akomodasi adalah “the difference

made to one’s mind or concepts by the

process of assimilation”

c. Teori Pemrosesan Informasi dari

Robert Gagne

Asumsi yang mendasari teori ini

adalah bahwa pembelajaran merupakan

faktor yang sangat penting dalam

perkembangan. Perkembangan

merupakan hasil kumulatif dari

pembelajaran. Menurut Gagne bahwa

dalam pembelajaran terjadi proses

penerimaan informasi, untuk kemudian

diolah sehingga menghasilkan keluaran

dalam bentuk hasil belajar. Dalam

pemrosesan informasi terjadi adanya

interaksi antara kondisi-kondisi internal

dan kondisi-kondisi eksternal individu.

Kondisi internal yaitu keadaan dalam

diri individu yang diperlukan untuk

mencapai hasil belajar dan proses

kognitif yang terjadi dalam individu.

Sedangkan kondisi eksternal adalah

rangsangan dari lingkungan yang

mempengaruhi individu dalam proses

pembelajaran.

Menurut Gagne tahapan proses

pembelajaran meliputi delapan fase

yaitu, (1) motivasi; (2) pemahaman;

(3) pemerolehan; (4) penyimpanan;

(5) ingatan kembali; (6) generalisasi;

(7) perlakuan dan (8) umpan balik.

d. Teori Belajar Gestalt

Gestalt berasal dari bahasa

Jerman yang mempunyai padanan

arti sebagai “bentuk atau

konfigurasi”. Pokok pandangan

Gestalt adalah bahwa obyek atau

peristiwa tertentu akan dipandang

sebagai sesuatu keseluruhan yang

terorganisasikan. Menurut Koffka

dan Kohler, ada tujuh prinsip

organisasi yang terpenting yaitu :

1. Hubungan bentuk dan latar (figure

and gound relationship); yaitu

menganggap bahwa setiap bidang

pengamatan dapat dibagi dua yaitu

figure (bentuk) dan latar belakang.

Penampilan suatu obyek seperti

ukuran, potongan, warna dan

sebagainya membedakan figure

dari latar belakang. Bila figure dan

latar bersifat samar-samar, maka

akan terjadi kekaburan penafsiran

antara latar dan figure.

2. Kedekatan (proxmity); bahwa

unsur-unsur yang saling berdekatan

(baik waktu maupun ruang) dalam

bidang pengamatan akan

dipandang sebagai satu bentuk

tertentu.

3. Kesamaan (similarity); bahwa

sesuatu yang memiliki kesamaan

cenderung akan dipandang sebagai

suatu obyek yang saling memiliki.

4. Arah bersama (common direction);

bahwa unsur-unsur bidang

pengamatan yang berada dalam

arah yang sama cenderung akan

Page 15: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

dipersepsi sebagi suatu figure atau

bentuk tertentu.

5. Kesederhanaan (simplicity); bahwa

orang cenderung menata bidang

pengamatannya bentuk yang

sederhana, penampilan reguler dan

cenderung membentuk keseluruhan

yang baik berdasarkan susunan

simetris dan keteraturan; dan

6. Ketertutupan (closure) bahwa

orang cenderung akan mengisi

kekosongan suatu pola obyek atau

pengamatan yang tidak lengkap.

Telaah Prosa Inggris

Sastra Anglo-Saxon atau sastra

Inggris Kuno meliputi sastra yang ditulis

dalam bahasa Inggris Kuno pada periode

pasca Romawi dari kurang lebih

pertengahan abad ke-5 sampai

pada Penaklukan Norman tahun 1066.

Karya-karya ini mencakup genre seperti

sajak wiracarita, hagiografi, khotbah,

terjemahan Alkitab, undang-undang,

kronik, teka-teki, dan lain-lain. Secara

total ada sekitar 400 manuskrip yang

terlestarikan dari masa ini, sebuah korpus

penting baik bagi khalayak ramai atau para

peneliti.

Beberapa karya penting termasuk

syair Beowulf, yang telah mencapai status

wiracarita nasional di Britania. Kronik

Anglo-Saxon merupakan koleksi awal

sejarah Inggris. Himne Cædmon dari abad

ke-7 adalah salah satu tulisan tertua dalam

bahasa Inggris yang terlestarikan.

Sastra Inggris Kuno telah

melampaui beberapa periode penelitian

yang berbeda-beda. Pada abad ke-

19 dan abad ke-20 awal, fokusnya

terutama ialah akarJermanik bahasa

Inggris, lalu aspek kesusastraannya mulai

ditekankan, dan dewasa ini fokusnya

terutama pada paleografi dan naskah

manuskripnya sendiri: para peneliti

mendiskusikan beberapa isyu seperti:

pentarikhan manuskrip, asal, penulisan,

dan hubungan antara budaya Anglo-Saxon

atau Inggris Kuno dengan benua Eropa

secara umum pada Abad Pertengahan.

a. Puisi Inggris Kuno

Puisi Inggris Kuno dibagi

menjadi dua jenis, puisi heroik pra-

Kristen Jermanik dan puisi Kristen.

Secara sebagian besar puisi-puisi ini

terlestarikan dalam empat manuskrip.

Manuskrip pertama disebut

sebagai Naskah Junius (juga dikenal

sebagai Naskah Caedmon), yang

merupakan sebuah antologi puisi

bersungging. Manuskrip kedua

disebut Buku Exeter, juga merupakan

sebuah antologi, dan terletak

di Katedral Exeter karena telah

dihibahkan ke sana semenjak abad ke-

11. Manuskrip ketiga disebut Buku

Vercelli, sebuah campuran antara puisi

dan prosa. Buku ini sekarang terletak

di Vercelli, Italia. Sampai sekarang

belum ada yang bisa memastikan

mengapa buku ini bisa sampai di Italia

dan masih merupakan bahan

perdebatan. Manuskrip keempat

adalah Codex Nowell, yang juga

merupakan campuran antara prosa dan

puisi.

Bangsa Inggris Kuno tidak

meninggalkan kaidah puisi atau sistem

eksplisit; semua yang diketahui

mengenai puisi pada masa ini ialah

berdasarkan analisis modern. Teori

pertama yang diterima secara luas

disusun oleh Eduard Sievers (1885).

Ia membedakan lima

pola aliterasiyang berbeda-beda.

Teori John C. Pope (1942), yang

menggunakan notasi musik untuk

melacak lima pola, telah diterima di

beberapa kalangan; beberapa tahun

sekali sebuah teori baru muncul dan

topik ini masih tetap diperdebatkan

secara hangat.

Page 16: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Pengertian yang paling populer

dan dikenal luas mengenai puisi

Inggris Kuno masih tetap teori sajak

aliterasi Sievers. Sistem ini

berdasarkan aksen, aliterasi, kuantitas

vokal, dan pola aksentuasi

berdasarkan suku kata. Sistem ini

terdiri atas lima permutasi pada

sebuah skema sajak dasar; sembarang

dari lima jenis ini bisa dipakai pada

semua bentuk puisi. Sistem ini

diwarisi dari sistem serupa

pada bahasa Jermanik tua lainnya.

Dua majas yang secara umum

ditemukan pada puisi Inggris Kuno

adalah kenning, sebuah frasa

formulais yang melukiskan sesuatu

menggunakan istilah lainnya

(misalkan dalam Beowulf, lautan

disebut sebagai "jalan angsa")

dan litotes, sebuah eufemisme

dramatis yang dipakai oleh sang

penulis untuk mendapatkan efek

dramatis.

Secara kasar, bait-bait puisi

Inggris Kuno dibagi oleh sebuah jeda

pada bagian tengah; jeda ini

disebut caesura. Setiap paruh bait

memiliki dua suku kata yang

mendapatkan tekanan. Suku kata

pertama yang mendapatkan tekanan

pada paruh bait kedua harus

beraliterasi dengan satu atau kedua

suku kata yang mendapatkan tekanan

pada paruh pertama bait (artinya tentu

saja, ialah bahwa suku kata yang

mendapatkan tekanan pada paruh

pertama bisa beraliterasi satu sama

lain). Suku kata kedua yang

mendapatkan tekanan tidak boleh

beraliterasi baik suku kata yang

mendapat tekanan manapun pada

paruh pertama. Puisi Inggris Kuno

merupakan sebuah kesenian lisan, dan

pengertian daripadanya dalam bentuk

tulisan tidaklah lengkap; sebagai

contoh, untuk mengetahui bahwa sang

penyair (dirujuk sebagai sang Scop)

bisa saja diiringi dengan sebuah harpa,

dan kemungkinan ada tradisi lisan

lainnya yang tidak diketahui.

Puisi mewakili jumlah terkecil

sastra Inggris Kuno yang terlestarikan,

tetapi budaya Inggris Kuno memiliki

tradisi narasi lisan kaya, di mana

bentuk tertulisnya yang terlestarikan

sangatlah sedikit.

b. Para Penyair

Kebanyakan penyair Inggris

Kuno tidak dikenal namanya; duabelas

di antara mereka dikenal berkat

sumber-sumber dari Abad

Pertengahan, tetapi hanya empat yang

bisa dikenali cukup pasti berkat karya

mereka dalam bahasa rakyat

semasa: Caedmon, Bede, Alfred,

dan Cynewulf. Dari mereka

hanya Caedmon, Bede,

dan Alfred yang memiliki biografi

yang dikenal.

Caedmon adalah yang paling

dikenal dan dianggap Bapak puisi

Inggris Kuno. Ia hidup di

biara Whitby di Northumbria

pada abad ke-7. . Hanya ada satu puisi

sembilan baris yang masih

terlestarikan, dan disebut Himne

Caedmon.

Ciri – Ciri Puisi Inggris Kuno

a. Simile Dan Metafora

Puisi Inggris Kuno memiliki

ciri bahwa dalam tipe ini secara relatif

tidak banya simile. Ini merupakan ciri

khas gaya penulisan puisi Inggris

Kuno dan merupakan akibat dari baik

strukturnya, maupun kecepatan di

mana lukisan-lukisan diterapkan dan

dengan ini tidak bisa untuk secara

efektif mendukung majas simile yang

luas. Sebagai contoh,

wiracarita Beowulf memuat paling

banyak lima simile, dan semuanya

dalam bentuk pendek. Di sisi lain hal

ini sungguh bertolak belakang dengan

Page 17: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

ketergantungan puisi Inggris Kuno

terhadap penggunaan metafora,

terutama yang dicapai dengan

penggunaan kennings. Contoh yang

paling menonjol terdapat di The

Wanderer di mana sebuah

pertempuran dirujuk sebagai "badai

tombak". Cara perujukan terhadap

pertempuran seperti ini memberikan

kesempatan untuk melihat bagaimana

orang Inggris Kuno memandang

sebuah pertempuran: sebagai tak

terduga, kacau, kejam, dan mungkin

bahkan merupakan sebuah tugas dari

alam. Dengan unsur-unsur gaya dan

tematik inilah seseorang harus

menghadapi puisi Inggris Kuno.

b. Aliterasi

Puisi Inggris Kuno secara

tradisional beraliterasi. Artinya ialah

bahwa bunyi-bunyi (biasanya

konsonan pada posisi awal) diulang-

ulang pada baris yang sama. Sebagai

contoh di Beowulf terdapatkan pada

baris weras on wil-siþ wudu

bundenne"seseorang pada perjalanan

yang diinginkan menuju ke kapal",

kebanyakan kata-kata beraliterasi pada

konsonan "w". Bentuk aliterasi ini

sungguh tersebar luas dan penting

sehingga pada baris Beowulf yang

baru dikutip ini, kemungkinan sang

penyair bermula menggunakan

kata wil-siþ ("perjalanan yang

diinginkan" gagasan terpenting baris

ini) dan lalu meletakkan kata-kata

lainnya di baris ini yang beraliterasi

dengannya. Sungguh pentinglah

aliterasi sehingga hal inilah yang

menjadi esensi baris secara

keseluruhan. Hal ini bukanlah sesuatu

hal yang aneh pada studi tradisi

lisan pada transkripsi.

c. Jeda

Puisi Inggris Kuno juga

memiliki ciri khas adanya pembagian

baris berupa jeda Jerman (caesura).

Selain menambah tempo setiap baris,

jeda ini juga mengelompokkan setiap

baris menjadi dua kuplet.

d. Elaborasi

Puisi Inggris Kuno memiliki

gaya dramatis tempo yang cepat, dan

dengan ini cenderung tidak

terpengaruh oleh hiasan luas yang

bisa, katakan, ditemukan pada sastra

Keltik pada masa yang sama.

Di mana seorang penyair

Keltik kontemporer bisa

menggunakan 3 atau 4 simile, seorang

penyair Inggris Kuno bisa saja hanya

memasukkan sebuah kenning saja

sebelum dengan cepat melanjutkan

alur cerita.

Prosa Inggris Kuno

Jumlah karya prosa Inggris Kuno

yang terlestarikan jauh lebih besar

daripada jumlah puisi. Dari karya prosa

yang terlestarikan, sebagian besar

merupakan khotbah dan terjemahan dari

karya agama dalam bahasa Latin. Prosa

Inggris Kuno pertama muncul pada abad

ke-9, dan berlanjut disalin sampai ke abad

ke-12.

a. Prosa Kristen

Penulis Inggris Kuno yang

paling dikenal luas adalah Raja

Alfred, yang menterjemahkan banyak

buku dari bahasa Latin ke bahasa

Inggris Kuno. Terjemahan ini

termasuk: The Pastoral Care karya

Gregorius Agung, sebuah buku

pedoman bagi para pastor tentang

bagaimana mereka harus bertindak

melaksanakan kewajiban mereka; The

Consolation of Philosophy oleh

Boethius; dan The Soliloquies karya

Santo Agustinus. Alfred juga

bertanggung jawab untuk

menerjemahkan 50 Mazmur ke dalam

bahasa Inggris Kuno. Banyak

terjemahan penting Inggris Kuno

Page 18: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

lainnya diselesaikan oleh mitra-mitra

Alfred termasuk: The History of the

World oleh Orosius, sebuah karya

untuk mengiringi The City of

God karya Agustinus dari Hippo;

Dialog Gregorius Agung;

dan Ecclesiastical History of the

English People oleh Bede.

Ælfric dari Eynsham, menulis

pada abad ke-10 akhir dan abad ke-11

awal. Ialah yang paling besar dan

paling aktif sebagai penulis khotbah

Inggris Kuno, yang disalin dan

disesuaikan terus untuk digunakan

sampai ke abad ke-13. Ia juga menulis

sejumlah riwayat hidup orang suci,

sebuah karya Inggris Kuno mengenai

penghitungan waktu, surat-surat

pastoral, terjemahan enam kitab

pertama Alkitab, terjemahan

antarbaris dan terjemahan bagian-

bagian lainnya dari Alkitab

termasuk Kitab Amsal, Kitab

Kebijaksanaan, dan Kitab Yesus bin

Sirakh.

Terdapat pada kategori yang

sama seperti Aelfric, dan orang

semasa adalah Wulfstan II, uskup

agung York. Khotbah-khotbahnya

sungguh stilistik. Karyanya yang

paling ternama adalah Sermo Lupi ad

Anglos di mana ia menyalahkan dosa-

dosa orang Britania sehingga sampai

diinvasi orang Viking. Ia juga menulis

sejumlah teks-teks hukum

kerohanian Institutes of

Polity dan Canons of Edgar.

Salah satu teks tertua Inggris

Kuno dalam bentuk prosa

adalah Martyrology, informasi

mengenai orang suci dan martir

menurut hari lahir mereka dan hari

raya dalam kalender gerejawi. Teks

ini terlestarikan pada enam fragmen.

Diyakini teks ini berasal dari abad ke-

9 oleh seorang

penulis Mercia anonim.

Kumpulan tertua khotbah

gerejawi adalah Homili

Blickling dalam Buku Vercelli dan

berasal dari abad ke-10.

Terdapat sejumlah riwayat

hidup orang suci dalam karya prosa.

Selain yang ditulis oleh Aelfric

terdapat pula karya prosa mengenai

riwayat hidup Santao Guthlac (Buku

Vercelli), riwayat hidup Santa

Margaret dan riwayat hidup Santo

Chad. Selain itu ada empat riwayat

hidup di manuskrip Julius: Tujuh

Orang Tidur dari Efesus, Santa Maria

dari Mesir, Santo Eustacius, dan Santo

Euphrosynus.

Lalu terdapat banyak

terjemahan Inggris Kuno dari banyak

bagian Alkitab. Aelfric

menterjemahkan enam kitab pertama

(Hexateuch). Kemudian ada pula

terjemahan Injil. Yang paling populer

adalah Injil Nikodemus, yang lain

termasuk Injil Pseudo-

Matius, Vindicta salvatoris, Wahyu

Santo Paulus dan Wahyu Thomas".

Salah satu korpus terbesar teks

Inggris Kuno terdapat pada teks-teks

hukum yang dikumpulkan dan

diselamatkan oleh rumah-rumah

ibadah. Teks-teks ini termasuk

bermacam-macam jenis: catatan

tentang sumbangan kaum bangsawan,

surat wasiat, dokumen emansipasi,

daftar buku-buku dan relikwi, risalah

sidang pengadilan, dan peraturan

berserikat. Semua teks-teks ini

menyajikan informasi berharga

mengenai sejarah sosial masa Inggris

Kuno, namun mereka juga memiliki

nilai kesusastraan. Sebagai contoh,

beberapa kasus persidangan menarik

dilihat dari sudut pandang penggunaan

retorikanya.

Page 19: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

b. Prosa sekuler

Kronik Anglo-

Saxon kemungkinan dimulai pada

masa Raja Alfred dan berlanjut lebih

dari 300 tahun sebagai catatan historis

mengenai sejarah Anglo-Saxon.

Sebuah contoh tunggal roman

(cerita hikayat) klasik terlestarikan, ini

merupakan sebuah fragmen dari

terjemahan Latin Apollonius dari

Tyana oleh Philostratus (220 Masehi),

dari abad ke-11.

Seorang biarawan yang menulis

dalam bahasa Inggris Kuno pada masa

yang sama seperti Aelfric dan

Wulfstan adalah Byrhtferth dari

Ramsey, di mana buku-

bukunya Handboc dan Manual merupa

kan makalah matematika dan retorika.

Aelfric juga menulis dua karya

neo-

sains, Hexameron dan Interrogationes

Sigewulfi, yang membicarakan cerita

Penciptaan. Ia juga menulis sebuah

tatabahasa dan glosarium dalam bahasa

Inggris Kuno yang disebut Latin, yang

kemudian dipakai oleh para peneliti

yang tertarik untuk

mempelajarai bahasa Perancis

Kuno karena karya ini diberi

terjemahan antarbaris dalam bahasa

Perancis Kuno.

Lalu banyak pula pedoman dan

penghitungan dalam menemukan hari-

hari raya, dan tabel mengenai

penghitungan pasang-surut dan musim

bulan.

Dalam Kodeks Nowell terdapat

teks The Wonders of the East yang

juga memuat sebuah peta dunia luar

biasa, dan ilustrasi lain-lainnya. Selain

itu kodeks yang sama juga

memuat Alexander's Letter to Aristotle.

Karena ini merupakan manuskrip yang

sama yang memuat Beowulf, beberapa

pakar berspekulasi bahwa

kemungkinan manuskrip ini

merupakan kumpulan material

mengenai tempat-tempat dan makhluk-

makhluk eksotis.

Terdapat sejumlah karya

medis menarik. Ada sebuah

terjemahan Herbarium Apuleius denga

n ilustrasi menarik dan ditemukan

bersama dengan Medicina de

Quadrupedibus. Koleksi teks-teks

kedua adalah Bald's Leechbook, sebuah

buku dari abad ke-10 yang memuat

pengobatan herbal dan bahkan

beberapa pengobatan operasi. Koleksi

ketiga dikenal sebagai Lacnunga, yang

berdasarkanmantra, nyanyian magis,

dan ilmu putih.

Teks-teks hukum Inggris Kuno

merupakan bagian yang besar dan

penting dari korpus ini. Menjelang

abad ke-12, mereka telah ditata

menjadi dua koleksi besar (lihat Textus

Roffensis). Mereka termasuk hukum

raja-raja, bermula dengan mereka yang

berasal dari Aethelbert dari Kent, dan

teks-teks mengenai hal-hal dan tempat-

tempat tertentu di dalam negeri.

Sebuah contoh menarik

adalahGerefa yang menggarisbawahi

kewajiban seorang reeve pada sebuah

kompleks rumah bangsawan besar.

Lalu ada pula sebuah jilid besar

dokumen-dokumen hukum yang

berhubungan dengan rumah-rumah

ibadah.

METODE PENELITIAN

Lokasi dan Objek Penelitian

Lokasi penelitian yang dipilih

adalah secara Online. Namun,

pengaksesan web WEnDy! Ini tetap masih

dalam jangkauan Universitas Gunadarma

khususnya Kampus D, dengan alamat Jln.

Margonda Raya no.100 Depok. Jika

pengaksesan dilakukan di luar area

Page 20: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Universitas Gunadarma, sistem buffering

video akan membutuhkan waktu lama

tergantung pada koneksi internet yang

mengakses. Responden yang mengakses

dan mengisi kuesioner dari penelitian ini

berjumlah 50 orang yang mewakili

mahasiswa Fakultas Sastra Inggris

Universitas Gunadarma. Responden yang

dipilih adalah responden yang

menggunakan internet sebagai media

pembelajaran alternatif.

Pemilihan WEnDy! dipilih secara

spesifik karena, situs ini merupakan media

pembelajaran berbasis web pada

Universitas Gunadarma yang akan diteliti

kinerjanya lalu dikembangkan untuk

menjadi sebuah bahan referensi

pembelajaran berbasis web bagi

mahasiswa Fakultas Sastra Inggris.

Data dan Variabel Penelitian

Data yang digunakan adalah data

primer dengan para pengakses situs

WEnDy! sebagai responden. Indikator

pertama adalah indikator kualitas dan

kompatibilitas situs web dengan jumlah

variabel sebanyak sepuluh variabel KK1-

KK10. Indikator kedua adalah kualitas

tampilan yang mewakilkan kualitas

tampilan situs web secara keseluruhan

yang terdiri dari lima variabel yaitu KT1-

KT5. Indikator ketiga adalah penyajian

materi yang menggambarkan bagaimana

suatu materi disajikan di dalam situs.

Indikator ini mempunyai empat variabel

PM1-PM4. Indikator yang keempat adalah

interaksi pemakai yang dengan lima

variabel IP1-IP5. Untuk keterengan lebih

lengkap tentang kuesioner yang

digunakan, salinan dari kuesioner yang

digunakan diseratakan pada bagian

lampiran dari penulisan.

Populasi dan Sampel Penelitian

Populasi dari penelitian ini adalah

seluruh mahasiswa Universitas Gunadarma

khususnya Fakultas Sastra Inggris yang

menggunakan situs WEnDy! sebagai

media bantu pembelajaran dan

mengaksesnya untuk keperluan

pembelajaran. Dengan demikian dilakukan

pemilihan sampel secara acak pada

populasi yaitu seluruh mahasiswa Fakultas

Sastra Inggris Universitas Gunadarma.

Metode Pengumpulan Data

Pengumpulan data pada penelitian

ini dilakukan melalui survei dengan cara

menyebarkan kuesioner kepada 50

responden secara acak pada populasi

mahasiswa Fakultas Sastra Inggris

Universitas Gunadarma, dengan mengikuti

petunjuk pada kuesioner dan pengarahan

untuk mengakses situs WEnDy!.

Pembagian kuesioner dilakukan dengan

cara tatap muka langsung dan melalui

bantuan pihak ketiga untuk menyebarkan

kuesioner tersebut.

Kuesioner dirancang dan

digunakan dengan menggunakan kuesioner

dari penelitian sebelumnya yang direvisi

dan disesuaikan kembali. Hal ini

disebabkan oleh sifat penelitian yang

membandingkan dua situs dengan

fungsionalitas yang sama, maka harus

digunakan instrumen penelitian

(kuesioner) yang sama agar mendapatkan

hasil perbandingan yang objektif.

Metodologi Penelitian

Penelitian yang dilakukan kali ini

adalah penelitian dan pengembangan dari

suatu model media pembelajaran berbasis

web, dengan berdasar kepada model

pembelajaran dalam bentuk yang lain dan

media pembelajaran yang sejenis untuk

melengkapi media pembelajaran yang

sudah ada. Karenanya kerangka penelitian

di tata dengan urutan sebagai berikut,

melakukan pengumpulan data dan analisis

kebutuhan dan kelayakan, menganalisa

data hasil pengamatan, membuat dan

memilih alternatif tindakan dan solusi, uji

coba model, dan memeriksa umpan balik

yang dihasilkan, mengumpalkan data baru

untuk dianalisa, melakukan analisa ulang

dan pengembangan yang diakhiri dengan

revisi model.

Page 21: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Kajian pengembangan dalam

penelitian ini mengacu pada model Gepart,

seperti dikutip Miarso (2003) yang

disesuaikan dengan penelitian yang

mencakup, tujuan pengkajian,

mengerjakan, menciptakan, dan mencari

solusi baru berkaitan dengan pembelajaran

berbasis web, hasil pengkajian merupakan

sesuatu yang harus dapat

diimplementasikan, tidak hanya berupa

model konseptual dan prosedural, tetapi

beserta model fisiknya. Nilai yang menjadi

tujuan adalah memanfaatkan kemajuan

teknologi, dengan menggunakan

pembelajaran berbasis web. Dorongan

melakukan pengkajian adalah upaya

inovasi. Kriteria keberhasilan

menggunakan standar kinerja mencakup,

efektifitas, efisiensi, dan daya tarik.

Landasan konseptual adalah operasional

situs media pembelajaran berbasis web.

Paradigma yang menjadi acuan adalah

pendekatan efektifitas dan relevansi

dengan proses pelaksanaan pengkajian

antara lain, identifikasi situasi, deskripsi

alternatif, rumusan pemecehan, rancangan

pengujian.

Tahapan Penelitian

Penelitian ini terdiri dari tiga tahap,

di mana langkah-langkah penelitian

mengacu pada siklus penelitian dan

pengembangan Borg dan Gall (1983),

dengan uraian penjelasan yang telah

disesuaikan dengan tujuan penelitian,

seperti yang digambarkan pada Tabel 3.1.

Tabel 3.1 Tahapan Pengembangan Model

Tahap Langkah Aktifitas

PraPengembangan Model 1 Analisa kebutuhan

Perancangan model

Pengembangan Model 2 Pembuatan media pembelajaran berbasis

web.

- Hal pertama yang dilakukan untuk

Membuat sebuah web adalah dengan

membuat model dari web dengan

menggunakan alat pemodelan, dalam

hal ini UML.

- Membuat struktur navigasi dan

Rancangan halaman web.

- Membuat basis data yang akan

digunakan dalam web dengan

menggunakan MySQL.

- Instalasi perangkat lunak

Pengembangan Notepad ++ dan Adobe

Dreamweaver CS5, beserta perangkat

lunak pendukung lainnya.

- Membuat template halaman yang

digunakan.

Page 22: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

- Melakukan pembuatan halaman web,

Beserta kelengkapannya.

- Pembuatan sistem keamanan web.

- Pembuatan isi dari situs web.

- debug kode program.

- Upload hasil pembuatan situs web.

Evaluasi Model 3 Uji coba awal

Kajian dengan ahli materi, ahli media,

dan ahli teknologi informasi dan

komunikasi.

Perbaikan

Penerapan Model 4 Uji Coba Lapangan

Uji coba pada 50 responden mahasiswa

Fakultas Sastra Inggris yang ada secara

acak pada Universitas Gunadarma

Revisi Model 5 Perbaikan Operasional

Peyempurnaan berkelanjutan dari situs

media pembelajaran berbasis web.

Tahapan Pengembangan Situs

Pengembangan web tidak

mempunyai suatu metodologi khusus

dalam prakteknya, biasanya suatu

pengembangan web lazimnya mengikuti

metodologi pengembangan perangkat

lunak yang sudah ada sebelumnya. Proses

pengembangan yang umum digunakan

untuk pengembangan suatu web biasanya

bertolak dari proses pengembangan

perangkat lunak konvensional atau biasa

dikenal dengan siklus hidup perangkat

lunak (SWDLC) yang mempunyai

berbagai macam model pengembangan

yang dapat diterapkan sesuai dengan

perangkat lunak yang akan dikembangkan.

Berikut tahapan pengembangan yang

dibuat dengan mengacu kepada daur hidup

perangkat lunak, SWDLC (Software

Development Life Cyle).

1. Analisa Kebutuhan

Melakukan analisa kebutuhan

terhadap web yang akan dibuat

berdasarkan kusioner dari penelitian

awal. Dari penelitian awal dapat

disimpulkan bahwa mahasiswa

membutuhkan suatu situs dengan

tampilan dan interaksi pemakai yang

lebih baik.

2. Spesifikasi

Spesifikasi disini adalah menentukan

perangkat lunak apa yang akan dibuat

dan apa alat yang digunakan. Bahasa

web yang digunakan adalah PHP,

alasan mengapa digunakannya PHP,

karena PHP merupakan bahasa

pemrograman yang open source

artinya tidak tergantung akan lisensi,

juga multi-platform yang dapat

dijalankan di berbagai sistem operasi

seperti Linux, Unix, Mac dan

Windows. Selain itu PHP tidak

melakukan sebuah kompilasi dalam

penggunaannya.

3. Arsitektur

Situs web yang dikembangkan adalah

situs web dengan konsep Rich Web

Application, dengan konsep yang

memenuhi spesifikasi web mendatang,

dimana di dalam situs web ini terdapat

berbagai macam elemen pendukung

untuk meningkatkan kegunaan situs.

Dengan menggunakan pendekatan

seperti itu maka kebutuhan akan situs

web baru dimasa mendatang dapat

ditunda karena situs web yang

Page 23: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

dikembangkan sudah memenuhi

standar yang akan ada beberapa tahun

kedepan. Lingkungan implementasi

yangdigunakan untuk menempatkan

situs web ini adalah suatu web server

yang bernama Apache dengan sistem

operasi Windows XP Service Pack 2.

4. Perancangan, Impelementasi dan

Pengujian

Pada tahap pengembangan ini akan

dilakukan perancangan awal situs

web, proses yang terlibat antara lain,

perancangan tampilan, perancangan

navigasi dengan struktur navigasi,

pemodelan perangkat lunak dengan

UML dan perancangan basis data.

Kegiatan lainnya adalah

implementasi, implementasi disini

adalah kegiatan pengkodean aplikasi

yang dilankukan dengan proses

pengujian situs web untuk mencari

kesalahan dan mempertinggi

kompatibilitas dari situs sebelum situs

dipublikasi.

5. Penerapan dan Perawatan

Penerapan akan dilaksanakan setelah

kode dari situs telah diuji secara

menyeluruh dan telah disetujui untuk

dipublikasikan yang dilanjutkan

dengan kegiatan perawatan situs web.

ANALISA DAN PEMBAHASAN

Perancangan Aplikasi Dengan UML

Pada proses perancangan situs

media berbasis web ini dibuat rancangan

dari web dengan menggunakan empat jenis

diagram.

Diagram Use Case Fungsionalitas

Umum

Situs Web

Akses Masuk Situs

Pengguna Akhir

Registrasi

Administrator

Situs media

berbasis web

Menu materi

Gambar 4.1 Fungsionalitas Sistem Secara

Umum

Use case fungsionalitas secara

umum menggambarkan proses besar yang

terjadi pada situs. Situs media

pembelajaran ini mempunyai dua proses

besar yakni proses otentikasi pengguna,

proses yang terjadi pada use case registrasi

dan use case melakukan akses masuk serta

use case melakukan pemilihan media dan

mengunduhnya. Dua aktor, pengguna

akhir/ End User dan administrator akan

melakukan akses masuk terlebih dahulu

sebelum masuk ke dalam situs jika mereka

sudah terdaftar. Jika kedua aktor pengguna

akhir belum terdaftar maka aktor anak

diarahkan pada usecase registrasi, proses

lengkap dapat dilihat pada diagram

aktifitas dan use case untuk proses

registrasi dan akses masuk.

Ketika aktor sudah masuk ke dalam

situs barulah aktor dapat menggunakan

fungsi-fungsi lainnya yang terdapat pada

situs yaitu terdapat 2 menu pilihan materi

pembelajaran dalam bentuk streaming

video. Selain melakukan streaming, video-

video tersebut dapat di unduh dengan

mengklik tombol Download Video.

Page 24: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Diagram Aktivitas Proses Registrasi

dan Login

Situs AdministratorPengguna Akhir

Membuka Situs Halaman Muka Situs

Memasukan Data Registrasi Memproses Data Registrasi

Cek Data Registrasi

Notifikasi

Simpan Data Pengguna

Buat & Kirim Akun PenggunaTerima Akun Pengguna

Melakukan Akses Masuk

Akses Masuk

Memasukan Akun Pengguna Verifikasi Akun Pengguna

Masuk Ke Dalam Situs

[salah]

[benar]

[benar]

[salah] [salah]

Gambar 4.4 Diagram Aktivitas Proses

Registrasi dan Login

Pada gambar 4.4 di atas diagram

tersebut menggambarkan bagaimana

terjadinya proses registrasi ada akses

masuk ke dalam situs. Ketika pengguna

akhir membuka situs pengguna akan

dihadapkan dengan halaman muka situs.

Hal yang sama tidak berlaku untuk

administrator ketika ingin membuka situs,

administrator tidak dihadapkan dengan

dengan halaman muka situs jika ingin

melakukan akses masuk, yakni melalui

halaman tersendiri yang dapat diakses

dengan cara menambahkan /admin pada

URL situs, seperti contoh

cai.elearning.gunadarma.ac.id/auvi/admin.

Jika berhasil, maka akan muncul halaman

login khusus admin, dengan memasukan

username dan password yang telah

ditentukan di basis data, dengan kata lain

admin hanya dapat di-edit langsung di

basis datanya baik ingin merubah,

menambah atau menghapus akun admin.

Setelah memasukan username dan

password maka akan diverifikasi untuk

memastikan bahwa akun tersebut terdaftar

dan merupakan administrator, jika sesuai

maka admin akan masuk ke situs utama

khusus admin, yang terdapat fungsi-fungsi

seperti meng-edit data member, video-

video dan gambar-gambar beserta

keterangannya.

Untuk pengguna, jika pengguna

belum terdaftar maka pengguna

diharuskan untuk registrasi. Proses

registrasi dilakukan dengan memasukan

data pengguna yang nantinya data tersebut

akan diproses oleh situs untuk dijadikan

akun pengguna. Sebelum data diproses,

validitas data akan diperiksa terlebih

dahulu, bila ada kesalahan maka pengguna

akan diminta untuk memasukan datanya

kembali. Jika data tersebut sudah benar

maka situs akan menyimpan data

pengguna dan memberikan umpan balik

kepada administrator. Setelah itu akun

pengguna akan dikirimkan kepada

pengguna. Setelah mendapatkan akun

pengguna, pengguna dapat meneruskan

untuk mengakses masuk situs dengan

memasukan akun pengguna, setelah akun

pengguna diterima situs, akun pengguna

akan diverifikasi oleh situs, jika terdaftar

maka pengguna akan masuk ke dalam

situs. Diagram Sequence

Diagram ini menggambarkan

aktivitas pengguna yang dilakukan melalui

suatu urutan tertentu dan berdasarkan

stimulus yang diterima atau dikirimkan

suatu objek. Dengan pengguna sebagai

aktor, pengguna mengirimkan stimulus

yang akan mengaktifkan objek situs

dimana pengguna dapat melakukan

aktivitas registrasi yang diteruskan dengan

login yang mengantarkan stimulus untuk

mengaktifkan objek beranda tempat semua

kegiatan pengguna berawal.

Dari objek beranda atau Home,

pengguna dapat mengirimkan suatu

stimulus untuk mengaktifkan Inside

Page 25: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Britain, yang akan mengirimkan umpan

balik kepada pengguna. Begitu juga untuk

objek Famous Author setiap kali objek

menerima stimulus umpan balik akan

dikirimkan kepada pengguna berupa video

streaming. Selain itu terdapat objek-objek

lain seperti Gallery dan Credit, ketika

pengguna mengakses menu Gallery maka

akan situs akan memproses gambar-

gambar yang segera dikirimkan kembali

kepada pengguna dengan menampilkannya

di jendela yang baru, agar proses lebih

ringan dan memudahkan pengguna untuk

kembali ke tampilan awal Gallery. Objek

Credit hanya berupa teks berjalan yang

dapat diakses oleh pengguna sama seperti

halnya objek-objek lain.

User

Situs

Home

Membuka

Situs

Registrasi

Login

Inside Britain

Membuka

Halaman

Inside

Britain

Keluar

Meminta

video

streaming

Mengirim

video

streaming

Famous Author

Membuka

Halaman

Famous Author

Meminta Video

Streaming

Mengirimkan

Streaming Video

Gallery

Membuka halaman

Gallery

Membuka

jendela baru

Credit

Mengirim gambar

Miscelleneaous

Meminta file-file

pilihan

Mengirim fille

Gambar 4.6 Diagram Sequence

Penggunaan Layanan Utama Situs

Diagram Kelas

+Verifikasi()

#IDPengguna

#SesiPengguna

Pengguna

+Display()

+getUserSession()

+getUserID()

-TerimaIDPengguna

-SimpanSesiPengguna

-HalamanMuka

+MenuBar

+HomePage

+InsideBritainPage

+FamousAuthorPage

+GalleryPage

+CreditPage

Situs Utama

Gambar 4.7 Diagram Kelas Utama

Diagram ini menunjukkan 2 kelas

yaitu kelas pengguna yang berhubungan

dengan kelas situsutama. Dengan

menggunakan atribut IDPengguna, maka

pengguna dapat mengakses situs,

kemudian situs akan menerima ID tersebut

dengan atribut TerimaIDPengguna dengan

metode getUserID () yang akan

diverifikasi dengan database untuk

memastikan bahwa akun tersebut sudah

terdaftar sebagai anggota. Selain itu

terdapat SesiPengguna yang akan

digunakan ketika pengguna telah keluar

situs, maka situs akan memproses dengan

menggunakan atribut

SimpanSesiPengguna dengan metode

getUserSession (), maka ketika pengguna

melakukan proses back di browser, tidak

akan masuk ke dalam situs kembali tanpa

login.

Persiapan Pengembangan Situs

Dalam dalam pengembangan

media berbasis web ini, dibutuhkan

beberapa persiapan, setelah tahap

pemodelan situs selesai diperlukan

persiapan dalam menentukan perangkat

keras dan perangkat lunak apa saja yang

digunakan dalam pengembangan.

Persiapan ini dilakukan agar

pengembangan dapat berjalan dengan baik

dan menggunakan perangkat yang sesuai

Page 26: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

untuk pengembangan agar menghasilkan

keluaran akhir yang baik.

a. Persiapan Perangkat Keras

Pengembangan

Perangkat keras yang pertama

yang digunakan mempunyai

spesifikasi seperangkat komputer

dengan prosesor Intel Core2Duo

E8400 (3.0GHz), dengan RAM

(Random Access Memory) DDR2 4

Gigabyte, dan kapasitas penyimpanan

500 Gigabyte, perangkat keras ini

merupakan perangkat keras utama

pengembangan situs khususnya dalam

persiapan konten yakni video

streaming. Perangkat keras kedua

yang digunakan adalah seperangkat

komputer dengan prosesor AMD

Athlon 64 3000+ (2 GHz) RAM

(Random Access Memory) DDR 1

Gigabyte, dan kapasitas penyimpanan

80 Gigabyte, perangkat keras yang

kedua merupakan perangkat keras

yang lebih digunakan untuk simulasi

pengujian ketika situs web diakses

melalui komputer lain dalam satu

jaringan yang sama.

b. Persiapan Perangkat Lunak

Pengembangan

Persiapan untuk perangkat

lunak dalam pembuatan situs media

berbasis web ini dilakukan untuk

mempersiapkan perangkat lunak yang

sesuai dengan karakteristik situs yang

akan dikembangkan. Perangkat lunak

yang digunakan dalam pengembangan

situs ini dibagi menjadi lima jenis

yaitu sistem operasi, editor berkas,

server web, basis data, dan penjelajah

web.

1. Sistem Operasi

Persiapan sistem operasi

dilakukan untuk memastikan

bahwa situs yang dikembangkan,

dibuat menggunakan sistem operasi

yang user friendly sekaligus dapat

mendukung seluruh perangkat

lunak yang digunakan dalam

pengembangan situs media

berbasis web. Bahasa

pemrograman PHP sangat dikenal

sebagai bahasa pemrograman yang

bersifat multi-platform, artinya

dapat bekerja dengan baik di

beberapa system operasi seperti

Windows, LINUX ataupun

MacOS. Pada pembuatan situs ini,

sistem operasi yang digunakan

adalah Microsoft Windows XP SP

2, karena seperti yang disebutkan

sebelumnya, sistem operasi ini

yang paling ramah pengguna

ketimbang sistem operasi lain.

Selain itu software-software

pendukung dalam pengembangan

situs ini, sangat disarankan bekerja

di atas sistem operasi XP SP 2.

2. Editor

Editor merupakan

perangkat lunak yang digunakan

untuk menyunting dokumen-

dokumen atau file yang digunakan

pada situs web yang

dikembangkan. Editor yang

digunakan terbagi menjadi dua

kelompok besar yaitu script editor

dan pengolah video.

Dalam pembuatan situs ini

script editor yang digunakan

adalah Notepad ++, alasannya

yaitu program ini program open

source yang artinya user dapat

mengambil dan menggunakan

program tersebut tanpa harus

membayar lisensi, bahkan user

dapat merubah coding agar tahap

pengembangan software tersebut

tidak terhenti.

Jenis penyunting yang

kedua adalah pengolah video

Merupakan suatu perangkat lunak

yang dikhususkan untuk

Page 27: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

melakukan penyuntingan file-file

dengan ekstensi video (*.avi,

*.wmv, *.mpeg, *.flv). Pengolah

video sangat dibutuhkan untuk

melakukan penyuntingan file-file

video yang digunakan dalam web.

Dalam pengembangan web ini,

pengolah video yang digunakan

adalah Adobe Premier dan ULEAD

Visual Studio 9.

3. Server Web

Perangkat lunak yang akan

dikembangkan adalah sebuah situs

media berbasis web yang berarti

perangkat lunak ini merupakan

suatu situs web, maka server web

dibutuhkan agar aplikasi dapat

berjalan dengan baik. Ada

beberapa server web yang dapat

digunakan dalam sebuah

pengembangan web yaitu IIS

(Internet Information Server),

Caudium, PWS dan lain-lain.

Namun, dalam pembuatan situs

media berbasis web ini adalah

Apache, alasannya adalah server

web ini bersifat open source,

artinya setiap orang boleh

menggunakannya, mengambil dan

bahkan mengubah kode

programnya. Tugas utama apache

adalah menghasilkan halaman web

yang benar kepada peminta,

berdasarkan kode PHP yang

dituliskan oleh pembuat halaman

web. Untuk mempermudah

penggunaan serta konfigurasi

server web ini, dapat menggunakan

tool yang bernama XAMPP yaitu

tool yang menyediakan paket

perangkat lunak ke dalam satu

buah paket. Dengan menginstall

XAMPP maka tidak perlu lagi

melakukan instalasi dan

konfigurasi web server Apache,

PHP dan MySQL secara manual.

XAMPP akan menginstalasi dan

mengkonfigurasikannya secara

otomatis untuk anda atau auto

konfigurasi

4. Basis Data

Database yang akan

digunakan pada pengembangan

situs media berbasis web ini

adalah MySQL. Perkembangannya

disebut SQL yang merupakan

kepanjangan dari Structured Query

Language. SQL merupakan bahasa

terstruktur yang khusus digunakan

untuk mengolah database. MySQL

adalah sebuah sistem manajemen

database yang bersifat open

source. MySQL adalah pasangan

serasi dari PHP dan dapat

digunakan untuk membuat dan

mengola database beserta isinya.

Kita dapat memanfaatkan MySQL

untuk menambahkan, mengubah

dan menghapus data yang berada

dalam database. MySQL

merupakan sisitem manajemen

database yang bersifat relational.

Artinya data-data yang dikelola

dalam database akan diletakkan

pada beberapa tabel yang terpisah

sehingga manipulasi data akan

menjadi jauh lebih cepat. Untuk

bekerja dengan MySQL dapat

digunakan sebuah perangkat lunak

yang bernama phpmyadmin,

dengan phpmyadmin kita dapat

membuat tabel, mengisi data dan

lain-lain dengan mudah tanpa harus

hafal perintahnya. Phpmyadmin

sudah dipaket di dalam perangkat

lunak XAMPP.

5. Penjelajah Web

Untuk memastikan bahwa

situs web yang dibuat dapat

berjalan dengan baik dan dapat

dieksekusi pada penjelajah web

yang beredar luas, maka

dibutuhkan perangkat lunak

penjelajah web yang digunakan

Page 28: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

untuk melihat hasil keluaran situs.

Dalam pengembangan web ini

tidak hanya satu penjelajah web

yang digunakan tetapi ada

beberapa penjelajah web yang

digunakan untuk pengembangan

situs. Alasan digunakannya

berbagai macam penjelajah web

adalah untuk memastikan

kompatibilitas silang situs antara

berbagai macam penjelajah web

yang ada. Penjelajah web yang

digunakan antara lain adalah

Internet Explorer 6, Mozilla

Firefox 3, Opera 10 , dan Google

Chrome 4. Kesemua penjelajah

web tersebut merupakan penjelajah

web yang umum digunakan

pengguna.

Untuk pembuatan web yang

tidak bergantung kepada CSS

mungkin tidak akan menemukan

masalah yang berarti, akan tetapi

web yang menggunakan CSS

sebagai elemen untuk pengaturan

web, uji coba pada berbagai jenis

browser mutlak diperlukan. Alasan

penulis memilih Mozilla Firefox

sebagai web browser adalah karena

sebagian besar orang menggunakan

Mozilla Firefox sebagai browser

mereka, selain IE dan Opera.

Penggunaan IE 6 dimaksudkan

untuk melihat apakah kode CSS

yang penulis gunakan dapat

berjalan disemua browser untuk

menguji kompatibilitas dari

aplikasi berbasis web yang penulis

buat.

Pengujian akan diutamakan

pada Firefox karena Firefox

merupakan salah satu browser

yang mempunyai standar render

halaman HTML dengan metode

standard-compliance yang lebih

baik dibanding browser lainnya

yang memungkinkan untuk

memeriksa validitas dari sintaks

HTML yang ada pada situs dan

merupakan browser dengan

pengguna terbanyak di dunia

sebanyak 46.4% pengguna

menggunakan Firefox, dengan

disusul oleh Google Chrome

sebanyak 16.7%, Internet Explorer

8 15.6% menurut hasil survei

www.w3schools.com per July

2010.

Rancangan Struktur Navigasi Situs

Utama

Struktur navigasi adalah struktur

atau alur dari suatu program (navigasi)

yang merupakan perancangan hubungan

dan rantai kerja dari beberapa area yang

berbeda dan dapat membantu

mengorganisasikan seluruh elemen dalam

aplikasi ini. Struktur navigasi yang

digunakan pada program ini adalah

Struktur Navigasi campuran, yang mana

merupakan gabungan dari struktur linier,

non-linier, serta hirarki.

HOMEINSIDE

BRITAIN

FEMOUS

AUTHORCREDITGALLERY

Food And Drink

Technology

Local Government

In ActionThe City

Recycling

ProsperityTelecomunication

Charles Dickens George EliotD. H. Lawrence

Jane Austen

William Blake

George Orwell

Daniel Defoe

John Keats

Percy Bysshe

Shelley

James Joyce

Virginia WoolfThe Bronte

Sisters

William

Wordsworth

William

Shakespeare

Introduction

Parliament

Prosperity

The Family In

Society

Marketing a

Product

MISCELLANEOUS

INDEX

Gambar 4.8 Struktur Navigasi Situs

Utama

a. Rancangan Halaman Website

Pada perancangan

halaman website media

pembelajaran ini akan terdapat

Page 29: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

tampilan halaman index, header,

halaman intro, halaman member,

halaman home, halaman inside

britain, halaman famous author,

gallery, miscellaneous, credit dan

halaman admin.

b. Rancangan Struktur Navigasi

Admin

INDEX

Gallery Video

Add

Edit

Delete Add

Edit

Delete

Delete

Miscellaneous

Add Delete

Member

Gambar 4.9 Struktur Navigasi

Admin

Rancangan Halaman Situs

Rancangan halaman diperlukan

untuk membuat suatu model sebelum situs

dibuat sebagai acuan ketika pembuatan

halaman situs. Rancangan yang dibuat

berupa suatu model visual yang dibuat

mendekati apa yang akan dibuat menjadi

sebuah model fisik atau situs yang dibuat.

Pada bagian selanjutnya akan

diperlihatkan rancangan yang nantinya

akan diterapkan pada tiap halaman yang

terdapat pada situs berserta penjelasan dan

maksud dari rancangan tersebut.

a. Rancangan Halaman Index

Halaman ini merupakan

halaman pertama yang akan

berinteraksi dengan pengguna ketika

pengguna membuka situs.

Footer

Judul

Universitas Gunadarma

Counter

Link Logo

Member Login

Username :

Password :

Username

password

Not a member yet? Register now!

Botton

Penjelasan

Judul dan Penjelasan

Gambar 4.10 Rancangan Halaman Index

b. Rancangan Halaman Register

Halaman registrasi merupakan

halaman isian dimana pengguna harus

mengisi form yang terdiri dari Fist

name, last name, username, password,

re-enter password, address, dan sex.

Footer

Judul Member Login

Username :

Password :

Username

Password

Not a member yet? Register now!

Bottom 3

Universitas Gunadarma

Counter

Link Logo

First Name :

Password

Username

Last Name :

First Name

Sex

Address

Re-enter

Password

Last Name

Username

password

Re-enter Password

Address

Sex

Botton 1 Botton 2

* Required

Judul dan Penjelasan

Gambar 4.11 Rancangan Halaman

Register

Page 30: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Script :

?>

<form id="reg"

name="newreg"

action="newreg.php"method=

"POST"

enctype="multipart/form-

data">

<table border="0">

<tr>

<td>First Name

</td>

<td>:</td>

<td><input

type="text"

name="nama1"value=""/></td>

</tr>

<tr>

<td> Last Name

</td>

<td>:</td>

<td><input

type="text"

name="nama2"value=""/></td>

</tr>

<tr>

<td> Username

</td>

<td>:</td>

<td><input

type="text"

name="user"value=""/>*</td>

</tr>

<tr>

<td> Password

</td>

<td>:</td>

<td><input

type="password"

name="pass1"valu

e=""/>*</td>

</tr>

<tr>

<td> Re-enter

Password</td>

<td>:</td>

<td><input

type="password"

name="pass2"

value=""/>*</td

>

</tr>

Output:

Gambar 4.12 Tampilan Output

Halaman Registrasi

c. Rancangan Halaman Home, Inside

Britain and Famous Author

Member

Halaman ini merupakan

halaman home setelah member.

Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi

Judul Welcome Username

Edit Profile

Login@tanggal Jam

Your IP : IP address

Logout username

Video Streaming Area

Tombol Kontrol Video

Uniersitas Gunadarma

Link Logo

Counter

Footer

Menu Navigasi Menu Navigasi

Donwload Video

Gambar 4.13 Rancangan Halaman Home,

Inside Britain and Famous Author

Member

Script :

?><div id="mainCol"

class="clearfix">

<h3 id="why">The

Families In Society</h3>

<div

align="right"><a

href="<? echo

$file;?>"align="right"

title="Klik

disini"><span

class="style1"><blink>

Page 31: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Download

Video</blink></span><i

mg

src="images/download.g

if"/></a>

</div><div

align="center">

<object id="player"

classid="clsid:D27CDB6E-

AE6D-11cf-96B8-

444553540000"

name="player" width="600"

height="465">

<param name="movie"

value="player/video_player.s

wf" />

<param

name="allowfullscreen"

value="true" />

<param

name="allowscriptaccess"

value="always" />

<param

name="flashvars"

value="flv=<?php echo

$play; ?>"/>

<embed

type="application/x-

shockwave-flash"

id="player2"

name="player2"

src="player/video_player.swf

"

width="600"

height="465"

allowscriptaccess="always"

allowfullscreen="true"

flashvars="flv=<?php

echo $play; ?>"

/>

</object></div></div>

Output :

Gambar 4.14 Tampilan Output

Halaman Home, Inside Britain and

Famous Author Member

d. Rancangan Halaman Gallery

Halaman gallery merupakan

halaman yang berisi gambar–gambar

tempat yang terkenal di Britain.

Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi

Image Image Image

Penjelasan

Image Image Image

Penjelasan Penjelasan

Penjelasan Penjelasan Penjelasan

no

Welcome Username

Edit Profile

Login@tanggal Jam

Your IP : IP address

Logout username

Universitas Gunadarma

Counter

Link Logo

Judul

Footer

Menu Navigasi

Gambar 4.15 Rancangan Halaman

Gallery

Script :

<? $kolom=3;

$i=0; ?>

<table align="center"><tr>

<?

while

($row=mysql_fetch_array($qry))

{

$gambar=$row['root'];

$keterangan=$row['keterangan

'];

$name=$row['name'];

$nama=substr($gambar,22,100)

;

if($i>=$kolom){

Page 32: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

echo

"</tr><tr>";

$i=0;

}

$i++;

?>

<td

align=center>

<a

href="home.php?page=gallery&id=

<? echo $id ?>"

onClick="window.open('show.php?

image=<? echo $gambar;

?>','mywindow','location=1,scro

llbars=1,width=600,height=500')

" class="info" name="gambar">

<img src="<? echo

$gambar;?>" width="80"

height="80"/><br />

<div><?

echo $name;?></div></a>

</td>

Output :

Gambar 4.16 Tampilan Output

Halaman Gallery

Gambar 4.17 Tampilan Output

Gambar

e. Rancangan Halaman Miscellaneous

Halaman miscellaneous

merupakan halaman berisi file yang

bias di download setelah mejadi

member.

Footer

Judul

Universitas Gunadarma

Counter

Link Logo

Menu Navigasi

Tittle

Author

Detail

: Tittle

: Author

: Detail

Button 1 Button 2

no

Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi

Welcome Username

Edit Profile

Login@tanggal Jam

Your IP : IP address

Logout username

Gambar 4.18 Rancangan Halaman

Miscellaneous

Script :

?>

<div id="mainCol" >

<h3

id="why">Miscellaneous</h3>

<?

while

($col=mysql_fetch_array($qry))

{

$title=$col['title'];

$author=$col['author'];

$file=$col['file'];

$detail=$col['detail'];

?>

<table width="100%"

align="left">

<tr>

<td bgcolor="#333333"

width="75"

valign="top"><b><font

color="#FFFFFF" size="2"

face="Arial, Helvetica, sans-

serif">Title</font></b></td>

<td width="9"

valign="top"><div

align="center">:</div

></td>

Page 33: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

<td

width="328"><? echo $title;

?></td>

</tr>

<tr>

<td bgcolor="#333333"

width="75"

valign="top"><b><font

color="#FFFFFF" size="2"

face="Arial, Helvetica, sans-

serif">Author</font></b></td>

<td width="9" valign="top"><div

align="center">:</div></td>

<td

width="328"><? echo

$author;?></td>

</tr>

<tr>

<td bgcolor="#333333"

width="75"

valign="top"><b><font

color="#FFFFFF" size="2"

face="Arial, Helvetica, sans-

serif">Detail</font></b></td>

<td width="9" valign="top"><div

align="center">:</div></td>

<td

width="328"><? echo

$detail;?></td>

</tr>

<tr>

<td

height="26"></td>

<td></td>

<td><a

href="home.php?page=miscellanea

ous&id=<? echo $id ?>"

onClick="window.open('watch.php

?title=<? echo

$title;?>','mywindow','location

=1,scrollbars=1,width=600,heigh

t=700')">

<input type='submit'

name='watch' value='Watch'

></a>

<a href="<? echo

$file; ?>"> <input

type="button" name="download"

value="Download"></a>

</td>

</tr>

<? }?>

</table>

<div align="center">

<?

for

($i=1;$i<=$page;$i++) {

echo "<td><A

HREF='home.php?page=miscellanea

ous&id=$id&hal=$i'> $i

</A></td>";}

?>

Output :

Gambar 4.19 Tampillan Output Halaman

Miscellaneous

f. Rancangan Halaman Credit

Halaman credit digunakan untuk

menampilkan informasi tentang

pembuat situs.

Judul

Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi

Welcome Username

Edit Profile

Login@tanggal Jam

Your IP : IP address

Logout username

Uniersitas Gunadarma

Link Logo

Counter

List

Footer

Menu Navigasi

Gambar 4.20 Rancangan Halaman

Credit

g. Rancangan Halaman Edit Profile

Halaman edit profile adalah

halaman yang tidak berbeda dengan

halam register, yang membedakan

dengan halaman register hanya pada

elemen-elemen yang terdapat pada

halaman ini.

Page 34: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Menu Navigasi Menu Navigasi Menu Navigasi Menu Navigasi

JudulWelcome Username

Edit Profile

Login@tanggal Jam

Your IP : IP address

Logout username

Uniersitas Gunadarma

Link Logo

Counter

Footer

Menu Navigasi

First Name :

Password :

Username :

Last Name :

First Name

Sex :

Address :

Re-enter

Password :

Last Name

Username

password

Re-enter Password

Address

Sex

Botton 1 Botton 2

* Required

Menu Navigasi

Gambar 4.21 Rancangan Halaman

Edit Profile

h. Rancangan Admin Data Member

Menu Navigasi Menu Navigasi Menu Navigasi

Judul

Footer

Welcome Admin

Login@tanggal Jam

Image

Logout(Admin)

Your IP : IP Address

No First Name Last Name Username Password Address Sex

No Fisrt Name Last Name Username Password Address Sex Button

Menu Navigasi

Gambar 4.22 Rancangan Halaman Admin

Data Member

Halaman Admin Data member

adalah halaman untuk menghapus data

pengunjung yang telah melakukan

registrasi.

Script :

<? session_start();

if

(session_is_registered('id'))

{

include

("./include/config.php");

if(!isset($_GET['hal'])){

$hal = 1;

} else {

$hal =

$_GET['hal'];

}

$maxpages=5;

$batas = (($hal

* $maxpages)-$maxpages);

$strSQL1 =

"Select * from member ORDER by

id ASC limit $batas,$maxpages";

$strSQL2 =

"Select * from member ORDER by

id ASC";

$qry =

@mysql_query($strSQL1)

or die

("Query salah: " .

mysql_error());

$tot =

@mysql_query($strSQL2)

or die

("Query salah: " .

mysql_error());

$jml =

mysql_num_rows($tot);

$kel =

$jml/$maxpages;

if

($kel==floor($jml/$maxpages)){

$page = $kel;

} else {

$page =

floor($jml/$maxpages)+1;

}

$pct =

100/($page+4);

Output:

Gambar 4.23 Tampilan Output

Halaman Admin Home

Page 35: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

i. Rancangan Admin Gallery

Footer

Judul

Menu Navigasi Menu Navigasi Menu Navigasi

Add new

Button 1

Button 2

DetaikNameImage

Image

Image Name

Name Detail

Detail

Button 1

Button 2

Button 1

Button2

no

Menu Navigasi

Image Name Detail

Welcome Admin

Login@tanggal Jam

Image

Logout(Admin)

Your IP : IP Address

Gambar 4.24 Rancangan Admin

Gallery

Halaman admin gallery adalah

halaman untuk menambah,

mengedit, dan menghapus gambar

yang telah di upload sebelumnya.

Dengan menggunakan potongan

script dibawah ini:

Script :

<? session_start();

if

(session_is_registered('id')

)

{

include

("./include/config.php");

if(!isset($_GET['hal'])){

$hal = 1;

} else {

$hal =

$_GET['hal'];

}

$maxpages=3;

$batas = (($hal

* $maxpages)-$maxpages);

$strSQL1 =

"Select * from image ORDER

by id ASC limit

$batas,$maxpages";

$strSQL2 =

"Select * from image ORDER

by id ASC";

$qry =

@mysql_query($strSQL1)

or die

("Query salah: " .

mysql_error());

$tot =

@mysql_query($strSQL2)

or die

("Query salah: " .

mysql_error());

$jml =

mysql_num_rows($tot);

$kel =

$jml/$maxpages;

if

($kel==floor($jml/$maxpages)

){

$page = $kel;

} else {

$page =

floor($jml/$maxpages)+1;

}

$pct =

100/($page+4);

Output:

Gambar 4.25 Tampilan Output Halaman

Admin Gallery

j. Rancangan Admin Video

Halaman rancangan admin

video adalah halaman untuk

menambah, mengedit dan menghapus

video yang telah di upload. Berikut

rancangannya:

Page 36: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Menu Navigasi Menu Navigasi Menu Navigasi

Add New

Button

Button

LocationNameRoot

Root

Root Name

Name Location

Location

Button

Button

Button

Button

no

Welcome Admin

Login@tanggal Jam

Image

Logout(Admin)

Your IP : IP Address

Judul

Footer

Root Name Location Edit

Menu Navigasi

Gambar 4.26 Rancangan Admin Video

Dalam halaman ini, admin

dapat meng-edit dan menghapus

video yang ada di dalam basis data

serta menambah video yang baru

dengan potongan script di bawah

ini:

Script :

<? session_start();

if

(session_is_registered('id'))

{

include

("./include/config.php");

if(!isset($_GET['hal'])){

$hal = 1;

} else {

$hal =

$_GET['hal'];

}

$maxpages=3;

$batas = (($hal

* $maxpages)-$maxpages);

$strSQL1 =

"Select * from video ORDER by

id ASC limit $batas,$maxpages";

$strSQL2 =

"Select * from video ORDER by

id ASC";

$qry =

@mysql_query($strSQL1)

or die

("Query salah: " .

mysql_error());

$tot =

@mysql_query($strSQL2)

or die

("Query salah: " .

mysql_error());

$jml =

mysql_num_rows($tot);

$kel =

$jml/$maxpages;

if

($kel==floor($jml/$maxpages)){

$page = $kel;

} else {

$page =

floor($jml/$maxpages)+1;

}

$pct =

100/($page+4);

Output:

Gambar 4.27 Tampilan Output Halaman

Admin Video

k. Rancangan Admin Miscellaneous

Menu Navigasi Menu Navigasi Menu Navigasi

Add New

Button

Tittle

Tittle

Button

Button

no

Welcome Admin

Login@tanggal Jam

Image

Logout(Admin)

Your IP : IP Address

Judul

Footer

Menu Navigasi

Author

Detail

Author

Detail

Tittle

Author

Detail

Tittle

Author

Detail

Tittle

Author

Detail

Tittle

Author

Detail

Gambar 4.28 Rancangan Admin

Miscellaneous

Halaman admin

Miscellaneous adalah halaman

dimana admin dapat memasukan

Page 37: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

file baru dengan format apapun

kedalam halaman miscellaneous.

Jika yang dimasukan adalah file

.pdf dan .swf, maka situs dapat

langsung menampilkannya tanpa

mengunduhnya terlebih dahulu.

Script :

<?

include

("./include/config.php");

if(!isset($_GET['hal']))

{

$hal = 1;

} else {

$hal =

$_GET['hal'];

}

$maxpages=3;

$batas =

(($hal * $maxpages)-

$maxpages);

$strSQL1 =

"Select * from

miscellaneaous ORDER by id

DESC limit

$batas,$maxpages";

$strSQL2 =

"Select * from

miscellaneaous ORDER by id

DESC";

$qry =

@mysql_query($strSQL1)

or

die ("Query salah: " .

mysql_error());

$tot =

@mysql_query($strSQL2)

or

die ("Query salah: " .

mysql_error());

$jml =

mysql_num_rows($tot);

$kel =

$jml/$maxpages;

if

($kel==floor($jml/$maxpages)

){

$page =

$kel;

} else {

$page =

floor($jml/$maxpages)+1;

}

$pct =

100/($page+4);

?>

<div id="mainCol"

class="clearfix">

<h3

id="why">Miscellaneaous</h3>

<ul

id="maincon">

<li class="clearfix">

<br/>

<div align="center">

<a

href="home.php?page=new_misc

" >Add New</a><br/><br/>

<p><font

color='#0066FF'

face='verdana' size='2'>

<div

align="center"><blink><?

echo $_GET['status']

?></blink>

</font></p>

<?

while

($col=mysql_fetch_array($qry

))

{

$title=$col['title'];

$author=$col['author'];

$file=$col['file'];

$detail=$col['detail'];

?>

<table

width="100%" align="left">

<tr>

<td

bgcolor="#333333" width="75"

valign="top"><b><font

color="#FFFFFF" size="2"

face="Arial, Helvetica,

sans-

serif">Title</font></b></td>

<td

width="9" valign="top"><div

align="center">:</div></td>

<td

width="328"><? echo $title;

?></td>

</tr>

<tr>

Page 38: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

<td

bgcolor="#333333" width="75"

valign="top"><b><font

color="#FFFFFF" size="2"

face="Arial, Helvetica,

sans-

serif">Author</font></b></td

>

<td

width="9" valign="top"><div

align="center">:</div></td>

<td

width="328"><? echo

$author;?></td>

</tr>

<tr>

<td

bgcolor="#333333" width="75"

valign="top"><b><font

color="#FFFFFF" size="2"

face="Arial, Helvetica,

sans-

serif">Detail</font></b></td

>

<td

width="9" valign="top"><div

align="center">:</div></td>

<td

width="328"><? echo

$detail;?></td>

</tr>

<tr>

<td

height="26"></td>

<td></td>

<td><a

href=delete.php?title=<?

echo $title;

?>&type=misc&hal=home.php?pa

ge=misc onclick="return

confirm('are you sure?')"

style='text-decoration:none'

title="hapus">

<input type='submit'

name='watch' value='Delete'

></a> </td>

</tr>

<? }?>

</table>

<div align="center">

<?

for

($i=1;$i<=$page;$i++) {

echo

"<td><A

HREF='home.php?page=misc&hal

=$i'> $i </A></td>";}

?> </div>

</li></ul>

</div>

Output:

Gambar 4.29 Tampilan Output Halaman

Admin Miscellaneous.

Pembuatan Video Untuk Halaman Intro

Video intro menampilkan presenter

yang memberikan pengenalan tentang

website Wendy. Pengambilan gambar

dilakukan di lab audio visual Universitas

Gunadarma menggunakan teknik blue

screen (layar biru). Narasi yang dibacakan

presenter, berdasarkan naskah (frame yang

telah dibuat sebelumnya. Peralatan yang

digunakan dalam pembuatan video adalah

1 Kamera Mini DV, 2 buah lampu

penerangan dan kain biru dengan ukuran

panjang 7 m dan lebar 4 m sebagai latar

belakang. Setelah proses pengambilan

gambar selesai, video yang dihasilkan di

edit dengan program Ulead Video Studio 9

untuk mengganti latar belakang biru

dengan gambar latar belakang.

a. Editing dengan Ulead Video Studio 9

1. Untuk memulai proses editing dibuat

sebuah sesi baru dengan menekan

tombol File>New Project.

Page 39: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Gambar 4.30 Sesi Membuat Sesi

Baru

2. Memasukkan video Opening

Wendy.avi ke bagian input clip

dengan menekan tombol open pada

window browse.

Gambar 4.31 Memasukkan Video

3. Setelaha input video, kli browse

lagi untuk mencari background bisa

berupa image, animasi, dan video.

4. Untuk menghaluskan tampilan

background, pada video Opening

Wendy.avi klik overlay. Maka akan

tertampil seperti gambar di bawah

ini

Gambar 4.32 Tampilan

Overlay Video

5. Setelah itu klik menu Mask &

Chroma Key

Gambar 4.33 Tampilan Mask

& Chrome Key

6. Kemudian cek list Apply

overlay option yang

berfungsi untuk

menyamarkan layar biru

yang menjadi background

video.

Gambar 4.34 Tampilan

overlay Options

Window Browse

Tampilan Menu overlay

New

Project

Klik Mask & Chrome Key

Checklist Apply

overlay Options

Page 40: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

7. Untuk mendapat hasil yang lebih

sempurna, klik menu similarity lalu

pilih warna yang sesuai dengan

warna layar background.

Gambar 4.35 Tampilan Similarity

8. Hasil output editing

Gambar 4.36 Tampilan Output

9. Proses terakhir adalah untuk

menghasilkan keluaran ke dalam

format video AVI, format video ini

dipilih karena hasil yang diberikan

sangat baik dan ukuran file relatif

kecil.

Gambar 4.37 Tampilan Window

untuk menyimpan

Konversi video dari VHS ke Digital

(*.avi)

Video-video yang terdapat di

dalam web ini, semua berawal dari VHS.

Dengan menggunakan Adobe Premier,

maka video-video tersebut dapat di

konversi ke dalam digital, disini digunakan

format avi. Berikut langkah-langkahnya:

1. Memasukan VHS ke dalam player

yang telah terkoneksi dengan 1 buah

komputer.

2. Jalankan software Adobe Premier,

kemudian pilih new Project.

Gambar 4.38 Window New Project

3. Setelah terbentuk project baru, tekan

F5 pada keyboard. Maka akan muncul

tampilan sebagai berikut:

Gambar 4.39 Window Capture

4. Tekan tombol play yang ada di

player VHS

5. Video tersebut akan di play di layar

monitor, kemudian klik tombol

merah seperti pada gambar 4.39

untuk meng-capture video tersebut

ke dalam bentuk digital.

Hasil Output

Editing

Tombol Capture

Menu

Save

Page 41: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

6. Setelah video selesai di-capture,

tentukan dimana hasil konversinya

akan diletakkan. Seperti pada

gambar di bawah ini.

Gambar 4.40 Window Save

Project

Konversi video dengan menggunakan

Format Factory

Agar video yang dihasilkan dapat

dimainkan pada komponen FLV Playback,

maka format video yang berupa AVI harus

diubah menjadi format Flash Video (FLV).

Berikut ini cara konversi format file AVI

ke FLV :

1. Pilih format All to FLV

Gambar 4.41 Tampilan Menu

Convert

2. Maka akan tampil window

Gambar 4.42 Tampilan Menu Add

File

3. Memasukkan file AVI yang akan di

konversi dengan menekan tombol add

file, lalu memilih file pada window

browse.

Gambar 4.43 Tampilan Window

Open File

4. Kemudian klik Open akan kembali ke

window sebelumnya.

Gambar 4.44 Tampilan File Pada

Window

format FLV

File Avi

Add Files

Page 42: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

5. Klik ok

Gambar 4.45 Tampilan Window

Convert

6. Lalu klik start, maka file akan di

convert.

Penelitian Hasil Uji Coba Web

Pada tahapan ini dilakukan untuk

melakukan analisa terhadap kebutuhan

pengguna dalam hal ini mahasiswa

Fakultas Sastra Inggris Universitas

Gunadarma, yang akan diberikan

kuesioner secara acak terhadap 50

responden. Pembagian kuesioner

dilakukan dengan cara tatap muka

langsung dan melalui bantuan pihak ketiga

untuk menyebarkan kuesioner tersebut.

Kuesioner dirancang dan

digunakan dengan menggunakan kuesioner

dari penelitian sebelumnya yang direvisi

dan disesuaikan kembali. Hal ini

disebabkan oleh sifat penelitian yang

membandingkan dua situs dengan

fungsionalitas yang sama, maka harus

digunakan instrumen penelitian

(kuesioner) yang sama agar mendapatkan

hasil perbandingan yang objektif.

a. Hasil Analisa Deskriptif Penilitian

Uji Coba Web

Hasil dari penelitian dengan

lima puluh responden yang

kesemuanya adalah mahasiswa

Fakultas Sastra Universitas

Gunadarma dipresentasikan dengan

menggunakan Distribusi Frekwensi.

Keempat indikator, kualitas Situs

Web, kualitas tampilan, penyajian

materi dan interaksi pemakai akan

dianalisa terlebih dahulu

menggunakan tabel distribusi

frekuensi seperti pada tabel 4.1 untuk

indikator kualitas Situs Web, tabel 4.2

untuk indikator kualitas tampilan,

tabel 4.3 untuk indikator penyajian

materi, dan tabel 4.4 untuk indikator

interaksi pemakai.

Page 43: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Tabel 4.1 Distribusi Frekuensi Indikator (Kualitas Situs Web)

Kualitas Situs Web

Tidak Baik

Kurang Baik

Baik

Sangat Baik

Gambar 4.46 Diagram Indikator Frekuensi Kualitas Situs Web

Pada tabel distribusi

frekuensi terlihat sebagian besar

responden berpendapat bahwa

kinerja situs dalam hal kualitas dan

kompatibilitas terbilang baik. Pada

variabel KSW1 (Mudah diingatnya

penamaan website) sebanyak 68%

responden menjawab baik yang

berarti penamaan situs mudah

diingat. Pada variabel KSW2

(kemudahan mengakses web)

sebanyak 72% responden menjawab

baik yang berarti situs dapat terakses

dengan mudah Pada variabel KSW8

(Fitur website dapat berfungsi

dengan baik dengan menggunakan

browser Internet Explorer) sebanyak

54% responden menjawab baik yang

berarti situs kompatibel denga

browser Internet Explorer. Pada

variabel KSW8 (Fitur website dapat

berfungsi dengan baik dengan

menggunakan browser open source

atau Google Chrome) sebanyak 54%

responden menjawab sangat baik

Tidak Baik Kurang Baik Baik Sangat Baik TOTAL

F % Valid F %Valid F %Valid F %Valid F %Valid

KSW1 2 4% 2 4% 34 68% 12 24% 50 100%

KSW2 1 2% 36 72% 13 26% 50 100%

KSW3 1 2% 22 44% 16 32% 11 22% 50 100%

KSW4 1 2%

35 70% 14 28% 50 100%

KSW5 2 4% 36 72% 12 24% 50 100%

KSW6 2 4% 37 74% 11 22% 50 100%

KSW7 3 6%

27 54% 20 40% 50 100%

KSW8 1 2% 1 2% 21 42% 27 54% 50 100%

KSW9 1 2% 1 2% 33 66% 15 30% 50 100%

KSW10 1 2% 27 54% 22 44% 50 100%

Page 44: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

yang berarti situs kompatibel dengan

browser open source atau Google

Chrome. Serta pada variabel KSW10

(penyajian informasi) situs

memperoleh hasil yang baik dengan

54% responden menjawab baik pada

variabel tersebut. Pada variabel

KSW3 (Penggunaan logo pada

website) 443% berpendapat kurang

baik, hal ini dikarenakan logo yang

ada yang dibuat bersifat monoton

atau gambar diam bukan yang

bersifat dinamis atau animasi

bergerak. Kesimpulan yang dapat

diambil dari hasil analisa indikator

kualitas dan kompatibilitas bahwa

situs web telah mempunyai kualitas

yang cukup baik tetapi masih

terdapat kekurangan pada pengunaan

Logo pada website ini yang belum

berupa logo animasi.

Tabel 4.2 Ditribusi Frekuensi Indikator (Kualitas Tampilan)

Tidak Baik Kurang Baik Baik Sangat Baik TOTAL

F

%

Valid F % Valid F

%

Valid F

%

Valid F % Valid

KT1 1 2% 1 2% 43 86% 5 10% 50 100%

KT2 1 2% 31 62% 18 30% 50 100%

KT3 5 10% 23 46% 22 44% 50 100%

KT4 1 2% 1 2% 30 60% 18 36% 50 100%

KT5 1 2% 30 60% 19 38% 50 100%

Kualitas Tampilan

Tidak Baik

Kurang Baik

Baik

Sangat Baik

Gambar 4.47 Diagram Indikator Frekuensi Kualitas Tampilan

Pada tabel distribusi

frekuensi indikator kualitas

tampilan situs hanya memperoleh

hasil yang cukup biasa, pada

variabel KT1 (Kejelasan teks atau

tulisan), KT2 (kualitas gambar),

KT3 (kuaitas tampilan video), KT4

(komposisi warna) KT5 (sederhana

dan menarik) antara 60% hingga

86% responden menjawab baik.

Dapat diambil sebuah kesimpulan

dari distribusi untuk indikator

kualitas dan tampilan bahwa web

ini memiliki tampilan yang cukup

baik.

Page 45: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Tabel 4.3 Distribusi Frekuensi Indikator (Penyajian Materi)

Tidak Baik Kurang Baik Baik Sangat Baik TOTAL

F % Valid F % Valid F % Valid F %Valid F %Valid

PM1 1 2% 2 4% 40 80% 7 14% 50 100%

PM2 2 4% 27 54% 21 42% 50 100%

PM3 33 66% 17 34% 50 100%

PM4 1 2% 30 60% 19 38% 50 100%

Penyajian Materi

Tidak Baik

Kurang Baik

Baik

Sangat Baik

Gambar 4.48 Diagram Indikator Frekuensi Penyajian Materi

Hasil dari tabel distribusi

frekuensi menunjukkan

menunjukkan 54% hingga 80,7%

responden menjawab baik pada

setiap variabel dari indikator

penyajian materi. Dari hasil ini maka

situs yang dibuat tidak akan ada

perubahan materi dari situs yang

telah ada sebelumnya, hanya ada

penambahan beberapa materi yang

belum tersedia.

Tabel 4.4 Distribusi Frekuensi Indikator (Interaksi Pemakai)

Tidak Baik Kurang Baik Baik Sangat Baik TOTAL

F % Valid F % Valid F %Valid F % Valid F %Valid

IP1 1 2% 39 78% 10 20% 50 100%

IP2 32 64% 1 2% 17 34% 50 100%

IP3 35 70% 15 30% 50 100%

IP4 38 76% 12 24% 50 100%

IP5 1 2% 33 66% 16 32% 50 100%

Page 46: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

Interaksi Pemakai

Tidak Baik

Kurang Baik

Baik

Sangat Baik

Gambar 4.49 Diagram Indikator Frekuensi Interaksi Pemakai

Tabel distribusi frekuensi

untuk indikator interaksi pemakai

menunjukkan 66% hingga 78%

responden berpendapat baik pada

variabel yang terdapat pada

indikator interaksi. Pada variabel

PM2 (Kreatifitas anda dalam

proses belajar menggunakan

website ini) 32% berpendapat

kurang baik, dikarenkan tidak

adanya proses pembelajaran dalam

website ini. Dari hasil ini maka

situs yang dibuat tidak akan ada

perubahan interaksi pemakai dari

situs yang telah ada sebelumnya.

Tetapi dari segi kreatifitas dalam

proses belajar perlu ditambahkan

dalam website ini.

PENUTUP

Kesimpulan

Setelah melalui serangkaian proses

pengembangan untuk membuat situs

WenDy! Ini dapat dijadikan sebagai bahan

referensi belajar mata kuliah TPMI bagi

mahasiswa Fakultas Sastra Inggris

Universitas Gunadarma. Hal ini didasarkan

oleh hasil kuesioner yang telah disebarkan

kepada 50 responden sebagai penelitian

awal. Ke lima puluh responden tersebut

merupakan mahasiswa Fakultas Sastra

Inggris yang telah mengakses situs

WenDy!, untuk mengisi kuesioner secara

obyektif. Hasilnya dengan menggunakan

indikator PM (Penyajian Materi) dengan

variabel PM1(kejelasan tujuan), dari 50

responden, 40 responden atau 80%

diantaranya berpendapat baik. begitu juga

dengan variabel PM2 (kemudahan kalimat

dalam pada teks/tulisan), 27 responden

atau 54% berpendapat baik. untuk variabel

PM3 (kemudahan memahami materi), 33

responden atau sekitar 66% berpendapat

baik. yang terakhir adalah PM4 (ketepatan

urutan penyajian), 30 responden atau 60%

berpendapat baik.

Secara keseluruhan jawaban pada

indikator penyajian materi, mayoritas

responden berpendapat baik, dengan kata

lain responden telah memberikan respon

positif terhadap keberadaan situs media

pembelajaran berbasis web ini.

Saran

Untuk para peneliti dan

pengembang yang akan mengembangkan

suatu situs media pembelajaran berbasis

web adalah bagaimana suatu situs media

pembelajaran dibuat dengan

memperhatikan kebutuhan pengguna, dan

tidak hanya memenuhi kebutuhan peneliti

dan pengembang, dalam artian perhatikan

kebutuhan pengguna lebih baik

dibandingkan memperhatikan teknologi

dan alat pengembangan yang digunakan.

Serta memperhatikan seluruh aspek yang

ada dalam proses pembelajaran dan dunia

internet, seperti interaksi, interaktifitas,

Page 47: DEVELOPMENT OF WEB BASED LEARNING MEDIA …papers.gunadarma.ac.id/files/journals/3/articles/850/public/850... · DEVELOPMENT OF WEB BASED LEARNING MEDIA USING PHP AND MYSQL (CASE

dan keamanan. Sehingga suatu situs media

pembelajaran berbasis web yang baik dan

berorientasi pengguna dapat

dikembangkan dengan efektif.

DAFTAR PUSTAKA

[1] Anonim.”Adobe

Flash”.http://id.wikipedia.org/wiki/Adobe_

flash.1 Agustus 2010.

[2] Anonim.” Teori Belajar Behavioristik”.

http://id.wikipedia.org/wiki/Teori_Bel

ajar_Behavioristik.6 September 2010

[3] Anonim.”Format Factory Best Video

And Image Freeware

Converter”.http://www.themaster.web

.id/read/20100607/format-factory-

best-video-and-image-freeware-

converter. 1 Agustus 2010.

[4] Anonim.”Notepad Lebih Dari Notepad

Biasa”.

http://www.gudangsoftware.co.cc/note

pad-lebih-dari-notepad-biasa.html. 1

Agustus 2010

.

[5] Anonim.”Sastra Inggris

Kuno”.http://id.wikipedia.org/wiki/Sa

stra_Inggris_Kuno.1 Agustus 2010.

[6] Anonim.” XAMPP

”.http://id.wikipedia.org/wiki/XAMPP

.1 Agustus 2010.

[7] Atim,J. “Tutorial Install XAMPP”.

http://freetutorial.web.id/wp-

content/uploads/downloads/2010/03/T

utorial-Install-XAMPP.pdf

[8] Budd, Andy. et al. 2006. Advanced

Web Standards Solutions. Berkeley:

Friendsofed.

[9] Castro, Elizabeth. 2006. HTML,

XHTML, and CSS. Berkeley: Peachpit

Press.

[10] Haryanto, Steven. 2005. Kumpulan

Resep Query Menggunakan

MySQL.Jakarta: PC Media.

[11] LPKBM MADCOMS. 2004. Aplikasi

Program PHP & MySQL Untuk

Membuat Website Interaktif. Madiun:

Penerbit Andi.

[12] Schmitt, Christopher. et al. 2005.

Professional CSS Cascading Style

Sheets for Web Design. Indiana:

Wiley Publishing.

[13] Sri Dharwiyanti, “Pengantar Unified

Modelling Language”,

http://www.ilmukomputer.com:81/um

um/yanti-uml-php.

[14] Wilton, Paul. 2006. Beginning

Javascript. Indiana: Wiley Publishing.

[15] Zaki, Ali. 2008. 36 Menit Belajar

Komputer: PHP dan MySQL. Jakarta:

Elex Media Komputindo.