BAB 1 PENDAHULUAN. SDLC ( Software Development Life Cycle ) merupakan tahapan kerja yang

(1)

BAB 1 PENDAHULUAN 1.1. Latar Belakang

SDLC ( Software Development Life Cycle ) merupakan tahapan kerja yang digunakan oleh tim pengembang perangkat lunak dalam membuat sebuah perangkat lunak termasuk perangkat lunak yang berbsais website . Dalam metode pengembangan waterfall, secara umum SDLC ( Software Development Lifecycle ) terbagi menjadi 7 fase yaitu perencanaan, analisis, desain, pengembangan, pengujian, implementasi dan pemeliharaan . Seluruh fase yang ada dalam SDLC ( Software Development Lifecycle ) memiliki pengaruh yang sangat penting terhadap kualitas perangkat lunak atau website yang dihasilkan.

Pada fase ke 4 yaitu fase pengembangan atau umum dikenal dengan fase

coding , tim programmer mengimplementasikan seluruh rancangan website sesuai dengan dokumentasi yang telah dibuat oleh seorang analyst pada fase sebelumnya. Tim programmer menggunakan beberapa jenis kode bahasa pemrograman tertentu dalam fase ini.

Proses coding dibagi menjadi 2, yaitu front-end coding dan back-end coding . Pada proses front-end coding, tim programmer membuat tampilan website

berdasarkan desain/ mockup yang telah dibuat sebelumnya oleh seorang UI designer . Proses ini terbilang sangat penting karena terkait dengan tampilan

(2)

sebuah website . Tanpa adanya tampilan website , sistem dan manusia tidak bisa melakukan interaksi timbal-balik. Tim programmer yang menulis kode-kode untuk tampilan sebuah website disebut front-end programmer . Bahasa yang digunakan antara lain ialah HTML ( Hypertext Markup Language ), CSS ( Cascading Stylesheet ), dan JS ( Java Script ). HTML ( Hypertext Markup Language ) digunakan untuk membentuk rangka dari sebuah website , CSS ( Cascading Stylesheet ) digunakan untuk mempercantik tampilan website dan (JS)

JavaScript digunakan untuk menangani animasi-animasi dalam sebuah tampilan

website .

Dari ketiga bahasa pemrograman tersebut, CSS ( Cascading Style Sheet ) merupakan kode yang relatif lebih banyak akan dituliskan oleh seorang front-end programmer dalam sebuah proyek website . Dalam penulisannya, CSS ( Cascading Stylesheet ) menggunakan id, class dan tag HTML ( Hypertext Markup Language ) untuk mengidentifikasi sebuah komponen/objek guna dapat menambahkan sifat-sifat yang berkaitan dengan tampilan seperti warna, ukuran, posisi dan lain lain.

Setiap front-end programmer memiliki gaya masing-masing dalam menamai

id atau class dalam penulisan kode CSS ( Cascading Stylesheet ). Gaya penulisan yang digunakan oleh seorang front-end programmer ini disebut sebagai coding style . Coding-style ditujukan agar penulisan kode CSS (Cascading Stylesheet)

(3)

lebih teratur, mudah diimplementasikan, mudah dibaca bahkan dimodifikasi ulang oleh front-end programmer itu sendiri. Namun, coding-style sangatlah intuitif dan elusif sehingga membuat kode yang dituliskan sangat personal. Nama

class atau id akan mudah dipahami dan dimengerti oleh programmer itu sendiri secara individu. Namun akan sangat sulit jika dibawa ke dalam sebuah tim yang mengharuskan seorang programmer berkolaborasi dengan programmer lain ,

mengingat coding-style dari masing-masing programmer berbeda-beda. Oleh karena itu, muncullah istilah coding-standard yang merupakan seperangkat aturan baku yang telah disepakati bersama dengan maksud untuk penyelarasan gaya penamaan kode CSS ( Cascading Stylesheet ) sehingga mempermudah kolaborasi dalam proses pengembangan sebuah website .

Saat ini ada beberapa metode penulisan CSS( Cascading Style Sheet ) yang dirancang khusus sebagai coding standard diantaranya yaitu BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Stylesheet ). Kedua metode tersebut dikembangkan dengan pendekatan yang berbeda yaitu

component-based untuk metode BEM ( Block Element Modifier ) dan

object-oriented untuk metode OOCSS ( Object Oriented Cascading Stylesheet ). Perbedaan pendekatan yang digunakan membuat kedua metode tersebut memiliki aturan penulisan dan karakteristik struktur kode yang berbeda. Tentu hal ini memberikan perbedaan efek di dalam berbagai aspek dalam satu proses SDLC

(4)

( Software Development Life Cycle ).

Dari situ, dibutuhkanlah sebuah standarisasi baku yang dapat menjadi acuan penilaian dari sebuah coding standard . Standarisasi ini berguna juga untuk mendefinisikan sifat dari masing-masing coding standard sehingga sebuah tim

programmer dapat dengan tepat mengetahui dan memilih coding standard mana yang cocok digunakan atau diimplementasikan di dalam sebuah proyek pengembangan website .

ISO-9126 dirancang sebagai standar sebuah software /produk teknologi. Di dalamnya terdapat beberapa variabel penilaian tentang bagaimana acuan kelayakan sebuah software/ produk teknologi. Dengan adanya beberapa variabel standarisasi tersebut, diharapkan agar setiap software /produk teknologi dapat dirancang sedemikian rupa memperhatikan aspek-aspek tertentu. Sehingga dalam penggunaannya, sebuah software/ produk teknologi tersebut dapat benar-benar efisien secara maksimal sebagai alat bantu menuntaskan pekerjaan manusia.

BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) ialah salah dua konsep metodologi yang berperan layaknya sebuah

software/ produk teknologi yaitu sebagai alat yang digunakan untuk mempermudah pekerjaan manusia dalam menyelesaikan masalah tertentu, pada kasus ini ialah proses front-end coding dengan CSS ( Cascading Style Sheet ). Kembali pada pembahasan di atas bahwa BEM ( Block Element Modifier ) dan

(5)

OOCSS ( Object Oriented Cascading Style Sheet ) menggunakan pendekatan yang berbeda dalam merumuskan bagaimana masing-masing aturan metodologi bekerja. Perbedaan pendekatan dasar ini tentu mempengaruhi bagaimana kedua metodologi ini memberikan dampak terhadap para front-end programmer yang menggunakannya.

1.2. Latar Belakang

Berdasarkan latar belakang yang telah diuraikan di atas, maka disimpulkan sebuah rumusan masalah yaitu “Bagaimana komparasi usability dan efficiency

antara penggunaan metode BEM (Block Element Modifier) dan OOCSS (Object Oriented Cascading Stylesheet) sebagai front-end coding standard ?”

1.3. Batasan Masalah

Adapun batasan masalah dari permasalahan ini adalah :

1. Variabel bebas dalam penelitian ini yaitu usability dan efficiency diadaptasi dari standarisasi ISO 9126.

2. Objek penelitian yaitu 3 halaman publik pada website Tokopedia yaitu halaman home, search results dan product detail .

3. Front-end website dibuat hanya untuk tampilan desktop, tidak responsif terhadap tampilan mobile, tablet dan perangkat lainnya dengan ukuran layar yang berbeda.

(6)

dan CSS ( Cascading Stylesheet) . 1.4. Tujuan Penelitian

Tujuan dari penelitian ini ialah agar dapat menjelaskan perbandingan

usability dan efficiency antara penggunaan metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) sebagai front-end coding standard yang diimplementasikan pada antarmuka website tokopedia. 1.5. Manfaat Penelitian

Adapun manfaat dari penelitian ini ialah sebagai berikut : 1. Bagi peneliti.

Peneliti dapat memahami serta menjelaskan perbandingan efficiency dan

usability antara metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) sebagai front-end coding standard .

Selain itu, hasil penelitian ini menghasilkan analisis karakteristik struktur kode pada level efficiency dan usability. Sehingga kedepannya dapat dilakukan penelitian lanjutan yang berkaitan dengan coding standard atau pengembangan metode penulisan kode lainnya.

2. Bagi pembaca.

Dapat memahami perbandingan efficiency dan usability metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) sebagai front-end coding standard sehingga mempermudah pemilihan

(7)

metode yang akan digunakan saat akan membuat/mengembangkan sebuah

website dikemudian hari. 1.6. Kontribusi Penelitian

Penelitian ini memberikan kontribusi baik dalam dunia pembelajaran maupun dalam dunia kerja. Dalam pembelajaran, penelitian ini akan memberikan penjelasan serta pemahaman mengenai perbandingan efficiency dan usability

metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) sebagai front-end coding standard . Hasil dari penelitian ini juga dapat dikembangkan lagi dalam bentuk penelitian lanjutan yang berkaitan dengan

coding-standard atau pengembangan metode penulisan kode lainnya.

Sementara dalam dunia kerja, para pengembang akan akan dengan mudah menganalisa serta memilih metode mana yang akan digunakan dalam proses pembuatan/pengembangan sebuah website .

(8)

BAB 2

TINJAUAN PUSTAKA 2.1. Dasar Teori

2.1.1. Analisis

Analisis adalah penyelidikan terhadap suatu peristiwa (karangan, perbuatan, dan sebagainya) untuk mengetahui keadaan yang sebenarnya (sebab-musabab, duduk perkaranya, dan sebagainya) (KBBI, 2002:43).

Dari penjelasan di atas, dapat disimpulkan bahwa analisis merupakan sebuah aktifitas untuk mempelajari serta memahami dalam sebuah kondisi sebenarnya tentang fakta-fakta dalam suatu hal tertentu secara menyeluruh. 2.1.2. Komparasi

Menurut Nazir (2005: 58) penelitian komparatif adalah sejenis penelitian deskriptif yang ingin mencari jawaban secara mendasar tentang sebab-akibat, dengan menganalisis faktor-faktor penyebab terjadinya ataupun munculnya suatu fenomena tertentu.

Penelitian komparatif merupakan penelitian yang bersifat membandingkan dua atau lebih suatu hal dengan menggunakan beberapa variabel-variabel tertentu sebagai acuan penilaian. Tujuan penelitian ini ialah mencari fakta-fakta atau sifat-sifat antara hal-hal yang dikomparasikan berdasarkan kerangka berfikir tertentu.

(9)

Ada dua jenis penelitian komparatif yaitu: 1. Penelitian non-hipotesis

Dalam penelitian non-hipotesis peneliti mengadakan komparasi fenomena dengan standarnya. Oleh karena itu, sebelum memulai penelitian kancah, harus ditetapkan dahulu standarnya. Tentu saja penentuan standar ini harus dilakukan berdasarkan landasan yang kuat misalnya hukum, peraturan, hasil lokakarya, dan sebagainya. Selanjutnya standar ini dijadikan sejauh mana fenomena mencapai standar.

2. Penelitian berhipotesis

Ditinjau dari analisis data, perbedaan antara penelitian non-hipotesis dengan penelitian berhipotesis terletak pada belum dan telah dirumuskannya kesimpulan sementara oleh peneliti. Dalam peneliti non-hipotesis, peneliti belum mempunyai ancer-ancer jawaban. Penelitian mulai dengan melakukan penelitiannya, akhirnya sampai pada suatu kesimpulan yang didasarkan atas data yang diperoleh setelah melalui proses analisis. Sebenarnya langkah bagi penelitian hipotesis pun sama seperti langkah penelitian non-hipotesis, sampai dengan analisis datanya. Setelah diperoleh angka akhir dari analisis barulah peneliti menengok kembali kepada hipotesis yang telah

(10)

dirumuskannya. 2.1.3. Survey

Survei merupakan suatu metode untuk menentukan hubungan-hubungan antar variabel serta membuat generalisasi untuk suatu populasi yang dipelajari. Survei mampu mengerjakan hal tersebut karena prosedur pengumpulan data yang dipergunakan telah dibuat seragam dan telah distandarisasikan. Individu-individu yang dipilih dalam contoh (sampel) dihadapkan pada sejumlah pertanyaan yang telah ditetapkan. Jawaban dari pertanyaan diklasifikasikan secara sistematis, sehingga dapat dibuat perbandingan-perbandingan kuantitatif (Musa, 1998).

2.1.4. Uji Validitas

Uji validitas menyatakan bahwa instrumen yang digunakan untuk mendapatkan data dalam penelitian dapat digunakan atau tidak. Menurut (Sugiono, 2013) menyatakan bahwa valid berarti instrumen tersebut dapat digunakan untuk mengukur apa yang seharusnya diukur. Untuk mencari nilai validitas di sebuah item mengkorelasikan skor item dengan total item tersebut. Jika ada item yang tidak memenuhi syarat, maka item tersebut tidak akan diteliti lebih lanjut. Syarat tersebut menurut (Sugiono, 2013) harus memiliki kiriteria sebagai berikut.

(11)

b. Jika rhitung < rtabel, maka item pertanyaan tidak valid

Uji validitas instrumen dilakukan dalam beberapa langkah, yang pertama adalah dengan melakukan pengolahan data menggunakan persamaan korelasi. Adapun persamaan korelasi berdasarkan korelasi

Pearson adalah sebagai berikut.

rxy = N ∑ Y − ( )( ) X ∑ X ∑ Y N∑ − . N − ) X 2 _∑ X 2 _∑ Y 2 _∑ Y 2 Keterangan :

r _xy = koefisien korelasi pearson

N = banyak sampel

ΣX = jumlah skor keseluruhan untuk tiap item pertanyaan ΣY = jumlah skor dari seluruh item pertanyaan (skor total) Atau jika menggunakan program Microsoft Excell, maka dapat menggunakan rumus sebagai berikut.

=PEARSON([Array cell 1];[Array cell 2])

Setelah mendapatkan data koefisien korelasi Pearson maka selanjutnya dilakukan perhitungan nilai R hitung dan R table dengan masing-masing rumus sebagai berikut.

(12)

2.1.5. Eksperimen

Penelitian eksperimen adalah penelitian yang dilakukan untuk mengetahui akibat yang ditimbulkan dari suatu perlakuan yang diberikan secara sengaja oleh peneliti (Hadi, 1985).

Latipun (2002) mengemukakan bahwa penelitian eksperimen merupakan penelitian yang dilakukan dengan melakukan manipulasi yang bertujuan untuk mengetahui akibat manipulasi terhadap perilaku yang diamati.

Berdasarkan definisi dari para ahli di atas, dapat disimpulkan bahwa eksperimen merupakan suatu aktifitas memanipulasi suatu nilai pada sebuah faktor untuk melihat dampak dari perubahan nilai tersebut terhadap suatu hal.

2.1.6. Benchmark Test

Benchmark Test adalah proses pengujian beban suatu komponen atau keseluruhan sistem dari ujung ke ujung untuk menentukan karakteristik kinerja aplikasi. Benchmark Test dapat dilakukan dengan beberapa kali iterasi karena pengukuran kinerja yang ditangkap bisa bervariasi. Hal ini dikarenakan adanya perbedaan kondisi perangkat yang menjalankan sebuah sistem termasuk faktor jaringan dan lain-lain.

(13)

kategori:

a. Menguji sistem untuk mengukur bagaimana perubahan mempengaruhi karakteristik kinerjanya.

b. Menguji dan menyesuaikan sistem untuk mencapai persyaratan kinerja atau perjanjian tingkat layanan (SLA).

2.1.7. GT Metrix

GTMetrix yang beralamat https://gtmetrix.com/ mempunyai slogan “ The web should be fast ”. Alat GTMetrix membantu meningkatkan kecepatan loading , lebih efisien, dan meningkatkan performa situs sehingga para pengunjung dapat merasakan performa website yang optimal. Aturan penilaian dan peningkatan performa yang digunakan memadukan aturan Google Page Speed dan Yahoo YSlow . Setiap bagian yang kurang dijelaskan kekurangannya dan rekomendasi menurut Google Page Speed dan Yahoo Yslow . Tentu saja dengan tautan artikel terkait yang merekomendasi penyelesaian masalah.

2.1.8. Sampel

Menurut Suharsimi Arikunto (2010), sampel adalah sebagian atau wakil dari populasi yang akan diteliti. Penarikan sampel diperlukan jika populasi yang diambil sangat besar, dan peneliti memiliki keterbatasan

(14)

untuk menjangkau seluruh populasi maka peneliti perlu mendefinisikan populasi target dan populasi terjangkau baru kemudian menentukan jumlah sampel dan teknik sampling yang digunakan.

Untuk menentukan sampel dari populasi digunakan perhitungan maupun acuan tabel yang dikembangkan para ahli. Secara umum, untuk penelitian korelasional jumlah sampel minimal untuk memperoleh hasil yang baik adalah 30, sedangkan dalam penelitian eksperimen jumlah sampel minimum 15 dari masing-masing kelompok dan untuk penelitian survey jumlah sampel minimum adalah 100.

Roscoe (1975) yang dikutip Uma Sekaran (2006), memberikan acuan umum untuk menentukan ukuran sampel :

1. Ukuran sampel lebih dari 30 dan kurang dari 500 adalah tepat untuk kebanyakan penelitian.

2. Jika sampel dipecah ke dalam subsampel (pria/wanita, junior/senior, dan sebagainya), ukuran sampel minimum 30 untuk tiap kategori adalah tepat.

3. Dalam penelitian multivariate (termasuk analisis regresi berganda), ukuran sampel sebaiknya 10x lebih besar dari jumlah variabel dalam penelitian.

(15)

4. Untuk penelitian eksperimental sederhana dengan kontrol eksperimen yang ketat, penelitian yang sukses adalah mungkin dengan ukuran sampel kecil antara 10 sampai dengan 20.

2.1.9. CSS

Cascading Style Sheet (CSS) adalah salah satu bahasa desain ( style sheet language ) yang mengontrol format tampilan sebuah halaman website

yang ditulis dengan menggunakan penanda ( markup language ). CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan font. Pemisahan ini dapat meningkatkan daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifik dari sebuah tampilan, memungkinkan pembagian halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementara itu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Struktur dari CSS terdiri dari selektor, deklarasi, properti dan nilai. Sama seperti pada HTML, PHP atau bahasa pemrograman lainnya, CSS

(16)

juga memiliki aturan penulisan namun relatif sederhana contoh sebagai berikut:

Pada contoh di atas dapat dilihat bahwa Div adalah selektor,tanda kurung kurawal {} adalah deklarasi, background-color adalah properti dan green adalah nilai. Adapun cara penggunaan CSS sendiri terdiri dari beberapa metode yaitu sebagai berikut:

1. CSS ditulis sebagai atribut/elemen/bagian dari HTML itu sendiri. Pada metode ini, setiap tag HTML akan memiliki kondisi CSSnya masing-masing yang ditulis menyatu pada tag itu sendiri. Berikut

contohnya:

Berdasarkan contoh code di atas, dapat diketahui bahwa tag <p> tersebut diberi properti warna merah dan ukuran font sebesar 12px. Kelebihan metode ini adalah pada segi kecepatan penulisan maupun pembacaan data oleh komputer yang mengakses dokumen. Namun di satu sisi, metode ini tidak efisien digunakan untuk pengembangan

(17)

2. CSS ditulis di dalam tag <style> yang berada di <head> dokumen. Pada metode ini, kode-kode CSS ditulis tidak pada tag dalam <body> HTML melainkan terkumpul di dalam tag <style> dalam <head> HTML. Berbeda dengan metode yang disebutkan sebelumnya, pada metode ini, diperlukan penamaan sebagai selektor. Penamaan selektor terbagi menjadi 3 cara yaitu pertama dengan menuliskan langsung nama tag HTMLnya. Metode ini berguna untuk menerapkan sebuah nilai properti kepada seluruh tag html yang dituliskan. Ke dua yaitu dengan menggunakan id yang diawali dengan tanda pagar (#) kemudian nama idnya. Sesuai dengan namanya, metode id berarti hanya dapat diterapkan/dipanggil di satu tag HTML. Dan terakhir penggunaan class yang diawali dengan tanda titik (.) kemudian nama classnya. Metode ini paling banyak digunakan karena nilai-nilai yang telah dituliskan dapat diterapkan/dipanggil pada tag manapun dan berapa kalipun. Berikut contohnya:

(18)

Berdasarkan contoh kode di atas, dapat diketahui bahwa tag p diberikan warna merah. Ini merupakan contoh metode pertama, yaitu penulisan CSS langsung di nama tagnya. Di baris kedua, dituliskan id (#) dengan nama navigasi yang berisi properti tinggi dengan nilai 10px. Baris terakhir, dituliskan class (.) dengan nama menu yang berisi properti tinggi dengan nilai 10px.

Kemudian untuk menerapkan id atau class yang telah dituliskan, maka perlu dilakukan pemanggilan di tag HTML yang bersaangkutan. Contohnya sebagai berikut:

Berdasarkan contoh di atas, dapat diketahui bahwa sebuah tag <div> diberi id navigasi dan tag <div> yang berada di bawahnya diberikan class menu.

3. CSS ditulis di file terpisah berformat .css.

Metode ini sama persis dengan metode kedua, namun yang membedakan hanyalah dimana kode-kode CSS dituliskan. Berbeda dengan metode kedua yang menuliskan CSS pada tag <style> di dokumen HTML yang sama, pada metode ini kode-kode CSS ditulis

(19)

di file khusus berekstensi .CSS yang kemudian file ini dipanggil di dokumen HTML yang ingin menggunakannya.

2.1.10. Coding Standard

Standar berasal dari bahasa Perancis Kuno artinya titik tempat berkumpul, kemudian diserap dalam bahasa Inggris sebagai kata standard (Pengantar standardisasi, 2009).

Standar adalah spesifikasi teknis atau sesuatu yang dibakukan termasuk tata cara dan metode yang disusun berdasarkan consensus semua pihak yang terkait dengan memperhatikan syarat-syarat keselamatan, keamanan, kesehatan, lingkungan hidup, perkembangan ilmu pengetahuan dan teknologi, serta pengalaman, perkembangan masa kini dan masa yang akan datang untuk memperoleh manfaat yang sebesar-besarnya (Peraturan Pemerintah, 2000).

Dari definisi standard di atas dapat disimpulkan bahwa coding standard merupakan aturan-aturan teknis yang telah dibuat dan dirancang sedemikian rupa untuk dapat diterapkan sebagai sebuah petunjuk dalam penulisan sebuah kode.

Coding standard merupakan sebuah coding style yang telah dibakukan dan diterapkan di lingkup besar oleh kelompok-kelompok programmer yang bekerja saling berkaitan. Dengan adanya coding standard maka

(20)

sebuah kode program dapat dibaca, dipahami bahkan dikembangkan dengan lebih mudah oleh programmer itu sendiri atau programmer lain.

Coding standard juga merupakan upaya untuk menciptakan kualitas kode yang baik dan stabil dalam setiap penulisan-penulisannya walaupun dikerjakan oleh satu atau lebih programmer. Adanya coding standard

bukan hanya memberikan efek pada proses penulisan kode-kode programnya namun juga untuk menjaga performa kode-kode yang dituliskan.

2.1.11. CSS Methodology

CSS methodology merupakan sebuah coding standard yang dirancang khusus untuk menuliskan kode-kode CSS secara sistematis dan teratur. Saat ini ada banyak CSS metodologi yang telah dirancang sedemikian rupa dan bahkan beberapa diantaranya tengah populer diterapkan oleh perusahaan-perusahaan berbasis IT untuk mengembangkan produknya.

CSS metodologi dibuat dengan mengadaptasi pendekatan yang sudah ada sebelumnya seperti component based dan object oriented. Oleh karena pendekatan awal yang berbeda-beda, maka masing-masing metodologi memiliki karakteristik serta struktur kode yang berbeda pula.

(21)

2.1.12. ISO 9126

ISO ( International Standard for Standardization ) merupakan organisasi internasional non-pemerintahan yang berdiri secara independen dengan total anggota mencapai 162 orang di dalamnya. Organisasi ini membuat standarisasi-standarisasi internasional yang sebelumnya telah didiskusikan oleh para pakar yang tergabung di dalamnya sebagai upaya mendukung inovasi dan menyediakan solusi untuk tantangan global. Saat ini ISO telah mempublikasikan 22.385 standarisasi internasional dalam berbagai bidang sains dan teknologi.

ISO-9126 adalah standar internasional yang diterbitkan untuk evaluasi kualitas perangkat lunak dan merupakan pengembangan dari ISO-9001. ISO-9126 mendefinisikan kualitas produk perangkat lunak, model, karakteristik mutu, dan metrik terkait yang digunakan untuk mengevaluasi dan menetapkan kualitas sebuah produk software. Standar ISO-9126 telah dikembangkan dalam usaha untuk mengidentifikasi atribut-atribut kunci kualitas untuk perangkat lunak komputer.

Faktor kualitas menurut ISO 9126 meliputi enam karakteristik kualitas sebagai berikut:

(22)

1. Functionality (Fungsionalitas).

Kemampuan perangkat lunak untuk menyediakan fungsi sesuai kebutuhan pengguna, ketika digunakan dalam kondisi tertentu.

2. Reliability (Kehandalan).

Kemampuan perangkat lunak untuk mempertahankan tingkat kinerja tertentu, ketika digunakan dalam kondisi tertentu.

3. Usability (Kebergunaan).

Kemampuan perangkat lunak untuk dipahami, dipelajari, digunakan, dan menarik bagi pengguna, ketika digunakan dalam kondisi tertentu.

4. Efficiency (Efisiensi).

Kemampuan perangkat lunak untuk memberikan kinerja yang sesuai dan relatif terhadap jumlah sumber daya yang digunakan pada saat keadaan tersebut.

5. Maintainability (Pemeliharaan).

Kemampuan perangkat lunak untuk dimodifikasi. Modifikasi meliputi koreksi, perbaikan atau adaptasi terhadap perubahan lingkungan, persyaratan, dan spesifikasi fungsional.

(23)

6. Portability (Portabilitas).

Kemampuan perangkat lunak untuk ditransfer dari satu lingkungan ke lingkungan lain.

2.1.13. BEM

Metodologi BEM ( Block Element Modifier ) adalah aturan-aturan baku dalam penamaan untuk kelas-kelas dalam kode HTML dan CSS. Dikembangkan oleh tim di Yandex dengan tujuan untuk membantu pengembang lebih memahami hubungan antara HTML dan CSS dalam mengembangkan sebuah website.

Dalam perancangannya, BEM mengambil pendekatan

component-based sebagai konsep dasar aturan-aturan di dalamnya. Berarti di dalam aturan BEM setiap objek yang ada di dalam sebuah website adalah gabungan dari beberapa komponen yang dibuat secara terpisah satu-persatu.

Aturan dalam metode BEM (Block Element Modifier) menawarkan independensi, dimana satu block scope style hanya digunakan pada komponen dengan scope tertentu sehingga mudah untuk menebak satu class digunakan oleh siapa pun sebaliknya mudah menebak satu class berada di file mana. Dengan independensi block scope ini tentu saja menambahkan optimisme kepada front-end programmer ketika diharuskan

(24)

melakukan perubahan pada suatu style CSS karena mudahnya memprediksi efek dari perubahan yang dia lakukan.

Sesuai dengan namanya yaitu BEM yang merupakan singkatan dari

Block Element Modifier . Metode ini membagi sebuah objek menjadi 3 tingkatan aturan.

Block merupakan satu scope HTML komponen yang berdiri secara independen dan tidak memiliki ketergantungan. Biasanya komponen HTML terdefinisi sebagai Block bila dia merupakan sekumpulan objek dalam satu scope yang memiliki satu fungsi yang jelas dan bisa didefinisikan dengan mudah.

Contoh Block yang umum ada dalam setiap website seperti header, navbar, footer, dan lain-lain. Dalam BEM ( Block Element Modifier ). Tidak ada aturan untuk penamaan dan penulisan Block secara khusus namun pastikan gunakan nama yang sederhana, bermakna dan merefleksikan fungsinya.

Element merupakan anak dari Block , element adalah hal yang bergantung pada induknya. Posisinya selalu ada di dalam sebuah Block dan tidak dapat berdiri sendiri tanpa ada Block induknya.

Contoh Element semisal ada Block yang bernama navbar, maka

(25)

navbar. Penamaan sebuah Element ialah dengan menuliskan namaBlock__namaElement. Maka dari itu, nama sebuah Element dari

Block navbar ialah navbar__item, navbar__link dan lain-lain.

Modifier merupakan tanda yang menunjukkan suatu perubahan baik kelakuan, kondisi, maupun tampilan dari suatu Element ataupun Block , seperti contoh status active, disabled, selected atapun perubahan tampilan seperti large, small, medium dan sebagainya.

Contoh Modifier semisal ada Block yang bernama navbar yang memiliki anak element bernama item. Penulisan Modifiernya ialah dengan menuliskan namaInduk__namaAnak—namaModifier. Maka dari itu nama sebuah modifier dari sebuah Block navbar yang memiliki Element item contohnya navbar_item—active, navbar__item-disabled dan lain-lain. 2.1.14. OOCSS

Metodologi OOCSS ( Object Oriented Cascading Style Sheet ) merupakan sebuah konsep konversi nama kelas-kelas pada HTML dan CSS yang dikembangkan oleh Nicole Sullivan dimana metode ini menggunakan pendekatan object-oriented dalam aturan-aturan yang ada di dalamnya.

Setiap komponen yang ada terhubung langsung dengan objek induknya. OOCSS ( Object Oriented Cascading Style Sheet ) didesain agar dapat mempercepat dan memberikan efisiensi kerja dalam setiap proyek

(26)

website yang dikerjakan. Berikut ialah beberapa prinsip dasar dari konsep OOCSS ( Object Oriented Cascading Style Sheet ) :

Prinsip pertama yaitu memisahkan struktur dengan kulit. Hampir setiap elemen pada halaman web memiliki efek visual yang berbeda dalam hal ini dinamakan sebagai kulit. Efek visual tersebut diulang dalam konteks yang berbeda seperti warna flat, penggunaan gradien halus, atau border dari setiap elemen. Di sisi lain, ada sebuah struktur yang umumnya tidak terlihat namun diulangi dalam konteks yang berbeda seperti bentuk tombol, bentuk form dll.

Contoh dari prinsip pertama ialah ada berbagai macam ukuran tombol dan berbagai macam warna tombol. Maka berdasarkan prinsip OOCSS ( Object Oriented Cascading Style Sheet ) kita harus memisahkan class

antara gaya struktur dan gaya visual dari komponen tombol. 2.1.15. Website

Menurut Abdul Kader (2005), website adalah suatu metode untuk menampilkan informasi di internet baik berupa teks, gambar, suara, maupun video yang interaktif dan mempunyai kelebihan untuk menghubungkan ( link ) satu dokumen lainnya ( hypertext ) yang dapat diakses melalui sebuah browser .

(27)

menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman ( hyperlink ).

Website bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website . Website

bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna

website .

Contoh website statis adalah berisi profil perusahaan, sedangkan

website dinamis adalah seperti Friendster , Multiply , dan lain-lain. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun pemilik selama memiliki akses akun admin.

2.1.16. Tokopedia

Tokopedia merupakan sebuah startup digital yang bergerak sebagai salah satu e-commerce terbesar di Indonesia. Sebagai sebuah platform

e-commerce, Tokopedia memiliki kompleksitas komponen yang relatif tinggi pada setiap laman di situsnya. Berikut merupakan laman antarmuka

(28)

situs tokopedia yang akan dijadikan objek pada penelitian ini.

Gambar 2.1 Halaman utama Tokopedia

Halaman ini merupakan halaman utama yang akan ditampilkan ketika seorang pengunjung mengakses situs Tokopedia. Pada laman ini, terdapat menu-menu yang dikumpulkan pada navigasi bar bagian atas. Selain itu, terdapat juga slider carousel yang menampilkan banner penawaran untuk para pengunjung, fitur Top-Up , toko official, beberapa item jualan terpilih

(29)

dan lain-lain.

Gambar 2.2 Halaman pencarian produk

Halaman ini merupakan halaman ketika user melakukan pencarian produk. Selain menampilkan produk-produk sesuai dengan keyword yang diinputkan pengguna, di bagian sisi kiri terdapat berbagai macam filter demi memudahkan pengguna dalam menyaring produk yang ditampilkan.

(30)

Gambar 2.3 Halaman detail produk

Halaman ini merupakan halaman yang berfungsi untuk menampilkan detail dari barang yang dipilih oleh pengguna. Detail yang ditampilkan berupa foto, deskripsi, harga, review dari pembeli lain dan sebagainya. 2.2. Penelitian Terdahulu

Beberapa penelitian yang berkaitan dengan CSS metodologi sudah pernah dilakukan sebelumnya. Penelitian Yanqing Wang, Bo Zheng, Hujie Huang (2008)

(31)

Style: A Quality Outlook at Source Code Level” meneliti tentang perbedaan antara coding-standard dan coding-style serta kaitannya dengan kualitas kode yang dihasilkan oleh programmer.

Secara umum coding-standard dan coding-style sama-sama merupakan kumpulan aturan pada level penulisan kode. Yang membedakan antara keduanya ialah coding-standard merupakan sebuah aturan-aturan yang dibuat dan disepakati secara masal sementara coding-style merupakan aturan-aturan berdasarkan gaya menulis programmer secara individu. Hasilnya, kode program yang menggunakan coding-standard dalam proses pengembangannya lebih dapat menjamin kualitas dari kode yang dihasilkan.

Mohamed Belal, Ayman Khedr, Ahmed Gohar (2012), dalam penelitiannya yang berjudul “Framework between component and object” melakukan komparasi konsep object-oriented dengan component-based dalam proses pengembangan aplikasi perangkat lunak . Komparasi dilakukan berdasar dari sudut pandang teoritikal dan praktikal masing-masing konsep. Hasilnya, dari 6 variabel yang menjadi poin perbandingan, konsep component-based relatif lebih baik dibandingkan dengan konsep object-oriented .

Agus Sukocol, dengan penelitian berjudul “Penggunaan standard iso 9126 untuk mengevaluasi keefektifan perangkat lunak” melakukan pengujian efektifitas sebuah perangkat lunak dengan menggunakan standar iso 9126

(32)

sebagai acuannya.

Beberapa penelitian terdahulu yang telah dipaparkan di atas menjadi dasar pada penelitian ini. Jika diurutkan dari penelitian pertama, telah dijelaskan bahwa sebuah coding standard merupakan sebuah alternatif dalam upaya menjamin kualitas kode program. Kemudian penelitian selanjutnya yang mengkomparasikan konsep pendekatan component based dan object-oriented

dengan sudut pandang teoritikal dimana component based relatif lebih baik terhadap object oriented . Dan terakhir penggunaan standarisasi ISO 9126 dalam evaluasi sebuah perangkat lunak.

Evin Nofia Delta, Asmunin (2016), “Performance test dan stress website menggunakan open source tools” membahas tentang beberapa open source tools yang kemudian digunakan untuk pengujian performa dan tekanan terhadap tiga buah website yaitu unesa.ac.id, if.unesa.ac.id dan website detik.com. Hasilnya, dari segi performance website unesa.sch.id. Sedangkan dari uji stress website, ratarata persentase error website unesa.ac.id sebesar 100 %, website if.unesa.ac.id sebesar 53.92% dan website detik.com sebesar 52.38%.

Jika ditarik benang merah antara empat penelitian terdahulu sebagaimana telah dijelaskan di atas. Maka penelitian ini merupakan penelitian selaras yang mengkomparasikan dua buah coding standard yang memiliki pendekatan berbeda yaitu component based dan object oriented dengan menggunakan

(33)

standarisasi ISO 9126 sebagai acuan variabelnya dan tools open source untuk melakukan pengujian.

Tabel 2.1 Penelitian terdahulu

No Judul Penjelasan Peneliti

1 Complying with Coding Standards or Retaining

Programming Style: A Quality Outlook at Source Code Level

Membahas perbedaan antara coding-standard dan

coding-style serta kaitannya dengan kualitas kode yang dihasilkan oleh programmer yang menggunakannya.

Yanqing Wang, Bo Zheng, Hujie Huang (2008)

2 Framework between component and object

Melakukan komparasi konsep object-oriented dengan component-based dalam proses pengembangan aplikasi perangkat lunak. Komparasi dilakukan berdasar dari sudut pandang teoritikal dan

praktikal masing-masing

Mohamed Belal, Ayman Khedr, Ahmed Gohar (2012)

(34)

konsep.

3 Penggunaan standard iso 9126 untuk mengevaluasi

keefektifan perangkat lunak

Melakukan pengujian efektifitas sebuah perangkat lunak dengan menggunakan standar iso 9126 sebagai acuannya.

Agus Sukocol

4 Performance test dan stress website menggunakan open source tools.

Membahas tentang beberapa open source tools yang kemudian digunakan untuk melakukan pengujian performa dan tekanan terhadap tiga buah website yaitu unesa.ac.id , if.unesa.ac.id , dan detik.com .

Ervin Nofia Delta, Asmunin (2016)

(35)

BAB III

METODOLOGI PENELITIAN 3.1. Waktu dan Tempat Penelitian

Penelitian akan dilaksanakan pada tanggal 1 Desember 2018 sampai dengan 30 Januari 2019 dan dilaksanakan di Laboratorium Bahasa Pemrograman (Puskom) Fakultas Ilmu Komputer dan Teknologi Informasi dan Komunikasi Universitas Mulawarman, Samarinda, Kalimantan Timur.

Tabel 3.1 Jadwal penelitian

Agenda Mei Juni Minggu 1 Minggu 2 Minggu 3 Minggu 4 Minggu 1 Minggu 2 Minggu 3 Minggu 4 Pembuatan dokumentasi desain sistem Pengimplementasian kode program

Validasi kode program

dengan dokumentasi Perancangan kuisioner Penyebaran kuisioner Analisis dan penyimpulan hasil akhir

(36)

3.2. Jenis Penelitian

Penelitian ini menggunakan pendekatan kuantitatif yang diimplementasikan pada survey dan eksperimen dimana survey digunakan untuk mendapatkan data kuantitatif dari segi usability dan eksperimen untuk data kuantitatif dari segi

efficiency . Hasil dari penelitian ini bersifat deskriptif, yaitu mendeskripsikan bagaimana komparasi perbandingan usability serta efficiency dari metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) sebagai sebuah coding standard pada e-commerce yang diimplementasikan pada antarmuka situs Tokopedia.

3.3. Objek dan Subjek Penelitian

Dalam penelitian ini terdapat 2 kegiatan yang dilakukan peneliti untuk mengumpulkan data sesuai dengan yang telah disebutkan di atas yaitu survey dan eksperimen. Masing-masing kegiatan memiliki subjek dan objek yang berbeda. Subjek untuk survey adalah front-end programmer sementara objeknya adalah teori dari metode BEM ( Block Element Modifier ) serta OOCSS ( Object Oriented Cascading Style Sheet ) sedangkan subjek untuk eksperimen ialah desain antarmuka dari situs Tokopedia dengan kode yang menggunakan metode BEM ( Block Element Modifier ) serta OOCSS ( Object Oriented Cascading Stylesheet ) sebagai objeknya.

(37)

3.4. Teknik Pengambilan Sampel

Teknik pengambilan sampel yang digunakan untuk untuk uji usability adalah teknik Stratified Random Sampling dimana subjek penelitian dipisahkan menjadi beberapa kelompok-kelompok strata tertentu (Sukaria, 2011).

Penggunaan teknik Stratified Random Sampling sangat cocok digunakan mengingat adanya strata/tingkatan dalam himpunan populasi dari subjek kelompok yaitu front-end programmer. Oleh karena itu front-end programmer

akan dibagi lagi menjadi 2 kelompok yaitu junior front-end programmer dan senior front-end programmer . Front-end programmer junior ialah mereka yang telah bekerja kurang dari 3 tahun sedangkan front-end programmer senior ialah mereka yang telah bekerja lebih dari 3 tahun.

Untuk pengujian efficiency, teknik pengambilan sampel yaitu dengan melakukan eksperimen. Eksperimen dilakukan dengan menerapkan BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Stylesheet ) pada desain antarmuka website Tokopedia. Kemudian dilakukan benchmark testing

pada kode CSS ( Cascading Style Sheet ) yang dihasilkan oleh masing-masing metode.

Mengacu pada Roscoe (1975), dikutip Uma Sekaran (2006) menyebutkan bahwa jumlah data yang digunakan untuk sampel yang dipecah berdasarkan sub-sampel dalam hal ini pada subjek kuesioner yaitu junior dan senior front-end

(38)

programmer adalah 30 sampel untuk setiap kategori sub-sampelnya. Sedangkan untuk pengujian eksperimen adalah dengan menggunakan 10 kali iterasi. Maka dari itu, dalam eksperimen ini akan dilakukan 10 kali iterasi pengujian untuk setiap metode baik BEM (Block Element Modifier) dan OOCSS (Object Oriented Cascading Stylesheet).

3.5. Variabel Penelitian

Pada penelitian ini, terdapat 2 variabel bebas yang diambil dari standarisasi ISO-9126 yaitu sebagai berikut:

Tabel 3.2 Deskripsi Variabel

No Variabel Deskripsi Variabel Sub Variabel

1 Usability Kemampuan untuk dipahami, dipelajari, digunakan, dan menarik bagi pengguna saat digunakan.

- Understandability - Learnability - Operability - Attractiveness

2 Efficiency Kemampuan memberikan kinerja yang sesuai dan relatif terhadap sumber daya yang digunakan.

- Time behavior - Resource behavior

(39)

3.6. Data dan Pengumpulan Data 3.6.1 Sumber Data

Sumber data yang digunakan dalam penelitian ini adalah data primer dan data sekunder dimana data primer didapat dari hasil survey serta eksperimen pengujian kode sedangkan data sekunder didapat dari studi pustaka dan jurnal-jurnal.

3.6.2 Metode Pengumpulan Data

Teknik pengumpulan data dalam penelitian ini adalah sebagai berikut: a. Studi Literatur

Studi literatur pada penelitian ini digunakan sebagai referensi terkait komparasi metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) sebagai sebuah coding standard . Literatur yang digunakan berupa jurnal, buku, artikel dan

e-book . b. Survey

Survey akan dilakukan dengan menggunakan media formulir online sebagai tempat menaruh kuesioner. Survey dilakukan untuk melakukan uji kuantitatif terhadap variabel usability dari metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented cascading Style Sheet ) sebagai sebuah coding standard .

(40)

Berikut tahapan-tahapan dalam melakukan survey:

1. Peneliti menyusun kerangka pertanyaan yang sesuai dengan variabel penelitian usability. Di awal kuesioner juga dicantumkan link berisi dokumentasi tentang metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) agar mempermudah pengisi memahami poin dari masing-masing pertanyaan.

2. Peneliti melakukan uji validitas dan reliabilitas untuk setiap poin-poin pertanyaan pada kuesioner agar kuesioner dapat menghasilkan data yang valid serta reliabel.

3. Peneliti membuat form melalui platform Google Form sebagai media menyebarkan dan menampung data hasil kuesioner.

4. Peneliti menyebarkan kuesioner melalui internet dengan target pengisi merupakan seorang front-end programmer. 5. Peneliti mengamati perkembangan data dan jika telah

mencapai target jumlah pengisi maka peneliti dapat menutup akses form online dan merekap data yang telah terkumpul. 6. Peneliti mengolah data yang terkumpul dan menarik

(41)

c. Eksperimen

Uji coba code dilakukan dalam beberapa sesi sebagai berikut : 1. Peneliti membuat dokumentasi dari antarmuka website

Tokopedia versi bulan november 2018 sebagai objek penelitian sesuai dengan kebutuhan metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented cascading Style Sheet ). 2. Peneliti melakukan implementasi coding terhadap antarmuka website Tokopedia sebagai objek penelitian dengan menggunakan dua metode yang berbeda yaitu BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented cascading Style Sheet ).

3. Peneliti mengupload baris kode ke hosting agar dapat dilakukan uji benchmark secara online dengan menggunakan

GTMetrix.

4. Peneliti menyiapkan satu perangkat komputer untuk benchmark test terhadap program yang telah di upload ke hosting.

5. Peneliti melakukan benchmark test berulang sebanyak 10 kali dari masing-masing program yang menggunakan metode berbeda yaitu BEM ( Block Element Modifier ) dan OOCSS

(42)

( Object Oriented Cascading Style Sheet ) untuk mendapatkan data kuantitatif dari segi efficiency .

6. Peneliti mengumpulkan data yang dihasilkan dari hasil

benchmark test yang telah dilakukan sebelumnya.

7. Peneliti mengolah data yang telah dikumpulkan dan menarik kesimpulan hasil eksperimen.

3.7 Analisis Data 3.7.1 Kuesioner

Sebelum melakukan pengolahan data, kuesioner diuji validitas dan reliabilitasnya agar data yang dihasilkan dapat valid dan reliabel. Setelah berhasil maka data-data akan digunakan untuk interpretasi skala likert yang kemudian hasilnya akan disajikan dalam grafik usability dimana grafik ini akan menggambarkan bagaimana respon para responden terhadap metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ) dari sisi usability.

Setelah itu, dapat dilakukan analisis komparasi perbandingan antara kedua metode tersebut. Analisis ini kemudian menghasilkan kesimpulan yang akan dijabarkan secara deskriptif dan lugas.

(43)

3.7.2 Eksperimen

Untuk percobaan eksperimen, masing-masing metode akan menghasilkan data sampel sebanyak 10 data. Kemudian, data dari masing-masing metodologi diambil nilai tengahnya dengan cara membagi jumlah total nilai dengan banyak data sehingga didapatkan nilai tunggal. Nilai tunggal ini kemudian menjadi nilai yang dikomparasikan antara kedua metode pada penelitian ini yaitu BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ).

3.7.3 Perangkat Penelitian

Perangkat lunak yang digunakan dalam penelitian ini ialah Google Spread Sheet, Google Document, Google chrome, Visual Studio Code, dan Xampp. Sedangkan perangkat keras yang digunakan yaitu Laptop Macbook Pro 2017 dengan spesifikasi sebagai berikut :

● CPU Intel Core i5 ● RAM 8GB GDDR3 ● SSD 128GB

● Operating System MacOS Catalina 3.7.4 Tahapan Penelitian

Adapun pada penelitian ini terdapat tahap-tahap yang akan peneliti lakukan yaitu:

(44)

Gambar 3.1 Tahapan Penelitian

Tahapan penelitian merupakan langkah-langkah yang ditempuh dalam melakukan suatu penelitian demi mendapatkan sebuah informasi yang dibutuhkan untuk penelitian tersebut serta sebagai acuan pelaksanaan penelitian. Berikut penjelasan tahapan penelitian pada gambar diatas:

1. Mengidentifikasi dan memilih masalah.

Masalah timbul dari analisis terhadap kondisi/ isu-isu real di lapangan yang diidentifikasi dalam artian apakah masalah itu penting untuk diteliti atau tidak.

1. Melakukan kajian pustaka.

Mencari dan memahami teori teori yang berkaitan dengan seluruh rangkaian penelitian yang akan dilakukan.

(45)

3. Merumuskan masalah

Rumusan masalah yang telah diidentifikasi sebelumnya dipelajari dengan teori-teori yang didapatkan dari kajian pustaka.

4. Merumuskan tujuan penelitian

Tujuan penelitian yaitu ungkapan sasaran yang ingin dicapai pada sebuah penelitian.

5. Menjelaskan manfaat penelitian

Pada langkah ini, kegunaan dari penelitian harus dijabarkan. Manfaat bisa berarti manfaat untuk peneliti, pembaca atau masyarakat secara umum. 6. Menentukan variabel penelitian

Variabel sangat penting karena merupakan sebuah acuan berpengaruh dalam menyusun instrumen penelitian.

7. Menyusun desain penelitian

Dalam menyusun desain penelitian perlu diperhatikan unsur-unsur penting, antara lain : latar belakang masalah, rumusan masalah, tujuan penelitian, manfaat hasil penelitian, metode penelitian, pengumpulan dan analisis data.

8. Menentukan objek dan subjek penelitian

Pemilihan objek dan subjek penelitian sebagai sumber data dalam penelitian ini..

(46)

9. Menyusun instrumen penelitian

Instrumen adalah alat yang digunakan untuk mengukur variabel yang diteliti. Instrumen atau alat pengumpul data harus sesuai dengan tujuan penelitian.

10. Menguji instrumen penelitian

Instrumen penelitian yang telah dirancang sebelumnya diuji dengan uji validitas agar instrumen tersebut dapat menghasilkan data yang valid.

11. Melakukan dokumentasi metode

Kedua metode yang akan digunakan dalam bereksperimen akan terlebihdahulu didokumentasikan sesuai dengan desain antar muka situs Tokopedia. Hal ini agar adanya acuan dalam pengimplementasian metode. 12. Mengumpulkan data

Data-data yang diperoleh dikumpulkan dan disusun sedemikian rupa sehingga memudahkan pengolahan data pada proses setelahnya.

13. Mengolah data

Setelah data terkumpul dan dinyatakan lengkap, data tersebut kemudian diolah dan dan disajikan dengan ringkas agar di tahap selanjutnya dapat disimpulkan secara deskriptif terkait dengan variabel-variabel yang diteliti. 14. Menarik kesimpulan dan saran

(47)

membentuk kesimpulan-kesimpulan yang dapat dengan lugas menjawab rumusan masalah pada penelitian ini..

15. Menyusun laporan

Akhir dari kegiatan penelitian adalah menyusun laporan sesuai dengan sistematika yang ditentukan.

(48)

BAB IV

HASIL DAN PEMBAHASAN 4.1 Data Penelitian

Penelitian ini menggunakan survey dan eksperimen dimana keduanya akan menghasilkan data penelitian yang berbeda.

4.1.1 Survey

a. Uji Instrumen Survey

Data penelitian survey didapat dengan mendistribusikan kuesioner pada para front-end programmer secara acak melalui internet. Pendistribusian kuesioner dilakukan dengan media google form

dengan waktu pendistribusian selama 1 minggu.

Namun sebelum diedarkan, kuesioner diuji dulu validitasnya dan hasilnya adalah sebagai berikut.

Tabel 4.1 Hasil Uji Validitas Kuesioner BEM (10 data)

Variabel Item R hitung R tabel Status

Understandability x 1 -1,767766953 1,859548038 Valid x 2 -0,1309892245 1,859548038 Valid x 3 1,174581082 1,859548038 Valid x 4 -0,53393905 1,859548038 Valid x 1 -1,209665714 1,859548038 Valid

(49)

x 3 1,70260705 1,859548038 Valid x 4 -0,4038035721 1,859548038 Valid Operability x 1 0,4038035721 1,859548038 Valid x 2 1,216260639 1,859548038 Valid x 3 -1,442711312 1,859548038 Valid x 4 4,829906831 1,859548038 Tidak Valid Attractiveness x 1 1,427236633 1,859548038 Valid x 2 1,543220977 1,859548038 Valid x 3 0,8172062695 1,859548038 Valid x 4 1,672025081 1,859548038 Valid

Tabel 4.2 Hasil Uji Validitas Kuesioner OOCSS (10 data)

Variabel Item R hitung R tabel Status

Understandability x 1 1,398118168 1,859548038 Valid x 2 0,6895691539 1,859548038 Valid x 3 1,267727196 1,859548038 Valid x 4 1,326977605 1,859548038 Valid Learnability x 1 -1,165679601 1,859548038 Valid x 2 1,323645043 1,859548038 Valid x 3 -0,2044285811 1,859548038 Valid x 4 0,4677121857 1,859548038 Valid Operability x 1 0,2681606093 1,859548038 Valid x 2 0,04449941595 1,859548038 Valid x 3 2,563592814 1,859548038 Tidak Valid x 4 0,9451120119 1,859548038 Valid Attractiveness x 1 0,9899494937 1,859548038 Valid x 2 1,413127377 1,859548038 Valid x 3 1,045787209 1,859548038 Valid

(50)

Dari hasil uji di atas, ada beberapa item yang nilainya tidak valid. Oleh karenanya, item tersebut tidak akan digunakan untuk selanjutnya.

b. Data Partisipan Survey

Total data kuesioner yang didapatkan ialah sebanyak 60 data terdiri dari 30 front-end programmer junior dan 30 front-end programmer senior. Seluruh data kuesioner memenuhi kelayakan sehingga seluruhnya dapat langsung digunakan untuk tahap selanjutnya. Berikut data partisipan kuesioner yang akan disajikan dalam tabel 4.5.

Tabel 4.5 Data partisipan kuesioner

No Nama Memahami CSS Lama Bekerja Status

1 Responden 1 Ya < 3 Tahun Junior

(51)

(52)

(53)

32 Responden 32 Ya > 3 Tahun Senior

(54)

(55)

Berdasarkan tabel 4.4 di atas maka dapat diketahui bahwa seluruh partisipan merupakan seorang front-end programmer yang telah memahami dasar pemrograman CSS ( Cascading Style Sheet ) dan terklasifikasi menjadi dua kelompok yaitu junior dan senior front-end programmer berdasarkan lama bekerja.

(56)

c. Data Hasil Survey

(57)

(58)

(59)

(60)

d. Interpretasi Skala Likert

Untuk interpretasi menggunakan skala likert digunakan skor untuk tiap-tiap skala yang bertujuan memberikan nilai pada tiap jawaban pada kuesioner seperti pada tabel 4.4 berikut.

Tabel 4.6 Nilai Skala Likert

No Skala Nilai

1 TIDAK SEPAKAT 1

(61)

3 SEPAKAT 3

Untuk menghitung interval skala likert digunakan rumus sebagai berikut.

I = 100 / banyaknya skala likert I = 100 / 3

I = 30.3

Maka, dari rumus di atas didapatkan interval skala likert seperti pada tabel 4.7.

Tabel 4.7. Interval Skala Likert

No Skala Interval (%)

1 TIDAK SEPAKAT 0% - 33.3%

2 RAGU-RAGU 33.4% - 66.6%

3 SEPAKAT 66.7% - 100%

Setelah interval skala likert diketahui, maka interpretasi skala likert dapat dilakukan menggunakan persamaan dengan rumus sebagai

(62)

X = T * P _n Dimana,

X = nilai tunggal skala likert

T = jumlah responden yang memilih P _n = skor skala likert

Contoh perhitungan hasil data skala likert sebagai berikut: Responden yang menjawab tidak sepakat = 40 * 1 = 40 Responden yang menjawab ragu-ragu = 11 * 2 = 22 Responden yang menjawab sepakat = 10 * 3 = 30

Total skor = 92

Setelah total skor dari item pertanyaan didapatkan, kemudian dilakukan perhitungan index (%) menggunakan rumus berikut.

Skor maksimum = jumlah responden * skor tertinggi likert = 100 * 3

= 300

Skor minimum = jumlah responden * skor terendah likert = 100 * 1

= 100

Index (%) = (total skor / skor maksimum) * 100 = (92 / 300) * 100

(63)

= 30.6

Didapatkan index (%) sebesar 30.6 dan nilai tersebut masuk dalam interval 0% - 33.3% yang berarti responden merasa tidak sepakat pada poin pertanyaan tersebut. Selanjutnya untuk mendapatkan nilai akhir untuk masing-masing variabel yang memiliki beberapa item pertanyaan maka digunakan rumus sebagai berikut:

N = P / X Σ _n

Dimana,

N = Nilai akhir variabel

P = Jumlah skor dari setiap item pertanyaan

Σ

X _n = Jumlah item pertanyaan

Di bawah ini adalah tabel interpretasi variabel X 1 , X 2 , X 3 dan X 4 setelah dilakukan perhitungan dengan menggunakan rumus di atas:

Tabel 4.8 Nilai Akhir Variabel Kuesioner BEM

No Variabel Nilai

1 Understandability 49.5

2 Learnability 46.2

(64)

4 Attractiveness 43.3

Tabel 4.9 Nilai Akhir Variabel Kuesioner OOCSS

No Variabel Nilai

1 Understandability 44.5

2 Learnability 38.7

3 Operability 40.3

4 Attractiveness 34.8

Berikut adalah grafik perbandingan Usability antara metode BEM ( Block Element Modifier ) dan OOCSS ( Object Oriented Cascading Style Sheet ).