12. bab III.doc

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

Gambar 3.1 Struktur Navigasi Web Page Campuran

Gambar 3.2 Struktur Navigasi Admin Page Campuran

28

Member LoginIndex

Home How to buy About Contact Register Barang

Member LogoutMember edit

Admin login Admin logout

About

members

Settings

User add

User add

users

Dashboard

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

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

Admin

tambah modul

edit modul

hapus modul

tambah kategori

tambah produk

hapus produk

ubah produk

ubah status order

tambah ongkos kirim

login

ubah password

logout

Pelanggan

lihat barang

pesan barang

identitas pelanggan

laporan order

Tabel 3.1 Bentuk Unnormal

ID *user_loginuser_passencrypt_passuser_emailuser_statusdisplay_nameuser_registereduser_updatedID_aboutabout_textabout_updatedID_optionoption_nameoption_valueID_membermember_loginmember_encrypt_passmember_emailmember_namemember_addressmember_registeredmember_updatedID_barangno_barangmerk_barangkategori_barangharga_barangstok_baranggambar_barangbarang_detaildate_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_loginuser_passencrypt_passuser_emailuser_statususer_registereduser_updatedID_about *about_textabout_updatedID_option *option_nameoption_valueID_member *member_loginmember_encrypt_passmember_emailmember_namemember_addressmember_registeredmember_updatedID_barang *no_barangmerk_barangkategori_barangharga_barangstok_baranggambar_barangdate_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 Type Size Keterangan

about_ID bigint 20 nomer urut tabel about

about_text longtext - text untuk about

about_update date_time - tanggal update text about

3.6.2 Tabel barang.sql

Tabel ini digunakan untuk data barang.

Tabel 3.5 Tabel Barang


ID_barang int 8 nomer urut table container

nm_barang text - Nama barang

merk_barang text - Merk barang

kategori_barang text - type barang

harga_barang int 11 Harga barang

Stok_barang int 11 Jumlah barang

Gambar_barang text - Gambar barang

detail text - Detail barang

tgl date - tanggal masuk barang

3.6.3 Tabel member.sql

Tabel ini digunakan untuk data pelanggan.

Tabel 3.6 Tabel members

Name field Type Size Keterangan

ID_member int 8 nomer urut member

user text - username untuk mamber

nama_user text - password untuk member

member_encrypt_pass varchar 900 encrypt password member

35

member_email text - email untuk member

member_alamat text - alamat member

member_phone varchar 20 nomer telepon member

member_registered datetime - tanggal daftar member

member_updated datetime - tanggal ubah member

3.6.4 Tabel Options.sql

Tabel ini digunakan untuk pengaturan websait.

Tabel 3.7 Tabel Options


option_id bigint 20 nomer urut tabel option

option_name varchar 64 nama option

option_value longtext - isi option

3.6.5 Tabel Users.sql

Tabel ini digunakan untuk data user.

Tabel 3.8 Tabel Users


ID bigint 20 nomer urut tabel user

user_login varchar 60 username user

user_pass varchar 64 password user

encrypt_pass varchar 100 encrypt password user

user_registered datetime - tanggal user daftar

user_status varchar 64 status user

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

36

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

dan form member login. Halaman index mempunyai tampilan sebagai

berikut:

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.

37

Logo Toko

Home How to Buy About Contact

Detail Barang

Cari Barang

Keranjang

Kategori

Member

login register

Password

PaUsername

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

38

Logo Toko


How to Buy

Cari Barang

Keranjang

Kategori

Member

login register

Password

PaUsername

Logo Toko


About

Cari Barang

Keranjang

Kategori

Member

login

register

Password

PaUsername

Gambar 4.8 Rancangan Halaman About

3.7.4 Rancangan Halaman Contact

Halaman contact yang berisi tampilan kontak Toko OediKus.

Berikut tampilan pada halaman:

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:

39

Logo Toko


Contact

Cari Barang

Keranjang

Kategori

Member

login register

Password

Username

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.

<?phpinclude "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>

40

ADMINISTRATOR

tabel user tabel barang tabel pesanan logout

idbarang barang merk kategori harga stok gambar detail tanggal proses

Tabel BarangTambah barang

<body><div id="header"><?php

include "banner.php";?></div><div id="content">

<?phpinclude "kontenkiri.php";

?><div class="right">

<?phpinclude "kontenkanan.php";

?>

</div></div>

<div id="footer">Copyright © 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:


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');

42

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><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> | <button type=reset >Reset</button></p>

43

</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;

}

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

44

5. Menyimpan difolder oedikus dalam htdocs.

Gambar 3.11 Tampilan Member Page

3.8.3 Halaman Admin Login Page

Langkah-langkah membuat halaman beranda:


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');

45

}#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> <button name="login">login</button> | <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.


46

Gambar 3.12 Tampilan Admin Login Page

3.8.4 Halaman Admin Page

Langkah-langkah membuat halaman profil:


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>

47

<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&&id=$r[0]&&user=$r[1]&&nama=$r[2]&&email=$r[3]&&nohp=$r[4]&&alamat=$r[5]&&pass=$r[6]&&'>ubah</a>

|

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

48

</td></tr>";

}?></table>

<?php}?>

3. Membuat header bar dan menu header bar.

4. Membuat sidebar menu.

5. Membuat tampilan content.


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.

49

1

2

3

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

50

12. bab III.doc

Documents

Transcript of 12. bab III.doc