## ISSN 2723-4118 (Media Online)

## Pelatihan dan Uji Kompetensi Ujian Nasional Desain Web Tingkat di SMK Teladan Pematangsiantar

## Rafiqa Dewi, Widodo Saputra
Prodi Manajemen Informatika, AMIK Tunas Bangsa, Pematangsiantar, Indonesia Email: 1 rafiqa@amiktunasbangsa.ac.id, 2,* widodo@amiktunasbangsa.ac.id
Abstrak − Desain  web  adalah biasanya  diterapkan  pada  media  digital  seperti  website.  Hal  tersebut  akan  berkaitan  dengan web  development  yang  menjadi  pengembangan  pada  sebuah  website  yang  menuntut  fungsionalitas  dan  membutuhkan esensi seni pada desain. Secara tidak langsung, website desain ini termasuk istilah yang digunakan dalam pembuatan desain. Fokus  pada  tampilan,  tapi  tidak  akan  menghilangkan  fungsi  utama  website  yang  sedang  didesain.  Mampu  memberikan kenyamanan  tambahan  bagi  pengunjung  dan  pembaca  website.  Untuk  tujuan  dari  pembuatan  web  design  sendiri  dengan menjadi  salah  satu  media  komunikasi.  Tujuan  tersebut  akan  menyampaikan  informasi  secara realtime dan  secara  cepat. Sedangkan dalam membuat desain sendiri, website membutuhkan kemampuan khusus. Maka dari itu pelatihan desain web dirasa  perlu  untuk  diterapkan  pada  entitas  yang  berkonsentrasi  di  bidang  rekayasa  perangkat  lunak  sejak  usia  sekolah. Pelatihan  dan  uji  kompetensi Ujian  Nasional  dilakukan  dengan  metode  penyampaian  ceramah  tentang  materi  desain  web, tanya jawab dan diskusi, praktikum dan evaluasi terhadap hasil praktikum.
Kata Kunci: Pelatihan; Desain; Web; Uji; Kompetensi
Abstract− Web design is usually applied to digital media such as websites. This will relate to web development which is the development of a website that demands functionality and requires the essence of art in design. Indirectly, this website design includes the terms used in making designs. Focus on the appearance, but will not eliminate the main function of the website that is being designed. Able to provide additional convenience for visitors and website readers. For the purpose of making your  own  web  design  by  becoming  one  of  the  communication  media.  This  goal  will  convey  information  in  real  time  and quickly. Meanwhile, in making your own design, the website requires special skills. Therefore, web design training is deemed necessary to be applied to entities that concentrate in the field of software engineering since school age. The training and competency test for the National Examination is carried out using the method of delivering lectures on web design material, questions and answers and discussions, practicum and evaluation of the results of the practicum.
Keywords : Training; Design; Web; Test; Competency

## 1. PENDAHULUAN
Perkembangan  teknologi  informasi  dan  komunikasi  khususnya  internet  melahirkan  sebuah  media  baru  yaitu website, yang semakin lama semakin berkembang dan dimanfaatkan dalam setiap bidang kehidupan, baik secara pribadi  maupun  institusi  (Irawan,  Susanti,  &  Triyanto,  2016).  Perancangan  web ( web  design )  adalah  istilah umum biasanya berupa hypertext atau hypermedia yang dikirimkan ke pengguna akhir melalui World Wide Web (www),  dengan  menggunakan  sebuah browser  web atau  perangkat  lunak  berbasis web .  Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis. Salah satu bahasa pemrograman yang dapat digunakan dalam membangun web adalah PHP, PHP merupakan bahasa server-side  scripting  yang  menyatu  dengan  HTML  untuk  membuat  halaman  web  yang  dinamis.  Maksud  dari server-side scripting adalah sintaks dan perintah-perintah yang diberikan akan sepenuhnya dijalankan di server tetapi disertakan pada dokumen HTML  (Khusnia & Riasti, 2014).  Sekolah  merupakan bangunan atau  lembaga untuk  belajar  dan  mengajar,  serta  tempat  menerima  dan  memberi  pelajaran.  Sebagaimana  yang  telah  kita ketahui bahwa sekolah merupakan salah satu tempat bagi para siswa untuk menuntut ilmu. Hingga (Irawan et al., 2016).  SMK Teladan  Pematangsiantar merupakan salah  satu  SMK yang unggul  dan memiliki  potensi siswa dan alumni yang kreatif, hal ini dibuktikan dari beberapa penghargaan yang berhasil diraih pada SMK tersebut. SMK  Teladan  Pematangsiantar  beralamatkan  di  Jl.  Singosari  No.  3,  Bantan,  Kec.  Siantar  Barat,  Kota  Pematang Siantar, Sumatera Utara 21142. SMK  Teladan Pematangsiantar  memiliki beberapa prgram studi salah  satunya adalah  Rekayasa  Perangkat  Lunak  (RPL)  yang  memiliki  kurikulum  mengarah  kepada  pembangunan  aplikasi berbasis web. Untuk (Saputra, 2020). Undang-undang Nomor 32 Tahun 2004 tentang Pemerintah Daerah pada hakikatnya  mengatur  peningkatkan  pemberdayaan  masyarakat,  menumbuhkan  prakarsa  dan  kreatifitas, meningkatkan  peran  serta  masyarakat,  pemerataan,  keadilan,  dengan  memperhatikan  potensi  dan  keaneka ragaman (Wahyuningrum & Januarita, 2014). Demi meningkatkan kemampuan peserta didik dalam menghadapi serangkai  kegiatan  yang  bersifat  uji  coba  kemampuan  personil  seperti  Ujian  Nasional  maka  diperlukan kreatifitas dan kemampuan individu yang baik. Untuk itu sangat diperlukan diadakan program pelatihan khusus bagi siswa-siswa agar dapat mengasah kreatifitas dan kemampuan khususnya dibidang web. Program pelatihan ini memberikan dampak yang baik bagi siswa-siswa dalam menganalisa sistem dan mampu membangun aplikasi berbasis web.

## 2. METODE PELAKSANAAN
Metode yang gunakan dalam kegiatan pelatihan desain web pada SMK Teladan Pematangsiantar adalah sebagai berikut:
a) Ceramah
Materi  yang  diberikan  adalah  penjelasan  tentang  pengantar  teori  desain  web,  persiapan-persiapan  yang dilakukan sebelum memulai sebuah proyek desain web, teknik-teknik membuat database MySQl, merancang halaman  index,  halaman  utama,  halaman  koneksi,  halaman  login,  halaman  menampilkan  data  master, halaman menampilkan data transaksi, halaman browsing (pencarian data), dan halaman laporan dengan pdf.
b) Diskusi dan Tanya Jawab
Pada tiap materi yang diberikan dan disampaikan, peserta dapat berdialog, berdiskusi dan melakukan tanya jawab dengan tim pengabdian.
c) Praktek Desain Web
Pelajar  diminta  untuk  melakukan  praktek/latihan  terhadap  materi  yang  telah  disampaikan  pada  sesi ceramah. Sementara tim pengabdian melakukan pendampingan dengan memberikan arahan serta membantu melakukan perbaikan jika terhadap error atau kesalahan teknis dalam praktikum.
d) Seleksi Proyek Desain Web
Proyek  web  desain  yang  telah  dipraktekkan  selanjutnya  akan  dilakukan  seleksi  untuk  mendapatkan  hasil pekerjaan yang terbaik untuk selanjutnya diberikan

## 3. HASIL DAN PEMBAHASAN
Pelatihan dilakukan dengan melalui tahap-tahap sebagai berikut:

## 3.1 Perancangan Database di MySQL
Adapun struktur database yang akan dirancang diberi nama: dbkuisonline, jumah tabel: 6 (enam) a. Tabel → login b. Tabel → dosen c. Tabel → matakuliah
d. Tabel → mahasiswa
e. Tabel → kuis
f. Tabel → jwbkuis
Gambar 1. Struktur database beserta tabel di MySQL

## 3.2 Struktur Diagram Relasi Antar Tabel di MySQL
Perancangan  diagram  relasi  berguna  untuk  memastikan  bahwa  setiap  tabel  memiliki  hubungan  untuk memasstikan  transaksi  yang  akan  diinput  nantinya  berasal  dari  tabel  yang  berhubungan  saja.  Diagram  relasi dapat dilihat pada gambar 2.

## ISSN 2723-4118 (Media Online)
Gambar 2. Relasi antar tabel pada database kuis online

## 3.3 Membuat Sebuah Koneksi Database di Macromedia Dreamweaver
Sebelum  membuat  koneksi  database,  maka  sediakan  terlebih  dahulu  sebuah  halaman  PHP.  Dalam  hal  ini diaplikasikan  dengan  menggunakan  software  Macromedia  Dreamweaver.  Maka  tahap-tahap  dalam  membuat koneksi adalah sebagai berikut :
a) Buka Panel/Tab Database kemudian klik button plus (+) untuk menambah sebuah koneksi database.
b) Pilih mySQL Connection, selanjutnya akan muncul kotak dialog seperti di bawah ini :

## Gambar 3. Setting MySQL Connection

## 3.4 Merancang Halaman Login
Langkah-langkah membuat form login adalah sebagai berikut:
a) Masukkan sebuah form
b) Masukkan table = row=4, col=3
c) Masukkan 2 TextField untuk username dan password, dan 1 button
d) Rancanglah hingga menjadi seperti di bawah ini:
Masukkan Nama Pengguna dan Kata Laluan Username Password
Log In

## ISSN 2723-4118 (Media Online)

## 3.5 Membuat Recordset
Sebelum  membuat  sebuah  hubungan  ke  tabel,  maka  sebuah  koneksi  database  harus  sudah  dibuat  terlebih dahulu dan berhasil. Langkah membuat recordset :
a) Buka Panel/Tab Bindings kemudian klik button plus (+) untuk menambah sebuah recordset.
b) Pilih Recordset (Query), selanjutnya akan muncul kotak dialog seperti di bawah ini :

## Gambar 5. Setting Recordset rslogin

## 3.6 Memasukkan Server Behavior untuk Login User
Langkah-langkah membuat server behavior untuk Login User, sebagai berikut :
a) Buka Panel/Tab Server Behavior kemudian klik button plus (+) untuk menambah sebuah behavior.
b) Pilih User Authentication, kemudian selanjutnya pilih Log in User, selanjutnya akan muncul kotak dialog untuk mengatur autentikasi yang diperlukan.
3.7 Membuat Halaman Tampil Data (Matakuliah)
Rancang sebuah halaman sebagai berikut :
a) Masukkan table : row=2, col=4
b) Masukkan judul fieldnya masing-masing
c) Save as… matakuliahmanager.php
Gambar 6 . Perancangan tabel untuk menampilkan data master matakuliah
3.8 Memasukkan Recordset

## ISSN 2723-4118 (Media Online)
Maka, akan muncul data-data Matakuliah pada Tab Bindings sebagai berikut :
Gambar 8. Tampilan rsmatakuliah pada tab Bindings

## 3.9 Memasukkan Link pada Edit dan Hapus dan Tambah Baru
Masukkan link pada kotak link untuk Edit :
a. Masukkan link pada kotak link untuk Hapus :
b. Masukkan link untuk Tambah Baru
3.10 Membuat Server Behavior : Repeat Region
a) Buka Panel/Tab Server Behavior kemudian klik button plus (+) untuk menambah sebuah behavior.
b) Pilih Repeat Region, selanjutnya akan muncul kotak dialog seperti di bawah ini :
Gambar 9. Setting repeat region (pengulangan data)
c) Hasil
editmatakuliah.php?kdmk=<?php echo $row_rsmatakuliah['kdmk']; ?> hapusmatakuliah.php?kdmk=<?php echo $row_rsmatakuliah['kdmk']; ?>
Inputmatakuliah.php

## ISSN 2723-4118 (Media Online)

## 3.11 Dokumentasi Kegiatan
Berikut merupakan dokumentasi dari kegiatan pengabdian yang dilakukan.

## Gambar 11. Kegiatan pelatihan

## 4. KESIMPULAN
Kesimpulan yang dapat diambil setelah melakukan pelatihan dan  uji kompetensi Ujian Nasional (UN)    dengan menggunakan  bahasa  pemrograman  PHP,  database  MySQL  dan  aplikasi  Macromedia  Dreamweaver  adalah memberikan tolak ukur bagi siswa jurusan Rekayasa Perangkat Lunak (RPL) tentang kemampuan dan kesiapan mereka dalam menghadapi Ujian Nasional (UN) khususnya dibidang desain web atau pemrograman web. Melalui metode ceramah, tanya jawab dan diskusi serta praktek langsung menunjukkan bahwa para siswa lebih percaya diri dan lebih terampil dalam menghadapi Ujian Nasional (UN). Dilihat dari hasil pelatihan dan uji kompetensi yang telah  dilakukan  maka disarankan  1)  untuk  menghasilkan  keterampilan dan kesiapan yang lebih  optimal, maka perlu beberapa metode penyampaian materi yang didukung oleh sarana dan prasarana lebih canggih dan mutakhir,  2)  untuk  mendapatkan  umpan  balik  yang  objektif  terhadap  pelatihan  ini,  maka  kedepannya  perlu diadakan  angket post  test agar  keberhasilan  pelatihan  dapat  diukur  dari  sejauh  mana  peserta  memahami  dan merasakan manfaat pelatihan, 3) dalam proses pelatihan yakni mengaplikasikan pemrograman web atau desain web, diharapkan perlunya pengembangan dan pemutakhiran software yang dipakai.

## DAFTAR PUSTAKA
Irawan, Y., Susanti, N., & Triyanto, W. A. (2016). Analisa Dan Perancangan Sistem Informasi Sekolah Berbasis Website Untuk Penyampaian  Informasi  Sekolah  Dan  Media  Promosi  Kepada  Masyarakat. Simetris :  Jurnal  Teknik  Mesin,  Elektro  Dan Ilmu Komputer , 7 (1), 257. https://doi.org/10.24176/simet.v7i1.512 Khusnia,  D.,  &  Riasti,  B.  K.  (2014).  Pembuatan  Website  Profil  Sekolah  Menengah  Pertama  Negeri  1  Kalitidu  Bojonegoro. Indonesian Journal on Networking and Security , Volume 3 (1), 6. Saputra, W. (2020). PELATIHAN APLIKASI BERBASIS WEB PADA SMK TELADAN VOKASI Training Of Web-Based Applications In SMK Teladan Pematangsiantar As An Effort To Improve Vokasi Skills . Wahyuningrum,  T.,  &  Januarita,  D.  (2014). Perancangan  Web  e-Commerce  dengan  Metode  Rapid  Application  Development  ( RAD ) untuk Produk Unggulan Desa . 2014 (November), 81 – 88.