12. bab iii.doc
TRANSCRIPT
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
Nama Field Type Size Keterangan
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
Nama Field Type Size Keterangan
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
Nama Field Type Size Keterangan
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
Home How to Buy About Contact
How to Buy
Cari Barang
Keranjang
Kategori
Member
login register
Password
PaUsername
Logo Toko
Home How to Buy About Contact
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
Home How to Buy About Contact
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:
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');
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:
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');
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.
6. Menyimpan difolder oedikus dalam htdocs.
46
Gambar 3.12 Tampilan Admin Login Page
3.8.4 Halaman Admin Page
Langkah-langkah membuat halaman profil:
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>
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.
6. Menyimpan difolder oedikus dalam htdocs.
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