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 dengan cara
 40

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