LAPORAN PROYEK

PEMBUATAN LANDING PAGE PROMOSI DAN PENJUALAN PADA

USAHA DAGANG (UD) BOROBUDUR PASSI BARAT BOLAANG
MONGONDOW

FAHMI ADITYA KOLOPITA

1315208

PROGRAM STUDI S1 TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
(STMIK) MULTICOM BOLAANG MONGONDOW
2023
 KATA PENGANTAR

Puji dan syukur kehadirat Allah SWT, atas rahmat serta inayah-Nya, saya dapat
menyelesaikan laporan proyel yang berjudul “Pembuatan Landing Page Promosi dan Penjualan
Pada Usaha Dagang (UD) Borobudur Passi Barat Bolaang Mongondow” dengan baik dan tepat
waktu. Saya sangat berterima kasih atas bantuan dari ... sebagai dosen pembimbing saya yang
selalu memberikan banyak arahan dan masukan yang sangat berguna kepada saya sehingga saya
bisa dengan mudah menyelesaikan laporan proyek ini.
Saya juga sangat berterimakasih kepada kedua orang tua yang selalu dan tanpa henti
memberi dukungan baik moril dan materil. Saya juga tidak lupa untuk berterimakasih kepada
semua teman yang tiada hentinya memberikan saya semangat dan dukungan agar saya bisa
menyelesaikan laporan proyek ini tepat waktu.
Saya menyadari bahwa laporan proyek ini masih jauh dari kata sempurna, oleh karena itu
saya sangat mengharapkan saran dan kritik dari pembaca agar saya bisa lebih baik lagi dalam
membuat laporan proyek di masa mendatang.
Saya sangat berharap, lewat laporan proyek ini para pembaca bisa mendapatkan manfaat
seperti wawasan dan pengetahuan yang bertambah.

Kotamobagu, 2022
Penulis

Fahmi Aditya Kolopita

i
 DAFTAR ISI

KATA PENGANTAR ..................................................................................................................... i

DAFTAR ISI................................................................................................................................... ii
DAFTAR GAMBAR ..................................................................................................................... iii
BAB I .............................................................................................................................................. 1
PENDAHULUAN .......................................................................................................................... 1
1.1 Latar Belakang ...................................................................................................................... 1
1.2 Tujuan.................................................................................................................................... 1
1.3 Manfaat.................................................................................................................................. 1
1.4 Waktu dan Tempat Pelaksanaan ........................................................................................... 2
BAB II............................................................................................................................................. 3
GAMBARAN UMUM ................................................................................................................... 3
2.1 Sejarah UD. Borobudur ......................................................................................................... 3
2.2 Visi dan Misi Adiva UD. Borobudur .................................................................................... 3
2.3 Struktur Organisasi ................................................................................................................ 3
2.4 Landing Page ........................................................................................................................ 4
2.5 Toko ...................................................................................................................................... 4
2.6 Toko Bangunan ..................................................................................................................... 4
2.7 Promosi.................................................................................................................................. 5
2.8 Promosi Penjualan ................................................................................................................. 5
BAB III ........................................................................................................................................... 6
PELAKSANAAN PROYEK .......................................................................................................... 6
3.1 Program Landing Page UD. Borobudur ............................................................................... 6
3.2 Cara Pemesanan Pada Landing Page UD Borobudur ......................................................... 12
BAB IV ......................................................................................................................................... 15
KESIMPULAN DAN SARAN..................................................................................................... 15
4.1 Kesimpulan.......................................................................................................................... 15
4.2 Saran .................................................................................................................................... 15
DAFTAR PUSTAKA ................................................................................................................... 16

ii
 DAFTAR GAMBAR

Gambar 2.1 Struktur Organisasi ..................................................................................................... 4

Gambar 3.1 Tampilan Navigasi Bar ............................................................................................... 6
Gambar 3.2 Source Code HTML Navigasi Bar .............................................................................. 6
Gambar 3.3 Tampilan Banner Landing Page ................................................................................. 7
Gambar 3.4 Tampilan About Landing Page ................................................................................... 7
Gambar 3.5 Source Code HTML About .......................................................................................... 8
Gambar 3.6 Tampilan Produk Landing Page ................................................................................. 8
Gambar 3.7 Source Code HTML Produk ........................................................................................ 9
Gambar 3.8 Tampilan Form Pemesanan ...................................................................................... 10
Gambar 3.9 Source Code HTML From Pemesanan 1................................................................... 10
Gambar 3.10 Source Code HTML Form Pemesanan 2................................................................. 11
Gambar 3.11 Tampilan Footer Landing Page .............................................................................. 11
Gambar 3.12 Source Code HTML footer ...................................................................................... 12
Gambar 3.13 Langkah Pemesanan 1 ............................................................................................. 12
Gambar 3.14 Langkah Pemesanan 2 ............................................................................................. 13
Gambar 3.15 Hasil Checkout ........................................................................................................ 14

iii
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Teknologi saat ini berkembang sangat pesat terutama bidang informasi. Hal ini
disebabkan oleh meningkatnya kebutuhan manusia akan informasi yang cepat dan akurat. Media
promosi dan penjualan juga dituntut untuk bisa mengikuti perkembangan teknologi agar bisa
menyajikan promosi penjualan dengan tampilan yang menarik, bisa diakses dengan cepat, dan
akurat.
Usaha Dagang (UD) Borobudur merupakan toko bangunan yang terletak di Passi Barat,
Kabupaten Bolaang Mongondow, yang menyediakan bahan-bahan bangunan seperti semen, dan
alat-alat bangunan lainnya. Toko yang sudah berdiri selama 7 tahun ini masih menggunakan
transaksi penjualan dan pembelian secara manual. Promosi yang dilakukan untuk menambah
pelanggan masih menggunakan brosur, koran dan spanduk yang mengakibatkan minimnya
peningkatan konsumen dalam membeli dan kurang efisien terhadap tenaga dan waktu saat
melakukan promosi penjualan.
Berdasarkan latar belakang yang telah diuraikan diatas, maka saya ingin mengusulkan
untuk membangun sebuah proyek akhir yang menggunakan teknologi informasi yang diakses
lewat interntet sehingga dapat membantu UD. Borobudur lebih dikenal oleh pelanggan dan bisa
menarik lebih banyak pelangga juga meningkatkan penjulan produk. Proyek yang berjudul
pembuatan landing page promosi dan penjualan pada Usaha Dagang (UD) Borobudur Passi
Barat Bolaang Mongondow ini berisi informasi tentang UD. Borobudur, informasi stock barang
dan harga barang, juga foto-foto dari barang yang dijual.

1.2 Tujuan
Tujuan dari pembuatan proyek akhir ini yaitu membuat sebuah landing page promosi dan
penjualan pada Usaha Dagang (UD) Borobudur yang nantinya dapat diakses secara online
menggunakan internet.

1.3 Manfaat
Manfaat dari pembuatan proyek akhir ini adalah tersedianya sebuah landing page untuk
UD. Borobudur yang bisa memberikan informasi tentang UD. Borobudur kepada masyarakat
Bolaang Mongondow dan juga masyarakat diluar Bolaang Mongondow, informasi stok barang

1
dan harga barang yang disediakan, galeri barang yang dijual yang bisa diakses secara online oleh
pelanggan selama memiliki akses internet.
1.4 Waktu dan Tempat Pelaksanaan
Waktu pelaksanaan dari penelitian ini dimulai pada tanggal 2022 sampai dengan 2022.
Adapun pelaksanaan penelitan ini bertempat di UD. Borobudur, Kecamatan. Passi Barat,
Kabupaten Bolaang Mongondow, Provinsi Sulawesi Utara.

2
 BAB II
GAMBARAN UMUM

2.1 Sejarah UD. Borobudur

Usaha Dagang (UD) Borobudur merupakan sebuah toko bangunan yang berdiri pada
tahun 2015. Toko yang didirikan oleh keluarga Ibu Sarini Ula ini terletak di Passi, Kecamatan
Passi Barat, Kabupaten Bolaang Mongondow, Provinsi Sulawesi Utara. UD. Borobudur awalnya
hanya menjual material-material untuk bahan pembuatan bangunan seperti pasir, batu, kerikil,
dan semen. Karena kebutuhan dari masyarakat sekitar UD. Borobudur pun mulai menjual bahan-
bahan bangunan lain seperti paku, cat, seng, rangka besi bangunan, dan bahan bangunan lainnya.
UD. Borobudur menyediakan bahan-bahan bangunan dan material pembuatan bangunan
yang berkualitas dan beraneka jenis. Masing-masing bahan bangunan yang dijual memiliki
harganya masing-masing. Semua bahan-bahan bangunan yang dijual di UD. Borobudur saat ini
dipromosikan secara offline menggunakan media promosi seperti brosur, koran dan spanduk.

2.2 Visi dan Misi Adiva UD. Borobudur

Visi dan misi UD. Borobudur adalah sebagai berikut :
VISI
Menjadi toko bahan bangunan terdepan dan menjadi panutan dalam sistem dan
manajemen serta siap menghadapi globalisasi serta akan terus menjaga juga memprioritaskan
kepuasan pelanggan.
MISI
Menjadi toko bahan bangunan yang terus menyediakan berbagai macam produk
berkualitas dengan harga yang bersaing dan pantas, pelayanan yang profesional, pegawai yang
bersahabat dan kompeten, dan terus melakukan perkembangan yang berkelanjutan serta
memberikan suasana belanja yang nyaman juga aman kepada pelanggan.

2.3 Struktur Organisasi

Menurut Wisnu (2019), struktur organisasi adalah sistem formal tentang hubungan tugas
dan wewenang yang mengendalikan bagaimana tiap individu bekerjasama dan mengelola segala
sumber daya yang ada untuk mewujudkan tujuan organisasi. Berikut ini merupakan struktur
organisasi UD. Borobudur.

3
 Gambar 2.1 Struktur Organisasi

2.4 Landing Page

Menurut Sumajaya (2016), landing page adalah halaman yang didesain khusus untuk
target tertentu dan untuk penwaran tertentu. Desain khsusus ini seharusnya dibuat berbeda untuk
setiap penawaran.

2.5 Toko
Menurut Januismanto (2014), toko adalah suatu rangkaian aktivitas bisnis untuk
menambah nilai guna barang dan jasa yang dijual kepada konsumen untuk konsumsi probadi
atau rumah tangga. Jadi konsumen menjadi sasaran dari toko adalah konsumen akhir yang
membeli produk untuk dikonsumsi.

2.6 Toko Bangunan

Menurut Wahyuni, dkk (2022), toko bangunan adalah bisnis yang memiliki prospek
bagus yang memiliki keuntungan yakni selalu dibutuhkan konsumen, barang yang dijual tidak
mengalami penyusutan, laba yang didapat sangat besar, tidak memiliki banyak pesaing, dan
berpartner untuk mendapatkan modal. Resiko bisnis yang dimiliki oleh toko bangunan adalah
modal yang dibutuhkan sangat besar, harus dibangun di lokasi yang strategis, pemilik usaha akan
mengalami masa sepi pada periode tertentu, tingginya biaya sewa di lokasi strategis dan
minimnya lahan bangunan di kota-kota besar, serta naik turunnya harga bahan baku yang bisa
terjadi kapan saja.

4
2.7 Promosi
Promosi menurut Halim (2013), merupakan suatu upaya yang dilakukan salah satunya
dengan memakai konsep dan prinsip marketing untuk memasarkan suatu produk atau jasa yang
dimiliki.

2.8 Promosi Penjualan

Menurut Utomo, dkk (2013), promosi penjualan adalah bermacam-macam siasat promosi
sebagai pendorong untuk meningkatkan penjualan dalam jangka pendek yang dirancang
sedemikian rupa dalam menggiatkan pemasaran secara luas dan efisien.

5
 BAB III
PELAKSANAAN PROYEK

3.1 Program Landing Page UD. Borobudur

Berikut merupakan landing page pada UD Borobudur Program yang dibangun berbasis
web yang terdiri dari HTML (Hypertext Markup Language) yang kita semua ketahui sebagai
bahasa pemograman untuk struktur dasar pembuatan website dan untuk tampilannya
menggunakan Bootstrap dan CSS (Cascading Style Sheet). Alasan saya menggunakan Bootstap
adalah untuk mempermudah dan mempercepat pengembangan web di front end. Bootstrap
memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan
komponen, seperti navigasi, card border yang terdapat pada website, carousel gambar, dan
tombol (button). Website ini sendiri juga terdapat interaksi untuk pengunjung/konsupen berupa
fitur pemesanan yang menggunakan API WhatsApp yang merupakan sebuah fitur resmi dari
aplikasi WhatsApp yang didesain khusus untuk mempermudah komunikasi dengan pelanggan
dibantu dengan Javascript.

Gambar 3.1 Tampilan Navigasi Bar

Gambar 3.1 merupakan tampilan dari navigasi bar landing page UD Borobudur. Navigasi
bar ini sendiri memiliki tampilan yang cukup sederhana karena hanya menampilkan judul yang
merupakan nama dari warung makan itu sendiri dan terdapat dua tombol yaitu tombol home,
about, produk, dan kontak.

Gambar 3.2 Source Code HTML Navigasi Bar

6
 Gambar 3.2 merupakan source code HTML dari navigasi bar pada landing page Warung
Makan Dapur Sodara. Source code untuk navigasi bar secara keseluruhan menggunakan setelan
deafult dari bootstrap tinggal diatur sesuai keinginan pada CSS nantinya. Dimana navigasi bar
dibungkus oleh tag nav diberi class navbar-expand untuk memperluas dan background
dark/gelap yang didalamnya terdapat beberapa tag, pertama adalah tag div diberi class container
untuk pembuka tag. Didalam tag div terdapat tag a diberi class navbar brand text white yang
merupakan nama brand itu sendiri sekaligus sebagai judul website. Untuk tag strong berfungsi
untuk menebalkan tulisan agar terlihat berbeda dengan tombol, dikarenakan posisi dari brand
atau judul sejajar dengan tombol. Kemudian ditutup lagi oleh tag div diberi class collapse id
navbar sebagai pengelompokan halaman. Berikutnya tag utuk tombol, dimulai dari tag ul yang
membungkus beberapa tag deberi class navbar-nav sebagai pengelompokan dan ml- auto agar
posisi tombol tetap. Didalamnya terdapat tag a yang diberi class nav-link mr-4 dan id yang sudah
ditentukan. Id pertama adalah index.html untuk tombol (Home). Begitu juga dengan tombol
About dan lainya memiliki tag dan class yang sama namun diberi id yang berbeda.

Gambar 3.3 Tampilan Banner Landing Page

Gambar 3.3 merupakan tampilan benner landing page UD Borobudur. Pada bagian ini
terdapat background berukuran besar, kata sambutan landing page, kata-kata promosi dan garis
horizon.

Gambar 3.4 Tampilan About Landing Page

7
 Gambar 3.4 merupakan tampilan about landing page UD Borobudur. Pada bagian ini
terdapat deskripsi singkat tentang sejarah dari UD Borobudur, mulai dari judul, sub judul,
sejarah, dan 4 foto.

Gambar 3.5 Source Code HTML About

Gambar 3.5 merupakan source code HTML about. Dimana terdapat tag div class about yang
membungkus keseluruhan tag. Kemudian tag div class container untuk membungkus. Tag div class font-
weight-bold membungkus tag h3 untuk mencantumkan judul utama dan h4 untuk mencantumkan sub
judul, sedangkan tag h5 untuk mecantumkan deskripsi sejarah singkat.

Gambar 3.6 Tampilan Produk Landing Page

8
 Merupakan tampilan produk landing page UD Borobudur. Tampilan produk ini dibuat
dalam bentuk box, yang didalamnya terdapat gambar produk, nama, harga, checkbox dan form
input jumlah pesanan.

Gambar 3.7 Source Code HTML Produk

Gambar 3.7 merupakan source code HTML produk. Dimana terdapat tag div class menuzz id
market untuk id halaman marketplace. Kemudian tag section class menu top untuk
mencantumkan judul dan patokan card text lainya. Kemudian terdapat tag div class container
yang didalamnya terdapat tag div class heading yang membungkus tag h2 dan p untuk
mencantumkan judul dan sub judul. Pada bagian box terdapat tag dic class d-flex justify-conten-
around untuk mengatur posisi item yang terdapat pada box. Kemudian tag div class card style
width 18 rem untuk mengatur ukuran dari card. Kemudian pada bagian body terdapat beberapa
tag diantaranya, tag img untuk memuat gambar, h5 dan h6 untuk mencantumkan nama jenis,
harga dan kategori. Selanjutnya untuk bagian input terdapat tag input class form – check – input
bertipe checkbox diberi id item 11, kemudian tag label untuk mencantumkan indikasi untuk
mencentang checkbox tersebut, yang terakhir tag input bertipe number class form – control id
jumlah 11 placeholder input jumlah yang merupakan form jumlah pada box. Untuk box
berikutnya juga memiliki tag dan class yang sama dengan id yang sudah disesuaikan.

9
 Gambar 3.8 Tampilan Form Pemesanan
Gambar 3.8 merupakan tampilan form pemesanan pada landing page UD Borobudur. Seperti
form pemesanan pada umumnya bagian form pemesanan pada landing page UD Borobudur ini
terdapat form untuk memasukan nama nomor hp, form untuk menampilkan hasil input map
canvas, map canvas, form detail alamat dan tombol submit.

Gambar 3.9 Source Code HTML From Pemesanan 1

10
 Gambar 3.9 merupakan source code html form pemesanan 1. Dimana terdapat tag div class
d-flex justify-content-around untuk mengatur posisi dari form pemesanan kemudian tag div style
width 60% untuk mengatur style lebar dari form pemesanan, selanjutnya tag div class card body
yang membungkus tag h5 dan 6 untuk mencantumkan judul dan sub judul. Pada bagian form
terdapat tag form yang membungkus keseluruhan tag pada form pemesanan, di dalamnya
terdapat tag div class form-group style color white yang membungkus tag label untuk
mencantumkan jenis form kemudian tag input bertipe text dengan id namamu placeholder
masukan nama, tag input ini merupakan form dari nama pemesan. Untuk form selanjutnya juga
memiliki tag dan class yang sama dengan id yang sudah di sesuaikan.

Gambar 3.10 Source Code HTML Form Pemesanan 2

Gambar 3.10 merupakan source code html form pemesanan 2. Pada bagian ini terdapat
terdapat tag text area rolls 3 cols 107% disabled, untuk bagian text area ini dihunungkan dengan
id map canvas untuk bagian form detail alamat memiliki tag dan class yang sama seperti form
nama pemesan dan domor hp. Selanjutnya pada bagian button terdapat tag button bertipe button
class btn btn info yang dihubungkan dengan on-click function checkout. Button ini sudah
terhubung dengan javascript marketplace.

Gambar 3.11 Tampilan Footer Landing Page

11
 Gambar 3.11 merupakan tampilan footer landing page UD Borobudur. Pada tampilan ini
terdapat logo, 3 ikon (maps, whatsapp, facebook). Kemudian pada bagian kanan terdapat maps
canvas.

Gambar 3.12 Source Code HTML footer

Gambar 3.12 merupakan source code HTML footer. Pada bagian ini terdapat tag footer
class footer-ditributed yang membungkus keseluruhan tag pada footer. Kemudian tag div class
footer-left yang membungkus tag img untuk memuat logo, tag h3 untuk mencantumkan nama
website, kemudian tag p untuk mencantumkan watermark website. Berikutnya pada bagian
tengah footer terdapat tag div class footer center, didalamnya terdapat tag i untuk mencantumkan
ikon maps, whatsapp dan facebook. Untuk tag a herf untuk mengarahkan button ikon sesuai url
yang dituju. Pada bagian akhir terdapat tag yang sama seperti ikon namun ditambah dengan
frame map-canvas yang dihubungkan dengan koordinat lokasi.

3.2 Cara Pemesanan Pada Landing Page UD Borobudur

Gambar 3.13 Langkah Pemesanan 1

12
 Gambar 3.13 merupakan langkah langkah pemesanan 1. Pada langkah pertama customer
memilih menu yang tertera pada halaman menu dengan cara mencentang checkbox yang telah
disediakan ditiap menu. langkah kedua customer memasukkan jumlah orderan yang akan
dipesan pada form jumlah yang terdapat di box menu.

Gambar 3.14 Langkah Pemesanan 2

Gambar 3.14 merupakan langkah pemesanan 2. Pada bagian ini pemesan menuju halaman
form untuk memasukan nama, nomor telepon memilih. Lokasi pada map canvas yang terdapat
form pemesanan kemudian memasukan detail alamat seperti blok, gang, nomor rumah, kemudian
dilanjutkan dengan menekan tombol submit.

13
 Gambar 3.15 Hasil Checkout
Gambar 3.15 merupakan hasil cekout. Pada hasil cekout terdapat keterangan pesanan mulai
dari nama, nomor hp, produk, jumlah, dan total harga. Untuk url titik maps akan terhubung ke
google maps beserta rute yang akan dilalui.

14
 BAB IV
KESIMPULAN DAN SARAN

4.1 Kesimpulan
Berdasarkan proyek akhir yang telah dilakukan, maka kesimpulan yang dapat diambil
adalah sebagai berikut:
1. Tersedianya Landing Page pada UD. Borobudur yang memebrikan informasi tentang barang
jualan toko itu sendiri yang nantinya dapat diakses secara Online
2. Program ini dapat meningkatkan jumlah pengunjung dan sebagai sarana Promosi dan
pelayanan kepada Konsumen.

4.2 Saran
Adapun Saran dari penulis berdasarkan Proyek Akhir yang berjudul Pembuatan Landing
Page Promosi dan Penjualan Pada Usaha Dagang (UD) BOROBUDUR adalah sebagai berikut:
1. Landing page merupakan sebuah media yang belum ada sebelumnya di toko ini serta
penggunaannya belum maksimal.
2. Program belum berbasis Mobile Android dan hanya berbasis Web.
3. Tampilan Landing Page terbilang masih sederhana dan tidak responsif

15
 DAFTAR PUSTAKA
Halim, C., 2013, Tips Praktis Promosi Online Untuk Berbagai Event, Jakarta : PT. El
ex Media Komputindo.

Januismanto, Aditya, B., 2014, Perancangan Media Promosi Toko Buku Reading Lig
hts, Perpustakaan UNIKOM.

Sumajaya, T., 2016, Rahasia Jitu Berpromosi Dengan Google Ad Awards, Jakarta : P
T. Elex Media Komputindo.

Utomo, K., P., dkk, 2021, Dasar Manajemen dan Kewirausahaan, Bandung : Penerbi
t Widiana Bhakti Bandung.

Wahyuni, P., I., dkk, 2022, Teori dan Profil Kewirausahaan Bidang Teknik Sipil, Ma
kassar : CV. Tohar Media.

Wisnu, U., R., D., 2019, Teori Organisasi “Struktur dan Desain”, UMMPress.

16