12
layar maksimal 1023 pixel. Ketiga 3; merupakan gambar tampilan untuk layar maksimal 480 pixel. Pada halaman daftar thread ini terdapat header yang berupa
informasi tanggal, informasi user, logo, nama SMP serta alamat. Selanjutnya pada bagian menu terdapat menu management forum, materi, tugas, tes, gambar dan
layanan. Pada menu management forum, terdiri dari 3 submenu, yaitu: daftar thread, buat thread dan thread saya. Pada menu management materi hanya
terdapat 1 submenu, yaitu: daftar materi sama halnya dengan menu management tugas. Selanjutnya, pada menu management tes terdapat 2 submenu, yaitu: daftar
tes dan nilai tes. Pada menu management gambar terdapat 2 submenu, yaitu: tambah gambar dan daftar gambar. Pada menu management layanan terdapat 2
submenu, yaitu: ubah password dan ubah foto. Pada isi konten terdapat informasi tes yaitu informasi tipe ulangan, durasi waktu, mata pelajaran dan kelas. Pada
bagian terakhir, yaitu bagian footer terdapat informasi dari kepemilikan website.
Tahap keempat tahap implementasi dan pengujian serta analisis hasil pengujian akan dibahas pada bagian bab 4 yaitu hasil dan pembahasan. Tahap
kelima adalah melakukan penulisaan laporan berupa hasil penelitian yang dilakukan mulai dari saat penelitian dilakukan.
4. Hasil dan Pe mbahasan
Pada bagian ini memuat hasil dan pembahasan yang meliputi implementasi Responsive Web Design pada e-learning SMPN 3 Salatiga yang telah dibuat serta
pengujian aplikasi pada beberapa perangkat dengan menggunakan BlackBox serta pengujian validasi sistem aplikasi.
Gambar 14 Container Menggunakan Satuan Pixel
Pada Gambar 14 merupakan web yang menggunakan lebar satuan pixel jika browser dilakukan scrolling ke samping kiri maka halaman web sebagian tidak
terlihat pada browser atau tidak ditampilkan seutuhnya. Dapat dilihat pada tanda garis lingkaran hitam di Gambar 14. Dari masalah ini dibutuhkan flexible grid
agar web menyesuaikan dengan layar browser. Langkah awal dalam mengimplementasikan flexible grid yang harus dilakukan adalah menggunakan
rumus matematika sederhana dimana rumus tersebut adalah nilai target nilai
13
context, dari hasil operasi pembagian ini maka akan didapati nilai yang di pakai pada setiap elemen container. Salah satu contohnya dapat dilihat pada gambar 15.
Gambar 15 Desain Piksel Da ri Header Top
Pada Gambar 15 merupakan salah satu contoh dalam penerapan flexible grid. Dimana terdapat container header dengan nilai lebar 1200 pixel dan header
top dengan nilai lebar yaitu 1080 pixel. Untuk menjadikan nilai lebar container header top menjadi satuan persen, maka dibutuhkan rumus perhitungan sederhana
yaitu nilai target context. Nilai target didapat dari nilai lebar container yang diinginkan atau telah ditetapkan pada desain yang sudah ada, nilai context adalah
nilai penampung elemen container. Jadi posisi container header top ada dalam container header. Jadi nilai yang di dapat adalah 98. 33333333333333 dari hasil
pembagian 1080px 1200px.
Kode Progr am 1. Penerapan Flexible Grid
1 2
.blog .header .headerTop{ width:98.33333333333333; 1180px 1200px}
Pada Kode Program 1 merupakan sebuah salah satu penerapan dari flexible grid. Dengan menggunakan rumus pembagian sederhana, container dapat
fleksibel pada browser perangkat yang digunakan.
Gambar 16. Ga mbar Yang Tidak Me maka i Flexible Image.
Pada Gambar 16 merupakan sebuah tampilan gambar logo yang melewati batas dari container yang menampung logo tersebut. Ini dikarenakan nilai dari
gambar logo tersebut lebih besar dari container penampungnya. Dari masalah ini dibutuhkan penerapan flexible image.
14
Kode Progr am 2 Penerapan flexible Image
1 2
3 4
.blog .header .headerBottom .logo{ width:13.29787234042553; 150px 1128px }
.blog .header .headerBottom .logo img { max-width:100;
Pada Kode Program 2 merupakan penerapan flexible image. Terdapat property max-width:100. Property ini berfungsi agar media gambar tidak akan
pernah melewati atau melebihi kontainernya. Untuk elemen container yang digunakan oleh selector img adalah selector class logo, dengan nilai property
width sebesar 13.29787234042553 sehingga selector img yang mempunyai nilai lebar berukuran tinggi akan tetap menyesuaikan container yang ditempati. Hanya
dengan memasukan max-width:100, mencegah gambar dari kelebihan container atau menyesuaikan gambar dari lebar container. Tidak hanya media gambar saja,
media lainya juga seperti embed, video, object juga dapat menggunakan max- width:100 ini.
Gambar 17 Ga mbar Tida k Mele wati Batas Dari Container
Pada Gambar 17 merupakan penerapan flexible image yang salah satunya diterapkan pada container penampung logo yang hasilnya tidak melewati batas
dari container yang ditempati. Sehingga logo tidak bertabrakan dengan judul aplikasi.
Kode Progr am 3 Media Queries Dala m Aplikasi E-learning
1 2
3 4
5 6
media and screen max-width:480px { kode program css untuk tampilan smartphone}
media and screen max-width:1023px{ kode program css untuk tampilan tablet}
media screen and min-width:1024{ kode program css untuk tampilan laptop }
Pada Kode Program 3 merupakan implementasi fitur media queries dari Responsive Web Design pada e-learning SMPN 3 Salatiga, dimana terdapat 3
bagian media queries yang digunakan yaitu smartphone, tablet dan laptop. Salah satu contoh penggunaanya yaitu pada perangkat smartphone, kode
media and screen max-width:480px{}
merupakan penerapan media queries untuk perangkat smartphone. Jika diakses melalui perangkat smartphone akan
menampilkan rancangan desain sesuai dengan smartphone.
15
Gambar 18 . Merupakan Hasil Ta mpilan Foru m Jika Dibuka Di Beberapa Perangkat.
Tabel 1 Hasil Pengujian Responsive Web Design Foru m
No Jenis Uji
Fitur Kondisi yang
di har apkan Hasil
Status
1. Smartphone
Flexible Grid
Menyesuaikan content web pada
perangkat smartphone.
Content web berhasil menyesuaikan dengan
perangkat smartphone valid
Flexible image
Menampilkan gambar logo sesuai
dengan lebar penampung gambar
Tamp ilan logo tidak me le wati batas dari lebar
penampung valid
Media Queries
Menampilkan flexible grid untuk
perangkat smartphone
Output yang ditampilkan pada perangkat adalah
desain untuk smartphone valid
2. Tablet
Flexible Grid
Menyesuaikan content web pada
perangkat tablet Content web berhasil
menyesuaikan dengan perangkat tablet
valid
Flexible Images
Menyesuaikan web pada perangkat
tablet Web berhasil
menyesuaikan dengan perangkat tablet
valid
Media Queries
Menampilkan flexible grid untuk
desain tablet Output yang ditampilkan
pada perangkat adalah desain untuk tablet
valid
16
Tabel 2 Hasil Pengujian Validasi Sebagai Siswa
Pada tabel 2 merupakan sebuah pengujian validasi sebagai hak akses siswa di mana dapat disimpulkan bahwa fasilitas- fasilitas yang ada pada e-learning
SMPN 3 Salatiga beroperasi dengan baik sesuai dengan fungsi yang diharapkan.
3 Laptop
Flexible Grid
Menyesuaikan content web pada
parangkat laptop Content web berhasil
menyesuaikan dengan perangkat laptop
valid
Flexible Images
mena mp ilkan gambar logo sesuai
dengan lebar penampung gambar
Tamp ilan logo tidak me le wati batas dari lebar
penampung valid
Media Queries
mena mp ilkan flexible grid untuk
desain laptop Output yang ditampilkan
pada perangkat adalah desain untuk laptop
valid
No. Jenis Uji
Hasil Vali dasi
Vali d Ti dak
Vali d
1. Login a kun dengan username dan password siswa yang
terdaftar Berhasil log in
-
2. Mengolah thread melihat, mena mbahkan
me mpe rbaharui Berhasil
mengolah
-
3. Mengolah materi me lihat mengunduh
Berhasil mengolah
-
4. Mengolah tugas me lihat mengunduh
Berhasil mengolah
-
5. Mengolah tes melihat mengikut i
Berhasil mengolah
-
6. Mengolah gambar me lihat, menambahkan
menghapus Berhasil
mengolah
-
7. Mengganti foto akun
Berhasil ganti foto
-
8. Mengganti password akun
Berhasil ganti password
-
9 Logout
Berhasil logout
17
Tabel 3 Pengujian Va lidasi Sebagai Pengaja r
Pada tabel 3 merupakan sebuah pengujian validasi sebagai hak akses pengajar di mana dapat disimpulkan bahwa fasilitas- fasilitas yang ada pada e-
learning SMPN 3 Salatiga beroperasi dengan baik sesuai dengan fungsi yang diharapkan.
6. Simpulan