LAPORAN KERJA PROYEK

MEMBUAT DESAIN WEB TOKO SEPATU ONLINE DENGAN

VISUAL STUDIO CODE

Diajukan untuk memenuhi salah satu syarat mengikuti mata pelajaran kerja
proyek.

Disusun oleh:

Nama : Fathi Rahma Dio Putra

Kelas : 12 TKJ B
Jurusan : Teknik Komputer Jaringan

SMK TEKNOLOGI INDUSTRI PEMBANGUNAN CIMAHI

2019/2020
 LEMBAR PENGESAHAN

Membangun Desain Toko Sepatu Online Dengan Visual Studio Code

Cimahi, Desember 2020

Penulis

Laporan Tugas Akhir ini telah disetujui dan disahkan oleh :

Kepala. Prog. Keahlian Teknik Komputer Jaringan

Riky Oktaviana, S.ST.

Mengetahui,
Kepala SMK Teknologi Industri Pembangunan

Didit Ariadi, S.ST.,Gr.

i
 KATA PENGANTAR

Puji syukur senantiasa kita panjatkan kepada Allah SWT karena limpahan
rahmat, ridha, dan karunia-Nya laporan tugas kerja proyek “Membangun Desain
Web Toko Sepatu Online dengan Visual Studio Code” dapat diselesaikan tepat
waktu. Shalawat serta salam tak lupa saya haturkan kepada Nabi Muhammad SAW
yang selalu menjadi teladan bagi umatnya.

Laporan ini merupakan salah satu tugas yang termasuk dalam tugas kerja
proyek mata pelajaran Produk Kreatif dan Kewirausahaan, serta, laporan ini
merupakan bentuk pertanggung jawaban tertulis atas terlaksananya tugas kerja
proyek ini. Tugas kerja proyek ini meliputi kegiatan pengajuan judul, perancangan
dan pembuatan proyek, serta pembuatan laporan.

Laporan ini menjelaskan kegiatan pelaksanaan tugas kerja proyek ini.

Semoga laporan tugas ini dapat memberikan manfaat bagi pembaca. Saya
menyadari dalam proses penulisan laporan ini masihterdapat banyak kesalahan,
oleh karena itu, kritik dan saran yang konstruktif sangat saya harapkan dari
pembaca demi perbaikan laporan saya selanjutnya.

Cimahi, 24 Januari 2021

Penulis

ii
 DAFTAR ISI
DAFTAR ISI .......................................................................................................... iii
DAFTAR GAMBAR ............................................................................................. iv
DAFTAR TABEL ................................................................................................... v
BAB I PENDAHULUAN ...................................................................................... 2
1.1 Latar Belakang ................................................................................................ 2
1.2 Perumusan Masalah ........................................................................................ 3
1.3 Tujuan ............................................................................................................. 3
1.4 Batasan Masalah.............................................................................................. 3
1.5 Jadwal Pelaksanaan ......................................................................................... 3
1.6 Sistematika Penulisan...................................................................................... 3
BAB II LANDASAN TEORI ................................................................................. 4
2.1 Visual Code Studio .......................................................................................... 4
2.2 Browser ........................................................................................................... 5
2.3 Bahasa Pemrograman ....................................................................................... 5
2.3.1 Jenis – Jenis Bahasa Pemrograman ................................................................ 5
BAB III ANALASISIS DAN WAKTU PERANCANGAN .................................. 9
3.1 Waktu Pelaksanaan ......................................................................................... 9
3.2 Alat Dan Bahan ............................................................................................... 9
3.3 Langkah-langkah Pengerjaan .......................................................................... 9
3.3.1 Instalasi software Visual Studio Code ........................................................... 9
3.3.2 Melakukan pembuatan source code HTML di dalam Visual Studio Code .. 11
3.3.3 Pembuatan source code CSS ........................................................................ 12
3.3.4 Melakukan pengujian ................................................................................... 12
BAB IV IMPLEMENTASI DAN PENGUJIAN .................................................. 14
4.1 Rangkaian ...................................................................................................... 14
4.2 Pengujian ....................................................................................................... 16
BAB V PENUTUP ................................................................................................ 22
5.1 Kesimpulan ................................................................................................... 22
5.2 Saran .............................................................................................................. 22
DAFTAR PUSTAKA ........................................................................................... 23

iii
 DAFTAR GAMBAR
Gambar 2.1 Logo Software Visual Studio Code ............................................. 4
Gambar 3.1 Tampilan setup wizard setelah instalasi selesai ........................... 6
Gambar 3.2 Tampilan awal dari Visual Studio Code ...................................... 6
Gambar 3.3 Proses pembuatan source code..................................................... 7
Gambar 3.4 Proses pembuatan source code..................................................... 7
Gambar 3.5 Pembuatan script javascript ......................................................... 8
Gambar 3.6 Pengujian...................................................................................... 8
Gambar 4.1 Halaman awal dari web ................................................................ 9
Gambar 4.2 Bagian tampilan produk pada halaman depan ............................. 9
Gambar 4.3 Bagian Brand Pilihan pada halaman depan ............................... 10
Gambar 4.4 Bagian Tentang Kami pada halaman depan............................... 10
Gambar 4.5 Bagian Tentang Kami pada halaman depan............................... 10
Gambar 4.6 Bagian akhir (footer) pada halaman depan ................................ 11
Gambar 4.7 Bagian awal halaman depan....................................................... 11
Gambar 4.8 Bagaian awal pada halaman depan ............................................ 11
Gambar 4.9 Bagian produk pada halaman depan .......................................... 12
Gambar 4.10 Bagian Brand Pilihan pada halaman depan ............................. 12
Gambar 4.11 Bagian Tentang Kami pada halaman depan............................. 12
Gambar 4.12 Bagian akhir (footer) pada halaman depan .............................. 13
Gambar 4.13 Deskripsi produk NAH Project ................................................ 13
Gambar 4.14 Deskripsi produk Saint Barkley ............................................... 14
Gambar 4.15 Deskripsi produk Piero Knit Evo ............................................. 14
Gambar 4.16 Halaman pembayaran produk .................................................. 15
Gambar 4.17 Halaman pembayaran produk .................................................. 15
Gambar 4.18 Halaman pembayaran produk .................................................. 16
Gambar 4.19 Bagian formulir pembayaran pada halaman pembayaran ........ 16

iv
 DAFTAR TABEL

Tabel 1.1 Jadwal Pelaksanaan. ........................................................................ 3

Tabel 2.1 Waktu Pelaksanaan ......................................................................... 5

v
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Electronic commerce atau E-commerce adalah segala aktivitas jual beli yang
dilakukan melalui media elektronik. Meskipun sarananya meliputi televisi dan
telepon, kini e-commerce lebih sering terjadi melalui internet. Oleh pengertian itu,
sering terjadi kesalahpahaman tentang e-commerce dan marketplace. Istilah e-
commerce digunakan untuk mendeskripsikan semua transaksi yang memakai media
elektronik.

Marketplace sendiri adalah salah satu model e-commerce, di mana ia

berfungsi sebagai perantara antara penjual dan pembeli. Penjual yang berdagang di
marketplace hanya perlu meladeni pembelian. Semua aktivitas lain seperti
pengelolaan website sudah diurus oleh platform tersebut. Situs-situs seperti Shopee
dan Lazada adalah dua contoh marketplace.

Industri e-commerce berkembang sangat pesat di Indonesia belakangan ini.

Bahkan, negara Indonesia berada di puncak sepuluh negara dengan pertumbuhan e-
commerce tercepat di dunia. Pada tahun 2018 sendiri, e-commerce di Indonesia
memiliki pertumbuhan 78%. Dari angka pertumbuhan tersebut, 17,7% diantaranya
merupakan transaksi pembelian tiket pesawat dan pemesanan hotel. Selain itu,
pembelian pakaian dan alas kaki menyumbang 11,9%, sedangkan 10% berasal dari
kosmetik dan produk kesehatan.

Maka dari itu, saya membuat proyek “membangun desain web toko sepatu
online dengan visual studio code” ini. Denga tujuan untuk memberikan referensi
desain untuk para penjual untuk membuat toko online atau marketplace.

1
 2

1.2 Perumusan Masalah

Berikut adalah perumsuan masalah dari proyek ini:

 Dengan semakin banyaknya permintaan masyarakat mengenai style atau

model dari sepatu, perlukah membangun marketplace baru?
 Perlukah tansaksi penjualan dan pembelian sepatu untuk dilakukan secara
digital dengan cara terkomputerisasi?
 Apakah pembuatan desain toko sepatu online bisa dilakukan dengan
software Visual Studio Code dengan bahasa HTML dan CSS?

1.3 Tujuan
Adapun tujuan proyek yang kami buat yaitu sebagai berikut :

 Mempermudah penjual yang berbisnis online

 Mempermudah para pembeli agar tidak keluar rumah
 Memberikan referensi desain untuk toko sepatu online

1.4 Batasan Masalah

Untuk menghindari meluasnya masalah yang akan diteliti maka kami
membatasi atau memfokuskan masalah yang berkaitan dengan proyek kita, yaitu
sebagai berikut :

 Proyek ini hanya mengerjakan desain dari toko sepatu online

 Proyek ini tidak mencakup perancangan web menyeluruh, seperti database
dan hosting
 Proyek ini dikerjakan dengan menggunkan bahasa HTML dan CSS dengan
Software Visual Code Studio.
 3

1.5 Jadwal Pelaksanaan

Tabel 1.1.
Jadwal Pelaksanaan
Juli Agustus September Oktober November
NAMA KEGIATAN
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

Pelaksanaan survei

Pembuatan Proposal

Perancangan/Pembuatan
proyek

Bimbingan

1.6 Sistematika Penulisan

Pembahasan topik pandangan ,perencanaan, dan analisis aplikasi ini disusun
dalam sistematika penulisan sebagai berikut :

Bab I Pendahuluan, yaitu bagian yang meliputi latar belakang masalah,perumusan

masalah , tujuan penulisan, batasan masalah, jadwal pelaksanaan dan sistematika
penulisan
Bab II Landasan Teori, yaitu bagian yang membahas tentang “Membangun
Desain Web Toko Sepatu Online dengan Visual Studio Code ” serta teori-teori yang
menjadi landasan dalam penyusunan tugas akhir.
Bab III Analisis dan Waktu Perancangan, yaitu bagian yang berisi mengenai
analisis dan perancangan yang berkaitan dengan “Membangun Desain Web Toko
Sepatu Online dengan Visual Studio Code”.
Bab IV Implementasi dan pengujian, yaitu bagian yang berisi pengujian proyek
tersebut berdasarkan spesifikasi, proses, tahap, perancangan , dan pembuatan.
Bab V Penutup, yaitu bagian yang berisi kesimpulan dan saran dari penulis yang
berhubungan dalam pembuatan tugas akhir ini.
Daftar Pustaka.
 BAB II

LANDASAN TEORI

2.1 Visual Code Studio

Pada proyek ini saya melakukan pembuatan desain web menggunakan
software Visual Studio Code.

Gambar 2.1 Logo Software Visual Studio Code

Visual Studio Code adalah editor source code gratis yang dibuat oleh Microsoft
untuk Windows, Linux, dan MacOS. Aplikasi ini mendukung banyak fitur seperti
debugging, syntax highlighting, intellegent code complete, snippet, code
refactoring, dan embeddd Git.

Visual Studio Code ini dapay digunakan dalam berbagai bahasa

pemrograman termasuk Java, Javascript, Go, Node.js, HTML, CSS, dan C++.
Visual Studio Code menggunakan komponen editor yang sama (codename
“Monaco”) yang digunakan Azure DevOps.

4
 5

2.2 Browser
Browser adalah salah satu jenis perangkat lunak (software) yang umumnya
digunakan untuk membuka halaman website di internet. Browser disebut juga
dengan peramban web dan web browser. Secara fundamental browser mempunyai
kemampuan untuk menampilkan kode semantik (bahasa pemrograman) halaman
website seperti; HTML, CSS, Js, dan lainnya menjadi halaman yang dimengerti
oleh semua orang. Browser yang populer digunakan saat ini adalah Google Chrome
dan Mozilla Firefox.

2.3 Bahasa Pemrograman

Bahasa pemrograman, atau sering diistilahkan juga dengan bahasa
komputer atau bahasa pemrograman komputer, adalah instruksi standar untuk
memerintah komputer. Bahasa pemrograman ini merupakan suatu himpunan dari
aturan sintaks dan semantik yang dipakai untuk mendefinisikan program komputer.
Bahasa ini memungkinkan seorang programmer dapat menentukan secara persis
data mana yang akan diolah oleh komputer, bagaimana data ini akan
disimpan/diteruskan, dan jenis langkah apa yang akan diambil dalam berbagai
situasi secara persis.

2.3.1 Jenis – Jenis Bahasa Pemrograman

 HTML
HTML adalah singkatan dari Hypertext Markup Language. HTML
memungkinkan seorang user untuk membuat dan menyusun bagian
paragraf, heading, link atau tautan, dan blockquote untuk halaman web dan
aplikasi. HTML bukanlah bahasa pemrograman, dan itu berarti HTML tidak
punya kemampuan untuk membuat fungsionalitas yang dinamis. Sebagai
gantinya, HTML memungkinkan user untuk mengorganisir dan memformat
dokumen, sama seperti Microsoft Word.
 6

 CSS
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk
mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti
HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya
di situs. CSS dibuat dan dikembangkan oleh W3C (World Wide Web
Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML
tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman.
Anda hanya perlu menulis markup untuk situs.
 C
Bahasa pemrograman C merupakan salah satu bahasa pemrograman
komputer. Dibuat pada tahun 1972 oleh Dennis Ritchie untuk Sistem
Operasi Unix di Bell Telephone Laboratories. Meskipun C dibuat untuk
memprogram sistem dan jaringan komputer namun bahasa ini juga sering
digunakan dalam mengembangkan software aplikasi. C juga banyak dipakai
oleh berbagai jenis platform sistem operasi dan arsitektur komputer, bahkan
terdapat beberepa compiler yang sangat populer telah tersedia. C secara luar
biasa memengaruhi bahasa populer lainnya, terutama C++ yang merupakan
extensi dari C.
 C++
C++ adalah bahasa pemrograman komputer yang dibuat oleh Bjarne
Stroustrup, yang merupakan perkembangan dari bahasa C dikembangkan di
Bell Labs (Dennis Ritchie). Pada awal tahun 1970-an, bahasa itu merupakan
peningkatan dari bahasa sebelumnya, yaitu B. Pada awalnya, bahasa
tersebut dirancang sebagai bahasa pemrograman yang dijalankan pada
sistem Unix. Pada perkembangannya, versi ANSI (American National
Standards Institute) pada bahasa pemrograman C menjadi versi dominan,
meskipun versi tersebut sekarang jarang dipakai dalam pengembangan
sistem dan jaringan maupun untuk sistem embedded. Bjarne Stroustrup
pada Bell Labs pertama kali mengembangkan C++ pada awal 1980-an.
Untuk mendukung fitur-fitur pada C++, dibangun efisiensi dan sistem
support untuk pemrograman tingkat rendah (low level coding). Pada C++
 7

ditambahkan konsep-konsep baru seperti class dengan sifat-sifatnya seperti

inheritance dan overloading. Salah satu perbedaan yang paling mendasar
dengan bahasa C adalah dukungan terhadap konsep pemrograman
berorientasi objek (object-oriented programming).
 PHP
PHP (PHP: Hypertext Preprocessor) adalah sebuah bahasa pemrograman
server side scripting yang bersifat open source.Sebagai sebuah scripting
language, PHP menjalankan instruksi pemrograman saat proses runtime.
Hasil dari instruksi tentu akan berbeda tergantung data yang diproses.
 Java
Java dikenal memiliki moto “Write Once, Run Anywhere”. Hal ini
menunjukkan bahwa setiap kode program yang ditulis menggunakan Java
bisa langsung dijalankan pada platform berbeda-beda tanpa perlu menyusun
ulang. Mengapa bisa demikian? Penulisan kode program Java biasanya
disimpan dalam file berekstensi java. Dengan menggunakan javac compiler,
kamu bisa menyusun file berekstensi java menjadi file berekstensi class.
File berekstensi class inilah yang disebut sebagai bytecode dan bisa
dijalankan di seluruh Java Virtual Machine (JVM).Dilihat dari
penggunaannya, sebagai bahasa pemrograman umum kamu bisa
memanfaatkan Java untuk membuat berbagai bentuk aplikasi. Hal itu
berlaku mulai dari aplikasi berbasis desktop, website, mobile, hingga
aplikasi embedded device seperti perangkat pintar atau microprosesor.
Sementara dalam praktiknya, bahasa Java tidak mendukung pemrograman
prosedural melainkan menggunakan konsep pemrograman berbasis object.
 Javascript
JavaScript adalah salah satu bahasa pemrograman yang paling banyak
digunakan dalam kurun waktu dua puluh tahun ini. Bahkan, bahasa
pemrograman ini merupakan salah satu yang paling utama bagi web
developer. Anda bisa mempelajari bahasa pemrograman ini dengan cepat
dan mudah, serta menggunakannya untuk berbagai tujuan, mulai dari
meningkatkan fungsionalitas website hingga mengaktifkan permainan dan
 8

software berbasis web. Selain itu, terdapat ribuan template dan aplikasi
JavaScript yang bisa Anda gunakan secara gratis dan semuanya ini berkat
beberapa situs, seperti Github.
 BAB III

ANALASISIS DAN WAKTU PERANCANGAN

3.1 Waktu Pelaksanaan

Proyek ini dikerjakan selama empat Bulan mulai dari September
2020 sampai Desember 2020.

Tabel 3.1
Waktu Pelaksanaan
September Oktober November Desember Januari
NAMA KEGIATAN
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

Pelaksanaan survei

Pembuatan Proposal

Perancangan/Pembuatan
proyek

Bimbingan

3.2 Alat Dan Bahan

 1 unit komputer
 Software Visual Studio Code

3.3 Langkah-langkah Pengerjaan

3.3.1 Instalasi software Visual Studio Code

9
 10

Gambar 3.1 Tampilan setup wizard setelah instalasi selesai

Gambar 3.2 Tampilan awal dari Visual Studio Code

 11

3.3.2 Melakukan pembuatan source code HTML di dalam Visual Studio

Code

Gambar 3.3 Proses pembuatan source code

 Script untuk membuat tombol “Beli Sekarang” pada halaman

deskripsi produk

<a href="bayarstratos.html">BELI SEKARANG</a>

 Script untuk membuat form data pembeli pada halaman

pembayaran
<form class="contact_bg">
<div class="row">
<h3>Data Pembeli</h3>

<div class="col-xl-12 col-lg-12 col-md-12 col-sm-

12">
<input class="contactus" placeholder="Nama" ty
pe="text" name="Nama">
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<input class="contactus" placeholder="Nomor Te
lepon" type="text" name="Nomor Telepon">
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<input class="contactus" placeholder="Email" t
ype="text" name="Email">
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-
12">
 12

<textarea class="textarea" placeholder="Alamat

legkap" type="text" name="Alamat legkap"></textarea>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<input class="contactus" placeholder="Pengirim
an ex. JNE" type="text" name="Pengiriman ex. JNE">
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<input class="contactus" placeholder="Pembayar
an ex. Alfamart" type="text" name="Pembayaran ex. Alfamart">
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-
12">
<button class="send">Buat Pesanan</button>
</div>
</div>
</form>

3.3.3 Pembuatan source code CSS

Gambar 3.4 Proses pembuatan source code

3.3.4 Melakukan pengujian

 13

Gambar 3.6 Pengujian

 BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Rangkaian

Gambar 4.1 Halaman awal dari web

Gambar 4.2 Bagian tampilan produk pada halaman depan

14
 15

Gambar 4.3 Bagian Brand Pilihan pada halaman depan

Gambar 4.4 Bagian Tentang Kami pada halaman depan

Gambar 4.5 Bagian Tentang Kami pada halaman depan

 16

Gambar 4.6 Bagian akhir (footer) pada halaman depan

4.2 Pengujian
1. Halaman Depan

Gambar 4.7 Bagian awal halaman depan

 17

Gambar 4.8 Bagaian awal pada halaman depan

Gambar 4.9 Bagian produk pada halaman depan

Gambar 4.10 Bagian Brand Pilihan pada halaman depan

 18

Gambar 4.11 Bagian Tentang Kami pada halaman depan

Gambar 4.12 Bagian akhir (footer) pada halaman depan

2. Halaman desripsi produk

Gambar 4.13 Deskripsi produk NAH Project

 19

Gambar 4.14 Deskripsi produk Saint Barkley

Gambar 4.15 Deskripsi produk Piero Knit Evo

3. Halaman Pembayaran
 20

Gambar 4.16 Halaman pembayaran produk

Gambar 4.17 Halaman pembayaran produk

 21

Gambar 4.18 Halaman pembayaran produk

Gambar 4.19 Bagian formulir pembayaran pada halaman pembayaran

 BAB V

PENUTUP

5.1 Kesimpulan
Dengan maraknya kegiatan e-commerce atau kegiatan jual beli di internet,
maka muncul banyak marketplace yang menyediakan berbagai produk-produk
kebutuhan masyarakat. Tetapi kebanyakan marketplace biasa menyedikan
kebutuhan secara menyeluruh. Oleh karena itu banyak perusahaan yang membuka
website mereka sendiri yang menjual hanya satu tipe atau hanya merk mereka saja.

Oleh karena itu saya membuat proyek ini, agar menjadi referensi desain web
bagi banyak orang jika ingin membuat web untuk penjualan mereka. Proyek ini
menampilkan contoh desain dari sebuah toko sepatu online. Desain web ini dibuat
dengan software Visual Studio Code, dengan banyaknya fitur seperti intellegent
code complete yang bisa meminimalisir kesalahan penulisn pada code atau syntax
yang dibuat.

5.2 Saran
Saran bagi penulis adalah, mungkin dengan banyaknya fitur yang ada pada
software yang digunakan, penulis bisa menggunakan lebih banyak fitur yang ada
agar desain terlihat lebih baik lagi, dan pengerjaan mungkin akan menjadi lebih
cepat. Kemudian desain web bisa dibuat lebih baik lagi dengan perbaikan tampilan,
fitur, dan memperkaya bagian-bagian interaktif dengan pengguna, agar terlihat
lebih menarik.

22
 DAFTAR PUSTAKA

Naoyan, Aldwin “Apa itu Ecommerce? Kenali Semua Jenis dan Manfaatnya”,
https://www.niagahoster.co.id/blog/apa-itu-ecommerce/?amp , diakses pada 26
Januari 2021, pada pukul 12.15.
Wikipedia, “Perdagangan Elektronik” ,
https://id.wikipedia.org/wiki/Perdagangan_elektronik , diakses pada 26 Januari
2021, pada pukul 12.20.
Wikipedia, “Visual Studio Code”,
https://en.wikipedia.org/wiki/Visual_Studio_Code , diakses pada 26 Januari 12.25

23