Dwika Ikhwal Fajri

PENGEMBANGAN SITUS SOAL PILIHAN GANDA SMK NEGERI
48 JAKARTA MENGGUNAKAN RESPONSIVE WEB DESIGN
DWIKA IKHWAL FAJRI

5235111816
Skripsi ini Ditulis untuk Memenuhi Sebagian Persyaratan

dalam Memperoleh Gelar Sarjana
PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

JURUSAN TEKNIK ELEKTRO FAKULTAS TEKNIK
UNIVERSITAS NEGERI JAKARTA
2015
PENGEMBANGAN SITUS SOAL PILIHAN GANDA SMK NEGERI 48
JAKARTA MENGGUNAKAN RESPONSIVE WEB DESIGN
DWIKA IKHWAL FAJRI
ABSTRAK
Penelitian ini bertujuan untuk mengembangkan situs soal pilihan ganda di SMK Negeri
48 Jakarta. Penerapan Responsive Web Design digunakan untuk memudahkan guru dalam
membuat soal-soal pilihan ganda pada monitor/Personal Computer atau pada
smartphone, dimanapun dan kapanpun. Dan untuk memudahkan siswa mengerjakan soal
pilihan ganda melalui monitor/Personal Computer atau melalui smartphone. Situs yang
dikembangkan diharapkan mampu membantu pihak sekolah dalam menghadapi Ujian
Nasional CBT (Computer Based Test) nantinya. Metode yang digunakan dalam
penelitian ini adalah metode Research and Development dengan model penelitian
Waterfall dan dikembangkan dengan CSS Framework Bootstrap. Proses pengujian
kelayakan website diuji oleh 2 orang ahli/pakar, 2 orang guru sebagai user guru, 1 orang
guru sebagai admin, dan perwakilan siswa peminatan Multimedia sebagai user siswa.
Hasil pengumpulan data kemudian diproses untuk mengetahui kelayakan produk.
Berdasarkan hasil uji kelayakan pada monitor dan smartphone, situs soal pilihan ganda
berfungsi dengan baik.
Kata kunci: Responsive Web Design, User Interface, Website, Soal Pilihan Ganda.
ii
DEVELOPING SMK NEGERI 48 JAKARTA MULTIPLE CHOICE SITE USING
RESPONSIVE WEB DESIGN
DWIKA IKHWAL FAJRI
ABSTRACT
This research aims to develop a multiple choice questions site in SMK Negeri 48 Jakarta.
Application of Responsive Web Design is used to facilitate the teacher in making
multiple choice questions in monitor/personal computer or via smartphone, wherever and
whenever. And to facilitate the students answer the multiple choice questions via
monitor/personal computer or via smartphone. The site developed expected to help
school facing the CBT (Computer Based Test) National Examination later. The method
used in this research is Research and Development, with Waterfall and developed with
Bootstrap CSS Framework. The process of testing the feasibility of websites tested by 2
experts/specialists, 2 teachers as teacher user, 1 teacher as administrator user and
representatives of student specialization in Multimedia as student user. The data collected
is then processed to determine the feasibility of the product. Based on the results of due
diligence on the monitor and the smartphone, the multiple choice questions site function
properly.
Key words: Responsive Web Design, User Interface, Website, Multiple Choice Questions
iii
HALAMAN PENGESAHAN
NAMA DOSEN TANDA TANGAN TANGGAL
Hamidillah Ajie, S.Si., M.T. ………………… ……………

(Dosen Pembimbing I)
Dr. Yuliatri Sastrawijaya, M.Pd. ………………… ……………
(Dosen Pembimbing II)
PENGESAHAN PANITIA UJIAN SKRIPSI
NAMA DOSEN TANDA TANGAN TANGGAL
Prof. Dr. Ir. Ivan Hanafi, M.Pd ………………… ……………

(Ketua Penguji)
Bambang P. Adhi, M.Kom ………………… ……………

(Sekretaris)
Prasetyo Wibowo Y., M.Eng ………………… ……………

(Dosen Ahli)
Tanggal Lulus: …………….
iv
HALAMAN PERNYATAAN
Dengan ini saya menyatakan bahwa:

1. Karya tulis saya ini adalah asli dan belum pernah diajukan untuk mendapakan
gelar akademik sarjana, baik di Universitas Negeri Jakarta maupun di
perguruan tinggi lain.
2. Karya tulis ini adalah murni gagasan, rumusan dan penelitian saya sendiri
dengan arahan dosen pembimbing.
3. Dalam karya tulis ini tidak terdapat karya atau pendapat yang ditulis atau
dipublikasikan orang lain, kecuali secara tertulis dengan jelas dicantumkan
sebagai acuan dalam naskah dengan disebutkan nama pengarang dan
dicantumkan dalam daftar pustaka.
4. Pernyataan ini saya buat dengan sesungguhnya dan apabila di kemudian hari
terdapat penyimpanan dan ketidakbenaran dalam pernyataan ini, maka saya
bersedia menerima sanksi akademik berupa pencabutan gelar yang telah
diperoleh karena karya tulis ini, serta sanksi lainnya sesuai dengan norma
yang berlaku di Universitas Negeri Jakarta.
Jakarta,
Yang membuat pernyataan
Dwika Ikhwal Fajri

5235111816
v
KATA PENGANTAR
Puji syukur kehadirat Allah SWT karena berkat rahmat dan hidayah-Nya penyusunan
laporan penelitian “Pengembangan Situs Soal Pilihan Ganda SMK Negeri 48 Jakarta
Menggunakan Responsive Web Design” ini dapat terselesaikan dengan baik, dan tidak
lupa shalawat dan salam untuk junjungan Nabi Muhammad SAW yang membawa
umatnya menuju jalan yang lurus.
Saya mengucapkan terima kasih yang sebesar-besarnya kepada pihak-pihak yang
telah membantu dalam kelancaran penelitian ini, diantaranya:
1. Dr. Yuliatri Sastrawijaya, M.Pd. selaku ketua Program Studi Teknik Informatika
dan Komputer, Jurusan Teknik Elektro, Fakultas Teknik, Universitas Negeri
Jakarta, juga sebagai dosen pembimbing yang terus memberikan pengarahan dan
masukan mengenai penulisan peneliti, sehingga peneliti bisa menyelesaikan skripsi
ini.
2. Hamidillah Ajie, S.Si., M.T. selaku dosen pembimbing yang selalu memberikan
motivasi dan pengarahan kepada peneliti untuk terus mengembangkan penelitian
website ini.
3. Chairul Akbar dan Murtiasih, selaku orang tua, yang telah membesarkan,
mengasihi, dan menyayangi penliti, juga selalu mendoakan sehingga skripsi ini
dapat terselesaikan.
4. Wilda Nurkholida, wanita yang terus mendoakan dan memberi semangat juga
motivasi kepada peneliti selama mengerjakan skripsi.
5. Budi Mulyanto, Hana Nurzakia, Imam Zaid Dwi Arianto, Jeremia Reinnatal,
Muhammad Adam, Regina Arzica Pranata, dan Robbi Mujtahidi, teman se-CK
yang selalu menemani dan membantu peneliti dimulai dari awal perkuliahan.
6. Rekan – rekan mahasiswa PTIK UNJ angkatan 2011, yang turut membantu dalam
penyelesaian skripsi ini.
Akhir kata, penulis memohon maaf atas segala kesalahan yang mungkin ada dalam
skripsi ini dan berharap semoga skripsi ini dapat bermanfaat bagi semua pihak serta dapat
dikembangkan menjadi lebih baik lagi dikemudian hari.
Jakarta,
Penulis
Dwika Ikhwal Fajri
vi
DAFTAR ISI
Halaman
ABSTRAK ............................................................................................................ii
ABSTRACT .........................................................................................................iii
HALAMAN PENGESAHAN .............................................................................iv
HALAMAN PERNYATAAN ..............................................................................v
KATA PENGANTAR ..........................................................................................vi
DAFTAR ISI ........................................................................................................vii
DAFTAR TABEL ................................................................................................xi
DAFTAR GAMBAR ............................................................................................xiii
DAFTAR LAMPIRAN ........................................................................................xv
BAB I PENDAHULUAN
1.1 Latar Belakang ..................................................................................... 1

1.2 Identifikasi Masalah ............................................................................ 4
1.3 Pembatasan Masalah ............................................................................ 5
1.4 Rumusan Masalah ............................................................................... 5
1.5 Tujuan Penelitian ................................................................................. 6
1.6 Manfaat Penelitian ............................................................................... 6
BAB II KAJIAN TEORITIS DAN KERANGKA BERPIKIR

2.1 Kajian Teoritis ...................................................................................... 7
2.1.1 Website ........................................................................................ 7
2.1.2 Responsive Web Design ............................................................... 8
vii
2.1.2.1 CSS ..................................................................................10
2.1.2.2 CSS Framework ..............................................................11
2.1.2.3 Bootstrap .........................................................................11
2.1.2.4 Javascript ........................................................................13
2.1.2.5 HTML ..............................................................................14
2.1.2.6 HTML5 ...........................................................................15
2.1.2.7 Navigasi ...........................................................................16
2.1.2.8 Menu Tarik (Pulldown Menu) .........................................17
2.1.3 Antarmuka Pengguna .................................................................18
2.1.3.1 Pengertian Antarmuka Pengguna ....................................18
2.1.3.2 Analisis dan Perancangan Antarmuka Pengguna ............18
2.1.4 PHP .............................................................................................20
2.1.5 MySQL .......................................................................................21
2.1.6 Aplikasi .......................................................................................22
2.1.7 Aplikasi Berbasis Web ...............................................................23
2.1.7.1 Kualitas Aplikasi Berbasis Web ......................................24
2.1.8 Aplikasi Paket Soal .....................................................................25
2.1.9 Soal Pilihan Ganda ......................................................................26
2.1.10 Sistem Operasi ..........................................................................28
2.1.11 Manfaat Penerapan Aplikasi Paket Soal Berbasis Web
Di SMK Negeri 48 Jakarta ........................................................29
2.1.12 Manfaat Konsep Responsive Web Design Pada
User Interface Aplikasi Paket Soal ............................................30
2.2 Kerangka Berpikir ………………………………………… ...............30
2.3 Hipotesis Penelitian ……………………………………… .................33
BAB III METODOLOGI PENELITIAN
3.1 Tempat dan Waktu Penelitian ..............................................................34

3.2 Definisi Operasional ............................................................................34
3.3 Tahap-tahap Penelitian ........................................................................35
3.4 Pelaksanaan Penelitian ........................................................................36
viii
3.4.1 Metode Pengembangan Perangkat Lunak ...................................36
3.4.2 Analisis Kebutuhan .....................................................................38
3.4.2.1 Analisis Kebutuhan Admin ............................................38
3.4.2.2 Analisis Kebutuhan Guru ...............................................38
3.4.2.3 Analisis Kebutuhan Siswa ..............................................38
3.4.2.4 Analisis Kebutuhan Keseluruhan ...................................39
3.4.3 Desain dan Analisis Sistem .........................................................40
3.4.3.1 Diagram Level 0 .............................................................40
3.4.3.2 Diagram Level 1 .............................................................41
3.4.3.3 Diagram Level 2 Proses 1 ...............................................41
3.4.3.7 ERD (Entity Relationship Diagram) ..............................43
3.4.3.8 Desain Struktur Database ...............................................43
3.4.3.9 Desain Tampilan Halaman Sistem .................................51
3.4.3.10 Implementasi Tampilan Halaman Sistem .....................54
3.5 Alat dan Bahan ....................................................................................55
3.6 Teknik Pengujian .................................................................................56
3.6.1 Teknik Pengujian Perangkat Lunak ............................................56
3.7 Instrumen Penelitian ............................................................................64
3.7.1 Uji Kelayakan Sistem Kepada Ahli/Pakar Media ........................64
3.7.2 Uji Kelayakan Sistem Kepada Guru Sebagai Admin ..................65
3.7.3 Uji Kelayakan Sistem Kepada Guru ............................................66
3.7.4 Uji Kelayakan Sistem Kepada Siswa ...........................................67
3.8 Teknik Analisis Data ...........................................................................68
BAB IV HASIL PENILITIAN DAN PEMBAHASAN
4.1 Hasil Pengujian Terhadap Penerapan Konsep Responsive Web

DesignPada Situs Soal Pilihan Ganda SMK Negeri 48 .......................70
4.1.1 Hasil Perancangan Sistem ..........................................................70
ix
4.1.1.1 Diagram Level 0 .............................................................70
4.1.1.2 Diagram Level 1 ..............................................................71
4.1.1.3 Diagram Level 2 Proses 1................................................72
4.1.2 Hasil Penelitian Sistem ...............................................................77
4.1.2.1 Halaman Admin ..............................................................77
4.1.2.2 Halaman Guru ................................................................78
4.1.2.3 Halaman Siswa ...............................................................80
4.1.3 Hasil Pengujian Dengan Metode Black Box Berbasis Skenario ..81
4.1.4 Hasil Penyebaran Kuesioner .......................................................81
4.1.4.1 Pengujian Oleh Ahli Media .............................................81
4.1.4.2 Pengujian Oleh Admin ...................................................84
4.1.4.3 Pengujian Oleh Guru ......................................................86
4.1.4.4 Pengujian Oleh Siswa .....................................................89
4.2 Pembahasan .........................................................................................91
4.2.1 Pembahasan Hasil Pengujian Dengan Metode Black Box
Berbasis Skenario .......................................................................91
4.2.2 Pembahasan Hasil Pengujian Dengan Metode Kuesioner ..........91
BAB V KESIMPULAN DAN SARAN

5.1 Kesimpulan .........................................................................................95
5.2 Saran....................................................................................................95
DAFTAR PUSTAKA ..........................................................................................97

LAMPIRAN .........................................................................................................99
x
DAFTAR TABEL
Halaman
Tabel 3.1 Daftar Kebutuhan Fungsional .................................................................. 39
Tabel 3.2 Tabel Admin ........................................................................................... 43
Tabel 3.3 Tabel Guru .............................................................................................. 44
Tabel 3.4 Tabel Siswa .............................................................................................. 45
Tabel 3.5 Tabel Kelas .............................................................................................. 46
Tabel 3.6 Tabel Kelas Ajar ...................................................................................... 46
Tabel 3.7 Tabel Mapel ............................................................................................. 46
Tabel 3.8 Tabel Mapel Ajar ..................................................................................... 47
Tabel 3.9 Tabel Indikator......................................................................................... 47
Tabel 3.10 Tabel Soal ............................................................................................. 48
Tabel 3.11 Tabel Paket Soal .................................................................................... 49
Tabel 3.12 Tabel Nilai ............................................................................................ 49
Tabel 3.13 Tabel Berita .......................................................................................... 50
Tabel 3.14 Tabel Materi........................................................................................... 50
Tabel 3.15 Tabel Pengujian Dengan Metode Blackbox Berbasis Skenario ........... 56
Tabel 3.16 Kisi-kisi Instrumen Uji Kelayakan Kepada Ahli Media ........................ 65
Tabel 3.17 Kisi-kisi Instrumen Uji Kelayakan Kepada Guru Sebagai Admin ........ 66
Tabel 3.18 Kisi-kisi Instrumen Uji Kelayakan Kepada Guru .................................. 67
Tabel 3.19 Kisi-kisi Instrumen Uji Kelayakan Kepada Siswa ............................... 68
Tabel 3.20 Pengelompokan Kategori Kualitas Berdasarkan Skor .......................... 69
xi
Tabel 4.1 Hasil Pengujian Pada Monitor Oleh Ahli Media .................................... 82
Tabel 4.2 Hasil Pengujian Pada Smartphone Oleh Ahli Media .............................. 83
Tabel 4.3 Hasil Pengujian Pada Monitor Oleh Admin ........................................... 84
Tabel 4.4 Hasil Pengujian Pada Smartphone Oleh Admin ..................................... 85
Tabel 4.5 Hasil Pengujian Pada Monitor Oleh Guru .............................................. 87
Tabel 4.6 Hasil Pengujian Pada Smartphone Oleh Guru ........................................ 88
Tabel 4.7 Hasil Pengujian Pada Monitor Oleh Siswa ............................................. 89
Tabel 4.8 Hasil Pengujian Pada Smartphone Oleh Siswa ...................................... 90
Tabel 4.9 Rangkuman Hasil Pengujian Keseluruhan Pada Monitor ....................... 92
Tabel 4.10 Rangkuman Hasil Pengujian Keseluruhan Pada Smartphone ............... 92
xii
DAFTAR GAMBAR
Halaman
Gambar 2.1 Contoh Website Yang Belum Menerapkan Konsep RWD .................. 10
Gambar 2.2 Contoh Website Yang Menerapkan Konsep RWD ............................. 10
Gambar 2.3 Struktur File Framework Bootstrap ..................................................... 13
Gambar 2.4 Pohon Penilaian Kualitas ..................................................................... 25
Gambar 2.5 Bagan Kerangka Berpikir .................................................................... 32
Gambar 3.1 Metode Perangkat Lunak Waterfall ..................................................... 36
Gambar 3.2 Desain Tampilan Halaman Utama Admin dan Guru Pada Sistem Soal
Pilihan Ganda. .......................................................................................................... 51
Gambar 3.3 Desain Tampilan Halaman Utama Siswa Pada Sistem Soal Pilihan
Ganda. ..................................................................................................................... 52
Gambar 3.4 Bagan Menu Navigasi Admin .............................................................. 53
Gambar 3.5 Bagan Menu Navigasi Guru................................................................. 53
Gambar 3.6 Bagan Menu Navigasi Siswa ............................................................... 54
Gambar 4.1 Diagram Level 0 .................................................................................. 71
Gambar 4.2 Diagram Level 1 .................................................................................. 72
Gambar 4.3 Diagram Level 2 Proses 1 .................................................................... 73
Gambar 4.7 Hasil Penelitian Pengembangan Sistem Halaman Admin .................. 77
xiii
Gambar 4.8 Hasil Penelitian Pengembangan Sistem Halaman Guru ..................... 75
Gambar 4.9 Hasil Penelitian Pengembangan Sistem Halaman Siswa .................... 78
Gambar 4.10 Diagram Pengujian Pada Monitor Oleh Ahli Media.......................... 82
Gambar 4.11 Diagram Pengujian Pada Smartphone Oleh Ahli Media ................... 83
Gambar 4.12 Diagram Pengujian Pada Monitor Oleh Admin ................................. 85
Gambar 4.13 Diagram Pengujian Pada Smartphone Oleh Admin........................... 86
Gambar 4.14 Diagram Pengujian Pada Monitor Oleh Guru .................................... 87
Gambar 4.15 Diagram Pengujian Pada Smartphone Oleh Guru ............................. 88
Gambar 4.16 Diagram Pengujian Pada Monitor Oleh Siswa .................................. 89
Gambar 4.17 Diagram Pengujian Pada Smartphone Oleh Siswa ............................ 90
Gambar 4.18 Diagram Pengujian Keseluruhan Pada Monitor ................................ 93
Gambar 4.19 Diagram Pengujian Keseluruhan Pada Smartphone .......................... 93
xiv
DAFTAR LAMPIRAN
Halaman
Lampiran 1 Profil SMK Negeri 48 ..................................................................... 99
Lampiran 2 Pedoman Wawancara ...................................................................... 103
Lampiran 3 Hasil Wawancara ............................................................................. 105
Lampiran 4 Entity Relationship Diagram ........................................................... 107
Lampiran 5 Tampilan Halaman Utama Admin Dan Guru ................................. 109
Lampiran 6 Tampilan Halaman Siswa................................................................ 111
Lampiran 7 Hasil Penelitian Dengan Metode Blackbox Berbasis Skenario ...... 113
Lampiran 8 Hasil Pengujian Pada Tampilan Monitor ........................................ 123
Lampiran 9 Hasil Pengujian Pada Tampilan Smartphone .................................. 144
Lampiran 10 Kuesioner Ahli Media ................................................................... 165
Lampiran 11 Kuesioner Admin .......................................................................... 174
Lampiran 12 Kuesioner Guru ............................................................................. 178
Lampiran 13 Kuesioner Siswa ............................................................................ 185
Lampiran 14 Surat Penelitian ............................................................................ 231
Lampiran 15 Surat Keterangan Penelitian ......................................................... 233
Lampiran 16 Riwayat Hidup .............................................................................. 235
xv
BAB I
PENDAHULUAN
1.1 Latar Belakang
Teknik informatika merupakan bagian dari bidang teknologi informasi.
Informasi sudah menjadi kebutuhan penting bagi masyarakat. Penyebaran
informasi dapat dilakukan menggunakan berbagai media, baik media cetak
maupun media elektronik. Untuk menjangkau masyarakat yang ingin memperoleh
informasi, berbagai inovasi telah dikembangkan. Salah satu bentuk media
penyajian informasi yaitu dengan menggunakan website yang merupakan sumber
dari informasi yang ingin kita ketahui.
Website merupakan sebuah aplikasi yang difungsikan sebagai penyedia
berbagai informasi atau berbagai pelayanan yang ada dan biasanya dikelola oleh
instansi yang bersangkutan. Website dapat memberikan kemudahan bagi
pengunjung untuk memperoleh informasi yang lebih jelas, karena penyajian
informasinya ditampilkan sesuai dengan kondisi daerah tersebut, sehingga
pengunjung dapat mengerti gambaran atas informasi yang diinginkan.
Saat ini, banyak cara untuk mengakses sebuah situs web/website, yaitu
menggunakan berbagai macam device/gadget yang ada. Bukan hanya
menggunakan PC/Laptop, handphone/smartphone pun sudah umum digunakan
untuk mengakses sebuah website. Namun, penggunaan website pada
handphone/smartphone masih banyak masalah, terutama tampilan. Karena
tampilan website yang sudah ada, lebih dikhususkan kepada para pengguna
PC/Laptop. Sehingga tampilan pada handphone/smartphone harus menyesuaikan,
1
2
seperti untuk melihat isi konten harus diperbesar terlebih dahulu, huruf yang
terlalu kecil, menu navigasi antar halaman tidak terlihat, dan sebagainya.
Teknologi Responsive Web Design muncul dari kebingungan para web
designer untuk memecahkan masalah perkembangan device dengan variasi layar
yang berbeda-beda untuk mengakses suatu konten dari halaman yang sama
dengan mengutamakan tingkat kenyamanan membaca konten di setiap ukuran
layar yang berbeda. Dengan semakin banyaknya pengguna smartphone maka
website yang responsive saat ini adalah sebuah keharusan. Website yang
responsive tentu butuh sebuah navigasi menu responsive juga agar bisa terlihat
bagus ketika dibuka dengan berbagai perangkat yang tentu memiliki berbagai
ukuran layar.
Kebutuhan akan penyajian informasi juga dibutuhkan pada pendidikan.
Kebutuhan akan suatu konsep dan mekanisme pendidikan berbasis teknologi
informasi menjadi tidak terelakan lagi. Terlebih, Ujian Nasional tahun ini
menggunakan sistem Computer Based Test (CBT), dimana siswa kelas XII
nantinya akan melakukan Ujian Nasional menggunakan komputer sebagai media.
Untuk itu, di setiap sekolah perlu adanya kumpulan soal-soal pilihan ganda untuk
membantu siswa dalam menghadapi Ujian Nasioan nantinya. Kumpulan soal
pilihan ganda tersebut juga harus dimasukkan kedalam komputer, agar nantinya
murid terbiasa mengerjakan soal pilihan ganda menggunakan komputer.
Kumpulan soal pilihan ganda itu sendiri biasanya berbentuk website, yang dapat
di akses dengan internet.

3
Proses pengumpulan soal dilakukan oleh guru mata pelajaran. Soal-soal
disimpan ke dalam database, berdasarkan indikator yang telah ditentukan. Dalam
aplikasi website ini ada beberapa jenis pengguna seperti admin konten, guru
sebagai kontributor soal, dan siswa.
Bukan hanya guru saja yang bisa mengakses, siswa tingkat sekolah
menengah bisa mengakses website tersebut untuk melihat dan mengerjakan soal
atau sekedar membaca artikel yang diunggah oleh guru mata pelajaran melalui
berbagai macam device. Bisa melalui Monitor PC , atau Smartphone (berbasis
Android, iOS, Windows Phone, dan Blackberry).
Dengan adanya Responsive Web Design, maka penyedia konten website
tidak lagi harus membuat berbagai macam versi mobile. Karena dengan adanya
teknologi baru ini sebuah web yang diakses melalui berbagai macam device akan
menyesuaikan tampilan dengan device tersebut. Hal inilah yang melatarbelakangi
penulis untuk mengembangkan responsive web design pada aplikasi pembangkit
paket soal di SMK Negeri 48 Jakarta.
Menurut hasil wawancara penulis dengan kepala sekolah, wali kelas, dan
beberapa guru, SMK Negeri 48 Jakarta memerlukan situs kumpulan soal berbasis
Web/e-learning untuk: (1) memudahkan guru dalam melaksanakan pengerjaan
soal, terutama pilihan ganda, (2) membantu siswa dalam menghadapi Ujian
Nasional CBT, (3) meningkatkan mutu proses pembelajaran, (4) mengikuti
perkembangan teknologi informasi, (5) dan mengurangi pemakaian kertas.

4
Maka dari itu, dalam kasus ini penulis tertarik untuk membuat judul
“Pengembangan Situs Soal Pilihan Ganda SMK Negeri 48 Jakarta
Menggunakan Responsive Web Design”, yang mana akan memudahkan siswa
mengerjakan soal dan membantu menghadapi Ujian Nasional CBT, serta
memudahkan guru untuk menginput soal melalui berbagai macam device yang
digunakan.
1.2 Identifikasi Masalah
Bedasarkan latar belakang yang telah diuraikan di atas, maka dapat
diidentifikasi beberapa masalah yaitu:
1. Menyusun soal pilihan ganda memerlukan waktu lama di kalangan guru
SMK Negeri 48 Jakarta.
2. Belum adanya website kumpulan soal pilihan ganda di SMK Negeri 48
Jakarta.
3. Kelas XII akan menghadapi Ujian Nasional Computer Based Test.
4. Dibutuhkan sarana online sebagai tempat untuk berbagi (sharing)
informasi yang dapat diakses kapan pun dan dimana pun, baik oleh siswa
maupun pihak lain yang membutuhkan.
5. Banyaknya macam device yang berbeda membuat web designer harus
membuat versi mobile untuk sebuah website dan forum online.

5
1.3 Pembatasan Masalah
Dalam penelitian ini penulis memberikan batasan masalah, diantaranya:
1. Lingkup penelitian pada SMK Negeri 48 Jakarta.
2. Penulis hanya berfokus pada masalah perancangan User Interface pada
aplikasi pembangkit soal pilihan ganda SMK Negeri 48 Jakarta dan
tampilan soal pilihan ganda.
3. Situs yang sudah dibuat lalu diimplementasikan dengan menggunakan
Responsive Web Design, menggunakan kode HTML5 dan CSS3, dan
menambahkan framework bootstrap agar tampilan website terlihat lebih
baik dan responsive.
4. Situs yang dibuat sementara ditujukan untuk mata pelajaran Sistem
Operasi.
5. Pengujian terhadap situs, aplikasi, atau perangkat lunak yang
dikembangkan hanya dibatasi pada pengujian produk.
1.4 Rumusan Masalah
Berdasarkan pembatasan masalah di atas, perumusan masalah dari
penelitian ini adalah: “Bagaimana mengembangkan situs soal pilihan ganda SMK
Negeri 48 Jakarta menggunakan Responsive Web Design? ”

6
1.5 Tujuan Penilitan
Berdasarkan masalah yang dirumuskan, maka tujuan dari penelitian ini
adalah untuk mengembangkan Responsive Web Design pada situs soal pilihan
ganda. Selain itu juga bertujuan untuk menambah kemudahan dan kenyamanan
mengerjakan soal pilihan ganda pada situs soal pilihan ganda SMK Negeri 48
Jakarta.
1.6 Manfaat Penelitan
Adapun manfaat dari penelitian ini yaitu:
a) Bagi Siswa
1. Memudahkan dan memberikan kenyamanan pada siswa dalam
mengerjakan soal pilihan ganda.
2. Memudahkan siswa untuk mengakses web melalu berbagai macam
device.
b) Bagi Guru
1. Memudahkan guru dalam menyusun soal pilihan ganda.
2. Memudahkan dan memberikan kenyamanan guru dalam menginput
soal.
3. Memudahkan guru dalam memberikan informasi dan berbagi
pengalaman mengajar.
7
BAB II
KAJIAN TEORITIS DAN KERANGKA BERPIKIR
2.1 Kajian Teoritis
2.1.1 Pengertian Website
Website adalah keseluruhan halaman-halaman web yang terdapat dalam
sebuah domain yang mengandung informasi.1 Website merupakan kumpulan
halaman web yang saling terhubung dan file-filenya saling terkait. Web terdiri dari
page atau halaman, dan kumpulan halaman yang dinamakan homepage.
Homepage berada pada posisi teratas, dengan halaman-halaman terkait berada
dibawahnya. Setiap halaman di bawah homepage disebut child page, yang berisi
hyperlink ke halaman lain dalam web.2 Dapat simpulkan bahwa website adalah
dokumen yang ditulis dalam format HTML (Hyper Text Markup Language), yang
dapat diakses melalui HTTP (Hyper Text Transfer Protocol), yaitu protokol yang
menyampaikan informasi dari server website untuk ditampilkan kepada para
pemakai melalui web browser. Semua publikasi dari website-website tersebut
dapat membentuk sebuah jaringan informasi yang sangat besar. Halaman-halaman
dari website dapat diakses melalui URL. URL ini mengatur halaman-halaman
situs untuk menjadi sebuah hirarki, meskipun hyperlink yang ada di halaman
tersebut mengatur para pembaca dan memberitahu mereka susunan keseluruhan
dan bagaimana arus informasi ini berjalan.
1
Yuhefiza, HA Mooduto, dan Rahmat Hidayat, Cara Mudah Membangun Website Interaktif,
(Jakarta: Alex Media Komputerindo, 2009), hal. 2.
2
Agung Gregorius, Microsoft Front Page, (Jakarta: PT. Elex Media Komputindo, 2000), hal.16.
7
8
2.1.2 Responsive Web Design
Istilah Responsive Web Design (RWD) diciptakan oleh desainer dan
pengembang web bernama Ethan Marcotte. Marcotte Menjelaskan teknik RWD
adalah teknik untuk perpanjangan peningkatan bagi mobile dalam cara efisien dan
praktis. Artinya pertanyaan media dan CSS bersyarat dapat digunakan untuk
membuat tata letak yang flexible dan fluid untuk layar apapun.3 Secara sederhana,
desain web responsif adalah tentang ukuran perambahan. Ini berkaitan dengan tata
letak, hirarki dan menciptakan pengalaman membaca yang optimal, terlepas dari
perangkat yang digunakan. Desain responsive adalah client-side, yang berarti
halaman akan dikirim ke browser perangkat (klien) dan browser kemudian
memodifikasi tampilan halaman yang berkaitan dengan ukuran jendela browser.
Dengan demikian, desain web responsif akan menggubah komposisi konten
dengan baik dan rapih untuk meningkatkan aksesibilitas isi, bergantung pada
4
ukuran layar dari browser. Responsive web design (RWD) merupakan sebuah
pendekatan pada web desain yang bertujuan untuk menyusun situs dalam
memberikan pengalaman optimal pada interaksi dan tampilan, seperti mudah
untuk dibaca dan navigasi dengan meminimalisir ukuran, menggeser, dan
menggulir, pada berbagai macam device (dari komputer sampai ponsel). Dikutip
pada laman smashingmagazine.com, Responsive Web Design adalah sebuah
pendekatan yang menunjukkan bahwa desain dan pengembangan harus
menanggapi perilaku dan lingkungan pengguna berdasarkan pada ukuran,
3
Slamet Riyanto, Kupas Tuntas Web Responsif, (Jakarta: PT. Elex Media Komputindo, 2014), hal.
11.
4
Ibid., hal. 12.
9
platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid
fleksibel dan layout, gambar dan CSS media query. Ketika saat ini banyak
pengguna yang beralih dari laptop ke iPad/tablet PC, website secara otomatis
harus menyesuaikan resolusi, ukuran gambar dan kemampuan scripting-nya.
Dengan kata lain, website harus memiliki teknologi untuk secara otomatis
merespon kebutuhan pengguna yang didasarkan pada resolusi layar gadget yang
digunakan (komputer PC, laptop, netbook, tablet PC, smartphone dan mobile
phone).5
Dalam hal ini, Responsive Web Design merupakan sebuah situs yang
memiliki domain yang sama, konten yang sama, dan sintaks yang sama, kurang
lebih dimanipulasi oleh JavaScript dan CSS. Merespon viewports berbeda untuk
memberikan pengalaman pengguna yang terbaik untuk setiap perangkat.
Perbedaan viewports ini melingkupi desktop, laptop, tablet PC, dan perangkat
mobile dengan orientasi yang sesuai untuk mereka. Pada Gambar 2.1 adalah
contoh website yang belum menerapkan konsep RWD, sementara Gambar 2.2
adalah contoh website yang menerapkan konsep RWD.
5
Kayla Right, Responsive Web Design: What It Is and How To Use It, diakses dari
http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/, diakses 6
Desember 2015, jam 12.19 WIB.
10
A B
Gambar 2.1. Contoh Website Yang Belum Menerapkan Konsep RWD. A

Merupakan Tampilan Pada Monitor PC, B Merupakan Tampilan Pada
Smartphone.
A B
Gambar 2.2. Contoh Website Yang Menerapkan Konsep RWD. A
Merupakan Tampilan Pada Monitor PC, B Merupakan Tampilan Pada
Smartphone.
2.1.2.1 CSS(Cascading Style Sheet)
CSS adalah suatu teknologi yang digunakan untuk memperindah tampilan
halaman website. Singkatnya dengan menggunakan metode CSS ini akan dengan
mudah mengubah secara keseluruhan sekaligus memformat ulang sebuah

11
website.6 CSS3 sendiri merupakan generiasi ke-3 dari perkembangan CSS
sebelumnya. CSS3 adalah standar untuk CSS yang paling baru, banyak batasan
website design yang dahulu tidak bisa ditangani oleh CSS sekarang bisa dilakukan
dengan CSS3. CSS3 sepenuhnya kompatibel dan pelengkap dari CSS lama,
sehingga browser akan selalu mendukung CSS lama dan Anda tidak harus
mengubah desain yang sudah ada.
2.1.2.2 CSS Framework
Framework adalah bentuk dasar struktur konseptual yang dapat digunakan
sebagai “awal” untuk mengerjakan proyek web. Dengan memanfaatkan
Framework, kita dapat mempersiapkan default-style pertama kali, dan
menggunakannya kembali dalam semua proyek web yang lainnya. Ini yang
disebut sebagai kerangka CSS (CSS Framework).7 CSS Framework merupakan
kumpulan library dokumen CSS yang digunakan untuk membuat pengembangan
halaman web yang lebih standar, cepat dalam bahasa Cascading Style Sheet
(CSS). CSS Framework biasanya menyediakan CSS style untuk mengatur
tipografi, tata letak (layout)-umumnya dalam sistem grid, serta menata ulang
browser.
2.1.2.3 Bootstrap
Bootstrap adalah kumpulan tools gratis untuk membuat dan aplikasi web.
Ini berisi HTML dan CSS berbasis desain template untuk tipografi, bentuk,
tombol, navigasi, dan komponen antarmuka lainnya, serta optional ekstensi
6
Adhi Prasetio, Pintar Webmaster Untuk Pemula, (Jakarta: MediaKita, 2015), hal. 285
7
Slamet Riyanto, Op. Cit., hal. 13.
12
JavaScript.8 Bootstrap memiliki dukungan yang relatif lengkap untuk HTML5 dan
CSS3, sehingga kompatibel dengan semua browser utama. Bootstrap adalah
modular dan pada dasarnya terdiri dari serangkaian stylesheet LESS yang
menerapkan berbagai komponen toolkit. Sebuah stylesheet disebut bootstrap.less
mencakup komponen-komponen stylesheet. Pengembang dapat menyesuaikan file
bootstrap sendiri, memilih komponen yang ingin mereka gunakan dalam proyek
mereka. Penulisan skrip HTML dasar dalam penggunakan framework Bootstrap
sendiri adalah sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Web Design | Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type=”text/javascript”
src=”js/jquery.min.js”></script>
<script type=”text/javascript”
src=”js/bootstrap.js”></script>
</head>
<body>
</body>
</html>
Pemanggilan framework bootstrap dapat kita lihat pada penulisan
css/bootstrap.css pada bagian <head>. Penulisan skrip dasar inilah yang
membuat suatu website bisa menjadi responsif nantinya bila menggunakan
framework bootstrap. Framework bootstrap sendiri biasanya terstruktur seperti
Gambar 2.3 berikut:
8
Slamet Riyanto, Op. Cit., hal. 18
13
Gambar 2.3 Struktur File Framework Bootsrap
Folder-folder yang terdapat pada folder bootstrap antara lain CSS, JS, dan Font.
Folder CSS berisi file-file kode CSS Bootstrap yang nantinya akan merubah
tampilan dan style pada halaman web menjadi responsif. Folder JS berisi file-file
kode JavaScript yang nantinya membuat web menjadi lebih interaktif. Dan folder
font berisi webfont yang nantinya merubah tampilan tipografi pada halaman web.
Ketiga folder ini sangat penting untuk membuat tampilan web yang menggunakan
framework bootstrap menjadi responsif.
2.1.2.4 Javascript
Javascript adalah bahasa pemrograman yang diinterpretasikan, diadopsi
dari bahasa C/C++ yang dikembangkan menjadi bahasa pemrograman web client-
side.9 Javascript didesain untuk HTML bekerja membuat web page yang
interaktif. Javascript adalah bahasa pemrograman yang digabungkan dengan
9
Brooks, Guied to HTML, Javascript, and PHP, (London: Springer 2007), hal. 3.
14
HTML untuk membuat halaman web yang beranimasi, interaktif dan memiliki
visual effect yang dinamis.10 Jadi, Javascript merupakan bahasa yang berbentuk
kumpulan skrip yang berfungsi untuk memberikan tampilan yang tampak lebih
interaktif pada dokumen web. Bahasa ini adalah bahasa pemrograman yang
memberikan kemampuan tambahan ke dalam bahasa pemrograman HTML
(Hypertext Markup Language) dengan mengeksekusikan perintah-perintah pada
sisi klien, bukan sisi server dokumen web. Bahasa pemrograman Javasrcipt berisi
skrip yang pemasangannya terselip di sebuah dokumen HTML. Sehingga
Javascript tidaklah memerlukan sebuah compiler atau penerjemah khusus untuk
mengeksekusinya. Hal tersebut juga bergantung pada navigator yang terdapat di
setiap browser.
2.1.2.5 HTML (Hyper Text Markup Language)
HTML merupakan bahasa pemrograman web yang memiliki sintak atau
aturan dalam menuliskan script atau kode-kode, sehigga browser dapat
menampilkan informasi dengan membaca kode-kode HTML.11 HTML adalah
bahasa pemrograman yang digunakan di website, dalam format dokumen dan
menghubungkan hypertext ke dokumen lain yang tersimpan dalam komputer
lain.12 Berdasarkan teori di atas, HTML adalah standar bahasa yang digunakan
untuk menampilkan dokumen web untuk menghubungkan hypertext ke dokumen
lain. Dokumen HTML disebut sebagai markup language karena mengandung
10
McFarland, Javascript & JQuery The Missing Manual, (USA : Oreilly, 2008), hal. 1.
11
Anhar, Panduan Menguasai PHP & MySql Secara Otodidak, (Jakarta: Mediakita, 2010), hal. 40.
12
Turban, Efraim, Decision Support Systems and Intelligent Systems 7 th Ed, (New Jersey: Pearson
Education, 2005), hal. 482.
15
tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks
tersebut dalam suatu dokumen dan tanda-tanda atau kode tersebut di kenal dengan
TAG tertentu. Dokumen HTML disebut sebagai hypertext, ini berarti suatu
dokumen tidak harus dibaca secara berurutan dari atas ke bawah. Dokumen dapat
dibaca langsung menuju ke topik tertentu secara langsung dalam dokumen dengan
menggunakan teks penghubung. Agar HTML dapat bertugas dalam membangun
haaman web, HTML harus ditulis dalam software atau aplikasi tertentu, yang
dikenal sebagai HTML editor. HTML editor inilah yang bertugas untuk
menerjemahkan bahasa HTML menjadi halaman web yang siap dilihat oleh para
pengguna internet di seluruh dunia.
2.1.2.6 HTML5
HTML5 merupakan versi terbaru dalam pengembangan HTML. Sejak
tahun 1997 hingga lebih dari 10 tahun, tidak ada perubahan versi HTML lagi
(HTML4). Di sisi lain, tantangan yang harus dipenuhi layanan web saat ini sudah
jauh berbeda.13 Secara umum, perubahan yang dibawa HTML5 bisa kita
kelompokan dalam 5 kategori (David, 2010)14:
1. Struktur halaman,
2. Presentasi visual,
3. Tools grafis,
4. Support rich media, dan
5. Peningkatan support javascript.
13
Adhi Prasetio, Op. Cit., hal. 413.
14
Adhi Prasetio, Op. Cit., hal. 415.
16
Struktur halaman artinya bahwa struktur halaman web HTML5 lebih
mudah dipahami secara semantik oleh search engine. Hal ini didukung dengan
adanya elemen dan atribut baru dalam HTML5. Presentasi visual ditingkatkan
dengan CSS3. CSS3 membawa perubahan pada pengelolaan font, animasi dan
mobile. Untuk urusan tools grafis, HTML5 memungkinkan kita membuat gambar
langsung dalam format SVG maupun CANVAS. HTML4 hanya gambar berbasis
pixel seperti JPEG dan GIFF. Support rich media ditunjukkan HTML5 dengan
munculnya tag video dan audio yang bisa mensupport beragam format tanpa perlu
flash. Terakhir peningkatan support javascript. Kita bisa membuat berbagai
aplikasi berbasis web yang memiliki kemampuan layaknya aplikasi biasa yang
berjalan di atas operating system.
2.1.2.7 Navigasi
Navigasi adalah gabungan dari struktur representasi informasi situs web
dan mekanisme link yang mendukung pengunjung untuk melakukan penjelajahan
situs.15 Navigasi adalah susunan menu atau hirarki dari suatu situs yang
menggambarkan isi dari setiap halaman dan link atau navigasi tiap halaman pada
suatu situs web.16 Jadi, navigasi adalah gabungan dari link yang berupa susunan
menu untuk melakukan penjelajahan situs yang menggambarkan isi dari setiap
halaman.
Ada dua jenis navigasi yaitu, navigasi primer dan sekunder. Navigasi
primer merupakan navigasi yang utama menghubungkan halaman-halaman yang
15
Afrianto, Pedoman Penulisan HTML, (Jakarta: PT. Elex Media Komputindo, 1999) hal. 17
16
Henki Prihatna, Kiat Praktis Menjadi Web Master Profesional, (Jakarta: PT. Elex Media
Komputindo, 2005), hal. 51.
17
penting atau popular. Navigasi sekunder digunakan untuk menghubungkan
kehalaman-halaman yang lebih mendetail atau kurang popular. Keduanya
berfungsi untuk menghubungkan suatu halaman ke halaman lainnya. Navigasi
sekunder juga dapat berfungsi sebagai navigasi alternative dari navigasi utama.
Navigasi primer merupakan navigasi utama yang menghubungkan halaman-
halaman yang penting atau popular. Navigasi utama diletakkan dibagian kiri, atau
atas halaman website.
2.1.2.8 Menu Tarik (Pulldown Menu)
Disebut menu tarik, karena seolah-olah kita “memegang” sebuah
menu/pilihan dan kemudian “menarik” ke bawah (atau ke samping, pulled-down)
untuk melihat submenu dari menu/pilihan tersebut.17 Setelah pilihan
dikonfirmasikan, maka daftar subpilihan menjadi tidak terlihat lagi (poped-up).
Sebuah menu tarik pada dasarnya adalah sistem menu pilihan-pilihannya
dikelompokkan menurut kategori tertentu atau menurut cara tertentu sehingga
mereka membetnuk semacam hirarki pilihan.18 Pada hirarki paling tinggi, pilihan-
pilihan itu disebut dengan pilihan/menu utama. Sebagian atau semua pilihan/menu
utama dapat mempunyai satu atau lebih subpilihan/submenu. Sebuah
subpilihan/submenu dari suatu pilihan/menu utama dapat mempunya satu atau
lebih sub-sub pilihan, dan seterusnya.
17
Insap Santosa, Interaksi Manusia dan Komputer, (Yogyakarta: Andi, 2004), hal. 43.
18
Ibid., hal. 43.
18
2.1.3 Antarmuka Pengguna
2.1.3.1 Pengertian Antarmuka Pengguna
Antarmuka pengguna (user interface) merupakan bagian dari sistem
komputer dimana pengguna berinteraksi untuk melakukan tugasnya dan mencapai
tujuannya,19 sedangkan menurut Raskin bagaimana sebuah tugas dilakukan
dengan menggunakan sebuah produk, apa yang dilakukan, dan bagaimana produk
merespon, itulah yang disebut antarmuka pengguna.20 Mengikuti sejumlah prinsip
analisis dan perancangan antarmuka pengguna, tahap ini bekerja dengan cara
mengidentifikasi objek-objek antarmuka, aksi-aksi, dan kemudian membuat tata
letak layar yang membentuk basis untuk pembuatan seuatu prototipe antarmuka
pengguna. Proses analisis dan perancangan antarmuka pengguna biasanya dimulai
dengan melakukan identifikasi pengguna, pekerjaan, dan kebutuhan lingkungan.
Saat pekerjaan yang akan dilakukan telah teridentifikasi dengan baik, skenario
penggunaan dari para pengguna dapat dibuat dan dianalisis untuk dapat
mendefinisikan sejumlah objek antarmuka pengguna.
2.1.3.2 Analisis dan Perancangan Antarmuka Pengguna
Agar dapat berjalan dengan baik antarmuka pengguna harus dianalisis dan
dirancang. Proses analisis dan perancangan antarmuka pengguna tidak hanya
berbicara tentang bagaimana aplikasi tersebut terlihat, lebih dalam konsep ini
berfokus pada cara kerja, bagaimana sebuah interaksi terjadi antara aplikasi dan
19
Deborah Stone, User Interface Design and Evaluation, (San Francisco: Morgan Kauffman
Publishers, 2005), hal. 4.
20
Dmitry Fadeyev, The Smashing Book: User Interface Design in Modern Web Application,
(Lübeck: Smashing MediaGmbH, 2010), hal. 10.
19
penggunanya serta alat apa yang tepat untuk melakukan tugas itu.21 Menurut
Fadeyev antarmuka pengguna yang baik harus memenuhi prinsip-prinsip berikut:
1. Kejelasan, antarmuka pengguna harus menghindari ambiguitas dengan
membuat semuanya jelas melalui bahasa, aliran, hirarki dan metafora
untuk elemen visual.
2. Ringkas, antarmuka pengguna harus terlihat ringkas namun juga jelas
secara bersamaan, prinsip ini berkaitan dengan bagaimana meletakkan
berbagai konten dalam satu tempat tanpa membuat pengguna merasa
pusing ataupun bosan ketika melihatnya.
3. Keakraban, antarmuka pengguna harus mudah dikenali, bahkan jika
pengguna baru pertama kali menggunakannya. Prinsip ini berkaitan
dengan pemilihan item yang dalam tepat sehingga fungsi dari sebuah
item dapat dengan mudah diidentifikasi oleh pengguna.
4. . Tanggap, antarmuka pengguna harus tanggap dalam hal kecepatan
dan proses umpan balik kepada pengguna.
5. Konsistensi, antarmuka pengguna harus konsisten dalam setiap bagian.
Prinsip ini berkaitan dengan penetapan pola mulai dari penggunaan,
warna dan tata telak sehingga pengguna mampu mengenali pola
aplikasi dengan mudah.
6. Estetika, antarmuka pengguna harus terlihat indah. Walaupun estetika
tidak berhubungan dengan kinerja namun penerapan prinsip ini jelas
21
Dmitry Fadeyev, Op. Cit., hal. 11
20
memberi daya tarik, kenyamanan dan rasa senang dari sisi
penggunanya.
7. Efisiensi, antarmuka pengguna harus mampu membuat pengguna lebih
produktif dengan akses yang lancar dan cepat serta desain yang baik.
8. Pengampunan, antarmuka pengguna harus menyediakan sarana yang
baik untuk pengguna dalam memperbaiki kesalahan yang mungkin
mereka buat.
2.1.4 PHP (PHP: Hypertext Processor)
PHP adalah bahasa scripting yang cepat dan portable sangat sesuai
digunakan untuk membuat website yang memiliki database.22 PHP adalah bahasa
scripting open source untuk membuat web secara dinamis.23 PHP adalah skrip
yang berjalan dalam server side yang ditambahkan dalam HTML.24 Berdasarkan
teori di atas, PHP adalah bahasa scripting open source untuk membuat website
yang di integrasikan ke dalam HTML. PHP bermula saat Rasmus Lerdorf
membuat sejumlah skrip Perl yang dapat mengamati siapa saja yang melihat-lihat
daftar riwayat hidupnya pada tahun 1994. Skrip-skrip ini selanjutnya dikemas
menjadi tool yang disebut “Personal Home Page”. Paket inilah yang menjadi
cikal bakal PHP. Pada tahun 1995, Rasmus menciptakan PHP/F1 versi 2. Pada
versi inilah pemrogram dapat menempelkan kode terstruktur di dalam tag HTML.
22
Quigley, Gargenta, PHP and MySQL by Example, (Prentice Hall, 2006), hal. 4
23
Stobart, Vassileiou, PHP and MySQL Manual, (London: Springer Professional Computing, 2004)
24
Abdul Kadir, Dasar Pemrograman Web Dinamis Menggunakan PHP, (Yogyakarta: Andi, 2001),
hal. 16
21
Kode PHP juga bisa berkomunkiasi dengan basis data dan melakukan
perhitungan-perhitungan yang kompleks.25
Sistem kerja dari program ini adalah sebai interpreter bukan sebagai
compiler. Interpreter PHP dalam mengeksekusi skrip PHP yang diletakan pada
server (disebut server side), bukan pada browser internet. Sedangkan jika skrip
PHP tidak diletakkan pada server, maka skrip PHP itu tidak akan bekerja.
Dalam membuat program PHP, diawali dengan start tag PHP (<?php) dan
end tag PHP (?>). PHP juga dapat disisipkan pada halaman HTML dalam bentuk
tag. Kode program ditulis di antara start tag PHP dan end tag PHP. Apabila kode
program tidak ditulis di antara start tag PHP dan end tag PHP, maka kode
program akan dianggap sebagai kode HTML.
2.1.5 MySQL
MySQL adalah salah satu software sistem manajemen database (DBMS)
Structured Query Language (SQL).26 MySQL merupakan sistem manajemen
database, relasional sistem database dan software open source SQL yang sangat
popular.27 Jadi, MySQL adalah sebuah software pembuatan database yang
bersifat open source. MySQL dikembangkan oleh perusahaan MySQL AB, yaitu
perusahaan komersial yang didirikan oleh dua orang Swedia untuk memeberikan
pelayanan seputar MySQL database termasuk mengembangkan kembali software
25
Ibid., hal. 1
26
Wahana Komputer, Panduan Belajar MySQL Database Server, (Jakarta: Mediakita, 2010), hal.
26.
27
Stendy B. Sakur, Aplikasi Web Database dengan Dreamweaver MX 2004, (Yogyakarta: Andi,
2005), hal. 57.
22
tersebut. Agar tampilan website lebih mudah dipahami user maka dibutuhkan
interaksi manusia dan komputer. Aspek yang harus diperhatikan saat membuat
website antara lain adalah struktur navigasi.
2.1.6 Pengertian Aplikasi
Aplikasi adalah satu unit perangkat lunak yang dibuat untuk melayani
kebutuhan akan beberapa aktivitas seperti sistem perniagaan game, pelayanan
masyarakat, periklanan, atau semua proses yang dilakukan manusia.28 Aplikasi
adalah kumpulan perintah program yang dibuat untuk melakukan pekerjaan-
pekerjaan tertentu (khusus).29 Aplikasi merupakan program yang dikembangkan
untuk memenuhi kebutuhan pengguna dalam menjalankan pekerjaan tertentu.30
Berdasarkan pengertian di atas, dapat disimpulkan bahwa aplikasi merupakan
sebuah program yang dibuat dalam sebuah perangkat lunak dengan komputer
untuk memudahkan pekerjaan atau tugas-tugas seperti penerapan, penggunaan,
dan penambahan data yang dibutuhkan. Aplikasi dapat digolongkan menjadi
beberapa kelas yaitu perangkat lunak perusahaan (enterprise), perangkat lunak
infrastruktur perusahaan, perangkat lunak informasi kerja, perangkat lunak media
dan hiburan, perangkat lunak pendidikan, perangkat lunak pengembangan media,
dan perangkat lunak rekayasa produk.
28
Hengki W. Pranama, Kunci Sukses Aplikasi Penjualaan Berbasis Access 2003, (Jakarta: Alex
Media Komputerindo, 2012), hal. 17.
29
Hendrayudi, VB 2008 Untuk Berbagai Keperluan Pemrograman, (Jakarta: PT. Elex Media
Komputindo), hal. 143.
30
Yuhefizar, 10 Jam Menguasai Teknologi dan Aplikasinya, (Jakarta: Alex Media Komputerindo,
2012), hal. 159.
23
2.1.7 Aplikasi Berbasis Web
Aplikasi web dibangun hanya dengan menggunakan bahasa yang disebut
HTML (Hyper Text Markup Language) dan protokol yang digunakan dinamakan
HTTP (Hyper Text Transfer Protocol). Pada perkembangan berikutnya, sejumlah
script dan objek yang dikembangkan untuk memperluas kemampuan HTML.
Pada saat ini, banyak script seperti PHP dan ASP. Aplikasi web dapat dibagi
menjadi dua jenis website yaitu31 :
1. Web Statis adalah website yang penggunanya tidak dapat mengubah
konten (isi informasi) dari web tersebut secara langsung melalui
browser. Dibentuk menggunakan HTML saja. Kekurangan web statis
adalah keharusan untuk memelihara program secara terus-menerus
untuk mengikuti setiap perubahan yang terjadi. Kelemahan ini dapat
diatasi dengan web dinamis.
2. Web dinamis adalah jenis website yang memungkinkan terjadi
komunikasi antara pengguna dengan server. Seorang pengguna dapat
mengubah konten (isi informasi) dari halaman tertentu melalui
browser.
Pertukaran informasi antara komputer yang meminta informasi (disebut
klien) dan komputer yang memasok informasi (disebut server). Server yang
melayani permintaan dari klien sesungguhnya berupa satu perangkat lunak yang
dinamakan web server. Web server yang berkomunikasi dengan perangkat lunak
31
Surahman, Web Designer Cara Cepat Membuat Desain Template Website Tanda Coding,
(Jakarta: Media Kita, 2013), hal. 150.
24
lain (disebut middleware) berhubungan dengan basis data (database). Bahasa
pemrograman yang dipergunakan adalah HTML, PHP, dan Javascript.
2.1.7.1 Kualitas Aplikasi Berbasis Web
Setiap orang yang pernah melakukan penelusuran web akan memiliki
pendapat tertentu tentang web yang dikunjunginya. Sudut pandang dan penilaian
masing-masing orang bisa sangat beragam, beberapa menyukai tampilan grafis
yang memukau, beberapa menyukai fitur yang canggih dan akses yang lancar
bahkan tidak menutup kemungkinan beberapa lainnya hanya menginginkan teks
yang sederhana. Pada kenyataannya, persepsi para pengguna aplikasi berbasis web
mungkin lebih penting dibandingkan dengan teori-teori teknis tentang kualitas
aplikasi berbasis web.32
Dalam ranah keteknisan, Olsina dan rekan-rekan kerjanya
mengembangkan sebuah “pohon penilaian kualitas” yang dapat digunakan dalam
mengidentifikasi sejumlah atribut-atribut teknis dan mengukur kualitas aplikasi
berbasis web yang berkualitas tinggi, pohon penilaian kualitas ini mencakup 5
kriteria, yakni:33
1. Kemudahan penggunaan.
2. Fungsionalitas.
3. Keandalan.
4. Efisiensi.
5. Kemudahan pemeliharaan.
32
Roger S. Pressman, Rekayasa Perangkat Lunak Edisi ke-7, (Yogyakarta: Andi, 2010), hal. 455
33
Ibid., hal. 456
25
Detil dari masing-masing kriteria dijelaskan dalam Gambar 2.4 berikut ini:
Gambar 2.4 Pohon Penilaian Kualitas
Berdasarkan gambar 2.4 dapat disimpulkan bahwa aspek kemudahan
pengunaan memiliki 4 sub aspek, aspek fungsionalitas memiliki 3 sub aspek,
aspek keandalan memiliki 3 sub aspek, aspek efisiensi memiliki 3 sub aspek, dan
terakhir aspek kemudahan pemeliharaan memiliki 3 sub aspek.
2.1.8 Aplikasi Paket soal
Aplikasi paket soal adalah suatu program komputer untuk menghasilkan
paket-paket soal yang bervariasi dari koleksi soal. Tujuannya adalah untuk
memudahkan guru dalam membuat paket soal. Ada tiga hal yang penting dalam
aplikasi paket soal, yaitu:

26
1. Butir Soal
Butir Soal adalah isi dari paket-paket soal. Butir soal yang digunakan
adalah butir soal pilihan ganda. Soal tersebut berpedoman pada
indikator yang dimasukkan oleh guru.
2. Koleksi Soal
Koleksi soal adalah kumpulan soal dalam jumlah besar. Soal tersebut
disimpan ke dalam database dan membentuk suatu koleksi soal.
3. Paket Soal
Paket soal adalah hasil dari aplikasi paket soal. Paket soal dibuat oleh
guru sesuai dengan kebutuhannya masing-masing. Paket soal
dihasilkan dari jumlah soal yang ingin diambil bersumber pada koleksi
soal. Paket soal yang telah dibuat mempunyai kode paket soal masing-
masing.
Berdasarkan penjelasan di atas dapat diartikan bahwa aplikasi paket soal
adalah suatu program komputer yang memungkinkan guru mengumpulkan soal
yang bervariasi dan membuat paket-paket soal sesuai dengan kebutuhannya
masing-masing.
2.1.9 Soal Pilihan Ganda
Tes objektif tipe pilihan ganda banyak dipakai para guru dalam evaluasi di
kelas.34 Soal pilihan ganda memiliki kelebihan yaitu dalam pemeriksaannya dapat
dilakukan secara objektif. Tes objektif dikatakan lebih efektif penggunaannya
34
Arikunto Suharsimi, Dasar – dasar Evaluasi Pendidikan, (Yogyakarta: Pustaka, 2007), hal. 37.
27
dalam mengukur beberapa hasil belajar peserta didik. Penggunaan tes objektif tipe
pilihan mengungkap materi pembelajaran dengan cakupan pengetahuan yang
lebih kompleks, dan tingkatan pengetahuan yang lebih tinggi.
Salah satu bentuk tes objektif adalah soal bentuk pilihan ganda. Butir
pilihan ganda pada prinsipnya terdiiri atas sebuah pokok persoalan atau problem
dan daftar pilihan yang dianjurkan untuk diisi oleh siswa yang hendak dievaluasi.
Di samping itu, setiap item tes juga dibedakan dalam dua bagian penting, yaitu
pokok persoalan dan jawaban alternatif.
Bagian pertama disebut pokok persoalan (stem of item), yaiut bagian inti
dari kalimat yang berisi problematika hasil pembelajaran yang hendak ditanyakan
kepada siswa.35 Bagian kedua yaitu bagian jawaba. Pada bagian ini biasanya
direncanakan dengan sistematis dan cermat oleh para evaluator, yakni
mengandung satu jawaban benar dan sisanya jawaban salah. Jawaban salah
tersebut sesuai dengan fungsinya untuk membingungkan para siswa yang tidak
belajar dengan baik. Oleh karena fungsi tersebut, beberapa jawaban salah sering
disebut sebagai jawaban penjebak (distracters). Jawaban penjebak ini juga sering
disebut oleh sebagian guru sebagai jawaban alternatif atau jawaban optional dan
berfungsi memindahkan perhatian siswa dalam memilih jawaban benar. Kaidah
penulisan soal pilihan ganda diantaranya yaitu:36
1. Soal harus sesuai dengan indikator
2. Setiap soal harus mempunyai satu jawaban yang benar
35
Ibid., hal. 45.
36
Balitbang DEPBIKNAS, Panduan Penulisan Soal Pilihan Ganda, (Pusat Penilaian Pendidikan,
Jakarta, 2007), hal. 13
28
3. Setiap soal harus menggunakan bahasa yang sesuai degnan kaidah
bahasa Indonesia.
Dibutuhkan soal yang bervariasi maka, dibutuhkan peran guru MGMP
sebagai pengguna website.
2.1.10 Sistem Operasi
Sistem operasi adalah salah satu mata pelajaran wajib dasar program
Multimedia di Sekolah Menengah Kejuruan (SMK). Sistem operasi termasuk
mata pelajaran produktif. Mata pelajaran produktif merupakan kelompok mata
pelajaran yang berfungsi membekali peserta didik agar memiliki kompetensi kerja
sesuai Standar Kompetensi Kerja Nasional Indonesia (SKKNI). Mata pelajaran
produktif terbagi menjadi teori dan praktik. Proses pembelajaran teori
dilaksanakan di kelas untuk memeberikan ilmu pengetahuan/kognitif pada siswa,
sedangkan pembelajaran praktik dilaksanakan di laboratorium untuk mengasah
keterampilan siswa.
Dalam sistem komputer, sistem operasi merupakan salah satu komponen
perangkat lunak komputer. Sistem operasi merupakan perangkat lunak lapisan
pertama yang diletakkan pada media penyimpan (hard disk) di komputer. Sistem
operasi akan melakukan layanan inti umum untuk perangkat lunak aplikasi.
Sistem operasi akan mengelola semua aktifitas komputer yang berkaitan dengan
pengaksesan perangkat keras, pengelolaan proses seperti penjadwalan proses, dan
penglolaan aplikasi. Sistem operasi mempunyai peranan yang sangat penting.
Secanggih apapun perangkat keras komputer jika tidak didukung sistem operasi
29
maka sistem komputer tersebut tidak aka nada manfaatnya. Website kumpulan
soal pilihan ganda menjadi media guru-guru sistem operasi multimedia untuk
mengumpulkan dan memasukkan soal-soal pilihan ganda yang mengandung teori
atau pengetahuan dan praktek.
2.1.11 Manfaat Penerapan Aplikasi Paket Soal Berbasis Web di SMK Negeri
48 Jakarta
Penerapan aplikasi paket soal berbasis web dilakukan oleh guru-guru
SMK Negeri 48 Jakarta. Penerapan aplikasi paket soal ini merupakan proses
pengumpulan soal, memasukan soal, pemantauan apakah soal layak untuk
dijadikan paket soal, dan membuat paket soal sesuai dengan jumlah koleksi yang
tersedia. Pengumpulan soal dilakukan oleh sejumlah guru. Kegiatan pengumpulan
soal ini bertujuan untuk menambahkan koleksi soal. Koleksi soal yang banyak
akan mempengaruhi variasi soal yang ada. Sebelum membuat paket soal terdapat
keterangan jumlah koleksi soal yang tersedia mempermudah guru untuk
mengambil soal yang ingin dimasukkan ke dalam paket soal. Paket soal dibuat
berdasarkan kelas dan mata pelajaran yang diampu guru tersebut. Manfaat
penerapan aplikasi paket soal adalah memudahkan guru dalam membuat paket
soal, memudahkan guru membuat variasi soal, dan untuk berbagi soal pilihan
ganda.
30
2.1.12 Manfaat Penerapan Konsep Responsive Web Design User Interface
Aplikasi Paket Soal.
Penerapan konsep responsive web design merupakan proses
penyederhanaan, efisiensi, fleksibilitas/keluesan pada tampilan tata letak dan
hirarki aplikasi, dalam menciptakan kenyamanan saat membaca dan mengerjakan
soal, terlepas dari berbagai macam perangkat/device yang digunakan dan ukuran
layar yang digunakan pada jendela browser. Penggunaan konsep responsive web
design ini bertujuan untuk memudahkan penggunanya/user, baik guru ataupun
murid, dalam mengakses aplikasi paket soal.
Pemanfaatan dari konsep responsive web design menggunakan konsep
mobile first, dimana aplikasi paket soal berbasis web akan lebih difokuskan untuk
pengguna smartphone/tablet device. Agar nantinya pengguna/user tidak harus
selalu menggunakan perangkat komputer. Cukup akses melalui perangkat seperti
smarphone/tablet device, maka guru bisa membuat paket soal, membuat variasi
soal, dan saling berbagi soal pilihan ganda dimanapun.
2.2 Kerangka Berpikir
Website kumpulan soal pilihan ganda merupakan kumpulan halaman-
halaman website yang memiliki konten koleksi butir-butir soal. Website ini
termasuk kedalam website dinamis yang memungkinkan terjadi komunikasi antara
pengguna dengan server. Responsive web design merupakan pendekatan yang
menunjukan bahwa desain dan pengembangan harus menanggapi perilaku dan
lingkungan pengguna berdasarkan pada ukuran, platform, dan orientasi layar.

31
Sebagaimana pengguna saat ini yang beralih dari perangkat komputer ke tablet
device, website secara otomatis harus menyesuaikan resolusi, ukuran gambar, dan
kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi
untuk secara otomatis merespon preferensi pengguna yang didasarkan pada
resolusi layar gadget yang digunakan. Penerapan responsive web design pada
aplikasi paket soal dilakukan agar pengguna bisa mengakses web menggunakan
smartphone/tablet device dengan resolusi dan penyesuaian gambar yang optimal,
sehingga pengguna nyaman mengakses web tersebut. Gambar 2.5. merupakan
bagan kerangka berpikir.

32
Gambar 2.5 Bagan Kerangka Berpikir
Aplikasi paket soal berbasis web adalah suatu program komputer yang
memungkinkan guru mengumpulkan soal yang bervariasi dan menghasilkan
paket-paket soal sesuai dengan kebutuhannya masing-masing. Tampilan antar
muka yang menarik dan user friendly memudahkan pemakai (user) menggunakan
aplikasi ini. Interface yang baik meminimalisir kesalahan pengguna. Agar
mempermudah pengguna berinteraksi dengan komputer maka menggunakan GUI

33
(Graphical User Interface). GUI merupakan antar muka pada sistem operasi atau
komputer yang menggunakan menu grafis.
Penerapan aplikasi paket soal berbasis web dilakukan oleh guru-guru di
SMK Negeri 48 Jakarta. Aplikasi paket soal ini merupakan proses pengumpulan
soal dan membuat paket soal sesuai dengan jumlah paket yang tersedia.
Pengumpulan soal dilakukan oleh sejumlah guru. Tujuan aplikasi paket soal
adalah memudahkan guru dalam membuat paket soal, juga memudahkan guru dan
siswa dalam menghadapi Ujian Nasional CBT.
2.3 Hipotesis Penelitian
Pengembangan dalam penerapan konsep Responsive Web Design pada
sistus soal pilihan ganda dengan menggunakan CSS framework bootstrap dan
dengan fitur responsive web design pada situs soal soal pilihan ganda untuk SMK
Negeri 48 Jakarta diharapkan dapat memberikan kemudahan pada proses
memasukan dan mengerjakan soal.

34
34
BAB III
METODOLOGI PENELITIAN
3.1 Tempat dan Waktu Penelitian
Tempat penelitian Pengembangan Situs Soal Pilihan Ganda dilakukan di
SMK Negeri 48 Jakarta. Waktu penelitian dilakukan kurang lebih selama 1
semester.
3.2 Definisi Operasional
Definisi Operasional merupakan definisi yang didasarkan atas sifat-sifat
variabel yang diamati. Definisi operasional mencakup hal-hal penting dalam
penelitian yang memerlukan penjelasan. Definisi operasional bersifat spesifik,
rinci, tegas dan pasti yang menggambarkan karakteristik variabel-variabel
penelitian dan hal-hal yang dianggap penting.37 Definisi pengembangan dan
respon user terhadap penerapan konsep Responsive Web Design pada situs soal
pilihan ganda SMK Negeri 48 Jakarta adalah pengembangan situs soal pilihan
ganda, yang berisi latihan soal-soal pilihan ganda, menggunakan penerapan teknik
Responsive Web Design agar tampilan situs tersebut mudah di akses
menggunakan berbagai macam device, seperti komputer dan smartphone, yang
akan digunakan oleh guru dan siswa dengan tujuan membantu guru dan siswa
dalam mempersiapkan Ujian Nasional CBT di SMK Negeri 48 Jakarta.
37
Muhlisin, Memahami Definisi Operasional Dalam Penelitian,
http://www.mushlihin.com/2013/11/penelitian/memahami-definisi-operasional-dalam-
penelitian.php, diakses 5 Desember 2015, Jam 13.15 WIB.
34
35
3.3 Tahap-tahap Penelitian
Tahap-tahap penelititan yang digunakan pada pembuatan website
kumpulan soal pilihan ganda adalah:
1. Studi Literatur yaitu membaca buku referensi, artikel-artikel surat
kabar maupun internet, dan sebagainya serta data-data yang diperlukan
untuk menunjang sistem, baik pada perangkat lunak maupun keras.
2. Wawancara yaitu dengan melakukan wawancara kepada pihak terkait,
yakni untuk mendapatkan informasi yang diperlukan untuk melakukan
penelitian. Penelitian ini melakukan wawancara kepada guru dan tim
ICT SMK Negeri 48 Jakarta Timur berdasarkan pedoman wawancara.
3. Metode penelitian yang digunakan dalam penelitian ini adalah metode
penelitian dan pengembangan (Research & Development atau R&D).
Metode penelitian dan pengembangan adalah metode penelitian yang
digunakan untuk menghasilkan produk tertentu dan menguji
keefektifan produk tersebut. Metode ini dimanfaatkan untuk
menghasilkan situs soal pilihan ganda sebagai upaya untuk
menggantikan cara mengisi soal pilihan ganda secara manual di SMK
Negeri 48 Jakarta.
36
3.4 Pelaksanaan Penelitian
3.4.1 Metode Pengembangan Perangkat Lunak
Metode pengembangan perangkat lunak yang digunakan adalah metode air
terjun (waterfall) sering disebut model sekuensial linier (sequential linear) atur
alur hidup klasik (classic life cycle). Metode air terjun menyediakan pendekatan
alur hidup perangkat lunak secara sekuensial atau terurut dimulai dari analisis,
desain, pengodean, pengujian, dan pemeliharaan (maintance). Berikut adalah
gambar metode waterfall:
Gambar 3.1 Metode Perangkat Lunak Waterfall
Berdasarkan gambar diatas penjelasan tahap-tahap metode waterfall
yaitu38:
1. Analisis Kebutuhan Perangkat Lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk
menspesifikasiskan kebutuhan perangkat lunak agar dapat dipahami,
perangkat lunak seperti apa yang dibutuhkan oleh user.
2. Desain
38
Rossa A. S Shalahuddin, Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek,
(Bandung: Informatika, 2013), hal. 29.
37
Proses multi langkah yang fokus pada desain pembuatan program
perangkat lunak termasuk struktur data, arsitektur perangkat lunak,
representasi antarmuka, dan prosedur pengkodean. Tahap ini
mentranslasi kebutuhan perangkat lunak dari tahap analisis kebutuhan
ke represntasi desain agar dapat diimplementasikan menjadi program
pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan pada
tahap ini perlu didokumentasikan.
3. Pembuatan Kode Program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil
dari tahap ini adalah program komputer sesuai dengan desain yang
telah dibuat pada tahap desain.
4. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi lojik dan
fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini
dilakukan untuk meminimalisir kesalahan (error) dan memastikan
yang dihasilkan sesuai dengan yang diinginkan.
5. Pemeliharaan
Perubahan terjadi karena adanya kesalahan yang muncul dan tidak
terdeteksi saat pengujian atau perangkat lunak harus beradaptasi
dengan lingkungan baru. Tahap pendukung atau pemeliharaan dapat
mengulangi proses pengembangan mulai dari analisis spesifikasi untuk
perubahan perangkat lunak yang sudah ada, tapi tidak membuat
perangkat lunak baru.

38
3.4.2 Analisis Kebutuhan
3.4.2.1 Analisis Kebutuhan Admin
Analisis kebutuhan admin berisi proses-proses apa saja yang dibutuhkan
oleh admin dan nantinya dilakukan oleh sistem, kebutuhan fungsional yang berisi
informasi-informasi apa saja yang dihasilkan oleh sistem seperti menambah kelas,
menambah mata pelajaran, dan menambah guru. Kebutuhan fungsional dalam
mengembangkan website ini berisi kebutuhan informasi di SMK Negeri 48
Jakarta.
3.4.2.2 Analisis Kebutuhan Guru
Analisis kebutuhan guru berisi proses-proses apa saja yang dibutuhkan
oleh guru dan nantinya dilakukan oleh sistem, kebutuhan fungsional yang berisi
informasi-informasi apa saja yang dihasilkan oleh sistem seperti menambah mata
pelajaran yang diajar, menambah kelas yang diajar, dan menambah soal.
Kebutuhan fungsional dalam mengembangkan website ini berisi kebutuhan
informasi di SMK Negeri 48 Jakarta.
3.4.2.3 Analisis Kebutuhan Siswa
Analisis kebutuhan siswa berisi proses-proses apa saja yang dibutuhkan
siswa dan nantinya dilakukan oleh sistem, kebutuhan fungsional yang berisi
informasi-informasi apa saja yang dihasilkan oleh sistem seperti mengerjakan
soal-soal yang diberikan guru dan melihat nilai. Kebutuhan fungsional dalam
mengembangkan website ini berisi kebutuhan informasi di SMK Negeri 48
Jakarta.
39
3.4.2.4 Analisis Kebutuhan Keseluruhan
Berdasarkan hasil studi literatur dan wawancara terhadap guru-guru,
didapat 3 jenis user. Maka jenis yang user yang dapat menggunakan situs ini
adalah admin, guru, dan siswa. Kebutuhan fungsional adalah spesifikasi yang
rinci tentan hal-hal yang akan dilakukan sistem ketika diimplementasikan.
Adapun aspek-aspek kebutuhan fungsional pada situs soal pilihan ganda yaitu:
1. Admin, sebagai pengelola semua sistem yang berjalan.
2. Guru, sebagai kontributor soal.
3. Siswa, sebagai pihak yang akan menggunakan paket soal.
Dari masing-masing aspek tersebut dapat dibuat daftar kebutuhan fungsional pada
tabel 3.1.
Tabel 3.1 Daftar Kebutuhan Fungsional
No. Pemakai Kebutuhan Fungsional

1. Admin a. Melakukan Log in.
b. Melakukan Log out.
c. Mengubah Password.
d. Menambah, mengubah, dan menghapus
pengajar.
e. Menambah, mengubah, dan menghapus
siswa.
f. Menambah, mengubah, dan menghapus
kelas.
g. Menambah, mengubah, dan menghapus
matapelajaran.
2. Guru a. Melakukan Log in.

c. Mengubah password.
d. Mengubah profil.
e. Menambah Mata Pelajaran.
f. Menambah Indikator.
g. Menambah soal, pembahasan, dan
40
pilihan soal.
h. Mengubah soal.
i. Menghapus soal.
j. Menambah, mengubah, dan menghapus
materi.
k. Menambah, mengubah, dan menghapus
berita.
3. Siswa a. Melakukan Log in.
c. Mengubah password.
d. Mengubah profil.
e. Mengisi jawaban.
3.4.3 Desain dan Analisis Sistem
Pada tahapan desain dan analisis sistem, penulis merancang desain sistem
dengan menggunakan Data Flow Diagram (DFD) serta Entity Relationship
Diagram (ERD) sebagai rancangan sistem database. Data Flow Diagram dapat
digunakan untuk mempresentasikan sebuah sistem atau perangkat lunak pada
bebearpa level yang lebih detail untuk merepresentasikan aliran informasi atau
fungsi yang lebih detail.
3.4.3.1 Diagram Level 0
Data Flow Diagram Level 0 atau diagram konteks menggambarkan satu
lingkaran besar yang dapat mewakili seluruh proses yang terdapat di dalam suatu
sistem. Merupakan tingkatan tertinggi dalam DFD dan biasanya diberi nomor 0
(nol). Semua entitas eksternal yang ditunjukkan pada diagram konteks berikut
aliran-aliran data utama menuju dan dari sistem. Pada diagram admin dapat
mengupdate data sekolah, guru, dan siswa, user guru dapat menambah soal dan
kelas, dan user siswa melihat dan mengerjakan soal

41
Diagram ini merupakan turunan dari diagram DFD level 0 karena pada
DFD level 1 ini mendalami apa yang ada pada DFD level 0 atau satu lingkaran
besar yang mewakili lingkaran-lingkaran kecil yang ada didalamnya. Merupakan
pemecahan dari diagram konteks ke Diagram Nol. Di dalam diagram ini memuat
penyimpanan data.
3.4.3.3 Diagram Level 2 Proses 1
Pada diagram level 2 proses 1 menunjukkan penggambaran tentang proses
login yang lebih detail, yaitu pada saat pengguna memasukkan username dan
password, maka di dalam sistem login ada proses verifikasi username dan
password sebagai balikan bagi pengguna. Jika username dan password yang
dimasukkan benar, maka pengguna dapat meneruskan proses pada menu awal
sistem, jika salah pengguna mendapat notifkasi dari sistem sesuai dengan
kesalahan data yang dimasukkan.
data sekolah yang lebih detail, yaitu pada saat admin memasukkan data kelas dan
matapelajaran. Proses input data kelas user input nama kelas, dan kode kelas.
Proses hapus data kelas user hapus berdasarkan nama kelas. Proses ubah data
kelas user ubah nama kelas, kode kelas, wali kelas, dan ketua kelas. Pada proses
input data mata pelajaran user input nama mata pelajaran dan kode mata
pelajaran. Proses hapus data mata pelajaran user hapus berdasarkan nama
matapelajaran. Proses ubah data mata pelajaran user ubah nama mata pelajaran
42
dan kode mata pelajaran. Proses tersebut diolah oleh sistem lalu disimpan di
dalam database yang telah tersedia.
data paket soal yang lebih detail, yaitu pada saat guru memasukkan data paket
soal. Proses input data paket soal user input nama paket soal, tanggal pembuatan
soal, mata pelajaran, waktu mengerjakan, dan status pengerjaan. Proses hapus data
paket soal user hapus berdasarkan nama paket soal. Proses ubah data paket soal
user ubah nama paket soal, tanggal pembuatan soal, mata pelajaran, waktu
mengerjakan, dan status pengerjaan. Proses tersebut diolah oleh sistem lalu
disimpan di dalam database yang telah tersedia.
data soal yang lebih detail, yaitu pada saat guru memasukkan data soal yang
terdaftar pada paket soal. Ketika guru selesai membuat paket soal, terdapat pilihan
untuk melihat daftar soal yang dibuat pada paket soal. Apabila didalam paket soal
tersebut belum ada data soal, maka dapat dilanjutkan dengan melakukan proses
input data soal. Proses input data soal user input soal, indikator, pembahasan,
pilihan jawaban, dan kunci jawaban. Proses data soal kelas user hapus
berdasarkan nomor soal. Proses ubah data soal user ubah soal, indikator,
pembahasan, pilihan jawaban, dan kunci jawaban. Proses tersebut diolah oleh
sistem lalu disimpan di dalam database yang telah tersedia.

43
3.4.3.7 ERD (Entitiy Relationship Diagram)
Model penyimpanan basis data yang digunakan dalam pembangunan
website ini adalah model relasional, dimana basis data dipilih ke dalam beberapa
tabel yang saling berhubungan (relationship). Pada tahap desain akan dihasilkan
diagram ER (Entitiy-Relationship) dari basis data yang akan dibangun. Penjelasan
ERD ditunjukan pada Lampiran 4.
3.4.3.8 Desain Struktur Database
Tabel berikut adalah desain struktur database kumpulan soal pilihan ganda
dengan total 13 tabel, yang akan digunakan dalam sistem situs soal pilihan ganda.
1. Tabel Admin
Pada tabel admin terdiri dari atribut id_admin, nama_lengkap, alamat,
no_telp, email, username, dan pass. Atribut id_admin merupakan primary key,
sedangkan atribut username dan pass digunakan untuk mengisi formulir login
pada halaman login.
Tabel 3.2 Tabel Admin
No. Nama Jenis Keterangan

1. Id_admin INT(11) AUTO_INCREMENT (PK)
2. Nama_lengkap VARCHAR(50) NULL
3. Alamat TEXT NULL
4. No_telp VARCHAR(15) NULL
5. Email VARCHAR(100) NULL
6. Username VARCHAR(40) NULL
7. Pass VARCHAR(40) NULL
44
2. Tabel Guru
Pada tabel guru terdiri dari atribut id_guru, nip, nama_lengkap,
tempat_lahir, tgl_lahir, jenis_kelamin, agama, no_telp, email, alamat, jabatan,
foto, web, username, pass, dan stauts. Atribut id_guru merupakan primary key,
sedangkan atribut username dan pass digunakan untuk mengisi formulir login
pada halaman login. Tabel guru befungsi sebagai tempat penyimpanan user guru
yang bertugas memberikan paket soal.
Tabel 3.3 Tabel Guru

1. Id_guru INT(11) AUTO_INCREMENT (PK)
2. Nip VARCHAR(20) NULL
4. Tempat_lahir VARCHAR(20) NULL
5. Tgl_lahir DATE NULL
6. Jenis_kelamin ENUM(‘L’,’P’) NULL
7. Agama VARCHAR(20) NULL
10. Alamat TEXT NULL
11. Jabatan VARCHAR(20) NULL
12. Foto VARCHAR(100) NULL
13. Web VARCHAR(60) NULL
16. Status ENUM(‘aktif’,’tidak NULL
aktif’)
3. Tabel Siswa
Pada tabel siswa terdiri dari atribut id_siswa, nis, nama_lengkap,
tempat_lahir, tgl_lahir, jenis_kelamin, agama, nama_ayah, nama_ibu, no_telp,
email, alamat, id_kelas, tahun_masuk, foto, username, pass, dan status. Atribut
45
id_siswa merupakan primary key, sedangkan atribut username dan pass digunakan
untuk mengisi formulir login pada halaman login. Tabel siswa befungsi sebagai
tempat penyimpanan user siswa yang mengerjakan paket soal.
Tabel 3.4 Tabel Siswa

1. Id_siswa INT(11) AUTO_INCREMENT (PK)
2. Nis VARCHAR(20) NULL
4. Tempat_lahir VARCHAR(20) NULL
5. Tgl_lahir DATE NULL
6. Jenis_kelamin ENUM(‘L’,’P’) NULL
7. Agama VARCHAR(20) NULL
8. Nama_ayah VARCHAR(50) NULL
9. Nama_ibu VARCHAR(50) NULL
12. Alamat TEXT NULL
13. Id_kelas VARCHAR(5) NULL
14. Thn_masuk Int(5) NULL
15. Foto VARCHAR(100) NULL
18. Status ENUM(‘aktif’,’tidak NULL
aktif’)
4. Tabel Kelas
Pada tabel kelas terdiri dari atribut id_kelas, nama_kelas, ruang, dan
wali_kelas. Atribut id_kelas merupakan primary key, atribut nama_kelas dan
ruang merupakan nama kelas yang terdaftar, sedangkan atribut wali_kelas
merupakan nama guru yang mengajar di kelas tersebut.

46
Tabel 3.5 Tabel Kelas

1. Id_kelas INT(11) AUTO_INCREMENT (PK)
2. Nama_kelas VARCHAR(50) NULL
3. Ruang VARCHAR(20) NULL
4. Wali_kelas INT(5) NULL
5. Tabel Kelas Ajar
Tabel kelas ajar terdiri dari atribut id, id_kelas, kelas, id_guru, dan
keterangan. Atribut id merupakan primary key, atribut id_kelas dan id_guru
merupakan data guru yang mengajar di kelas tersebut, sedangkan atribut
keterangan merupakan keterangan tambahan mengenai kelas tersebut.
Tabel 3.6 Tabel Kelas Ajar

1. Id INT(11) AUTO_INCREMENT (PK)
2. Id_kelas INT(5) NULL
3. Id_guru INT(5) NULL
4. Ketereangan VARCHAR(200) NULL
6. Tabel Mapel
Tabel Mapel terdiri dari atribut id, kode_mapel, dan mapel. Atribut id
merupakan primary key, atribut kode_mapel dan mapel merupakan data mata
pelajaran yang tersedia.
Tabel 3.7 Tabel Mapel

v1. Id_mapel INT(11) AUTO_INCREMENT (PK)
2. Kode_mapel VARCHAR(10) NULL
3. Mapel VARCHAR(100) NULL
47
7. Tabel Mapel Ajar
Tabel Mapel Ajar terdiri dari atribut id, id_mapel, id_kelas, id_guru,
dan keterangan. Atribut id merupakan primary key, atribut id_mapel, id_kelas,
id_guru, dan keterangan merupakan data mata pelajaran yang diajar oleh guru.
Tabel 3.8 Tabel Mapel Ajar

2. Id_mapel INT(5) NULL
4. Id_guru INT(5) NULL
3. Keterangan VARCHAR(200) NULL
8. Tabel Indikator
Tabel indikator terdiri dari atribut id_indikator, id_kelas, id_mapel,
dan indikator. Atribut id_indikator merupakan primary key, atribut id_kelas dan
id_mapel merupakan data kelas yang diambil dan pelajaran tersebut, sedangkan
atribut indikator merupakan keterangan tambahan mengenai data indikator
tersebut.
Tabel 3.9 Tabel indikator

1. Id_indikator INT(11) AUTO_INCREMENT (PK)
4. Indikator TEXT NULL
9. Tabel Soal
Tabel Soal terdiri dari atribut id_pilgan, id_tq, pertanyaan, gambar,
pil_a, pil_b, pil_c, pil_d, pil_e, pembahasan, kunci dan tgl_buat. Tabel soal
48
berfungsi sebagai data soal baru yang telah diinput oleh guru. Atribut id_pilgan
merupakan primary key, atribut id_tq merupakan relasi dari tabel topik quiz,
atribut pertanyaan, gambar, pil_a, pil_b, pil_c, pil_d, pil_e, pembahasan, kunci
dan tgl_buat merupakan data soal yang diinput oleh guru.
Tabel 3.10 Tabel soal

1. Id_pilgan INT(11) AUTO_INCREMENT (PK)
2. Id_tq INT(5) NULL
3. Pertanyaan TEXT NULL
4. Indikator TEXT NULL
5. gambar VARCHAR(100) NULL
6. Pil_a TEXT NULL
7. Pil_b TEXT NULL
8. Pil_c TEXT NULL
9. Pil_d TEXT NULL
10. Pil_e TEXT NULL
11. pembahasan TEXT NULL
12. Kunci VARCHAR(2) NULL
13. Tgl_buat DATE NULL
10. Tabel Paket Soal
Tabel paket soal terdiri dari atribut id_tq, judul, id_kelas, id_mapel,
tgl_buat, pembuat, waktu_soal, info, dan status. Atribut id_tq merupakan primary
key, atribut id_kelas merupakan relasi dari tabel kelas, atribut id_mapel
merupakan relasi dari tabel mapel, atribut id_guru merupakan relasi dari tabel
guru. Tabel paket soal berfungsi sebagai tempat penyimpan soal yang telah
diinput oleh guru.

49
Tabel 3.11 Tabel paket soal

1. Id_tq INT(11) AUTO_INCREMENT (PK)
2. Judul VARCHAR(100) NULL
5. Tgl_buat DATE NULL
6. Pembuat VARCHAR(10) NULL
7. Waktu_soal INT(8) NULL
8. Info VARCHAR(250) NULL
9. Status ENUM(‘aktif’,‘tidak NULL
aktif’)
11. Tabel Nilai
Tabel Nilai terdiri dari atribut id, id_tq, id_siswa, benar, salah,
tidak_dikerjakan, dan presentase. Atribut id merupakan primary key, atribut id_tq
merupakan relasi dari tabel paket soal, atribut id_siswa merupakan relasi dari
tabel siswa. Tabel nilai berfungsi untuk menampilkan nilai yang didapat dari
mengerjakan soal.
Tabel 3.12 Tabel nilai

2. Id_tq INT(4) NULL
3. Id_siswa INT(4) NULL
4. Benar INT(4) NULL
5. Salah INT(4) NULL
6. Tidak_dikerjakan INT(4) NULL
7. Presentase INT(6) NULL
50
12. Tabel Berita
Tabel Berita terdiri dari atribut id_berita, judul, isi, tgl_posting,
penerbit, dan status. Atribut id_berita merupakan primary key. Tabel berita
berfungsi untuk menampilkan berita dan informasi pada halaman utama.
Tabel 3.13 Tabel berita

1. Id_berita INT(11) AUTO_INCREMENT (PK)
2. Judul TEXT NULL
3. Isi LONGTEXT NULL
4. Tgl_posting DATE NULL
5. Penerbit VARCHAR(10) NULL
6. Status ENUM(‘aktif’,‘tidak NULL
aktif’)
13. Tabel Materi
Tabel Materi terdiri dari atribut id_materi, judul, id_kelas, id_mapel,
nama file, tgl_posting, pembuat, dan hits. Atribut id_materi merupakan primary
key. Tabel materi berfungsi untuk menampilkan materi-materi yang di unggah
oleh guru.
Tabel 3.14 Tabel materi

1. Id_materi INT(11) AUTO_INCREMENT (PK)
2. Judul VARCHAR(200) NULL
5. Nama_file VARCHAR(250) NULL
6. Tgl_posting DATE NULL
7. Pembuat VARCHAR(10) NULL
8. Hits INT(4) NULL
51
3.4.3.9 Desain Tampilan Halaman Sistem
Hal utama yang dibutuhkan dalam tampilan sebuah sistem (dalam hal ini
berbasis web), adalah desain yang sederhana dan user friendly bagi para
penggunanya. Sehingga, user dapat menggunakan tanpa perlu kesulitan.
Penggunaan Framework Bootstrap diberikan, agar tampilan website bisa
digunakan dengan responsive pada halaman web, baik pada tampilan monitor
maupun pada tampilan smartphone. Pada Gambar 3.2 merupakan desain tampilan
halaman utama Admin dan Guru. Sementara pada Gambar 3.3 merupakan desain
tampilan halaman utama Siswa.
Gambar 3.2 Desain Tampilan Halaman Utama Admin dan Guru Pada
Sistem Soal Pilihan Ganda. A: Tampilan Pada Monitor, B: Tampilan Pada
Smartphone
52
Gambar 3.3 Desain Tampilan Halaman Utama Siswa Pada Sistem Soal
Pilihan Ganda. A: Tampilan Pada Monitor, B: Tampilan Pada Smartphone
Berdasarkan Gambar 3.2 dan Gambar 3.3, desain tampilan sistem soal
pilihan ganda terdiri dari :
1. Header
Berisi tulisan “Administrator” atau “Guru” untuk halaman utama
Admin dan Guru, sementara tulisan “Aplikasi Web Soal Pilihan Ganda
SMKN 48 Jakarta” dengan logo SMK Negeri 48 untuk halaman utama
Siswa.
2. Navigasi Menu Utama
Link-link yang berisi halaman pada website. Dalam situs soal pilihan
ganda terdapat 3 user yang masing-masing user pada tampilan web
memiliki menu yang berbeda. Menu-menu pada tiap user adalah
sebagai berikut :
(1) User admin, berisi empat menu yang dapat dilihat pada Gambar
3.4.
53
Admin
User Mata Kelas Berita

Pelajaran
User Guru
Tambah mata Tambah
Tambah
pelajaran Berita
Kelas
User Siswa
Registrasi
Siswa
Gambar 3.4 Bagan Menu Navigasi Admin
(2) User guru, berisi lima menu yang dapat dilihat pada Gambar 3.5.
Guru
Kelas Mata Soal Materi Berita

Pelajaran
Tambah Buat Paket Tambah Tambah

Kelas Ajar Tambah Mata Soal Materi Berita
Pelajaran
Tambah Tambah Soal

Indikator
Gambar 3.5 Bagan Menu Navigasi Guru

54
(3) User siswa, berisi lima menu yang dapat dilihat pada Gambar 3.6.
Siswa
Beranda Tugas/ Nilai Materi Berita

Quiz
Detail Profil Detail Soal Lihat

Lihat
Materi
Tugas/Quiz
Kerjakan
Soal
Gambar 3.6 Bagan Menu Navigasi Siswa
3. Konten
Konten atau isi halaman berisi data dan form dari menu atau navigasi
yang sedang dibuka dan dijalankan oleh user.
4. Footer
Berisi tahun pembuatan sistem dan sekolah.
3.4.3.10 Implementasi Tampilan Halaman Sistem
Pada tahap implementasi tampilan, akan memperlihatkan hasil halaman
sistem yang telah dibuat sesuai dengan desain sketsa pada Gambar 3.2 dan
Gambar 3.3. Pada lampiran 5 menunjukan tampilan halaman utama admin dan
guru pada Sistem Soal Pilihan Ganda, dan pada lampiran 6 menunjukan halaman
utama siswa.
55
3.5 Alat dan Bahan
Berikut ini adalah instrumen yang digunakan dalam penelitian:
1. Perangkat Keras Laptop Toshiba dengan spesifikasi :
a. Processor : Intel Core i3-2310M CPU 2.10GHz
b. Harddisk : 500GB
c. Monitor : 14”
d. RAM : 5 GB
2. Perangkat Keras Smartphone Asus Zenfone 5 dengan spesifikasi :
a. Processor : Intel Atom Z2520, Dual-core 1.2 GHz
b. Internal Memori : 8GB
c. Layar : 540 x 960 pixels, 5 inches
(~220 ppi pixel density)
d. RAM : 2 GB
3. Perangkat Lunak
a. Apache
b. MySQL
c. XAMPP for Windows ver. 3.2.1
d. phpMyAdmin ver. 4.3.11
e. Google Chrome Version 46.0.2490.80 m

56
3.6 Teknik Pengujian
3.6.1 Teknik Pengujian Perangkat Lunak
Pengujian perangkat adalah proses untuk memastikan apakah semua
kebutuhan fungsional bekerja dengan baik, mencari masih ada kesalahan pada
website. Pengujian atau testing software ini bertujuan untuk menjamin kualitas
software, dan juga menjadi peninjauan terakhir terhadap spesifikasi, desain, dan
pengkodean. Pengujian kebutuhan fungsional dilakukan dengan menggunakan
skenario yang telah ditentukan. Tabel 3.15 dibawah ini merupakan pengujian
dengan metode black box berbasis skenario.
Tabel 3.15 Pengujian Dengan Metode Black Box Berbasis Skenario
No. Skenario Proses Hasil Proses Sistem Bekerja
Admin
Admin login dengan Admin berhasil login, dan
1.
username dan password. masuk menu utama.
Admin login dengan
Admin gagal login,
2. username dan password
muncul notifikasi.
yang tidak sesuai.
Admin login dengan
username kosong/tidak di Admin gagal login,
3.
isi dan password muncul notifikasi.
kosong/tidak di isi.
Admin keluar dari
Admin berhasil keluar,
aplikasi kumpulan soal
4. dan kembali ke menu
pilihan ganda dengan
login.
memilih menu logout
Berita dan konten yang
Admin memilih logo
5. tersedia muncul di
dashboard
halaman.
57
Admin tambah data guru

dengan memilih tambah
guru, mengisi form nip,
nama lengkap, tempat
lahir, tanggal lahir, jenis Data kelas tersimpan di
kelamin, agama, nomer database. Dan muncul
6.
telpon, email, alamat, pada tabel guru di
jabatan, foto, website, halaman manajemen guru.
username, dan password.
Juga mengaktifkan akun
dan memilih tombol
submit.
Admin edit dan hapus
tersedia muncul di
data guru dengan
halaman. Data pada
7. memilih tombol edit dan
halaman manajemen guru
hapus pada tabel
beserta data di database
manajemen guru.
berubah.
Admin melihat detail
Data profil yang tersedia
8. profil guru dengan
muncul di halaman.
memilih menu detail.
Admin memilih menu
manajemen siswa dan Berita dan konten yang
9. menampilkan daftar tersedia muncul di
siswa yang terdaftar dan halaman.
aktif.
Admin melihat detail
tersedia muncul di
10. siswa dengan memilih
halaman. Berhasil melihat
tombol detail.
detail siswa.
Admin menonaktifkan Berita dan konten yang
siswa dengan memilih tersedia muncul di
11. tombol non aktifkan. Dan halaman. Berhasil
icon hapus untuk menonaktifkan siswa dan
menghapus siswa. menghapus siswa.
Admin memilih menu
tersedia muncul di
registrasi siswa untuk
12. halaman. Data pada
mengaktifkan siswa yang
halaman kelas beserta
telah registrasi
data di database berubah.
Admin melihat detail Berita dan konten yang
siswa yang baru tersedia muncul di
13.
mendaftar dengan halaman. Berhasil melihat
memilih tombol detail. detail siswa yang
58
mendaftar.

Admin menghapus siswa
tersedia muncul di
yang baru mendaftar
14. halaman. Berhasil
dengan memilih tombol
menghapus siswa yang
hapus.
mendaftar.
Admin memilih menu
manajemen kelas untuk
melihat kelas yang telah
halaman.
tersedia.
Data kelas tersimpan di
Admin tambah kelas
database. Dan muncul
dengan mengisi form
16. pada tabel kelas di
nama kelas, ruang, dan
halaman manajemen
memilih tombol simpan.
kelas.
Admin edit dan hapus
data kelas dengan
tersedia muncul di
memilih tombol edit dan
hapus pada tabel opsi.
halaman kelas beserta
Dan memilih ketua dan
wali kelas.
Admin melihat siswa
yang terdaftar di kelas
halaman.
lihat siswa
Admin memilih menu
mata pelajaran untuk
melihat mata pelajaran
halaman.
yang tersedia.
Admin tambah data mata
pelajaran dengan
Data mata pelajaran
memilih menu tambah
tersimpan di database dan
20. mata pelajaran. Mengisi
muncul pada tabel mata
form kode mapel, dan
pelajaran.
mapel. Memilih tombol
submit
Admin edit data mata tersedia muncul di
pelajaran dengan halaman. Data pada
21.
memilih icon edit dan halaman mata pelajaran
hapus pada tabel opsi. beserta data di database
berubah.
59
Admin memilih menu Berita dan konten yang

22. berita dan menampilkan tersedia muncul di
daftar berita. halaman.
Admin tambah berita
dengan memilih menu
tambah berita. Mengisi Data mata pelajaran
23. form judul, isi, dan tersimpan di database dan
memilih status terbit muncul pada tabel berita.
aktif/tidak aktif. Memilih
tombol submit.
Admin edit data berita tersedia muncul di
dengan memilih icon edit halaman. Data pada
24.
dan hapus pada tabel halaman mata pelajaran
opsi. beserta data di database
berubah.
tersedia muncul di
Admin edit profil pada
menu user edit profil.
halaman indikator beserta
Guru
Guru melakukan login
Guru berhasil login, dan
26. dengan username dan
masuk menu utama.
password.
Guru melakukan login
dengan username dan Guru gagal login, muncul
27.
password yang tidak notifikasi.
sesuai.
Guru login dengan
username kosong/tidak Guru gagal login, muncul
28.
di isi dan password notifikasi.
Guru keluar dari aplikasi
Guru berhasil keluar, dan
29. dengan memilih menu
kembali ke menu login.
logout.
Guru memilih logo
dashboard
halaman.
Guru mengedit profil
dengan memilih menu
Data edit profil tersimpan
31. edit profil, mengisi form
di database.
NIP, nama lengkap,
tempat lahir, tanggal
60
lahir, jenis kelamin,

agama, nomor telepon,
email, alamat, foto,
website, username, dan
password. Kemudian
Guru memilih logo
dashboard
halaman.
Guru memilih menu
manajemen kelas untuk
melihat kelas yang di
halaman.
ajar.
Guru tambah kelas
dengan memilih tombol Data kelas tersimpan di
tambah kelas. Memilih database. Dan muncul
32. kelas yang di ajar, dan pada tabel kelas di
mengisi keterangan halaman manajemen
kelas, Memilih tombol kelas.
simpan.
Guru edit dan hapus data tersedia muncul di
kelas dengan memilih halaman. Data pada
33.
tombol edit dan hapus halaman manajemen kelas
pada tabel opsi. beserta data di database
berubah.
Guru memilih menu
manajemen mata
pelajaran untuk melihat
halaman.
pelajaran yang di ajar.
Guru tambah mata
pelajaran dengan
memilih tombol tambah
mata pelajaran. Memilih
35. pada tabel kelas di
pelajaran yang di ajar,
halaman manajemen mata
kelas yang diajar dan
pelajaran.
semester. Memilih
tombol simpan.
Guru edit dan hapus data tersedia muncul di
mata pelajaran dengan halaman. Data pada
36.
memilih tombol edit dan halaman manajemen mata
hapus pada tabel opsi. pelajaran beserta data di
database berubah.
61
Guru memilih menu

indikator untuk melihat
indikator yang tiap
halaman.
pelajaran.
Guru tambah indikator
dengan memilih menu
tambah indikator,
38. memilih mata pelajaran
pada tabel indikator di
yang di ajar, dan mengisi
halaman indikator.
indikator. Memilih
tombol simpan.
Guru edit dan hapus data
tersedia muncul di
indikator dengan
memilih tombol edit dan
hapus pada tabel opsi.
Guru memilih menu
manajemen soal untuk
melihat soal yang sudah
halaman.
dibuat.
Guru tambah jenis soal
dengan memilih menu
tambah jenis soal.
Mengisi form judul,
memilih kelas, mata Data kelas tersimpan di
pelajaran, tanggal database. Dan muncul
41.
pembuatan, waktu pada tabel soal di halaman
mengerjakan, informasi manajemen soal.
jenis soal, dan
menentukan status
aktif/tidak aktif soal.
Memilih tombol simpan.
Guru edit dan hapus jenis tersedia muncul di
soal dengan memilih halaman. Data pada
42.
tombol edit dan hapus halaman manjemen soal
pada tabel opsi. beserta data di database
berubah.
Guru tambah soal dengan
memilih menu buat soal.
Memilih menu pilihan
43. ganda. Mengisi form
database.
pertanyaan, gambar,
memilih indikator,
mengisi pilihan A,
62
pilihan B, pilihan C,
pilihan D, pilihan E,
pembahasan, dan kunci
jawaban. Memilih
tombol simpan. Dan
melanjutkan ke soal
berikutnya.
Guru melihat daftar soal
dengan memilih menu
daftar soal. Memilih
halaman.
menu pilihan ganda.
Guru edit dan hapus soal tersedia muncul di
yang terdaftar dengan halaman. Data pada
45.
memilih tombol edit dan halaman manjemen soal
hapus. beserta data di database
berubah.
Guru melihat peserta
yang mengerjakan soal
halaman.
peserta.
Guru memilih menu Berita dan konten yang
47. materi untuk melihat tersedia muncul di
materi yang di tambah. halaman.
Guru tambah materi
pelajaran dengan
memilih tombol tambah
materi. Mengisi form
48. judul, memilih pelajaran
pada tabel materi di
yang di ajar, kelas yang
halaman materi.
diajar dan mengunggah
file materi. Memilih
tombol simpan.
Guru hapus materi tersedia muncul di
49. dengan memilih tombol halaman. Data pada
hapus pada tabel opsi. halaman materi beserta
Guru tambah berita
Data mata pelajaran
dengan memilih menu
51. tersimpan di database dan
tambah berita. Mengisi
muncul pada tabel berita.
form judul, isi, dan
63
memilih status terbit

tombol submit.
Guru edit data berita tersedia muncul di
dengan memilih icon edit halaman. Data pada
52.
dan hapus pada tabel halaman mata pelajaran
opsi. beserta data di database
berubah.
Siswa
Siswa melakukan
registrasi dengan
tersedia muncul di
53. memilih tombol daftar
halaman. Data siswa
dan mengisi form
tersimpan di database.
registrasi.
Siswa melakukan login
Siswa berhasil login, dan
54. dengan username dan
masuk menu utama.
password.
Siswa melakukan login
dengan username dan Siswa gagal login, muncul
55.
password yang tidak notifikasi.
sesuai.
Siswa login dengan
username kosong/tidak Siswa gagal login, muncul
56.
di isi dan password notifikasi.
Siswa memilih logo
beranda.
halaman.
Siswa memilih menu
tugas dan menampilkan Berita dan konten yang
58. data tugas setiap mata tersedia muncul di
pelajaran yang diikuti halaman.
siswa.
Siswa memilih tombol
lihat soal. Siswa memilih Berita dan konten yang
59. jenis soal yang belum tersedia muncul di
dikerjakan lalu halaman.
mengerjakan latihan soal.
Siswa selesai tersedia muncul di
60.
mengerjakan latihan soal. halaman. Data tersimpan
di database.
64
Siswa memilih menu

nilai dan melihat nilai
dari latihan soal yang
halaman.
dikerjakan.
Siswa memilih menu
materi dan menampilkan Berita dan konten yang
62. data materi setiap mata tersedia muncul di
pelajaran yang diikuti halaman.
siswa.
Siswa memilih tombol
lihat materi pada opsi Berita dan konten yang
mata pelajaran. Siswa tersedia muncul di
63.
menunduh materi yang halaman. Data tersimpan
terdapat pada mata di database.
pelajaran.
Siswa memilih menu Berita dan konten yang
data berita. halaman.
Siswa keluar dari aplikasi
Siswa berhasil keluar, dan
65. dengan memilih menu
kembali ke menu login.
logout.
3.7 Instrumen Penelitian
3.7.1 Uji Kelayakan Sistem Kepada Ahli/Pakar Media
Proses uji kelayakan sistem ini ditujukan kepada seorang ahli media.
Peniliti menjelaskan penggunaan fungsi-fungsi yang ada pada halaman Admin
dan guru, kemudian ahli mengisi instrumen yang telah diberikan. Data yang
diperoleh dari kuisioner berupa rentan nilai 1 - 5, ahli media bisa memberikan
komentar untuk diperbaiki. Instrumen yang telah diisi kemudian ditandatangani
oleh ahli. Penilaian dan komentar dari ahli digunakan sebagai bahan untuk
perbaikan sistem. Berikut tabel 3.16 kisi-kisi instrumen uji kelayakan kepada ahli
media.
65
Tabel 3.16 Kisi-Kisi Instrumen Uji Kelayakan Kepada Ahli Media.
Butir Kuisioner
No. Indikator Uji Pada Uji Pada Jumlah
Monitor Smartphone
Tampilan
1 11 2
a. Layout
1. 2 12 2
b. Kombinasi Warna
3 13 2
c. Jenis Huruf
Informasi/konten
a. Unsur-unsur informasi 4 14 2
2.
pada halaman home
b. Bahasa 5 15 2
Fungsi Navigasi
a. Struktur navigasi 6, 7 16, 17 4
3.
b. Elemen 8 18 2
c. Sidebar/PullDown 9 19 2
Keamanan
4.
a. Hak ases pengguna 10 20 2
Jumlah Butir 20
3.7.2 Uji Kelayakan Sistem Kepada Guru Sebagai Admin
Proses uji kelayakan sistem ini ditujukan kepada seorang guru (tim ICT
SMK Negeri 48 Jakarta) yang berperan sebagai Admin. Peniliti menjelaskan
penggunaan fungsi-fungsi yang ada pada halaman Admin, kemudian guru tersebut
mengisi instrumen yang telah diberikan. Data yang diperoleh dari kuisioner
berupa rentan nilai 1 - 5, guru bisa memberikan komentar untuk diperbaiki.
Instrumen yang telah diisi kemudian ditandatangani oleh guru. Penilaian dan
komentar dari guru digunakan sebagai bahan untuk perbaikan sistem. Berikut
tabel 3.17 kisi-kisi instrumen uji kelayakan kepada guru sebagai admin.
66
Tabel 3.17 Kisi-Kisi Instrumen Uji Kelayakan Kepada Guru Sebagai Admin.
Butir Kuisioner
Monitor Smartphone
Informasi/konten
a. Informasi pada halaman 1 8 2
1.
home
b. Bahasa 2 9 2
Fungsi Navigasi
2.
b. Elemen 5 12 2
Keamanan
3.
Jumlah Butir 14
3.7.3 Uji Kelayakan Sistem Kepada Guru
Proses uji kelayakan sistem ini ditujukan kepada guru mata pelajaran
Sistem Operasi yang berperan sebagai guru. Peniliti menjelaskan penggunaan
fungsi-fungsi yang ada pada halaman Guru, kemudian guru tersebut mengisi
instrumen yang telah diberikan. Data yang diperoleh dari kuisioner berupa rentan
nilai 1 - 5, guru bisa memberikan komentar untuk diperbaiki. Instrumen yang
telah diisi kemudian ditandatangani oleh guru. Penilaian dan komentar dari guru
digunakan sebagai bahan untuk perbaikan sistem. Berikut tabel 3.18 kisi-kisi
instrumen uji kelayakan kepada guru.

67
Tabel 3.18 Kisi-Kisi Instrumen Uji Kelayakan Kepada Guru.
Butir Kuisioner
Monitor Smartphone
Informasi/konten
a. Informasi pada halaman 1 8 2
1.
home
b. Bahasa 2 9 2
Fungsi Navigasi
2.
b. Elemen 5 12 2
Keamanan
3.
Jumlah Butir 14
3.7.4 Uji Kelayakan Sistem Kepada Siswa
Proses uji kelayakan sistem ini ditujukan kepada beberapa siswa
peminatan Multimedia yang mengikuti mata pelajaran Sistem Operasi yang
berperan sebagai siswa. Peniliti menjelaskan penggunaan fungsi-fungsi yang ada
pada halaman Siswa, kemudian siswa tersebut mengisi instrumen yang telah
diberikan. Data yang diperoleh dari kuisioner berupa rentan nilai 1 - 5, siswa bisa
memberikan komentar untuk diperbaiki. Instrumen yang telah diisi kemudian
ditandatangani oleh siswa. Penilaian dan komentar dari siswa digunakan sebagai
bahan untuk perbaikan sistem. Berikut tabel 3.19 kisi-kisi instrumen uji kelayakan
kepada siswa.
68
Tabel 3.19 Kisi-Kisi Instrumen Uji Kelayakan Kepada Siswa.
Butir Kuisioner
Monitor Smartphone
Informasi/konten
a. Informasi pada 1 8 2
1.
halaman home
b. Bahasa 2 9 2
Fungsi Navigasi
2.
b. Elemen 5 12 2
c. Menubar/PullDown 6 13 2
Keamanan
3.
Jumlah Butir 14
3.8 Teknik Analisis Data
Teknik analisis data dari hasil kuisoner adalah dengan menggunakan
penilaian kecenderungan memusat, karena cara yang paling tepat untuk
merangkum data adalah dengan mencari satu indeks yang dapat mewakili seluruh
himpunan ukuran.39 Dalam statistika ada tiga indeks yang dapat dipakai. Indeks
tersebut adalah kecenderungan memusat atau mean, modus, dan median. Masing-
masing dari ketiga ukuran ini dapat berfungsi sebagai indeks yang mewakili
kelompok secara keseluruhan.
Skala yang digunakan oleh penulis adalah skala Likert. Skala Likert
digunakan untuk mengukur sikap, pendapat, dan persepsi sesorang atau kelompok
tentang fenomena sosial atau yang biasa disebut variabel penelitian. 40 Dalam
39
Arief Furchan, Pengantar Penilaian Dalam Pendidikan, (Surabaya: Usana Offset Printing, 1982),
Hal. 153
40
Sugiyono, Metode Penelitian Kuantitatif Dan R&D, (Bandung: Alfabeta, 2008), Hal, 134
69
instrumen yang dibuat, penulis menyatakan pernyataan sikap dengan rentan nilai
dari 1 sampai dengan 5, yaitu:
5= Sangat Baik/Sangat Bagus (SB)
4= Baik/Bagus (B)
3= Cukup Baik/Cukup Bagus (CB)
2= Kurang Baik/ Kurang Bagus (KB)
1= Tidak Baik/Tidak Bagus (TB)
Data yang telah diperoleh dari instrumen penelitian kemudian
diinterpretasikan dalam bentuk kuantitatif dengan menggunakan perhitungan :
𝐽𝑢𝑚𝑙𝑎ℎ 𝑠𝑘𝑜𝑟 𝑡𝑜𝑡𝑎𝑙 𝑗𝑎𝑤𝑎𝑏𝑎𝑛 𝑑𝑎𝑟𝑖 𝑟𝑒𝑠𝑝𝑜𝑛𝑑𝑒𝑛

%= 𝑥 100%
𝐽𝑢𝑚𝑙𝑎ℎ 𝑠𝑘𝑜𝑟 𝑡𝑜𝑡𝑎𝑙 𝑚𝑎𝑘𝑠𝑖𝑚𝑢𝑚 𝑡𝑖𝑎𝑝 𝑗𝑎𝑤𝑎𝑏𝑎𝑛
Untuk menarik kesimpulan data dari hasil analisis data atau untuk
mengetahui kualitas produk yang telah dibuat, skor dapat diinterpretasikan
menjadi keterangan nilai yang dapat dikelompokkan seperti pada Tabel 3.20.
Tabel 3.20 Pengelompokkan Kategori Kualitas Berdasarkan Skor41
Skor (%) Kualitas

86 – 100 Sangat Baik
71 – 85 Baik
56 – 70 Cukup Baik
41 – 55 Kurang Baik
20 - 40 Tidak Baik
Kemudian untuk seluruh saran perbaikan akan dianalisis secara deskriptif
sebagai bahan masukan atau perbaikan bagi pengembangan produk.
41
Djaali dan Pudji Mulyono, Pengukuran Dalam Bidang Pendidikan, (Jakarta: Grasindo, 2008),
Hal. 171
70
70
BAB IV
HASIL PENELITIAN DAN PEMBAHASAN
4.1 Hasil Pengujian Terhadap Penerapan Konsep Responsive Web Design
pada Situs Soal Pilihan Ganda SMK Negeri 48
Setelah menyelesaikan semua urutan pengembangan situs soal pilihan
ganda, maka perlu dilakukan pengujian. Pengujian dilakukan untuk mengetahui
apakah situs soal pilihan ganda yang telah dirancang sudah layak untuk digunakan
oleh pengguna. Apabila pada saat pengujian terjadi kesalahan atau error dan
kekurangan, maka situs soal pilihan ganda belum layak digunakan, sehingga perlu
dilakukan perbaikan. Setelah semua proses perbaikan selesai dilakukan maka situs
sudah layak digunakan di sekolah.
4.1.1 Hasil Perancangan Sistem
Dalam diagram level 0 menerangkan bahwa situs soal pilihan ganda dapat
diakses oleh admin, guru, dan siswa. Diagram ini sama sekali tidak memuat
penyimpanan data dan tampak sederhana untuk diciptakan. Diagram ini adalah
dekomposisi dari diagram konteks. Pada diagram nol, terdapat tiga entitas yaitu
Admin, Guru, dan Siswa. Terdapat tiga arus data yang saling berhubungan yaitu
data admin, data guru, dan data siswa. Diagram level 0 digambarkan secara
lengkap pada Gambar 4.1 di bawah ini.
70
71
Gambar 4.1 Diagram Level 0
Pada diagram level 1 menunjukkan penggambaran tentang proses login,
input data kelas, dan input data mata pelajaran yang diolah oleh Admin. Input data
soal dan input paket soal diolah oleh guru. Menjawab soal diolah oleh Siswa.
Diagram level 1 digambarkan secara lengkap pada Gambar 4.2 di bawah ini.
72
Gambar 4.2 Diagram Level 1
Dalam diagram ini menunjukkan penggambaran tentang proses login yang
lebih detail, yaitu pada saat pengguna memasukkan username dan password,
maka di dalam sistem login ada proses verifikasi username dan password sebagai
balikan bagi pengguna. Jika username dan password yang dimasukkan benar,
maka pengguna dapat meneruskan proses pada menu awal sistem, jika salah
pengguna mendapat notifkasi dari sistem sesuai dengan kesalahan data yang
dimasukkan. Diagram level 2 proses 1 digambarkan secara lengkap pada Gambar
4.3 di bawah ini.

73
Gambar 4.3 Diagram Level 2 Proses 1
Dalam diagram ini menunjukkan penggambaran tentang proses data
sekolah yang lebih detail, yaitu pada saat admin memasukkan data kelas dan
matapelajaran. Proses input data kelas user input nama kelas, dan kode kelas.
Proses hapus data kelas user hapus berdasarkan nama kelas. Proses ubah data
kelas user ubah nama kelas, kode kelas, wali kelas, dan ketua kelas. Pada proses
input data mata pelajaran user input nama mata pelajaran dan kode mata
pelajaran. Proses hapus data mata pelajaran user hapus berdasarkan nama
matapelajaran. Proses ubah data mata pelajaran user ubah nama mata pelajaran
dan kode mata pelajaran. Proses tersebut diolah oleh sistem lalu disimpan di
74
dalam database yang telah tersedia. Diagram level 2 proses 2 digambarkan secara
Dalam diagram ini menunjukkan penggambaran tentang proses data paket
soal yang lebih detail, yaitu pada saat guru memasukkan data paket soal. Proses
input data paket soal user input nama paket soal, tanggal pembuatan soal, mata
pelajaran, waktu mengerjakan, dan status pengerjaan. Proses hapus data paket soal
user hapus berdasarkan nama paket soal. Proses ubah data paket soal user ubah
nama paket soal, tanggal pembuatan soal, mata pelajaran, waktu mengerjakan, dan
status pengerjaan. Proses tersebut diolah oleh sistem lalu disimpan di dalam
database yang telah tersedia. Diagram level 2 proses 3 digambarkan secara

75
Dalam diagram ini menunjukkan penggambaran tentang proses data soal
yang lebih detail, yaitu pada saat guru memasukkan data soal yang terdaftar pada
paket soal. Ketika guru selesai membuat paket soal, terdapat pilihan untuk melihat
daftar soal yang dibuat pada paket soal. Apabila didalam paket soal tersebut
belum ada data soal, maka dapat dilanjutkan dengan melakukan proses input data
soal. Proses input data soal user input soal, indikator, pembahasan, pilihan
jawaban, dan kunci jawaban. Proses data soal kelas user hapus berdasarkan nomor
soal. Proses ubah data soal user ubah soal, indikator, pembahasan, pilihan
76
jawaban, dan kunci jawaban. Proses tersebut diolah oleh sistem lalu disimpan di
dalam database yang telah tersedia. Diagram level 2 proses 4 digambarkan secara

77
4.1.2 Hasil Penelitian Sistem
4.1.2.1 Halaman Admin
Hasil layout dan struktur halaman Admin adalah sebagai berikut :
Gambar 4.7 Hasil Penelitian Pengembangan Sistem Halaman Admin
Berdasarkan Gambar 4.7 struktur tampilan website terdiri dari :
1. Halaman Dashboard, dimana halaman awal admin setelah login.
2. Halaman Manajemen Guru, dimana admin melihat daftar guru,
menambah, mengubah, menghapus, dan melihat profil dari guru yang
sudah terdaftar.
3. Halaman Manajemen Siswa, dimana admin melihat daftar siswa,
menon-aktifkan, menghapus, dan melihat profil siswa yang sudah
terdaftar.
4. Halaman Registrasi Siswa, dimana admin melihat daftar siswa yang
telah mendaftar, mengaktifkan, menghapus, dan melihat profil siswa
yang telah mendaftar.

78
5. Halaman Mata Pelajaran, dimana admin melihat daftar mata pelajaran,
mengubah, dan menghapus mata pelajaran.
6. Halaman Manajemen Kelas, dimana admin melihat daftar kelas,
menambah kelas, mengubah, dan menghapus kelas.
7. Halaman Berita, dimana admin melihat daftar berita, menambah,
mengubah, dan menghapus berita.
4.1.2.2 Halaman Guru
Hasil layout dan struktur halaman Guru adalah sebagai berikut :
Gambar 4.8 Hasil Penelitian Pengembangan Sistem Halaman Guru
1. Halaman Dashboard, dimana halaman awal guru setelah login. Berisi
profil guru tersebut.
2. Halaman Manajemen Kelas, dimana guru melihat daftar kelas yang di
ajar, menambah kelas ajar, mengubah, menghapus kelas, dan melihat
siswa yang terdaftar pada kelas.

79
3. Halaman Tambah Mata Pelajaran, dimana guru melihat daftar mata
pelajaran yang di ajar, menambah mata pelajaran yang di ajar,
mengubah, dan menghapus mata pelajaran.
4. Halaman Tambah Indikator, dimana guru melihat daftar indikator yang
terdaftar tiap mata pelajaran, menambah indikator, mengubah, dan
menghapus indikator.
5. Halaman Manajemen Soal, dimana guru melihat daftar paket soal,
menambah paket soal, mengubah, menghapus paket soal, membuat
butir soal, melihat daftar soal, dan melihat daftar peserta yang telah
mengerjakan paket soal.
6. Halaman Materi, dimana guru melihat daftar materi, menambah,
mengubah, dan menghapus materi.
7. Halaman Berita, dimana guru melihat daftar berita, menambah,
mengubah, dan menghapus berita.

80
4.1.2.3 Halaman Siswa
Hasil layout dan struktur halaman Siswa adalah sebagai berikut :
Gambar 4.9 Hasil Penelitian Pengembangan Sistem Halaman Siswa
1. Halaman Beranda, dimana halaman awal guru setelah login.
2. Halaman Tugas/Quiz, dimana siswa melihat daftar pelajaran yang
diikuti, mengikuti quiz, dan mengerjakan soal.
3. Halaman Nilai, dimana siswa melihat daftar nilai ujian yang telah
diikuti, dan detail soal berisi pembahasan dan jawaban dari tiap soal.
4. Halaman Materi, dimana siswa melihat daftar materi sesuai mata
pelajaran, dan mengunduh materi yang tersedia.
5. Halaman Berita, dimana siswa melihat daftar berita yang ditambahkan.

81
4.1.3 Hasil Pengujian Kebutuhan Fungsional Dengan Metode Black Box
Berbasis Skenario
Pengujian dengan metode black box berbasis skenario dilakukan dengan
menguji halaman untuk admin, halaman untuk guru dan halaman untuk siswa.
Pengujian dengan metode black box berbasis skenario dilakukan oleh peneliti.
Ada 65 skenario proses kebutuhan fungsional yang diuji mencakup dari segi
konten, admin, guru, dan siswa. Hasil pengujian dapat dilihat pada Lampiran 7.
4.1.4 Hasil Penyebaran Kuesioner
Penulis melakukan pengujian dengan metode kuesioner untuk menguji
layak atau tidak situs soal pilhan ganda yang telah penulis buat. Kuesioner
diberikan kepada dosen sebagai ahli media, satu orang admin, dua orang guru
program studi Multimedia, dan perwakilan siswa dari kelas X Multimedia SMK
Negeri 48 Jakarta.
4.1.4.1 Pengujian Oleh Ahli Media
Pengujian situs soal pilhan ganda dalam hal tampilan, informasi/konten,
sistem navigasi, dan keamanan dari situs yang dilakukan oleh dosen bernama Med
Irzal, M.Kom., dan Bambang P. Adhi, M.Kom., sebagai ahli media. Pengujian ini
ditujukan dengan tujuan untuk mengetahui apakah situs ini sudah tepat atau harus
diperbaiki. Terdapat 20 butir instrumen yang telah diuji dan dihasilkan bahwa
tidak mengalami perbaikan dan situs sudah berfungsi dengan baik seperti
ditujukan pada lampiran 10. Hasil rekapitulasi pengujian pada monitor oleh dosen
ahli dapat dilihat pada tabel 4.1.

82
Tabel 4.1 Hasil Pengujian Pada Monitor Oleh Ahli Media
Aspek Skor
Aspek Tampilan 100%
Aspek Informasi/Konten 95%
Aspek Navigasi 97,5%
Aspek Keamanan 100%
Pengujian Pada Monitor Oleh Ahli Media

100 97.5 100
100 95
80
60
40
20
0
Aspek Tampilan Aspek Informasi Aspek Navigasi Aspek Keamanan
Persentase Penilaian
Gambar 4.10 Diagram Pengujian Pada Monitor Oleh Ahli Media
Berdasarkan Tabel 4.1 aspek tampilan mendapatkan skor 100% sehingga
dapat dikategorikan “sangat baik”. Hal ini menunjukan bahwa tampilan media ini
sudah sangat baik.
Aspek informasi/konten mendapatkan skor 95% sehingga dapat
dikategorikan “sangat baik”. Hal ini menunjukan bahwa informasi/konten yang
tersedia pada situs ini sudah sangat baik.
Aspek navigasi mendapatkan skor 97,5% sehingga dapat dikategorikan
“sangat baik”. Hal ini menunjukan bahwa navigasi antar halaman dan menu-menu
yang tersedia pada situs ini sudah sangat baik.

83
Aspek keamanan mendapatkan skor 100% sehingga dapat dikategorikan
“sangat baik”. Hal ini menunjukan bahwa keamanan sistem untuk user yang
tersedia pada situs ini sudah sangat baik. Pada tabel 4.2 merupakan hasil
rekapitulasi pengujian pada Smartphone oleh dosen ahli.
Tabel 4.2 Hasil Pengujian Pada Smartphone Oleh Ahli Media
Aspek Skor
Aspek Tampilan 100%
Aspek Keamanan 100%
Pengujian Pada Smartphone Oleh Ahli Media

100 97.5 100
100 95
80
60
40
20
0
Gambar 4.11 Diagram Pengujian Pada Smartphone Oleh Ahli Media
Berdasarkan Tabel 4.2 aspek tampilan mendapatkan skor 100% sehingga
dapat dikategorikan “sangat baik”. Hal ini menunjukan bahwa tampilan media dan
fitur responsive design pada media ini sudah sangat baik.

84
Aspek informasi/konten mendapatkan skor 95% sehingga dapat
dikategorikan “sangat baik”. Hal ini menunjukan bahwa informasi/konten yang
4.1.4.2 Pengujian Oleh Admin
Pengujian halaman admin dilakukan oleh seorang guru (tim ICT SMK
Negeri 48 Jakarta) program studi Multimedia. Pengujian ini ditujukan dengan
tujuan untuk mengetahui apakah situs ini sudah tepat atau harus diperbaiki.
Pengujian ini dilakukan dengan mengisi kuesioner seperti pada lampiran 11.
Terdapat 14 butir instrumen yang telah diuji dan dihasilkan bahwa tidak
mengalami perbaikan di halaman user admin. Hasil rekapitulasi pengujian pada
monitor oleh admin dapat dilihat pada tabel 4.3.
Tabel 4.3 Hasil Pengujian Pada Monitor Oleh Admin
Aspek Skor
Aspek Navigasi 95%
Aspek Keamanan 100%
85
Pengujian Pada Monitor Oleh Admin

100 100
100 95
80
60
40
20
0
Aspek Informasi Aspek Navigasi Aspek Keamanan
Gambar 4.12 Diagram Pengujian Pada Monitor Oleh Admin
Berdasarkan Tabel 4.3 aspek informasi/konten mendapatkan skor 100%
sehingga dapat dikategorikan “sangat baik”. Hal ini menunjukan bahwa
informasi/konten yang tersedia pada situs ini sudah sangat baik.
Aspek navigasi mendapatkan skor 95% sehingga dapat dikategorikan
rekapitulasi pengujian pada Smartphone oleh admin.
Tabel 4.4 Hasil Pengujian Pada Smartphone Oleh Admin
Aspek Skor
Aspek Navigasi 85%
Aspek Keamanan 80%
86
Pengujian Pada Smartphone Oleh Admin

100
100
85
80
80
60
40
20
0
Gambar 4.13 Diagram Pengujian Pada Smartphone Oleh Admin
“baik”. Hal ini menunjukan bahwa navigasi antar halaman dan menu-menu yang
tersedia pada situs ini sudah disajikan dengan baik.
“baik”. Hal ini menunjukan bahwa keamanan sistem untuk user yang tersedia
pada situs ini sudah disajikan dengan baik.
4.1.4.3 Pengujian Oleh Guru
Pengujian halaman guru dilakukan oleh dua orang guru program studi
Multimedia. Pengujian ini ditujukan dengan tujuan untuk mengetahui apakah situs
ini sudah tepat atau harus diperbaiki. Pengujian ini dilakukan dengan mengisi
kuesioner seperti pada lampiran 12. Terdapat 14 butir instrumen yang telah diuji
87
dan dihasilkan bahwa tidak mengalami perbaikan di halaman user guru. Hasil
rekapitulasi pengujian pada monitor oleh guru dapat dilihat pada tabel 4.5. :
Tabel 4.5 Hasil Pengujian Pada Monitor Oleh Guru
Aspek Skor
Aspek Keamanan 90%
Pengujian Pada Monitor Oleh Guru

100 90 90
87.5
80
60
40
20
0
Gambar 4.14 Diagram Pengujian Pada Monitor Oleh Guru
88
rekapitulasi pengujian pada Smartphone oleh admin.
Tabel 4.6 Hasil Pengujian Pada Smartphone Oleh Guru
Aspek Skor
Aspek Keamanan 80%
Pengujian Pada Smartphone Oleh Guru

100 90
82.5 80
80
60
40
20
0
Gambar 4.15 Diagram Pengujian Pada Smartphone Oleh Guru

89
4.1.4.4 Pengujian Oleh Siswa
Pengujian halaman siswa dilakukan oleh 15 orang siswa program studi
Multimedia. Pengujian ini ditujukan dengan tujuan untuk mengetahui apakah situs
ini sudah tepat atau harus diperbaiki. Pengujian ini dilakukan dengan mengisi
kuesioner seperti pada lampiran 13. Terdapat 14 butir instrumen yang telah diuji
dan dihasilkan bahwa tidak mengalami perbaikan di halaman user siswa. Hasil
rekapitulasi pengujian pada monitor oleh guru dapat dilihat pada tabel 4.7.
Tabel 4.7 Hasil Pengujian Pada Monitor Oleh Siswa
Aspek Skor
Aspek Informasi/Konten 80,7%
Aspek Navigasi 80%
Aspek Keamanan 82,7%
Pengujian Pada Monitor Oleh Siswa

100
80.7 80 82.7
80
60
40
20
0
Gambar 4.16 Diagram Pengujian Pada Monitor Oleh Siswa

90
sehingga dapat dikategorikan “baik”. Hal ini menunjukan bahwa informasi/konten
yang tersedia pada situs ini sudah disajikan dengan baik.
Aspek keamanan mendapatkan skor 82,7% sehingga dapat dikategorikan
pada situs ini sudah disajikan dengan baik. Pada tabel 4.8 merupakan hasil
rekapitulasi pengujian pada Smartphone oleh siswa.
Tabel 4.8 Hasil Pengujian Pada Smartphone Oleh Siswa
Aspek Skor
Aspek Keamanan 84%
Pengujian Pada Smartphone Oleh Siswa

100
82 80.7 84
80
60
40
20
0
Gambar 4.17 Diagram Pengujian Pada Smartphone Oleh Siswa

91
sehingga dapat dikategorikan “baik”. Hal ini menunjukan bahwa informasi/konten
yang tersedia pada situs ini sudah disajikan dengan baik.
4.2. Pembahasan
4.2.1. Pembahasan Hasil Pengujian Dengan Metode Black Box Berbasis
Skenario
Berdasarkan hasil pengujian dengan metode Black Box berbasis skenario,
semua pengujian telah berjalan dengan baik dan sesuai dengan harapan khususnya
dari fungsionalitas sistem dan tampilan, maka situs soal pilihan ganda sudah layak
untuk digunakan di SMK Negeri 48 Jakarta. Hasil tampilan halaman pada situs
soal pilihan ganda dapat dilihat pada lampiran 8 untuk tampilan monitor dan pada
lampiran 9 untuk tampilan Smartphone.
4.2.2. Pembahasan Hasil Pengujian Dengan Metode Kuesioner
Pada situs soal pilihan ganda terdapat tiga pengguna, yaitu: (1) admin, (2)
guru, dan (3) siswa. Berdasarkan hasil pengujian situs soal pilihan ganda dengan
92
metode kuesioner, dapat dirangkum pada Tabel 4.9 dan Tabel 4.10 sebagai
berikut.
Tabel 4.9 Rangkuman Hasil Pengujian Keseluruhan Pada Monitor
Penguji / Penilai (%)

Aspek Kecend
No.
Penilaian A.Media Guru Admin Siswa erungan
1. Tampilan 100 - - SB
2. Konten 95 90 100 80,7 SB
Fungsi
3. 97,5 87,5 95 80 SB
Navigasi
4. Keamanan 100 90 100 82,7 SB
Tabel 4.10 Rangkuman Hasil Pengujian Keseluruhan Pada Smartphone

Penguji / Penilai (%)
Aspek Kecend
No.
Penilaian A.Media Guru Admin Siswa erungan
1. Tampilan 100 - - - SB
2. Konten 95 90 100 82 SB
Fungsi
3. 97,5 82,5 85 80,7 SB
Navigasi
4. Keamanan 100 80 80 84 SB
93
Pengujian Keseluruhan Pada Monitor

100 100 97.5 100 100
100 95 95
90 87.5 90
80.7 80 82.7
80
60
40
20
0
Penilaian Ahli Media Penilaian Guru Penilaian Admin Penilaian Siswa
Gambar 4.18 Diagram Pengujian Keseluruhan Pada Monitor
Pengujian Keseluruhan Pada Smartphone

100 100 97.5 100
100 95
90
82 82.5 85 80.7 80 80
84
80
60
40
20
0
Penilaian Ahli Media Penilaian Guru Penilaian Admin Penilaian Siswa
Gambar 4.19 Diagram Pengujian Keseluruhan Pada Smartphone

94
Keterangan kecenderungan :
1. Sangat Baik/Sangat Bagus (SB)
2. Baik/Bagus (B)
3. Cukup Baik/Cukup Bagus (CB)
4. Kurang Baik/ Kurang Bagus (KB)
5. Tidak Baik/Tidak Bagus (TB)
Pada Tabel 4.9 dan Tabel 4.10 menunjukkan bahwa kecenderungan nilai
adalah sangat baik. Hal ini ditunjukkan dari rata-rata nilai tiap aspek dengan
perhitungan diatas 85%. Dari hasil penilaian oleh ahli media, tampilan situs sudah
berfungsi dan merespon dengan sangat baik, sesuai dengan device yang
digunakan, menggunakan konsep Responsive Web Design. Dari hasil penelitian
terhadap pengguna yaitu admin, guru, dan siswa, situs telah memberikan
kemudahan dalam proses memasukan dan mengerjakan soal. Hal ini terlihat dari
aspek konten, fungsi navigasi, dan keamanan. Pada tahap pengujian dengan
metode kuesioner terdapat beberapa komentar agar situs soal pilihan ganda dapat
dikembangkan menjadi lebih baik. Berdasarkan hasil pengujian dengan metode
kuesioner, situs soal pilihan ganda layak untuk digunakan di SMK Negeri 48
Jakarta.
95
70
BAB V
KESIMPULAN DAN SARAN
5.1 Kesimpulan
Dari penelitian yang telah dilakukan, dapat disimpulkan bahwa :
1. Pengembangan situs soal pilihan ganda menggunakan fitur Responsive
Web Design dengan framework CSS Bootstrap memudahkan guru dalam
membuat soal-soal pilihan ganda. Fitur tersebut memudahkan guru
membuat soal menggunakan berbagai macam device, seperti komputer dan
smartphone, dimana saja dan kapan saja. Juga memberikan kenyamanan
karena mudah digunakan. Siswa juga terbantu dengan adanya fitur tersebut
karena soal-soal mudah dikerjakan menggunakan berbagai macam device,
seperti komputer dan smartphone.
2. Dengan memanfaatkan aplikasi soal pilihan ganda berbasis web, dapat
menghasilkan kumpulan soal pilihan ganda dalam waktu yang relatif
cepat, sehingga memudahkan guru dan siswa dalam mempersiapkan Ujian
Nasional CBT nantinya.
5.2 Saran
Dalam pembuatan situs soal pilihan ganda masih banyak kekurangan yang
perlu diperbaiki. Ada beberapa bagian dari aplikasi website yang perlu dilakukan
penyempurnaan agar aplikasi website ini dapat digunakan dengan baik, yaitu:
95
96
1. Untuk saat ini, proses pembuatan soal belum berbentuk butir-butir soal.
Alangkah baiknya jika kedepan kumpulan soal sudah disertai dengan
koleksi butir-butir soal. Sehingga soal yang sudah dibuat, tidak perlu
dibuat kembali.
2. Salah satu fungsi aplikasi website ini adalah untuk membantu guru dalam
membuat soal yang berkualitas, alangkah baiknya jika kedepannya disertai
dengan analisis kualitas soal.

97
70
DAFTAR PUSTAKA
Abdul Kadir. 2001. Dasar Pemrograman Web Dinamis Menggunakan PHP.

Yogyakarta: Andi.
Afrianto. 1999. Pedoman Penulisan HTML. Jakarta: PT. Elex Media Komputindo.
Agung Gregorius. 2000. Microsoft Front Page. Jakarta: PT. Elex Media
Komputindo.
Adhi Prasetio. 2015. Pintar Webmaster Untuk Pemula. Jakarta: MediaKita.
Anhar. 2010. Panduan Menguasai PHP & MySql Secara Otodidak. Jakarta:
Mediakita.
Arief Furchan. 1982. Pengantar Penilaian Dalam Pendidikan. Surabaya: Usana

Offset Printing.
Arikunto Suharsimi. 2007. Dasar–dasar Evaluasi Pendidikan. Yogyakarta:

Pustaka.
Balitbang DEPBIKNAS. 2007. Panduan Penulisan Soal Pilihan Ganda. Jakarta:

Pusat Penilaian Pendidikan.
Brooks. 2007. Guied to HTML, Javascript, and PHP. London: Springer 2007.
Deborah Stone. 2005. User Interface Design and Evaluation. San Francisco:
Morgan Kauffman Publishers.
Djaali dan Pudji Mulyono. 2008. Pengukuran Dalam Bidang Pendidikan. Jakarta:
Grasindo, 2008.
Dmitry Fadeyev. 2010. The Smashing Book: User Interface Design in Modern
Web Application. Lübeck: Smashing MediaGmbH.
Ethan Marcotte, 2010, Responsive Web Design, diakses dari

http://alistapart.com/article/responsive-web-design, [6 Desember 2015]
Fakultas Teknik. 2004. Pedoman Penulisan Tugas Akhir. Jakarta: Fakultas

Teknik, Universitas Negeri Jakarta
Henki Prihatna. 2005. Kiat Praktis Menjadi Web Master Profesional. Jakarta: PT.
Elex Media Komputindo.
97
98
Insap Santosa. 2004. Interaksi Manusia dan Komputer. Yogyakarta: Andi.
Kayla Right, 2011, Responsive Web Design: What It Is and How To Use It,
diakses dari http://www.smashingmagazine.com/2011/01/guidelines-for-
responsive-web-design/, [6 Desember 2015]
McFarland. 2008. Javascript & JQuery The Missing Manual. USA : Oreilly.
Quigley. 2006. Gargenta, PHP and MySQL by Example. Prentice Hall
Roger S. Pressman. 2010. Rekayasa Perangkat Lunak Edisi ke-7. Yogyakarta:

Andi.
Rossa A. S Shalahuddin. 2013. Rekayasa Perangkat Lunak Terstruktur dan

Berorientasi Objek. Bandung: Informatika.
Slamet Riyanto. 2014. Kupas Tuntas Web Responsif. Jakarta: PT. Elex Media
Komputindo.
Stendy B. Sakur. 2005. Aplikasi Web Database dengan Dreamweaver MX 2004.

Yogyakarta: Andi.
Stobart, Vassileiou. 2004. PHP and MySQL Manual. London: Springer

Professional Computing.
Sugiyono. 2008. Metode Penelitian Kuantitatif Dan R&D. Bandung: Alfabeta.
Surahman. 2013. Web Designer Cara Cepat Membuat Desain Template Website
Tanpa Coding. Jakarta: Media Kita.
Turban, Efraim. 2005. Decision Support Systems and Intelligent Systems 7th Ed.
New Jersey: Pearson Education.
Wahana Komputer, 2010. Panduan Belajar MySQL Database Server. Jakarta:

Mediakita.
Wibawa, B., et al. 2004. Pedoman Penulisan Skripsi, Pelaksanaan Ujian Skripsi,
Karya Inovatif Produktif Komprehensif, dan Tugas Akhir. Jakarta: Fakultas
Teknik Universitas Negeri Jakarta.
Yuhefiza, HA Mooduto, dan Rahmat Hidayat. 2009. Cara Mudah Membangun

Website Interaktif. Jakarta: Alex Media Komputerindo.
Yuhefizar. 2012. 10 Jam Menguasai Teknologi dan Aplikasinya. Jakarta: Alex

Media Komputerindo.
99
LAMPIRAN 01
100
Profil SMK Negeri 48
SMK Negeri 48 Jakarta Jakarta yang dikenal saat ini dalam prosesnya telah
merngalami beberapa kali pergantian nama sekolah.
1. Tahun 1979 – 1981 dengan nama SMEA Negeri 2 Kelas jauh dari Kelas
Jauhnya SMEA Negeri 2 Jakarta.
2. Tahun 1981 – 1982 menjadi SMEA Negeri 8 Kelas jauh.
3. Terhitung tanggal 6 Februari 1982 menjadi SMEA Negeri 30.
4. Berdasarkan keputusan Menteri Pendidikan dan Kebudayaan Republik
Indonesia No. 036/O/1997 tentang perubahan Nomenklatur SMKTA menjadi
SMK serta Organisasi dan Tata Kerja SMK. Dengan demikian SMEA Negeri
30 Jakarta berubah nama menjadi SMK Negeri 48 Jakarta Jakarta.
5. Tahun 1991 – 2004 SMK Negeri 48 Jakarta Jakarta dalam pelaksanaan KBM
menggunakan 2 (dua) gedung, yaitu gedung sebelah barat dan gedung sebelah
utara.
6. Tahun 2002 lokasi gedung SMK Negeri 48 Jakarta sebelah barat direhab
total. Sementara lokasi gedung SMK Negeri 48 Jakarta sebelah timur yang
sekarang di tempati adalah milik SD 03 Pagi Klender.

101
7. Pada Tahun 2004 SMK Negeri 48 Jakarta mengajukan usulan tukar guling
gedung SMK Negeri 48 Jakarta yang ada di sebelah utara dengan SD 03 Pagi
Klender yang satu lokasi dengan gedung SMK Negeri 48 Jakarta yang berada
di sebelah barat.
8. Sampai dengan sekarang SMK Negeri 48 Jakarta Jakarta menggunakan 2
(dua) gedung untuk kegiatan belajar mengajar, dimana gedung yang sebelah
barat sudah direhab total, sementara gedung yang di sebelah timur masing
menggunakan gedung lama seperti yang terlihat sekarang ini.
VISI SMK Negeri 48 Jakarta adalah “Menjadi SMK bertaraf internasional
untuk menghasilkan tamatan yang produktif, mandiri, kompetitif serta cerdas
secara spiritual, intelektual dan emosional”, dan MISI SMK Negeri 48 Jakarta
diantaranya:
1. Meningkatkan Kompetensi Siswa sesuai standar kompetensi pasar kerja nasional
dan internasional.
2. Menghasilkan tamatan yang memiliki jiwa wirausaha untuk hidup mandiri.
3. Meningkatkan standar Pendidik danTenaga Kependidikan yang memiliki
kualifikasi akademik, kompetensi, sertifikat pendidik, serta memiliki
kemampuan untuk mewujudkan tujuan pendidikan..
4. Meningkatkan sarana dan prasarana pendidikan untuk mendukung proses
pembelajaran tuntas.
5. Meningkatkan pelayanan prima untuk memenuhi kepuasan pelanggan
SMK Negeri 48 Jakarta memiliki lima program studi keahlian dengan
kompetensi yang berbeda, program studi yaitu:

102
1. Keuangan
Kompetensi Keahlian Akuntansi
2. Tata Niaga
Kompetensi Keahlian Pemasaran
3. Administrasi
Kompetensi Keahlian Adm. Perkantoran
4. Teknik Komputer dan Informatika
Kompetensi Keahlian Multimedia
5. Teknik Broadcasting
Kompetensi Keahlian Teknik Produksi dan Penyiaran Program Pertelevisian

103
LAMPIRAN 02
104
Pedoman Wawancara
1. Bagaimana penggunaan soal pilihan ganda di SMK Negeri 48?
2. Apakah umumnya guru-guru dan siswa-siswa sudah terbiasa mengakses
internet?
3. Apakah penggunaan e-learning soal pilihan ganda sudah biasa digunakan?
4. Apakah guru-guru dan siswa-siswa sudah memiliki smartphone?
5. Apakah guru-guru dan siswa-siswa sudah terbiasa menggunakan aplikasi
smartphone?
105
LAMPIRAN 03
106
Hasil Wawancara
Nama : Endi Wardoyo, S.Kom
Jabatan : Guru Produktif Multimedia
Pertanyaan
1. Bagaimana penggunaan soal pilihan ganda di SMK Negeri 48?

2. Apakah umumnya guru-guru dan siswa-siswa sudah terbiasa mengakses
internet?
3. Apakah penggunaan e-learning soal pilihan ganda sudah biasa digunakan?
4. Apakah guru-guru dan siswa-siswa sudah memiliki smartphone?
5. Apakah guru-guru dan siswa-siswa sudah terbiasa menggunakan aplikasi
smartphone?
Jawaban
1. Penggunaan soal pilihan ganda digunakan oleh para guru untuk latihan,
UTS, dan UAS kepada peserta didik.
2. Sudah terbiasa menggunakan internet, terutama siswa. Namum masih
banyak guru-guru yang belum terampil menggunakan internet.
3. Untuk menggunakan aplikasi seperti moodle online sudah, namun
diharapkan dengan adanya aplikasi web soal khusus SMK 48, siswa dan
guru akan lebih terbiasa menggunakan e-learning soal pilihan ganda.
4. Hampir semua guru dan siswa sudah memiliki dan terbiasa menggunakan
smartphone.
5. Secara umum, sudah terbiasa menggunakan aplikasi di smartphone,
terutama siswa. Namun masih banyak guru-guru yang belum teerbiasa
menggunakan smartphone, terutama aplikasi didalam smartphone tersebut.
107
LAMPIRAN 04
108
Entity Relationship Diagram

109
LAMPIRAN 05
110
Tampilan Halaman Utama Admin dan Guru
Gambar Lampiran 5.1 Tampilan Halaman Utama Admin dan Guru Pada
Sistem Soal Pilihan Ganda Pada Monitor
Gambar Lampiran 5.2 Tampilan Halaman Utama Admin dan Guru Pada
Sistem Soal Pilihan Ganda Pada Smartphone
111
LAMPIRAN 06
112
Tampilan Halaman Siswa
Gambar Lampiran 6.1 Tampilan Halaman Utama Siswa Pada Sistem Soal
Pilihan Ganda Pada Monitor
Gambar Lampiran 6.2 Tampilan Halaman Utama Siswa Pada Sistem Soal
Pilihan Ganda Pada Smartphone
113
LAMPIRAN 07
114
Hasil Penelitian Dengan Metode Black Box Berbasis Skenario
Sistem Bekerja
No. Skenario Proses Hasil Proses
(Ya/Tidak)
Admin
Admin login dengan Admin berhasil login, dan
1. username dan password. masuk menu utama. Ya
Admin login dengan Admin gagal login,

2. username dan password muncul notifikasi. Ya
yang tidak sesuai.
Admin login dengan Admin gagal login,
username kosong/tidak di muncul notifikasi.
3. Ya
isi dan password
Admin keluar dari Admin berhasil keluar,
aplikasi kumpulan soal dan kembali ke menu
4. Ya
pilihan ganda dengan login.f
memilih menu logout
Admin memilih logo Berita dan konten yang
5. dashboard tersedia muncul di Ya
halaman.
Admin tambah data guru Data kelas tersimpan di
dengan memilih tambah database. Dan muncul
guru, mengisi form nip, pada Tabel guru di
nama lengkap, tempat halaman manajemen guru.
lahir, tanggal lahir, jenis
kelamin, agama, nomer
6. Ya
telpon, email, alamat,
jabatan, foto, website,
username, dan password.
Juga mengaktifkan akun
dan memilih tombol
submit.
Admin edit dan hapus Berita dan konten yang
data guru dengan
tersedia muncul di
memilih tombol edit danhalaman. Data pada
7. Ya
hapus pada Tabel
halaman manajemen guru
manajemen guru. beserta data di database
berubah.
Admin melihat detail Data profil yang tersedia
8. profil guru dengan muncul di halaman. Ya
memilih menu detail.
115

manajemen siswa dan tersedia muncul di
9. menampilkan daftar halaman. Ya
siswa yang terdaftar dan
aktif.
10. Ya
tombol detail. halaman. Berhasil melihat
detail siswa.
Admin menonaktifkan Berita dan konten yang
11. tombol non aktifkan. Dan halaman. Berhasil Ya
icon hapus untuk menonaktifkan siswa dan
menghapus siswa. menghapus siswa.
registrasi siswa untuk tersedia muncul di
12. mengaktifkan siswa yang halaman. Data pada Ya
telah registrasi halaman kelas beserta
siswa yang baru tersedia muncul di
13. mendaftar dengan halaman. Berhasil melihat Ya
memilih tombol detail. detail siswa yang
mendaftar.
Admin menghapus siswa Berita dan konten yang
yang baru mendaftar tersedia muncul di
14. dengan memilih tombol halaman. Berhasil Ya
hapus. menghapus siswa yang
mendaftar.
manajemen kelas untuk tersedia muncul di
15. Ya
melihat kelas yang telah halaman.
tersedia.
Admin tambah kelas Data kelas tersimpan di
dengan mengisi form database. Dan muncul
16. nama kelas, ruang, dan pada Tabel kelas di Ya
memilih tombol simpan. halaman manajemen
kelas.
Admin edit dan hapus Berita dan konten yang
data kelas dengan tersedia muncul di
memilih tombol edit dan halaman. Data pada
17. Ya
hapus pada Tabel opsi. halaman kelas beserta
Dan memilih ketua dan data di database berubah.
wali kelas.
116
Admin melihat siswa Berita dan konten yang

yang terdaftar di kelas tersedia muncul di
18. Ya
dengan memilih tombol halaman.
lihat siswa
mata pelajaran untuk tersedia muncul di
19. Ya
melihat mata pelajaran halaman.
yang tersedia.
Admin tambah data mata Data mata pelajaran
pelajaran dengan tersimpan di database dan
memilih menu tambah muncul pada Tabel mata
20. mata pelajaran. Mengisi pelajaran. Ya
form kode mapel, dan
mapel. Memilih tombol
submit
Admin edit data mata Berita dan konten yang
pelajaran dengan tersedia muncul di
memilih icon edit dan halaman. Data pada
21. Ya
hapus pada Tabel opsi. halaman mata pelajaran
berubah.
22. berita dan menampilkan tersedia muncul di Ya
Admin tambah berita Data mata pelajaran
dengan memilih menu tersimpan di database dan
tambah berita. Mengisi muncul pada Tabel berita.
23. form judul, isi, dan Ya
tombol submit.
Admin edit data berita Berita dan konten yang
dengan memilih icon edit tersedia muncul di
dan hapus pada Tabel halaman. Data pada
24. opsi. halaman mata pelajaran Ya
berubah.
117
Admin edit profil pada Berita dan konten yang

menu user edit profil. tersedia muncul di
halaman. Data pada
25. Ya
Guru
Guru melakukan login Guru berhasil login, dan
26. dengan username dan masuk menu utama. Ya
password.
Guru melakukan login Guru gagal login, muncul
dengan username dan notifikasi.
27. Ya
password yang tidak
sesuai.
Guru login dengan Guru gagal login, muncul
username kosong/tidak notifikasi.
28. Ya
di isi dan password
Guru keluar dari aplikasi Guru berhasil keluar, dan
29. dengan memilih menu kembali ke menu login. Ya
logout.
Guru memilih logo Berita dan konten yang
halaman.
Guru mengedit profil Data edit profil tersimpan
dengan memilih menu di database.
edit profil, mengisi form
NIP, nama lengkap,
tempat lahir, tanggal
31. lahir, jenis kelamin, Ya
agama, nomor telepon,
email, alamat, foto,
website, username, dan
password. Kemudian
Guru memilih logo Berita dan konten yang
halaman.
manajemen kelas untuk tersedia muncul di
31. Ya
melihat kelas yang di halaman.
ajar.
118
Guru tambah kelas Data kelas tersimpan di

dengan memilih tombol database. Dan muncul
tambah kelas. Memilih pada Tabel kelas di
32. kelas yang di ajar, dan halaman manajemen Ya
mengisi keterangan kelas.
kelas, Memilih tombol
simpan.
Guru edit dan hapus data Berita dan konten yang
kelas dengan memilih tersedia muncul di
tombol edit dan hapus halaman. Data pada
33. Ya
pada Tabel opsi. halaman manajemen kelas
berubah.
manajemen mata tersedia muncul di
34. Ya
pelajaran untuk melihat halaman.
pelajaran yang di ajar.
Guru tambah mata Data kelas tersimpan di
pelajaran dengan database. Dan muncul
memilih tombol tambah pada Tabel kelas di
mata pelajaran. Memilih halaman manajemen mata
35. Ya
pelajaran yang di ajar, pelajaran.
kelas yang diajar dan
semester. Memilih
tombol simpan.
mata pelajaran dengan tersedia muncul di
36. Ya
hapus pada Tabel opsi. halaman manajemen mata
pelajaran beserta data di
database berubah.
indikator untuk melihat tersedia muncul di
37. Ya
indikator yang tiap halaman.
pelajaran.
Guru tambah indikator Data kelas tersimpan di
dengan memilih menu database. Dan muncul
tambah indikator, pada Tabel indikator di
38. memilih mata pelajaran halaman indikator. Ya
yang di ajar, dan mengisi
indikator. Memilih
tombol simpan.
39. indikator dengan tersedia muncul di Ya
119
hapus pada Tabel opsi. halaman indikator beserta


manajemen soal untuk tersedia muncul di
40. Ya
melihat soal yang sudah halaman.
dibuat.
Guru tambah jenis soal Data kelas tersimpan di
dengan memilih menu database. Dan muncul
tambah jenis soal. pada Tabel soal di
Mengisi form judul, halaman manajemen soal.
memilih kelas, mata
pelajaran, tanggal
41. Ya
pembuatan, waktu
mengerjakan, informasi
jenis soal, dan
menentukan status
aktif/tidak aktif soal.
Memilih tombol simpan.
Guru edit dan hapus jenis Berita dan konten yang
soal dengan memilih tersedia muncul di
tombol edit dan hapus halaman. Data pada
42. Ya
pada Tabel opsi. halaman manjemen soal
berubah.
Guru tambah soal dengan Data kelas tersimpan di
memilih menu buat soal. database.
Memilih menu pilihan
ganda. Mengisi form
pertanyaan, gambar,
memilih indikator,
mengisi pilihan A,
43. Ya
pilihan B, pilihan C,
pilihan D, pilihan E,
pembahasan, dan kunci
jawaban. Memilih
tombol simpan. Dan
melanjutkan ke soal
berikutnya.
Guru melihat daftar soal Berita dan konten yang
dengan memilih menu tersedia muncul di
44. Ya
daftar soal. Memilih halaman.
menu pilihan ganda.
120
Guru edit dan hapus soal Berita dan konten yang

yang terdaftar dengan tersedia muncul di
45. Ya
hapus. halaman manjemen soal
berubah.
Guru melihat peserta Berita dan konten yang
yang mengerjakan soal tersedia muncul di
46. Ya
dengan memilih tombol halaman.
peserta.
47. materi untuk melihat tersedia muncul di Ya
materi yang di tambah. halaman.
Guru tambah materi Data kelas tersimpan di
pelajaran dengan database. Dan muncul
memilih tombol tambah pada Tabel materi di
materi. Mengisi form halaman materi.
48. judul, memilih pelajaran Ya
yang di ajar, kelas yang
diajar dan mengunggah
file materi. Memilih
tombol simpan.
Guru hapus materi Berita dan konten yang
dengan memilih tombol tersedia muncul di
49. hapus pada Tabel opsi. halaman. Data pada Ya
halaman materi beserta
Guru tambah berita Data mata pelajaran
dengan memilih menu tersimpan di database dan
tambah berita. Mengisi muncul pada Tabel berita.
51. form judul, isi, dan Ya
tombol submit.
Guru edit data berita Berita dan konten yang
dengan memilih icon edit tersedia muncul di
dan hapus pada Tabel halaman. Data pada
52. Ya
opsi. halaman mata pelajaran
berubah.
Siswa
121
Siswa melakukan Berita dan konten yang

registrasi dengan tersedia muncul di
53. memilih tombol daftar halaman. Data siswa Ya
dan mengisi form tersimpan di database.
registrasi.
Siswa melakukan login Siswa berhasil login, dan
54. dengan username dan masuk menu utama. Ya
password.
Siswa melakukan login Siswa gagal login, muncul
dengan username dan notifikasi.
55. Ya
password yang tidak
sesuai.
Siswa login dengan Siswa gagal login, muncul
username kosong/tidak notifikasi.
56. Ya
di isi dan password
Siswa memilih logo Berita dan konten yang
57. beranda. tersedia muncul di Ya
halaman.
tugas dan menampilkan tersedia muncul di
58. data tugas setiap mata halaman. Ya
pelajaran yang diikuti
siswa.
Siswa memilih tombol Berita dan konten yang
lihat soal. Siswa memilih tersedia muncul di
59. jenis soal yang belum halaman. Ya
dikerjakan lalu
mengerjakan latihan soal.
Siswa selesai Berita dan konten yang
mengerjakan latihan soal. tersedia muncul di
60. Ya
halaman. Data tersimpan
di database.
nilai dan melihat nilai tersedia muncul di
61. Ya
dari latihan soal yang halaman.
dikerjakan.
materi dan menampilkan tersedia muncul di
62. data materi setiap mata halaman. Ya
pelajaran yang diikuti
siswa.
Siswa memilih tombol Berita dan konten yang
63. lihat materi pada opsi tersedia muncul di Ya
mata pelajaran. Siswa halaman. Data tersimpan
122
menunduh materi yang di database.

terdapat pada mata
pelajaran.
data berita. halaman.
Siswa keluar dari aplikasi Siswa berhasil keluar, dan
65. dengan memilih menu kembali ke menu login. Ya
logout.
123
LAMPIRAN 08
124
Hasil Pengujian Pada Tampilan Monitor
dari fungsionalitas sistem, maka aplikasi soal pilihan ganda berbasis web sudah
layak untuk digunakan di SMK Negeri 48 Jakarta. Hasil tampilan beberapa
halaman penting pada aplikasi jurnal reflektif pembelajaran guru berbasis Web
dapat dilihat pada gambar berikut.
Gambar lampiran 8.1 di bawah menunjukkan tampilan awal aplikasi dan
tampilan form login sebelum siswa masuk beranda dengan menggunakan
username dan password yang telah ditambahkan ke dalam database oleh admin.
Sedangkan Gambar lampiran 8.2 menunjukkan tampilan form login untuk
memasukkan username dan password admin dan guru sebelum masuk beranda
aplikasi.
Gambar Lampiran 8.1 Tampilan Awal Siswa Beserta Form Login Siswa
125
Gambar Lampiran 8.2 Tampilan Form Login Admin dan Guru
Gambar lampiran 8.3 di bawah menunjukkan tampilan beranda untuk
admin. Setiap admin yang telah berhasil masuk dengan menggunakan username
dan password akan masuk ke halaman dashboard admin. Setiap pengguna
berbeda tampilan info utama dalam hal cara penggunaan aplikasi. Berikut contoh
tampilan untuk admin.
Gambar Lampiran 8.3 Tampilan Dashboard Admin

126
Gambar lampiran 8.4 di bawah menunjukkan tampilan manajemen guru
yang hanya dapat dilihat oleh admin. Setiap tampilan data admin, guru, siswa,
mata pelajaran, dan kelas hanya dapat diubah atau dihapus oleh admin. Sedangkan
Gambar lampiran 8.5 dan Gambar lampiran 8.6 menunjukkan tampilan data siswa
yang telah terdaftar dan tampilan data siswa yang baru mendaftar.
Gambar Lampiran 8.4 Tampilan Data Guru
Gambar Lampiran 8.5 Tampilan Data Siswa Yang Telah Terdaftar

127
Gambar Lampiran 8.5 Tampilan Data Siswa Yang Baru Mendaftar
Gambar lampiran 8.7 di bawah menunjukkan tampilan formulir tambah
data guru yang diisi oleh admin.
Gambar Lampiran 8.7 Tampilan Formulir Tambah Guru
Gambar lampiran 8.8 di bawah menunjukkan tampilan data mata pelajaran
yang telah ditambah oleh admin. Admin dapat mengubah dan menghapus mata
pelajaran yang sudah terdaftar. Sedangkan gambar lampiran 8.9 adalah tampilan
formulir tambah pelajaran.

128
Gambar Lampiran 8.8 Tampilan Data Mata Pelajaran
Gambar Lampiran 8.9 Tampilan Formulir Tambah Mata Pelajaran
Gambar lampiran 8.10 di bawah menunjukkan tampilan data kelas yang
telah ditambah oleh admin. Admin dapat mengubah dan memasukan wali kelas
dan ketua kelas pada data kelas, dan admin dapat menghapus data kelas yang
terdaftar. Sedangkan gambar lampiran 8.11 adalah tampilan formulir tambah
kelas.
129
Gambar Lampiran 8.10 Tampilan Data Kelas
Gambar Lampiran 8.11 Tampilan Formulir Tambah Kelas
Gambar lampiran 8.12 di bawah menunjukkan tampilan data berita yang
telah ditambah oleh admin. Data berita yang dimasukan akan ditampilkan pada
tampilan berita pada halaman siswa. Data berita digunakan untuk menampilkan
berita atau pengumuman sekitar soal pilihan ganda. Admin dapat mengubah dan
menghapus data berita yang terdaftar. Sedangkan gambar lampiran 8.13 adalah
tampilan formulir tambah berita.

130
Gambar Lampiran 8.12 Tampilan Data Berita
Gambar Lampiran 8.13 Tampilan Formulir Tambah Berita
guru. Setiap guru yang telah berhasil masuk dengan menggunakan username dan
password akan masuk ke menu dashboard guru.

131
Gambar Lampiran 8.14 Tampilan Dashboard Guru
Gambar lampiran 8.15 di bawah menunjukkan tampilan manajemen kelas
yang diajar oleh guru. Data kelas yang telah dimasukan admin, akan ditampilkan
di halaman tambah kelas, dan guru memilih kelas yang diajar di sekolah. Guru
dapat mengubah dan menghapus data kelas yang diajar. Sedangkan Gambar
lampiran 8.16 menunjukkan tampilan formulir tambah kelas yang di ajar.
Gambar Lampiran 8.15 Tampilan Data Kelas Ajar

132
Gambar Lampiran 8.16 Tampilan Formulir Tambah Kelas Ajar
Gambar lampiran 8.17 di bawah menunjukkan tampilan data mata
pelajaran yang di ajar oleh guru. Guru dapat mengubah dan menghapus data mata
pelajaran yang terdaftar. Sedangkan gambar lampiran 8.18 adalah tampilan
formulir tambah mata pelajaran.
Gambar Lampiran 8.17 Tampilan Data Mata Pelajaran Yang Di Ajar

133
Gambar Lampiran 8.18 Tampilan Formulir Tambah Mata Pelajaran Yang

Di Ajar
Gambar lampiran 8.19 di bawah menunjukkan tampilan data indikator tiap
mata pelajaran yang di ajar oleh guru. Guru dapat mengubah dan menghapus data
indikator yang terdaftar. Sedangkan gambar lampiran 8.20 adalah tampilan
formulir tambah indikator.
Gambar Lampiran 8.19 Tampilan Data Indikator

134
Gambar Lampiran 8.20 Tampilan Formulir Tambah Indikator
Gambar lampiran 8.21 di bawah menunjukkan tampilan data paket soal
tiap mata pelajaran yang di ajar oleh guru. Setiap paket soal, guru dapat
menambah soal-soal pilihan ganda, dan melihat daftar soal yang telah
ditambahkan. Guru juga dapat mengubah dan menghapus data paket soal yang
terdaftar. Sedangkan gambar lampiran 8.22, gambar lampiran 8.23, dan gambar
lampiran 8.24 adalah tampilan formulir tambah paket soal, formulir buat soal, dan
data daftar soal.

135
Gambar Lampiran 8.21 Tampilan Data Paket Soal
Gambar Lampiran 8.22 Tampilan Formulir Tambah Paket Soal

136
Gambar Lampiran 8.23 Tampilan Formulir Buat Soal
Gambar Lampiran 8.24 Tampilan Data Daftar Soal Tiap Paket Soal
Gambar lampiran 8.25 di bawah menunjukkan tampilan data materi tiap
mata pelajaran yang di ajar oleh guru. Materi yang ditambahkan bisa berupa .pdf,
137
.doc, atau materi lainnya. Guru dapat menghapus data materi yang terdaftar.
Sedangkan gambar lampiran 8.26 adalah tampilan formulir tambah materi.
Gambar Lampiran 8.25 Tampilan Data Materi
Gambar Lampiran 8.26 Tampilan Formulir Tambah Materi
telah ditambah oleh guru. Data berita yang dimasukan akan ditampilkan pada
berita atau pengumuman mengenai soal pilihan ganda. Guru dapat mengubah dan
138
siswa. Setiap siswa yang telah berhasil masuk dengan menggunakan username
dan password akan masuk ke menu beranda siswa.

139
Gambar Lampiran 8.29 Tampilan Beranda Siswa
Gambar lampiran 8.30 di bawah menunjukkan tampilan data tugas/quiz
setiap mata pelajaran yang diikuti oleh siswa. Siswa dapat mengerjakan soal-soal
pilihan ganda yang telah diberikan oleh guru tiap mata pelajaran. Sedangkan
gambar lampiran 8.31 dan gambar lampiran 8.32 adalah tampilan daftar soal dan
tampilan mengerjakan soal.
Gambar Lampiran 8.30 Tampilan Data Tugas/Quiz Setiap Mata Pelajaran

140
Gambar Lampiran 8.31 Tampilan Daftar Soal
Gambar Lampiran 8.32 Tampilan Mengerjakan Soal
Gambar lampiran 8.33 di bawah menunjukkan tampilan data nilai dari
setiap soal yang telah dikerjakan oleh siswa. Sedangkan gambar lampiran 8.34
adalah tampilan detail soal beserta pembahasannya.

141
Gambar Lampiran 8.33 Tampilan Data Nilai Tiap Soal Yang Telah
Dikerjakan
Gambar Lampiran 8.34 Tampilan Detail Soal Yang Telah Dikerjakan

Beserta Pembahasannya
Gambar lampiran 8.35 di bawah menunjukkan tampilan data materi setiap
mata pelajaran yang diikuti oleh siswa. Siswa dapat mengunduh materi-materi
yang telah diberikan oleh guru tiap mata pelajaran. Sedangkan gambar lampiran
8.36 adalah tampilan data materi.

142
Gambar Lampiran 8.35 Tampilan Data Materi Mata Pelajaran.
Gambar Lampiran 8.36 Tampilan Data Materi.
telah diinput oleh guru dan admin. Halaman berita digunakan untuk menampilkan
berita atau pengumuman mengenai soal pilihan ganda.. Sedangkan gambar
lampiran 8.38 adalah tampilan isi berita.

143
Gambar Lampiran 8.38 Tampilan Isi Berita

144
LAMPIRAN 09
145
Hasil Pengujian Pada Tampilan Smartphone
dari fungsionalitas sistem, maka aplikasi soal pilihan ganda berbasis web sudah
layak untuk digunakan di SMK Negeri 48 Jakarta. Hasil tampilan beberapa
halaman penting pada aplikasi jurnal reflektif pembelajaran guru berbasis Web
dapat dilihat pada gambar berikut.
Gambar lampiran 9.1 di bawah menunjukkan tampilan awal aplikasi dan
tampilan form login sebelum siswa masuk beranda dengan menggunakan
username dan password yang telah ditambahkan ke dalam database oleh admin.
Sedangkan Gambar lampiran 9.2 menunjukkan tampilan form login untuk
memasukkan username dan password admin dan guru sebelum masuk beranda
aplikasi.
Gambar Lampiran 9.1 Tampilan Awal Siswa Beserta Form Login Siswa
146
Gambar Lampiran 9.2 Tampilan Form Login Admin dan Guru
admin. Setiap admin yang telah berhasil masuk dengan menggunakan username
dan password akan masuk ke halaman dashboard admin. Setiap pengguna
berbeda tampilan info utama dalam hal cara penggunaan aplikasi. Berikut contoh
tampilan untuk admin.
Gambar Lampiran 9.3 Tampilan Dashboard Admin

147
Gambar lampiran 9.4 di bawah menunjukkan tampilan manajemen guru
yang hanya dapat dilihat oleh admin. Setiap tampilan data admin, guru, siswa,
mata pelajaran, dan kelas hanya dapat diubah atau dihapus oleh admin. Sedangkan
Gambar lampiran 9.5 dan Gambar lampiran 9.6 menunjukkan tampilan data siswa
yang telah terdaftar dan tampilan data siswa yang baru mendaftar.
Gambar Lampiran 9.4 Tampilan Data Guru
Gambar Lampiran 9.5 Tampilan Data Siswa Yang Telah Terdaftar

148
Gambar Lampiran 9.5 Tampilan Data Siswa Yang Baru Mendaftar
Gambar lampiran 9.7 di bawah menunjukkan tampilan formulir tambah
data guru yang diisi oleh admin.
Gambar Lampiran 9.7 Tampilan Formulir Tambah Guru
Gambar lampiran 9.8 di bawah menunjukkan tampilan data mata pelajaran
yang telah ditambah oleh admin. Admin dapat mengubah dan menghapus mata
pelajaran yang sudah terdaftar. Sedangkan gambar lampiran 9.9 adalah tampilan
formulir tambah pelajaran.

149
Gambar Lampiran 9.8 Tampilan Data Mata Pelajaran
Gambar Lampiran 9.9 Tampilan Formulir Tambah Mata Pelajaran
Gambar lampiran 9.10 di bawah menunjukkan tampilan data kelas yang
telah ditambah oleh admin. Admin dapat mengubah dan memasukan wali kelas
dan ketua kelas pada data kelas, dan admin dapat menghapus data kelas yang
terdaftar. Sedangkan gambar lampiran 9.11 adalah tampilan formulir tambah
kelas.
150
Gambar Lampiran 9.10 Tampilan Data Kelas
Gambar Lampiran 9.11 Tampilan Formulir Tambah Kelas
telah ditambah oleh admin. Data berita yang dimasukan akan ditampilkan pada
berita atau pengumuman sekitar soal pilihan ganda. Admin dapat mengubah dan

151
guru. Setiap guru yang telah berhasil masuk dengan menggunakan username dan
password akan masuk ke menu dashboard guru.

152
Gambar Lampiran 9.14 Tampilan Dashboard Guru
Gambar lampiran 9.15 di bawah menunjukkan tampilan manajemen kelas
yang diajar oleh guru. Data kelas yang telah dimasukan admin, akan ditampilkan
di halaman tambah kelas, dan guru memilih kelas yang diajar di sekolah. Guru
dapat mengubah dan menghapus data kelas yang diajar. Sedangkan Gambar
lampiran 9.16 menunjukkan tampilan formulir tambah kelas yang di ajar.
Gambar Lampiran 9.15 Tampilan Data Kelas Ajar

153
Gambar Lampiran 9.16 Tampilan Formulir Tambah Kelas Ajar
Gambar lampiran 9.17 di bawah menunjukkan tampilan data mata
pelajaran yang di ajar oleh guru. Guru dapat mengubah dan menghapus data mata
pelajaran yang terdaftar. Sedangkan gambar lampiran 9.18 adalah tampilan
formulir tambah mata pelajaran.
Gambar Lampiran 9.17 Tampilan Data Mata Pelajaran Yang Di Ajar

154
Gambar Lampiran 9.18 Tampilan Formulir Tambah Mata Pelajaran Yang

Di Ajar
Gambar lampiran 9.19 di bawah menunjukkan tampilan data indikator tiap
mata pelajaran yang di ajar oleh guru. Guru dapat mengubah dan menghapus data
indikator yang terdaftar. Sedangkan gambar lampiran 9.20 adalah tampilan
formulir tambah indikator.
Gambar Lampiran 9.19 Tampilan Data Indikator

155
Gambar Lampiran 9.20 Tampilan Formulir Tambah Indikator
Gambar lampiran 9.21 di bawah menunjukkan tampilan data paket soal
tiap mata pelajaran yang di ajar oleh guru. Setiap paket soal, guru dapat
menambah soal-soal pilihan ganda, dan melihat daftar soal yang telah
ditambahkan. Guru juga dapat mengubah dan menghapus data paket soal yang
terdaftar. Sedangkan gambar lampiran 9.22, gambar lampiran 9.23, dan gambar
lampiran 9.24 adalah tampilan formulir tambah paket soal, formulir buat soal, dan
data daftar soal.

156
Gambar Lampiran 9.21 Tampilan Data Paket Soal
Gambar Lampiran 9.22 Tampilan Formulir Tambah Paket Soal

157
Gambar Lampiran 9.23 Tampilan Formulir Buat Soal
Gambar Lampiran 9.24 Tampilan Data Daftar Soal Tiap Paket Soal
Gambar lampiran 9.25 di bawah menunjukkan tampilan data materi tiap
mata pelajaran yang di ajar oleh guru. Materi yang ditambahkan bisa berupa .pdf,
158
.doc, atau materi lainnya. Guru dapat menghapus data materi yang terdaftar.
Sedangkan gambar lampiran 9.26 adalah tampilan formulir tambah materi.
Gambar Lampiran 9.25 Tampilan Data Materi
Gambar Lampiran 9.26 Tampilan Formulir Tambah Materi
telah ditambah oleh guru. Data berita yang dimasukan akan ditampilkan pada
berita atau pengumuman mengenai soal pilihan ganda. Guru dapat mengubah dan
159
siswa. Setiap siswa yang telah berhasil masuk dengan menggunakan username
dan password akan masuk ke menu beranda siswa.

160
Gambar Lampiran 9.29 Tampilan Beranda Siswa
Gambar lampiran 9.30 di bawah menunjukkan tampilan data tugas/quiz
setiap mata pelajaran yang diikuti oleh siswa. Siswa dapat mengerjakan soal-soal
pilihan ganda yang telah diberikan oleh guru tiap mata pelajaran. Sedangkan
gambar lampiran 9.31 dan gambar lampiran 9.32 adalah tampilan daftar soal dan
tampilan mengerjakan soal.
Gambar Lampiran 9.30 Tampilan Data Tugas/Quiz Setiap Mata Pelajaran

161
Gambar Lampiran 9.31 Tampilan Daftar Soal
Gambar Lampiran 9.32 Tampilan Mengerjakan Soal
Gambar lampiran 9.33 di bawah menunjukkan tampilan data nilai dari
setiap soal yang telah dikerjakan oleh siswa. Sedangkan gambar lampiran 9.34
adalah tampilan detail soal beserta pembahasannya.

162
Gambar Lampiran 9.33 Tampilan Data Nilai Tiap Soal Yang Telah
Dikerjakan
Gambar Lampiran 9.34 Tampilan Detail Soal Yang Telah Dikerjakan

Beserta Pembahasannya
Gambar lampiran 9.35 di bawah menunjukkan tampilan data materi setiap
mata pelajaran yang diikuti oleh siswa. Siswa dapat mengunduh materi-materi
yang telah diberikan oleh guru tiap mata pelajaran. Sedangkan gambar lampiran
9.36 adalah tampilan data materi.

163
Gambar Lampiran 9.35 Tampilan Data Materi Mata Pelajaran.
Gambar Lampiran 9.36 Tampilan Data Materi.
telah diinput oleh guru dan admin. Halaman berita digunakan untuk menampilkan
berita atau pengumuman mengenai soal pilihan ganda.. Sedangkan gambar
lampiran 9.38 adalah tampilan isi berita.

164
Gambar Lampiran 9.38 Tampilan Isi Berita

165
LAMPIRAN 10
166
167
168
169
170
171
172
173
174
LAMPIRAN 11
175
176
177
178
LAMPIRAN 12
179
180
181
182
183
184
185
LAMPIRAN 13
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
LAMPIRAN 14
232
233
LAMPIRAN 15
234
235
LAMPIRAN 16
236
Riwayat Hidup
Dwika Ikhwal Fajri, mahasiswa Program Studi
Pendidikan Teknik Informatika dan Komputer
angkatan 2011, pada Jurusan Teknik Elektro,
Fakultas Teknik, Universitas Negeri Jakarta. Lahir
di Jakarta pada tanggal 2 Desember 1994, yang
merupakan anak pertama dari tiga bersaudara. Telah
menyelesaikan pendidikan di SDN Adiarsa Barat 3
Karawang, SMPN 1 Karawang Barat, dan SMAN 1 Karawang Barat. Memulai
pendidikan tinggi di Universitas Negeri Jakarta melaui jalur SNMPTN.
Semasa perkuliahan penulis mengikuti kegiatan kampus seperti Himpunan
Mahasiswa Karawang Universitas Negeri Jakarta dan kegiatan prodi REKAM
PTIK 2013 dan menjadi pengurus dalam organisasi tersebut. Selama perkuliahan
penulis juga bekerja di Bimbingan Belajar Solusi Mandiri Cabang Rawamangun
sebagai semi-tutor. Dalam menyelesaikan studinya, penulis mengadakan sebuah
penelitian untuk pengerjaan skripsi dengan judul “Pengembangan Situs Soal
Pilihan Ganda SMK Negeri 48 Jakarta Menggunakan Responsive Web Design”

Dwika Ikhwal Fajri - 5235111816

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dwika Ikhwal Fajri - 5235111816

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGEMBANGAN SITUS SOAL PILIHAN GANDA SMK NEGERI

48 JAKARTA MENGGUNAKAN RESPONSIVE WEB DESIGN

Skripsi ini Ditulis untuk Memenuhi Sebagian Persyaratan

PENDIDIKAN TEKNIK INFORMATIKA DAN KOMPUTER

DWIKA IKHWAL FAJRI

DWIKA IKHWAL FAJRI

NAMA DOSEN TANDA TANGAN TANGGAL

Hamidillah Ajie, S.Si., M.T. ………………… ……………

PENGESAHAN PANITIA UJIAN SKRIPSI

NAMA DOSEN TANDA TANGAN TANGGAL

Prof. Dr. Ir. Ivan Hanafi, M.Pd ………………… ……………

Bambang P. Adhi, M.Kom ………………… ……………

Prasetyo Wibowo Y., M.Eng ………………… ……………

Tanggal Lulus: …………….

Dengan ini saya menyatakan bahwa:

Dwika Ikhwal Fajri

Dwika Ikhwal Fajri

HALAMAN PENGESAHAN .............................................................................iv

HALAMAN PERNYATAAN ..............................................................................v

KATA PENGANTAR ..........................................................................................vi

DAFTAR ISI ........................................................................................................vii

DAFTAR TABEL ................................................................................................xi

DAFTAR GAMBAR ............................................................................................xiii

DAFTAR LAMPIRAN ........................................................................................xv

1.1 Latar Belakang ..................................................................................... 1

BAB II KAJIAN TEORITIS DAN KERANGKA BERPIKIR

BAB III METODOLOGI PENELITIAN

3.1 Tempat dan Waktu Penelitian ..............................................................34

BAB IV HASIL PENILITIAN DAN PEMBAHASAN

4.1 Hasil Pengujian Terhadap Penerapan Konsep Responsive Web

BAB V KESIMPULAN DAN SARAN

DAFTAR PUSTAKA ..........................................................................................97

Tabel 3.1 Daftar Kebutuhan Fungsional .................................................................. 39

Tabel 3.2 Tabel Admin ........................................................................................... 43

Tabel 3.3 Tabel Guru .............................................................................................. 44

Tabel 3.4 Tabel Siswa .............................................................................................. 45

Tabel 3.5 Tabel Kelas .............................................................................................. 46

Tabel 3.6 Tabel Kelas Ajar ...................................................................................... 46

Tabel 3.7 Tabel Mapel ............................................................................................. 46

Tabel 3.8 Tabel Mapel Ajar ..................................................................................... 47

Tabel 3.9 Tabel Indikator......................................................................................... 47

Tabel 3.10 Tabel Soal ............................................................................................. 48

Tabel 3.11 Tabel Paket Soal .................................................................................... 49

Tabel 3.12 Tabel Nilai ............................................................................................ 49

Tabel 3.13 Tabel Berita .......................................................................................... 50

Tabel 3.14 Tabel Materi........................................................................................... 50

Tabel 3.18 Kisi-kisi Instrumen Uji Kelayakan Kepada Guru .................................. 67

Tabel 3.19 Kisi-kisi Instrumen Uji Kelayakan Kepada Siswa ............................... 68

Tabel 3.20 Pengelompokan Kategori Kualitas Berdasarkan Skor .......................... 69

Tabel 4.3 Hasil Pengujian Pada Monitor Oleh Admin ........................................... 84

Tabel 4.4 Hasil Pengujian Pada Smartphone Oleh Admin ..................................... 85

Tabel 4.5 Hasil Pengujian Pada Monitor Oleh Guru .............................................. 87

Tabel 4.6 Hasil Pengujian Pada Smartphone Oleh Guru ........................................ 88

Tabel 4.7 Hasil Pengujian Pada Monitor Oleh Siswa ............................................. 89

Tabel 4.8 Hasil Pengujian Pada Smartphone Oleh Siswa ...................................... 90

Tabel 4.9 Rangkuman Hasil Pengujian Keseluruhan Pada Monitor ....................... 92

Tabel 4.10 Rangkuman Hasil Pengujian Keseluruhan Pada Smartphone ............... 92

Gambar 2.2 Contoh Website Yang Menerapkan Konsep RWD ............................. 10

Gambar 2.3 Struktur File Framework Bootstrap ..................................................... 13

Gambar 2.4 Pohon Penilaian Kualitas ..................................................................... 25

Gambar 2.5 Bagan Kerangka Berpikir .................................................................... 32