MAKALAH WEB PROGRAMMING

PENJUALAN KUE ONLINE

Dibuat oleh :

1. Yustinus Zai NIM : 12144194

2. Eryfakumiansyah NIM : 12144168
3. Feniel Manalu NIM : 12144727
4. Rahmadi NIM : 12142361
5. Abdullah Rojai NIM : 12142366
6. Eka Oktawiyadi NIM : 12131745

Kelas 12.5D.12

Program Studi Manajemen Informatika

Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika

Jakarta

2016
KATA PENGANTAR

i
 Dengan mengucap puji syukur kehadirat Tuhan yang Maha Esa, karena atas

rahmat dan hidayah-Nya kami selaku anggota kelompok dapat menyelesaikan tugas

makalah web programming ini untuk memenuhi syarat nilai pengganti UAS mata

kuliah web programming. Dalam makalah yang kami buat ini, kami mendapatkan

judul MAKALAH WEB PROGRAMMING PENJUALAN KUE ONLINE.

Dengan segala kerendahan hati kami sebagai anggota kelompok, menyadari

bahwa penulisan di dalam makalah ini masih jauh dari kesempurnaan dan tidak luput

dari kesalahan. Hal ini mengingat kemampuan dan pengalaman kami serta

pengetahuan yang kami miliki sangat terbatas untuk menghasilkan karya tulis yang

baik. Oleh karena itu saran dan kritik yang membangun dari semua pihak sangat kami

harapkan.

Penulisan makalah ini tidak akan terwujud tanpa bantuan dari beberapa pihak,

yaitu kepada kedua orang tua kami tercinta yang telah mengizinkan kami meluangkan

waktu kami untuk belajar kelompok, Dosen kami Bapak Risang Prisaltomo yang

telah membimbing kami dalam menyelesaikan makalah ini dengan sempurna.

Semoga Tuhan yang Maha Esa senantiasa membalas kebaikan atas bantuannya

kepada kami.

Jakarta, 2016

Penulis

DAFTAR ISI
Halaman Judul
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

ii
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, kue 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 kue di indonesia,

sehingga dengan sendirinya jumlah pembeli kue juga akan semakin

meningkat. Dengan adanya peluang penggunaan teknologi informasi

khususnya internet untuk pelaku bisnis penjualan kue, 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

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.

1
 Shop Cake Online merupakan usaha dagang yang bergerak di bidang

penjualan kue berbagai macam jenis. Dalam proses penjualannya, Shop Cake

Online 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 PENJUALAN

KUE ONLINE.

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 Perancangan web sebagai pengganti Ujian Akhir

Semester (UAS)
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

2
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
c. History pembayaran.
d. Status barang / status pengiriman.
e. History pemesanan

3
 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 Shop Cake Online

4) Memiliki pengalaman lebih lama dlam menggunakan komputer.

b. Pelanggan

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

4
 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

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

5
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

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.

6
 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

2.2.2 Struktur Navigasi

7
 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

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

8
 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)

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.

9
 Sumber: Prihatna (2005:51)

Gambar II.6

Stuktur Non Linear

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.

10
 Sumber: Prihatna (2005:51)

Gamabar II.7

Struktur Navigasi Composite

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)

11
 Gambar II.8

ERD Structure

b. LRS (Logical Record Sturcture)

12
 Gambar II.9

LRS Structure

c. Spesifikasi File

1. Tabel Admin

13
 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

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

14
 Software : Mysql

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

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

15
 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

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
Fungsi : Tempat penyimpanan data modul
Tipe file : File Master
Organisasi File : Index Squencial
Aksi File : Random
Media : Hardisk

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

17
 Software : Mysql

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

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

18
 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

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

19
 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

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.

20
 Gambar II.21

Halaman User

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

21
 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

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.

22
23