LAPORAN PROYEK

PEMBUATAN LANDING PAGE UNTUK PEMESANAN ROTI DAN MAKANAN

RINGAN PADA TOKO UD. KARYA MURNI MOTOBOI BESAR

MOH. MIRZA DORUMEAT

1517113

PROGRAM STUDI S1 SISTEM INFORMASI

JURUSAN SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER (STMIK)

MULTICOM BOLAANG MONGONDOW 2022
 LAPORAN PROYEK

PEMBUATAN LANDING PAGE UNTUK PEMESANAN ROTI DAN MAKANAN

RINGAN PADA TOKO UD. KARYA MURNI MOTOBOI BESAR

Sebagai salah satu syarat menyelesaikan Tugas Akhir Proyek

Oleh :
Moh. Mirza Dorumeat
1517113

Kotamobagu, 17 Januari 2022

Menyetujui
Pembimbing

Michell Farrel Tomatala, S.Kom, M.Cs

NIDN : 0907048604

Mengetahui
Ketua Program Studi Sistem Informasi

Yufika Sari Bagi, S.Kom, M.Cs

NIDN : 0909048501
 KATA PENGANTAR

Alhamdulillah, puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan
inayah-Nya sehingga saya dapat menyelesaikan Laporan Landing page yang berjudul
“Laporan Proyek Pembuatan Landing Page untuk pemesanan Toko Roti dan Makanan
Ringan pada Toko UD Karya Murni Motoboi Besar”

Terima kasih saya ucapkan kepada dosen Pembimbing yaitu Sir Michell Farrel
Tomatala, S,Kom, M.Cs yang telah membantu saya baik secara moral maupun materi.
Terima kasih juga saya ucapkan kepada teman-teman seperjuangan. Dan terutama Ayah, Ibu,
Kakak kakak dan Saudara saudara saya yang telah mendukung saya dan mendoakan saya
sehingga bisa menyelesaikan laporan tugas akhir nonskripsi ini dengan tepat waktu.

Saya menyadari, bahwa laporan proyek Landing Page yang saya buat ini masih jauh
dari kata sempurna baik segi penyusunan, Bahasa, maupun penulisannya oleh karena itu, saya
sangat mengharapkan kritik dan saran yang membangun dari semua pembaca guna menjadi
acuan agar penulis bisa menjadi lebih baik lagi di masa mendatang.

Semoga laporan proyek Landing Page ini bisa menambah wawasan para pembaca dan
bisa bermanfaat untuk perkembangan dan peningkatan ilmu pengetahuan.

Senin, 17 Januari 2022

Penulis

Moh. Mirza Dorumeat

 DAFTAR ISI

KATA PENGANTAR............................................................................................................................i
DAFTAR ISI.........................................................................................................................................ii
DAFTAR GAMBAR............................................................................................................................iii
BAB 1...................................................................................................................................................1
PENDAHULUAN.................................................................................................................................1
1.1 Latar belakang.............................................................................................................................1
1.2 Tujuan..........................................................................................................................................2
1.3 Manfaat........................................................................................................................................2
1.4 Waktu dan tempat pelaksanaan....................................................................................................3
BAB II...................................................................................................................................................4
GAMBARAN UMUM..........................................................................................................................4
2.1 Sejarah UD. Karya Murni............................................................................................................4
2.2 Visi dan Misi UD. Karya Murni.................................................................................................5
2.3 Struktur Organisasi.....................................................................................................................6
2.4 Landing Page...............................................................................................................................6
2.4.1 Jenis Landing page...............................................................................................................6
2.4.2 Perbedaan Landing Page dan Homepage..............................................................................7
2.5 Makanan Ringan..........................................................................................................................8
2.6 Toko Roti.....................................................................................................................................8
2.7 E-Marketing.................................................................................................................................8
2.8 E-Commerce................................................................................................................................9
BAB III................................................................................................................................................10
PELAKSANAAN PROYEK...............................................................................................................10
3.1 Program Landing Page Toko UD Karya Murni.........................................................................10
3.2 Cara Pemesanan Pada Landing Page UD. Kaya Murni Motoboi Besar.....................................20
BAB IV...............................................................................................................................................24
KESIMPULAN DAN SARAN...........................................................................................................24
4.1 Kesimpulan................................................................................................................................24
4.2 Saran..........................................................................................................................................24
DAFTAR PUSTAKA..........................................................................................................................25
 DAFTAR GAMBAR

Gambar 2. 1 Struktur Organisasi................................................................................................6

Gambar 3. 1 Tampilan Navigasi Bar........................................................................................10
Gambar 3. 2 Source Code HTML Navbar................................................................................11
Gambar 3. 3 Source code CSS navbar.....................................................................................11
Gambar 3. 4 Tampilan Slide Banner........................................................................................12
Gambar 3. 5 Source Code HTML Slide banner........................................................................13
Gambar 3. 6 Source Code CSS Slide banner...........................................................................14
Gambar 3. 7 Tampilan Menu...................................................................................................15
Gambar 3. 8 Source Code HTML Tampilan Menu.................................................................16
Gambar 3. 9 Tampilan about...................................................................................................17
Gambar 3. 10 Source Code HTML about.................................................................................18
Gambar 3. 11 Tampilan footer.................................................................................................18
Gambar 3. 12 Source code HTML footer.................................................................................19
Gambar 3. 13 Source code CSS footer.....................................................................................20
Gambar 3. 14 Cara Pemesanan................................................................................................21
Gambar 3. 15 JS API Whatsapp...............................................................................................22
Gambar 3. 16 JS Checkbox......................................................................................................22
Gambar 3. 17 Tampilan Hasil..................................................................................................23

iii
 BAB 1
PENDAHULUAN

1.1 Latar belakang

Pertumbuhan perekonomian saaat ini tidak terlepas dari pesatnya
pertumbuhan bisnis, baik di sector kecil, menengah dan besar. Hal ini tidak
terlepas dari peranan teknologi yang terus berkembang di Indonesia. Penggunaan
teknologi yang semakin meningkat menyebabkan terjadinya perubahan kultur dan
kebiasaan sehari-hari. Perkembangan teknologi diantaranya internet, yang
membawa perubahan sangat besar di dalam dunia bisnis dan menghasilkan sebuah
gagasan inovasi yang pada akhirnya dapat mendorong perkembangan di dalam
dunia bisnis salah satunya adalah kegiatan pemasaran (marketing). Pemasaran
merupakan salah satu kekuatan utama di dalam dunia bisnis, hal inilah yang
menjadi salah salah satu fokus utama dalam perkembangan teknologi yang
diterapkan dalam dunia bisnis. Hal ini bertujuan untuk meningkatkan pemasaran
bisnis. Penggunaan teknologi di dalam pemasaran bisnis disebut e-marketing.
Toko UD Karya Murni adalah toko yang bergerak dalam bidang penjualan
Roti dan Makanan Ringan yang berlokasi di Motoboi Besar, Kotamobagu Timur.
Roti dan Makanan Ringan ini mempunyai mutu yang tinggi dan kualitasnya sudah
tidak diragukan lagi. Dalam segi penjualan UD Karya Murni juga mengalami
peningkatan signifikan. Ini dapat dilihat dari semakin banyaknya jumlah para
pembeli pada UD Karya Murni.
Dengan semakin berkembangnya tingkat penjualan yang ada, UD Karya
Murni ingin memberikan pelayanan yang memuaskan kepada pelanggannya.
Untuk itu perlu suatu dukungan sistem yang terkomputerisasi, yang dapat
membantu pemilik dan karyawan dalam proses penjualan demi kemajuan UD
Karya Murni dimasa yang akan datang agar berkembang menjadi perusahaan
dagang yang lebih besar. Namun, seiring dengan meningkatnya permintaan
produk oleh konsumen, dan perkembangan teknologi dewasa ini, maka persaingan
dalam perdagangan semakin ketat dan usaha yang bisa dilakukan salah satunya
dengan cara promosi dan pemberian informasi yang cepat dan akurat. Namun
dengan sistem yang berjalan sekarang, terdapat beberapa permasalahan seperti
belum maksimalnya dalam penyampaian informasi produk yang ditawarkan

1
dikarenakan kurangnya media penyampaian informasi untuk promosi, proses
transaksi jual-beli berjalan lambat dan terlalu memerlukan waktu yang banyak,
dimana pelanggan yang tertarik untuk membeli produk yang diinginkan harus
datang langsung ke toko.
Hal inilah yang mungkin sekiranya perlu diubah dalam mempromosikan
produk agar lebih terjangkau lagi oleh pelanggan yang menginginkan kemudahan
dalam membeli produk. Maka perlu adanya suatu sistem penjualan berbasis
landing page (e-commerce) yang lebih dinamis untuk memudahkan promosi
barang dan mempercepat proses transaksi jual-beli produk. Selain itu dapat
membantu pelanggan untuk mendapatkan informasi produk dan memesan produk
tanpa harus datang langsung ke toko. Dengan menggunakan sarana ini maka
semua keterbatasan sarana, jarak dan waktu dapat teratasi dengan mudah.
Sehingga dapat memberikan kenyamanan bagi pelanggan dalam berbelanja.

1.2 Tujuan
Adapun maksud dan tujuan tersebut adalah sebagai berikut :
1. Memberikan solusi kepada pihak UD Karya Murni yang selama ini masih
belum menggunakan teknologi informasi dalam menyampaikan informasi dan
pemasaran mengenai produk yang tersedia, khususnya menggunakan media
internet.
2. Meningkatkan pelayanan melalui penerapan e-commerce pada UD Karya
Murni agar dapat memberikan kemudahan transaksi online kepada para
konsumennya.
3. Membantu pihak UD Karya Murni dalam mempromosikan produk sehingga
dapat memperluas jangkauan pemasaran..

1.3 Manfaat
Terdapat beberapa manfaat yang didapat dalam pembuatan laporan yaitu :
1. Mengetahui sejarah dari Toko UD Karya Murni, proses kinerja toko yang
berjalan, letak permasalahan toko dan memberikan solusi dengan membuat
landing page.

2
2. Dengan wawancara bisa meningkatkan skill komunikasi kita agar bisa
bermanfaat kedepannya.
3. Menjalin hubungan baik kepada Pemilik usaha, karyawan dan dosen
pembimbing.
4. Bisa meningkatkan skill di aplikasi pengetikan laporan.
5. Meningkatkan kreativitas dalam bidang desain Landing Page.
6. Mendapatkan pengetahuan baru dari segi Coding.

1.4 Waktu dan tempat pelaksanaan

Tanggal Pelaksanaan : 17 Januari 2022 – 5 Februari 2022
Tempat Pelaksanaan : Toko UD Karya Murni Motoboi Besar
Alamat : Motoboi Besar, Jl, Teuku umar, Kec. Kotamobagu timur, Kota
kotamobagu, 95719, Sulawesi Utara, Indonesia

3
 BAB II
GAMBARAN UMUM

2.1 Sejarah UD. Karya Murni

Awal mulanya toko yang berada di Kelurahan Motoboi Besar, Kecamatan
Kotamobagu Timur yang didirikan oleh Ibu Hasria Tungkagi, adalah seorang ibu
rumah tangga memulai usaha kecil pada tahun 1980 dengan berjualan Roti yang
dibuat bersama keluarganya. Setelah beberapa tahun berjualan roti akhirnya pada
tahun 1991 perusahaan ini resmi didirikan dan dinamakan Toko UD. Karya
Murni, dan pada tahun tersebut mereka mengeluarkan produk baru yaitu makanan
ringan seperti Kukis Putar, Kolombeng, Biji-biji manis, dan juga roti dengan
berbagai macam isiannya seperti roti isi cokelat, isi keju dan isi moka. Setelah
berjalannya waktu hingga sekarang, mereka sudah mempunyai lebih dari 15 jenis
makanan ringan dengan berbagai rasa, bentuk, jenis dan ukuran yaitu kecil,
sedang, hingga besar. Dan tidak lupa juga dengan selai nanas yang hanya khusus
dijual pada hari sebelum menjelang bulan lebaran karena selai nanas digunakan
sebagai komposisi adonan kue dan juga roti pada menjelang lebaran nanti.

UD. Karya Murni hingga sekarang menjual berbagai produk mereka di

berbagai Supermarket yang ada di Kotamobagu seperti Abdi Karya, Dragon,
hingga Supermarket terbesar di Kotamobagu yaitu Paris Superstore, mereka juga
menjual produk mereka di berbagai supermarket kecil dan juga warung yang ada
di Kotamobagu. Konsumen juga bisa secara langsung membeli produk di toko
aslinya agar harganya lebih terjangkau.

Kemudian pada tahun 2014-2015, penjualan semua jenis roti UD. Karya
Murni di berbagai supermarket dan warung ditarik semua dari semua toko toko
yang menjual karena tanggal kadaluarsa roti hanya bisa bertahan sekitar 4 sampai
5 hari. Karena hanya bertahan paling lama yaitu kurang dari 1 minggu dan juga
beberapa alasan lain seperti konsumen komplain secara langsung di toko UD
Karya Murni karena rotinya sudah tidak layak dikonsumsi seperti roti yang
tumbuh jamur. Alasannya adalah proses pembuatannya tidak menggunakan bahan
pengawet dan berbeda dengan makanan ringan yang masih dijual di berbagai

4
supermarket dan warung seperti kukis putar, kolombeng dan sebagainya, karena
tanggal kadaluarsa makanan ringan bisa bertahan hingga berbulan bulan, dan pada
akhirnya Semua jenis aneka roti hanya bisa ditemukan dan dijual di toko UD.
Karya Murni

Perusahaan ini didirikan berdasarkan Surat Izin Usaha Perdagangan (SIUP)

Nomor : 690/D-08/PERIND/SIUP/VI/2005 yang merupakan dasar Usaha Dagang
ini sudah terdaftar dan telah memenuhi syarat untuk berdagang. Beberapa piagam
penghargaan yang telah diperoleh UD. Karya Murni Motoboi Besar diantaranya
seperti Piala dari Dinas Pertanian Tahun 2007 Kategori Pengolahan Bahan
Pertanian Kentang dan Kacang. Usaha ini dimulai dengan modal sendiri dan pada
tahun 1998 menambahh modal berupa bantuan dana dari Dinas Sosial Kabupaten
Bolaang Mongondow.

2.2 Visi dan Misi UD. Karya Murni

Visi

Menyediakan produk roti dan makanan ringan yang berkualitas tinggi

namun dengan harga yang terjangkau yang bersaing Serta memberikan pelayanan
terhadap konsumen yang memuaskan,

Misi

1. Menjadi Perusahaaan yang terdepan di bidangnya,

2. Memuaskan Konsumen.
3. Selalu berinovasi dalam membuat produk baru yang sesuai dengan keinginan
konsumen tanpa mengesampingkan kualitas.
4. Selalu menggunakan bahan baku berkuaitas untuk menciptakan roti dan
makanan ringan terbaik.
5. Mengikuti perkembangan usaha serupa yang ada di pasaran agar tidak kalah
saing.
6. Bekerja sama dengan penyuplai bahan baku yang memiliki kualitas terbaik
serta terjamin halal.

5
2.3 Struktur Organisasi
Menurut Hasibuan (2017) struktur organisasi adalah suatu gambar yang
menggambarkan tipe organinasi, pendepartemenan organisasi kedudukan, dua
jenis wewenang pejabat, bidang dan hubungan pekerjaan, garis perintah dan
tanggung jawab, rentang kendali dan sistem pimpinan organisasi, . Berikut ini
merupakan struktur organisasi Toko UD. Karya Murni Motoboi Besar.

Gambar 2. 1 Struktur Organisasi

2.4 Landing Page

Menurut Trilaksono (2019), Landing page merupakan sebuah bentuk
halaman web yang sering digunakan untuk kepentingan marketing dan promosi.
Dikutip dari jurnalweb.com, landing page adalah sebuah halaman web yang
muncul saat pengguna meng-klik iklan PPC (Pay-Per-Click) atau hasil link tujuan
yang muncul dari mesin pencari.

2.4.1 Jenis Landing page

Terdapat 2 jenis landing page yang bisa dibedakan yaitu :

1. Click Through
Click Through adalah sebuah landing page yang menarik pengunjung untuk
mengklik halaman yang lainnya. Jenis landing page ini biasanya digunakan untuk

6
membantu e-commerce, pengunjung biasanya akan merasa penasaran dengan link
yang disediakan dan mau untuk mengklik tautan atau link yang diberikan.

2. Lead Generation
Landing page seperti ini bentuknya seperti sebuah format formulir. Bentuk
landing page seperti ini memang dikhususkan untuk mendapatkan data dari
pengguna. Data-data yang diminta beragam mulai dari nama, umur hingga alamat.
Beberapa pengelola website akan memberikan imbalan atas informasi yang telah
diberikan. Informasi yang telah diberikan ini nantinya akan berguna untuk pemilik
website memberikan iklan sesuai target yang diinginkan.

2.4.2 Perbedaan Landing Page dan Homepage

Perbedaan yang paling jelas antara landing page dan homepage rerletak
pada tujuannya. Landing page hanya memiliki satu tujuan. Dan umumnya karena
tujuannya hanya satu, maka link atau tombol pada halaman landing page juga
hanya satu. Perbedaan antara homepage dan landing page terlihat jelas dalam
halaman homepage memiliki 43 link atau tombol, bedanya landing page hanya
memiliki satu tombol. Kemudian, jika anda memiliki lebih sedikit tautan pada
halaman web telah terbukti meningkatkan konversi, karena lebih sedikit
gangguan. Itulah beberapa alasan melakukan iklan berbayar selalu menggunakan
halaman landing page.

Untuk perbedaan antara landing page dengan homepage :

 Tampilan halaman pertama pada sebuah website
 Menampilkan tombol navigasi dan URL menuju halaman penting di website
 Dapat memberikan edukasi tentang produk dan layanan yang ditawarkan.

Karakteristik landing page :

 Landing page mempunyai fungsi khusus dalam website
 Strategi Marketing untuk konsumen agar lebih fokus segera membeli produk
 Memberi informasi produk ke konsumen.

7
2.5 Makanan Ringan
Menurut AA Wahab (2018) Cemilan atau snack adalah makanan ringan
yang dikonsumsi diantara waktu makan utama. Camilan disukai oleh anak-anak
dan orang dewasa, yang umumnya diantara waktu makan utama, yaitu pada pukul
10 pagi dan pukul 4 sore.
Selain rasanya yang lezat, produk makanan ringan pada masa modern ini
mempunyai beberapa ciri-ciri, diantaranya :
1. Aman dan bebas dari bahaya kimia, substansi toksik, dan mikroorganisme
pathogen serta menyesuaikan dengan peraturan berlaku.
2. Biasanya dipersiapkan secara komersial dalam jumlah besar dengan proses
yang kontinyu.
3. Diberikan bumbu, biasanya garam dan kadang-kadang ditambahkan flavor
lainnya.
4. Stabil selama penyimpanan dan tidak membutuhkan pendinginan untuk
pengawetan.
5. Dikemas dengan kemasan siap konsumsi (ready to eat) biasanya dibagi
menjadi potongan-potongan ukuran makan (bite size), mudah diambil dengan
jari, dan memiliki penampalan berminyak atau kering tergantung dengan
konsumen untuk produk tertentu.

2.6 Toko Roti

Menurut Jeniffer Latson (2015) Sebuat toko roti atau bakery adalah sebuah
tempat yang memproduksi dan menjual makanan yang berbahan dasar tepung
yang dipanggang di dalam oven, seperti roti, kukis, kue, pastri, dan pai. Beberapa
toko roti ritel juga berperan sekaligus sebagai kafe, dengan menyediakann kopi
dan teh sebagai pendamping roti.

2.7 E-Marketing
Menurut Kotler dan Keller (2013) mengatakan bahwa E-Marketing adalah
cara pemasaran yang dilakukan melalui komputer (dan barang elektronik lainnya
seperti laptop dan gadget) dengan menggunakan suatu sarana komunikasi yang
bertujuan mengurangi biaya pemasaran dan meningkatkan keefektifan usaha
pemasaran.

8
2.8 E-Commerce
Menurut Laudon dan Laudon (2013) Definisi e-commerce adalah media
perdagangan elektronik yang memiliki karakteristik atau sifat-sifat tertentu.
Berdasarkan sifat penggunanya menurut para ahli, e-commerce dapat dibagi
menjadi beberapa tipe atau jenis, antara lain :

Tipe-Tipe E-Commerce

Yaitu :
1. Bussiness-to-consumer (B2C)
2. Business-to-business (B2B)
3. Consumer-to-consumer (C2C)

Consumer-to-consumer (C2C) e-commece merupakan tipe yang paling relevan

dengan pembahasan dalam paper ini. E-commerce atau perdagangan elektronik
C2C merujuk pada transaksi finansial maupun informational yang dilakukan
langsung antar konsumen. Sedangkan e-commerce C2C memungkinkan
konsumen untuk menjual produknya (barang atau jasa) langsung kepada
konsumen lain yang pada umumnya dipertemukan melalui situs bisnis tertentu.

9
 BAB III
PELAKSANAAN PROYEK

3.1 Program Landing Page Toko UD Karya Murni

Program Landing Page Toko UD Karya Murni dibangun berbasis web yang
terdiri dari HyperText Markup League (HTML), Cascading Style Sheet (CSS) dan
Bootstrap. HTML digunakan sebagai Bahasa pemograman dasar untuk web, CSS
untuk mengatur Style tampilan dari website dan bootstrap untuk mempermudah
dan mempercepat pengembangan web. Dikarenakan bootstrap memiliki semua
jenis HTML dan desain berbasis CSS untuk berbagai fungsi dan komponen, seperti
navigasi, font, tombol (button), dan card text yang digunakan pada landing page
Toko ud karya murni.

Gambar 3. 1 Tampilan Navigasi Bar

Gambar 3.1 merupakan tampilan navigasi bar Landing Page Toko roti dan
makanan ringan UD Karya Murni Motoboi Besar. Pada tampilan ini cukup
sederhana karena tidak terdapat ikon khusus baik pada judul dan juga tombol.
Pada tamplan ini terdapat title atau judul yang merupakan nama dari toko kue itu
sendiri dan 4 tombol yaitu : (HOME, PRODUCTS, ABOUT, CONTACT).
Keempat tombol tersebut sudah diberi id masing-masing untuk mengarahkan
tombol ke halaman yang akan ditampilkan. Proses menampilkan halamat dibuat
format on scroll.

10
 Gambar 3. 2 Source Code HTML Navbar
Gambar 3.2 merupakan source code HTML Navbar. Dimana terdapat tag
div class container-fluid yang membungkus keseluruhan tag, kemudian tag div
class row untuk mengatur baris dari tiap elemen yang terdapat pada navbar,
kemudian tag div class col-md-12 navbar fixed top untuk mengatur posisi dari
navbar, didalamnya terdapat tag a herf index.html clas logo navbar-brand text
white offset-md-2 untuk mengatur style dan untuk mencantumkan nama toko yang
terdapat pada pojok kiri navbar. Berikutnya pada bagian button terdapat tag ul
class nav yang membungkus tag li dan a untuk mencantumkan button dan id pada
navbar.

Gambar 3. 3 Source code CSS navbar

Gambar 3.3 merupakan Source code CSS navbar. Dimana terdapat class
navbar yang memiliki style background color code rgb 145, 73, 73, top 0, z-index
99999, padding 25px 0, kemudian class navbar dan logo memiliki style font-size

11
1em, text-tranform uppercase, font-weight 750, latter-spacing 1px. Kemudian
class navbar ul dan nav memiliki style margin-right 15%. Kemudian class navbar
ul navbar li active dan hover memiliki style background code rgba 255 255 255
0.5, color #000. Kemudian class navbar ul dan class nav li a memiliki style color
#fff, font-size 1em, font-weight 500. Yang terakhir class navbar ul navbar li
active dan hover a memiliki style color #000.

Gambar 3. 4 Tampilan Slide Banner

Gambar 3.4 merupakan tampilan Slide Banner. Pada bagian ini terdapat 3
background dan deskripsi berbentuk slide, tombol prev/next manual dibagian
kanan dan kiri dan halaman slide dibagian bawah.

Gambar 3. 5 Source Code HTML Slide banner (Carousel Indicators)

Gambar 3.5 merupakan source code HTML slide benner (carousel
indicators). Dimana terdapat tag div id carausel example indicators class
carousel slide data ride carousel. Didalamnya terdapat tag ol class carousel-
indicators yang membungkus tag li data target untuk mengatur urutan dari
halaman slide.

12
 Gamb
ar 3.6 Source Code HTML Slide banner (carousel inner)
Gambar 3.6 merupakan Source Code HTML Slide banner (carousel inner).
pada bagian ini terdapat tag div class carousel-inner yang membungkus
keseluruhan deskripsi, kemudian tag div class carousel-item active untuk
meletakan bagian deskripsi slide pertama, didalamnya terdapat tag div class info
yang membungkus tag h1 untuk mencantumkan deskripsi.

Gambar 3.7 Source Code HTML Slide banner (Manual Button Control)

Gambar 3.7 Source Code HTML Slide banner (manual button control).
Bagian ini merupakan source code untuk tombol manual prev dan next. Dimana
terdapat tag a class carousel-control-prev herf carouselexampleindicators, role
button, data-slide prev. class ini berfungsi untuk menghubungkan fungsi id pada
data slide. Tag a membungkus tag span untuk memuat icon.

13
 Gambar 3. 8 Source Code CSS Slide banner
Gambar 3.8 merupakan source code CSS slide banner. Dimana terdapat
class carousel example indicators yang memiliki style position relative, height
100vh, width 100%, kemudian class carousel-inner yang memiliki style position
relative, height 100vh, width 100%, background code rgb #000. Kemudian class
carousel-inner before memiliki style position absolute, content dikosongkan
background code rgba 0,0,0,0.45, top 0, left 0, height 100%, width 100% z-index
1. Kemudian class carousel-inner dan carousel-item memiliki style position
relative, height 100vh, width 100%, background url untuk memuat gambar,
background-size 100% 100%, background-posistion center, background-
attachment fixed. Kemudian class carousel example indicators, carousel-inner,
carousel-item dan info memiliki style position absolute, top 50%, transform
translate(50%) height auto, width 100%, z-index 1, text-align center. Kemudian

14
class carousel-item h1 memiliki style height auto color code rgb #fff, width 100%,
z-index 1, text align center, font-size 5.5 rem, font-weight 750. Kemudian class
carousel-item p memiliki style height auto, color code rgb #ccc, width 100%, z-
index 1, text align center, font-size 1.2em, font-weight 500.

Gambar 3.9 Tampilan Menu

Gambar 3.9 merupakan tampilan menu landing page. Pada tampilan ini
terdapat berbagai macam menu yang terbagi dalam dua kategori yaitu aneka
makanan ringan dan aneka roti. Menu - menu yang ditampilkan dibuat dengan
card border didalamnya terdapat gambar menu, nama jenis menu, harga,
checkbox dan form untuk memasukan jumlah makanan yang dipesan. Pada bagian

15
bawah terdapat form pemesanan yang berisi form untuk memasukan nama, form
alamat, dan tombol checkout.

Gambar 3.10 Source Code HTML Tampilan Menu

Gambar 3.10 merupakan source code html menu. Dimana terdapat tag div
class menunya yang membungkus keseluruhan tag pada menu. Kemudian tag
section class product dengan id products untuk id halaman, kemudian tag section
class menu top yang didalamnya terdapat tag div class container yang
membungkus tag div class heading untuk mencantumkan judul dan sub judul
pada bagian menu. Tag div class d-f;ex justify-content-around untuk mengatur
posisi dari konten agar lebih fleksibel. Kemudian pada bagian card terdapat tag
div class card style width 18 rem untuk mengatur ukuran card. Selanjutnya tag div
class card-body membungkus beberapa tag diantaranya tag img untuk memuat
gambar menu, tag h5 untuk mencantumkan nama dan harga menu, 2 tag input
yang sudah diberi id untuk checkbox dan form jumlah pesanan.

16
 Gambar 3.11 Source Code HTML Form pemesanan
Gambar 3.11 merupakan source code HTML Form pemesanan. Dimana
terdapat tag div class d-flex-left justify-content-around, didalamnya terdapat tag
div style width 60%. Kemudian tag div class card-body membungkus tag h5 dan
h6 untuk mencantumkan keterangan. Selanjutnya pada bagian form terdapat tag
div class form-grup yang membungkus tag label untuk keterangan dari form dan
tag input untuk memuat form yang sudah diberi id. Pada bagian akhir terdapat
button dimana terdapat tag button dengan function cekout untuk menghubungkan
button ke javascript.

17
 Gambar 3.12 Source Code Javascript menu
Gambar 3.12 merupakan source code Javascript menu. Dimana terdapat
tag function cekout sebagai penghubung js dan tombol kirim pada form
pemesanan. Kemudian terdapat beberapa tag var untuk mewakili variable dalam
siatu nilai yang mengambil id dari setiap form. Var item berjumlah 20 sesuai
dengan jumlah menu. Selanjutnya pada bagian if berfungsi untuk perhitungan dan
keterangan dari hasil yang akan ditampilkan pada masing-masing item dimana
terdapat keterangan dari nama menu kemudian mengambil id dari jumlah, untuk
total harga id dari jumlah dikalikan dengan harga pokok dari menu. Var
selanjutnya adalah url dari nomor whatsapp yang didalamnya terdapat hasil
eksekusi diantaranya keterangan proses pemesanan, nama alamat dan 20 menu.

18
 Gambar 3. 13 Tampilan about
Gambar 3.13 merupakan tampilan about. Pada tampilan about terbagi dua
bagian yaitu deskripsi sejarah singkat dan galeri.

Gambar 3.14 Source Code HTML about

Gambar 3.14 merupakan source code HTML about. dimana terdapat tag
div class about text-light width 100% untuk mengatur style dari about dan
membungkus tag h3 card-title text-center untuk mencantumkan judul dan tag p
class yang sama untuk mencantumkan deskripsi. Kemudian pada source code
galeri terdapat tag div class align-item-text-center justify-conten-between,

19
kemudian tag div class form-grup sebagai patokan awal , kemudian tag div class
row-mt3 untuk menghubungkan keseluruhan image pada galeri, kemudian tag div
class col-md-3 yang didalamnya terdapat tag div class card border-white yang
membungkus tag img src untuk memuat image pada galeri.

Gambar 3.15 Tampilan footer

Gambar 3.15 merupakan tampilan footer. Pada tampilan ini terdapat
beberapa deskripsi, tombol yang mengarah ke setiap halaman, contact dan
watermark dari landing page.

Gambar 3.16 Source code HTML footer

Gambar 3.16 merupakan source code HTML footer. Dimana terdapat tag
footer yang membungkus keseluruhan tag kemudian didalamnya terdapat tag div
class container, didalamnya terdapat tag div class row untuk mengatur baris
beberapa item, kemudian tag div class col-md-3 untuk menghubungkan item. Tag
ini membungkus tag span class logo untuk mencantumkan deskripsi. Selanjutnya
untuk bagian item menu terdapat tag div class col-md-4 untuk menghubungkan

20
dan mengatur posisi dari item. Didalamnya terdapat tag span untuk
mencantumkan judul dan tag li,a untuk menaruh id dari button pada footer. source
code ini juga berlaku pada item contact yang memiliki tag dan class yang sama.
Berikutnya pada bagian deskripsi dan watermark terdapat tag div classsearch-text,
kemudian tag div class container, kemudian tag div class row-text-center untuk
mengatur posisi dari deskripsi dan watermark, kemudian tag div class form yang
membungkus tag h4 untuk mencantumkan deskripsi dan watermark.

Gambar 3.17 Source code CSS footer

Gambar 3.17 merupakan source code CSS footer. Dimana terdapat class
footer yang memiliki style width 100%, backgroundcolor code rgb 145,73,73 dan
padding 30px 0px. Kemudian class logo memiliki style color fff, font-weight 700,
font-size 20px. Kemudian class addres span dan menu span memiliki style color
fff font-weight bold, border-button 1px solid warna #c7c7c7, padding 10px 10px,
display block,text-transform uppercase, font-size 16px, latter-spacing 3px.
Kemudian class addres li a dan class menu li a memiliki style color fff, latter-
spacing 3px, text-decoration none, font-size 14px. Kemudian class menu li
memiliki style margin 20px list style none. Kemudian class addres li a:hover dan

21
menu li a:hover memiliki style color peru dengan transisi webkit, moz dan o all 1
second ease-in-out. Yang terakhir class addres dan fa memiliki style color peru,
margin-right 10px font-size 18px.

3.2 Cara Pemesanan Pada Landing Page UD. Kaya Murni Motoboi Besar

Berikut merupakan langkah-langkah pemesanan pada landing page pada

toko UD. Karya Murni Motoboi Besar :

Gambar 3. 6 Cara Pemesanan

Gambar 3.14 merupakan cara pemesanan landing page Toko UD. Karya
Murni Motoboi Besar. Cara pemesanannya sendiri sangat mudah yaitu pertama
customer memilih jenis menu yang akan dipesan dengan cara mencentang cekbox
yang tersedia, kemudian memasukan jumlah menu yang akan dipesan. Langkah
kedua customer diwajibkan mengisi form nama dan alamat yang tersedia pada

22
form pemesanan. Yang terakhir customer menekan tombol biru untuk melakukan
pemesanan.

Gambar 3. 7 JS API Whatsapp

Gambar 3.15 merupakan JS API Whatsapp. Dimana terdapat var untuk
mengambil nilai variable dari keseluruhan menu, kemudian if menggunakan
metode geteElementById yang mengambil id dari keseluruhan menu, kemudian
hasil yang ditampilkan terdapat item mengambil id dari nitem dan jumlah
mengambil id dari sCity. Metode ini digunakan oleh masing-masing menu
tergantung id yang akan diambil. Kemudian untuk hasil dari form pemesanan
terdapat 2 var untuk nama pemesan dan alamat menggunakan metode yang sama.
Var yang terakhir digunakan untuk url nomor whatsapp yang akan dikirimkan.

23
 Gambar 3. 8 JS Checkbox
Gambar 3.16 merupakan JS Checkbox. Dimana terdapat function
changeship yang merupakan function dari checkbox pada menu. Kemudian
metode yang digunakan adalah if else, dimana if mengambil id dari chshipadd
yang merupakan id dari menu 1. Kemudian id shipadddiv dibuat hidden untuk
prop disable. Kemudian else untuk pengecualian terdapat id shipadddiv namun
style visibility dibuat visible dan prop disable. Source code ini terdapat pada
masing-masing menu sesuai dengan id yang akan dipanggil.

Gambar 3. 9 Tampilan Hasil

Gambar 3.17 Merupakan tampilan setelah pelanggan mengklik tombol beli
sekarang yang akan beralih ke aplikasi atau website dari WhatsApp, setelah
pelanggan sudah memilih pesanannya kemudian klik tombol warna hijau yang
bertuliskan “CONTINUE TO CHAT” kemudian pelanggan akan otomatis akan
mengirim pesanan yg sudah dipesan kepada owner dan otomatis akan langsung
diantar oleh kurir sesuai alamat pesanan yang akan dituju.

24
 BAB IV
KESIMPULAN DAN SARAN

4.1 Kesimpulan
Kesimpulan yang diperoleh dari penelitian ini diantaranya Penggunaan
teknologi komputerisasi membantu dalam menghasilkan keputusan-keputusan
yang akurat dan cepat, sehingga pelayanan terhadap seluruh pelanggan dapat
meningkat dan semakin membaik. Sistem penjualan pada UD Karya Murni yang
terkomputerisasi akan memudahkan pekerjaan dan dapat meningkatkan
kelancaran proses pelayanan penjualan. Dengan adanya Landing Page pemasaran
ini diharapkan dapat membantu perusahaan dalam meningkatkan pelayanan dan
penjualan di berbagai wilayah baik dalam kota maupun luar kota.

4.2 Saran
Berdasarkan pengalaman yang didapat selama menjalankan riset pada UD Karya
Murni, penulis mempunyai saran yang mungkin bermanfaat bagi perkembangan
dan kemajuan perusahaan adalah sebagai berikut :
1. Hendaknya penggunaan teknologi komputerisasi lebih diterapkan dan
ditingkatkan, dimana bermanfaat dalam proses jual-beli pesanan,
khususnya dalam sistem penjualan lewat whatsapp sehingga dapat berjalan
efektif dan efisien.
2. Penggunaan teknologi komputerisasi menciptakan sumber daya manusia
yang bermutu dan berkualitas dalam bidangnya.
3. Pengawasan secara rutin dalam perawatan atau pemeliharaan sistem.

25
 DAFTAR PUSTAKA

Arviana, Nerrisa Geofanni. 2021. Pahami Apa Itu Landing Page dan Berbagai
Manfaat Menariknya. https://glints.com/id/lowongan/landing-page-
adalah/#.Yf3HiR77ONw (diakses tanggal 17 Januari 2021)

Latson, Jennifer ,2015 “How Sliced Bread Became the 'Greatest Thing”,

https://time.com/3946461/sliced-bread-history/, diakses pada 24 Januari
2022 pukul 07:36

Wahab, AA. (2018). Pengertian Cemilan atau Snack. Diakses pada 5 Februari
2022, dari https://www.google.com/url?
sa=t&source=web&rct=j&url=http://eprints.mercubuana-yogya.ac.id/
3956/3/BAB
%2520II.pdf&ved=2ahUKEwi4wYD30uj1AhU0SGwGHU5EDBoQFnoE
CFYQAQ&usg=AOvVaw2JCzlxv86bmeE2y7S_ywTC

Trilaksono M. T., 2019, Perancangan Landing Page Produk Video Game

Aquaculture Land Sebagai Upaya Promosi Pada Pasar Internasional,
Universitas Dinamika, Kerja Praktek

Susanti A.(2019), Pengaruh Struktur Organisasi dan Budaya Organisasi terhadap

Kualitas Sistem Informasi Akutansi, 18 (4), 87-101

F ULFA. 2019. Pengaruh Viral Marketing dan kepercayaan Pelanggan Terhadap

Keputusan Pembelian secara Online pada produk K-LINK (Studi
Pelanggan PT. K-LINK di Karesidenan Pati), 28 Januari.

Faramitha D. 2011, Pengaruh harga Kue Bolu Terhadap Peningkatan Penjualan

pada UD. Karya Murni Motoboi Besar [skripsi] Kotamobagu (ID):
Sekolah Tinggi Ilmu Ekonomi (STIE) WIdya Darma Kotamobagu.

Dyah Isti Rahayu D. 2018. Konsep Biaya dan Pelaporan Harga Pokok Produk
Pada UD. Karya Murni Kelurahan Motoboi Besar [Skripsi] Kotamobagu
(ID): Sekolah Tinggi Ilmu Ekonomi (STIE) Widya Darma Kotamobagu.

26
Winda Walang, diwawancarai oleh Moh. Mirza Dorumeat, 7 Desember 2021,
Sejarah, Nama Produk Roti dan Makanan Ringan serta harganya, UD.
Karya Murni Motoboi Besar, Kotamobagu, Sulawesi Utara, Indonesia.

Lestari A. (2017). Kajuan Pustaka, Kerangka Pemikiran Dan Hipotesis Penelitian.

Diakses pada 7 Februari 2022 ,dari
http://repository.unpas.ac.id/27875/5/11.%20BAB%20II%20ANL
%20SA.pdf

27