11

1 BAB 2

TINJAUAN REFERENSI

1.1 Metodologi scrum

Scrum adalah metode pengembangan software bersifat agile yang mana prinsipnya

konsisten dengan manifesto agile dan digunakan sebagai panduan kegiatan

pengembangan software. Kegiatan pengembangan software yang dimaksud adalah

requirements, analysis, design, evolution, dan delivery. Penyelesaian tiap kegiatan

tersebut termasuk dalam sebuah proses yang disebut sprint (Pressman & Maxim, 2014,

p. 78).

Gambar 1.1 Proses Kegiatan Scrum

(Sumber: Software Engineering. A Practitioner's Approach (Pressman & Maxim, 2014))

12

Gambar di atas menunjukan alur proses kegiatan scrum beserta batasan waktu yang

sudah ditentukan pada tiap kegiatan scrum (Pressman & Maxim, 2014, p. 78). Penjelasan

mengenai proses scrum, baik tim dan kegiatannya adalah sebagai berikut:

1.1.1 Scrum team

Berdasarkan informasi yang didapat dari halaman web scrum, Ken Schwaber

dan Jeff Sutherland tim scrum terdiri dari:

1. Product owner

Dalam tim, product owner bertanggungjawab dalam mengelola

product backlog atau daftar seluruh hal yang dibutuhkan dalam produk.

Pengelolaan tersebut termasuk mendeskripsikan dengan jelas product

backlog, menyusun urutan product backlog untuk mencapai tujuan sprint,

dan memastikan product backlog transparan dan jelas untuk semua, dan

menunjukan apa yang akan dikerjakan berikutnya oleh tim scrum.

2. Development team

Development team terdiri dari sekumpulan profesional yang

mengerjakan product backlog hingga produk tersebut dapat diberikan.

Karakteristik dari development team adalah mereka menentukan sendiri

bagaimana product backlog diselesaikan, tidak ada gelar ataupun jabatan

pada development team karena semua anggota berkedudukan yang sama,

dan meskipun tiap anggota memiliki kemampuan dan area fokus yang

berbeda-beda tapi akuntabilitas adalah milik tim secara utuh.

3. Scrum master

Dalam tim scrum, terdapat satu peran yang berfungsi untuk

mendukung kegiatan scrum dengan cara membantu semua orang baik yang

berada dalam tim scrum maupun yang tidak memahami teori, aturan, dan

nilai scrum, yaitu scrum master. Scrum master dapat membantu product

owner dalam memastikan product backlog dipahami dengan benar oleh

seluruh anggota tim scrum, scrum master juga dapat membantu development

team dengan melatih development team dalam pengaturan mandiri dan lintas

fungsi dalam pengembangan produk.

13

1.1.2 Scrum events

Ken Schwaber dan Jeff Sutherland juga mengatakan dalam penerapan scrum,

salah satu aspek yang perlu dilakukan adalah scrum events. Serangkaian kegiatan yang

sudah ditentukan dibatasi oleh waktu yang sudah ditentukan juga rentang waktunya,

kegiatan-kegiatan tersebut digunakan dalam scrum untuk membuat keteraturan dalam

proses pengembangan (Pressman & Maxim, 2014). Kegiatan-kegiatan yang termasuk

dalam scrum events adalah:

1. Sprint

Sprint adalah kegiatan dengan rentang waktu sebulan atau kurang, di

mana proses penyelesaian product backlog terjadi. Terdapat beberapa aturan

saat sprint sedang berjalan, antara lain tidak boleh adanya perubahan saat

sprint yang akan membahayakan atau berpotensi memberikan dampak

buruk pada sprint goal, kualitas tujuan sprint tidak berkurang, dan cakupan

penyelesaian product backlog dapat dinegosiasi ulang antara product owner

dan development team.

2. Sprint planning

Sebelum memasuki kegiatan sprint, seluruh anggota tim scrum perlu

melakukan perencanaan kegiatan yang akan dilakukan pada sprint secara

kolaboratif, kegiatan tersebut dinamakan sprint planning. Dalam kegiatan

tersebut, hal-hal yang perlu ditetapkan adalah apa yang dapat diberikan

dalam peningkatan yang dihasilkan oleh sprint dan bagaimana penyelesaian

tugas yang dilakukan untuk mendapatkan peningkatan yang sudah dijadikan

sprint goal.

3. Daily scrum

Daily scrum adalah kegiatan yang dikhususkan untuk development

team yang dibatasi waktu 15 menit. Dalam kegiatan tersebut, tiap anggota

development team memberitahu kepada tim hal apa yang sudah dilakukan

kemarin dan apa yang akan dikerjakan hari ini. Tujuan dari daily scrum

adalah untuk memeriksa kemajuan menuju sprint goal.

4. Sprint review

14

Sprint review merupakan kegiatan yang dilakukan di akhir sprint. Saat

sprint review, scrum team dan stakeholder berkolaborasi mengenai apa yang

telah selesai dalam sprint tersebut. Product owner akan mengundang baik

scrum team maupun stakeholder untuk menghadiri sprint review, yang

kemudian akan menjelaskan tugas-tugas mana yang telah selesai dan mana

yang tidak. Development team akan menjelaskan mengenai tugas yang

sudah selesai dan memberikan demo kepada stakeholder. Pada sprint review

tersebut, seluruh tim akan berkolaborasi mengenai hal-hal apa saja yang

harus dilakukan sehingga sprint review memberikan masukan untuk sprint

planning berikutnya.

5. Sprint retrospective

Kegiatan sprint retrospective adalah kesempatan bagi seluruh anggota tim

scrum untuk menginspeksi tim itu sendiri dan membuat perencanaan

peningkatan yang akan diberlakukan pada sprint berikutnya. Penginspeksian

pada tim meliputi anggota tim atau yang bersangkutan, hubungan antar

anggota tim, proses, dan alat yang digunakan dalam sprint.

1.2 UML

UML atau Unified Modeling Language adalah serangkaian model konstruksi dan notasi

yang telah distandardisasikan dan ditetapkan oleh OMG atau Object Management Group,

yaitu sebuah organisasi untuk pengembangan system (Satzinger, Jackson, & Burd, 2015, p.

59).

Model grafis dalam pengembangan sistem Digambar berdasarkan notasi yang

ditentukan oleh UML. Model grafis dari UML terdiri dari use case diagram, class diagram,

activity diagram, sequence diagram, communication diagram, dan state machine diagram

(Satzinger, Jackson, & Burd, 2015, p. 59).

Dalam perancangan sistem untuk design system yang dibuat penulis, penulis

menggunakan dua macam model grafis UML, yaitu use case diagram dan activity diagram.

15

2.2.1. Use case diagram

Use case adalah sebuah aktivitas yang dijalankan sistem sebagai respon dari

request yang didapat dari user. Sedangkan use case diagram digunakan untuk

menggambarkan secara grafis hubungan antar use case dan user yang bersangkutan

pada sistem dan macam-macam kegiatan yang dapat dilakukan oleh user pada sistem

(Satzinger, Jackson, & Burd, 2015, p. 19).

Elemen yang terdapat pada use case diagram antara lain adalah:

1. Stick figure

Gambar stick figure pada use case diagram digunakan untuk

menggambarkan actor atau orang sebenarnya yang menggunakan sistem.

2. Connecting line

Gari penghubung atau connecting line digunakan untuk menunjukkan actor

mana yang berpartisipasi pada use case.

3. Automation boundary

Automation boundary berbentuk persegi panjang yang mana fungsinya

adalah untuk memberi batas antara use case dan actor.

4. Use case

Use case adalah aktivitas yang dijalankan dan pada use case diagram, use

case digambarkan dengan bentuk oval dan diisi keterangan aktifitas

tersebut.

Untuk memberikan informasi lebih rinci yang berkaitan dengan use case

diagram yang telah dibuat, use case description dapat dibuat (Satzinger, Jackson, &

Burd, 2015, p. 133). Komponen yang termasuk dalam use case description adalah:

1. Use case name yaitu nama dari use case tersebut.

2. Scenario yaitu scenario atau aktivitas pada use case tersebut.

3. Triggering event yaitu aktivitas yang memicu berjalannya use case

tersebut.

4. Brief description yaitu penjelasan singkat mengenai use case tersebut.

16

5. Actors yaitu daftar actor yang bersangkutan dengan use case tersebut,

dapat berupa user atau system.

6. Related use case yaitu use case yang bersangkutan dengan use case

tersebut.

7. Stakeholders yaitu pihak yang berkepentingan pada use case tersebut

namun bukan actor yang dituliskan sebelumnya.

8. Preconditions yaitu kondisi sistem yang harus sudah terjadi sebelum use

case berjalan.

9. Postconditions yaitu kondisi yang terjadi setelah use case dijalankan.

10. Flow of activities yaitu tahapan rinci dari aktivitas-aktivitas pada use case

tersebut.

11. Exception condition yaitu aktivitas yang dapat mempengaruhi use case

tidak berjalan dengan semestinya.

2.2.2. Activity diagram

Cara lain untuk mendokumentasikan use case diagram adalah dengan membuat

activity diagram. Activity diagram mendeskripsikan berbagai aktivitas dari user

maupun system, orang atau komponen yang menyelesaikan masing-masing

aktivitasnya, dan urutan kegiatan dari masing-masing aktivitas (Satzinger, Jackson, &

Burd, 2015, p. 60).

Simbol-simbol dasar yang digunakan dalam pembuatan activity diagram

adalah:

1. Swimlane heading yaitu bentuk kotak yang berada di bagian atas diagram

yang digunakan untuk menunjukkan agent yang melakukan aktivitas-

aktivitas.

2. Starting activity yaitu gambar lingkaran terisi penuh yang menandakan

awal dari alur aktivitas.

3. Transition arrow yaitu garis penghubung antar aktivitas untuk

menunjukkan alur aktivitas-aktivitas.

4. Activity yaitu gambar oval yang diisikan aktivitas-aktivitas pada activity

diagram.

17

5. Ending activity yaitu gambar lingkaran terisi penuh dengan garis lingkaran

lain di luarnya, symbol ini menggambarkan bahwa alur aktivitas telah

selesai.

1.3 Pseudocode

Tiap bahasa pemrograman memiliki peraturan yang harus diikuti atau biasa lebih

dikenal dengan syntax, yaitu adalah aturan penulisan yang harus diikuti oleh seorang

programmer. Jika salah satu dari aturan tersebut dilanggar, maka program tidak bisa di-

compile atau dieksekusi karena menghasilkan syntax error. Apabila hal ini terjadi,

programmer harus menemukan error tersebut dan segera memperbaikinya. Maka dari itu,

programmer biasanya menulis program yang akan mereka buat menggunakan pseudocode

sebelum mereka menuliskannya menjadi suatu bahasa pemrograman.

Kata pseudo berarti palsu, maka pseudocode berarti kode palsu. Pseudocode adalah

bahasa informal yang tidak memiliki aturan syntax dan tidak dibuat untuk di-compile atau

dieksekusi (Gaddis, 2016, p. 30). Programmer membuat pseudocode untuk membuat model

atau ‘mock-up’ suatu program. Programmer tidak perlu memusingkan syntax error ketika

menulis pseudocode sehingga mereka bisa lebih fokus kepada desain program. Ketika suatu

desain program telah selesai dibuat dengan pseudocode, programmer dapat mengubahnya

menjadi kode dengan bahasa pemrograman sesungguhnya.

1.4 User interface dan user experience

User interface atau antarmuka sebuah software adalah titik kontak antara pengguna dan

software. User interface pada software terdiri dari tampilan yang interaktif secara visual yang

berkomunikasi dengan sistem back-end yang sudah diprogram (Wood, 2014).

Microsoft mengatakan bahwa user interface adalah objek-objek pada layar yang dilihat

langsung dan menimbulkan suatu interaksi dengan pengguna software tersebut. Objek-objek

tersebut dapat terdiri dari button, animation, menu, dan dialog box (Microsoft, 2018).

Perancangan UI yang sukses adalah perancangan yang menggabungkan kegunaan atau

usability yang baik, fungsionalitas yang jelas, dan estetika yang baik untuk memberikan hasil

tampilan yang sesuai dengan kebutuhan dan ekspektasi pengguna. Dapat disimpulkan bahwa

18

perancangan UI harus difokuskan untuk pengguna dan bukan untuk designer maupun

developer (Wood, 2014, p. 38).

Wood juga mengatakan bahwa sebuah user interface akan terlihat sama bagi tiap

pengguna. UI tersebut akan terlihat memiliki susunan atau tata letak yang sama yang terdiri

dari berbagai komponen seperti gambar, teks, dan media, dan pemicu sebuah tindakan

pengguna seperti button, navigation, dan icon. Namun saat menggunakan UI tersebut, tidak

semua pengguna akan memiliki pengetahuan yang sama dalam mengakses UI tersebut dan

penilaian estetika yang sama, hal tersebut berhubungan langsung dengan user experience

atau pengalaman pengguna.

User experience adalah hal yang dirasakan oleh pengguna saat mengakses software

(Wood, 2014, p. 38). Menurut Microsoft, UI adalah salah satu aspek dari user experience.

Aspek-aspek user experience lainnya yang tidak terlihat namun menjadi bagian yang penting

dari sebuah software adalah start up time atau waktu mulai software, error handling atau

penanganan kesalahan pada software, dan kegiatan yang otomatis dilakukan tanpa adanya

tindakan dari pengguna.

1.5 Wireframe

Wireframe adalah sebuah blueprint dasar yang digunakan untuk menggambarkan

bentuk inti dan fungsi yang ditemukan dalam satu layar sebuah halaman web atau aplikasi.

Versi pertama dari sebuah wireframe menggunakan garis hitam biasa, dasar putih, dan

berbagai bentuk untuk memberi tanda di mana elemen navigate, teks, dan media akan

diletakkan pada suatu layar. Sejumlah wireframe yang telah dibuat harus memberikan

gambaran kerangka dari aplikasi yang akan dibuat (Hamm & J, 2014, p. 15).

Proses pembuatan wireframe sebuah website adalah mengevolusi sebuah ide dari

sebuah daftar sederhana berisikan fitur-fitur, menjadi daftar halaman-halaman, dan pada

akhirnya menentukan konten apa saja yang akan diletakkan pada halaman tersebut. Tiap

revisi dari proses pembuatan wireframe harus menghasilkan penambahan detail dan struktur

pada halaman web (Hamm & J, 2014, p. 46).

19

1.6 Component driven development

Component driven development atau component based development adalah proses

pengembangan sebuah software yang menekankan perancangan dan pembuatan sistem

menggunakan komponen yang dapat digunakan kembali (Pressman & Maxim, 2014, p. 308).

Konsep pengembangan software berikut dapat menjadi solusi untuk pengembangan software

yang kompleks dan berkualitas tinggi yang dituntut untuk dibuat dalam waktu yang singkat.

Untuk mencapai tujuan utama sebuah software, pembuatan sistem dari awal akan

memakan waktu dan biaya yang besar. Solusi yang dapat mengatasi masalah tersebut adalah

dengan menggunakan kembali fungsionalitas yang sudah dibuat. Hal ini dapat dicapai

dengan menerapkan konsep component driven development atau component based

development, di mana proses pengembangan software dikerjakan dari pembuatan komponen

terkecil. Komponen tersebut masing-masing memiliki fungsi dan keberadaan yang berbeda-

beda. Ketika komponen-komponen tersebut dibuat, masing-masing komponen akan diuji

untuk melihat apakah komponen tersebut telah memenuhi kriteria yang sudah ditentukan, hal

ini akan mengurangi biaya dan waktu ketika komponen tersebut digunakan pada sistem baru

dan akan meningkatkan kualitas dan tuntutan software (Tahir, Khan, Babar, & Khan, 2016,

p. 77).

Tahir mengatakan bahwa tujuan dari component based development adalah untuk

mendukung beberapa hal, yaitu mengumpulkan komponen, pembuatan komponen yang

dipastikan dapat digunakan kembali pada sistem yang berbeda, dan pemeliharaan dan

peningkatan sistem dengan menyediakan penyesuaian dan penggantian komponen

berdasarkan kebutuhan sistem (Tahir, Khan, Babar, & Khan, 2016, p. 77).

Dalam pembuatan sistem yang kompleks, untuk mencegah resiko kecacatan pada

sistem, sistem dibuat dari komponen terkecilnya (Tahir, Khan, Babar, & Khan, 2016, p. 78).

Komponen-komponen terkecil tersebut lalu diintegrasi untuk menghasil sebuah sistem yang

besar dan kompleks. Terdapat dua teknik dalam mengembangkan software dengan konsep

component based development, yaitu :

1. Reuse technique atau membuat sebuah sistem baru yang kompleks dengan

menggunakan kembali komponen yang sudah ada.

20

2. Evaluation technique atau mengevaluasi sistem yang ada dan mengubahnya agar

menjadi lebih mudah untuk dipelihara dengan membuat sistem tersebut dari

komponen-komponen.

Sistem yang dirancang dengan baik memberikan kemudahan bagi developer untuk

memperbaikinya ketika terjadi masalah dan melakukan peningkatan kualitas pada sistem

tersebut.

Dengan mengaplikasikan konsep pengembangan software tersebut ke dalam proses

pengembangan user interface, pengembangan user interface dapat dilakukan dengan

memulai pengembangan dari komponen terkecil yang ada pada user interface tersebut,

seperti button, input, dan text.

Yigitbas mengatakan bahwa bagian-bagian dari user interface dan fungsionalitas yang

berkaitan dienkapsulasi oleh komponen. Dengan membuat komponen terkecil terlebih dahulu

lalu menggabungkannya menjadi sebuah user interface, pengembangan user interface dari

bawah ke atas atau bottom-up development telah tercapai (Yigitbas, Jovanovikj, Josifovska,

& Kalinci, 2019, p. 2).

1.7 Design system

Design system adalah representasi bahasa visual yang sudah dirancang untuk sebuah

website. Bahasa visual yang telah dibuat oleh desainer ini mengekspresikan bagaimana

sebuah website akan memberikan pesannya secara visual kepada user baik melalui warna,

font, button, image dan lain sebagainya (Godbolt, 2016, p. 27).

Seperti layaknya bahasa sehari-hari yang dapat dikategorikan menjadi kata benda, kata

kerja, kata sifat, front-end developer dapat memecah suatu bahasa visual menjadi komponen

yang terkecil. Dengan begitu, developer bebas menyusunnya kembali sesuai dengan

kebutuhan. Tujuan dari pemecahan komponen ini adalah untuk menciptakan codebase yang

mudah dipelihara.

21

1.8 Static web page

Halaman web statis adalah web yang menyajikan kepada pengguna konten web yang

tidak berubah, yaitu file HTML tanpa gangguan yang disebabkan oleh bahasa dari sisi server,

database atau segala jenis render yang bersifat dinamis (Camden & Rinaldi, 2017).

Keuntungan dari membuat web statis antara lain (Camden & Rinaldi, 2017):

1. Web statis cepat, hal ini dikarenakan file statis mudah untuk di-cache dan mudah

ditampilkan melalui content delivery network atau CDN sehingga pengguna dapat

mengakses web dengan cepat. Dengan mengeliminasi render dinamis dari

database, beberapa titik kegagalan yang biasanya menyebabkan web menjadi tidak

responsif menjadi hilang.

2. Web statis aman karena web statis tidak memiliki database untuk diterobos.

3. Web statis bersifat fleksibel karena web statis tidak dibuat di dalam framework

CMS sehingga tidak ada limitasi dalam bagaimana developer mengembangkan web

statis.

4. Web statis mudah untuk di-hosting karena tidak ada database, sehingga banyak

wadah untuk hosting web statis dari yang murah sampai yang gratis.

5. Perubahan-perubahan pada web statis mudah dilacak dikarenakan web statis terdiri

dari file statis.

Camden juga mengatakan terdapat beberapa situs yang dapat dibuat sebagai web statis,

yaitu blog, documentation, dan e-brochure.

1.9 HTML

Dalam proses pembuatan halaman web, dibutuhkan bahasa markah yang berguna untuk

menampilkan konten halaman web tersebut, yaitu HTML atau Hypertext Markup Language.

HTML bukan merupakan bahasa pemrograman melainkan bahasa markah, yang mana berarti

bahwa HTML mengindikasi struktur dasar dari halaman web, seperti heading, paragraph,

label, dan lain-lain (Robbins, 2012).

Untuk mengindikasi struktur dasar tersebut, HTML menggunakan tag yang memiliki

nama spesifik yang berbeda tiap tag-nya untuk menandakan konten yang berbeda dalam

struktur halaman web. Ketika dokumen HTML di-render ke dalam browser seperti Google

22

Chrome, Firefox, dan lain-lain, browser tersebut kemudian menafsirkan tag HTML yang ada

pada dokumen lalu menampilkannya. Tiap browser memiliki spesifikasi tampilan yang sudah

distandardisasi terkait tag HTML tertentu, namun pada browser tertentu yang berjalan pada

platform berbeda, tampilan dari tafsiran tag HTML dapat berbeda, sebagai contoh adalah

beberapa browser tidak menunjang font tertentu (Lemay, Colburn, & Kyrnin, 2016).

Dapat disimpulkan bahwa HTML adalah sebuah bahasa yang digunakan untuk

mendeskripsikan struktur dari sebuah halaman web dan tidak digunakan untuk

mendeskripsikan tata letak halaman web atau layout.

1.10 CSS

CSS atau Cascading Style Sheet digunakan dalam pengembangan front-end halaman

web sebagai alat untuk menentukan bagaimana sebuah browser me-render elemen HTML

atau bagaimana sebuah halaman web terlihat. Elemen-elemen yang dapat dikontrol

menggunakan CSS, antara lain seperti fonts, line spacing, background color, dan lain-lain

(Robbins, 2012)

Keuntungan menggunakan CSS adalah CSS dapat digunakan dalam berbagai cara.

Terdapat tiga cara menggunakan CSS, yaitu:

1. External CSS atau membuat satu file sendiri khusus untuk CSS dan

menghubungkan file HTML dengan file CSS tersebut, sehingga ketika ingin

mengubah suatu tampilan beberapa halaman dengan file CSS yang sama, developer

hanya perlu mengganti elemen style di file CSS tersebut.

2. Internal CSS, yang berarti penulisan elemen style CSS ditulis di file yang sama

dengan elemen HTML untuk halaman web tertentu. Hal ini berguna ketika elemen

style CSS hanya diperuntukan untuk elemen HTML tersebut.

3. Inline CSS atau penulisan CSS pada tag HTML tertentu yang ingin diberikan

elemen style.

Penulisan elemen style CSS untuk elemen HTML menggunakan atribut yang

dinamakan id dan class. Tag HTML yang sudah ditulis diberikan nama id atau class yang

sesuai, lalu id maupun class tersebut dipanggil di dalam penulisan CSS untuk diberikan

elemen style yang diinginkan (Lemay, Colburn, & Kyrnin, 2016).

23

1.11 JavaScript

JavaScript adalah sebuah bahasa pemrograman yang digunakan untuk memanipulasi

konten dari halaman web dan memberikan interaktivitas kepada halaman web (Lemay,

Colburn, & Kyrnin, 2016). JavaScript terintegrasi dengan browser, integrasi tersebut

memperkenankan developer untuk memanipulasi sejumlah aspek pada behaviour browser

tersebut, termasuk objek pada halaman web tersebut. Tipe events yang dapat dibuat dengan

menggunakan JavaScript, antara lain loading halaman web, memberikan validasi pada form,

scrolling halaman web, dan lain-lain. Dengan JavaScript, developer dapat memanipulasi

konten halaman web tanpa mengirim permintaan ke server untuk menerima informasi baru,

sehingga pengguna web tidak perlu meninggalkan halaman tersebut atau menunggu halaman

tersebut loading ulang. Kemampuan tersebut membantu developer untuk mengubah

tampilan, mengubah isi konten, dan memodifikasi behaviour dari browser dengan

menggunakan script yang sudah dihubungkan dengan halaman web.

Gambar 1.2 Penulisan Tag <script>

24

Penulisan JavaScript pada file HTML berada di dalam tag <script>. Tag <script> dapat

diletakkan baik pada head maupun body dari file HTML, namun berdasarkan buku HTML,

CSS, & JavaScript Web Publishing in One Hour a Day, dikarenakan JavaScript memaksa

browser untuk loading <script> tersebut dalam single thread, halaman web akan loading

dengan lebih cepat jika tag <script> diletakkan pada bagian terbawah dalam tag <body>.

1.12 Git

Dalam proses pengembangan software yang kompleks dan besar dibutuhkan sejumlah

developer untuk mengerjakan produk tersebut. Untuk memudahkan pengerjaan produk

bersama, developer dapat menggunakan git. Git adalah distributed version control system

atau sistem kontrol terdistribusi yang gratis yang dapat digunakan oleh developer (Westby,

2015, p. 10) .

Westby mengatakan bahwa penggunaan git pada proyek software berarti tiap developer

yang terlibat pada proyek tersebut memiliki salinan lokal repository proyek tersebut. Untuk

membagi kode yang telah dituliskan oleh developer, developer hanya perlu menerbitkan

salinan dari repository ke hosting system git yang telah ditentukan, misalnya GitHub

(Westby, 2015, p. 10) .

Melalui tata kelola proyek, ditentukan satu repository yang paling penting yang

digunakan sebagai sumber utama (Westby, 2015, p. 10). Hal ini dikarenakan setiap

repository dapat menerima perubahan dan dapat membagikan perubahannya dengan yang

lain.

1.13 JSX

JSX adalah JavaScript extension yang menyediakan syntactic sugar untuk pemanggilan

function dan pembuatan objek, terutama React.createElement() (Mardan, 2017). JSX terlihat

seperti sebuah template atau HTML, tetapi sesungguhnya JSX adalah syntax yang

menghasilkan React elements dengan kemampuan JavaScript tanpa harus menulisnya dalam

tag script (<script></script>). Kelebihan dari JSX antara lain:

1. Improved developer experience (DX)

Kode lebih mudah dibaca karena penulisan yang jelas seperti halnya membaca

syntax XML (Extensible Markup Language)

25

2. More productive team members

Developer dapat dengan mudah mengubah kode karena JSX memiliki kemiripan

dengan HTML.

3. Fewer wrist injuries and syntax errors

Mengurangi kode yang harus diketik oleh developer, sehingga mengurangi

kemungkinan error dan kesalahan yang repetitif.

JSX adalah sebuah bahasa kecil yang mempunyai syntax seperti XML dan bertujuan

untuk merubah cara developer membuat sebuah komponen UI. Sebelumnya developer harus

menulis HTML dan JavaScript secara terpisah untuk Controller dan View seperti pada

konsep MVC. Tetapi dengan adanya JSX, logika JavaScript dan deskripsi UI digabungkan

sehingga menciptakan kode yang menyerupai HTML agar lebih mudah dibaca dan diketik.

Gambar 1.3 Proses Transpiling

(Sumber: React Quickly (Mardan, 2017))

Gambar di atas menunjukkan cara JSX di-compile. JSX di-compile menjadi

ECMAScript menggunakan transpiler. Transpiler adalah sebuah compiler yang mengambil

source code suatu program yang ditulis dalam suatu bahasa pemrograman menjadi sebuah

input dan menghasilkan source code yang sama namun dalam bahasa pemrograman yang

berbeda.

Berikut adalah contoh perbedaan penulisan JavaScript menggunakan JSX dan tanpa

JSX:

26

Gambar 1.4 Penulisan JavaScript tanpa JSX

Gambar di atas menunjukkan penulisan JavaScript tanpa menggunakan JSX, namun

syntax tersebut akan memperoleh hasil yang sama dengan representasi JSX sebagai berikut:

Gambar 1.5 Penulisan menggunakan JSX

Apabila dibandingkan, penulisan menggunakan JSX akan menghasilkan syntax yang

lebih mudah dibaca (Accomazzo, et al., 2017).

1.14 ReactJS

React pertama kali dirilis oleh Facebook pada tahun 2013 (Wieruch, 2017). ReactJS

adalah library terbuka untuk JavaScript yang bertujuan untuk mempermudah pemrograman

reaktif pada pembuatan website atau web aplikasi dan mempermudah pembuatan single-page

application. Prinsip utama dari React adalah declarative code, efficiency, flexibility, dan

improved developer experience (M & Sonpatki, 2016).

27

Gambar 1.6 Logo ReactJS

React adalah View pada MVC (Model, View, Controller). React menyelesaikan

masalah dari layer View dengan cara memecah bagian yang ada pada View menjadi sebuah

potongan kode yang disebut Component. Komponen-komponen ini berisi logika

pemrograman yang mengendalikan bagaimana View pada komponen tersebut akan

ditampilkan, dan bagaimana hasil dari komponen itu sendiri.

React awalnya dibuat berdasarkan ide bahwa memanipulasi DOM (Document Object

Model) adalah suatu hal yang sulit dilakukan dan harus diminimalisasi. Memanipulasi DOM

tanpa ReactJS juga mengharuskan developer untuk membuat banyak boilerplate code, yang

mana hal tersebut adalah hal yang repetitif dan juga rentan terhadap error.

React adalah sebuah library yang deklaratif. Apabila ada perubahan data, React akan

langsung me-refresh halaman tersebut hanya untuk meng-update- dan me-render bagian

tertentu yang berubah (ReactJS, 2019).

Rendering elements Elemen adalah hasil yang ingin ditampilkan di layar. Tidak seperti DOM

elemen pada browser umumnya, elemen React berisi objek biasa yang mudah dibuat.

React DOM akan meng-update DOM agar selaras dengan elemen React. React hanya

meng-update elemen yang mengalami perubahan dengan cara membandingkan elemen

beserta children nya ke elemen sebelumnya.

28

Umpamakan ada sebuah tag <div> yang berisi <div id=”root”></div>. Tag

tersebut otomatis menjadi sebuah node “root” DOM yang isinya akan diatur oleh React

DOM. Berikut cara me-render element React ke node root DOM:

Gambar 1.7 Contoh me-render heading (h1)

Kode di atas akan menampilkan halaman yang berisi tulisan “Hello, world”.

Components and props React memecah UI menjadi bagian-bagian kecil yang disebut Components.

Komponen-komponen kecil ini dapat digunakan berulang kali dengan logika yang

berbeda-beda. Komponen mirip seperti fungsi JavaScript pada umumnya. Komponen

menerima input yang disebut ‘props’ dan mengembalikan elemen React sesuai dengan

apa yang ingin ditampilkan.

Gambar 1.8 Contoh komponen

29

Berdasarkan gambar di atas, dapat dilihat bahwa ShoppingList adalah sebuah

komponen. Sebuah komponen menerima parameter yang disebut props (disingkat dari

“properties”) dan mempunyai return yang kemudian di-render oleh metode render dan

menghasilkan sebuah tampilan View. Metode render menampilkan apa yang ingin

ditampilkan kepada user.

1.15 GatsbyJS

GatsbyJS adalah generator static site berbasis ReactJs. Static site adalah sebuah

halaman web yang memiliki konten statis. Goal utama dari GatsbyJS adalah untuk membuat

website yang sangat cepat (GatsbyJS, 2019). Gatsby mempunyai empat visi yaitu:

1. Construct new, higher-level building blocks

Seperti yang kita ketahui, building blocks sebuah website terdiri dari HTML, CSS,

dan JavaScript. Gatsby percaya bahwa building blocks ini akan ditinggalkan dalam

lima sampai sepuluh tahun kedepan dan akan tergantikan dengan adanya React

component.

2. Create a cohesive “content mesh system”

3. Make building websites fun

Salah satu visi Gatsby adalah membuat proses membangun website menyenangkan

dengan cara yang sederhana. Dengan adanya building blocks yang tepat,

membangun website akan terasa ringan dwan menyenangkan walaupun website

tersebut terus berkembang luas dan besar.

4. Build a better web

Gatsby menggabungkan kualitas performa dan keamanan menjadi suatu framework,

sehingga mempermudah developer untuk membangun suatu website tanpa harus

banyak mengkhawatirkan implementasi fitur-fitur tertentu untuk membangun

website yang aman dan cepat.

Berikut struktur folder pada inisialisasi pembuatan project menggunakan GatsbyJS:

30

Gambar 1.9 Struktur folder GatsbyJS

Dapat dilihat dari gambar di atas bahwa Gatsby menyediakan beberapa folder dan file

dengan fungsi yang berbeda-beda.

1. /.cache

Folder ini merupakan hasil cache yang dibuat secara otomatis oleh Gatsby. File di

dalamnya tidak untuk dimodifikasi. Folder ini perlu ditambahkan ke dalam

.gitignore.

2. /public

Folder yang berisi semua hasil build website.

3. /plugins

4. /src

Folder ini berisi semua hal yang akan ditampilkan di bagian frontend. File yang

berada di dalam folder ini antara lain:

● /pages

Komponen yang berada dalam src/pages akan otomatis membentuk sebuah

website dengan path yang sama dengan nama file tersebut

● /templates

Berisi template yang sudah dibuat untuk membuat halaman web baru.

● html.js

File yang berguna apabila developer ingin membuat custom HTML.

5. /static

31

Semua file yang ada di dalam folder ini tidak akan diproses Webpack.

6. gatsby-browser.js

File ini memungkinkan customization atau extension yang akan mempengaruhi

browser.

7. gatsby-config.js

Konfigurasi utama untuk website Gatsby. File ini berisi informasi spesifik seperti

metadata seperti site title dan description, serta apa saja plugins yang dibutuhkan.

8. gatsby-node.js

File ini memungkinkan customization atau extension yang akan mempengaruhi

building process.

9. gatsby-ssr.js

File ini memungkinkan customization atau extension yang akan mempengaruhi

server-side rendering.

Apabila tidak memerlukan customization, developer tidak perlu mengubah isi file

gatsby-browser.js, gatsby-node.js, dan gatsby-ssr.js.

1.16 Emotion

Emotion adalah sebuah library CSS-in-JS yang dirancang untuk menulis CSS di dalam

JavaScript. Emotion terinspirasi dari library CSS-in-JS lainnya seperti glam, glamor, styled-

components, dan glamorous. Emotion mempermudah styling menggunakan string styles atau

object styles (Emotion, 2019).

32

Gambar 1.10 Logo Emotion

Cara utama dalam menggunakan emotion adalah dengan mengimport ‘css’ dari library

Emotion. Css menerima template literals yaitu sebuah string yang bisa menerima embedded

expression. Template literals biasanya dimulai dan diakhiri dengan backtick (` `). Berikut

contoh penggunaan css Emotion di dalam template literals:

Gambar 1.11 Contoh penggunaan css Emotion dalam template literals

33

Css juga menerima object styles. Penulisan css properties pada object styles

menggunakan camel case, bukan kebab case seperti penulisan css properties pada umumnya.

Berikut contoh penggunaan css Emotion di dalam object styles:

Gambar 1.12 Contoh penggunaan css Emotion dalam object styles

Cara lain selain css adalah dengan mengimport ‘styled’ dari Emotion. Styled dan css

memiliki perbedaan dari segi pemanggilan. Styled dipanggil dengan cara menulis html tag

atau React component. Contohnya:

Gambar 1.13 Contoh penggunaan 'styled' Emotion

34

Styled juga dapat disisipkan dengan sebuah props yang mana akan memungkinkan

developer untuk mengganti styling sebuah komponen berdasarkan props yang dipanggil.

Contohnya:

Gambar 1.14 Contoh penggunaan props dalam komponen

1.17 ZEIT Now

ZEIT Now adalah sebuah cloud platform untuk aplikasi web yang bersifat statis.

Platform tersebut memungkinkan developer untuk meng-host web yang dapat dengan cepat

deploy atau menyebarkan web tanpa perlu pengawasan ataupun konfigurasi lainnya (ZEIT,

2019).

Proses deployment adalah hasil pembangunan proyek software yang disebarkan agar

dapat diakses oleh umum melalui URL aktif. Proses deployment pada ZEIT Now yang

digunakan pada pembuatan website dokumentasi pada penelitian ini adalah dengan metode

git integration atau integrasi dengan git. Dengan menggunakan Now untuk GitHub, penulis

menyambungkan Now dengan branch utama proyek untuk website dokumentasi, setiap kali

ada perubahan pada branch utama tersebut, halaman web yang sudah terpublikasi dengan

Now akan secara langsung terintegrasi dengan hasil branch tersebut.

Penggunaan ZEIT Now untuk website dokumentasi didasari pada kebutuhan untuk

mempublikasikan website dokumentasi tersebut secara gratis dan otomatis berubah sesuai

35

dengan perubahan yang ada pada branch utama tanpa harus melakukan proses deployment

ulang.

1.18 NPM

Npm adalah package manager untuk Node.js yang pertama kali dibuat pada tahun 2009

sebagai proyek open source. Npm mempermudah JavaScript developer untuk membagikan

kode yang telah mereka buat untuk memecahkan suatu masalah dan juga mempermudah

developer lainnya untuk me-reuse atau mengimplementasi kode tersebut di proyek mereka

sendiri. Apabila developer bergantung pada suatu kode yang dibagikan developer lain

(dependency), npm akan mempermudah pengecekan update terbaru dari kode tersebut dan

men-download tiap update ketika ada perubahan (Npm, 2019).

Kode yang reusable ini disebut package atau modules. Package adalah sebuah direktori

yang menyimpan satu atau lebih file di dalamnya yang mempunyai file bernama

package.json dengan metadata mengenai package tersebut.

Npm terdiri dari tiga komponen, yaitu:

1. Website npm, digunakan untuk mencari package yang sesuai dengan kebutuhan

developer.

2. Npm CLI (Command Line Interface), digunakan ketika developer ingin

mempublikasikan kode yang telah mereka buat ke npm atau digunakan untuk meng-

install sebuah package dari npm registry.

3. Npm registry, sebuah database besar yang menampung metadata atau informasi

mengenai package yang dibagikan oleh developer.

1.19 Usability testing

Testing adalah tahapan yang penting dalam pengembangan halaman web. Salah satu

cara untuk menguji kesiapan halaman web adalah dengan usability testing. Tahap pertama

dari usability testing adalah untuk mengumpulkan kategori usability dan menentukan objektif

36

dari masing2 kategori testing. Berikut adalah kategori yang harus di tes dan objektif dari

testing tersebut (Pressman & Maxim, 2014):

1. Interactivity – apakah interaksi dari menu-menu yang ada mudah dipahami dan

mudah digunakan?

2. Layout – apakah navigasi, konten, dan fungsi yang ada ditempatkan di tempat yang

mudah ditemukan oleh user?

3. Readability – apakah teks yang ada mudah dipahami dan ditulis dengan jelas?

Apakah ilustrasi yang ada mudah dipahami?

4. Aesthetics – apakah user merasa nyaman dengan layout, pilihan warna, pilihan font

yang ditampilkan? (look and feel)

5. Display characteristics - apakah web bisa menampilkan hasil yang optimal sesuai

dengan resolusi layar?

6. Time sensitivity - apakah fitur-fitur penting, fungsi, dan konten yang penting dapat

diakses dengan cepat?

7. Personalization – apakah tampilan web dapat berubah sesuai dengan kebutuhan

user atau kategori user?

8. Accessibility – apakah web dapat diakses oleh orang penyandang disabilitas?

Salah satu contoh usability testing adalah dengan melakukan wawancara terhadap user

untuk menilai pengalaman yang didapat ketika mengakses suatu halaman website atau

aplikasi dan juga sebagai salah satu cara mencari potensi isu yang ada. Setelah wawancara

dilakukan, barulah dikumpulkan sejumlah ide yang dapat membantu perkembangan website

untuk menghasilkan website yang lebih baik dari sebelumnya (Chandler & Unger, 2012).

37

L33