Volume 5 No 2, Oktober 2019 http://journal.trunojoyo.ac.id/pangabdhi ISSN: 2477-6289

## PENDAHULUAN
Memiliki  keahlian  di  bidang  pemrograman web merupakan  salah  satu  kompetensi  keahlian yang harus dimiliki oleh setiap lulusan SMK RPL sesuai  dengan  yang  tercantum  dalam  struktur kurikulumnya  (Menengah,  2018).  Pemrograman
web adalah  salah  satu  aspek  penting  dalam pengembangan web . Web itu sendiri dapat dibagi menjadi  dua  jenis,  yaitu web statis  dan web dinamis. Web statis  merupakan  jenis  situs web yang menampilkan informasi yang sifatnya statis (tetap).  Teknologi  yang  digunakan  untuk

## Pembelajaran Interaktif Pemrograman Web dengan Menggunakan Media CMS bagi Guru dan Siswa SMKN 1 Kamal

## Noor Ifada dan Sri Wahyuni
Fakultas Teknik, Universitas Trunojoyo Madura Email: noor.ifada@trunojoyo.ac.id DOI: https://doi.org/10.21107/pangabdhi.v5i2.6109
Artikel Diterima : 12 Agustus 2019/ Revisi : 7 September 2019/Terbit : 19 Oktober 2019

## Abstrak
Selama  ini,  pembelajaran  pemrograman web di  SMKN  1  Kamal  dilaksanakan  dengan  metode konvensional dimana aplikasi penyunting teks dan web browser dibuka dalam window yang terpisah. Jadi proses  pembelajaran  dilaksanakan  dalam  dua  tahapan,  yaitu  dari  membuka window pertama  untuk membuat skrip program dan kemudian membuka window kedua untuk untuk melihat hasilnya. Meskipun metode  ini  umum  dan  mudah  untuk  diterapkan,  namun  proses  pembelajarannya  menjadi  kurang iteraktif. Tujuan dari kegiatan ini adalah memberikan pengenalan dan pelatihan CMS yang digunakan sebagai media pembelajaran interaktif untuk mata pelajaran pemrograman web bagi guru dan siswa di SMKN 1 Kamal. Aplikasi CMS yang digunakan adalah WordPress, yaitu aplikasi CMS yang sangat populer dan memiliki fitur tab yang memungkinkan terjadinya pergantian pilihan antara aplikasi penyunting teks skrip program dengan aplikasi tampilan dalam web browser di dalam satu window yang sama, Kegiatan terbagi menjadi lima tahapan, yaitu: persiapan pelaksanaan pelatihan, persiapan kelengkapan pelatihan, pelaksanaan  pelatihan,  pelaksanaan  pendampingan,  dan  dokumentasi  akhir.  Hasil  evaluasi  kegiatan menyatakan bahwa kegiatan dianggap berhasil karena: (a) pendaftar kegiatan sesuai dengan target, (b) kegiatan pelatihan berlangsung lancar dengan hadirnya seluruh peserta secara lengkap dan tepat waktu, (c)  setiap  peserta  dapat  melakukan  instalasi  WordPress  serta  dapat  menggunakannya  dengan  baik selama  pelatihan,  (d)  seluruh  peserta  mampu  menangkap  penjelasan  dari  materi  pelatihan  sehingga dapat mengerjakan soal latihan yang diberikan dengan baik, dan (e) seluruh peserta mampu mengerjakan tugas mandiri yaitu membuat halaman web dengan menggunakan WordPress.

## Kata Kunci: CMS, media pembelajaran interaktif, pemrograman web, WordPress

## Abstract
SMKN 1 Kamal had been implementing the web programming conventional teaching method that the text editor and web browser applications were used separately. In this case, two-stage of learning processes were applied one after the other, i.e., creating the programming script using the text editor application, and check the result using the web browser application afterwards. This teaching method is widely implemented, yet the learning process is not interactive. The purpose of this programme is to train the teachers and students in SMKN 1 Kamal to use CMS as an interactive web programming learning media. We use the WordPress CMS as it is very popular and has a tab feature that allows us to easily toggle between the text editor and browser applications in a single window. The programme is organized into five stages: training preparation, training fittings preparation, training session, assistance session, and final documentation. Our evaluations show that the programme is successfully accomplished  given that: (a) the number registrars matches our target, (b) the training sessions are well-conducted based on the attendance of participants, (c) each training participant is able to instal and use WordPress accordingly, (d) all training participants are able to solve the practice questions, showing that they have sufficient comprehension regarding the training materials, and (e) all participants are able to finish their project tasks, i.e., building websites using WordPress.
Keyword: CMS, interactive learning media, web programming, WordPress
membangun  sistem  ini  berbasis client-side dan fokus  pada  pengembangan web di  sisi front-end . Web dinamis  merupakan  jenis  situs web yang menampilkan  informasi  yang  sifatnya  dinamis dan/atau  memproses  data  yang  dikirimkan  oleh user , serta seringkali memerlukan akses basisdata. Teknologi yang  digunakan merupakan  gabungan dari teknologi berbasis client-side dan server-side . Teknologi  berbasis server-side fokus  pada pengembangan web di sisi back-end . Berdasarkan deskripsi  kedua web ,  jelaslah  bahwa  keahlian untuk  mengembangkan  web statis merupakan dasar utama bagi pengembangan web dinamis. Bahasa yang digunakan dalam pengembangan web statis  adalah  bahasa  standar yang  merupakan  hasil  kerja  sama  antara  W3C ( World  Wide  Web  Consortium )  dan  WHATWG ( Web Hypertext Application Technology Working Group )    (Krause,  2016).  Bahasa  standar  yang dimaksud  di  sini  adalah  HTML  ( HyperText Markup Language ), CSS ( Cascading Style Sheet ), dan JavaScript.
Pembelajaran  pemrograman web untuk pengembangan web statis membutuhkan penggunaan  dua  buah  aplikasi.  Aplikasi  pertama adalah  aplikasi  penyunting  teks  yang  digunakan untuk  membuat  skrip  program.  Contoh  aplikasi penyunting  teks  adalah  Notepad++,  Sublime, Brackets,  dan  lain-lain.  Aplikasi  kedua  adalah web  browser yang  digunakan  untuk  membuka halaman web sebagai  hasil  eksekusi  dari  skrip program  yang  dibuat  dalam  aplikasi  pertama. Contoh web  browser adalah  Google  Chrome, Mozilla Firefox, Internet Explorer, dan lain-lain.
(a) (b) Gambar 1. Aplikasi untuk pemrograman web statis: (a) Aplikasi penyunting teks untuk membuat skrip program dan (b) Aplikasi web browser untuk membuka dokumen web
Selama  ini,  pembelajaran  pemrograman web dilaksanakan dengan metode konvensional dimana aplikasi penyunting teks dan web browser dibuka dalam window yang terpisah (lihat Gambar 1). Jadi proses pembelajaran dilaksanakan dalam dua tahapan, yaitu dari membuka window pertama
untuk  membuat  skrip  program  dan  kemudian membuka window kedua  untuk  untuk  melihat hasilnya. Meskipun metode ini umum dan mudah untuk diterapkan, namun proses pembelajarannya menjadi kurang iteraktif.
Metode pembelajaran akan menjadi interaktif apabila kedua aplikasi tersebut dapat ditampilkan dalam  satu  kesatuan window ,  sehingga  ketika skrip  program  dibuat  maka  hasilnya  akan langsung  dapat  dilihat  di  dalam window yang sama.  Metode  interaktif ini diterapkan  oleh situs pembelajaran  pengembangan web secara online yang  sangat  populer  seperti  W3schools.com (www.w3schools.com)  dan  Khan  Academy (www.khanacademy.org/). Contoh tampilan media pembelajaran interaktif untuk pemrograman web di  W3schools.com  dan  Khan Academy  dapat  dilihat  dalam  Gambar  2  dan Gambar  3.  Dari  kedua  gambar  tersebut  terlihat jelas bahwa aplikasi penyunting teks (sisi kiri) dan aplikasi web  browser (sisi  kanan)  berada  dalam satu window yang sama.
Gambar 2. Media pembelajaran interaktif untuk pemrograman web di W3schools.com
Gambar 3. Media pembelajaran interaktif untuk pemrogra man web di Khan Academy
Gambar 4. Fitur tab untuk pergantian aplikasi penyunting teks skrip program (tab HTML)
dengan aplikasi tampilan dalam web browser (tab Visual)
Salah  satu  media  pembelajaran  interaktif untuk pemrograman web adalah dengan memanfaatkan  CMS  ( Content  Management System ) (Lovreković & Lovreković, 2015). CMS adalah  suatu  aplikasi  yang  digunakan  untuk membuat atau mengelola konten digital. Di dunia kerja,  memiliki  keahlian  dibidang  CMS  bahkan menjadi  salah  satu  kualifikasi  wajib  untuk dimiliki  ketika  melamar  pekerjaan  (Wardhani, 2018), khususnya di bidang Teknologi Informasi (TI). CMS yang paling populer digunakan saat ini adalah  WordPress  (Lab,  2018),  dengan  klaim jumlah penggunaan sebesar 31% dari keseluruhan web yang ada. Salah satu fitur yang tersedia dalam WordPress  adalah  fitur  tab  yang  memungkinkan terjadinya  pergantian  pilihan  antara  aplikasi penyunting  teks  skrip  program  (tab  HTML) dengan aplikasi tampilan dalam web browser (tab Visual) di dalam satu window yang sama, seperti yang diperlihatkan dalam Gambar 4.
Tujuan  dari  kegiatan  Program  Kemitraan Masyarakat  (PKM)  ini  adalah  memberikan pengenalan dan pelatihan fitur yang ada di dalam WordPress sebagai media pembelajaran interaktif untuk mata pelajaran pemrograman web bagi guru dan siswa di SMK.

## METODE
Mitra  dalam  kegiatan  Program  Kemitraan Masyarakat  (PKM)  ini  adalah  SMKN  1  Kamal, salah  satu  SMK  negeri  di  kabupaten  Bangkalan yang  memiliki  kompetensi  keahlian  RPL. Kegiatan PKM dilaksanakan dalam jangka waktu delapan  bulan.  Kegiatan  terbagi  menjadi  lima tahapan berikut:

## Tahap Persiapan Pelaksanaan Pelatihan
Dalam  tahap  ini  dilakukan  proses  persiapan pelaksanaan  kegiatan  pelatihan.  Terdapat  lima kegiatan yang dilakukan dalam tahap ini, yaitu:
▪ Perencanaan  pelaksanaan  kegiatan,  yaitu meliputi sosialisasi, pelatihan, dan pendampingan
▪ Pembuatan undangan sosialisasi untuk membahas  pelaksanaan  jadwal  kegiatan pelatihan dan pendampingan
▪ Penyebaran  undangan  kepada  sekolah  mitra yaitu SMKN 1 Kamal
▪ Penerimaan  pendaftaran  peserta  pelatihan. Sekolah  mitra  dapat  mengirimkan  6  orang calon  peserta  yang  terdiri  dari  3  guru  dan  3 siswa dengan kualifikasi Teknologi Informasi
Komunikasi  (TIK)  dari  kompetensi  keahlian Rekayasa Perangkat Lunak. Siswa dilibatkan dalam  pelatihan  dengan  harapan  agar implementasi hasil pelatihan di sekolah mitra nanti  dapat  berjalan  dengan  lebih  mudah karena  guru  sedari  awal  dapat  melihat  dan menilai  tanggapan  dan  kemampuan  siswa terhadap  metode  pembelajaran  interaktif dengan  WordPress  untuk  pemrograman web statis
▪ Pemberian informasi kepada peserta pelatihan (Gambar  5)  untuk  mempersiapkan  skrip pemrograman web dengan  menggunakan HTML, CSS,  dan  JavaScript.  Skrip  ini  nanti akan  dipraktikkan  di  sekolah masing-masing setelah kegiatan pelatihan selesai

## Gambar 5. Dokumentasi sosialisasi PKM

## Tahap Persiapan Kelengkapan Pelatihan
Dalam  tahap  ini  akan  dilakukan  proses persiapan kelengkapan kegiatan pelatihan. Terdapat  empat  kegiatan  yang  dilakukan  dalam tahap ini, yaitu:
▪ Penjadwalan peminjaman ruang
Laboratorium  Sistem  Cerdas  dan  Robotika yang  dimiliki  oleh  Program  Studi  Teknik Mekatronika,  yaitu  tempat  pelaksanaan pelatihan  dengan  fasilitas  LCD,  papan  tulis, AC  dan  CCTV  yang  dibutuhkan  untuk kegiatan pelatihan
▪ Persiapan aplikasi WordPress yang digunakan dalam pelatihan
▪ Pembuatan modul sebagai bahan materi yang akan  diberikan  dalam  pelatihan.  Modul  ini berupa  teori  dan  permasalahan  yang  dapat membantu peserta pelatihan untuk memahami materi
▪ Persiapan  media  presentasi  yaitu  LCD  dan slide presentasi yang dibuat oleh pemateri

## Tahap Pelaksanaan Pelatihan
Dalam  tahap  ini  dilakukan  pelaksanaan pelatihan  sesuai  dengan  jadwal  yang  telah disepakati  ketika  sosialisasi  kegiatan  dilakukan. Jadwal  ini  dibuat  dengan  mempertimbangkan waktu yang memungkinkan bagi peserta guru dari sekolah mitra untuk mengikuti kegiatan pelatihan di  tengah  kesibukan  mereka  dengan  kegiatan mengajar di sekolah.
Pendataan  ulang  peserta  dilakukan  di  sini berdasarkan  informasi  yang  diperoleh  pada  saat pendaftaran  peserta  yang  dilaksanakan  dalam tahap  persiapan  pelaksanaan  pelatihan.  Untuk mendukung  kegiatan  pelatihan,  setiap  peserta akan  menerima  fasilitas blocknote ,  alat  tulis, modul  pelatihan,  dan flaskdisk berisi  instalasi WordPress.
Terdapat  empat  kegiatan  yang  dilakukan dalam tahap ini, yaitu:
▪ Pelatihan instalasi WordPress (Gambar 7)
▪ Pelatihan penggunaan HTML dalam WordPress (Gambar 7)
▪ Pelatihan penggunaan CSS dalam WordPress (Gambar 8)
▪ Pelatihan  penggunaan  JavaScript  dalam WordPress (Gambar 9)
Gambar 6. Dokumentasi pembukaan pelatihan
Gambar 7. Dokumentasi pelatihan instalasi WordPress dan HTML
Gambar 8. Dokumentasi pelatihan CSS
Gambar 9. Dokumentasi pelatihan JavaScript

## Tahap Pelaksanaan Pendampingan
Dalam  tahap  ini  dilakukan  pendampingan di  sekolah  mitra  setelah  pelaksanaan  kegiatan pelatihan.  Pendampingan  dilakukan  dengan terlebih  dahulu  menyesuaikan  jadwal  antara  tim dengan  guru  dan  siswa.  Kegiatan  pendampingan adalah  untuk  melakukan  pengecekan  apakah  ada permasalahan yang dihadapi guru dan siswa pada saat  mempraktekkan  skrip  yang  mereka  buat sendiri dengan menggunakan WordPress ( Gambar  10  dan  Gambar  11).  Total pendampingan  dilakukan  sebanyak  lima  kali pertemuan.
Gambar 11. Dokumentasi pendampingan siswa

## Tahap Dokumentasi akhir
Dalam tahap ini dilakukan penutupan program PKM.  Dokumentasi  sebagai  laporan  akhir  yang nantinya  akan  dikirim  ke  DIKTI.  Laporan  ini berisi  tentang  penjabaran  kegiatan  pelatihan, pendampingan, evaluasi dan dokumentasi kegiatan lainnya.
Gambar 12. Dokumentasi penutupan program

## HASIL DAN PEMBAHASAN
Berdasarkan lima tahapan pelaksanaan kegiatan yang telah dijelaskan sebelumnya, kami melakukan dua tingkatan evaluasi berikut:

## Evaluasi Tahap Pertama
Tingkatan  evaluasi  ini  dilakukan  setelah sosialisasi  pada  dua  sekolah  mitra.  Indikator keberhasilan  dari  evaluasi  tahap  pertama  adalah adanya  minat  sekolah  yang  diundang  untuk mendaftarkan  diri  sebagai  peserta  pelatihan pembelajaran  interaktif  permrograman web dan kemauan  untuk  melengkapkan  persyaratan  yang diminta  oleh  panitia.  Indikator  keberhasilannya: sekolah mitra SMKN 1 Kamal mengikuti kegiatan sosialisasi,  hadir  pada  undangan  sosialisasi  dan mendaftarkan 6 (enam) orang peserta yang terdiri dari guru dan siswa/siswi.
Hasil  evaluasi  tahap  pertama  adalah  berhasil, yaitu bahwa kami menerima pendaftaran 6 (enam) orang  peserta  dari  SMKN  1  Kamal  setelah
sosialisasi  dilakukan.  Rincian  peserta  adalah  3 (tiga)  orang  guru  dari  jurusan  RPL  pengampu pelajaran  pemrograman web dan  3  (tiga)  orang siswa/siswi dari jurusan yang sama.

## Evaluasi Tahap Kedua
Tingkatan  evaluasi  ini  dilakukan  setelah pelaksanaan  pelatihan.  Setiap  peserta  diberikan beberapa kali latihan soal yang berkaitan dengan materi,  secara  berselang-seling  antara  penjelasan teori  dan  latihan.  Indikator  keberhasilan  dari evaluasi  tahap  kedua  adalah  bahwa  kegiatan pelatihan  berlangsung  lancar  dengan  hadirnya  6 (enam)  peserta  secara  lengkap  dan  tepat  waktu, seluruh  peserta  memahami  pentingnya CMS dan instalasi WordPress yang diberikan dalam Modul Pendahuluan  (Gambar  13),  seluruh  peserta mampu  mengerjakan  tugas  latihan  modul pelatihan  2  –  7  (Gambar  13),  seluruh  peserta mampu mengerjakan tugas mandiri yaitu halaman web dengan  kombinasi  HTML,  CSS  dan JavaScript dengan menggunakan WordPress.
Hasil evaluasi tahap kedua adalah berhasil, yaitu bahwa:
1. Kegiatan  pelatihan  berlangsung  lancar, dengan  hadirnya  6  (enam)  peserta  secara lengkap dan tepat waktu
2. Masing-masing  peserta  dapat  melakukan instalasi  WordPress  (modul  Pendahuluan) pada  laptop  pribadinya  sehingga  dapat digunakan dengan baik untuk pelatihan.
3. Adanya kemampuan peserta untuk menangkap  penjelasan  dari  materi  pelatihan, terbukti  dengan  kemampuan  mengerjakan soal latihan yang diberikan dari modul 2 – 7 dengan baik.
4. Seluruh  peserta  mampu  mengerjakan  tugas mandiri  yaitu  membuat  halaman  web  yang mengkombinasikan HTML, CSS dan JavaScript dengan menggunakan WordPress. Gambar 14 memperlihatkan dua contoh hasil tugas mandiri.
Gambar 13. Materi Pelatihan
Gambar 14. Contoh hasil tugas mandiri
Gambar 14. Tampilan Halaman Web Site

## KESIMPULAN
Kegiatan  PKM  berbentuk  pembelajaran interaktif  mata  pelajaran  Pemrograman Web dengan menggunakan media CMS bagi Guru dan Siswa SMKN 1 Kamal telah berhasil dilaksanakan  dengan  hasil  keberhasilan  sebagai berikut:
1. Pendaftar  kegiatan  adalah  6  (enam)  orang peserta  yang  terdiri  dari  3  (tiga)  orang  guru dari  jurusan  RPL  pengampu  pelajaran pemrograman  web  dan  3  (tiga)  orang siswa/siswi dari jurusan yang sama.
2. Kegiatan  pelatihan  berlangsung  lancar, dengan  hadirnya  6  (enam)  peserta  secara lengkap dan tepat waktu
3. Masing-masing  peserta  dapat  melakukan instalasi WordPress dan dapat menggunakannya dengan baik selama pelatihan.
4. Seluruh peserta mampu menangkap penjelasan  dari  materi  pelatihan  sehingga dapat mengerjakan soal latihan yang diberikan dengan baik.
5. Seluruh  peserta  mampu  mengerjakan  tugas mandiri  yaitu  membuat  halaman web yang mengkombinasikan HTML, CSS dan JavaScript dengan menggunakan WordPress
Sebagai keberlanjutan dari kegiatan PKM ini, tim  kami  berencana  untuk  mengadakan  kegiatan pemanfaatan  media  CMS  untuk  pembelajaran Pengembangan Web Dinamis  bagi  Guru  dan Siswa SMKN 1 Kamal.

## UCAPAN TERIMA KASIH
Program ini didanai oleh Kementerian Riset, Teknologi  dan  Pendidikan  Tinggi  sesuai  dengan Perjanjian  Pendanaan  Pelaksanaan  Program Pengabdian Masyarakat Nomor: 103/SP2H/PPM/DRPM/2019.

## DAFTAR PUSTAKA
Krause,  J.  2016. Introducing  Web  Development . Berlin: Apress.
Lab, S. 2018. The Top 20 Most Popular Content
Management  Software .  Retrieved  from https://www.capterra.com/content-
management-software/#infographic
Lovreković,  Z.  T.,  &  Lovreković,  T.  Z.  2015.
CMS  as  a  web  programming  learning  tool. International Journal of Process Management – New Technologies (JPMNT), Vol 3(4).
Menengah,  D.  J.  P.  D.  d.  (2018). Peraturan Direktur  Jenderal  Pendidikan  Dasar  dan Menengah  Kementerian  Pendidikan  dan Kebudayaan  No.  07/D.D5/KK/2018  tentang Struktur  Kurikulum  Sekolah  Menengah Kejuruan (SMK)/Madrasah Aliyah Kejuruan (MAK) . Jakarta
Wardhani,  A.  T.  (2018). 5  Keahlian  yang  Wajib Dimiliki  Pencari  Kerja  Zaman  Now .
Retrieved from https://www.liputan6.com/lifestyle/read/322 7288/5-keahlian-yang-wajib-dimiliki-
pencari-kerja-zaman-now
Volume 5, No. 2, Oktober 2019 http://journal.trunojoyo.ac.id/pangabdhi ISSN: 2477-6289