BAB III

PERANCANGAN DAN PEMBAHASAN

Pada bab ini akan dijelaskan mengenai perancangan dan pembuatan

website Toko Hardware Online. Untuk perancangan dan pembuatan website
diperlukan beberapa tahapan seperti perencanaan website, struktur navigasi,
flowchart, database, perancangan tampilan, langkah pembuatan dan
pengunggahan data serta spesifikasi perangkat yang digunakan.
3.1

Perencanaan Website
Pada sub bab perencanaan website, penulis berencana untuk

membuat sebuah website Toko Hardware Online untuk dibuka mengunakan

browser Mozilla Firefox, dimana penggunaanya dapat mengakses dengan
mudah dan dapat dilakukan oleh setiap konsumen dimana berada.
3.2

Struktur Navigasi
Sebuah struktur navigasi dibutuhkan dalam membuat website karena

akan memudahkan dalam pembuat website tersebut, serta dapat menentukan

urutan cara pengerjaannya. Dalam penulisan ini penulis akan menggunakan
struktur navigasi campuran.
Pada strukur navigasi website Toko Hardware Online menggunakan
struktur navigasi campuran karena untuk memudahkan mengakses ke
halamanan lain. Contoh cari struktur navigasi campuran pada website ini
yaitu dari halaman Home, How to Buy, About, Contact. Pada struktur
navigasi campuran pada setiap halaman dapat mempermudahkan dan
membantu user untuk pindah ke halaman utama seperti halaman Home,
How to Buy, About, Contact. Stuktur navigasi website digunakan untuk
memaparkan secara garis besar halaman dari seluruh situs web dan
menghubungkan antara halaman yang ada pada web.

27

Index

Member Login

Member edit

Home

How to buy

About

Contact

Register

Member Logout

Barang

Gambar 3.1 Struktur Navigasi Web Page Campuran

Admin login

Admin logout

Dashboard

About

members
User add
users
User add
Settings

Gambar 3.2 Struktur Navigasi Admin Page Campuran

28

3.3

Flowchart
Diagram alur atau flowchart digunakan untuk mempermudah

pemahaman alur dari sistem program website. Pada gambar 3.3 dan gambar
3.4 adalah gambar flowchart website dan gambar flowchart Admin Page
Toko OediKus Hardware Online .
Gambar 3.3 Flowchart Website Toko OediKus Hardware Online

29

Gambar 4.4 Flowchart Admin Page

3.4

UCD (Use Case Diagram)

Use Case Diagram adalah metode berbasis teks untuk menggambarkan dan

mendokumentasikan proses yang kompleks.

Use Case Diagram dibawah ini untuk mengetahui alur dari tugas Admin
maupun alur dari pelanggan/member.

30

tambah modul
login
edit modul
ubah password

hapus modul

logout

tambah kategori
Admin
tambah produk

lihat barang

hapus produk

pesan barang

ubah produk

identitas pelanggan

ubah status order

Pelanggan
tambah ongkos kirim

laporan order

Gambar 3.4 UCD (Use Case Diagram)

3.5

Normalisasi
Bertujuan untuk mengurangi kerangkapan data, mempermudah

modifikasi, dan mengurangi kompleksitas sehingga data dapat dibagi

kedalam beberapa tabel. Berikut tahap-tahap Normalisasi dari website Toko
OediKus Hardware Online ini:
3.5.1

Unnormal
Merupakan bentuk relasi umum yang terdiri dari field-field yang

berhubungan dengan website jejaring sosial. Unnormal merupakan suatu

tabel yang berisi satu atau lebih pengulangan grup.

31

Tabel 3.1 Bentuk Unnormal

ID *
user_login
user_pass
encrypt_pass
user_email
user_status
display_name
user_registered
user_updated
ID_about
about_text
about_updated
ID_option
option_name
option_value
ID_member
member_login
member_encrypt_pass
member_email
member_name
member_address
member_registered
member_updated
ID_barang
no_barang
merk_barang
kategori_barang
harga_barang
stok_barang
gambar_barang
barang_detail
date_in
3.5.2

Normal Pertama
Bentuk

Normalisasi

biasanya

menghilangkan

ketergantungan

sebagian, karena setiap atribut/data harus bersifat atomic/bernilai tunggal

dengan menghilangkan perulangan data atau tidak ada atribut yang berulang
(hanya mempunyai satu nilai data).

32

Tabel 3.2 Bentuk Normal Pertama

ID *
user_login
user_pass
encrypt_pass
user_email
user_status
user_registered
user_updated
ID_about *
about_text
about_updated
ID_option *
option_name
option_value
ID_member *
member_login
member_encrypt_pass
member_email
member_name
member_address
member_registered
member_updated
ID_barang *
no_barang
merk_barang
kategori_barang
harga_barang
stok_barang
gambar_barang
date_in
3.5.3

Normal Kedua
Pembentukan normal kedua dengan mencari kunci-kunci utama

(primary key) yang terdiri dari dua atau lebih atribut-atribut. Suatu relasi
dengan atribut kunci utama tunggal secara otomatis berada dalam bentuk
normal kedua. Syarat bentuk normal kedua yaitu tabel sudah memenuhi
bentuk normal pertama dan atribut bukan key nya harus bergantung secara
fungsi pada kunci utama.

33

Tabel 3.3 Bentuk Normal Kedua

Keterangan:
*

: Kunci Utama (Primary Key) adalah 1 set minimal atribut yang

tidak hanya mengidentifikasikan secara unik suatu kejadian, tapi juga dapat
mewakili suatu entity.
**

: Kunci Tamu (Foreign Key) adalah atribut yang melengkapi satu

relationship yang menunjukkan induknya dan ditempatkan pada entity yang

sama dengan kunci utama.
3.6

Struktur Database
Struktur database website Toko OediKus Hardware online

yang

terdiri dari data about, data barang, data members, data options, dan data
users yang dibuat dalam tabel akan dijelaskan di bawah ini:
1. Nama field

: menjelaskan nama field.

2. Tipe data

: menjelaskan tipe data yang digunakan dari nama field.

3. Ukuran

: menjelaskan ukuran data yang digunakan dari nama field.

4. Keterangan : menjelaskan keterangan tentang nama field dan besar field

yang digunakan.

34

3.6.1

Tabel About.sql
Tabel ini digunakan untuk menyimpan data tentang toko.
Tabel 3.4 Tabel About

Nama Field
about_ID
about_text
about_update
3.6.2

Type
bigint
longtext
date_time

Size
20
-

Keterangan
nomer urut tabel about
text untuk about
tanggal update text about

Tabel barang.sql
Tabel ini digunakan untuk data barang.
Tabel 3.5 Tabel Barang

Nama Field
ID_barang
nm_barang
merk_barang
kategori_barang
harga_barang
Stok_barang
Gambar_barang
detail
tgl
3.6.3

Type

Size
8
11
11
-

int
text
text
text
int
int
text
text
date

Keterangan
nomer urut table container
Nama barang
Merk barang
type barang
Harga barang
Jumlah barang
Gambar barang
Detail barang
tanggal masuk barang

Tabel member.sql
Tabel ini digunakan untuk data pelanggan.
Tabel 3.6 Tabel members

Name field
ID_member
user
nama_user
member_encrypt_pass
member_email
member_alamat
member_phone
member_registered
member_updated
3.6.4

Type
int
text
text
varchar
text
text
varchar
datetime
datetime

Size
8
900
20
-

Keterangan
nomer urut member
username untuk mamber
password untuk member
encrypt password member
email untuk member
alamat member
nomer telepon member
tanggal daftar member
tanggal ubah member

Tabel Options.sql
Tabel ini digunakan untuk pengaturan websait.
35

Tabel 3.7 Tabel Options

Nama Field
option_id
option_name
option_value
3.6.5

Type
bigint
varchar
longtext

Size
20
64
-

Keterangan
nomer urut tabel option
nama option
isi option

Tabel Users.sql
Tabel ini digunakan untuk data user.
Tabel 3.8 Tabel Users
Nama Field

ID
user_login
user_pass
encrypt_pass
user_registered
user_status
3.7

Type

Size

bigint
varchar
varchar
varchar
datetime
varchar

20
60
64
100
64

Keterangan
nomer urut tabel user
username user
password user
encrypt password user
tanggal user daftar
status user

Perancangan
Rancangan tampilan pada website OediKus Hardware terdiri dari

beberapa halaman seperti index, about, contact. Berikut rancangan tampilan

website Toko OediKus Hardware online akan dijelaskan perhalaman.

3.7.1

Perancangan Halaman Index

Pada website ini, halaman index merupakan halaman utama sebelum

user masuk ke halaman lainnya. Pada halaman utama terdapat logo website
Logo index
Toko
dan form member login. Halaman
mempunyai tampilan sebagai

berikut:

Home

How to Buy

About

Contact

Kategori

Detail Barang

Member

PaUserna
me
Password
logi
n

registe
r

Keranjang
Cari Barang

36

Gambar 3.5 Rancangan Halaman Index

3.7.2

Rancangan Halaman How to Buy

Halaman How to Buy

yang berfungsi untuk menampilkan

bagaimana cara berbelanja pada toko online ini.

Logo Toko

Home

How to Buy
Kategori

About

Contact
How to Buy

Member

PaUserna
me
Password
logi
n

registe
r

Keranjang
Cari Barang

37

Gambar 3.6 Rancangan Halaman How to Buy

3.7.3

Rancangan Halaman About

Halaman About yang berfungsi untuk menjelaskan apa itu toko

online (berbelanja secara online).

Logo Toko

Home

How to Buy

About

Kategori

Contact

About

Member

PaUserna
me
Password
logi
n

regist
er

Keranjang
Cari Barang

Gambar 4.8 Rancangan Halaman About

3.7.4

Rancangan Halaman Contact

Halaman contact yang berisi tampilan kontak Toko OediKus.

Berikut tampilan pada halaman:

Home

How to Buy
Kategori

About

Logo Toko

Contact
Contact

Member

Username
Password
logi
n

registe
r

Keranjang
Cari Barang

38

Gambar 3.8 Rancangan Halaman Contact

3.7.5

Rancangan Halaman Barang

Halaman Barang adalah halaman yang berisi list barang yang di

input user/admin. Berikut adalah tampilan halaman:

ADMINISTRATOR

tabel user

Tambah
barang

tabel barang

idbarang
barang
tanggal
proses

tabel pesanan

logout

Tabel Barang
merk

kategori

39

harga

stok

gambar

detail

Gambar 3.9 Rancangan Halaman Barang

3.8

Pembuatan Halaman

3.8.1

Halaman Web Page

Langkah-langkah membuat halaman web page:

1. Membuka Bluefish Editor.

2. Menulis koding pada notepad++ untuk merancang tampilan.

<?php
include "konek.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OediKus Hardware</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<?php
include "banner.php";
?>
</div>
<div id="content">
<?php
include "kontenkiri.php";
?>
<div class="right">
<?php
include "kontenkanan.php";
?>
</div>

40

</div>
<div id="footer">
Copyright &copy; 2013 OediKus Hardware. All Rights
Reserved
<a href="#" class="terms">Terms of Use</a> / <a href="#"
class="terms">Privacy Policy</a>
</div>
</body>
</html>

3. Membuat tampilan menu.

4. Membuat image slideshow.
5. Membuat kolom search.
6. Membuat member login bar.
7. Menyimpan difolder Oedikus dalam htdocs.

41

Gambar 3.10 Tampilan Web Page

3.8.2

Halaman Member Page

Langkah-langkah membuat halaman untuk mendaftar:

1. Membuka Bluefish Editor.

2. Menulis koding pada Notepad++ untuk merancang tampilan.
<style>
#daftar{
width:400px;
padding:10px 0px 10px 0px;
border:1px dotted silver;
}
#daftar b{
float:left;
width:100%;
padding:10px 0px 10px 0px;
text-align:center;
background:#418AA4 url('../bgron/g5.png');
font:bold 15px tahoma;
color:white;
margin-bottom:10px;
}
#daftar div{
width:100%;
padding:10px 0px 10px 0px;
text-align:center;
border-bottom:1px dotted silver;
}
#daftar label{
width:100px;
float:left;
font:13px tahoma;
}
</style>
<center>

42

<form id="daftar" method="post">

<b>Daftar User</b>
<table>
<tr>
<td align="right" style="width: 100px;">Username:</td>
<td align="left"><input type="text" name="user"></td>
</tr>
<tr>
<td align="right" style="width: 100px;">Nama
:</td>
<td align="left"><input type="text" name="nama"></td>
</tr>
<tr>
<td align="right" style="width: 100px;">*Email
:</td>
<td align="left"><input type="text" name="email"></td>
</tr>
<tr>
<td align="right" style="width: 100px;">Nomor HP :</td>
<td align="left"><input type="text" name="nohp" id="nohp"
onchange="valid('nohp',this.value,'cek1')" ><i id="cek1"></i></td>
</tr>
<tr>
<td align="right" style="width: 100px;">*Alamat
:</td>
<td align="left"><textarea name="alamat" cols="18" rows="5">
</textarea></td>
</tr>
<tr>
<td align="right" style="width: 100px;">Password :</td>
<td align="left"></label><input type="pass" name="pass"></td>
</tr>
</table>
<div>
<span style="font-size: 11px;"><i>*Jika form tidak diisi dengan benar maka
pesanan anda tidak kami proses</i></span><br><br>
<p style ='text-align:center;'><button name='daftar_user'>Daftar</button>&nbsp;|
&nbsp;<button type=reset >Reset</button></p>
</div>
</form>
</center>
<script>
function valid(id,nilai,cek){
pesan="";
switch(id){
case "nohp":
reg=/[a-zA-Z]/;
if(reg.test(nilai)){
pesan="harus angka";
document.getElementById(id).value="";
}
break;
}
document.getElementById(cek).innerHTML=pesan;

43

}
</script>
<?php
if(isset($_POST['daftar_user'])){
if(
!empty($_POST['user']) && !empty($_POST['nohp']) && !
empty($_POST['nama'])&&
!empty($_POST['email']) && !empty($_POST['alamat']) &&
!empty($_POST['pass'])
){
$q=mysql_query("insert into tbuser values(
null,
'".$_POST['user']."',
'".$_POST['nama']."',
'".$_POST['email']."',
'".$_POST['nohp']."',
'".$_POST['alamat']."',
md5('".$_POST['pass']."')
)")or die("gagal query");
echo "<script>alert('pendaftaran sukses')</script>";
}
else{
echo "<script>alert('data user tidak boleh kosong')</script>";
}
}

3. Membuat tampilan menu.

4. Membuat login bar yang berisi info member yang telah login.
5. Menyimpan difolder oedikus dalam htdocs.

44

Gambar 3.11 Tampilan Member Page

3.8.3

Halaman Admin Login Page

Langkah-langkah membuat halaman beranda:

1. Membuka Bluefish Editor.

2. Menulis koding pada notpad++ untuk merancang tampilan.
<?php
if(
!isset($_SESSION['user']) ||
!isset($_SESSION['pass'])
){
?>
<style>
#login{
width:380px;
padding:30px 0px 10px 0px;
border:1px dotted grey;
background:url('../images/loginadmin.png');
}
#login div{
padding:10px 0px 10px 120px;
}
#login label{
width:100px;
float:left;
font:bold 13px tahoma ;
}
#outter{
padding:200px 200px 200px 400px;
background:#78ebee;
}
</style>
<div id="outter">
<form method="post" id="login" action="submit.php">
<div><label>username</label><input type="text" name="user"></div>
<div><label>password</label><input type="password" name="pass"></div>
<div>

45

<button name="login">login</button>
&nbsp;|&nbsp;
<button name="batal_login">batal</button>
</div>
</form>
</div>
<?php
}
else{
header("Location:index.php");
}
?>

3. Membuat admin login bar.

4. Membuat 2 kolom input untuk username dan password user.
5. Membuat 1 tombol button submit.
6. Menyimpan difolder oedikus dalam htdocs.

Gambar 3.12 Tampilan Admin Login Page

3.8.4

Halaman Admin Page

Langkah-langkah membuat halaman profil:

46

1. Membuka Bluefish Editor.

2. Menulis koding pada notepad++ untuk merancang tampilan.
<?php
session_start();
if(!isset($_SESSION['user']) || !isset($_SESSION['pass'])){
header("Location:index.php");
}
else{
include "../konek.php";
include "menu.php";

?>
<a href="form_user2.php">tambah user</a>
<table border="1">
<caption>Tabel User</caption>
<tr>
<th>idmember</th>
<th>username</th>
<th>nama</th>
<th>email</th>
<th>nohp</th>
<th>alamat</th>
<th>password</th>
<th>proses</th>
</tr>
<?php
$q=mysql_query("select * from tbuser")or die("gagal query");
while($r=mysql_fetch_row($q)){
echo "
<tr>
<td>$r[0]</td>
<td>$r[1]</td>
<td>$r[2]</td>
<td>$r[3]</td>
<td>$r[4]</td>
<td>$r[5]</td>
<td>$r[6]</td>
<td>
<a href='
form_user.php?aksi=ubah&&

47

id=$r[0]&&
user=$r[1]&&
nama=$r[2]&&
email=$r[3]&&
nohp=$r[4]&&
alamat=$r[5]&&
pass=$r[6]&&
'>
ubah</a>
&nbsp;|&nbsp;
<a href='
form_user.php?aksi=hapus&&
id=$r[0]&&
user=$r[1]&&
nama=$r[2]&&
email=$r[3]&&
nohp=$r[4]&&
alamat=$r[5]&&
pass=$r[6]&&
'>
hapus</a>
</td>
</tr>
";
}
?>
</table>
<?php
}
?>

3. Membuat header bar dan menu header bar.

4. Membuat sidebar menu.
5. Membuat tampilan content.
6. Menyimpan difolder oedikus dalam htdocs.

1
2
3

48

Gambar 3.13 Tampilan Admin Page

3.9

Perangkat Yang Digunakan

3.9.1

Perangkat Lunak
Untuk membuat website Toko OediKus Hardware ini dibutuhkan

perangkat lunak sebagai berikut:

1. Untuk mengetik skrip, penulis menggunakan Notepade++.
2. Untuk pembuatan database, penulis menggunakan XAMPP for

Windows
3. Pengujian tampilan menggunakan Mozilla Firefox.
4. Sistem operasi yang digunakan Windows 7.

3.9.2

Perangkat Keras
Perangkat keras untuk membuat website Toko OediKus Hardware ini

menggunakan sebuah netbook ACER dengan spesifikasi sebagai berikut:

1. Processor I3
2. Intel HD Graphics
3. RAM 4 GB
4. Harddisk 500 GB

49