MAKALAH PERANCANCANGAN WEB Desa Lampiran Iv

BAB I
PENDAHULUAN
1.1. Latar Belakang
Dinamika social masyarakat di dunia saat ini telah mengalami perubahan
pesat. Hal ini ditandai oleh perkembangan yang spektakuler di bidang teknologi
informasi dan teknologi komunikasi. Hal ini yang paling menonjol dalam
perkembangan teknologi informasi dan teknologi komunikasi adalah hadirnya
suatu teknologi baru berupa jaringan computer yang terhubung ke seluruh dunia,
yaitu internet.
Di masa lalu, aktivitas dunia perdagangan (commerce) dilakukan melalui
penawaran langsung tapi pertumbuhan drastis dari internet telah mengubah
paradigma tersebut. Melalui internet, pedagang dapat menawarkan produknya
secara online kepada pembeli tanpa perlu bertatap muka.
E-commerce berdasarkan sifat transaksinya diklasifikasikan menjadi
empat macam. Salah satunya adalah business to consumer. Business to consumer
merupakan transaksi eceran dengan pembeli perorangan (Suyanto, 2003).
Berdasarkan latar belakang di atas, penulis merancang sebuah toko online
berbasis web. Hal ini pula yang melatar belakangi judul kami yaitu
“PERANCANGAN WEB TOKO ONLINE HIJRAH SHOP”.
1.2. Maksud dan Tujuan

1

Maksud dari penulisan makalah ini adalah :
1)

Menghasilkan perancangan web yang mampu memperkenalkan dan
menjual secara online.

2)

Sebagai sarana pembelajaran bagi kami maupun pembaca.
Dan adapun tujuan dari penulisan makalah ini adalah :
Untuk memenuhi syarat sebagai penilaian UAS pada mata kuliah
Perancangan Web di semester V (lima) pada Program Diploma Tiga (DIII)
di Akademi Manajemen Informatika dan komputer Bina sarana
Informatika (AMIK BSI) Pd. Aren , Ciledug (G3) jurusan manajemen
Informatika.

1.3. Ruang Lingkup
Agar penulisan makalah ini tidak menyimpang dari maksud dan tujuan

maka pembahasan dibatasi pada :
1)

Perangkat lunak yang dibangun merupakan aplikasi business to consumer
e-commerce yang sederhana.

2)

Pada perancangan web ini, simulasi system online dilakukan pada
localhost.

3)

perangkat lunak yang dibangun dapat menangani transaksi pembelian dan
pemesanan produk.

4)

Sistem pembayaran produk dilakukan dengan transfer antar rekening bank
secara manual kemudian divalidasi oleh admin setelah pembeli

mengkonfirmasi pembayaran.

2

BAB II
LANDASAN TEORI
2.1

Konsep Dasar Web

2.1.1

Internet
Menurut Kustiyahningsih dan Anamisa (2011:2), “Secara Sederhana dapat

dikatakan 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 :
a)

Lokal Area Network (LAN), yaitu jaringan komputer dimana komputerkomputer yang terhubung masih dalam satu area atau lokasi.

b)

Wide Area Network (WAN), yaitu koneksi antara LAN-LAN yang berbeda
lokasi/area. Ciri utamanya adalah memiliki bandwidth yang terbatas karena
disesuaikan dengan fungsi harga, adanya problem delay atarstasiun.

c)

Metropolitan Area Network (MAN), yaitu sama seperti LAN hanya saja lebih
luas areanya, semisal dalam satu kota/daerah dengan range mencapai 50 km.

d)

Internet, yaitu kepanjangan dari interconnection networking atau juga yang
telah menjadi international networking merupakan suatu jaringan yang
menghubungkan komputer diseluruh dunia tanpa dibatasi oleh jumlah unit
menjadi satu jaringan yang bisa saling mengakses.

3

2.1.2

Website
Menurut Rahmat Hidayat (2010:2), website atau situs dapat diartikan sebagai
kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks,
gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya, baik
yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan
yang saling terkait, yang masing-masing dihubungkan dengan jaringan-jaringan
halaman. Hubungan antara satu halaman web dengan halaman web yang lainnya
disebut hyperlink, sedangkan teks yang dijadikan media penghubung disebut
hypertext.

Jenis-jenis website menurut Rahmat Hidayat sebagai berikut :

1.

Website berdasarkan sifat atau style nya terbagi atas :
a.

Website dinamis
Website dinamis merupakan website yang menyediakan content atau isi
yang selalu berubah-rubah setiap saat. Bahasa pemograman yang digunakan
antara lain PHP, ASP, .NET dan memanfaatkan databaseMySQL. Misalnya
website www.artikel-it.com, www.detik.com, dan sebagainya.

b.

Website statis
Website statis merupakan website yang content-nya sangat jarang
dirubah. Bahasa pemograman yang digunakan adalah HTML dan belum
memanfaatkan database. Misalnya : web profile organisasi.

2.

Website berdasarkan fungsinya terbagi atas :
a.

Personal website, website yang berisi informasi pribadi seseorang.

b.

Commercial website,websiteyang dimiliki oleh sebuah perusahaan yang
bersifat bisnis.

4

c.

Government website, website yang dimiliki oleh instansi permerintah,
pendidikan yang bertujuan memberikan layanan kepada pengguna

d.

Non-ProfitOrganization website, dimiliki oleh organisasi yang bersifat nonprofit atau tidak bersifat bisnis.

3. Website berdasarkan bahasa pemograman yang di gunakan terbagi atas :
a.

Server side, merupakan website yang menggunakan bahasa pemograman
yang tergantung kepada terjadinya server. Seperti PHP, ASP, .NET dan lain
sebagainya. Jika tidak ada server, maka website yang dibangun
menggunakan

bahasa

pemograman

tersebut

tidak

dapat

berfungsi

sebagaimana mestinya.
b.

Client

slide,

website

yang

tidak

membutuhkan

server

dalam

menjalankannya, cukup diakses melalui browser saja. Misalnya : HTML

2.1.3

Web Browser
Menurut Kustiyahningsih dan Anamisa (2011:8), “web browser adalah softwere

yang digunakan untuk menampilkan informasi dari server web”.
Softwere ini kini telah dikembangkan dengan menggunakan user interface grafis,
sehingga pemakai dapat melakukan ‘point and click’ untuk pindah antar dokumen”.

2.1.4

Web Server
Menurut Kustiyahningsih dan Anamisa (2011:8), “web server adalah komputer

yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani
permintaan dokumen web dari kliennya”.

5

2.1.5

E-commerce
Menurut Irwansyah (2014b:40) “e-commerce merupakan singkatan dari

electronic commerce yang berarti sebuah transaksi bisnis yang dilakukan lewat jaringan
elektronik seperti internet”.
E-commerce digolongkan menjadi tiga bisnis, yaitu :

1. Business to Consumer (B2C)
B2C adalah sebuah transaksi bisnis yang menjual barang atau jasa kepada
individu. Misalnya: amazon.com menjual buku kepada seseorang melalui sistem
online.

2. Consumer to Consumer (C2C)
C2C adalah ketika salah satu konsumen menjual barang atau jasa langsung
kepada konsumen lainnya melalui sistem elektronik. Contohnya Amir menjual
handphone miliknya ke orang lain melalui kaskus.co.id.

3. Business to Business (B2B)
B2B merupakan sebuah bisnis yang menjual barang/jasa kepada bisnis lain
dengan menggunakan sistem elektronik. Misalnya: perusahaan ABC menjual
hardware komputer kepada perusahaan DEF perakit komputer.

2.1.6

Model Pengembangan Perangkat Lunak
Menurut Rosa dan Shalahuddin (2013:28), “model SDLC air terjun (waterfall)

sering juga disebut model sekuensial linier (sequential linear) atau alur hidup klasik
(classic life cycle)”.

6

Model air terjun menyediakan pendekatan alur hidup perangkat lunak secara
sekuensial atau terurut dimulai dari analis, desain, pengodean, pengujian, dan tahap
pendukung (support).
Berikut metode pengembangan perangkat lunak menggunakan model waterfall:

Sistem/Rekayasa
Informasi
Analisis

Pengodea
n

Desain

Pengujia
n

Gambar II.1

Model Waterfall

1. Analisis kebutuhan perangkat lunak
Proses pengumpulan kebutuhan dilakukan secara intensif untuk
menspesifikasikan kebutuhan perangkat lunak agar dapat dipahami perangkat
lunak seperti apa yang dibutuhkan oleh user. Spesifikasi kebutuhan perangkat
lunak pada tahap ini perlu untuk didokumentasikan

2. Desain
Desain perangkat lunak adalah proses multi langkah yang fokus pada
desain pembuatan program perangkat lunak, representasi antarmuka, dan
prosedur pengodean. Tahap ini menetranslasi kebutuhan perangkat lunak dari
tahap analisis kebutuhan ke repesentasi desain agar dapat diimplementasikan

7

menjadi program pada tahap selanjutnya. Desain perangkat lunak yang dihasilkan
pada tahap ini juga perlu didokumentasikan.

3. Pembuatan kode program
Desain harus ditranslasikan ke dalam program perangkat lunak. Hasil
dari tahap ini adalah program komputer sesuai dengan desain yang telah dibuat
pada tahap desain.

4. Pengujian
Pengujian fokus pada perangkat lunak secara dari segi lojik dan
fungsional dan memastikan bahwa semua bagian sudah diuji. Hal ini
dilakukan untuk meminimalisir kesalahan (error) dan memastikan
keluaran yang dihasilkan sesuai dengan yang diinginkan.

5. Pendukung (support) atau pemeliharaan (maintenance)
Tidak menutup kemungkinan sebuah perangkat lunak mengalami
perubahan ketika sudah dikirimkan ke user. Perubahan bisa terjadi karena
adanya kesalahan yang muncul dan tidak terdeteksi saat pengujian atau
perangkat lunak harus beradptasi dengan lingkungan baru. Tahap
pendukung atau pemeliharaan dapat mengulangi proses pengembangan
mulai dari analisis spesifikasi untuk perubahan perangkat lunak yang
sudah ada, tapi tidak untuk membuat perangkat lunak baru.

8

2.2

Teori Pendukung

2.2.1 Struktur Navigasi
Menurut Binanto (2010:269), Ada empat macam bentuk dasar struktur
navigasi, yaitu:
1.

Struktur Navigasi Linier
Struktur navigasi ini hanya memiliki suatu rangkaian cerita yang berturut,

yang menampilkan satu demi satu tampilan layar secara berurut menurut
urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu
halaman sebelum atau satu halaman sesudahnya, tidak dapat dua halaman
sebelumnya atau halaman sesudahnya.

Gambar II.2
Struktur Navigasi Linear

2.

Struktur Navigasi Hierarki
Struktur navigasi ini disebut juga struktur linear dengan percabangan

karena pengguna melakukan navigasi di sepanjang cabang pohon stuktur yang
terbentuk oleh logika isi, seperti yang terlihat pada gambar dibawah ini :

9

Gambar II.3

Struktur Navigasi Hierarki
3.

Struktur Navigasi Non Linear
Struktur ini disebut juga struktur tidak berurut merupakan pengembangan

dari struktur navigasi linear. Pada struktur ini diperkenankan membuat navigasi
bercabang. Walaupun terdapat percabangan, tetapi setiap tampilan memiliki
kedudukan yang sama.

Gambar II.4.
Struktur Navigasi Non Linear

4.

Struktur Navigasi Komposit
Struktur ini

merupakan

gabungan dari

ketiga

struktur

navigasi

sebelumnya. Struktur navigasi ini juga biasa disebut navigasi bebas. Struktur
ini banyak digunakan dalam pembuatan aplikasi multimedia sehingga dapat
memberikan keinteraksian yang lebih tinggi.

10

Gambar II.5
Struktur Navigasi Komposit

2.2.2 Enterprise Relationship Diagram
1. Definisi ERD
Menurut Simarmata dan Paryudi (2006:67) mengemukakan bahwa “Entity
Relationship Diagram adalah alat pemodelan data utama dan akan membantu
mengorganisasi data dalam suatu proyek kedalam entitas-entitas dan menentukan
hubungan antar entitas”.
2. Komponen ERD
Menurut Frieyadie (2007:10) Komponen yang terdapat dalam Entity Relationship
Diagram adalah sebagai berikut.

a.

Entity (entitas)
Entitas adalah suatu data yang dapat disimpan dan berguna bagi badan

atau perusahaan, dengan kata lain, suatu objek yang dapat dibedakan
dengan objek lainnya.
Entitas digambarkan dengan kotak persegi panjang. Terdapat juga
Entitas Lemah (Weak Entity), yaitu suatu entitas sangat bergantung dengan
entitas biasa, dengan kata lain, entitas lemah tidak akan ada apabila tidak
ada entitas biasa. Entitas lemah digambarkan dengan kotak persegi
panjang dengan garis ganda.
b.

Atribut

11

Atribut menunjukan karakteristik dari tiap-tiap entitas. Atribut
digambarkan dengan bentuk oval.
c.

Relasi
Relasi menunjukkan hubungan yang terjadi antar entitas. Relasi

digambarkan dengan bentuk belah ketupat atau diamond.
d.

Atribut Utama
Atribut utama digambarkan dengan bentuk oval, dengan keterangan

diberi garis bawah absolut.
e.

Atribut Pilihan
Atribut pilihan digambarkan dengan bentuk oval dengan keterangan

diberi garis bawah putus-putus.
f.

3.

Line Connector di gambarkan dengan bentuk garis tunggal.

Kardinalitas (Cardinality)
Menurut Frieyadie (2007b:12), Kardinalitas merupakan tingkat hubungan yang

terjadi antar entitas di dalam sebuah sistem. Terdapat tiga tingkat hubungan yang
terjadi, yaitu :

a.

Hubungan Satu pada Satu (One to One atau 1:1)
Tingkat hubungan dinyatakan satu pada satu, jika satu kejadian pada entitas

pertama hanya mempunyai satu hubungan dengan suatu kejadian pada entitas
kedua. Demikian juga sebaliknya, satu kejadian pada entitas kedua hanya bisa
mempunyai satu hubungan dengan satu kejadian pada entitas yang pertama.

b.

Hubungan Satu pada Banyak (One to Many atau 1:M)

12

Tingkat hubungan satu pada banyak (1:M) adalah sama dengan banyak pada
satu (M:1), tergantung dari arah mana hubungan tersebut dilihat. Untuk satu
kejadian pada entitas yang pertama dapat mempunyai banyak hubungan dengan
kejadian pada entitas yang kedua.
Sebaliknya satu kejadian pada entitas yang kedua, hanya bisa mempunyai
satu hubungan dengan satu kejadian pada entitas yang pertama.

c.

Hubungan Banyak pada Banyak (Many to Many atau M:N)
Tingkat hubungan banyak pada banyak (M:N) terjadi jika tiap kejadian pada

sebuah entitas akan mempunyai banyak hubungan dengan kejadian pada entitas
lainnya, baik dilihat dari sisi entitas yang pertama maupun dilihat dari sisi entitas
yang kedua.

2.2.3 Logical Relationship Structure
Menurut Frieyadie (2007c:13) “Sebelum tabel dibentuk dari field atau
atribut entitas secara fisik atau level internal, maka harus dibuatkan suatu bentuk
relational model yang dibuat secara logic atau level external dan konsep dari
pernyataan tersebut dibutuhkan yang disebut dengan Logical Relationship
Structure (LRS)”.
Hasil dari pemodelan Entity Relationship (ER) beserta atributnya sehingga
bisa terlihat hubungan-hubungan antar entitas.
2.2.4

Penguji Web (Black Box Testing)
Menurut Rosa dan Shalahuddin (2013c:275), “pengujian black box yaitu

perangkat lunak dari segi spesifikasi fungsional tanpa menguji desain dan kode program”.

13

Pengujian dimaksudkan untuk mengetahui apakah fungsi-fungsi, masukan, dan
keluaran dari perangkat lunak sesuai dengan spesifikasi yang dibutuhkan.
Pengujian black box dilakukan dengan membuat kasus uji yang bersifat mencoba
semua fungsi dengan memakai perangkat lunak apakah sesuai dengan spesifikasi yang
dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian black boxharus dibuat
dengan kasus benar dan kasus salah, misalnya untuk kasus proses login maka kasus uji
yang dibuat adalah:

1.

Jika user memasukkan nama pemakai (username) dan kata sandi
(password) yang benar.

2.

Jika user memasukkan nama pemakai (password) yang salah, misalnya
nama pemakai benar tapi kata sandi (password) yang salah, misalnya nama
pemakai benar tapi kata sandi salah, atau sebaliknya, atau keduanya salah.

14

BAB III
PEMBAHASAN
1.1

Rancangan Antar Muka
a. Rancangan Beranda meliputi informasi tentang hijrah shop.

Gambar III.1
Rancangan Tampilan Beranda

15

b. Rancangan Pembayaran meliputi, cara pemesanan dan
pembayaran di hijrah shop.

Gambar III.2
Rancangan Pemabayaran

c. Rancangan Produk kami dan Rancangan Galeri meliputi
gambar product dan Login member untuk membeli produk.

16

Gambar III.3
Rancangan Produk Kami

d. Racangan hubungi kami berisi form meliputi nama, email,
alamat, dan pesan untuk memberikan kritik dan saran bagi toko
hijrah shop.

Gambar III.4
Rancangan Hubungi Kami

17

e. Rancangan login admin meliputi username dan password
admin

Gambar III.5
Rancangan Login Admin

1.2

ERD

18

ID_MEMBER

EMAIL

PASS

NAMA

ALAMAT

TELP

NOREK

NAMAREK

TB_MEMBER

1
ID_BARANG
NAMABARANG

ID_GALERI
GAMBAR

TB_GALERI

M

MELIHAT

M

TB_BARANG

KETERANGAN

HARGA
GAMBAR
KETERANGAN

1

MEMBELI

ID_HUBUNGI
M
NAMA

ID_PESAN
IDBARANG
IDMEMBER

EMAIL
ALAMAT

TB_HUBUNGI

1

MENGHUBUNGI

1

TB_PESANAN

UKURAN
BANYAK

PESAN
1
ID_USER
TB_USER

USER
PASS

Gambar III.6
Entity Relationship Diagram

1.3

Spesifikasi file

19

M

MENGECEK

Spesifikasi file yang digunakan dalam perancangan program
penjualan web ini terdiri dari satu database yaitu hijrah dan berikut
beberapa table :

1. Tabel Barang
- Nama database : hijrah
-Nama tabel : tb_barang
-Tipe : File access
- Panjang Record : 303
- Akses File : Random
- Kunci Field : id_barang

Gambar III.7
Tabel Barang

20

2. Tabel Galeri
- Nama database : hijrah
-Nama tabel : tb_galeri
-Tipe : File access
- Panjang Record : 53
- Akses File : Random
- Kunci Field : id_galeri

Gambar III.8
Tabel Galeri

21

3. Tabel Hubungi
- Nama database : hijrah
-Nama tabel : tb_hubungi
-Tipe : File access
- Panjang Record : 305
- Akses File : Random
- Kunci Field : id_hubungi

Gambar III.9
Tabel Hubungi

22

4. Tabel Member
- Nama database : hijrah
-Nama tabel : tb_member
-Tipe : File access
- Panjang Record : 458
- Akses File : Random
- Kunci Field : id_member

Gambar III.10
Tabel Member

23

5. Tabel Pesanan
- Nama database : hijrah
-Nama tabel : tb_pesanan
-Tipe : File access
- Panjang Record : 435
- Akses File : Random
- Kunci Field : id_pesan

Gambar III.11
Tabel Pesanan

24

6. Tabel User
- Nama database : hijrah
-Nama tabel : tb_user
-Tipe : File access
- Panjang Record : 63
- Akses File : Random
- Kunci Field : id_user

Gambar III.12
Tabel User

25

1.4

Struktur Navigasi linier

INDEX

BERANDA

PEMBAYARAN

PRODUK KAMI

Gambar III.13
Sruktur Navigasi

26

GALERI

HUBUNGI KAMI

LOGIN ADMIN

BAB IV
PENUTUP
4.1. Kesimpulan
Dari pembahasan yang telah di tulis oleh kelompok dalam makalah
ini,dapat di ambil kesimpulan bahwa:
1.

Perangkat lunak yang digunakan masih sangat sederhana.

2.

Perangkat lunak ini dapat menangani pemesanan, penjualan, penambahan
produk dan juga dapat melakukan proses transaksi menggunakan perbankan.

3.

Dengan meningkatnya penggunaan internet di kalangan masyarakat, Hijrah
Shop mencoba melakukan inovasi yaitu belanja lewat online, maka dari itu
penulis selaku pembangun website menawarkan website e-commerce sebagai
sarana promosi dan penjualan online.

4.2. Saran
Adapun saran yang dapat kami berikan untuk dapat digunakan
pengembang perangkat lunak Hijrah Shop agar dapat memberikan hasil yang
lebih baik lagi untuk bidang e-commerce adalah :

27

1.

Stok barang tidak dapat otomatis terupdate, maka perangkat lunak perlu di
perbaharui agar stok dapat otomatis terupdate.

2.

Perlu diperbanyak lagi koleksi pakaian di Hijrah Shop agar makin menarik
minat pembeli.

3.

Perlu di tingkatkan lagi tampilan desain web agar semakin terlihat lebih
menarik.

4.

Meningkatkan pengamanan yang secara berlanjut. Hal ini bertujuan agar data
yang ada tidak disalahgunakan oleh orang yang tidak bertanggung jawab.

28