Pembuatan Framework User Interface Elevenia Berbasis Web Menggunakan ReactJS LAPORAN SKRIPSI MUTIA AYU DIANITA 4815040034 PROGRAM STUDI TEKNIK INFORMATIKA JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER POLITEKNIK NEGERI JAKARTA 2020
Pembuatan Framework User Interface Elevenia Berbasis
Web Menggunakan ReactJS
LAPORAN SKRIPSI
MUTIA AYU DIANITA
4815040034
PROGRAM STUDI TEKNIK INFORMATIKA
JURUSAN TEKNIK INFORMATIKA DAN
KOMPUTER
POLITEKNIK NEGERI JAKARTA
2020
Pembuatan Framework User Interface Elevenia Berbasis
Web Menggunakan ReactJS
LAPORAN SKRIPSI
Dibuat untuk Melengkapi Syarat-Syarat yang Diperlukan untuk
memperoleh Diploma Empat Politeknik
MUTIA AYU DIANITA
4815040034
PROGRAM STUDI TEKNIK INFORMATIKA
JURUSAN TEKNIK INFORMATIKA DAN KOMPUTER
POLITEKNIK NEGERI JAKARTA
2020
ii
HALAMAN PERNYATAAN ORISINALITAS
Skripsi ini adalah hasil karya saya sendiri, dan semua sumber baik yang
dikutip maupun dirujuk telah saya nyatakan dengan benar.
Nama : Mutia Ayu Dianita
NPM : 4815040034
Tanggal : 3 Agustus 2020
Tanda Tangan :
iii
LEMBAR PENGESAHAN
Skripsi diajukan oleh :
Nama : Mutia Ayu Dianita
NIM : 4815040034
Program Studi : Teknik Informatika
Judul Skripsi : Pembuatan Framework User Interface Elevenia Berbasis
Web Menggunakan ReactJS
Telah diuji oleh tim penguji dalam Sidang Skripsi pada hari Senin, Tanggal 3 Bulan
Agustus Tahun 2020 dan dinyatakan LULUS.
iv
KATA PENGANTAR
Puji syukur atas kehadirat Allah Swt yang telah memberikan rahmat dan
karunianya kepada penulis, sehingga penulis dapat menyelesaikan laporan skripsi.
Penulisan skripsi ini bertujuan untuk memenuhi salah satu syarat untuk mencapai
gelar diploma empat Politeknik. Tentu sangat disadari bahwa, dalam penyusunan
laporan ini menemui banyak kendala, sehingga membutuhkan bantuan dari
berbagai pihak. Ucapan terima kasih diberikan kepada pihak-pihak terkait,
diantaranya:
1. Iwan Sonjaya, S.T., M.T. selaku dosen pembimbing yang telah
memberikan arahan dalam penyusunan laporan skripsi.
2. Pihak PT Elevenia Digital Teknologi Sukses yang telah memberikan izin
untuk menggunakan Elevenia sebagai topik skripsi.
3. Hendra Kosasih selaku mantan leader tim frontend PT XL Planet yang telah
memberi ide dan arahan dalam pembuatan topik skripsi.
4. Bayu Utomo selaku leader tim frontend PT Elevenia Digital Teknologi
Sukses yang telah mengarahkan dan membimbing pengerjaan skripsi.
5. Anggota tim frontend dan product design PT Elevenia Digital Teknologi
Sukses yang telah banyak membantu dalam pembuatan skripsi.
6. Orangtua dan keluarga yang telah memberikan bantuan dan dukungan
dalam bentuk moral dan materil dalam menyelesaikan laporan skripsi.
7. Teman-teman Topeng Betmen yang telah menemani, mendukung, dan
memberikan banyak bantuan dalam menyelesaikan laporan skripsi.
8. Siti Aisyah, Melinda Nur Puspita Dewi dan Rahmawati Putri selaku sahabat
yang telah banyak membantu dan mendukung penulis dalam menyelesaikan
penyusunan laporan skripsi.
Akhir kata, semoga Allah SWT berkenan membalas kebaikan semua pihak
yang telah membantu dan semoga penulisan Laporan Skripsi ini dapat memberikan
manfaat bagi penulis khususnya dan para pembaca pada umumnya.
Depok, Agustus 2020
Penulis
v
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI
UNTUK KEPENTINGAN AKADEMIS
Sebagai sivitas akademik Politeknik Negeri Jakarta, saya yang bertanda tangan di
bawah ini:
Nama : Mutia Ayu Dianita
NIM : 4815040034
Program Studi : Teknik Informatika
Jurusan : Teknik Informatika dan Komputer
Jenis karya : Skripsi
demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada
Politeknik Negeri Jakarta Hak Bebas Royalti Noneksklusif (Non-exclusive Royalty-
Free Right) atas karya ilmiah saya yang berjudul :
Pembuatan Framework User Interface Elevenia Berbasis Web Menggunakan ReactJS
beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Noneksklusif
ini Politeknik Negeri Jakarta berhak menyimpan, mengalihmedia/format-kan,
mengelola dalam bentuk pangkalan data (database), merawat, dan memublikasikan
skripsi saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan
sebagai pemilik Hak Cipta.
Demikian pernyataan ini saya buat dengan sebenarnya.
Dibuat di : Depok Pada tanggal : 3 Agustus 2020
Yang menyatakan
Mutia Ayu Dianita
vi
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Pembuatan Framework User Interface Elevenia Berbasis Web Menggunakan
ReactJS
Abstrak
Elevenia membutuhkan sebuah framework user interface untuk membantu tim developer
membangun web secara cepat agar fitur elevenia tidak tertinggal kompetitor, karena
tampilan web elevenia saat ini desainnya tidak konsisten dan struktur kodenya buruk.
Menggunakan metodologi atomic design yang memecah komponen tampilan menjadi
atom, molekul, dan organisme agar desain lebih terstruktur dan konsisten dengan
tambahan utility class untuk menunjang penggunaan komponen. Komponen-komponen
tersebut dibangun dengan bahasa javascript menggunakan framework ReactJS yang
berbasis komponen. Pengembangannya menggunakan metode agile agar dapat
menyesuaikan kebutuhan desain dan teknologi yang ada. Framework user interface yang
dibuat dipublish menjadi package NPM dan dapat diinstall ke projek Elevenia. Selain
package NPM, dibuat juga web dokumentasi cara penggunaan dari framework. Dengan
framework user interface yang dibuat, web elevenia memiliki desain yang konsisten,
struktur kodenya mudah dibaca, dan developer dapat membangun tampilan web dengan
mudah dan cepat.
Kata kunci: Framework, User interface, ReactJS, Elevenia, NPM, Atomic Design
vii
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
DAFTAR ISI
KATA PENGANTAR .......................................................................................... iv
HALAMAN PERNYATAAN PERSETUJUAN PUBLIKASI SKRIPSI
UNTUK KEPENTINGAN AKADEMIS ............................................................ v
ABSTRAK ............................................................................................................ vi
DAFTAR ISI ........................................................................................................ vii
DAFTAR GAMBAR ............................................................................................ ix
DAFTAR TABEL .............................................................................................. xiii
BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar Belakang.......................................................................................... 1
1.2 Perumusan Masalah .................................................................................. 2
1.3 Batasan Masalah ....................................................................................... 2
1.4 Tujuan dan Manfaat .................................................................................. 2
1.5 Metode Pelaksanaan Skripsi ..................................................................... 3
BAB II TINJAUAN PUSTAKA ........................................................................... 4
2.1 Framework User Interface ....................................................................... 4
2.1.1 Framework ............................................................................................... 4
2.1.2 User Interface ........................................................................................... 4
2.1.3 Framework User Interface ....................................................................... 4
2.2 Web .......................................................................................................... 4
2.3 Javascript .................................................................................................. 5
2.4 ReactJS ..................................................................................................... 5
2.5 NPM ......................................................................................................... 6
2.6 SASS ........................................................................................................ 6
2.7 Metodologi Desain Atomik ...................................................................... 7
2.8 Metodologi Agile ...................................................................................... 8
2.9 Elevenia .................................................................................................... 9
BAB III PERENCANAAN DAN REALISASI ................................................. 10
3.1 Deskripsi Program Aplikasi ................................................................... 10
3.2 Cara Kerja Program Framework ............................................................ 11
3.3 Rancangan Program Framework ............................................................ 12
3.3.1 Use Case Framework ............................................................................. 12
3.3.2 Komponen pada Framework .................................................................. 14
3.3.3 Desain Mockup Dokumentasi ................................................................. 16
viii
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
3.4 Program Aplikasi .................................................................................... 17
3.4.1 Tampilan Dokumentasi Framework ....................................................... 17
3.4.2 Tahap Pembuatan Package NPM ........................................................... 61
BAB IV PEMBAHASAN .................................................................................... 64
4.1 Pengujian ................................................................................................ 64
4.2 Deskripsi Pengujian ............................................................................... 64
4.3 Prosedur Pengujian................................................................................. 64
4.4 Data Hasil Pengujian .............................................................................. 64
4.4.1 Data Hasil Pengujian Alpha ................................................................... 64
4.4.2 Data Hasil Pengujian Beta ..................................................................... 70
4.5 Evaluasi .................................................................................................. 81
BAB V PENUTUPAN ......................................................................................... 82
DAFTAR PUSTAKA .......................................................................................... 83
LAMPIRAN ......................................................................................................... 84
ix
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
DAFTAR GAMBAR
Gambar 2. 1 Contoh atom pada antarmuka ............................................................. 7
Gambar 2. 2 Contoh molekul pada antarmuka........................................................ 7
Gambar 2. 3 Contoh organisme pada antarmuka .................................................... 8
Gambar 2. 4 Model Pengembangan Agile .............................................................. 9
Gambar 3. 1 Flowchart instalasi framework ......................................................... 11
Gambar 3. 2 Flowchart cara kerja program aplikasi dokumentasi ....................... 12
Gambar 3. 3 Use case Elevenia saat ini secara garis besar ................................... 12
Gambar 3. 4 Use case Elevenia dengan fitur tambahan ........................................ 13
Gambar 3. 5 Use case program aplikasi................................................................ 13
Gambar 3. 6 Tombol pada halaman deals Elevenia .............................................. 14
Gambar 3. 7 Tombol pada halaman produk Elevenia ........................................... 14
Gambar 3. 8 Tombol pada footer Elevenia ........................................................... 14
Gambar 3. 9 Tombol pada halaman My Elevenia ................................................. 14
Gambar 3. 10 Tombol pada live chat Elevenia ..................................................... 14
Gambar 3. 11 Desain mockup instalasi ................................................................. 16
Gambar 3. 12 Desain mockup dokumentasi .......................................................... 16
Gambar 3. 13 Tampilan dokumentasi ................................................................... 17
Gambar 3. 14 Utility Border Color ....................................................................... 18
Gambar 3. 15 Utility Border Additive dan Border Substractive ........................... 18
Gambar 3. 16 Utility Border Radius ..................................................................... 18
Gambar 3. 17 Utility Clearfix................................................................................ 19
Gambar 3. 18 Utility Text Color ........................................................................... 19
Gambar 3. 19 Utility Background Color ............................................................... 19
Gambar 3. 20 Utility Display ................................................................................ 20
Gambar 3. 21 Utility Overlay dan Cursor ............................................................ 21
Gambar 3. 22 Utility Display Flex dan Display Inline Flex ................................. 21
Gambar 3. 23 Utility Flex Row, Flex Column, Justify Content dan Align Items .. 22
Gambar 3. 24 Utility Float .................................................................................... 23
Gambar 3. 25 Utility Sizing .................................................................................. 23
Gambar 3. 26 Utility Spacing ............................................................................... 24
x
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 27 Utility Position ............................................................................... 25
Gambar 3. 28 Utility Typhography ....................................................................... 26
Gambar 3. 29 Utility Vertical Align ..................................................................... 26
Gambar 3. 30 Utility Z-Index................................................................................ 27
Gambar 3. 31 Layout Container ............................................................................ 27
Gambar 3. 32 Layout Grid .................................................................................... 28
Gambar 3. 33 Atom Alert Box .............................................................................. 29
Gambar 3. 34 Lanjutan gambar Alert Box ............................................................ 30
Gambar 3. 35 Atom Button Size ............................................................................ 30
Gambar 3. 36 Atom Button Type .......................................................................... 31
Gambar 3. 37 Atom Button Level dan Floating .................................................... 32
Gambar 3. 38 Atom Box ....................................................................................... 33
Gambar 3. 39 Atom Checkbox .............................................................................. 34
Gambar 3. 40 Atom Datepicker ............................................................................ 35
Gambar 3. 41 Atom Divider ................................................................................. 35
Gambar 3. 42 Atom Icon Glyphs 16px ................................................................. 36
Gambar 3. 43 Atom Icon Glyphs 24px ................................................................. 37
Gambar 3. 44 Atom Icon Special 36px ................................................................. 38
Gambar 3. 45 Atom Icon Special 40px ................................................................. 38
Gambar 3. 46 Atom Modal Box ukuran small dan medium ................................. 39
Gambar 3. 47 Atom Modal Box ukuran large dan extra large ............................. 40
Gambar 3. 48 Atom Tipe Modal ........................................................................... 40
Gambar 3. 49 Lanjutan Gambar Tipe Modal ........................................................ 41
Gambar 3. 50 Atom Toast Modal ......................................................................... 42
Gambar 3. 51 Atom Modal Box with Banner ....................................................... 43
Gambar 3. 52 Atom Modal Box ............................................................................ 44
Gambar 3. 53 Atom Modal ................................................................................... 44
Gambar 3. 54 Atom Next-Navigation Button ........................................................ 45
Gambar 3. 55 Atom Radio Button ........................................................................ 46
Gambar 3. 56 Atom Select Button......................................................................... 46
Gambar 3. 57 Atom Table ..................................................................................... 47
Gambar 3. 58 Atom Textfield untuk desktop ........................................................ 48
xi
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 59 Atom Textfield untuk desktop ........................................................ 48
Gambar 3. 60 Atom Lanjutan gambar Textfield untuk desktop ............................ 49
Gambar 3. 61 Atom Lanjutan gambar Textfield condition untuk desktop ............ 49
Gambar 3. 62 Atom Textfield ................................................................................ 50
Gambar 3. 63 Atom Lanjutan gambar Textfield condition ................................... 50
Gambar 3. 64 Atom Toggle Default, Default Checked, Disabled ........................ 51
Gambar 3. 65 Atom Toggle Label Right, Label Left, Label Inside ....................... 51
Gambar 3. 66 Molekul Accordion ......................................................................... 52
Gambar 3. 67 Molekul Breadcrumbs .................................................................... 52
Gambar 3. 68 Molekul Button Popover ................................................................ 52
Gambar 3. 69 Molekul Option Box ....................................................................... 53
Gambar 3. 70 Molekul Pagination ....................................................................... 53
Gambar 3. 71 Molekul Range Slider .................................................................... 54
Gambar 3. 72 Molekul Search Bar ....................................................................... 54
Gambar 3. 73 Lanjutan gambar molekul search bar .......................................... 555
Gambar 3. 74 Molekul Stepper Enabled ............................................................... 55
Gambar 3. 75 Molekul Stepper Disabled .............................................................. 56
Gambar 3. 76 Molekul Uploader .......................................................................... 57
Gambar 3. 77 Organisme Header ......................................................................... 58
Gambar 3. 78 Organisme Footer .......................................................................... 58
Gambar 3. 79 Organisme Mega Menu .................................................................. 58
Gambar 3. 80 Organisme Progress Tracker ......................................................... 59
Gambar 3. 81 Lanjutan gambar Organisme Progress Tracker (code) .................. 59
Gambar 3. 82 Organisme Tabs Default ................................................................ 60
Gambar 3. 83 Organisme Tabs Vertical dan Tabs Logo ....................................... 60
Gambar 3. 84 Organisme Tabs Fitted ................................................................. 611
Gambar 3. 85 Akun npm ....................................................................................... 61
Gambar 3. 86 Script build ..................................................................................... 62
Gambar 3. 87 Branch build ................................................................................... 62
Gambar 3. 88 Script npm login ............................................................................. 62
Gambar 3. 89 Inisiasi package npm ...................................................................... 63
Gambar 3. 90 Publish Script ................................................................................. 63
xii
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 91 Hasil publish package .................................................................... 63
xiii
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
DAFTAR TABEL
Tabel 1. Komponen pada framework .................................................................... 15
Tabel 2. Hasil pengujian alpha ............................................................................. 64
Tabel 3. Hasil pengujian User Acceptance Test desainer ..................................... 70
Tabel 4. Pengujian User Acceptance Test developer ............................................ 76
1
BAB I
PENDAHULUAN
1.1 Latar Belakang
Elevenia merupakan platform e-commerce dengan konsep open marketplace di
Indonesia. Maraknya e-commerce yang ada di Indonesia, membuat persaingan
antara e-commerce semakin ketat sehingga menyebabkan setiap e-commerce
berusaha untuk mengembangkan produknya menjadi yang terbaik. Setiap e-
commerce berupaya membuat aplikasi yang dengan fitur yang semakin beragam
dan dengan waktu pengerjaan yang singkat. Hal ini dilakukan agar dapat merilis
fitur baru dengan cepat agar dapat bersaing dengan kompetitor e-commerce lainnya.
Saat ini, situs web Elevenia menggunakan teknologi lama, dan fitur yang ada masih
tertinggal dibandingkan kompetitor lainnya. Desain yang tidak konsisten menjadi
masalah bagi desainer untuk memilih dasar acuan desain untuk desain baru dan juga
bagi user karena mempengaruhi user dari segi pengalaman user (Arkan, 2020).
Selain itu, struktur kode, file, serta folder yang buruk membuat developer kesulitan
mengembangkan web dengan cepat dan efektif. Maka dari itu tim user interface
dan frontend Elevenia ingin membuat ulang tampilan websitenya dengan
framework user interface menggunakan teknologi terbaru yang memiliki desain
konsisten, alur kode berstandar, dan dapat dikembangkan dengan waktu yang cepat.
ReactJS merupakan perpustakaan frontend dengan bahasa dasar Javascript. ReactJS
dikenal sebagai pemain yang sangat efisien yang memungkinkan pengembangan
aplikasi berbasis web yang besar dan kompleks. Ini adalah salah satu faktor kunci
yang membuat ReactJS menjadi framework yang menonjol dari puluhan framework
di luar sana. Alasan dari kinerja yang sangat efisien adalah framework dasarnya
adalah fitur DOM virtual framework.
Berdasarkan masalah di atas, penulis bekerja sama dengan Elevenia (PT XL Planet)
untuk melakukan “Pembuatan Framework User Interface Elevenia Berbasis
Web Menggunakan ReactJS”. Dalam melakukan penelitian, PT XL Planet
mendukung penuh penelitian ini dengan menyediakan desain dari framework yang
akan dibuat.
2
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1.2 Perumusan Masalah
Bagaimana membuat framework user interface Elevenia dengan komponen yang
mudah digunakan ulang dengan desain yang konsisten serta struktur kode yang
memiliki standar?
1.3 Batasan Masalah
Agar penelitian yang dilakukan lebih fokus, tepat sasaran, serta menghindari
pelebaran pokok masalah dan kesalahpahaman, maka masalah yang akan dibahas
perlu diberikan batasan. Adapun batasan-batasan masalah dalam penelitian ini
diantaranya adalah:
1. Ruang lingkup pembahasan hanya meliputi framework user interface
Elevenia berbasis web desktop.
2. Aplikasi yang dibangun menggunakan teknologi HTML5, SASS, dan
bahasa pemrograman Javascript dengan framework yang digunakan adalah
ReactJS.
3. Menggunakan panduan standar desain user interface yang dibuat oleh user
interface designer Elevenia.
4. Framework user interface yang dibuat sebatas framework tampilan web
menggunakan data statis, tidak terhubung dengan data maupun fungsi
backend.
1.4 Tujuan dan Manfaat
1.4.1 Tujuan
Membuat framework user interface Elevenia berbasis web serta
dokumentasinya.
1.4.2 Manfaat
1. Membantu developer Elevenia membangun tampilan web secara cepat
dengan desain yang konsisten agar Elevenia dapat bersaing dengan
kompetitor.
2. Membantu developer Elevenia membangun tampilan web dengan
penulisan kode yang memiliki standar, mudah dibaca, serta mudah
digunakan.
3
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1.5 Metode Pelaksanaan Skripsi
Metode yang digunakan dalam pembuatan sistem ini adalah metode agile. Agile
merupakan pendekatan berulang yang dilakukan dengan mengedepankan
kolaborasi serta menggunakan dokumen formal yang terbatas dan tepat untuk
membangun perangkat lunak yang berkualitas dalam hal biaya yang efektif serta
waktu yang sesuai dengan kebutuhan stakeholder yang bisa berubah-ubah
(Raharjana, 2017).
Tahapan pengembangan sistem dengan metode agile yang akan dilakukan dalam
pembuatan skripsi:
1. Perencanaan, menentukan komponen apa yang dibuat bersama dengan tim
desainer antarmuka, serta menentukan struktur folder, kode, dan
metodologi pembuatan framework dengan ketua tim frontend Elevenia.
2. Perancangan, setelah dilakukan perencanaan dilakukan perancangan
berdasarkan metodologi yang telah ditentukan yaitu metodologi desain
atomik. Komponen yang dibuat diklasifikasikan menjadi atom, molekul,
dan organisme, serta ditentukan utility apa saja yang akan ditambahkan.
Pengklasifikasian komponen menjadi atom, molekul dan organisme
dilakukan dengan desainer dan frontend developer Elevenia.
3. Pengembangan, setelah rancangan dibuat, dilakukan pengembangan
komponen berdasarkan desain komponen yang telah dibuat oleh desainer
dan penulisan dokumentasinya.
4. Pengujian, dilakukan untuk menguji komponen menggunakan whitebox
testing yang dibuat apakah sudah berfungsi sebagai mestinya, kode dibuat
efektif, sesuai dengan standar dan sesuai dengan desain dari desainer.
5. Distribusi, setelah lolos pengujian dilakukan distribusi dengan cara
mempublish package NPM Elevenia.
6. Peninjauan, setelah didistribusikan, dilakukan pertemuan bersama ketua
tim frontend serta tim desainer antarmuka Elevenia untuk meninjau apakah
diperlukan penambahan komponen dan perubahan komponen yang telah
dibuat. Jika diperlukan pengembangan lagi, maka dapat dilakukan
perencanaan untuk penambahan maupun perbaikan.
4
BAB II
TINJAUAN PUSTAKA
2.1 Framework User Interface
2.1.1 Framework
Framework adalah sekumpulan perintah atau fungsi dasar yang membentuk
aturan-aturan tertentu dan saling berinteraksi dengan yang lainnya, sehingga
dalam pembuatan aplikasi harus menggunakan aturan yang telah ditetapkan
dari framework yang digunakan. Pembuatan aplikasi menjadi lebih cepat
dengan adanya framework karena fungsi dasar telah ada dan dapat digunakan
ulang, jadi tidak harus membuat fungsi dasar dan aturan dari awal. (Wardana,
2010)
2.1.2 User Interface
Menurut (Shidqi, et al., 2017), user interface adalah komponen yang
berkomunikasi langsung dengan pengguna melalui perangkat keras maupun
perangkat lunak. Dapat berbentuk tampilan, suara, maupun sentuhan secara
langsung ataupun tidak langsung. Konsep desain visual, interaksi, dan
infrastruktur informasi tergabung menjadi sebuah user interface. Tujuan dari user
interface adalah untuk meningkatkan kegunaan serta pengalaman pengguna dalam
menggunakan perangkat lunak maupun perangkat keras.
2.1.3 Framework User Interface
Framework user interface berbasis web adalah kerangka kerja yang berisikan
sekumpulan komponen, perintah, fungsi dasar yang membentuk aturan-aturan
tertentu dan saling berinteraksi dengan yang lainnya yang dapat digunakan
untung membuat tampilan antarmuka.
2.2 Web
Web adalah halaman yang dikumpulkan berisi informasi berupa teks, gambar,
animasi, suara, dan atau gabungan dari semuanya yang bersifat statis maupun
dinamis. Halaman-halaman tersebut saling terkoneksi dan membentuk jaringan
yang disebut dengan web (Syaripudin dan Cahyana, 2015).
5
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
2.3 Javascript
Javascript merupakan bahasa skrip populer yang dipakai untuk menciptakan
halaman web yang dapat berinteraksi dengan pengguna dan dapat merespon event
yang terjadi pada halaman. Javascript merupakan perekat yang menyatukan
halaman-halaman web. Javascript dibangun secara langsung ke dalam browser dan
terintegrasi dengan HTML. Ketika browser memuat sebuah halaman, server akan
mengirim konten utuh dari dokumen, termasuk statement-statement Javascript.
Konten HTML kemudian dibaca dan diinterpretasi baris demi baris sampai tag
pembuka Javascript dibaca, pada saat itu interpreter Javascript mengambil alih.
Ketika tag penutup Javascript diraih, pemrosesan HTML berlanjut. (Siahaan dan
Sianipar, 2018)
2.4 ReactJS
ReactJS adalah perpustakaan Javascript yang digunakan untuk mengembangkan
komponen antarmuka pengguna yang dapat digunakan kembali. Menurut
dokumentasi resmi ReactJS (ReactJS, 2019), React adalah perpustakaan untuk
membangun antarmuka pengguna modular Javascript yang deklaratif, efisien dan
fleksibel untuk membangun tampilan antarmuka pada web. ReactJS dibuat oleh
Facebook dan komunitas React yang terdiri dari developer-developer dan
perusahaan-perusahan. React dapat digunakan sebagai dasar development single-
page web.
ReactJS pada dasarnya memungkinkan pengembangan aplikasi berbasis web yang
besar dan kompleks yang dapat mengubah datanya tanpa harus me-refresh halaman
berikutnya. React menggunakan View (V) dalam Model-View-Controller (MVC).
Digunakan juga Document Object Model (DOM), sehingga menawarkan aplikasi
yang sederhana, berkinerja dan kuat.
ReactJS dikenal sebagai pemain yang sangat efisien. Ini adalah salah satu faktor
kunci yang membuat framework yang menonjol dari puluhan framework di luar
sana. Alasan dari kinerja yang sangat efisien adalah framework dasarnya adalah
fitur DOM virtual framework. ReactJS memelihara model objek dokumen virtual
di dalam memori. Setiap perubahan hanya pada komponen yang berganti bukan
mengubah seluruh tampilan halamannya.
6
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
2.5 NPM
NPM (Node Package Manager) dirilis pada 13 Januari 2010 dan dimasukkan
sebagai bagian dari kerangka kerja Node.js (NPM, 2020), NPM sekarang menjadi
pengelola paket dominan untuk JavaScript berdasarkan pangsa pasar, memiliki
lebih dari setengah jumlah pengguna, yaitu 60% basis user Javascript saat terakhir
diperiksa pada tahun 2018, membantu banyak project untuk dibundel dengan
Node.js (NodeJS, 2018).
Saat ini paket manajer NPM dikelola oleh NPM Inc., sebuah perusahaan yang
didirikan pada tahun 2014 dengan tujuan mempertahankan perangkat lunak NPM
dan repositori paket, sambil menawarkan layanan berbayar dan dukungan untuk
penggunaan perusahaan. Pengembangan paket manajer NPM saat ini sangat aktif,
dengan versi stabil terbarunya adalah versi 6.9.0 yang dirilis pada 6 Maret 2019
(NPM, 2020).
Registri NPM, yang merupakan layanan yang menampung paket yang dikirimkan
oleh pengembang, adalah paket registri online tunggal terbesar pada 2017, melayani
lebih dari dua kali lipat dari registri terbesar berikutnya, registri Apache Maven
untuk paket Java (Linux, 2017).
2.6 SASS
Menurut (O'Donnell, 2019), SASS (Syntactically Awesome Style Sheets) adalah
bahasa styling open source yang mudah digunakan, SASS membantu mengurangi
pengulangan dan kesulitan yang ada pada CSS (Cascading Stylesheet) tradisional.
SASS memungkinkan penggunanya untuk menstyling saat mengerjakan proyek
pengembangan web berskala besar, membuatnya lebih cepat dan lebih efisien untuk
menulis styling yang dapat digunakan kembali dari awal untuk proyek yang lebih
kecil.
SASS adalah bahasa skrip preprocessor yang mengkompilasi ke CSS menggunakan
aplikasi kompiler GUI yang banyak di antaranya adalah open source. Seperti bahasa
berorientasi objek, SASS menggunakan variabel, nesting, mixin dan fungsi untuk
menulis styling yang dapat digunakan kembali. Setelah selesai, file SASS kemudian
diterjemahkan ke dalam file CSS menggunakan kompiler (O'Donnell, 2019).
7
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
2.7 Metodologi Desain Atomik
Menurut (Frost, 2016), desain atomik didasari dari reaksi kimia, dimana satuan
terkecil merupakan atom. Atom yang bergabung membantuk molekul. Gabungan
molekul membentuk organisme yang kompleks. Desain atom adalah metodologi
yang terdiri dari lima tahap berbeda yang bekerja bersama untuk membuat sistem
desain antarmuka dengan cara yang lebih disengaja dan hierarkis. Lima tahap
desain atom adalah:
1. Atom
Atom pada antarmuka berfungsi sebagai blok bangunan dasar. Atom-atom
ini termasuk HTML dasar elemen seperti label formulir, input, tombol, dan
lainnya yang tidak bisa dipecah lagi fungsinya.
Gambar 2. 1 Contoh atom pada antarmuka
Sumber: (Frost, 2016)
Gambar 2.1 menunjukkan label, input dan button merupakan atom, yaitu
bagian terkecil pada antarmuka.
2. Molekul
Molekul adalah kelompok elemen UI yang relatif sederhana yang berfungsi
bersama sebagai satu kesatuan. Misalnya, label formulir, input pencarian,
dan tombol dapat bergabung bersama untuk membuat molekul form
pencarian.
Gambar 2. 2 Contoh molekul pada antarmuka
Sumber: (Frost, 2016)
8
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Contoh molekul pada antarmuka terdapat pada gambar 2.2. Atom label
formulir, input pencarian dan tombol pencarian digabung menjadi molekul
form pencarian.
3. Organisme
Organisme adalah komponen UI yang relatif kompleks, terdiri dari
kelompok molekul dan / atau atom dan / atau organisme lain. Organisme ini
membentuk bagian yang berbeda dari suatu antarmuka. Contoh dari
organisme adalah komponen header seperti yang tertera pada gambar 2.3
berikut:
Gambar 2. 3 Contoh organisme pada antarmuka
Sumber: (Frost, 2016)
Berdasarkan gambar 2.3, menunjukkan organisme header yang terdiri dari
atom logo, molekul navigasi yang terdiri dari teks dan link, serta molekul
form pencarian yang terdiri dari form, label, input teks, dan tombol
pencarian.
2.8 Metodologi Agile
Agile merupakan pendekatan berulang yang dilakukan dengan mengedepankan
kolaborasi serta menggunakan dokumen formal yang terbatas dan tepat untuk
membangun perangkat lunak yang berkualitas dalam hal biaya yang efektif serta
waktu yang sesuai dengan kebutuhan stakeholder yang bisa berubah-ubah.
(Raharjana, 2017)
Kata agile berarti bersifat cepat, ringan, bebas bergerak, waspada. Agile juga
merupakan model yang lebih efektif dari pada model tradisional. Namun, metode
agile bukan suatu proses yang bersifat menentukan, dengan kata lain tidak
mendefinisikan prosedur secara detail untuk bagaimana membuat tipe model yang
telah diberikan, meskipun terdapat cara untuk menjadi suatu modeler yang efektif.
(Malik, et al., 2017)
9
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 2. 4 Model Pengembangan Agile
Sumber: (Stoica, et al., 2016)
Berdasarkan gambar 2.6 tahapan pengembangan sistem dengan metode agile yang
dilakukan terdiri dari perencanaan, perancangan dan pengembangan, pengujian,
distribusi, dan peninjauan.
2.9 Elevenia
PT XL Planet yang merupakan sebuah perusahaan joint venture antara PT XL
Axiata, Tbk., dan SK Planet dari Korea Selatan. PT XL Axiata merupakan
perusahaan operator terbesar kedua di Indonesia dan SK Planet adalah anak
perusahaan dari SK Telecom Korea Selatan, perusahaan operator terbesar di Korea
Selatan. Per paruh kedua 2017, Elevenia berada di bawah grup Salim lewat PT Jaya
Kencana Mulia Lestari dan Superb Premium Pte. Ltd.
PT XL Planet didirikan pada tanggal 11 Maret 2014 dengan nama lain Elevenia,
nama Elevenia diambil dari angka 11 (eleven), yaitu tanggal PT XL Planet berdiri.
Elevenia juga merupakan nama produk utama PT XL Planet.
Elevenia adalah situs belanja online dengan konsep open marketplace di Indonesia
yang memberikan kemudahan dan keamanan berbelanja online. Situs ini
menawarkan berbagai macam produk yang terbagi dalam 8 kategori antara lain:
fashion, beauty/health, babies/kids, home/garden, gadget/komputer, elektronik,
sports/hobby, dan service/food (Elevenia, 2019).
10
BAB III
PERENCANAAN DAN REALISASI
3.1 Deskripsi Program Aplikasi
Framework yang akan dibangun merupakan framework antarmuka berbasis web
dengan komponen yang dapat digunakan ulang untuk keperluan Elevenia dalam
membangun web. Framework ini akan dibuatkan dokumentasi penggunaan dari
cara menginstalasi dan juga menggunakan komponen yang ada. Tahapan-tahapan
proses pengerjaan aplikasi diantaranya adalah:
3.1.1 Tahapan Perencanaan
Perencanaan dilakukan bersama dengan tim desainer serta kepala tim
frontend elevenia. Untuk perencanaan awal meliputi penentuan komponen
yang akan dibuat. Perencanaan iterasi selanjutnya meliputi perencanaan
komponen yang akan ditambahkan. diperbarui maupun yang perlu
diperbaiki.
3.1.2 Tahapan Perancangan
Perancangan meliputi klasifikasi komponen menjadi atom, molekul dan
organisme, menentukan class utility tambahan serta menentukan struktur
folder, file, kode yang akan digunakan. Perancangan dilakukan Bersama
dengan desainer dan frontend developer Elevenia. Iterasi selanjutnya
meliputi klasifikasi komponen serta menentukan penempatan komponen
pada folder, nama file, serta mengikuti struktur kode yang dibuat pada awal
rancangan.
3.1.3 Tahapan Pengembangan
Pengembangan dilakukan berdasarkan rancangan yang telah dibuat.
Pengembangan meliputi pengembangan komponen pada framework user
interface dan dokumentasinya.
3.1.4 Tahapan Pengujian
Pengujian dilakukan menggunakan whitebox testing, selain menguji
komponen yang sesuai dengan desain yang dibuat dan fungsi yang berjalan
dengan baik. Struktur kode dipastikan sesuai dengan standar dan efektif
untuk digunakan.
11
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
3.2 Cara Kerja Program Framework
Agar dapat menggunakan framework user interface Elevenia berbasis web,
diperlukan instalasi pada projek yang akan digunakan. Berikut merupakan
flowchart dari instalasi framework:
Gambar 3. 1 Flowchart instalasi framework
Sumber: pribadi
Untuk dapat menggunakan framework, dilakukan instalasi pada projek yang dipilih
menggunakan NPM (Node Package Manager). Setelah berhasil login, lalu instal
framework dan framework siap untuk digunakan. Untuk menggunakan framework,
terdapat dokumentasi sebagai panduan penggunaan komponen yang ada pada
framework.
12
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 2 Flowchart cara kerja program aplikasi dokumentasi
Sumber: pribadi
Setelah instalasi berhasil, dapat dilihat penggunaan framework dalam dokumentasi.
Untuk mengakses dokumentasi diperlukan untuk terhubung dengan jaringan lokal
Elevenia. Setelah itu baru dapat melihat dokumentasinya.
3.3 Rancangan Program Framework
3.3.1 Use Case
Gambar 3. 3 Use case Elevenia saat ini secara garis besar
Sumber: pribadi
Berdasarkan use case Elevenia saat ini secara garis besar, fitur masih berupa
fitur dasar untuk jual beli tanpa adanya pengalaman lebih untuk pengguna.
13
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 4 Use case Elevenia dengan fitur tambahan
Sumber: pribadi
Berdasarkan use case Elevenia dengan fitur tambahan flash sale dan melihat
post toko favorit, untuk menyediakan pengalaman lebih untuk pengguna
dengan komponen user interface yang berbeda dari sebelumnya. Kedua fitur
baru tersebut baru rencana awal, tidak menutup kemungkinan akan adanya fitur
baru yang lebih banyak ke depannya.
Gambar 3. 5 Use case program aplikasi
Sumber: pribadi
Untuk framework user interface yang akan dibangun. terdapat 2 aktor, yaitu UI
dan Frontend Developer yang dapat melihat dokumentasi serta menggunakan
framework dengan menginstalasi dan login NPM terlebih dahulu. Lalu UI
Designer yang dapat melihat dokumentasi untuk memastikan desain yang
dibuat cocok dengan desain yang dibuat oleh UI Designer.
14
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
3.3.2 Komponen pada Framework
Sistem saat ini tidak menggunakan framework dan terdapat inkonsistensi
desain pada antarmukanya. Contoh inkosistensi desain terdapat pada
komponen tombol/button.
Gambar 3. 6 Tombol pada halaman deals Elevenia
Sumber: (Elevenia, 2020)
Tombol pada gambar 3.6 memiliki efek timbul dengan border radius 2 pixel
dan warna tema utama merah dan warna alternatif abu-abu.
Gambar 3. 7 Tombol pada halaman produk Elevenia
Sumber: (Elevenia, 2020)
Tombol pada gambar 3.7 memiliki efek datar dengan border radius 2 pixel dan
warna tema utama jingga dan warna alternatif putih dengan garis jingga.
Gambar 3. 8 Tombol pada footer Elevenia
Sumber: (Elevenia, 2020)
Tombol pada gambar 3.8 memiliki efek gradasi dengan border radius 2 pixel
dan warna tema utama putih abu dengan garis abu.
Gambar 3. 9 Tombol pada halaman My Elevenia
Sumber: (Elevenia, 2020)
Tombol pada gambar 3.9 memiliki efek datar dengan border radius 2 pixel
dan warna tema utama jingga dan warna alternatif putih dengan garis abu.
Gambar 3. 10 Tombol pada live chat Elevenia
Sumber: (Elevenia, 2020)
Tombol pada gambar 3.10 memiliki efek datar dengan border radius 4 pixel
dan warna tema utama jingga yang lebih muda dari gambar 3.7.
15
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Selain inkosistensi desain pada komponen tombol/button, masih ada banyak
inkosistensi desain serta kode pada situs web Elevenia. Diperlukan desain yang
konsisten dan komponen yang jelas. Maka dari itu, telah dibuat rancangan
komponen apa saja yang akan dibuat agar terstandarisasi desain dan kodenya.
Berdasarkan desain atomik, komponen dibagi menjadi atom, molekul,
organisme dengan dukungan utility. Karena templat dan halaman tidak
termasuk dalam desain dasar, maka tidak dimasukkan ke dalam daftar
komponen yang akan dibuat.
Tabel 1. Komponen pada framework
Sumber: pribadi
Atom Molekul Organisme Utility
• AlertBox
• Button
• Box
• Checkbox
• DatePicker
• Divider
• IconGlyph
• IconSpecial
• ModalBox
• Modal
• NextNavButton
• Radiobutton
• SelectButton
• Table
• TextField
• Toggle
• Accordion
• Breadcrumbs
• ButtonPopover
• OptionBox
• Pagination
• RangeSlider
• SearchBar
• Stepper
• Uploader
• Footer
• Header
• MegaMenu
• ProgressTracker
• Tabs
• Border
• Clearfix
• Color
• Display
• Flex
• Float
• Sizing
• Spacing
• Position
• Typography
• VerticalAlign
• Z-Index
Tabel 1 menunjukkan atom, molekul, organisme, dan utility apa saja yang akan
dibangun pada framework ini. Komponen-komponen di atas merupakan
rancangan awal dan dapat berubah sewaktu-waktu tergantung permintaan dan
kebutuhan. Desain dari komponen akan dibuat oleh UI designer.
16
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
3.3.3 Desain Mockup Dokumentasi
Desain dari dokumentasi yang akan dibuat terdiri dari halaman instalasi dan
dokumentasi.
Gambar 3. 11 Desain mockup dokumentasi
Sumber: pribadi
Desain pada gambar 3.11 merupakan desain tutorial dari penggunaan dan instalasi
framework
Gambar 3. 12 Desain mockup dokumentasi
Sumber: pribadi
17
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Desain pada gambar 3.12 merupakan desain halaman penggunaan komponen-
komponen pada framework
3.4 Program Aplikasi
Program Aplikasi tediri atas framework dan juga dokumentasinya, dimana
framework dipasang menggunakan NPM (Node Package Manager). Sedangkan
dokumentasinya dapat dilihat untuk penggunaan framework.
3.4.1 Tampilan Dokumentasi Framework
Aplikasi berbentuk dokumentasi web, tampilan dari dokumentasi dapat dilihat pada
gambar berikut:
Gambar 3. 13 Tampilan dokumentasi
Sumber: pribadi
Tampilan dokumentasi terdiri atas utilities, atom, molekul, organisme, sesuai
dengan rancangan metodologi atomic design. Berikut merupakan macam utilities,
atom, molekul dan organisme:
1. Utilities
Utilities merupakan style tambahan pada kelas untuk mempermudah dalam
membuat tampilan. Berikut merupakan tampilan kelas utilities:
a. Border
Border merupakan utility yang digunakan untuk mengatur ketebalan garis
tepi.
18
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 14 Utility Border Color
Sumber: pribadi
Gambar 3.14 merupakan Border Color yang digunakan untuk mewarnai garis
tepi.
Gambar 3. 15 Utility Border Additive dan Border Substractive
Sumber: pribadi
Gambar 3.15 merupakan Border additive dan border substractive yang
digunakan untuk mengatur tata letak garis tepi.
Gambar 3. 16 Utility Border Radius
Sumber: pribadi
19
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3.16 menunjukkan Border Radius yang digunakan untuk mengatur
ketebalan garis tepi.
b. Clearfix
Gambar 3. 17 Utility Clearfix
Sumber: pribadi
Gambar 3.17 menunjukkan clearfix, yaitu kelas tambahan utility yang
digunakan untuk menghapus konten dengan cepat dan mudah.
c. Color
Color merupakan kelas tambahan untuk text dan background color
Gambar 3. 18 Utility Text Color
Sumber: pribadi
Gambar 3.18 merupakan gambar yang menunjukkan text color.
Gambar 3. 19 Utility Background Color
Sumber: pribadi
Gambar 3.19 merupakan gambar yang menunjukkan background color,
digunakan untuk mewarnai latar belakang teks.
20
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
d. Display
Display merupakan kelas tambahan utility untuk mengatur style tampilan
elemen.
Gambar 3.20 merupakan gambar yang menunjukkan display, digunakan untuk
mengatur tampilan nilai elemen yang dimasukkan ke dalam atribut class pada
komponen.
Gambar 3. 20 Utility Display
Sumber: pribadi
21
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 21 Utility Overlay dan Cursor
Sumber: pribadi
Gambar 3.21 merupakan gambar yang menunjukkan tampilan berupa overlay
dan cursor, digunakan untuk mengatur tampilan nilai elemen.
e. Flex
Flex digunakan untuk mengelola layout, posisi dan tampilan dari suatu
konten.
Gambar 3. 22 Utility Display Flex dan Display Inline Flex
Sumber: pribadi
Gambar 3.22 merupakan gambar yang menunjukkan display flex dan display
inline flex, digunakan untuk mengatur container.
22
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 23 Utility Flex Row, Flex Column, Justify Content dan Align Items
Sumber: pribadi
Gambar 3.23 merupakan gambar yang menunjukkan Flex Row, Flex Column,
Justify Content dan Align Items, digunakan untuk mengatur item dalam
container serta mengontrol posisi horizontal (main axis) maupun vertikal
(cross axis).
f. Float
Float merupakan utility untuk memposisikan suatu elemen, nilai dari float
sendiri adalah left, right, none.
23
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 24 Utility Float
Sumber: pribadi
Gambar 3.24 menunjukkan gambar float untuk memposisikan elemen left,
right dan none.
g. Sizing
Sizing merupakan utility yang mengatur lebar dan tinggi elemen.
Gambar 3. 25 Utility Sizing
Sumber: pribadi
Gambar 3.25 menunjukkan gambar sizing untuk mengatur lebar dan tinggi
elemen.
24
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
h. Spacing
Spacing merupakan utility yang digunakan untuk memodifikasi margin
dan padding.
Gambar 3.26 menunjukkan gambar spacing, digunakan untuk mengatur
margin dan padding.
Gambar 3. 26 Utility Spacing
Sumber: pribadi
25
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
i. Position
Position merupakan utility yang digunakan untuk mengkonfigurasi posisi
elemen.
Gambar 3. 27 Utility Position
Sumber: pribadi
Gambar 3.27 menunjukkan gambar position, digunakan untuk
mengkonfigurasi posisi elemen.
j. Typhography – Desktop
Typhography – Desktop merupakan utility yang mengatur dan menampilkan
desain teks typhographic.
26
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 28 Utility Typhography
Sumber: pribadi
Gambar 3.28 menunjukkan gambar typhography, digunakan untuk mengatur
teks elemen dengan desain typhographic.
k. Vertical Align
Vertical Align merupakan utility yang mengatur posisi vertikal dan hanya
mempengaruhi inline, inline-block, inline-table, dan table cell elements.
Gambar 3. 29 Utility Vertical Align
Sumber: pribadi
Gambar 3.29 menunjukkan gambar Vertical Align, digunakan untuk mengatur
posisi vertikal.
27
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
l. Z – index
Z – index merupakan utility yang mengatur layout dalam membuat elemen yang
bertumpuk-tumpuk (stack order)
Gambar 3. 30 Utility Z-Index
Sumber: pribadi
Gambar 3.30 menunjukkan gambar Z-Index, digunakan untuk membuat
tumpukan elemen.
2. Layout
Layout adalah desain dasar untuk membuat tampilan suatu website terutama
pada penataan elemen-elemen sebuah website. Berikut merupakan bagian dari
layout:
a. Container
Container merupakan tempat untuk menampung elemen grid sistem.
Gambar 3. 31 Layout Container
Sumber: pribadi
Gambar 3.31 menunjukkan gambar layout container, digunakan untuk
menampung elemen.
28
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
b. Grid
Grid merupakan pengaturan ukuran tampilan yang ditampilkan sesuai
dengan ukutan layar.
Gambar 3. 32 Layout Grid
Gambar 3.32 menunjukkan gambar grid, digunakan untuk mengatur tampilan
elemen.
3. Atom
Atom pada antarmuka berfungsi sebagai blok bangunan dasar. Atom-atom ini
termasuk HTML dasar elemen seperti label formulir, input, tombol, dan
lainnya yang tidak bisa dipecah lagi fungsinya. Berikut merupakan macam
komponen atom:
29
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
a. Alert Box
Alert box digunakan sebagai komponen untuk memberikan peringatan kepada
pengguna, terdiri dari 3 varian yaitu success, warning, dan danger. Terdiri dari
atom icon, teks, dan box.
Gambar 3. 33 Atom Alert Box
Sumber: pribadi
30
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 34 Lanjutan gambar Alert Box
Sumber: pribadi
Gambar 3.33 dan 3.34 menunjukkan gambar Alert Box, digunakan untuk
menampilkan sebuah dialog peringatan kepada user.
b. Button
Button digunakan sebagai tombol dengan 3 variasi ukuran yaitu: small, default,
dan large. Button juga memiliki properti variant untuk mengganti warna.
Gambar 3. 35 Atom Button Size
Sumber: pribadi
31
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3.35 menunjukkan gambar Button Size, digunakan untuk mengatur ukuran
tombol dari ukuran small, default dan large.
Gambar 3. 36 Atom Button Type
Sumber: pribadi
32
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3.36 menunjukkan gambar Button Type, digunakan untuk mengatur jenis
tombol.
Gambar 3. 37 Atom Button Level dan Floating
Sumber: pribadi
33
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3.37 menunjukkan gambar Button Level dan Floating, digunakan untuk
mengatur level dan floating tombol.
c. Box
Box digunakan sebagai komponen untuk menampung komponen lainnya. Box
didesain dengan menggunakan box shadow.
Gambar 3. 38 Atom Box
Sumber: pribadi
Gambar 3.38 menunjukkan gambar Box, digunakan untuk menampung
komponen lainnya. Terdiri dari default, action dan disable.
34
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
d. Checkbox
Checkbox adalah bagian dari form untuk mencentang satu atau lebih pilihan.
Dengan kotak yang dapat diceklis jika diklik dan teks di sebelah kanannya.
Gambar 3. 39 Atom Checkbox
Sumber: pribadi
Gambar 3.39 menunjukkan gambar checbox, digunakan untuk membuat kotak
isian yang diisi dengan cara menceklist kotak tersebut. checkbox biasa
digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.
e. Datepicker
Date picker adalah input date dengan kalender dan input yang desainnya telah
disesuaikan dengan desain dari Elevenia.
35
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 40 Atom Datepicker
Sumber: pribadi
Gambar 3.40 menunjukkan gambar Datepicker, digunakan untuk memilih
tanggal yang telah disesuaikan.
f. Divider
Divider merupakan pembatas section yang terdiri dari garis dan teks
Gambar 3. 41 Atom Divider
Sumber: pribadi
Gambar 3.41 menunjukkan gambar Divider, digunakan sebagai pembatas.
g. Icon Glyph
Icon Glyph merupakan simbol grafis dasar yang menyediakan tampilan atau
bentuk font yang di styling sesuai dengan kriteria dari desainer, dimana variasi
icon disesuaikan dengan kebutuhan.
36
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 42 Atom Icon Glyphs 16px
Sumber: pribadi
Gambar 3.42 menunjukkan gambar Icon Glyphs ukuran 16pixel yang terdiri
dari 90 gambar, digunakan untuk menambah simbol. Teks di bawah icon pada
dokumentasi merupakan nama class yang dapat kita tambahkan pada
komponen icon.
37
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 43 Atom Icon Glyphs 24px
Sumber: pribadi
Gambar 3.43 menunjukkan gambar Icon Glyphs ukuran 24pixel yang terdiri
dari 90 gambar, digunakan untuk menambah simbol. Teks di bawah icon pada
dokumentasi merupakan nama class yang dapat kita tambahkan pada
komponen icon.
38
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
h. Icon Special
Icon special merupakan bagian dari icon khusus yang memiliki 2 warna dan
hanya terdapat pada komponen tertentu seperti tab.
Gambar 3. 44 Atom Icon Special 36px
Sumber: pribadi
Gambar 3.44 menunjukkan gambar Icon Special ukuran 36pixel yang terdiri
dari 16 gambar, digunakan untuk menambah simbol.
Gambar 3. 45 Atom Icon Special 40px
Sumber: pribadi
Gambar 3.45 menunjukkan gambar Icon Special ukuran 40pixel yang terdiri
dari 16 gambar, digunakan untuk menambah simbol.
39
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
i. Modal Box
Moda Boxl adalah komponen box yang muncul pada layar berupa sebuah kotak
dialog atau sering di sebut dengan popup yang menampilkan pesan atau
konfirmasi untuk suatu aksi.
Gambar 3. 46 Atom Modal Box ukuran small dan medium
Sumber: pribadi
40
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 47 Atom Modal Box ukuran Large dan Extra Large
Sumber: pribadi
Gambar 3. 48 Atom Tipe Modal
Sumber: pribadi
41
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 49 Lanjutan Gambar Tipe Modal
Sumber: pribadi
42
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 50 Atom Toast Modal
Sumber: pribadi
Gambar 3.50 adalah atom toast modal, yaitu modal dengan tipe toast yang
dapat diatur menjadi vertical maupun horizontal
43
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 51 Atom Modal Box with Banner
Sumber: pribadi
44
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 52 Atom Modal Box untuk Mobile
Sumber: pribadi
j. Modal
Modal adalah komponen yang muncul pada layar ketika komponen triggernya
diklik.
Gambar 3. 53 Atom Modal
Sumber: pribadi
k. Next-Navigation Button
Next navigation button adalah tombol untuk bernavigasi ke komponen sebelum
maupun sesudahnya (left, right, both direction).
45
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 54 Atom Next-Navigation Button
Sumber: pribadi
Gambar 3.54 menunjukkan gambar Next-Navigation Button, digunakan untuk
bernavigasi ke komponen sebelum maupun sesudahnya.
l. Radio Button
Radio Button adalah tombol pilihan yang diisi dengan cara memilih dari salah
satu tombol radio yang ada. Radio biasa digunakan untuk pilihan yang
membatasi user untuk memilih satu dari pilihan yang ada.
46
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 55 Atom Radio Button
Sumber: pribadi
Gambar 3.55 menunjukkan gambar Radio Button, digunakan untuk
mencentang satu dari banyaknya pilihan.
m. Select Button
Select Button adalah tombol yang funginya untuk memilih pilihan
Gambar 3. 56 Atom Select Button
Sumber: pribadi
Gambar 3.56 menunjukkan gambar Select Button, digunakan untuk memilih
pilihan yang dipilih user
47
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
n. Table
Tabel merupakan struktur yang digunakan untuk menampilkan informasi
dalam bentuk baris dan kolom.
Gambar 3. 57 Atom Table
Sumber: pribadi
Gambar 3.57 menunjukkan gambar Table, merupakan tabel seperti pada
umumnya namun distyling demikian rupa agar sesuai dengan desain yang
diberikan oleh desainer dengan warna yang berbeda dari tabel pada umunya.
o. Textfield
Textfield adalah area satu baris yang memungkinkan pengguna untuk
memasukkan teks. Textfield terdiri dari berbagai macam input yang ada
pada form, textfield juga dapat diartikan sebagai input text pada html.
Textfield yang ada pada framework ini telah sesuai dengan ukuran yang
ditentukan serta gaya yang dibuat oleh desainer Elevenia.
48
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 58 Atom Textfield untuk desktop
Sumber: pribadi
Gambar 3.58 menunjukkan atom Textfield dengan kondisi basic full width,
basic dengan multiple field inline, label and helptext full width, dan label
and helptext multiple field inline.
Gambar 3. 59 Atom Textfield untuk desktop
Sumber: pribadi
49
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 60 Atom Lanjutan gambar Textfield untuk desktop
Sumber: pribadi
Gambar 3.60 menunjukkan atom Textfield kecil dengan kondisi basic full
width, basic dengan multiple field inline, label and helptext full width, label
and helptext multiple field inline, logo di kiri dan juga logo di kanan.
Gambar 3. 61 Atom Lanjutan gambar Textfield condition untuk desktop
Sumber: pribadi
Gambar 3.58 menunjukkan atom Textfield dengan kondisi basic default,
basic with helptext, basic disabled, success default, success with helptext,
success disabled, error default, error with helptext, error disabled,
autocomplete default, dan autocomplete with helptext.
50
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 62 Atom Textfield untuk Mobile
Sumber: pribadi
Gambar 3. 63 Atom Lanjutan gambar Textfield condition untuk Mobile
Sumber: pribadi
p. Toggle
Toggle adalah elemen yang dibuat menggunakan bagian dari elemen input,
yaitu checkbox. Elemen switch toggle sendiri memiliki dua fungsi yaitu true
atau false (aktif atau tidak aktif) seperti layaknya juga peran elemen checkbox
pada html.
51
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 64 Atom Toggle Default, Default Checked, Disabled
Sumber: pribadi
Gambar 3. 65 Atom Toggle Label Right, Label Left, Label Inside
Sumber: pribadi
4. Molekul
Molekul adalah kelompok elemen UI yang relatif sederhana yang berfungsi
bersama sebagai satu kesatuan. Berikut merupakan tampilan kelas molekul:
52
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
a. Accordion
Gambar 3. 66 Molekul Accordion
Sumber: pribadi
Gambar 3.66 menunjukkan gambar Accordion, terdiri dari teks dan icon yang
membentuk komponen show-hide.
b. Breadcrumbs
Gambar 3. 67 Molekul Breadcrumbs
Sumber: pribadi
Gambar 3.67 menunjukkan gambar Breadcrumb digunakan untuk melihat
menu yang memiliki sub-menu. Terdiri dari atom teks dan icon.
c. Button Popover
Gambar 3. 68 Molekul Button Popover
Sumber: pribadi
53
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3.68 menunjukkan gambar Button popover, yaitu berfungsi sama
seperti tombol pada umumnya, namun jika diklik akan muncul action lainnya
yang dapat diklik.
d. Option Box
Gambar 3. 69 Molekul Option Box
Sumber: pribadi
Gambar 3.69 menunjukkan gambar option box, yaitu input dengan berbagai
macam pilihan. Pada html biasa option box disebut juga dengan select option.
e. Pagination
Gambar 3. 70 Molekul Pagination
Sumber: pribadi
Gambar 3.73 menunjukkan gambar pagination, yaitu komponen pendukung
jika konten pada suatu halaman terlalu banyak. Terdiri dari atom button, icon
dan teks.
54
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
f. Range Slider
Gambar 3. 71 Molekul Range Slider
Sumber: pribadi
Gambar 3.71 menunjukkan gambar range slider, digunakan sebagai
komponen untuk menentukan range nilai seperti filter untuk harga.
g. Search Bar
Gambar 3. 72 Molekul Search Bar
Sumber: pribadi
55
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 73 Lanjutan gambar molekul search bar
Sumber: pribadi
Gambar 3.72 dan 3.73 menunjukkan gambar Search bar, yaitu komponen
untuk mencari dengan kata kunci. Terdiri dari icon, tombol, list dan textfield.
h. Stepper
Gambar 3. 74 Molekul Stepper Enabled
Sumber: pribadi
56
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 75 Molekul Stepper Disabled
Sumber: pribadi
Gambar 3.74 dan 3.75 menunjukkan gambar Search bar, Molekul yang
menentukan interval antara angka legal dalam elemen <input>.
i. Uploader
Uploader adalah input file yang didesain sedemikian rupa agar sesuai dengan
desain yang ada.
57
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 76 Molekul Uploader
Sumber: pribadi
58
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
5. Organisme
Organisme adalah komponen UI yang relatif kompleks, terdiri dari kelompok
molekul dan / atau atom dan / atau organisme lain. Berikut merupakan kelas
organisme:
a. Header
Gambar 3. 77 Organisme Header
Sumber: pribadi
Gambar 3.77 menunjukkan gambar Header, yaitu organisme yang terdiri dari
HeaderLeft dengan logo, HeaderBody dengan SearchBar, dan HeaderRight
dengan Icon.
b. Footer
Gambar 3. 78 Organisme Footer
Sumber: pribadi
Gambar 3.78 menunjukkan gambar Footer, yaitu organisme yang terdiri dari
FooterLeft dengan logo dan teks, serta FooterRight dengan Button.
c. Mega Menu
Gambar 3. 79 Organisme Mega Menu
Sumber: pribadi
Gambar 3.79 menunjukkan gambar Mega Menu, yaitu dropdown yang dipicu
oleh tautan atau area yang ditentukan.
59
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
d. Progress Tracker
Gambar 3. 80 Organisme Progress Tracker
Sumber: pribadi
Gambar 3. 81 Lanjutan gambar Organisme Progress Tracker (code)
Sumber: pribadi
Gambar 3.81 menunjukkan gambar Progress tracker, yaitu komponen kustom
Elevenia untuk melihat progres, seperti progres pengiriman barang maupun
pembelian.
60
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
e. Tabs
Gambar 3. 82 Organisme Tabs Default
Sumber: pribadi
Gambar 3. 83 Organisme Tabs Vertical dan Tabs Logo
Sumber: pribadi
61
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Gambar 3. 84 Organisme Tabs Fitted
Sumber: pribadi
Gambar 3.82, 3.83 dan 3.84 menunjukkan gambar Tabs, merupakan tombol menu
untuk berpindah tab. Terdiri dari tombol, box, dan garis yang telah dikustomisasi.
3.4.2 Tahap Pembuatan Package NPM
Framework harus diupload dalam bentuk package NPM agar dapat diinstall dan
digunakan, maka dari itu diperlukan beberapa tahapan untuk membuat package
NPM:
1. Membuat akun npm di website npmjs.com
Gambar 3. 85 Akun npm
Sumber: (npmjs.com)
Gambar 3.85 menunjukkan gambar akun npm, pembuatan akun dilakukan di
website npmjs.com.
62
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
2. Membuat script build untuk memisahkan folder yang akan dibuild
Gambar 3. 86 Script build
Sumber: pribadi
Gambar 3.86 menunjukkan script build npm, dilakukan untuk memisahkan
folder yang akan dibuild.
3. Membuat branch build pada github dan mengunggah seluruh folder build
ke branch build
Gambar 3. 87 Branch build
Sumber: (github.com/mutiadianita)
Gambar 3.87 menunjukkan branch build pada github dan mengunggah seluruh
folder build ke branch build.
4. Buka terminal atau command prompt lalu login ke npm dengan
menjalankan script npm login
Gambar 3. 88 script npm login
Sumber: pribadi
Gambar 3.88 menunjukkan gambar login npm melalui command prompt.
63
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
5. Inisiasi package npm dengan script npm init
Gambar 3. 89 Inisiasi package npm
Sumber: pribadi
Gambar 3.89 menunjukkan gambar inisiasi package npm dengan script npm
init.
6. Terakhir, publish dengan script npm publish
Gambar 3. 90 Publish Script
Sumber: pribadi
Gambar 3.90 menunjukkan gambar publish framework dengan script npm
publish
7. Package npm yang sudah dipublish dapat dilihat di npmjs.com
Gambar 3. 91 Hasil publish package
Sumber: pribadi
Gambar 3.91 menunjukkan gambar hasil package npm yang telah dipublish dan
dapat dilihat di website npmjs.com.
64
BAB IV
PEMBAHASAN
4. 1 Pengujian
Pengujian ini bertujuan untuk mengetahui kecacatan dari framework dan kesesuaian
framework dengan requirement sehingga kualitas dari aplikasi dapat terjamin.
Framework diharapkan memiliki kualitas yang baik sehingga mampu memenuhi
kebutuhan pengembangan web oleh user.
4. 2 Deskripsi Pengujian
Pengujian framework dilakukan menggunakan pengujian metode black box.
Pengujian black box bertujuan agar sistem terbebas error dan sesuai dengan desain.
Pengujian black box berfokus untuk mengetahui apakah semua komponen dapat
digunakan sesuai dengan desain dan fungsinya.
4. 3 Prosedur Pengujian
Pengujian terhadap framework dilakukan dengan tujuan memastikan framework
yang dibuat telah bekerja sebagaimana mestinya dan memenuhi tujuannya.
Pengujian dilakukan setelah perancangan dan pembuatan sistem selesai dilakukan.
Pengujian terdiri atas pengujian alpha dan juga User Acceptance Test yang
dilakukan oleh designer dan developer.
4.4 Data Hasil Pengujian
4.4.1 Data Hasil Pengujian Alpha
Pengujian framework dilakukan pada utility, layout, atom, molekul, dan organisme
penulis. Kolom item uji adalah item yang diuji, butir uji adalah pengujian yang
dilakukan, sedangkan kolom hasil yang diharapkan merupakan hasil dari butir uji.
Tabel 2. Hasil pengujian alpha
Kode Item Uji Butir Uji Hasil
1 2 3 4
A.1 Utility
Border
Menyesuaikan desain utility border
dengan desain dari desainer
Sesuai
A.2 Menyesuaikan penggunaan className
border
Sesuai
65
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4
B.1 Utility
Clearfix
Menyesuaikan desain utility clearfix
dengan desain dari desainer
Sesuai
B.2 Menyesuaikan penggunaan className
clearfix
Sesuai
C.1
Utility Color
Menyesuaikan desain utility color dengan
desain dari desainer
Sesuai
C.2 Menyesuaikan penggunaan className
color
Sesuai
D.1 Utility
Display
Menyesuaikan desain utility display
dengan desain dari desainer
Sesuai
D.2 Menyesuaikan penggunaan className
display
Sesuai
E.1
Utility Flex
Menyesuaikan desain utility flex dengan
desain dari desainer
Sesuai
E.2 Menyesuaikan penggunaan className
flex
Sesuai
F.1
Utility Float
Menyesuaikan desain utility float dengan
desain dari desainer
Sesuai
F.2 Menyesuaikan penggunaan className
float
Sesuai
G.1
Utility Sizing
Menyesuaikan desain utility sizing dengan
desain dari desainer
Sesuai
G.2 Menyesuaikan penggunaan className
sizing
Sesuai
H.1 Utility
Spacing
Menyesuaikan desain utility spacing
dengan desain dari desainer
Sesuai
H.2 Menyesuaikan penggunaan className
spacing
Sesuai
I.1 Utility
Position
Menyesuaikan desain utility position
dengan desain dari desainer
Sesuai
66
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4
I.2 Utility
Position
Menyesuaikan penggunaan className
clearfix
Sesuai
J.1 Utility
Typography
Menyesuaikan desain utility typography
dengan desain dari desainer
Sesuai
J.2 Menyesuaikan penggunaan className
typography
Sesuai
K.1 Utility
Vertical
Align
Menyesuaikan desain utility vertical align
dengan desain dari desainer
Sesuai
K.2 Menyesuaikan penggunaan className
vertical align
Sesuai
L.1 Utility Z-
Index
Menyesuaikan desain utility z-index
dengan desain dari desainer
Sesuai
L.2 Menyesuaikan penggunaan className z-
index
Sesuai
M.1
Layout Grid
Menyesuaikan desain layout grid dengan
desain dari desainer
Sesuai
M.2 Menyesuaikan penggunaan className
layout grid
Sesuai
N.1 Atom Alert
Box
Menyesuaikan desain atom alert box
dengan desain dari desainer
Sesuai
N.2 Menyesuaikan penggunaan className
dan komponen AlertBox
Sesuai
O.1
Atom Button
Menyesuaikan desain atom button dengan
desain dari desainer
Sesuai
O.2 Menyesuaikan penggunaan className
dan komponen Button
Sesuai
P.1
Atom Box
Menyesuaikan desain atom box dengan
desain dari desainer
Sesuai
P.2 Menyesuaikan penggunaan className
dan komponen Box
Sesuai
67
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4
Q.1 Atom Check
Box
Menyesuaikan desain atom checkbox
dengan desain dari desainer
Sesuai
Q.2 Menyesuaikan penggunaan className
dan komponen CheckBox
Sesuai
R.1 Atom Date
Picker
Menyesuaikan desain atom date picker
dengan desain dari desainer
Sesuai
R.2 Menyesuaikan penggunaan className
dan komponen DatePicker
Sesuai
S.1 Atom
Divider
Menyesuaikan desain atom divider
dengan desain dari desainer
Sesuai
S.2 Menyesuaikan penggunaan className
dan komponen Divider
Sesuai
T.1 Atom Icon
Glyph
Menyesuaikan desain atom icon glyph
dengan desain dari desainer
Sesuai
T.2 Menyesuaikan penggunaan className
dan komponen Icon
Sesuai
U.1 Atom Icon
Special
Menyesuaikan desain atom icon special
dengan desain dari desainer
Sesuai
U.2 Menyesuaikan penggunaan className
dan komponen IconSpecial
Sesuai
V.1 Atom Modal
Box
Menyesuaikan desain atom modal box
dengan desain dari desainer
Sesuai
V.2 Menyesuaikan penggunaan className
dan komponen ModalBox
Sesuai
W.1
Atom Modal
Menyesuaikan desain atom modal dengan
desain dari desainer
Sesuai
W.2 Menyesuaikan penggunaan className
dan komponen Modal
Sesuai
X.1 Atom Next
Nav Button
Menyesuaikan desain atom next nav
button dengan desain dari desainer
Sesuai
68
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4
X.2 Atom Next
Nav Button
Menyesuaikan penggunaan className
dan komponen NextNavButton
Sesuai
Y.1 Atom Radio
Button
Menyesuaikan desain atom radio button
dengan desain dari desainer
Sesuai
Y.2 Menyesuaikan penggunaan className
dan komponen RadioButton
Sesuai
Z.1 Atom Select
Button
Menyesuaikan desain atom select button
dengan desain dari desainer
Sesuai
Z.2 Menyesuaikan penggunaan className
dan komponen SelectButton
Sesuai
AA.1
Atom Table
Menyesuaikan desain atom table dengan
desain dari desainer
Sesuai
AA.2 Menyesuaikan penggunaan className
dan komponen Table
Sesuai
AB.1 Atom Text
Field
Menyesuaikan desain atom text field
dengan desain dari desainer
Sesuai
AB.2 Menyesuaikan penggunaan className
dan komponen TextField
Sesuai
AC.1
Atom Toggle
Menyesuaikan desain atom toggle dengan
desain dari desainer
Sesuai
AC.2 Menyesuaikan penggunaan className
dan komponen Toggle
Sesuai
AD.1 Molekul
Accordion
Menyesuaikan desain molekul accordion
dengan desain dari desainer
Sesuai
AD.2 Menyesuaikan penggunaan className
dan komponen Accordion
Sesuai
AE.1
Molekul
Breadcrumbs
Menyesuaikan desain molekul
breadcrumbs dengan desain dari desainer
Sesuai
AE.2 Menyesuaikan penggunaan className
dan komponen Breadcrumbs
Sesuai
69
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4
AF.1 Molekul
Button
Popover
Menyesuaikan desain molekul button
popover dengan desain dari desainer
Sesuai
AF.2 Menyesuaikan penggunaan className
dan komponen ButtonPopover
Sesuai
AG.1 Molekul
Option Box
Menyesuaikan desain molekul option box
dengan desain dari desainer
Sesuai
AG.2 Menyesuaikan penggunaan className
dan komponen OptionBox
Sesuai
AH.1 Molekul
Pagination
Menyesuaikan desain molekul pagination
dengan desain dari desainer
Sesuai
AH.2 Menyesuaikan penggunaan className
dan komponen Pagination
Sesuai
AI.1 Molekul
Range Slider
Menyesuaikan desain molekul range
slider dengan desain dari desainer
Sesuai
AI.2 Menyesuaikan penggunaan className
dan komponen RangeSlider
Sesuai
AJ.1 Molekul
Search Bar
Menyesuaikan desain molekul search bar
dengan desain dari desainer
Sesuai
AJ.2 Menyesuaikan penggunaan className
dan komponen SearchBar
Sesuai
AK.1 Molekul
Stepper
Menyesuaikan desain molekul stepper
dengan desain dari desainer
Sesuai
AK.2 Menyesuaikan penggunaan className
dan komponen Stepper
Sesuai
AL.1 Molekul
Uploader
Menyesuaikan desain molekul uploader
dengan desain dari desainer
Sesuai
AL.2 Menyesuaikan penggunaan className
dan komponen Uploader
Sesuai
AM.1 Organisme
Header
Menyesuaikan desain organisme header
dengan desain dari desainer
Sesuai
70
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4
AM.2 Organisme
Header
Menyesuaikan penggunaan className
dan komponen Header
Sesuai
AN.1 Organisme
Footer
Menyesuaikan desain organisme header
dengan desain dari desainer
Sesuai
AN.2 Menyesuaikan penggunaan className
dan komponen Header
Sesuai
AO.1 Organisme
Mega Menu
Menyesuaikan desain organisme mega
menu dengan desain dari desainer
Sesuai
AO.2 Menyesuaikan penggunaan className
dan komponen MegaMenu
Sesuai
AP.1 Organisme
Progress
Tracker
Menyesuaikan desain organisme progress
tracker dengan desain dari desainer
Sesuai
AP.2 Menyesuaikan penggunaan className
dan komponen ProgressTracker
Sesuai
AQ.1 Organisme
Tabs
Menyesuaikan desain organisme tabs
dengan desain dari desainer
Sesuai
AQ.2 Menyesuaikan penggunaan className
dan komponen Tabs
Sesuai
4.4.2 Data Hasil Pengujian Beta
1. User Acceptance Test Desainer
Pengujian framework dilakukan pada utility, layout, atom, molekul, dan organisme
oleh desainer. Desainer yang menguji desain framework adalah Faruza Arkan, UI
designer dari tim product design Elevenia.
Tabel 3. Hasil pengujian User Acceptance Test desainer
Kode Item Uji Hasil yang
diharapkan
Hasil yang
didapat Kesimpulan
A.1 Utility
Border
Menyesuaikan desain
utility border dengan
desain dari desainer
Utility border
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
71
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
B.1 Utility
Clearfix
Menyesuaikan desain
utility clearfix dengan
desain dari desainer
Utility clearfix
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
C.1 Utility
Color
Menyesuaikan desain
utility color dengan
desain dari desainer
Utility color
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
D.1 Utility
Display
Menyesuaikan desain
utility display dengan
desain dari desainer
Utility display
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
E.1 Utility Flex
Menyesuaikan desain
utility flex dengan
desain dari desainer
Utility flex sesuai
dengan desain
[✓] Diterima [ ] Ditolak
F.1 Utility
Float
Menyesuaikan desain
utility float dengan
desain dari desainer
Utility float
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
G.1 Utility
Sizing
Menyesuaikan desain
utility sizing dengan
desain dari desainer
Utility sizing
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
H.1 Utility
Spacing
Menyesuaikan desain
utility spacing dengan
desain dari desainer
Utility spacing
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
I.1 Utility
Position
Menyesuaikan desain
utility position dengan
desain dari desainer
Utility position
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
J.1
Utility
Typograph
y
Menyesuaikan desain
utility typography
dengan desain dari
desainer
Utility
typography
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
K.1
Utility
Vertical
Align
Menyesuaikan desain
vertical align dengan
desain dari desainer
Utility vertical
align sesuai
dengan desain
[✓] Diterima [ ] Ditolak
72
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
L.1 Utility Z-
Index
Menyesuaikan desain
utility z-index dengan
desain dari desainer
Utility z-index
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
M.1 Layout
Grid
Menyesuaikan desain
layout grid dengan
desain dari desainer
Layout grid
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
N.1 Atom Alert
Box
Menyesuaikan desain
atom alert box dengan
desain dari desainer
Atom alert box
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
O.1 Atom
Button
Menyesuaikan desain
atom button dengan
desain dari desainer
Atom button
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
P.1 Atom Box
Menyesuaikan desain
atom box dengan
desain dari desainer
Atom box sesuai
dengan desain
[✓] Diterima [ ] Ditolak
Q.1 Atom
Check Box
Menyesuaikan desain
atom checkbox dengan
desain dari desainer
Atom checkbox
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
R.1 Atom Date
Picker
Menyesuaikan desain
atom date picker
dengan desain dari
desainer
Atom date picker
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
S.1 Atom
Divider
Menyesuaikan desain
atom divider dengan
desain dari desainer
Atom divider
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
T.1 Atom Icon
Glyph
Menyesuaikan desain
atom icon glyph
dengan desain dari
desainer
Atom icon sesuai
dengan desain
[✓] Diterima [ ] Ditolak
73
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
U.1 Atom Icon
Special
Menyesuaikan desain
atom icon special
dengan desain dari
desainer
Atom icon
special sesuai
dengan desain
[✓] Diterima [ ] Ditolak
V.1 Atom
Modal Box
Menyesuaikan desain
atom modal box
dengan desain dari
desainer
Atom modal box
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
W.1 Atom
Modal
Menyesuaikan desain
atom modal dengan
desain dari desainer
Atom modal
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
X.1 Atom Next
Nav Button
Menyesuaikan desain
atom next nav button
dengan desain dari
desainer
Atom next nav
button sesuai
dengan desain
[✓] Diterima [ ] Ditolak
Y.1
Atom
Radio
Button
Menyesuaikan desain
atom radio button
dengan desain dari
desainer
Atom radio
button sesuai
dengan desain
[✓] Diterima [ ] Ditolak
Z.1
Atom
Select
Button
Menyesuaikan desain
atom select button
dengan desain dari
desainer
Atom select
button sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AA.1 Atom
Table
Menyesuaikan desain
atom table dengan
desain dari desainer
Atom table
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AB.1 Atom Text
Field
Menyesuaikan desain
atom text field dengan
desain dari desainer
Atom text field
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
74
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
AC.1 Atom
Toggle
Menyesuaikan desain
atom toggle dengan
desain dari desainer
Atom toggle
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AD.1 Molekul
Accordion
Menyesuaikan desain
molekul accordion
dengan desain dari
desainer
Molekul
accordion sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AE.1
Molekul
Breadcrum
bs
Menyesuaikan desain
molekul breadcrumbs
dengan desain dari
desainer
Molekul
breadcrumbs
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AF.1
Molekul
Button
Popover
Menyesuaikan desain
molekul button
popover dengan
desain dari desainer
Molekul button
popover sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AG.1 Molekul
Option Box
Menyesuaikan desain
molekul option box
dengan desain dari
desainer
Molekul option
box sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AH.1 Molekul
Pagination
Menyesuaikan desain
molekul pagination
dengan desain dari
desainer
Molekul
pagination sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AI.1
Molekul
Range
Slider
Menyesuaikan desain
molekul range slider
dengan desain dari
desainer
Atom range
slider sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AJ.1 Molekul
Search Bar
Menyesuaikan desain
molekul search bar
dengan desain dari
desainer
Molekul search
bar sesuai
dengan desain
[✓] Diterima [ ] Ditolak
75
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
AK.1 Molekul
Stepper
Menyesuaikan desain
molekul stepper
dengan desain dari
desainer
Molekul stepper
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AL.1 Molekul
Uploader
Menyesuaikan desain
molekul uploader
dengan desain dari
desainer
Atom uploader
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AM.1 Organisme
Header
Menyesuaikan desain
organisme header
dengan desain dari
desainer
Organisme
header sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AN.1 Organisme
Footer
Menyesuaikan desain
organisme header
dengan desain dari
desainer
Organisme footer
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AO.1
Organisme
Mega
Menu
Menyesuaikan desain
organisme mega menu
dengan desain dari
desainer
Organisme mega
menu sesuai
dengan desain
[✓] Diterima [ ] Ditolak
AP.1
Organisme
ProgressTr
acker
Menyesuaikan desain
organisme progress
tracker dengan desain
dari desainer
Organisme
progress tracker
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
AQ.1 Organisme
Tabs
Menyesuaikan desain
organisme tabs
dengan desain dari
desainer
Organisme tabs
sesuai dengan
desain
[✓] Diterima [ ] Ditolak
76
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
2. User Acceptance Test Developer
Pengujian framework dilakukan pada utility, layout, atom, molekul, dan organisme
oleh developer. Kolom item uji adalah item yang diuji, hasil yang diharapkan adalah
hasil yang diharapkan diterima, kolom hasil yang didapat merupakan hasil dari butir
uji, sedangkan kesimpulan adalah kesimpulan dari hasil yang didapat apakah hasil
yang diharapkan diterima atau tidak. Developer yang menguji desain framework
adalah Ali Syahidin, frontend developer dari tim frontend Elevenia.
Tabel 4. Pengujian User Acceptance Test Developer
Kode Item
Uji
Hasil yang
diharapkan Hasil yang didapat Kesimpulan
1 2 3 4 5
A.2 Utility
Border
Menyesuaikan
penggunaan
className border
className border
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
B.2 Utility
Clearfix
Menyesuaikan
penggunaan
className clearfix
className clearfix
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
C.2 Utility
Color
Menyesuaikan
penggunaan
className color
className color
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
D.2 Utility
Display
Menyesuaikan
penggunaan
className display
className display
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
E.2 Utility
Flex
Menyesuaikan
penggunaan
className flex
className flex
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
F.2 Utility
Float
Menyesuaikan
penggunaan
className float
className float
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
G.2 Utility
Sizing
Menyesuaikan
penggunaan
className sizing
className sizing
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
77
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
H.2 Utility
Spacing
Menyesuaikan
penggunaan
className spacing
className spacing
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
I.2 Utility
Position
Menyesuaikan
penggunaan
className clearfix
className position
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
J.2
Utility
Typogra
phy
Menyesuaikan
penggunaan
className typography
className
typography sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
K.2
Utility
Vertical
Align
Menyesuaikan
penggunaan
className vertical
align
className vertical
align sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
L.2 Utility
Z-Index
Menyesuaikan
penggunaan
className z-index
className z-index
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
M.2 Layout
Grid
Menyesuaikan
penggunaan
className layout grid
className layout
grid sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
N.2
Atom
Alert
Box
Menyesuaikan
penggunaan
className dan
komponen AlertBox
className dan
attribute Atom alert
box sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
O.2 Atom
Button
Menyesuaikan
penggunaan
className dan
komponen Button
className dan
attribute Atom
button sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
P.2 Atom
Box
Menyesuaikan
penggunaan
className dan
komponen Box
className dan
attribute Atom box
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
78
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
Q.2
Atom
Check
Box
Menyesuaikan
penggunaan
className dan
komponen CheckBox
className dan
attribute Atom
checkbox sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
R.2
Atom
Date
Picker
Menyesuaikan
penggunaan
className dan
komponen DatePicker
className dan
attribute Atom date
picker sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
S.2 Atom
Divider
Menyesuaikan
penggunaan
className dan
komponen Divider
className dan
attribute Atom
divider sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
T.2
Atom
Icon
Glyph
Menyesuaikan
penggunaan
className dan
komponen Icon
className dan
attribute Atom icon
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
U.2
Atom
Icon
Special
Menyesuaikan
penggunaan
className dan
komponen
IconSpecial
className dan
attribute Atom icon
special sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
V.2
Atom
Modal
Box
Menyesuaikan
penggunaan
className dan
komponen ModalBox
className dan
attribute Atom
modal box sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
W.2 Atom
Modal
Menyesuaikan
penggunaan
className dan
komponen Modal
className dan
attribute Atom
modal sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
79
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
X.2
Atom
Next
Nav
Button
Menyesuaikan
penggunaan
className dan
komponen
NextNavButton
className dan
attribute Atom next
nav button sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
Y.2
Atom
Radio
Button
Menyesuaikan
penggunaan
className dan
komponen
RadioButton
className dan
attribute Atom
radio button sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
Z.2
Atom
Select
Button
Menyesuaikan
penggunaan
className dan
komponen
SelectButton
className dan
attribute Atom
select button sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
AA.2 Atom
Table
Menyesuaikan
penggunaan
className dan
komponen Table
className dan
attribute Atom table
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
AB.2
Atom
Text
Field
Menyesuaikan
penggunaan
className dan
komponen TextField
className dan
attribute Atom text
field sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
AC.2 Atom
Toggle
Menyesuaikan
penggunaan
className dan
komponen Toggle
className dan
attribute Atom
toggle sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
AD.2
Molekul
Accordi
on
Menyesuaikan
penggunaan
className dan
komponen Accordion
className, attribute
dan fungsi Molekul
button sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
80
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
AE.2
Molekul
Breadcr
umbs
Menyesuaikan
penggunaan
className dan
komponen
Breadcrumbs
className dan
attribute Molekul
breadcrumbs sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
AF.2
Molekul
Button
Popover
Menyesuaikan
penggunaan
className dan
komponen
ButtonPopover
className, attribute
dan fungsi Molekul
button popover
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
AG.2
Molekul
Option
Box
Menyesuaikan
penggunaan
className dan
komponen OptionBox
className, attribute
dan fungsi Molekul
option box sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
AH.2
Molekul
Paginati
on
Menyesuaikan
penggunaan
className dan
komponen Pagination
className, attribute
dan fungsi Molekul
pagination sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
AI.2
Molekul
Range
Slider
Menyesuaikan
penggunaan
className dan
komponen
RangeSlider
className,
attribute, dan fungsi
Molekul range
slider sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
AJ.2
Molekul
Search
Bar
Menyesuaikan
penggunaan
className dan
komponen SearchBar
className dan
attribute Molekul
search bar sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
AK.2 Molekul
Stepper
Menyesuaikan
penggunaan
className dan
komponen Stepper
className,attribute,
dan fungsi Molekul
stepper sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
81
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
1 2 3 4 5
AL.2
Molekul
Uploade
r
Menyesuaikan
penggunaan
className dan
komponen Uploader
className,
attribute, dan fungsi
Molekul uploader
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
AM.2
Organis
me
Header
Menyesuaikan
penggunaan
className dan
komponen Header
className dan
attribute organisme
header sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
AN.2
Organis
me
Footer
Menyesuaikan
penggunaan
className dan
komponen Footer
className dan
attribute organisme
footer sesuai dan
dapat digunakan
[✓] Diterima [ ] Ditolak
AO.2
Organis
me
Mega
Menu
Menyesuaikan
penggunaan
className dan
komponen MegaMenu
className dan
attribute organisme
mega menu sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
AP.2
Organis
me
Progres
s
Tracker
Menyesuaikan
penggunaan
className dan
komponen
ProgressTracker
className dan
attribute organisme
progress tracker
sesuai dan dapat
digunakan
[✓] Diterima [ ] Ditolak
AQ.2 Organis
me Tabs
Menyesuaikan
penggunaan
className dan Tabs
className d
attribute tabs sesuai
dan dapat digunakan
[✓] Diterima [ ] Ditolak
4.5 Evaluasi
Setelah pengujian, evaluasi dilakukan untuk mengetahui hasil pengujian.
Berdasarkan hasil pengujian, seluruh komponen yang ada telah sesuai dengan
desain dari UI Designer maupun kebutuhan developer, dan dapat digunakan
langsung untuk pengembangan website elevenia.
82
BAB V
PENUTUP
5.1. Simpulan
Berdasarkan framework yang telah dibuat, maka kesimpulan yang didapat adalah:
1. Framework user interface elevenia berbasis web telah berhasil dibuat sesuai
dengan desain dari desainer dan kebutuhan developer,
2. Dokumentasi framework user interface elevenia telah berhasil dibuat sesuai
dengan desain dari desainer dan kebutuhan developer.
5.2. Saran
Berdasarkan framework yang telah dibuat menggunakan atomic design, masih
banyak kekurangan sehingga saran untuk penelitian selanjutnya adalah:
1. Komponen atom, molekul, dan organisme masih perlu ditambahkan seiring
dengan perkembangan desain elevenia,
2. Dokumentasi ke depannya dapat ditulis bersama dengan UX writer agar
dapat lebih dimengerti.
83
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
DAFTAR PUSTAKA
Arkan, F., 2020. Pengaruh Desain yang Tidak Konsisten Bagi Desainer dan User
[Wawancara] (18 Februari 2020).
Elevenia, 2019. Elevenia Blog. [Online] Available at:
https://blog.elevenia.co.id/about-us/ [Diakses 2 Februari 2020].
Elevenia, 2020. Elevenia. [Online] Available at: https://www.elevenia.co.id
[Diakses 2 Februari 2020].
Frost, B., 2016. Atomic Design. Pittsburgh: Brad Frost.
Linux, 2017. Linux. [Online] Available at: https://www.linux.com/news/state-
union-npm/ [Diakses 16 Maret 2020].
Malik, R. F., Fachrurrozi, M. dan Prabowo2, R., 2017. Sistem Informasi
Manajemen Laboratorium Menggunakan Metode Agile Dengan Konsem
Model-View-Controller Data Access Object. KNTIA, Volume 4, p. 65.
NodeJS, 2018. Node JS User Survey Report. [Online] Available at:
https://nodejs.org/en/user-survey-report/ [Diakses 16 Maret 2020].
NPM, 2020. NPM Github. [Online] Available at:
https://github.com/npm/npm/releases?after=v0.1.1 [Diakses 16 Maret
2020].
O'Donnell, J., 2019. SASS (syntactically awesome style sheets). Journal of
Computing Sciences in Colleges, XXXIV(4).
Raharjana, I. K., 2017. Pengembangan Sistem Informasi Menggunakan Metodologi
Agile. Yogyakarta: Deepublish.
ReactJS, 2019. React JS Community. [Online] Available at: https://www.reactjs.org
[Diakses 19 November 2019].
Shidqi, L., Effendy, V. dan Herdiani, A., 2017. Model User Interface Aplikasi
Pembelajaran Doa-doa Harian Sesuai User Experience Anak Usia Dini
Menggunakan Metode User Centered Design. Telkom University Journal.
Siahaan, V. dan Sianipar, R. H., 2018. JavaScript Untuk Profesional. Jogjakarta:
Sparta Publisher.
Stoica, M., Ghilic-micu, B., Mircea, M. dan Uscatu, C., 2016. Analyzing Agile
Development – from Waterfall Style to Scrumban. Informatica Economică
Bucharest University of Economics, Romania, 20(4), p. 5.
Syaripudin, G. A. dan Cahyana, R., 2015. Pengembangan Aplikasi Web Untuk
Pengajuan Cuti Pegawai Secara Online. Jurnal STT Garut, XII(2), p. 526.
Wardana, 2010. Menjadi Master PHP dengan Framework Codeigniter. Jakarta:
Elex Media Komputindo.
84
Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta
Lampiran 1 Daftar Riwayat Hidup
DAFTAR RIWAYAT HIDUP
Mutia Ayu Dianita, lahir di Bogor, 5 September 1997.
Telah menyelesaikan pendidikan di SDN Ciriung 04
pada tahun 2009, SMPN 1 Cibinong pada tahun 2012,
SMKN 1 Cibinong jurusan Multimedia pada tahun
2015, dan CCIT FTUI jurusan Teknologi Informasi
pada tahun 2017. Saat ini sedang menempuh
pendidikan Diploma IV di Politeknik Negeri Jakarta,
jurusan Teknik Informatika dan Komputer, program
studi Teknik Informatika.