IV.

METODE PRAKTIK KERJA LAPANGAN

4.1 Waktu dan Tempat Praktik Kerja Lapangan

Praktik Kerja Lapangan ini dilaksanakan pada tanggal 9 Januari 2023 sampai 9
Febuari 2023 yang bertempat di Kartor Lembur Studio beralamat di Perumahan
Bogor Alam Asri, Jl. Bojong Sari Blok C-25 Rt.3/4, Desa Ciapus, Kecamatan
Ciomas, Kabupaten Bogor.

4.2 Kegiatan Praktik Kerja Lapangan

Kegiatan praktik kerja lapangan di Lembur Studio ditunjukkan pada Tabel 4.1.

Tabel 4.1 Kegiatan Praktik Kerja Lapangan

Minggu Minggu Minggu Minggu

Kegiatan
Ke-1 Ke-2 Ke-3 Ke-4

Perkenalan X

Penginstallan dan
X X X
Perancangan Desain Website
Proses Integrasi Program
X X
dan Percobaan Website

Pengerjaan Laporan X

4.3 Alat dan Bahan

Alat dan bahan yang digunakan pada praktik kerja lapangan ini dalam proses
pengoperasian dan pengambilan data analisis proksimat adalah sebagai berikut.
 15

1. Laptop

Laptop atau komputer jinjing berfungsi sebagai media untuk menjalankan Software
yang akan digunakan dalam merancang perpustakaan online. Dan sebagai alat
komunikasi jarak jauh dengan pembimbing praktik kerja lapangan ketika hendak
melakukan daily standup atau evaluasi setiap hari yang dilakukan dari dalam
jaringan (daring).

Gambar 4.1 Laptop yang digunakan untuk menjalankan software (Sumber :

https://dlcdnwebimgs.asus.com/ )

2. Visual Studio Code

Visual Studio Code berfungsi untuk membuat dan mengedit source code
berbagai bahasa pemograman. Misalnya, seperti JavaScript, TypeScript, dan
Node.js. Dengan kelebihan Visual Code Studio yaitu; Tersedia di banyak platform
yang dapat diinstall di platform Linux, MacOS, dan Windows. Fitur yang lengkap
karena adanya Extension Marketplace, sehingga dapat menambah fitur-fiturnya
dengan bebas. Performa secepat kilat, sebab, Extension yang tersedia telah
dioptimasi sedemikian rupa, sehingga tidak mempengaruhi kinerja code editor.
Dukungan arsitektur terbaik dengan menggunakan berbagai teknologi terbaik di
dalamnya. Seperti Electron untuk pengembangan JavaScript dan Node.js, Monaco
Cloud Editor untuk HTML, Roslyn untuk NET, dan sebagainya.
 16

Gambar 4.2 Visual Studio Code untuk membuat dan mengedit source code
(Sumber: https://code.visualstudio.com/download)

3. JavaScript

JavaScript digunakan untuk membuat fitur yang semuanya dapat bermanfaat untuk
meningkatkan tampilan antarmuka dalam menggunakan web. Selain itu juga bisa
memperluas fungsi halaman web. Javascript juga berfungsi untuk pengembangan
Back-End atau disebut juga dengan behind the scene dari sebuah website. Di sinilah
kode-kode dituliskan agar sebuah website bisa berjalan dengan baik.
Pengembangan back-end web dengan JavaScript biasanya dibantu oleh sebuah
platform bernama Node.js. Platform ini berguna untuk server-side programming.

Gambar 4.3 JavaScript untuk pengembangan website (Sumber :

https://www.javascript.com/)

4. Node.js

Node.js berfungsi sebagai runtime environment untuk JavaScript yang bersifat

open-source dan cross-platform. Dengan Node.js kita dapat menjalankan kode
JavaScript di mana pun, tidak hanya terbatas pada lingkungan browser. Node.js
menjalankan V8 JavaScript engine (yang juga merupakan inti dari Google Chrome)
di luar browser. Ini memungkinkan Node.js memiliki performa yang tinggi karena
 17

menyediakan banyak library/module JavaScript yang membantu menyederhanakan

pengembangan aplikasi web.

Gambar 4.4 Node.Js sebagai pengembang aplikasi web (Sumber :

https://nodejs.org/)

5. React.Js

React JS merupakan library JavaScript yang digunakan untuk membuat user

interface (UI) website. React JS berisi library kode-kode JavaScript yang juga
berfungsi untuk mempermudah dan mempercepat web development. React JS
dikembangkan oleh Meta atau pada awal pengembangannya bernama Facebook.

Gambar 4.5 React.js sebagai liblary kode JavaScript

(Sumber : https://react.dev/)
6. Notion

Notion berfungsi sebagai manajemen proyek dan platform perangkat lunak pencatat
yang dirancang untuk membantu anggota perusahaan atau organisasi
mengoordinasikan tenggat waktu, tujuan, dan penugasan untuk efisiensi dan
produktivitas yang lebih besar, contohnya dapat memasukkan seluruh link halaman
kebutuhan produk di dalam satu catatan.
 18

Gambar 4.6 Notion sebagai pengatur manajemen proyek (Sumber :

https://www.notion.so/)

7. Boostrap

Boostrap adalah framework HTML, CSS, dan JavaScript yang berfungsi untuk
mendesain website responsive dengan cepat dan mudah, contohnya Menambahkan
elemen website dengan mudah karena Bootstrap menyediakan berbagai elemen
yang bisa langsung dapat digunakan pada website. Misalnya, navigasi, menu
dropdown, thumbnail, dan sebagainya.

Gambar 4.7 Bootstrap digunakan untuk membuat desain website (Sumber :

https://www.niagahoster.co.id/blog/bootstrap-adalah/)

8. Git Hub

Git hub berfungsi untuk menyimpan source code pada suatu proyek dan melacak
riwayat lengkap semua perubahan kode itu. Ini dapat mempermudah pengguna
untuk berkolaborasi dalam proyek secara lebih efektif dengan menyediakan alat
untuk mengelola perubahan yang mungkin bertentangan dari beberapa
pengembang, dan berinovasi solusi untuk masalah yang muncul selama proses
pengembangan dalam situs yang bersamaan.
 19

Gambar 4.8 GitHub digunakan untuk menyimpan source code proyek

(Sumber : https://github.com/)

4.4 Prosedur Praktik Kerja Lapangan

Prosedur dalam praktik kerja lapangan di Lembur Studio ini dilakukan dalam lima
tahap, yaitu tahap pertama studi literatur mengenai software yang akan digunakan.
Tahap kedua adalah melakukan installasi perangkat lunak yang akan digunakan
pada komputer. Tahap ketiga membuat rancangan desain untuk penampilan
website. Lalu tahap keempat adalah Integrasi semua program halaman yang sudah
di buat ke file utama website. Kemudian yang kelima adalah membuatan laporan
akhir. Adapun diagram alir pada penelitian ini ditunjukkan pada Gambar 4.9
 20

Mulai

Studi Literatur

Proses Installasi

Pembuatan file Penginstallan Penginstallan bahasa

React.Js Node.Js pemprograman JavaScript

Hasil installasi tidak

terjadi Error

Ya

Memprogram rancangan tampilan

Website

Perancangan Perancangan Perancangan Perancangan halaman

halaman Home dan halaman About halaman Project Service
Navigator Bar

Hasil perancangan Perancangan

tidak terjadi Error halaman Contact Us

Ya
Integrasi semua progam halaman
ke file utama Website

Hasil integrasi tidak

terjadi Error

Ya

Laporan Akhir

Selesai

Gambar 4.9 Diagram Alir Pembuatan Website

 21

1. Studi Literatur

Studi literatur merupakan proses pengumpulan data dari berbagai sumber seperti
materi yang diberikan oleh pembimbing praktik kerja lapangan, serta melakukan
penelusuran website, youtube, forum diskusi online dan lain-lain untuk mengetahui
infomasi terkait rancangan tersebut. Pada studi literatur ini mencari data dan
informasi mengenai aplikasi software yang akan digunakan dalam merancang
perpustakaan online.

2. Proses Installasi

Pada proses ini melakuan installasi perangkat lunak modul paket source kode
javascript dan bahan yang diperlukan untuk membuat website, proses ini
dimaksudkan untuk mempermudah pada saat memulai perancangan website. Ada
beberepa perangkat luka yang perlu dipasangkan pada laptop, sebagai berikut.
2.1 Installasi Node.Js
Installasi ini bertujuan untuk dapat menangani ribuan koneksi secara bersamaan
dengan server tunggal. Dengan adanya Node.js ini, kita dapat menggunakan satu
bahasa saja yaitu Javascript untuk membuat program, baik dari sisi client
maupun server. Dalam installasi Node.Js ini terdapat beberapa modul paket
source kode diantaranya adalah NPM. NPM (Node Package Manager) ini
berfungsi untuk mengelola package yang memungkinkan developer JavaScript
menemukan dan menginstal package kode ke aplikasi jaringan atau server-side.
2.2 Installasi Pemprograman JavaScript
JavaScript adalah sebuah bahasa pemrogaman tingkat tinggi yang bersifat
dinamis. Dinamis disini maksudnya, ketika mengakses konten suatu web,
tampilan di depan dapat berubah tanpa harus mereload halaman tersebut secara
manual. Contohnya saja, fitur kolom komentar, pengisian poling, gambar
animasi, dan lainya. Salah satu bagian dari World Wibe Web atau WWW. Di
dalam WWW, Anda akan menjumpai 3 bahasa pemrograman, yakni HTML, CSS,
dan JavaScript. JavaScript memiliki beberapa keunggulan, di antaranya: Mudah
dipelajari dan diimplementasikan pada elemen atau event halaman web. Punya
komunitas developer yang luas dan mengurangi request ke server.
 22

2.3 Pembuatan File Reacj.Js

ReactJS atau React adalah library JavaScript yang digunakan dalam proses
pengembangan aplikasi web dinamis. Beberapa kelebihan library ini yaitu bisa
mempermudah penulisan kode JavaScript, serta meningkatkan performa dan
memaksimalkan SEO aplikasi Anda. Tujuan dari penggunaan React.js agar bisa
lebih cepat, sederhana, dan tentunya terukur. Fungsi React terlihat pada UI
pengguna aplikasi. Kerangka Javascript lain, seperti Angular JS dan MVC.
React JS jauh lebih cepat dan memori lebih efisien dari pada AngularJS. Alasan
kedua lebih ekspansif dan membawa React ke stratosfer. Pada dasarnya,
konsepsi React lebih sejalan dengan kemana web modern akan berjalan.

3. Perancangan Tampilan Website

Pada tahap ini dilakukan proses perancangan website yang akan digunakan dalam
proses ini adalah React.js dan Node.js, Bootstrap, Npm dan menggukan bahasa
pengprograman JavaScript. Agar tampilan lebih menarik dan juga memudahkan
user pengguna. Perancangan ini terdiri dari dua tahapan, tahapan pertama yaitu
membuat tampilan halaman Utama / Landing Page untuk tampilan awal user
membuka website menggunakan aplikasi software Visual Studio Code dengan
menggunakan bahasa pemrograman JavaScript dan Bootstrap. Dan pada tahapan
kedua yaitu, membuat navigasi pada tampilan utama untuk mempermuadah
pengguna website dalam mengakses informasi dengan menggunakan aplikasi
software Visual Studio Code dengan menggunakan bahasa pemrograman
JavaScript dan Bootstrap.

Pada Gambar 4.9 ditampilkan diagram alir untuk pembuatan website.

Dari gambar tersebut dapat di jelaskan sebagi berikut :

1. Proses Installasi
2. Melakukan proses installasi semua perangkat lunak yang di perlukan pada
kompomputer agar dapat mempermudah pada saat pembuatan website.
3. Perancangan Tampilan Website
Pada proses ini dilakukan dalam beberapa tahapan, yaitu:
a. Navigation / Landing Page
 23

Halaman yang ditampilkan saat website pertama kali dibuka.

b. Home
Tampilan awal saat user membuka website. Merupakan halaman yang berisi
menu menu sebagai berikut :
Membuat tampilan halaman landing page (Home) menggunakan aplikasi
software Visual Studio Code dengan menggunakan bahasa pemrograman
JavaScript, React.js, Node.js dan Bootstrap. Dalam membuat tampilan
home ini terdapat beberpa komponen yaitu pada navigation bar, footter, dan
beberapa kolom informasi. Tiga komponen ini digunakan untuk membuat
kerangka awal pada Website Lembur Studio. Berikut adalah program Frontend
pada Home yaitu pada aplikasi Visual Studio Code. Program Home.js,
ditunjukkan pada Gambar 4.10.

Gambar 4.10 Program Home.js

Pada Gambar 4.10 Program rancngan Home.js juga terdapat bagian navbar yang
berada pada bagian atas website yang berikan logo perusahaan, button menu yang
terdiri dari “Home”, “About”, “Project”, ”Sercive”, “Contact Us”, dan , “Lokasi”,
Pada tampilan ini terdapat tampilan beberapa kolom informasi singkat mengenai
perusahaan pada saat website pertama kali di akses oleh pengguna. Berikut adalah
tampilan dari halaman utama Website Lembur Studio ditunjukan pada Gambar
4.11.
 24

Gambar 4.11 Tampilan Halaman Utama Website

Gambar 4.11 merupakan tampilan Home atau halaman utama website yang
dihasilkan dari pemrograman pada Home.js yang dapat terlihat tampilan yang dapat
mempermudah pengguna untuk mengakases infomasi yang tersedia, dan juga pada
file program Home.js juga kita mengatur desain desain website seperti warna pada
background, warna pada tulisan, jenis huruf dan ukurannya, dan juga responsif
tampilan pada website ketika di buka pada handphone ataupun pada komputer
sehingga dapat menarik perhatian pengguna.

c. About
Jika menu “About” dipilih maka akan ditampilkan sebuah tulisan tentang
perusahaan Lembur Studio. Membuat Halaman About tampilan digunakan untuk
tempat informasi penting tentang perusahaan dan memperkenalkan perusahaan
kepada pengguna, programnya sendiri dibuat pada aplikasi software Visual Studio
Code dengan menggunakan bahasa pemrograman JavaScript, React.js, dan
Bootstrap.

Pada tahap ini ada beberapa komponen yang ditampilkan seperti informasi
perusahaan, profesional skill set yang di miliki oleh perusahaan, tools yang di
gunakan, dan valeu dari perusahaan terkait, berikut adalah hasil tampilan dari
program halaman About pada Gambar 4.12.
 25

Gambar 4.12 Halaman About

Pada Gambar 4.12 Merupakan program untuk halaman About. Pada halaman ini
menggukan Bootstrap dan bahasa pemprograman JavaScript, berikut ini adalah
pemrogramannya pada Gambar 4.13.

Gambar 4.13 Program halaman About.js

d. Project

Jika menu “Project” dipilih maka akan ditampilkan form- form untuk di
menampilkan beberapa project yang sudah pernah di kerjakaan oleh tim dari pihak
studio.
Pada Gambar 4.14 adalah program yang dibuat untuk menampilakan halaman
Project yang digunakan sebagai halaman informasi project apa saja yang sudah
pernah perusahaan kami buat dalam bentuk kolom-kolom terpisah, dapat dilihat
pada Gambar 4.14.
 26

Gambar 4.14 Tampilan untuk halaman Project

Pada Gambar 4.15 ini menampilkan program untuk menampilkan halaman
Project. Halaman project ini menggukan Bootstrap dan bahasa pemprograman
JavaScript, berikut ini adalah pemrogramannya dapat dilihat pada Gambar 4.15.

Gambar 4.15 Program Project.js

e. Service

Jika menu “Service” dipilih maka akan langsung mendonwload file PDF yang
berisikan jasa apa saja yang studio kami sediakan, seperti:
- Web Desain
- Logo Desain
- Program Aplikasi

Pada Gambar 4.16 adalah program yang dibuat untuk halaman Service yang
digunakan untuk akses informasi portfolio perusahaan dengan cara mendownload
 27

otomatis file berbentuk Pdf yang berisi portfolio perusahaan, dapat dilihat pada
Gambar 4.16.

Gambar 4.16 Tampilan untuk halaman Sevice.

Pada Gambar 4.17 ini menampilkan sebagian program untuk halaman Service.
Pada halaman ini menggukan Bootstrap dan bahasa pemprograman JavaScript,
berikut ini adalah pemrogramannya pada Gambar 4.17.

Gambar 4.17 Program Serive.js

f. Contact Us

Jika menu “Contact” dipilih maka akan diarahkan ke halaman WhatsApp studio.
Gambar 4.18 adalah gambar tampilan dari hasil program untuk menampilkan
halaman Contact US yang dibuat untuk mempermudah pengguna menghubungi
pihak dari perusahaan terkait, nantinya jika pengguna menggunakan booton menu
ini, pengguna akan dialihkan dari halamaan website ke halamaan nomor WhatssApp
 28

dari perusahaan, sehingga dapat mempermudah komunikasi dua arah antara

pengguna dengan pihak perushaaan dapat dilihat pada Gambar 4.18.

Gambar 4.18 Tampilan Halaman Contact Us

Pada Gambar 4.19 ini menampilkan sebagian program untuk halaman Contact Us.
Pada Fiture ini menggukan Bootstrap dan bahasa pemprograman JavaScript,
berikut ini adalah pemrogramannya dapat di lihat pada Gambar 4.19.

Gambar 4.19 Program Halaman Contact US

g. Lokasi

Pada Gambar 4.20 Ini adalah program yang dibuat untuk menapilkan tempat lokasi
dari perusahaan yang nantinya jika pengguna menggunakan booton menu ini,
pengguna akan dialihkan ke halaman lokasi google maps yang sudah langsung
berada pada titik kantor perusahaan berada, jadi pengguna bisa mengetahui
informasi loksai dari perusahaan dan dapat datang langgung untuk mengunjugi
perushaan terkait dapat di lihat pada Gambar 4.20.
 29

Gambar 4.20 Program untuk Fiture Lokasi

Selanjutnya pada Gambar 4.21 ini menampilkan hasil dari program pada Gambar
4.20, pengguna dialihkan dari halaman website ke halaman google maps yang
diatur secara otomasis langsung berada pada titik dimana lokasi perusahaan berada,
berikut adalah hasil dari programnya dapat dilihat pada Gambar 4.20.

Gambar 4.21 Halaman Lokasi Perusahaan

4. Integrasi semua program halaman

Jika semua program telah selesai dirancang dan tidak terjadi error, maka semuanya
di hubungan kepada file atau halaman utama agar semua bisa terhubung dengan
baik dan tidak terjadi kesalahan dalam perancangan website kali ini. Lalu tahap
selanjutnya yaitu menghubungkan antara semua komponen dengan cara
menggabungkan program antar halaman ke file data utama yaitu App.js secara
bersamaan agar bisa terhubung dengan tampilan dapat terlihat pada website
 30

halaman utama. Berikut adalah sebagian program dari penggabungan antar

program halaman dapat dilihat pada Gambar 4.22

Gambar 4.22 Program Integrasi Halaman

Pada tahapan ini merupakan tahap akhir untuk penggabungan program yang
terdapat pada setiap program halaman dan hasilnya kan terlihat pada halaman
website Lembur Studio.

5. Laporan Akhir

Setelah menghubungkan semua Program Halaman selesai dan tidak terjadi error
pada program, maka dapat dibuat analisa dan kesimpulan penelitian dalam laporan
akhir.