Hasil dan Pe mbahasan

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