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

DAFTAR IS

ii
 I
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 GAMBA

R
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
 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.

1
 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.

1
 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.

1
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.

1
 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).

1
 Pada C++ 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

1
meningkatkan fungsionalitas website hingga mengaktifkan permainan dan
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.

1
 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

1
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

Gambar 3.1 Tampilan setup wizard setelah instalasi selesai

1
 Gambar 3.2 Tampilan awal dari Visual Studio Code

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">

1
 <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">
<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>

1
3.3.3 Pembuatan source code CSS

Gambar 3.4 Proses pembuatan source code

3.3.4 Melakukan pengujian

Gambar 3.6 Pengujian

1
 BAB IV

IMPLEMENTASI DAN PENGUJIAN

4.1 Rangkaian

Gambar 4.1 Halaman awal dari web

1
Gambar 4.2 Bagian tampilan produk pada halaman depan

Gambar 4.3 Bagian Brand Pilihan pada halaman depan

1
 Gambar 4.4 Bagian Tentang Kami pada halaman depan

Gambar 4.5 Bagian Tentang Kami pada halaman depan

Gambar 4.6 Bagian akhir (footer) pada halaman depan

4.2 Pengujian
1. Halaman Depan

1
 Gambar 4.7 Bagian awal halaman depan

Gambar 4.8 Bagaian awal pada halaman depan

Gambar 4.9 Bagian produk pada halaman depan

1
Gambar 4.10 Bagian Brand Pilihan pada halaman depan

Gambar 4.11 Bagian Tentang Kami pada halaman depan

Gambar 4.12 Bagian akhir (footer) pada halaman depan

1
2. Halaman desripsi produk

Gambar 4.13 Deskripsi produk NAH Project

Gambar 4.14 Deskripsi produk Saint Barkley

1
 Gambar 4.15 Deskripsi produk Piero Knit Evo

3. Halaman Pembayaran

Gambar 4.16 Halaman pembayaran produk

1
Gambar 4.17 Halaman pembayaran produk

Gambar 4.18 Halaman pembayaran produk

1
 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

1
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.

1
 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

29