V.

HASIL DAN PEMBAHASAN

5.1 Hasil Tampilan Website

Hasil yang telah didapatkan pada perancangan desain untuk detail dan tampilan
pada webiste Lembur Studio yang didukung oleh teknologi React.js dan Node.js,
berdasarkan program yang telah dibuat pada perancangan front-end menggunakan
perangkat lunak Visual Studio Code sebagai Integrated Development Enviroment
(IDE) dapat dilihat pada Gambar 5.1.

Gambar 5.1 Tampilan Halaman Utama pada Website Lembur Studio.

Pada Gambar 5.1 menampilkan hasil berupa halaman utama pada website
Lembur Studio. Pada halaman ini terdapat beberapa fiture yang menjelaskan
mengenai informasi tentang perushaan tersebut sehingga pengguna dapat lebih
mudah memperoleh informasi dan juga mempermudah pengguna dalam
menggunakan website tersebut. Pada tampilan ini juga terdapat bottom menu
Nanigator -Bar yang digunakan untuk mempermudah pengguna memcari menu
yang diinginkan dengan
 32

mengklik menu yang di inginkan. Pada navigator-bar ini terdapat beberapa menu
halaman yang terbagi menjadi tujuh bagian sebagai berikut.

1. Home

Pada halaman ini berisikan informasi singgkat mengenai perusahaan dan juga
salam pembuka untuk para mengguna webiste dan juga terdapat fiture Footer
pada bagian bawah website untuk sumber informasi terkait perusahaan dan juga
sosial media milik perusahaan. Lalu pada tampilan ini, pengguna dapat melihat
informasi singkat tentang pendiri dari Lembur Studio, berikut adalah tampilan
dari halaman home dan gambar sebagian program halaman home, dapat dilihat
pada Gambar 5.2 dan Gambar 5.3.

Gambar 5.2 Tampilan Halaman Home

Gambar 5.3 Program Halaman Home

 33

2. About

Pada halaman ini berisikan informasi terkait sejarah dari perusahaan, bergerak
dalam bidang saja pembuatan berbagai macam desain, infomasi tengtang skill
profesional yang dimiliki perusahaan, dan juga alat-alat yang digunakan oleh
perusahaan, berikut adalah gambar dan sebagian program tampilan dari halaman
About dapat dilihat pada Gambar 5.4 dan Gambar 5.5.

Gambar 5.4 Tampilan Halaman About

Gambar 5.5 Program untuk Halaman About

3. Project

Halaman ini berisikan informasi tentang projek yang sudah pernah

dijalankan oleh Lembur Studio, yang berbentuk kolom-kolom terpisah dan
didalam kolom-kolom projek tersebut terdapat link yang dapat di klik oleh
pengguna sehingga penguna dialihkan ke halaman projek terkait, berikut
 34

adalah tampilan dan sebgaian program untuk halaman Project dapat dilihat
pada Gambar 5.6 dan Gambar 5.7.

Gambar 5.6 Tampilan halaman Project

Gambar 5.7 Program halaman Project

4. Service

Pada halaman ini terdapat fiture bootton download secara otomatis untuk
mendownload file berbentuk PDF yang berikaan portfolio perusahaan,
projek projek yang sudah dikerjakan, dan juga berisi jasa apa saja yang
disedikan oleh pihak perusahaan , berikut adalah tampilan dan sebagian
program untuk halaman Service dapat dilihat pada Gambar 5.8 dan
Gambar 5.9.
 35

Gamabar 5.8 Tampilan Halaman Service

Gambar 5.9 Pogram Halaman Service

5. Contact Us

Halaman ini nantinya pengguna jika ingin menghubungi pihak studio akan
langsung dialihkan kehalaman WhatssApp dari Lembur Studio, untuk
program fiture ini menyatu di dalam file program Navbar.js , berikut
adalah tampilam dan program untuk halaman Contact Us dapat dilihat pada
Gambar 5.10 dan Gambar 5.11.
 36

Gambar 5.10 Tampilan Halaman Contact Us

Gambar 5.11 Program Halaman Contact Us

6. Lokasi

Pada fiture ini berbentuk icon lokasi yang digunakan untuk menunjukan
lokasi perusahaan, jika pengguna mengklik icon ini pengguna akan
dialihkan dari halaman website ke halaman lokasi googel maps yang sudah
dibuat agar otomatis langsung menuju titik lokasi perusahaan, sehingga
pengguna bisa mengetahui dimana letak studio berada, pada program
fiture ini juga menyatu di dalam file program Navigation Bar, berikut
adalah tampilan dan program untuk halaman Icon lokasi dapat dilihat
pada Gambar 5.12 dan Gambar 5.13.
 37

Gambar 5.12 Program Icon Lokasi

Gambar 5.13 Tampilan Halaman Lokasi Studio

7. Footer

Pada fiture ini merupakan fiture yang berada paling bawah pada website yang
akan selalu tampil pada setiap halaman website layaknya Navigation Bar,
bagian ini memberikan informasi perusahaan dengan menampilkan informasi
kontak perusahaan yang bisa di hubungi, alamat dari tempat lengkap
perusahaan terkait, dan juga ada beberapa icon dari sosial media dari
perushaaan, seperti, twitter, facebbok, tiktok, dan instagram, berikut adalah
gambar tampilan dan sebagian program dari fiture Footer dapat dilihat pada
Gambar 5.14 dan Gambar 5.15.
 38

Gambar 5.14 Tampilan Fiture Footer

Gambar 5.15 Program Fitur Footer

5.2 Pembahasan

Website merupakan halaman informasi yang disediakan melalui jalur internet

sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet,
website merupakan komponen atau kumpulan komponen yang terdiri dari teks,
gambar, suara, dan animasi sehingga menarik untuk dikunjungi (Ansori, 2016).

Dalam perancangan desain website kali ini menggunakan teknik pemprograman

Ajax (Asynchronus JavaScript and Xml), yaitu sebuah metode untuk merequest
data ke server tanpa me-refresh atau mereload pada halaman website,
digunakannya Ajax dalam pembuatan website kali ini dikarenakan Ajax dapat
mengurangi pemakaian bandwidth dan dapat meningkatkan kecepatan. Ajax juga
dapat meningkatan User Experience( UX) yang lebih baik, website yang
menggunakan Ajax akan terlihat lebih menarik dan lebih cepat tanpa harus
berganti halaman disaat melakukan sesuatu tindakan, dan juga Ajax dapat
mendukung proses asinkronus yaitu pengambilan informasi asinkronus dapat
dilakukan dengan memakai XMLHttpRequest. Hal ini diperlukan karena menjaga
performa load pada halaman website adalah hal yang penting untuk meningkatkan
kenyamanan pengguna (Wibowo, et al, 2014).
 39

Pada pemprograman rancangan desain website mengunakan teknik React Hooks

yang merupakan fungsi dari JavaScript yang dapat diimpor dari react untuk
menambahkan kemampuan khusus pada component yang akan dibuat. Teknik
Hooks ini memungkinkan developer React untuk mengakses state dan lifecycle
metode di dalam functional component, dan dengan menggunakan React Hooks
dapat memudahkan developer dalam penulisan kode program (Purwaningsih,
2013).

Website lembur studio juga sudah bersifat responsive, yaitu sebuah teknik atau
metode bagi web development untuk membuat suatu layout website yang dapat
menyesuaikan diri sesuai dengan ukuran layar pengguna, sehingga tampilan
website dapat ditampilkan menjadi dua tampilan yang berbeda

Dalam perancangan desain website kali ini, website lembur studio dapat diakses
dengan beberapa tahapan sebagai berikut.

1. Memasukan alamat domain website “localhost:3000” melalui web browser

yang tersedia pada perangkat pengguna. Dapat dilihat pada Gambar 5.16.

Gambar 5.16 Alamat Domain Website Lembur Studio

Pada Gambar 5.16 ini menggunakan web browser microsoft edge untuk
mengakses halaman website dari lembur studio, localhost merupakan
program pada komputer yang memiliki peran sebagai virtual server yang
hanya dapat diakses dengan jaringan lokal. Sehingga alamat website ini
belum bisa diakses secara online dikarenakan masih berbentuk localhost,
setelah repositories atau file kerja rancang bangun desain website ini di
upload menggunakan web hosting barulah website ini mendapatkan domain
atau alamat baru untuk website lembur studio, dan dapat diakses secara online
 40

dengan cara memasukan alamat website yang nantinya akan beralamatkan

pada https://www.Lembur Studio.com/ pada web browser pengguna.
2. Setelah memasukan alamat domain tersebut pengguna akan langsung
diarahkan kehalaman landing page atau halaman home pada website lembur
studi, dapat dilihat pada Gambar 5.17.

Gambar 5.17 Tampilan Halaman Home

Pada Gambar 5.17 halaman home ini dibuat sangat menarik dan sederhana
dikerenakan halaman ini sangat penting bagi pengguna, agar bisa menarik
perhatian, minat dan juga mudah untuk dipahami oleh masyarakat luas.
Perancangan pada menu halaman home ini terbagi menjadi dua file program
yang berbeda sebagai berikut.
a. File program Home,js file program ini berfungsi sebagai file program
utama untuk menu halaman home dan berisikan konten teks animasi
berjalan yang berada pada menu halaman home dibagian atas website,
sebagian program dapat dilihat pada Gambar 5.18.
 41

Gambar 5.18. File Program Home,js

b. File program Home2.js, pada file program ini berisikan konten
informasi singkat dari pendiri studio dan juga terdapat konten fitur
sosial media dari pihak studio, sebagian program dapat dilihat pada
Gambar 5.19.

Gambar 5.19 File Program Home2.js

3. Pengguna dapat melihat informasi tentang perusahan lebih banyak dengan
cara mengklik teks About yang terdapat pada menu navigator diatas website,
dapat dilihat pada Gambar 5.20.
 42

Gambar 5.20 Tampilan halaman About

Pada Gamabar 5.20 menu halaman About ini tersusun dari empat bagian file,
masing-masing file berisikan fiture-fiture yang terdapat pada halaman About
sebagai berikut.
a. File About.js yang berfungsi sebagai file utama untuk halaman About,
sebagian program About dapat dilihat pada Gambar 5.21.

Gambar 5.21 File Progam About.js

Pada Gambar 5.21 ini berfungsi sebgai file program utama untuk menu
halaman About, program ini berfungsi untuk menampilkan menu
halaman About pada website.
b. File AboutCartd.js yang berfungsi untuk menampilkan informasi terkait
lembur studio, sebagian program AboutCartd.js dapat dilihat pada
Gambar 5.22.
 43

Gambar 5.22 File Program AboutCard.js

Pada Gambar 5.22 ini dibuat untuk menampilan informasi teks terkait
studio yang terdapat pada menu halaman About.
c. File Techstack.js yang berfungsi untuk menampilkan skill yang
dimiliki oleh pidak studio, sebagian program Techstack.js dapat dilihat
pada Gambar 5.23.

Gambar 5.23 File Program Techstack.js

Pada Gambar 5.23 file program ini dibuat agar tampilan dari skillset
yang dimiliki oleh pihak studio dapat terlihat lebih sederhana dan
mudah untuk dipahami oleh pengguna dikarenakan hanya berbentuk
icon-icon yang mewakili dari masing-masing kemampuan.
d. File Toolstack.js yang berfungsi untuk menampikan perangkat lunak
yang di gunakan oleh pihak studio, sebagian program Toolstack.js
dapat dilihat pada Gambar 5.24
 44

.
Gambar 5.24 File Program Toolstack.js
Pada Gambar 5.24 ini dirancang agar tampilan dari tools atau
perangkat lunak yang digunakan oleh pihak studio dapat terlihat lebih
sederhana dan mudah untuk dipahami oleh pengguna dikarenakan
hanya berbentuk icon-icon yang mewakili dari masing-masing
perangkat lunak.
4. Pengguna juga dapat melihat informasi terkait projek-projek yang sudah
pernah dikerjakan oleh lembur studio dengan cara mengklik teks Project yang
terdapat pada menu navigator. Pada halaman ini ditunjukan pada Gambar
5.25.

Gambar 5.25 Tampilan Halaman Project

Pada Gambar 5.25 untuk membuat menu halaman Project ini terbagi
menjadi dua file program yang berbeda sebagai berikut.
a. File Project.js yang berfungsi sebagai file utama untuk halaman Project
pada website, sebagian program file Project.js ini dapat dilihat pada
Gambar 5.26.
 45

Gambar 5.26 File Program Project.js

Pada Gambar 5.26 berfungsi sebagai file program utama pada menu
halaman Project, program ini dirancang untuk menampilkan projek-
projek yang sudah pernah dikerjakan oleh pihak studio dalam bentuk
tabel terpisah dimasing-masing projek.
b. File ProjectCard.js ini dirancang untuk menampilkan link dari projek
terkait yang berada didalam tabel projek. Sebagian program dapat dilihat
pada Gambar 5.27.

Gambar 5.27 File Program Halaman ProjectCard.js

5. Pengguna dapak mengakses informasi terkait jasa-jasa yang disediakan oleh
pihak studio dengan cara mengklik teks Service yang terdapat pada menu
navigator. Pengguna akan langsung mendownload file berbentuk PDF secara
otomatis yang berisikan portfolio lembur studio, dapat dilihat pada Gambar
5.28.
 46

Gambar 5.28 Tampilan Halaman Service

Pada Gambar 5.28 ini dibuat agar para pengguna dapat meliat secara lebih
banyak informasi terkait produk jasa yang disediakan oleh pihak studio agar
bisa lebih memudahkan pengguna untuk memperoleh informasi dari studio,
sebagian program dari halaman ini dapat dilihat pada Gambar 5.29.

Gambar 5.29 File Program Service

6. Pengguna dapat menghubungin pihak studio dengan cara mengklik teks
Contact Us, pengguna juga bisa menghubungi pihak studio melalui email
yang terdapat pada footer dibagian bawah website, progam halaman ini cukup
sederhana, dikarenakan hanya membuat link untuk nomor whatssapp studio,
program ini berada pada file program Navbar.js, program dapat dilihat pada
Gambar 5.30.

Gambar 5.30 Program Contact Us

 47

7. Pengguna juga bisa mengakses lokasi dimana letak kantor dari lembur
studio berada dengan cara mengklik icon lokasi dari google maps, sama
seperti program Contact Us pada program untuk lokasi ini juga cukup
sederhana dan membutuhkan beberapa baris kode program untuk
menjalankan halaman lokasi ini dan program ini berada pada file program
Navbar.js, dapat di lihat pada Gambar 5.31.

Gambar 5.31 Progam Halaman Lokasi

Berdasarkan tahap pembuatan dan hasil perancangan desain Website Lembur

Studio menggunakan React.js dan Node.js dengan teknik pemprograman diatas,
website di anggap berhasil apabila menu halaman website dapat di tampilkan
dengan baik sesuai dengan yang diinginan dan tidak terjadi error, dan menurut
pendapat masyarakat sekitar di lingkungan terdekat tampilan website sudah cukup
baik, menarik dan mudah untuk di pahami.
48