WEB TOKO BUNGA

VLFLOWER

Tugas Ini Dibuat Untuk Memenuhi Tugas Project Matakuliah Web

Programming

Tim penyusun :
Ramadhan Astrian Pratama (17211049)
Aziz Adi Prima (17210974)

PROGAM STUDI TEKNOLOGI INFORMATIKA KAMPUS CIBITUNG

UNIVERSITAS BINA SARANA INFORMATIKA
CIBITUNG
2022
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kehadirat Tuhan Yang Maha

Esa yang telah memberikan rahmat dan karunia-Nya sehingga penulis dapat
menyelesaiakan tugas makalah ini. Makalah ini disusun dalam rangka
memenuhi tugas wajib dalam mata kuliah Web progamming

Semoga dengan tersusunnya makalah ini diharapkan dapat berguna bagi

kami semua dalam memenuhi salah satu syarat tugas kami di perkuliahan.
Makalah ini diharapkan bisa bermanfaat dengan efisien dalam proses perkuliahan.

Dalam menyusun makalah ini penulis telah berusaha dengan segenap

kemampuan untuk membua tmakalah yang sebaik-baiknya.Sebagai pemula
tentunya masih banyak kekurangan dan kesalahan dalam makalah ini,
olehkarenanya kami mengharapkan kritik dan saran agar makalah ini bisa menjadi
lebih baik.

Demikianlah kata pengantar makalah ini dan penulis berharap semoga karya
ilmiah inidapat digunakan sebagaimana mestinya.Amin

Bekasi, 10 Desember 2022

Tim penyusun

ii
 DAFTAR ISI

KATA PENGANTAR..................................................................................................ii

DAFTAR ISI...............................................................................................................iii

DAFTAR
SIMBOL......................................................................................................iv

BAB I PENDAHULUAN.............................................................................................1

1.1 Latar Belakang...............................................................................................1

1.2 Maksud dan Tujuan........................................................................................2

1.3 Ruang Lingkup...............................................................................................2

BAB II LANDASAN TEORI......................................................................................3

2.1 Pengertian Bahasa pemograman HTML, dan CSS.........................................3

2.2 Kelebihan Dan Kekurangan Bahasa HTML...................................................6

2.3 Pengertian Flowchart......................................................................................6

BAB III PERANCANGAN DAN IMPLEMENTASI................................................8

3.1 Rancangan Flowchart Website Jual Beli Bunga............................................8

3.2 Tampilan Website..........................................................................................9

3.3 Source Code.................................................................................................11

BAB IV PENUTUP..................................................................................................15

4.1 kesimpulan..................................................................................................15

4.2 Saran...........................................................................................................15

Daftar Pustaka.............................................................................................................16

iii
 DAFTAR SIMBOL

start

Cari
produk

Pilih
produk

ketersediaan
produk
Produk
Produk
tidak
tersedia tersedia

Pilih
beli

-Nama penerima
-Alamat pengiriman
-Nomor telepon

Pilih metode
pembayaran

1.Transfer bank

2.virtual account

3.Cash on delivery(cod)

 Pembeli mencari barang yang Transfer

akan dia beli
 pembeli mengklik barang yang
Konfirmasi
akan dia beli pesanan End
 kalau produk nya tersedia, bisa
melanjutkan pembelian
 pembeli diminta untuk menginput
data untuk keperluan pengiriman
 pembeli memilih metode
pembayaran yang telah disediakan
 lakukan pembayaran
 konfirmasi pemesanan barang
yang di beli
iv
 BAB I

PENDAHULUAN

1.1 Latar belakang

Perkembangan Online Shop atau toko online melalui media internet sudah
menjamur di Indonesia, bahkan sudah sangat dikenal baik oleh khalayak ramai.
Banyaknya beragam kemudahan dalam berbelanja dan bermacam jenis produk dan
jasa yang ditawarkan, membuat masyarakat Indonesia menjadikan Online Shop
sebagai salah satu “tempat berbelanja” baru selain pusat perbelanjaan. Hal ini
membuat banyak penjual Online Shop yang berlomba – lomba menawarkan
produknya dengan berbagai cara untuk menarik konsumen berbelanja, mereka
memanfaatkan keadaan dimana Online Shopping sedang saat diminati oleh
masyarakat Indonesia sampai saat ini.

Belanja online pertama kali dilakukan di Inggris pada tahun 1979 oleh Michael
Aldrich dari Redifon Computers. Ia menyambungkan televisi berwarna dengan
komputer yang mampu memproses transaksi secara realtime melalui sarana kabel
telepon. Sejak tahun 1980, ia menjual sistem belanja daring yang ia temukan di
berbagai penjuru Inggris.Pada tahun 1980, belanja online secara luas digunakan di
Inggris dan beberapa negara di daratan Eropa seperti Perancis yang menggunakan
fitur belanja online untuk memasarkan Peugeot, Nissan, dan General Motors.Pada
tahun 1992, Charles Stack membuat toko buku daring pertamanya yang bernama
Book Stacks Unlimited yang berkembang menjadi Books.com yang kemudian diikuti
oleh Jeff Bezos dalam membuat situs web Amazon.com dua tahun kemudian. Selain
itu, Pizza Hut juga menggunakan media belanja online untuk memperkenalkan
pembukaan toko pizza online.Pada tahun 1994, Netscape memperkenalkan SSL
encryption of data transferred online karena dianggap hal yang paling penting dari

v
belanja daring adalah media untuk transaksi daringnya yang aman dan bebas dari
pembobolan.Pada tahun 1996, eBay situs belanja daring lahir dan kemudian
berkembang menjadi salah satu situs transaksi daring terbesar hingga saat ini.

Website adalah media yang digunakan untuk menampung data teks, gambar,
suara, dan animasi yang dapat ditampilkan di internet dan dapat diakses oleh
komputer yang terhubung dengan internet secara global.Website merupakan media
informasi berbasis jaringan komputer yang dapat diakses dimana saja dengan biaya
relatif murah. Oleh karena itu, tim penyusun membuat website dengan tema website
jual beli bunga agar dapat mempermudah jual beli serta menyediakan tempat untuk
penjual memperdagangkan barangnya

1.2 Maksud Dan Tujuan

Dengan adanya website ini kami tim penulis bermaksud agar penjual mempunyai
wadah untuk memperdagangkan barang dagangannya. Serta mempermudah transaksi
antar penjual dan pembeli

1.3 Ruang lingkup

Pada perancangan situs website komunitas Reptils Pets penyajian informasi antara
admin dengan pengunjung dan informasi yang disajikan antara lain, menu, tentang
kami, gallery, tim dan contac person.

vi
 BAB II

LANDASAN TEORI

2.1 Pengertian Bahasa Pemrograman Html dan CSS

Pembuatan aplikasi web yang ada pada penelitian ini menggunakan beberapa bahasa
pemrograman. Antara lain yaitu Hypertext Markup Language (HTML), Cascading
Style Sheet (CSS), Hypertext Preprocessor (PHP), dan Javascript. Dimana untuk
setiap bahasa pemrograman memiliki peranan dan fungsinya masing-masing. Berikut
ini adalah pengertian dari beberapa bahasa pemrograman.

1. Hypertext Markup Language (HTML)

HTML adalah suatu bahasa pemrograman yang digunakan untuk pembuatan

halaman website agar dapat menampilkan berbagai informasi baik tulisan maupun
gambar pada sebuah web browser. Saat ini bahasa HTML masih terus
dikembangkan. Hal ini dikarenakan pengguna internet semakin hari semakin
berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar bias
menciptakan halaman web yang lebih berkualitas. Untuk itulah dibentuk organisasi
yang bertanggung jawab mengembangkan bahasa HTML organisasi ini bernama
W3C.

Seiring dengan pesatnya perkembangan zaman HTML pun berkembang dari

masa ke masa. HTML pertama kali diciptakan oleh IBM pada tahun 1980 dengan
dibentuknya suatu program untuk melakukan pemformatan dokumen secara otomatis
dari susunan elemen elemen tag. Berikut ini adalah versi-versi dari perkembangan
HTML tersebut :

a. HTML versi 1.0

paragraph, hypertext, list, cetak tebal dan cetak miring pada teks. Versi ini
mendukung peletakan gambar pada dokumen tanpa memperbolehkan teks
disekelilingnya (wraping).

vii
b. HTML versi 2.0

Pada versi ini penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen.

c. HTML versi 3.0

Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti figure yang
merupakan perkembangan dari image untuk meletakkan gambar dan tabel.
Selain itu, HTML ini juga mendukung adanya rumus-rumus matematika dalam
dokumennya.

d. HTML versi 3.2

HTML versi ini merupakan HTML yang sering digunakan. Di dalamnya

terdapat suatu teknologi untuk meletakkan teks di sekeliling gambar, gambar
sebagai latar belakang, tabel, frame, style sheet dan lain-lain. Selain itu pada
HTML versi ini kita bisa menggunakan script di luar HTML untuk mendukung
kinerja HTML kita tersebut, seperti Javascript, VBScript dan lain-lain.

e. HTML versi 4.0

HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya yaitu
HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti
tabel, image, link, text, meta, imagemaps, form dan lain-lain.

f. HTML versi 4.01

HTML versi 4.01 merupakan revisi dari HTML 4.0. Versi terbaru ini
memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi
terdahulunya. HTML 4.01 ini juga menjadi standarisasi untuk elemen dan
atribut dari script XHTML 1.0.

g. HTML versi 5.0

HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang

merupakan penggabungan antara CSS, HTML itu sendiri dengan JavaScript.

viii
2. Cascading Style Sheet (CSS)

Jayan (2010:2) mengemukakan bahwa CSS merupakan singkatan dari

Cascading Style Sheet. Kegunaannya adalah untuk mengatur tampilan dokumen
HTML, contohnya seperti pengaturan jarak antar baris, teks, warna dan format
border bahkan penampilan file gambar.

Cascading Style Sheets (CSS) adalah suatu bahasa pemrograman yang

digunakan untuk mendukung pembuatan website agar memiliki tampilan yang lebih
menarik dan terstruktur. CSS dikembangkan oleh W3C. organisasi yang
mengembangkan teknologi internet. Tujuannya tak lain untuk mempermudah proses
penataan halaman web.

Sama seperti HTML, CSS juga berkembang dari waktu ke waktu seiring
dengan pesatnya perkembangan zaman. Berikut ini adalah beberapa versi CSS :

a. CSS 1

Versi ini merupakan versi pertama dari CSS yang dikeluarkan secara resmi
oleh W3C pada tahun 1996. Kemampuan CSS 1 diantaranya yaitu property
font, warna dari text, background, dan elemen lain, atribut text seperti word
spacing, letter spacing dan text line, peletakan align atau atau posisi dari text,
gambar, atau elemen lain, dan margin, border, dan padding.

b. CSS 2

CSS level 2 (CSS 2) dikembangkan oleh W3C dan dipublikasikan sebagai

rekomendasi style baru pada bulan Mei 1998. Beberapa kemampuan baru dari
CSS ditambahkan pada versi ini seperti posisi absolute, relative, dan fixed, z-
index, dukungan media types, bidirectional text, dan property font baru seperti
shadow (bayangan).

c. CSS 2.1

CSS 2 version 1 memperbaiki error yang terjadi pada CSS 2, menghilangkan

dukungan dan fitur yang kuarang dan menambahkan extension pada browser.

d. CSS 3

ix
 CSS level 3 sudah dalam pengembangan dari bulan Desember tahun 2005.
CSS 3 membawa banyak fitur menarik yang dapat di-implementasikan pada
halaman web.

2.2 Kekurangan bahasa pemrograman Html;

 Penggunaan HTML murni hanya dapat diimplementasikan untuk halaman
web statis. Untuk fitur yang lebih dinamis, Kanca IT dapat
menggunakan Javascript atau bahasa pemrograman back-end lainnya
 Bahasa pemrograman ini tidak mendukung user untuk
menjalankan logic sehingga semua halaman yang dibuat harus dibuat secara
terpisah walaupun menggunakan elemen yang sama
 Terdapat beberapa fitur baru yang terkadang tidak dapat digunakan
pada browser dengan cepat
 Perilaku browser yang tidak dapat diprediksi membuat proses render tag baru
tekendala

2.3 Pengertian Flowchart

Flowchart merupakan representasi secara grafik dari suatu algoritma atau

prosedur untuk menyelesaikan suatu masalah. (Lasminiasih et al., 2016).
Menurut Wibawanto (2017:20) “Flowchart adalah suatu bagan dengan simbol-
simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan
antara suatu proses (intruksi) dengan proses lainnya dalam suatu program”. Diagram
alur dapat menunjukan secara jelas, arus pengendalian suatu algoritma yakni
bagaimana melaksanakan suatu rangkaian kegiatan secara logis dan sistematis.
 Bentuk Flowchart
Menurut Sulindawati dan Fathoni (2010:8) flowchart terbagi atas lima jenis,
yaitu:
a. Sistem Flowchart
Sistem Flowchart merupakan bagan yang menunjukkan alur kerja atau
apa
yang sedang dikerjakan di dalam sistem secara keseluruhan dan
menjelaskan urutan dari prosedur-prosedur yang ada di dalam sistem.
b. Flowchart Dokumen
Flowchart Paperwork menelusuri alur dari data yang ditulis melalui
sistem.
c. Flowchart Skematik

x
 Flowchart skematik mirip dengan flowchart sistem yang
menggambarkan
suatu sistem atau prosedur. Flowchart skematik ini bukan hanya
menggunakan simbol-simbol flowchart standar, tetapi juga menggunakan
gambar-gambar komputer, peripheral, form-form atau peralatan lain
yang
digunakan dalam sistem.
d. Flowchart Program
Flowchart Program dihasilkan dari flowchart sistem. Flowchart program
merupakan keterangan yang lebih rinci tentang bagaimana setiap langkah
program atau prosedur sesungguhnya dilaksanakan.
e. Flowchart Proses
Flowchart proses merupakan teknik penggambaran rekayasa industrial
yang memecah dan menganalisa langkah-langkah selanjutnya dalam
suatu
prosedur atau sistem.
 Tehnik Pembuatan
a. General Way
Teknik pembuatan flowchart dengan cara ini lazim digunakan dalam
menyusun logika suatu program yang menggunakan proses pengulangan
secara tidak langsung (Non Direct Loop).
b. Interaction Way
Teknik pembuatan flowchart dengan cara ini biasanya dipakai untuk
logika program yang cepat serta bentuk permasalahan yang kompleks.

xi
 BAB III

PERANCANGAN DAN IMPLEMENTASI

3.1 Rancangan Flowchart Website Toko Bunga

12
3.2 Tampilan Website Toko Bunga

A. Tampilan menu utama

B. Tampilan wishlist

13
B. Tampilan halaman wishlist

C. Tampilan halaman contact

14
3.2Source code
A. Index.html untuk halaman website

15
B. Contact.html

C. Wishlist.html
16
D. Style.css
17
18
 BAB IV

PENUTUP

I.1 Kesimpulan

Adapun kesimpulan yang kami dapat setelah merancang website komunitas ReptilePets
yaitu sabagai berikut;

a. Adanya website Vlflower dapat mempermudah pembeli untuk membeli bunga

secara online
b. Menyediakan wadah transasksi antar pemjual dan pembeli
c. Menyediakan wadah bagi penjual untuk memperdagangkan barang dagangannya

I.2 Saran

Kami dari tim penulis sudah memaksimalkan perancangan pembuatan website toko bunga ini
dengan beberapa sumber data yang kami terapkan di program website kami. Tapi masih ada
beberapa hal yang perlu kami kembangkan lagi. Dalam hal tampilan, filtur yang kurang
memadai. Mohon untuk bisa memberikan saran dan kritik yang dapat memnajukan serta
mengembangkan kembali program website ini.

19
 DAFTAR PUSTAKA

Jurnal Teknik Informatika vol 14 no 4, 2019, ISSN : 2301-8364

ISSN : 2461-0690 1 - e Journal BSI

https://repository.bsi.ac.id/index.php/unduh/item/19384/BAB-I-lanjutan.pdf

Universitas Internasional Batam 2.2.16 (Lasminiasih et al., 2016) Ghozi Bahri,

Perancangan dan Implementasi Sistem Manajemen Peminjaman Mobil dengan Metode

Scrum di Universitas Internasional Batam, 2019

20