tmat_berbicara, tmat_kosakata,
tmat_membaca, tmat_nyanyi,
tmat_pic, tmat_berlatih, tmat_member, tmat_siswa, tmat_nilai, tmat_latihan.
4. Hasil dan Pembahasan
Implementasi
Responsive Web Design
ada 3 yaitu : 1
Flexible Grid
, 2
Flexible Image
, 3
Media Queries
. Dalam penerapan
flexible grid
digunakan rumus perhitungan matematika sederhana didalamnya. Perhitungan ini
dirumuskan pada Persamaan 4.1.
target context = result
4.1 Keterangan:
target = ukuran yang akan kita tampilkan
context
= ukuran
browser
dasar Hasil nilainya diterjemahkan kedalam bentuk persen yang digunakan oleh
lebar
container
,
margin
dan
padding
. Untuk pengaturan
margin
,
context
adalah lebar element
container
yang ditempati. Untuk pengaturan
padding
,
context
adalah lebar
element
diri itu sendiri.
Kode program 4.1 kode program implementasi
flexible grid
1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 .header .menu{width:100;height:auto;float:left;
.header h1{padding:70px 0 30px 0; font-size:2.375em;}
.box-wrapper{width:90;height:auto;} .box-wrapper .box{
width:33.3333333333;height:320px;float:left;} .main{width:100;height:auto;float:left;}
.main .main-wrapper{width:90;height:auto; .main .main-box{width:30;
margin:1.66666666667;} .footer{width:100;height:auto;float:left;}
.footer .footer-wrapper{width:100;height:auto; .footer .left{width:66.66666666667;
margin-right:2.5;padding-left:2.5;} .footer .right{width:30.83333333333; }
Pada kode program 4.1 merupakan kode program penerapan
flexible grid
dalam
user interface
halaman siswa untuk siswa. Pada baris 1 merupakan pengaturan
selector cla ss
header menu, dimana diasumsikan
value property
width diatur 100 atau setara dengan 1200 pixel. Pada baris 2-3 merupakan pengaturan
selector class
header h1
value property
padding atas di atur 70 pixel, padding bawah di atur 30 pixel dan
value property
font-size di atur dengan nilai 2.375em dari hasil pembagian 38 pixel adalah target, 16 pixel adalah
context
. Pada baris ke 4 merupakan pengaturan
selector class
box-wrapper, dimana diasumsikan
value property
width di atur 90 atau setara dengan 1100 pixel dengan tinggi otomatis. Pada baris ke 5-6
selector class
box-wrapper box
value property
width diatur 33.3333333333 persen, hasil tersebut didapat dari 400 pixel adalah target
dibagi 1200 pixel adalah
context
, dengan tinggi 320 pixel dan
value property
float di atur left. Pada baris 7
selector class
main
value property
width diatur 100 atau setara dengan 1200 pixel dengan
value property
height di atur otomatis dan
value property
float di atur left. Pada baris 8
selector class
main main- wrapper
value property
width diatur 90 atau setara dengan 1100 pixel dengan
value property
height di atur otomatis. Pada baris 9-10
selector class
main main- box
value property
width di atur 30 dari hasil pembagian 320 pixel adalah target dibagi 1200 pixel adalah
context
dan
value property
margin di atur 1.66666666667 dari hasil pembagian 20 pixel adalah target dibagi 1200 pixel
adalah
context
. Pada baris 11
selector cla ss
footer
value property
width diatur 100 atau setara dengan 1200 pixel dengan
value property
height di atur otomatis dan
value property
float di atur left. Pada baris 12
selector cla ss
footer footer-wrapper
value property
width diatur 100 atau setara dengan 1200 pixel dengan
value property
height di atur otomatis. Pada baris 13-14
value property
width di atur 66.66666666667 dari hasil pembagian 800 pixel adalah target dibagi 1200 pixel adalah
context
, untuk
value property
margin-right dan padding-left di atur 2.5 dari hasil pembagian 30 pixel adalah target dibagi dengan 1200 pixel adalah
context
. Pada baris 15
selector class
footer right
value property
width di atur 30.83333333333 dari hasil pembagian 370 pixel adalah target dibagi dengan 1200 pixel adalah
context
.
Flexible Images
berarti setiap
image
yang ada didalam
website
tidak melebihi lebar container dari layout yang dirancang.
Kode program 4.2 kode program implementasi
Flexible Images
1 2
3 4
logo{width: 20
.
27027 ;float:left;} logo img{max-width: 100;
height: auto;
overflow:hidden;}
Pada kode program 4.2 merupakan kode program dalam pengaturan untuk logo. Pada baris 1 adalah kode untuk batas
container
dengan width di atur 20.27027 dari hasil pembagian 75 pixel adalah target dibagi 370 adalah
context
. Pada baris 2-3 merupakan kode program dalam pengaturan untuk lebar tag img
yang dimana pada baris 2 max-width di atur 100 berfungsi untuk menyesuaikan lebar dari
container
. Pada baris 4 berfungsi untuk memotong gambar yang melampaui batas lebar
container
. Implementasi dari
media queries
dalam
website
yang dibuat terdapat enam spesifikasi yaitu tampilan untuk minimal lebar
browser
1200 pixel, lebar
browser
maksimal 1200 pixel, lebar
browser
maksimal 1024 pixel, lebar
browser
maksimal 768 pixel, lebar
browser
maksimal 600 pixel dan lebar
browser
maksimal 480 pixel. Berikut salah satu penerapan
media queries
dalam
user interface
halaman materi bab untuk siswa.
Kode Program 4.3 kode program desain
website
lebar maksimal 1024 pixel 1
2 3
4 5
6 7
8 9
10 11
media screen and max-width:1024px{ .header-bab .menu{width:100;height:auto;}
.header-bab .banner{width:100;height:auto;} .main-bab{float:left;width:100;height:auto;}
.main-bab .main-wrapper{width:90;height:auto;} .main-bab .main-box{width:90;height:370px;}
.footer{width:100;height:auto;} .footer .footer-wrapper{width:100;height:auto;}
.footer .left{width:59.8958333;height:auto; margin-right:5.20833333;font-size:15px;}
.footer .right{width:32.5520833;height:auto;}
Pada kode program 4.3 merupakan kode untuk menampilkan desain
website
dalam aturan lebar maksimal 1024 pixel. Dalam kode program tersebut pada baris 1 merupakan penulisan syarat untuk ukuran lebar
browser
maksimal 1024 pixel. Pengaturan lebar width dalam tiap masing-masing
selector cla ss
berfungsi untuk menyesuaikan lebar dari
container.
Kode Program 4.4 kode program desain
website
lebar maksimal 480 pixel
Pada kode program 4.4 merupakan kode untuk menampilkan desain
website
dalam aturan lebar maksimal 480 pixel. Dalam kode program tersebut pada baris 1 merupakan penulisan syarat untuk ukuran lebar
browser
maksimal 1024 pixel. Pengaturan lebar width dalam tiap masing-masing
selector cla ss
berfungsi untuk menyesuaikan lebar dari
container.
Tampilan
user interface
Beranda Pembelajaran Mandarin SMP Kristen Satya Wacana untuk PC dan laptop dan juga iPad dengan tampilan
landscape
, ukuran layar
browser
maksimal 1024 pixel, dapat dilihat pada Gambar 7.
Gambar 7
User Interface
Beranda untuk PC dan Laptop
Tampilan
user interface
Beranda Pembelajaran Mandarin SMP Kristen Satya Wacana untuk iPad dengan tampilan
portrait
dan tablet android, ukuran layar
browser
maksimal 768 pixel, dapat dilihat pada gambar 8.
1 2
3 4
5 6
7 8
media screen and max-width:480px{ .main-bab{width:100;height:auto;float:left;}
.main-bab .main-wrapper{width:100;height:auto;} .main-bab .main-box{width:100;height:370px;}
.footer{width:100;height:auto;float:left;} .footer .footer-wrapper{width:95;height:auto;}
.footer .left{width:100;height:auto;float:left;} .footer .right{width:100;height:auto;float:left;}
Gambar 8
User Interface
Beranda untuk iPad dan Tablet Android
Tampilan
user interface
Beranda Pembelajaran Mandarin SMP Kristen Satya Wacana untuk
handphone
ukuran layar
browser
maksimal 480 pixel, dapat dilihat pada gambar 9.
Gambar 9
User Interface
Beranda untuk iPad dan Tablet Android
Pengujian validasi sistem menggunakan metode pengujian
Black Box
, dimana dilakukan pengujian spesifikasi terhadap fungsi-fungsi yang telah
dirumuskan dalam daftar kebutuhan apakah berjalan sesuai antara kinerja sistem dengan daftar kebutuhan. Pengujian dilakukan pada bagian yang dapat diakses
oleh
user
atau pengguna biasa bukan
admin
. Tabel 1 menunjukkan hasil pengujian
black box
testing pada siswa.
Tabel 1 Uji Validasi Sebagai Siswa No. Jenis Uji
Hasil Validasi
Valid Tidak
Valid 1.
Login
dengan Username
dan
Password Siswa yang terdaftar
Berhasil
-
2.
Login
dengan Username
dan Password Siswa yang tidak terdaftar
Tidak Berhasil
-
3. Lihat Data Materi
Berhasil
-
4.
Submit
Latihan Berhasil
-
5. Lihat Data Siswa
Berhasil
-
6. Lihat Data Nilai
Berhasil
-
7.
Reset
Data Nilai Berhasil
-
8. Ganti Password
Login
Berhasil
-
9.
Logout
Berhasil
-
Bagian pengujian lainnya adalah pengujian untuk bagian-bagian yang dapat diakses oleh
admin
. Tabel 2 menunjukkan hasil pengujian
black box
testing pada
admin
.
Tabel 2 Uji Validasi Sebagai
Administrator
No. Jenis Uji Hasil
Validasi Valid
Tidak Valid
1. Login
dengan ID
dan Password
Administrator yang terdaftar Berhasil
- 2.
Login dengan
ID dan
Password Administrator yang tidak terdaftar
Tidak Berhasil
- 3.
Kelola Data Materi tambah,
edit
, hapus, dan
view
Berhasil
- 4.
Kelola Data Latihan tambah,
edit
, hapus, dan
view
Berhasil
- 5.
Kelola Data
Member
tambah,
edit
, hapus, dan
view
Berhasil
- 6.
Logout
Berhasil
-
Tahap selanjutnya dalam pengujian sistem adalah pengujian dari berbagai
browser
dan
mobile device
. Berikut ini adalah hasil dari pengujian aplikasi yang telah dilakukan guna mengetahui
design responsive
sistem berjalan dengan baik.
Gambar 10 Uji Melalui
Browser
Mozilla Firefox
Gambar 10 merupakan salah satu uji coba aplikasi ke sebuah
testing responsive
web
yang dimiliki oleh mattkersley yang beralamat domain
http:mattkersley.comresponsive
dengan menggunakan
browser Mozilla
Firefox
versi 27.0.1.
Gambar 11 Uji Melalui Apple iPhone 4s
Pada gambar 11 merupakan pengujian aplikasi terhadap
device smartphone
tipe Apple iPhone 4s.
Gambar 12 Uji Melalui Samsung Galaxy S3
Pada gambar 12 merupakan pengujian aplikasi terhadap
device smartphone
tipe Samsung Galaxy S3.
Gambar 13 Uji Melalui Apple iPad
Pada gambar 13 merupakan pengujian aplikasi terhadap
device
tablet tipe Apple iPad.
Gambar 14 Uji Melalui Laptop Acer Aspire One
Pada gambar 14 merupakan pengujian aplikasi terhadap
device
laptop tipe acer aspire one.
Gambar 15 Uji Melalui
Desktop
Komputer
Pada gambar 15 merupakan pengujian terhadap
device
komputer dengan ukuran layar lebih dari 1200 pixel. Dari hasil pengujian aplikasi dari berbagai
browser
dan
mobile device
terlihat bahwa
responsive web design
dalam aplikasi berfungsi dengan baik dan lancar.
Tahap pengujian selanjutnya adalah tahap uji responden yang melibatkan 25 orang responden yang memiliki keterkaitan dengan sistem yang dibangun.
Pengujian user siswa dilakukan dengan memberikan penilaian untuk menghitung persentase hasil.
Gambar 16 Uji Responden Sebagai Siswa
Gambar 16 merupakan hasil pengujian sebagai
user
siswa melibatkan 25 orang responden menyatakan bahwa tampilan
interface
sistem yang dapat menyesuaikan layar
device
sangat menarik, dalam penggunaannya mudah digunakan, nada dalam pembelajaran Bahasa Mandarin menjadi mudah
dimengerti, dan juga materi yang menarik dalam pembelajaran Bahasa Mandarin.
Gambar 17 Uji Responden Guru Sebagai Administrator
Gambar 17 merupakan hasil pengujian guru sebagai administrator menyatakan bahwa tampilan
interface
sistem yang dapat menyesuaikan layar
device
sangat menarik, dalam penggunaannya mudah digunakan, sudah mencakup semua pengolahan materi, dan layanan juga sudah sesuai dengan yang diharapkan.
5. Simpulan
