BAB II

PEMBAHASAN

2.1. Konsep Dasar Web

Menurut Yuhefizar, web adalah suatu metode untuk menampilkan informasi di
internet, baik berupa teks, gambar, suara maupun video yang interaktif dan
mempunyai kelebihan untuk menghubungkan (link) suatu dokumen lainnya
(hypertext) yang dapat di akses melalui sebuah browser.
2.1.1. Internet
Menurut Kustiyahningsih dan Anamisa (2011:2), Internet adalah sebuah
jaringan komputer dunia, semua berbicara dengan bahasa yang sama.
Banyak keuntungan yang didapat dari jaringan komputer, diantaranya
produktivitas dan efisien. Jaringan komputer menurut area atau lokasi dapat
dibagi menjadi empat yaitu :
1. Local Area Network (LAN), yaitu jaringan komputer dimana komputerkomputer yang terhubung masih dalam satu area atau lokasi.
2. Wide Area Network (WAN), yaitu koneksi antara LAN-LAN yang berbeda
lokasi atau area. Ciri utamanya adalah memiliki jangkauan yang terbatas
karena disesuaikan dengan fungsi harga, adanya problem delay antar
stasiun.

3. Metropolitan Area Network (MAN), yaitu sama seperti LAN hanya saja
lebih luas areanya semisal dalam satu kota/daerah dengan jarak jangkauan
mencapai 50 km.
4. Internet, yaitu kepanjangan dari Interconnection networking atau juga
yang telah menjadi internasional networking merupakan suatu jaringan
yang menghubungkan komputer diseluruh dunia tanpa dibatasi oleh
jumlah unit menjadi satu jaringan yang bisa saling mengakses.

2.1.2. Website
Menurut Akbar (2005:12) Web adalah fasilitas yang dapat menampilkan
data-data yang berupa teks, gambar, bunyi, animasi dan data multimedia lainnya.
Agar kita dapat mengubah isi dari web yang dibuat, kita membutuhkan
program PHP. Script-script PHP tersebut yang berfungsi membuat halaman web
menjadi dinamis. Dinamis artinya pengunjung web dapat memberikan komentar
saran/masukan pada website kita. Website yang kita buat menjadi lebih hidup karena
ada komunikasi antara pengunjung dan kita sebagai webmasternya. Namun tentu saja
hal seperti ini memiliki kelemahan. Semua perubahaan harus dilakukan pada tingkat
aplikasi. Pada perkembangan berikutnya, sejumlah script dan objek dikembangkan
untuk memperluas kemampuan HTML. Pada saat ini, banyak script seperti itu, antara
lain: PHP, ASP, ASP.NET, sedangkan contoh yang berupa objek antara lain adalah
applet (java).

2.1.3. E-commerce
Menurut Sunarto (2009:27) e-commerce merupakan proses pembelian dan
penjualan jasa atau produk antara dua belah pihak melalui internet (Commerce
net) dan sejenis mekanisme bisnis elektronik dengan focus pada transaksi bisnis
berbasis individu dengan menggunakan internet sebagai media pertukaran barang
atau jasa baik antar instansi atau individu dengan instansi (Net-Ready).
E-commerce telah memberikan pengaruh besar terhadap pertumbuham
tata social ekonomi masyarakat. E-commerce telah menjadi bagian penting dari
sector bisnis baik yang bersifat private atau umum. Secara umum, kita dapat
mengklasifikasikan e-commerce menjadi beberapa jenis, yaitu :
1. Bussines To Cunsumer (B2C)
Merupakan transaksi ritel dengan pembeli individual. Selain itu Bussines
To Cunsumer (B2C) juga dapat berarti mekanisme toko online (electronic
shopping mall) yaitu transaksi antara e-merchant dengan e-customer.
2. Bussines To Bussines (B2B)
Trading partners yang sudah diketahui dan umumnya memiliki hubungan
yang cukup lama. Informasi harnya dipertukarkan dengan partners
tersebut sehingga jenis informasi yang dikirimkan dapat disusun sesuai
kebutuhan dan kepercayaan.
3. Consumer To Consumer (C2C)

Merupakan transaksi dimana konsumen menjual produk secara langsung

kepada konsumen lainnya. Selain itu, Seorang individu juga bias
mengiklankan produknya berupa barang atau jasa, pengetahuan, atau
keahliannya disalah satu situng lelang.
4. Consumer To Bussines (C2B)
Merupakan individu yang menjual produk atau jasa kepada organisasi dan
individu yang mencari penjual dan melakukan transaksi.
5. Non-Bussines Electronic Commerce
Meliputi kegiatan non-bisnis seperti kegiatan lembaga pendidikan,
organisasi nirlaba, keagamaan dan lain-lain.
6. Intabussines (Organizaional) Electronic Commerce
Kegiatan ini meliputi semua aktifitas internal organisasi melalui internet
untuk melakukan pertukaran barang, jasa dan informasi serta menjual
produk perusahaan kepada karyawan dan lain-lain.
2.2. Desain Perangkat Lunak
Desain perangkat lunak adalah tugas, tahapan atau aktivitas yang di fokuskan
pada spesifikasi detail dari solusi berbasis komputer (Whitten et al, 2004:58). Desain
perangkat lunak sering juga disebut physical design. Jika tahapan analisis system
menekankan pada masalah bisnis (business rule), maka sebaliknya desain perangkat
lunak fokus pada sisi teknis dan implementasi sebuah perangkat lunak (Whitten et al,
2004:8).

Desain perangkat lunak adalah proses multilangkah yang fokus pada

perancangan web meliputi:
1. Desain antarmuka
2. Desain basis data
3. Desain struktur navigasi

2.2.1. Desain Antarmuka

Antarmuka (Interface) merupakan mekanisme komunikasi antara pengguna
(user) dengan sistem. Antarmuka (Interface) dapat menerima informasi dari
pengguna (user) dan memberikan informasi kepada pengguna (user) untuk membantu
mengarahkan alur penelusuran masalah sampai ditemukan suatu solusi.
a. Desain Halaman Beranda.
Halaman beranda website untuk melakukan pembelian produk yang
ditawarkan, yaitu terdiri dari Beranda, Tentang Kami, Produk, Keranjang
Belanja, dan Daftar.

Gambar II.1
Desain Halaman Beranda
b. Desain Halaman Login Admin
Halaman login admin merupakan halaman di mana admin melakukan input
username dan password saat akan login ke program.

Gambar II.2
Desain Halaman Login Admin
c. Desain Halaman Admin
Berisi tampilan awal saat admin berhasil login ke program, yaitu terdiri dari Data
Barang, Data Pesanan, Laporan, dan Logout.

10

Gambar II.3
Desain Halaman Admin
d. Desain Tampilan Tentang Kami
Tampilan Tentang Kami berisi tentang penjabaran website yang telah dibuat.

Gambar II.4
Desain Tampilan Tentang Kami
e. Desain Tampilan Produk
Tampilan Produk berisi tentang produk produk sepatu apa saja yang
ditawarkan, yaitu meliputi kode sepatu, merk sepatu, nama sepatu, jenis sepatu,
dan harga sepatu.

11

Gambar II.5
Desain Tampilan Produk
f. Desain Tampilan Keranjang Belanja
Tampilan keranjang belanja akan muncul seperti tampilan di bawah ini jika kita
telah login sebagai pelanggan Brosisshoes. Keranjang belanja ini berisi tentang
data barang yang akan pelanggan beli.

Gambar II.6
Desain Tampilan Keranjang Belanja
g. Desain Tampilan Selesai Belanja

12

Tampilan selesai belanja berisi tentang proses transaksi yang telah dilakukan oleh
pelanggan.

Gambar II.7
Desain Tampilan Selesai Belanja
h. Desain Tampilan Daftar
Tampilan daftar berisi tentang akses login untuk pelanggan, jika sudah menjadi
pelanggan Brosisshoes maka bisa langsung login tetapi jika belum menjadi
pelanggan Brosishoes maka harus mendaftar terlebih dahulu dengan cara
mengeklik Daftar.

13

Gambar II.8
Desain Tampilan Produk
i. Desain Tampilan Daftar Pelanggan Baru
Tampilan ini digunakan pada saat pengguna mendaftar sebagai pelanggan di
Brosishoes.

\
Gambar II.9
Desain Daftar Pelanggan Baru
2.2.2. Desain Basis Data

14

Desain basis data adalah proses menghasilkan detail atau rinci model data dari
basis data (database). Tujuan dari desain basis data untuk menentukan data-data yang
dibutuhkan dalam sistem, sehingga informasi yang dihasilkan dapat terpenuhi dengan
baik. Terdapat beberapa alasan mengapa desain basis data perlu untuk dilakukan,
salah satu adalah untuk menghindari pengulangan data (data redundancy).
a. ERD (Entity Relantionship Diagram)

Gambar II.10 Entity Relationship Diagram

b. Relasi Antar Tabel

15

Gambar II.11 Relasi Antar Tabel

c. Desain Database
1. Spesifikasi File Pelanggan
Nama Database
: tokosepatu
Nama Tabel
: user
Tabel II.1 Tabel User
No.
1.
2.
3.

Elemen Data
Id User
Username
Password

2. Tabel Barang
Nama Database
Nama Tabel
No.

Elemen Data

Nama Field
user_id
username
password

Tipe
Integer
Varchar
Varchar

Size
1
30
20

Keteranagan
Primary Key

: tokosepatu
: barang
Tabel I I.2 Tabel Barang
Nama Field

Tipe

Size

1.

Id Barang

id_barang

Integer

2.
3.
4.
5.
6.

Kode Barang
Jenis
Nama
Harga
Gambar

kode
jenis
nama
harga
gambar

Varchar
Varchar
Varchar
Integer
Text

10
25
50
8
-

16

Keteranaga
n
Primary
Key

3. Tabel Kantong
Nama Database
Nama Tabel
No.
1.
2.
3.
4.
5.
6.

Elemen Data
Id Kantong
Id Barang
Jumlah
Tanggal Kantong
Jam Kantong
Username

: tokosepatu
: kantong
Tabel II.3 Tabel Kantong
Nama Field
id_kantong
id_barang
jumlah
tgl_kantong
jam_kantong
username

Tipe
Integer
Integer
Integer
Date
Time
Varchar

Size
5
5
5
20

Keteranagan
Primary Key
Foreign Key

Tipe
Varchar
Varchar
Varchar

Size
100
100
100

Keteranagan
Primary Key
-

Text
Varchar
Varchar

20
50

Size
5
10
-

Keteranagan
Primary Key
Foreign Key
-

4. Tabel Pelanggan
Nama Database : tokosepatu
Nama Tabel
: pelanggan

Tabel II.4 Tabel Pelanggan

No.
1.
2.
3.
4.
5.
6.

Elemen Data
Username
Password
Nama Pelanggan
Alamat
Telepon
Email

Nama Field
username
password
nama_pelangga
n
alamat
telepon
email

5. Tabel Pemesanan
Nama Database : tokosepatu
Nama Tabel
: pemesanan

Tabel II.5 Tabel Pemesanan

No.
1.
2.
3.

Elemen Data
Id Pesan
No Pesan
Tanggal Pesan

Nama Field
id_pesan
no_pesan
tgl_pesan
17

Tipe
Integer
Varchar
Date

4.
5.
6.

Username
Jam
Status Pesan

username
jam_pesan
status_pesan

Varchar
Time
Varchar

50
100

6. Tabel Detail Pemesanan

Nama Database : tokosepatu
Nama Tabel
: pemesanan_detail

Tabel II.6 Tabel Detail Pemesanan

No.
1.
2.
3.

Elemen Data
Nomor Pesan
Id Pesan
Jumlah

Nama Field
no_pesan
id_barang
jumlah

Tipe
Varchar
Integer
Integer

Size
10
5
5

Keteranagan
Primary Key
Foreign Key

Size
5
10
-

Keteranagan
Primary Key
Foreign Key

7. Tabel Pengiriman
Nama Database : tokosepatu
Nama Tabel
: pengiriman

Tabel II.7 Tabel Pengiriman

No.
1.
2.
3.
4.

Elemen Data
Id Kirim
Nomor Pesan
Tanggal Pesan
Jam Kirim

Nama Field
id_kirim
no_pesan
tgl_kirim
jam_kirim

Tipe
Integer
Varchar
Date
Time

2.2.3. Desain Struktur Navigasi

Menurut Binanto (2010:269) Struktur Navigasi adalah susunan menu atau
hirarki dari suatu situs yang menggambarkan isi dari setiap halaman dan link atau
navigasi tiap halaman pada suatu situs web. Struktur navigasi suatu situs web sangat
di pengaruhi oleh tujuan dari situs web yang akan dibuat.

18

Struktur navigasi dapat digolongkan menurut kebutuhan akan objek,

kemudahan pemakaian, keinteraktifitasannya, dan kemudahan membuatnya yang
berpengaruh terhadap waktu pembuatan suatu situs web. Bentuk dasar dari struktur
navigasi adalah sebagai berikut :
1. Linier
Linier (satu alur) merupakan struktur yang hanya mempunyai satu rangkaian
cerita yang berurut. Dengan kata lain struktur ini hanya dapat menampilkan satu demi
satu tampilan berurut menurut urutannya. Tampilan yang dapat di tampilkan pada
struktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya dan
tidak dapat menampilkan dua halaman sebelumnya atau dua halaman sesudahnya.
Salah satu yang terpenting dari struktur ini adalah tidak diperkenankan terjadinya
percabangan.

Sumber : Binanto (2010:269)

Gambar II.12 Struktur Navigasi Linier
2. Hierarchical (Hirarki)
Stuktur Hierarchi (bercabang) ini percabangan untuk menampilkan data
berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai
master page (halaman utama kesatu), halaman utama ini akan mempunyai halaman

19

percabangan yang dikatakan slave page (halaman utama kedua), dan seterusnya.
Yang terpenting dari struktur penjejakan ini tidaak diperkenankan adanya tampilan
secara linier.

Sumber : Binanto (2010:269)

Gambar II.13 Struktur Navigasi Hirarki
3. Non Linier (Tidak Berurut)
Struktur penjejakan Non Linier (tidak berurut) merupakan pengembangan dari
struktur penjejakan Linier. Pada struktur ini diperkenankan membuat penjejakan
bercabang. Pemakai bebas menelusuri website tanpa dibatasi oleh suatu rute
dimana kontrol navigasi dapat mengakses ke semua halaman manapun.
Percabangan yang dibuat pada struktur Non Linier ini berbeda dengan
percabangan pada struktur Hierarchi, karena pada percabangan Non Linier ini
walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan
yang sama tidak ada master Page dan Slave Page.

20

Sumber : Binanto (2010:270)

Gambar II.14 Struktur Navigasi Non Linier
4. Composite (Campuran)
Composite (campuran) atau disebut juga struktur penjejakan bebas merupakan
gabungan dari ketiga struktur sebelumnya yaitu Linear, Non Linier dan Hierarchi.
Jika suatu tampilan membutuhkan percabangan, maka dapat dibuat percabangan,
dan bila dalam percabangan tersebut terdapat suatu tampilan yang sama
kedudukannya maka dapat dibuat struktur Linier dalam percabangan tersebut.
Setiap struktur peta penjajakan seperti yang baru di bahas mempunya fungsi dan
tujuan tersendiri, tidak ada yang lebih baik atau lebih buruk.
Penggunaan peta penjajakan bergantung kepada kebutuhan dan tujuan dari
web yang hendak dibuat. Semakin kompleks peta penjejakan yang digunakan,
maka semakin sulit pula pembuatan page dari peta penjajakan tersebut

21

Sumber : Binanto (2010:270)

Gambar II.15 Struktur Navigasi Campuran
Desain Struktur Navigasi yang digunakan dalam pembuatan website ecommerce ini adalah Struktur Navigasi Campuran, yaitu sebagai berikut :

22

Gambar II.16 Struktur Navigasi Campuran pada Website

Brosishoes

2.3. Rancangan Implementasi

Tahap implementasi sistem adalah tahap instalasi sistem supaya siap
dioperasikan. Ini adalah langkah awal untuk menentukan jangka waktu yang

23

diperlukan dalam tahap implementasi, dalam menjalankan implementasi perlu

dilakukan beberapa hal yaitu, penerapkan rencana implementasi, melakukan kegiatan
implementasi, dan tindak lanjut implementasi.
Supaya kegiatan implementasi dapat beroperasi sesuai dengan yang diharapkan
maka perlu jadwal rencana kegiatan implementasi. Adapun jadwal kegiatan
implementasi adalah sebagai berikut :
2.3.1. Implementasi Basis Data
Implementasi basis data meliputi penentuan tipe data pada masing-masing
field sekaligus pembuatan database tersebut.
Mysql adalah sebuah database yang mampu berinteraksi dengan apa saja,
untuk dapat menghubungkan database dengan program aplikasi php diperlukan
beberapa

fungsi

yang

sudah

ada

di

mysql,

seperti

mysql_connect(),

mysql_select_db(), dan sebagainya.

Fungsi mysql_connect, fungsi ini mempunyai atribut lengkap yaitu
mysql_connect ([nama_database],[variabel_koneksi]);
1. [nama_database]: tokosepatu
2. [variabel_koneksi]: "localhost","root",""

2.3.2. Implementasi Program

Pemrograman merupakan tahap implementasi dimana dilakukan pengkodean
berdasarkan hasil perancangan perangkat lunak yang telah dibuat sehingga berbentuk

24

system baru yang sedemikian rupa yang telah direncanakan, pengkodean ini
dilakukan dengan menggunakan bahasa pemrograman PHP, sedangkan database yang
digunakan adalah MySql. Berikut ini adalah hasil implementasi program dalam
bentuk form atau halaman sesuai dengan yang telah direncanakan :
a. Tampilan Halaman Utama
Index adalah halaman yang pertama kali muncul waktu website dibuka. Didalam
halaman index terdapat shortcut-shortcut yang berfungsi untuk sambungan menuju
halaman lainnya.

Gambar II.17 Tampilan Halaman Utama

b. Tampilan Halaman Tentang Kami

Halaman Tentang Kami berisi tentang apa itu Brosishoes.

25

Gambar II.18 Tampilan Halaman Tentang Kami

c. Tampilan Menu Produk
Tampilan Produk berisi tentang produk produk sepatu apa saja yang
ditawarkan, yaitu meliputi kode sepatu, merk sepatu, nama sepatu, jenis sepatu, dan
harga sepatu.

Gambar II.19 Tampilan Menu Produk

d. Tampilan Produk pada Halaman Pelanggan
Berisi tentang tampilan awal atau utama saat pelanggan berhasil login sebagai

26

pelanggan.

Gambar II.20 Tampilan Produk pada Halaman Pelanggan

e. Tampilan Keranjang Belanja

Tampilan keranjang belanja akan muncul seperti tampilan di bawah ini jika kita
telah login sebagai pelanggan Brosisshoes. Keranjang belanja ini berisi tentang data
barang yang akan pelanggan beli.

27

Gambar II.21 Tampilan Keranjang Belanja

f. Tampilan Selesai Belanja

Setelah pelanggan mengeklik Selesai Belanja di halaman Keranjang Belanja maka
akan muncul halaman seperti di bawah ini yaitu berisi data pelanggan.

Gambar II.22 Tampilan Selesai Belanja

28

g. Tampilan Struk Transaksi

Struk Belanja berisi tentang daftar barang dan harga yang telah dipilih oleh
pelanggan.

Gambar II.23 Tampilan Struk Transaksi

h. Tampilan Menu Daftar

Tampilan daftar berisi tentang akses login untuk pelanggan, jika sudah menjadi
pelanggan Brosisshoes maka bisa langsung login tetapi jika belum menjadi pelanggan
Brosishoes maka harus mendaftar terlebih dahulu dengan cara mengeklik Daftar.

29

Gambar II.24 Tampilan Menu Daftar

i. Tampilan Daftar Pelanggan Baru

Tampilan ini digunakan pada saat pengguna mendaftar sebagai pelanggan di
Brosishoes.

Gambar II.25 Tampilan Daftar Pelanggan Baru

30

j. Tampilan Halaman Login Admin

Halaman login admin merupakan halaman di mana admin melakukan input
username dan password saat akan login ke program.

Gambar II.26 Tampilan Login Admin

k. Tampilan Beranda Admin

Berisi tampilan awal saat admin berhasil login ke program, yaitu terdiri dari Data
Barang, Data Pesanan, Laporan, dan Logout.

Gambar II.27 Tampilan Halaman Utama Admin

31

l. Tampilan Data Barang

Menampilkan data barang yang telah diinput oleh admin.

Gambar II.28 Tampilan Data Barang

m. Tampilan Tambah Data Barang
Tampilan berisi tentang kegiatan admin untuk menambah atau menghapus data
barang.

Gambar II.29 Tampilan Data Barang

32

n. Tampilan Data Pesanan

Berisi mengenai data pesanan yang telah dipesan oleh para pelanggan.

Gambar II.30 Tampilan Data Pesanan

o. Tampilan Laporan Data Pengiriman

Berisi mengenai data laporan pengiriman barang kepada para pelanggan.

Gambar II.31 Tampilan Laporan Data Pengiriman

33

34