## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir

## PENGEMBANGAN MEDIA PEMBELAJARAN BERBASIS WEB
MENGGUNAKAN PRINSIP MAYER PADA MATA PELAJARAN PEMROGRAMAN WEB DINAMIS UNTUK SISWA SMK JURUSAN

## REKAYASA PERANGKAT LUNAK
Agung Budi Santoso IAIN Manado

## ABSTRAK
Penelitian Pengembangan ini bertujuan: (1) menghasilkan n produk a media b pembelajaran berbasis web a yang k layak l untuk m mata  pelajaran m pemrogaman m web  dinamis  di  SMK,  dan  (2) mengetahui m keefektifan l produk l media l pembelajaran  berbasis  web  yang  dihasilkan  dalam meningkatkan    hasil  belajar m siswa  SMK.  Desain a pengembangan a tersebut a terdiri a atas a tiga prosedur pengembangan, yang meliputi (a) tahap perencanaan (planning), (2) tahap desain, dan (c)  tahap  pengembangan a (development).  Uji a coba  produk  terdiri  dari  uji  alpha  yang  dilakukan oleh  dua  ahli  media  dan  dua  ahli  materi,  serta a uji  beta  yang  dilakukan a oleh  lima  orang a siswa SMK  Negeri  2  Surakarta  dan  guru  pengampu  mata  pelajaran  pemrograman  web.  Pengumpulan data b menggunakan a pedoman b wawancara, b observasi, a angket  untuk  ahli  media, a angket  untuk ahli b materi, dan b angket untuk b respon b guru a dan a siswa.  Hasil Penelitian ini Menemukan Bahwa (1)  menghasilkan a media a pembelajaran A berbasis  web  yang  tersedia  dalam  2  versi,  versi  online yang bisa diakses melalui http://agung.web.id/media dan versi offline yang dikemas dalam bentuk
Compact Disc (CD), (2) produk b yang dihasilkan b dinilai sangat layak untuk b meningkatkan b pemahaman b siswa b pada a materi pemrograman web berdasarkan penilaian b ahli b materi,  ahli b media, b dan b subjek  uji  coba,  dan  (3) b produk b yang  dihasilkan efektif b meningkatkan A pemahaman a tentang b materi  pemrograman a web  kelas  XI  SMK  Negeri  2 Surakarta,  terbukti b dengan b nilai b rata-rata  pretest  sebesar  48,00  meningkat a pada  posttest sebesar 85,07, dengan nilai b gain b skor b 0,71
Kata Kunci: Media Pembelajaran Berbasis Web, Pemrograman Web, Rekayasa Perangkat Lunak

## PENDAHULUAN
Teknologi pembelajaran adalah suatu cabang ilmu yang muncul a untuk A memecahkan suatu a permasalahan a belajar melalui a pendekatan- pendekatan  yang  telah  ada.  AECT  (Association  for  Educational  Communication  and Technology)  tahun  2004  mendefinisikan  bahwa a teknologi  pembelajaran  adalah  sebagai suatu  bidang a garapan  yang  berupaya  memberikan  sarana  pembelajaran  dan  memajukan kemampuan a pembelajaran  dengan  cara  menciptakan,  memanfaatkan,  serta  menata  dan mengolah sumber-sumber teknologi yang benar untuk dunia pendidikan. Munculnya a Teknologi a pembelajaran,  disebabkan a perlu a adanya suatu usaha a untuk mengenali A berbagai A hal-hal A yang  belum  teratasi A seputar A permasalahan  pendidikan dan a memecahkan a berbagai teknik z baru a yang a efektif, inovatif a serta a efisien sesuai

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
dengan  kemajuan  zaman  serta  mengolah  kemampuan  sumber  belajar  sehingga  dapat dimanfaatkan dengan optimal untuk kepentingan pembelajaran.
Berdasarkan  hasil  wawancara  dengan  Ketua  Jurusan  rekayasa  perangkat  lunak SMKN 2 Surakarta pada tanggal 15 agustus 2016 diperoleh informasi bahwa, pada mata pelajaran pemrograman web dinamis hasil belajar siswa masih rendah serta pembelajaran pemrograman web di  kelas  masih  menggunakan  metode  ceramah  dengan  menggunakan media  LCD  proyektor  untuk  menyajikan  materi,  sehingga  pembelajaran  yang dilaksanakan  terkadang  kurang  efektif.  Hal  itu  bisa  dilihat  dari  suasana  kelas  yang siswanya  kurang  memperhatikan  penjelasan  guru  akibat  bosan  dengan  metode  yang digunakan.
Sementara,  hasil  yang  didapat  dari  wawancara  dengan  siswa  mendapatkan informasi  bahwa,  mereka  mengalami  kesulitan  dalam  memahami  materi  pemrograman web dinamis  seperti  pada  bagian  cara  menggunakan  kode-kode  pemrograman  dalam materi  tersebut  yang  akhirnya  berdampak  pada  kurang  maksimalnya  hasil  belajar  yang diperoleh  oleh  siswa,  yang  mana  masih  ada  20%  siswa  yang  belum  mencapai  kriteria ketuntasan  minimal  (KKM).    Adapun  kriteria  ketuntasan  minimal  (KKM)  yang ditetapkan pada mata pelajaran tersebut yaitu 70. Permasalahan yang peneliti temukan di SMKN  2  Surakarta  sebenarnya  juga  terjadi  di  sekolah-sekolah  lain  seperti  di  SMKN  5 manado.  Selama  melaksanakan  praktek  PPL  disana  pada  waktu  masih  menjadi mahasiswa  s1  peneliti  menemukan  metode  pembelajaran  yang  digunakan  masih menggunakan  metode  ceramah  serta  belum  tersedia  media  pembelajaran  yang  spesifik membahas  materi  pemrograman web ,  sehingga  sehingga  membuat  siswa  masih mengalami kesulitan dalam mempelajari pemrograman web .
Berdasarkan  analisis  terhadap  permasalahan  yang  muncul  pada  mata  pelajaran pemrograman web dinamis  di  atas  maka  diperlukan  sebuah  solusi  yang  tepat  dan bermanfaat untuk mencapai tujuan/kompetensi yang diinginkan. Tujuan/kompetensi yang harus  dicapai  dalam  mata  pelajaran  diatas  yakni  para  siswa  mampu  memahami  konsep dari  kode  pemrograman web dan  mampu  menerapkannya  dalam  pembuatan website . Melalui  pembelajaran  yang  menggunakan  media  pembelajaran seharusnya  dapat memberikan  fasilitas  yang  memudahkan  siswa  untuk  mengembangkan  ilmunya    dengan memanfaatkan  media  pembelajaran  atau  sumber  belajar  yang  tersedia  dan  hal  tersebut dapat diwujudkan melalui media pembelajaran berbasis web .
Media  pembelajaran  berbasis web merupakan  sebuah  layanan  pembelajaran berbasis website dengan memanfaatkan atau mengggunakan internet sebagai media. Pada mata  pelajaran  pemrograman web dinamis  tujuan  kompetensi  yang  ingin  dicapai  yaitu siswa  dapat  memahami  dan  menerapkan  kode  pemrograman web ,  sehingga  dibutuhkan media pembelajaran yang memiliki konten materi berisi penjelasan dan alat praktek yang dapat memvisualisasikan kode pemrograman web .  Dengan media pembelajaran berbasis web hal itu dapat diwujudkan karena media tersebut memiliki berbagai macam kelebihan seperti  mendukung  teks,  audio,  video,  gambar,  dan  lain  sebagainya  yang  mampu membantu memvisualisasikan kode pemrograman web .

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir

## KAJIAN TEORI
a. Pembelajaran Berbasis Web (E-Learning)
Teknologi informasi digital merupakan sumber terbaru untuk belajar dan mengajar. Internet based learning, mobile sets, dan jaringan sosial media merupakan usia konstanta dan diklaim a dapat menggantikan a pembelajaran tradisional a didalam kelas 1 . 1 Sekarang E- Learning telah c berkembangyang c tadinya c hanya c World Wide Web berubah c secara c signifikan c menjadi E-Learning. E-Learning c mengutamakan c bentuk
kursus online dimana  teknologi  pembelajaran  yang  dominan  digunakan  saat  ini adalah c jenis c sistem  yang c memberikan c kursus online misalnya c Learning  Management System (LMS) 2 .
Menurut adelheid b web c merupakan b sekumpulan b web b page b atau b halaman c web yang  menjadi  satu  bagian b kedalam b sebuah  domain  atau  sub-domain  yang c letaknya berada  didalam  internet.  Situs web merupakan c kumpulan b dari b halaman b web yang sudah c dipublikasikan  di  jaringan  internet b dan b memiliki c domain b atau c URL  ( uniform resource  locator )  sehingga  hanya  dengan c cara c mengetikkan  alamat  situs web nya  pada aplikasi browser kita dapat mengaksesnya c kapan saja b dan b dimana b saja 3 . Seiring c dengan  berkembangnya  teknologi c dan c informasi c yang c terus c meningkat memungkinkan e-learning pada c saat ini pun c ikut c berkembang. Kegiatan c belajar c mengajar  dapat  dilakukan  dengan  memanfaatkan  jaringan  internet secara jarak jauh tanpa harus duduk di kelas. Dengan memanfaatkan b teknologi c ini c para siswa c dapat mengikuti c pelajaran c dari komputer lain c di tempat yang berbeda c kemudian c dosen c mengajar c didepan c komputer di c suatu c tempat dalam kondisi c waktu c yang  sama  ( synchronous ),  atau c dapat c juga  dosen  mengirimkan  materi atau  soal c melalui c jaringan  lalu c mahasiswa c mengaksesnya  kapan  saja  dan  dimana  saja ( asynchronous ) 4 .
b. Pengembangan b Media b PembelajaranBerbasis  Web  Menggunakan  Prinsip Mayer
Dalam c pengembangan c sebuah c multimedia c pembelajaran terdapat beberapa prinsip. Richard E. Mayer (2009) menjelaskan prinsip-prinsip pengembangan multimedia pembelajaran yaitu sebagai berikut:
1) Prinsip c multimedia, c dalam b prinsip b ini  siswa b bisa  belajar  lebih b baik c dari  teks dan gambar daripada c teks c saja. Alasannya c karena saat c kata-kata b dan b gambar-
1 Abdelaziz, H, A (2014). Creative Design of Interactive E-Learning Activities and Materials (IEAM) A Psycho-Pedagogical Model. International Journal of Technology Diffusion, 5(4), 14-34
2 Al-Omari, A. A., & Salameh, K. M. (2012). E-Learning versus Traditional Learning as Perceived by Undergraduate Students in Jordanian Universities. E-Learning and Digital Media, 9(2), 223-231.
3 Adelheid, A (2013). Cara cepat membuat segala jenis website. Jakarta : PT Elex Media Komputindo.
4 Nugroho, A.A., & Soenarto, S.  (2016). Pengembangan Website Interaktif sebagai Computer-Mediated Communication untuk Pembelajaran Jaringan Komputer . Jurnal Inovasi Teknologi Pendidikan, 3(2), 139-150.

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
gambar b disajikan  secara b bersamaan, siswa c punya c kesempatan c untuk b mengonstruksi model-model c mental verbal c dan c pictorial c dan membangun c hubungan di antara keduanya. Saat c kata-kata disajikan, siswa c punya b kesempatan c untuk b membangun model c mental verbal namun c lebih kecil kemungkinan membangun c model c mental b pictorial dan c lebih c kecil c memungkinkan membuat hubungan c diantara  model-model b mental b verbal  dan  pictorial b itu.  Alasan  lainya  yaitu siswa  yang  menerima b teks  dan  ilustrasi c atau b narasi c dan c animasi  terbukti c berkinerja lebih baik dalam tes  daripada siswa yang menerima teks saja atau narasi saja.
2) Prinsip c keterdekatan c ruang,  dalam  prinsip c ini c siswa-siswa  akan  lebih memahami  materi  jika  disajiikan c dengan c kalimat  dan c gambar  yang c diletakkan berdekatan c dalam c satu    halaman  dibandingkan c dipisah.  Alasannya c yaitu b siswa- siswa b berkinerja c lebih c baik c untuk tes saat c teks c dan b gambar b terkait disajikan c bedekatan c dengan c halaman c buku (atau saat teks on- screen c dan c segmen c animasi c terkait  disajikan c berdekatan  dalam  layar  komputer) c daripada saat disajikan saling berjauhan. Dalam tes, c siswa-siswa berkinerja c lebih baik dalam c tes  transfer  saat c teks c dan  ilustrasi c terkait c disajikan  saling  berdekatandalam halaman buku (atau saat c teks on-screen c dan c segmen animasi b terkait b disajikan b berdekatan dalam layar b komputer) daripada c saat c disajikan c saling c berjauhan.
3) Prinsip c keterdekatan c waktu, Dalam c prinsip c ini siswa akan lebih memahami materi  yang  penyajian  teks  dan  gambarnya  ditampilkan  secara c simultan c (bebarengan) dibandingkan c secara c suksesif b (bergantian).  Alasannya b adalah b saat  bagian b narasi  dan aniasi terkait b disajikan dalam waktu yang bersamaan, siswa c lebih c mungkin bisa c membentuk representasi c mental c atas c keduanya c dalam c memori c mereka c pada waktu c yang c bersamaan.
Hal c ini c membuat c siswa-siswa lebih mungkin c bisa c membangun c hubungan mental c antara representasi verbal dan representasi visual.  Jika  waktu  atau  tempo  antara  “mendengar  kalimat”  dan  “melihat  animasi” relatif c pendek,  maka c siswa c masih c bisa c membangun  koneksi c antara  teks  dan  gambar. Namun demikian, jika c mendengar seluruh narasi c yang c panjang c lalu c melihat keseluruhan c animasi  dalam c waktu  yang  terpisah, c maka  siswa  akan  kesulitan membangun  hubungan c antara c teks c dan  gambar.  Alasan  lainnya  yaitu  siswa  berkinerja lebih  baik  dalam  tes  retensi  saat  bagian  animasi  dan  narasi  terkait  disajikan  secara simultan  daripada b saat  animasi  dan  narasi  disajikan  sdengan  waktu  atau  tempo  yang berbeda.  Dalam  tes,  siswa-siswa b berkinerja  lebih  baik b dalam  tes b transfer  saat  bagian animasi  dan  narasi  terkait  disajikan  secara  simultan  daripada  saat  animasi  dan  narasi disajikan dengan waktu atau tempo yang berbeda.
4) Prinsip koherensi, dalam prinsip ini siswa-siswa akan lebih memahami materi yang disampaikan jika materi ekstra dipisah dibandingkan harus dimasukkan. Prinsip koherensi bisa  dipecah  menjadi  tiga  versi  yang  saling  melengkapi:  (1)  pembelajaran  si  siswa terganggu jika teks dan gambar menarik, namun tidak relevan, ditambahkan ke presentasi multimedia;  (2)  pembelajaran  siswa  terganggu  jika  suara  dan  musik  menarik,  namun tidak relevan, ditambahkan pada presentasi multimedia; dan (3) pembelajaran siswa jadi meningkat jika teks yang tidak diperlukan, disingkirkan dari presentasi multimedia.

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
Alasannya  yaitu  materi  ekstra  selalui  bersaing  memperebutkan  sumber-sumber  kognitif dalam memori sehingga bisa mengalihkan perhatian siswa dari materi yang penting, bisa mengganggu  proses  penataan  materi,  dan  bisa  menggiring  siswa  untuk  mempelajari materi dengan berlandaskan tema yang tidak sesuai.
5) Prinsip  modalitas,  dalam  prinsip  ini  siswa  bisa  belajar  lebih  baik  dari animasi  dan  narasi  daripada  animasi  dan  teks  on-screen,  yakni  siswa-siswa  bisa  belajar lebih baik saat teks dalam pesan multimedia b disajikan sebagai teks yang terucap daripada teks  yang  tercetak.  Alasannya  yaitu  jika  gambar  dan  teks  sama-sama  disajikan  secara visual  (yakni b sebagai  animasi b dan  teks),  maka  saluran b visual/pictorial/bisa b mengalami kelebihan beban tapi saluran audiotori/verbal tak termanfaatkan.
Alasan  lainnya yaitu dalam tes, siswa yang mendapatkan materi dengan animasi  dan  narasi  berkinerja b lebih b baik b dalam  tes  daripada  siswa  yang b menerima animasi  dan  teks  on-screen.  Dalam  tes,  siswa  yang  menerima  animasi  dan  narasi berkinerja  lebih  baik  dalam  tes b transfer b daripada b siswa b yang  menerima  animasi  dan
teks on-screen.
6) Prinsip b redundansi, dalam prinsip ini b siswa akan bisa b belajar b lebih b baik b dari  animasi  dan  narasi b daripada b animasi,  narasi,  dan b teks. Alasanya  yaitu  saat  teks  dan  gambar  disajikan  secara  visual  (yakni:  animasi  dan  teks), saluran visual bisa menjadi kelebihan beban.
Alasan  lainnya  yaitu  dalam  tes,  siswa  yang  mendapatkan  materi  dengan animasi  dan  narasi  berkinerja  lebih  baik  dalam  tes  daripada  siswa  yang  menerima animasi, narasi dan teks. Dalam tes, siswa yang menerima animasi dan narasi berkinerja lebih baik dalam tes transfer daripada siswa yang menerima animasi, narasi dan teks.
7) Prinsip  perbedaan  individual,  dalam  prinsip  ini  dijelaskan  bahwa  sebuah desain  akan  berpengaruh  kuat  bagi  siswa  yang  memiliki  kemampuan  atau  pengetahuan rendah  dibandingkan  siswa  yang  memiliki  kemampuan  atau  pengetahauan  tinggi. Alasannya yaitu siswa-siswa berkemampuan b spatial tinggi b memiliki kapasitas b kognitif b untuk b secara b mental memadukan representasi b verbal dan visual b dari presentasi b multimedia b yang  efektif.  Siswa-siswa  yang  berspatial  rendah  harus mengerahkan  begitu  banyak  kapasitas  kognitif  mereka  untuk  memvisualisasi  gambar yang  terasaji  sehingga  mereka  kurang  bisa  mengintegrasikan  representasi  verbal  dan visual.
Alasan  lainnya  yaitu  dalam  tes  siswa  berpengetahuan  rendah  mencapai perolehan  tinggi  dalam  tes  retensi  dari  penerapan  prinsip-prinsip  desain  multimedia daripada yang dicapai siswa yang berpengetahuan tinggi. Dalam empat dari empat tes, tes siswa  berpengetahuan  rendah  mencapai  perolehan  tinggi  dalam  tes  transfer  dari penerapan  prinsip-prinsip  desain  multimedia  daripada  yang  dicapai  siswa  yang berpengetahuan tinggi.
Dalam  tes,  siswa  dengan  kemampuan  spatial  tinggi  mencapai  perolehan lebih besar dalam tes transfer dari penerapan prinsip-prinsip desain multimedia, daripada yang  diperoleh  siswa  yang  memiliki  kemampuah  spatial  rendah.  Tidak  ada  tes  retensi untuk siswa-siswa spatial rendah dan spatial tinggi.

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
8)
Prinsip  personalia,  dalam  prinsip  ini  siswa  akan  belajar  lebih  baik
melalui  materi  dengan  teks b atau  kata-kata b yang  bersifat b komunikatif b (conversational) b daripada  kalimat b yang  lebih b bersifat  formal.  Lebih b baik    menggunakan b kata- kata b lugas  dan b enak  daripada  bahasa  teoritis,    oleh  karena  itu,  sebaiknya gunakan b bahasa b yang b komunikatif dan sedikit ber-style.
9) Prinsip b interaktivitas,  dalam  perinsip  ini  siswa  akan    belajar  lebih  baik ketika  ia  dapat b mengendalikan b sendiri b apa  yang  sedang  dipelajarinya b (manipulatif: b simulasi, game, branching). Sebenarnya, orang belajar itu tidak selalu b linier b alias b urut b satu b persatu.  Dalam  kenyataannya b lebih b banyak b loncat  dari satu  hal  ke b hal  lain.  Oleh b karena b itu,  multimedia  pembelajaran b harus b memungkinkan user/pengguna dapat b mengendalikan b penggunaan daripada b media itu sendiri.
dengan b kata lain, lebih manipulatif (dalam arti dapat dikendalikan sendiri oleh user) akan lebih  baik.  Simulasi,  branching,  game,  navigasi b yang b konsisten b dan  jelas,  bahasa yang b komunikatif, dan lain-lain akanmemungkinkan  tingkat interaktivitas b makin tinggi.
bb 10) Prinsip b sinyal,  dalam  prinsip  ini  siswa  akan  belajar b lebih b baik b ketika kata-kata,  diikuti  dengan  clue,  highlight, b penekanan b yang b relevan  terhadap  apa  yang disajikan.  Kita  bisa  memanfaatkan  warna,  animasi  dan  lain-lain  untuk  menunjukkan penekanan, highlight atau pusat perhatian (focus of interest). Karena b itu b kombinasi b penggunaan  media  yang  relevan  sangat  penting  sebagai isyarat b atau b kata b keterangan yag memperkenalkan sesuatu
11) Prinsip praktek, dalam prinsip ini interaksi merupakan hal b terbaik b untuk b belajar, kerja praktek b dalam memecahkan b masalah dapat b meningkatkan b cara belajar dan pemahaman yang lebih b mendalam b tentang b materi b yang b sedang b dipelajari.
12) Prinsip  pengandaian,  dalam  prinsip  ini  dijelaskan  pembelajaran  yang manyajikan  materi  dengan b audio b dapat b meningkat  hasil  belajar  siswa.  Siswa  belajar lebih baik dari animasi b dan b narasi, daripada dari animasi dan teks pada layar.
Berdasarkan  kajian  teori  diatas  prinsip-prinsip  oleh  Richard  E.  Mayer merupakan  suatu  prinsip  yang  seharusnya  ada  pada  setiap  media  pembelajaran  karena dengan  dihadirkannya  prinsip-prinsip  ini  kedalam  media  pembelajaran,  maka  media pembelajaran itu akan menjadi lebih bermanfaat dibandingkan dengan media yang tidak memanfaatkan prinsip-prinsip tersebut. Selain itu juga prinsip ini telah teruji dengan tes yang dilakukan oleh Richard E. Mayer 5 .
c. Teori-Teori  Belajar  yang  Melandasi  Pengembangan  Media  pembelajaran Berbasis Web
Teori b pembelajaran b juga b melandasi  penggunaan  media  sebagai  sumber  belajar terkait  fungsinya  sebagai  media.  Menurut  Ally,  Janicki  dan  Liegle,  untuk mengembangkan  materi b pembelajaran b dalam e-learning atau  media b pembelajaran berbasis web perlu  mempertimbangkan  tiga b teori b belajar b yang  sangat  terkenal b yaitu: behaviorisme,kognitivisme dan konstruktivisme. Dalam penelitian ini ketiga teori tersebut
5 Mayer, Richard E. (2009). Multimedia learning prinsi-prinsip dan aplikasi . (Terjemahan Teguh Wahyu Utomo), New York: Cambridge University Press. (Buku asli diterbitkan tahun 2001).

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
digunakan  sebagai  landasan  dalam  mengembangkan  media  pembelajaran  berbasis web namun dalam aktifitas pembelajaran prinsipnya produk media pembelajaran berbasis web ini mengarah kepada upaya peletakkan otonomi belajar lebih bertumpu kepada siswa agar terjadi  kebebasan  bereksplorasi  dan  kontrol  belajar  terhadap  diri  yang  melatih kemandirian belajar dalam muatan pembelajaran berbasis web . Peran pendidik akan lebih banyak menjadi fasilitator aktif 6 .

## METODE PENELITIAN
Jenis  penelitian b yang b digunakan b adalah  penelitian Research  and  Development (R&D  yaitu  penelitian b yang b berorientasi b untuk b meneliti,  merancang,  memproduksi, menguji,  validitas  produk b yang b dihasilkan 7 .  Penelitian  ini  bertujuan  untuk mengembangkan  suatu  media  pembelajaran  berbasis web pada  mata  pelajaran permogamana web dengan  menggunakan  prinsip  Mayer.  Model  pengembangan  yang digunakan  dalam  pengembangan  produk  adalah  model  Alessi  &  Trollip.  Secara  garis besar  model  ini  memiliki  tiga  tahapan  yaitu  perencanaan (planning), perancangan (design), dan pengembangan (development) 8 .

## HASIL DAN PEMBAHASAN

## a. Hasil Pengembangan Produk Awal
Tahap  perencanaan  merupakan  kegiatan  awal  yang  dilakukan  dalam  penelitian  ini. Kegiatan  pada  tahap  ini  dilakukan  pada  bulan  September  2016.  Dimana  hasil  yang diperoleh  dalam  rangkaian  kegiatan  tahap  ini  adalah  ruang  lingkup  materi,  identifikasi karakter  siswa,  pengumpulan  sumber,  dan  brainstorming.  Kemudian  dilanjutkan  dengan tahap kedua yaitu desain dengan membuat beberapa tahapan yaitu pembuatan flowchart , storyboard ,  menyiapkan  dan  konten  materi.  kemudian  dilanjutkan  dengan  tahap  ketiga yaitu  tahap  pengembangan.  Pada  tahapan  ini  ada  beberapa  hal  yang  dilakukan  yaitu penyiapan  elemen-elemen  media  yang  digunakan  baik  itu  gambar,  video,  dan  simulasi kode, kemudian pembuatan produk awal menggunakan aplikasi notepad ++.
b. Hasil Uji Coba Produk
Setelah dilakukan tahap pengembangan kemudian dilakukan uji coba produk yaitu alpha  testing dan beta  testing .  Pada  alpha  testing  validasi  dilakukan  oleh  2  orang  ahli media  dan  2  orang  ahli  materi  dengan  kriteria  penilaian  untuk  ahli  media  secara keseluruhan  penilaian  ahli  media  1  pada  semua  aspek  menghasilkan  rerata  sebesar  3,9 (Sangat  Layak)  dan  pada  ahli  media  2  menghasilkan  rerata  sebesar  3,7  (Sangat  Layak) sedangkan  untuk  ahli  materi  menghasilkan  penilaian  ahli  materi  1  mendapatkan  rerata sebesar  3.7 (Sangat Layak) dan ahli materi 2 mendapatkan rerata 3,8 (Sangat Layak).
6 Surjono, H. D. (2013). Membangun Course e-learning Berbasis Moodle (2 nd ed). Yogyakarta : UNY Press.
7 Sugiyono. (2010). Metode Penelitian Pendidikan: Pendekatan Kuantitatif, Kualitatif, dan R&D . Jakarta: Alfabeta.
8 Alessi, S. M., & Trollip, S. R. (2001). Multimedia for learning: methods and development. Boston: Allyn & Bacon.

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
Perolehan b ini b menunjukkan  bahwa  media  pembelajaran  berbasis web yang dikembangkan sudah b layak b digunakan b sebagai b media pembelajaran b pada
materi b mengelola halaman web dengan melakukan perbaikan pada bagian-bagian sesuai saran dari para ahli media dan ahli materi.
Selanjutnya  untuk  beta  testing  diberikan  kepada  5  siswa  jurusan  Rekayasa Perangkat Lunak dan 1 guru yang mengampu mata pelajaran pemrograman web kelas XI SMKN  2  Surakarta.  Pengambilan  responden b didasarkan b pada  prestasi b belajar b siswa yang diperoleh dari guru bidang studi.Dari hasil penilaian siswa dan guru menunjukkan bahwa  besar  rerata  penilaian  adalah  3,80.  Oleh  karena  itu  media  pembelajaran  berbasis web  yang  dihasilkan  sudah  sangat  layak  digunakan  sebagai  media  pembelajaran  pada materi  mengelola  halaman  web  pada  siswa  SMK  kelas  XI  jurusan  Rekayasa  Perangkat Lunak.
Kemudian b pada b capaian  hasil  belajar  kognitif  siswa b didapati b bahwa  rata- rata b nilai pre test siswa sebelum menggunakan media pembelajaran berbasis web adalah 48,00. sedangkan hasill post test siswa setelah b menggunakan media
pembelajaran b berbasis  web  adalah  85,07.  keseluruhan  siswa b (100%) b memperoleh capaian  belajar  kognitif  melewati  nilai  ketuntasan  minimum  (KKM)  yaitu  ≤  70.  Hal  ini menunjukkan b bahwa b produk b yang b digunakan b dapat meningkatkan capain hasil belajar b kognitif b siswa b pada b materi mengelola halaman web.

## KESIMPULAN
Simpulan  hasil  penelitian  dan  pengembangan  media  pembelajaran  berbasis  web menggunakan prinsip Mayer pada mata pelajaran pemrograman web dinamis untuk siswa SMK jurusan rekayasa perangkat lunak adalah sebagai berikut:
1. Produk  media  pembelajaran  berbasis  web  yang  dihasilkan,  memiliki  desain tampilan umum seperti sebuah tampilan web pada umumnya, namun konten didalamnya terdiri dari berbagai komponen media yakni teks, gambar, video, simulasi, berbagai fitur link, dan menggunakan proporsi warna yang menarik untuk siswa dalam belajar. Produk yang  dikembangkan  dalam  penelitian  ini  terdiri  dari  beberapa  komponen  isi, diantaranya:a)  halaman  awal,  b)  halaman  profil  pengembang,  c)  halaman  tujuan kompetensi,  d)  menu  utama,  e)  kuis,  dan  f)  halaman  yang  memuat  penjelasan  tentang penggunaan  media  yang  dikembangkan.  Desain  evaluasi  yang  ada  pada  produk  yang dikembangkan  berbentuk  kuis  mencakup  latihan  soal  dalam  bentuk  tes  pilihan  ganda yang  disertai  hasil  setelah  menjawab  semua  pertanyaan,  hal  ini  sesuai  dengan  capaian pembelajaran  pemrograman  web,  yakni  siswa  diharapkan  dapat  memahami  konsep  dan mampu menerapkan  kode-kode pemrograman web dalam mengelola halaman web.
Produk  media  pembelajaran  berbasis  web  terbukti  layak  dilihat  dari  aspek  media dan  materi.  Hal  itu  dapat  dilihat  dari  hasil  uji  kelayakan  produk  media  pembelajaran berbasis  web  menggunakan  prinsip  Mayer  pada  mata  pelajaran  pemrograman  web dinamis untuk siswa SMK jurusan rekayasa perangkat lunak adalah sebagai berikut:
a. Hasil uji alpha test diperoleh rerata skor penilaian ahli media 1 pada semua aspek  menghasilkan  rerata  sebesar  3,9  “Sangat  Layak”  dan  pada  ahli  media  2 menghasilkan rerata sebesar 3,7 “Sangat Layak”.

## Irfani
ISSN 1907-0969 E ISSN 2442-8272 Volume 16 Nomor 2 Desember 2020 Halaman 41-49 http://journal.iaingorontalo.ac.id/index.php/ir
b. Hasil uji alpha test diperoleh rerata skor penilaian ahli materi 1 pada semua aspek  menghasilkan  rerata  sebesar  3,7  “Sangat  Layak”  dan  pada  ahli  materi  2 menghasilkan rerata sebesar 3,8 “Sangat Layak”.
c. Hasil  respon  5  siswa  jurusan  Rekayasa  Perangkat  Lunak  dan  1  guru pengampu mata pelajaran pemrograman web kelas XI SMKN 2 Surakarta pada uji beta test diperoleh skor 3,8 dengan kategori “Sangat Layak”.
2. Produk  media  pembelajaran  berbasis  web  yang  dihasilkan  terbukti  bermanfaat dalam  meningkatkan  capaian  hasil  belajar  kognitif  siswa  pada  mata  pelajaran pemrograman  web.  Hal  ini  ditinjau  dari  hasill  uji  posttest  yang  telah  dilakukan.
Berdasarkan  hasil  uji  posttest  diketahui  bahwa  100%  siswa  mencapai  hasil  belajar kognitif  lebih  besar  dari  angka  KKM  (70).  Dengan  rata-rata  capaian  hasil  belajarnya 85,07.  Selain  itu  diperoleh  nilai  gain  (g)  sebesar  0,71  yang  secara  kualitatif  termasuk dalam klasifikasi “tinggi” (N-Gain ≥ 0,7)

## DAFTAR PUSTAKA
Abdelaziz,  H,  A  (2014).  Creative  Design  of  Interactive  E-Learning  Activities  and Materials  (IEAM)  A  Psycho-Pedagogical  Model. International  Journal  of Technology Diffusion, 5(4), 14-34
Adelheid, A (2013). Cara cepat membuat segala jenis website. Jakarta : PT Elex Media Komputindo.
Alessi,  S.  M.,  &  Trollip,  S.  R.  (2001). Multimedia  for  learning:  methods  and development. Boston: Allyn & Bacon.
Al-Omari,  A.  A.,  &  Salameh,  K.  M. (2012).  E-Learning  versus  Traditional  Learning  as Perceived  by  Undergraduate  Students  in  Jordanian  Universities. E-Learning and Digital Media, 9(2), 223-231. Mayer, Richard E. (2009). Multimedia learning prinsi-prinsip dan aplikasi . (Terjemahan Teguh  Wahyu  Utomo),  New  York:  Cambridge  University  Press.  (Buku  asli diterbitkan tahun 2001).
Nugroho,  A.A.,  &  Soenarto,  S.    (2016).  Pengembangan  Website  Interaktif  sebagai Computer-Mediated Communication untuk Pembelajaran Jaringan Komputer . Jurnal Inovasi Teknologi Pendidikan, 3(2), 139-150. Surjono,  H.  D.  (2013). Membangun  Course  e-learning  Berbasis  Moodle  (2 nd ed).
Yogyakarta : UNY Press.
Sugiyono. (2010). Metode Penelitian Pendidikan: Pendekatan Kuantitatif, Kualitatif, dan R&D . Jakarta: Alfabeta.