MAKALAH WEB PROGRAMING

“TOKO BAJU LAVIAKARNOVA”

Penyusun:

 TRI RETNO AMALIA 12184072

 JAVA LOLITA 12183602
 NABELA MULIATAMA 12184310
 SOFIALARAS S.A 12184165
 SEKAR DYAH UTAMI 12184311
 ANNISA RIDHA RIZKI 12184099
Jurusan Sistem Informasi
Universitas Bina Sarana Informatika Margonda
2018
KATA PENGANTAR

i
 Puji syukur kami panjatkan kehadirat Allah SWT Tuhan Yang Maha Esa
karena berkat limpahan Rahmat dan Karunia-Nya sehingga kami dapat menyusun
makalah web programing ini dengan tepat waktu. Tidak lupa juga kami ucapkan
terima kasih kepada dosen mata kuliah “Web Programing” kami, Bapak Rahmat yang
telah membimbing kami dalam mata kuliah yang bersangkutan. Dalam tugas ini kami
dapat menyelesaikan makalah dengan judul Web Statis “Toko Baju LaviaKarnova”.
Tugas ini dibuat dalam rangka memenuhi tugas Ujian Tengah Semester 2 mata kuliah
Web Programing. Semoga makalah yang kami buat ini dapat bermanfaat khususnya
bagi kami dan pada umumnya bagi semua pihak yang membacanya. Kami menyadari
bahwa makalah ini masih sangat jauh dari kata sempurna, untuk itu kami mohon maaf
bila ada kesalahan penulisan ataupun penjabarannya dalam pembuatan makalah ini.
Kami juga meminta kritik dan saran yang membangun agar dapat dibuatnya makalah
yang lebih baik. Semoga makalah ini bermanfaat bagi para pembaca dan dapat
menambah cakrawala pengetahuan kita.

Depok , Mei 2019

Penulis

DAFTAR ISI

Halaman Judul

ii
Kata Pengantar ............................................................................................. ii

Daftar Isi ......................................................................................................... iii

Bab I PENDAHULUAN ................................................................................. 1

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

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

1.3. Metode Penelitian ............................................................................. 3

1.4. Ruang Lingkup ................................................................................. 3

Bab II PEMBAHASAN ................................................................................... 5

2.1. Analisis kebutuhan .......................................................................... 5

2.2. Perancangan Perangkat Lunak ........................................................... 7

2.2.1. Rancangan Antar Muka .......................................................... 7

2.2.2. Rancangan Struktur Navigasi ................................................. 10

2.2.3. Rancangan Basis Data (ERD, LRS, Spesifikasi File) .............. 14

2.3. Implementasi dan Pengujian ............................................................. 25

Bab III PENUTUP ............................................................................................. 29

3.1. Kesimpulan ....................................................................................... 29

3.2. Saran .................................................................................................. 29

iii
 BAB I

PENDAHULUAN

1.1. Latar Belakang

Semakin berkembangnya selera masyarakat sebagai salah satu bagian

dari kebutuhan, pakaian juga kini menjadi trend fashion terbaru. Umumnya

cara pemasaran dan penjualan produknya masih secara konvensional.

Penjualan yang dilakukan hanya sebatas pada toko yang mereka miliki,

dampak dari penjualan seperti ini adalah produk yang dijual terbatas pada

pelanggan tertentu saja. Selain itu kurang tersedianya waktu pelanggan untuk

datang melihat produk baru yang di sediakan.

Disamping itu saat ini juga sudah banyak peminat pakaian di

indonesia, sehingga dengan sendirinya jumlah pembeli pakaian juga akan

semakin meningkat. Dengan adanya peluang penggunaan teknologi informasi

khususnya internet untuk pelaku bisnis penjualan pakaian, maka diperlukan

sebuah dukungan sistem atau aplikasi yang nantinya dapat mengatasi

permasalahan yang ada, sehingga berdasarkan hal tersebut penulis tertarik

untuk mengusulkan sebuah sistem berbasis web yang nantinya dapat

diimplementasikan oleh pembisnis kue.

Perkembangan e-commerce pada saat ini juga dapat menjadi sesuatu

yang menjanjikan. Hal ini dapat dilihat dari faktor kian bertambahnya

pengguna internet. Electronic commerce (E-Commerce) merupakan salah satu

1
 metode bisnis melalui internet. Dengan menggunakan metode ini para

pengunjung atau calon pembeli dapat mengetahui info mengenai produk

secara detail kapanpun dan dimanapun. Baik itu seperti harga, model, warna,

ukuran, dan sebagainya. Selain itu, transaksi tetap dapat berjalan tanpa harus

mendatangi lokasi penjualan.

Online shop fasion merupakan usaha dagang yang bergerak di bidang

penjualan pakaian berbagai macam jenis. Dalam proses penjualannya, Online

shop fasion sudah menerapkan sistem online keseluruhan dan sudah tidak

memakai sistem offline seperti beli di toko atau bayar ditempat.

Pengembangan aplikasi berbasis web ini akan penulis sajikan dalam bentuk

makalah dengan judul “MAKALAH WEB PROGRAMMING TOKO BAJU

LAVIAKARNOVA “

1.2. Maksud dan Tujuan

Maksud dari pembuatan makalah ini adalah untuk adalah

mengembangkan sistem pemasaran di era global dengan menggunakan

website sebagai salah satu cara memperluas dan mempermudah konsumen

dalam proses penjualan dan pemasaran serta dapat mengontrol pengolaan

transaksi penjualan.

Tujuan dari pembuatan makalah ini adalah untuk memenuhi salah satu

kelulusan mata kuliah Web Programing sebagai pengganti Ujian Tengah

Semester (UTS).

2
1.3. Metode Penelitian

Metode yang kami gunakan adalah :

1. Studi Pustaka

Pencarian informasi metodologi studi pustaka ini dengan

membaca dari website-website yang membahas tentang perancangan web

2. Studi Literatur

Metode ini bertujuan untuk mencari literature yang berisi teori-teori

yang berkaitan dengan masalah yang akan dibahas. Dalam hal ini penulis

melakukan pencarian serta pembelajaran dari berbagai macam literatur dan

dokumen yang berkaitan dengan website e-commerce.

1.4. Ruang Lingkup

Berdasarkan uraian diaatas, maka ruang lingkup penulis di batasi pada :

1. Pengelolaan transaksi penjualan

a. Katalog produk

b. New produk

2. Pemesanan.

a. Cara pemesanan

b. Proses Pengiriman

3. Pembayaran.

a. Transfer melalui bank

b. Konfirmasi pembayaran

3
c. History pembayaran.

d. Status barang / status pengiriman.

e. History pemesanan

4
 BAB II

PEMBAHASAN

2.1. Analisis Kebutuhan

Analisa kebutuhan adalah mengidentifikasi kebutuhan yang diperoleh

berdasarkan kebutuhan pengguna dan kebutuhan sistem.

1. Analisis Kebutuhan Pengguna

Pengguna yang akan menggunakan web ini tediri dari tiga bagian

yaitu admin, pelanggan dan pengunjung, dengan asumsi pengguna yang

sudah terbiasa menggunakan web, sebagai berikut :

a. Admin

Admin adalah bagian pengguna sistem yang memiliki hak akses

lebih dibandingkan dengan pelanggan dan pengunjung, dengan

karakteristik sebagai berikut :

1) Mempunyai kemampuan dasar di bidang komputer.

2) Pemahaman yang cukup untuk mengelola dalam web serta

memiliki pengetahuan tentang internet.

3) Memahami pelayanan transaksi pembelian secara langsung yang

terjadi di Online Shop Fasion

4) Memiliki pengalaman lebih lama dalam menggunakan komputer.

b. Pelanggan

Pelanggan adalah bagian pengguna sistem yang memiliki batasan

hak akses, dengan karakteristik sebagai berikut :

5
 1) Mempunyai kemampuan dasar dibidang komputer.

2) Mampu mengoperasikan komputer dan dapat melakukan

browsing di internet.

c. Pengunjung

Pengunjung adalah bagian pengguna sistem yang memiliki

batasan hak akses, dengan karakteristik sebagai berikut :

1) Mempunyai kemampuan dasar dibidang komputer.

2) Mampu mengoperasikan komputer dan dapat melakukan

browsing di internet.

Berdasarkan karakteristik data diatas, pengguna yang ada di setiap

bagian pada umumnya sudah bisa mengoperasikan komputer, dapat dilihat bahwa

setiap pengguna minimal dapat melakukan browsing di internet dan dapat

mengerti tentang e-commerce penjualan kue, dilihat dari latar belakang

pendidikan dan pengalaman yang lebih lama dalam menggunakan komputer.

2. Analisis Kebutuhan Sistem

Perangkat lunak (Software) yag kami pakai dalam pembuatan web ini adalah

sebagai berikut :

a. Komputer Tersedia

Sistem Operasi : Windows 10

Software : XAMPP-Win32Versi 1.8.1, Adobe Dreamweaver CS6,

Mozila Forefox

6
 b. Komputer yang disarankan

Sistem Operasi : Windows XP atau Windows 7

Software : xampp-win32 versi 1.7.7, Adobe Dreamweaver CS3,

Google Chrome, Adobe Photoshop CS3

2.2 Perancangan Perangkat Lunak

2.2.1 Rancangan Antar Muka

Menjelaskan rancangan antar muka (interface) yang terdapat pada web e-

commerce pada Shop Cake Online.

a. Rancangan Antarmuka Login Admin

Username :
Gambar
Password :

Login

Gambar II.1.

Rancangan Antarmuka Login Admin

7
b. Rancangan Antarmuka Halaman Admin

Administrator

Menu Main Content

Gambar II. 2

Rancangan antarmuka Halaman Admin

a. Berisikan Menu pada halaman admin setelah melakukan login.

b. Main Content, disinilah nantinya semua halaman yang ada pada

interface admin ditampilkan berdasarkan menu yang dipilih.

8
 c. Rancangan Antarmuka Halaman User

Beranda
LOGO Tentang Kami Produk Cara Pemesanan Kontak

Logo SHOP CAKE ONLINE

Slider

Produk

Gambar II.2

Rancangan Antarmuka Halaman User

Footer
Search

Gambar II.3

Rancangan Antar muka halaman user

9
2.2.2 Struktur Navigasi

Menurut Prihatna (2005:51) “Struktur Navigasi adalah susunan menu

atau hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan

halaman dan link atau navigasi tiap halaman pada situs web”.

Struktur navigasi dapat di golongkan menurut kebutuhan objek,

kemudahan pemakaian dan kemudahan membuatnyayang berpengaruh

terhadap waktu pembuatan situs web. Bentuk dasar dari struktur navigasi

adalah sebagai berikut:

1.Linier (satu alur)

Linear (satu alur) merupakan struktur yang hanya mempunyai satu

rangkaian serita yang berurut. Dengan kata lain struktur ini hanya

menampilkan satu demi satu tampilan layar secara berurut menurut

urutannya. Salah satu terpenting dari struktur ini adalah tidak di

perkenankan terjadinya percabangan.

Sumber : Prihatna (2005:51)

Gambar II.4

Stuktur Navigasi Linier

10
2.Hierarchical (hirarki)

Struktur Hierarchi (bercabang)ini percabangan untuk

menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu

pertama akan disebut sebagai Master Page (halaman utama kesatu),

halaman pertama ini akan mempunyai halaman percabangan yang di

sebut Slave Page (halaman pendukung). Jika salah satu halaman

pendukung dipilih atau diaktifkan , maka tampilan tersebut akan bernama

Master Page (halaman utama kedua), dan seterusnya. Yang terpenting

dari struktur penjejakan ini tidak diperkenankan tampilan secara linier.

Sumber : Prihatna (2005:51)

Gambar II.5

Struktur Navigasi Hierarchical (Hirarki)

11
3. Non Liner (Tidak berurut)

Struktur penjejakan Non Liner (tidak berurut) merupakan

pegembangan dari strukur penjejakan Liner. Pada struktur ini

diperkenankan membuat penjejakan bercabang. Pemakai bebas

menelusuri website tanpa di batasi oleh suatu rute dimana control

navigasi dapat mengakses ke semua halaman manapun. Percabangan yang

di buat pada struktur Non Linear ini berbeda dengan percabangan yang di

buat pada struktur Hirarchi. Karana pada percabangan Non Linear ini

walaupun dapat percabangan, tetapi tiap-tiap tampilan mempunyai

kedudukan yang sama tidak ada Master Page dan Slave Page.

Sumber: Prihatna (2005:51)

Gambar II.6

Stuktur Non Linear

12
4. Composite (campuran)

Composite (campuran) atau disebut juga struktur penjejakan

bebas merupakan gabungan dari ketiga struktur sebelumnya yaitu

Linear,Non Linear,dan Hirarchi. Jika suatu tampilam membutuhkan

percabangan, maka dapat dibuat percabangan, dan bila dalam

percabangan tersebut terdapat suatu tampilan yang sama kedudukannya

maka dapaat dibuat struktur Linear dalam percabangan tersebut.

Pengguna peta penjejakan bergantung kepada kebutuhan dan

tujuan dari web yang hendak di buat. Semakin kompleks peta penjejakan

yang digunakan, maka semakin sulit pembuatan page dari peta penjejakan

tersebut.

Sumber: Prihatna (2005:51)

Gamabar II.7

Struktur Navigasi Composite

13
2.2.3 Rancangan Basis Data (ERD, LRS, Spesifikasi File)

a. Entity Relationship Diagram

Perancangan basis data menghasilkan pemetaan tabel-tabel yang

digambarkan dengan Entity Relationship Diagram (ERD)

Gambar II.8

ERD Structure

14
b. LRS (Logical Record Sturcture)

Gambar II.9

LRS Structure
15
c. Spesifikasi File

1. Tabel Admin

No Field Jenis Panjang Keterangan Ekstra

1 username Varchar 50 Primary Key Auto Increment
2 Password Varchar 50
3 nama_lengkap Varchar 100
4 email Varchar 100
5 no_telp Varchar 20
6 level Varchar 20
7 blokir Enum (Y,N)

Spesifikasi Tabel Admin

Nama file : Admin

Nama database : shopcake.sql

Akronim : Admin

Fungsi : Tempat penyimpanan data admin

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 150

Kunci Field : username

Software : Mysql

16
2. Table Hubungin

No Field Jenis Panjang Keterangan Ekstra

1 id_hubungin Int 5 Primary Key Auto Increment
2 id_kustomer Int 5
3 subjek Varchar 100
4 pesan Text
5 tanggal Date

Spesifikasi Tabel Hubungin

Nama file : Hubungin

Nama database : shopcake.sql

Akronim : Hubungin

Fungsi : Tempat penyimpanan data hubungin

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 130

Kunci Field : id_hubungin

Software : Mysql

17
3. Tabel Kategori

No Field Jenis Panjang Keterangan Ekstra

1 id_kategori Int 5 Primary Key Auto Increment
2 nama_kategori Varchar 100

Spesifikasi Tabel Kategori

Nama file : Kategori

Nama database : shopcake.sql

Akronim : Kategori

Fungsi : Tempat penyimpanan data kategori

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 100

Kunci Fild : id_kategori

Software : Mysql

4. Tabel Kota

No Field Jenis Panjang Keterangan Ekstra

1 id_kota Int 3 Primary Key Auto Increment
2 nama_kota Varchar 100
3 ongkos_kirim Int 10

18
 Spesifikasi Tabel kota

Nama file : Kota

Nama database : shopcake.sql

Akronim : Kota

Fungsi : Tempat penyimpanan data kota

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 110

Kunci Fild : id_kota

Software : Mysql

5. Tabel Kustomer

No Field Jenis Panjang Keterangan Ekstra

1 id_kustomer Int 5 Primary Key Auto Increment
2 password Varchar 50
3 nama_lengkap Varchar 100
4 alamat Text
5 email Varchar 100
6 telepon Varchar 20
7 id_kota Int 3

19
 Spesifikasi Tabel Kustumer

Nama file : Kustomer

Nama database : shopcake.sql

Akronim : Kustomer

Fungsi : Tempat penyimpanan data kustomer

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 150

Kunci Fild : id_kustomer

Software : Mysql

6. Tabel Modul

No Field Jenis Panjang Keterangan Ekstra

1 id_modul Int 5 Primary Key Auto Increment
2 static_content Text 50
3 gambar Varchar 100

Spesifikasi Tabel Modul

Nama file : Modul

Nama database : shopcake.sql

Akronim : Modul

20
 Fungsi : Tempat penyimpanan data modul

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 110

Kunci Fild : id_modul

Software : Mysql

7. Tabel Orders

No Field Jenis Panjang Keterangan Ekstra

1 id_orders Int 5 Primary Key Auto Increment
2 status_orders Varchar 50
3 tgl_orders Date
4 jam_orders Time
5 id_kustomer Int 5

Spesifikasi Tabel Orders

Nama file : Orders

Nama database : shopcake.sql

Akronim : Orders

Fungsi : Tempat penyimpanan data orders

Tipe file : File Master

Organisasi File : Index Squencial

21
 Aksi File : Random

Media : Hardisk

Panjang Record : 130

Kunci Fild : id_orders

Software : Mysql

8. Tabel Orders Detail

No Field Jenis Panjang Keterangan Ekstra

1 id_orders Int 5 Primary Key
2 id_produk Int 5 Primary Key
3 jumlah Int 5

Spesifikasi Tabel Orders Detail

Nama file : Orders_detail

Nama database : shopcake.sql

Akronim : Orders_detail

Fungsi : Tempat penyimpanan data orders_detail

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 110

Kunci Fild : id_orders, id_produk

Software : Mysql

22
9. Tabel Orders Temp

No Field Jenis Panjang Keterangan Ekstra

1 id_orders_temp Int 5 Primary Key Auto Increment
2 id_produk Int 5 Primary Key
3 id_session Varchar 100
4 Jumlah Int
5 tgl_orders_temp Date
6 jam_orders_temp Time
7 stok_temp Int 5

Spesifikasi Tabel Orders Temp

Nama file : Orders_temp

Nama database : shopcake.sql

Akronim : Orders_temp

Fungsi : Tempat penyimpanan data orders_temp

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 150

Kunci Fild : id_orders_temp, id_produk

Software : Mysql

23
10. Tabel Produk

No Field Jenis Panjang Keterangan Ekstra

1 id_produk Int 5 Primary Key Auto Increment
2 id_kategori Int 5
3 nama_produk Varchar 100
4 Deskripsi Text
5 harga Int 20
6 stok Int 5
7 berat Decimal 5,2
8 tgl_masuk Date
9 gambar Varchar 100
10 Dibeli Int 5
11 Diskon Int 5
Spesifikasi Tabel Orders Temp

Nama file : Produk

Nama database : shopcake.sql

Akronim : Produk

Fungsi : Tempat penyimpanan data Produk

Tipe file : File Master

Organisasi File : Index Squencial

Aksi File : Random

Media : Hardisk

Panjang Record : 280

Kunci Fild : id_produk

Software : Mysql

24
2.3. Implementasi dan Pengujian

Implementasi

a. Implementasi Rancangan Antar Muka

b. Implementasi rancangan antar muka web E-Commerce pada Shop Cake

Online berdasarkan hasil rancangan antar muka.

1. Halaman Login Admin

Administrator harus melakukan login terlebih dahulu untuk dapat

menggunakan modul-modul yang tersedia. Jika login berhasil, maka

menu-menu yang sesuai dengan kategori user tersebut akan

ditampilkan.

Gambar II.10

Halaman Login Admin

25
2. Halaman Admin

Halaman admin berisi modul-modul yang digunakan oleh admin untuk

mengelola konten website, halaman ini akan tampil setelah admin

melakukan proses login pada halaman login admin.

Gambar II.11

Halaman Admin

26
3. Halaman User

Halaman user berisi tentang semua informasi mengenai perusahaan

termaksud juga informasi tentang produk yang dijual. Proses pemesanan

produk dilakukan pada halaman user.

Gambar II.21

Halaman User

27
Pengujian

Pengujian terhadap program yang dibuat menggunakan blackbox

testing yang fokus terhadap proses masukan dan keluaran program.

a. Pengujian terhadap form login

Tabel hasil pengujian blackbox testing halam login

Hasil yang Hasil

No Skenario Pengujian Text case Kesimpulan
diharapkan pengujian
1. Username dan Username : Sistem akan Sesuai Valid
password tidak diisi (kosong) menolak harapan
kemudian klik tombol Password : akses user
login (kosong)
2. Mengetikkan Username : Sistem akan Sesuai Valid
Username dan (Admin) menolak harapan
password tidak diisi Password : akses user
atau kosong (kosong)
kemudian klik tombol
login
3. Username tidak diisi Username : Sistem akan Sesuai Valid
(kosong) dan (Kosong) menolak harapan
password diisi Password : akses user
kemudian klik tombol (Admin)
login
4. Mengetikkan salah Username : Sistem akan Sesuai Valid
satu kondisi salah (Admin) menolak harapan
pada username atau Password : akses user
password kemudian (password)
klik tombol login -salah
5. Username : Sistem Sesuai Valid
(Admin) menerima harapan
Mengetikkan
-benar akses login
username dan
Password : dan
password dengan data
(Admin) kemudian
yang benar kemudian
-benar langsung
klik tombol login
menampilkan
menu utama

28
 BAB III

PENUTUP

3.1. Kesimpulan

Dari pembahasan makalah yang telah kami susun, penulis mencoba

menyimpulkan pokok pembahasan yang ada, adapun kesimpulannya adalah

sebagai berikut:

1. Web E-Commerce Shop Cake Online dibuat dengan menggunakan

Software xampp win-32 Versi 1.8.1 dan Dreamweaver CS6

2. Setelah dilakukan pengujian dan testing program, sistem yang terdapat

didalam Web E-Commerce Shop Cake Online dapat berjalan dengan baik

tanpa terjadi error.

3. Dengan menggunakan sarana sistem informasi online, bisnis dapat

berjalan dengan mudah dan perkembangan bisnis dapat berkembang lebih

cepat.

29