Pada postingan sebelumnya saya sudah menuliskan mengenai sistem shopping cart menggunakan PHP dan MySQL tetapi dalam postingan sebelumnya itu saya tidak menuliskan kode atau menjelaskan kode secara menyeluruh karena waktu itu saya sempat berpikir mungkin akan banyak menyita postingan hehe, tapi sekarang saya berubah pikiran dan akan mencoba untuk mempostingan cara pembuatan sistem toko online dari awal sampai akhir. Baiklah pada pembuatan toko online ini akan dibagi ke dalam beberapa bagian yang terdiri dari:

  1. Menentukan Layout
  2. Membuat database dan tabel
  3. Konfigurasi File

Menentukan Layout – Pengunjung

Dalam toko online kali ini akan di bahas pertama kali mengenai layout karena menurut saya layout merupakan hal terpenting dalm memetakan sebuah sketsa dari sebuah website, yaa tapi kadang-kadang membuat database nya terlebih dahulu juga engga apa-apa sih…hehee. Baiklah kembali ke pembahasan lagi yaa,, untuk layout toko online ini sendiri saya menggunakan tampilan dengan menggunakan 3 kolom. Pertama buat 2 buah file yang terdiri dari file .html dan .css, pada bagian file .html silahkan ketikan syntax html dibawah ini.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<title>Toko Online</title>
		<link rel="StyleSheet" href="file/style.css" type="text/css">
		<link rel="StyleSheet" href="file/reset.css" type="text/css">
	</head>

	<body>
		<div class="wrap">
			<div class="header">
				<div class="LeftOne">
					<a href="#"><img src="file/toko-online.png" width="150px"></a>
				</div>
				<div class="RightOne">
					<div class="cart">
						<span class="KetCart">0 item</span>					</div>
					<br class="clearfloat">
					<a class="tocart" href="#">Keranjang</a>
				</div>
			</div>
			<br class="clearfloat"><div class="LeftContent">
	<div id="navigation">
		<ul class="top-level">
		<li><a href="#">Baju Formal</a></li><li><a href="#">Baju Gamis</a></li><li><a href="#">Sepatu Cibaduyut</a></li><li><a href="#cat=16">Sepatu Kopo</a></li>		</ul>
	</div>
</div><div class="BigContent">
<div class="RightContent">
<h1 class="Judul">Produk terbaru</h1>
<div class="produk">
	<a href="#id=35">
		<img title="Produk Ganteng" class="FotoProduk" src="file/versace-kids-shoes.jpg" height="110px">
	</a>
	<br class="clearfloat">
	<div class="KotakKet">
	<a class="pesanprod" href="#">Pesan</a>
	<a class="detprod" href="#">Detail</a>
	</div>
</div>
<div class="produk">
	<a href="#id=34">
		<img title="Sepatu Cewe" class="FotoProduk" src="file/sepat1u.jpg" height="110px">
	</a>
	<br class="clearfloat">
	<div class="KotakKet">
	<a class="pesanprod" href="#">Pesan</a>
	<a class="detprod" href="#">Detail</a>
	</div>
</div>
<div class="produk">
	<a href="#id=33">
		<img title="Baju Cewe" class="FotoProduk" src="file/1297307145_165392947_1-Pictures-of--baju-muslimah-trendyBroo.jpg" height="110px">
	</a>
	<br class="clearfloat">
	<div class="KotakKet">
	<a class="pesanprod" href="#">Pesan</a>
	<a class="detprod" href="#">Detail</a>
	</div>
</div>
<div class="produk">
	<a href="#id=32">
		<img title="Baju Timnas" class="FotoProduk" src="file/5e314d4cbf3be7f42c724d85ff3f65a1.jpg" height="110px">
	</a>
	<br class="clearfloat">
	<div class="KotakKet">
	<a class="pesanprod" href="#">Pesan</a>
	<a class="detprod" href="#">Detail</a>
	</div>
</div>
<div class="produk">
	<a href="#id=31">
		<img title="Sepatu Dua" class="FotoProduk" src="file/sepatu.jpg" height="110px">
	</a>
	<br class="clearfloat">
	<div class="KotakKet">
	<a class="pesanprod" href="#">Pesan</a>
	<a class="detprod" href="#">Detail</a>
	</div>
</div>
<div class="produk">
	<a href="#">
		<img title="Sepatu Keren" class="FotoProduk" src="file/cnqy4fkdrymitqaif8hw.jpg" height="110px">
	</a>
	<br class="clearfloat">
	<div class="KotakKet">
	<a class="pesanprod" href="#">Pesan</a>
	<a class="detprod" href="#">Detail</a>
	</div>
</div>
			</div>
				<br class="clearfloat">
			</div>
			<div class="footer">
				<p align="center">© 2012 Membuat Sistem Shopping Cart | PHP dan MySQL Developed by <a href="http://www.hitamcoklat.com/">hitamcoklat</a></p>
			</div>
		</div>

</body></html>

Setelah itu pada bagian file .css nya silahkan ketikan css dibawah ini,

body {
    font-family: Verdana,sans-serif,Arial;
	background: url("../images/stripe.png") repeat scroll 0 0 transparent;
	font-size: 0.75em;
}
.clearfloat {
    clear: both;
}
.wrap {
    border: 5px solid #CCCCCC;
    margin: 10px auto;
    padding: 5px;
    width: 750px;
	background-color: #fff;
}
.Judul {
	font-size: 18px;
	font-weight: bold;
	margin: 5px 5px 5px 5px;
	}
.LeftOne {
	float: left;
	width: 200px;
	}
.RightOne {
	float: right;
	}
.header {
    height: 120px;
    margin-bottom: 10px;
}
.form {
	margin: 10px 10px 10px 10px;
	border: 1px solid #CCC;
	padding: 2px 2px 2px 2px;
	}
.BigContent {
	width: 750px;
	}
.LeftContent {
	float: left;
    margin: 5px;
    width: 180px;
}
.RightContent {
	float: right;
    padding: 5px;
    width: 520px;
	position: relative;
}
.produk {
    float: left;
	border: 1px solid #CCC;
	margin-top: 10px;
	margin-left: 10px;
}
.pesanprod {
    float: left;
    margin-left: 10px;
}
.tocart {
	float: right;
    background: none repeat scroll 0 0 #FF9900;
	padding: 5px;
	text-decoration: none;
	color: black;
	}
.tocart:hover {
	color: black;
	font-weight: bold;
	}
.KotakKet {
	padding: 5px;
	float: left;
    background: none repeat scroll 0 0 #FF9900;
	}
.pesanprod:hover {
    background: none repeat scroll 0 0 #fff;
	}
.FotoProduk {
	padding: 3px 3px 3px 3px;
	float: left;
	}
.detprod {
    float: left;
    margin-left: 10px;
}
.detprod:hover {
    background: none repeat scroll 0 0 #fff;
	}
.cart {
    background-color: #fff;
    float: right;
    min-height: 50px;
    width: 200px;
	border-bottom: 1px solid #CCC;
}
.KetCart {
	font-size: 18px;
	float: left;
	margin-top: 25px;
	font-weight: bold;
	margin-left: 10px;
	}
input {
	margin: 10px 10px 10px 10px;
	}
#navigation {font-size:0.75em; width:150px;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}

ul.top-level {background:#666;}
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}

#navigation a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#navigation a:hover{
 text-decoration:underline;
}

#navigation li:hover {
 background: #f90;
 position: relative;
}
.footer {
	background-color: #DBF7FA;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 30px;
	}
.KetProd {
	background-color: #fff;
	width: 500px;
	height: 200px;
	padding: 10px 10px 10px 10px;
	}
.haha {
	text-decoration: none;
	font-size: 14px;
	background: none repeat scroll 0 0 #FF9900;
	padding: 5px;
	}
.haha:hover{
	color: #fff;
	background: none repeat scroll 0 0 blue;
	}
.tombol {
	float: right;
	margin-right:30px;
	margin-top: 30px;
	font-weight: bold;
	color: #121212;
	}
.tombol:hover {
	background: none repeat scroll 0 0 #FF9900;
	padding: 2px 2px 2px 2px;
	}
.GambarKetProd {
	float: left;
	width: 150px;
	margin-right: 20px;
	padding: 3px 3px 3px 3px;
	border: 1px solid #CCC;
	}
.TableCart {
	border: 1px solid #CCC;
	    color: #000000;
    font-family: Verdana;
    font-size: 8pt;
    line-height: 18px;
    text-decoration: none;
    width: 100%;
	}
th {
	background-color: #e0e0e0;
	}

Jika tidak ada kesalah maka tampilan yang dihasilkan kurang lebih dapat dilihat pada gambar dibawah ini,

Toko Online

Download File

Menentukan Layout – Pengelola

Tahap selanjutnya yaitu menentukan layout yang akan digunakan dalam halaman pengelola, halaman pengelola ini bertugas untuk menginputkan produk atau kategori yang akan ditampilkan di halaman pengunjung tadi. Dalam kasus ini saya menggunakan layout 2 Kolom yang terdiri dari Sidebar Sebelah Kiri dan Sidebar sebelah kanan. Sidebar sebelah kiri berfungsi untuk tampilan menu-menu yang isinya akan ditampilkan di dalam Sidebar sebelah kanan. Biar ga bingung langsung aja buat folder dan diberi nama “admin” yang isinya terdapat 2 buah file terdiri dari .html dan .css (sama seperti layout – pengelola). Jika sudah silahkan ketikan kode html dibawah ini,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
	<head>
    	<title>Toko Online</title>
        <link rel="stylesheet" media="screen" href="css/style.css" type="text/css" />
    </head>
    <body>
    	<div class="wrap">
        	<div class="header">
				<h3>Bagian header</h3>
            </div>
			<div class="Menu">
			</div>
            <div class="Konten">
            	<div class="KontenKiri">
					<h3>Konten Kiri</h3>
                </div>
                <div class="KontenTengah">
					<h3>Konten Tengah</h3>
                </div>
				<br class="clearfloat" />
            </div>
            <div class="Footer">
				<h3>Footer</h3>
            </div>
    	</div>
    </body>
</html>

Baiklah pada bagian css nya silahkan ketikan kode CSS dibawah ini,

body {
	background-color: #fff;
	font-family: Arial;
	}
.clearfloat {
	clear: both;
	}
.wrap {
	margin: 10px auto;
	width: 750px;
	padding: 5px;
	border: 1px solid #CCC;
	}
.header {
	float: left;
	background-color: #ddd;
	width: 100%;
	}
.Menu {
	height: 50px;
	width: 100%;
	}
.Konten {
	min-height: 300px;
	background-color: #ACD1E9;
	}
.KontenTengah {
	float: left;
	width: 580px;
	background-color: #5E9DC8;
	}
.KontenKiri {
	float: left;
	width: 150px;
	padding: 5px;
	background-color: #336699;
	margin-right: 10px;
	}
.Footer {
	width: 100%;
	background-color: #5E9DC8;
	}

Jika tidak ada kesalahan maka pada tampilan admin/pengelola seharusnya seperti dibawah ini,

Toko Admin

Download File

Sebagai catatan bahwa keterangan syntax-syntax diatas merupakan syntax HTML dan CSS yang hanya akan menampilkan halaman depan dari sisi admin dan pengunjung secara umum yang memiliki 2 kolom (kolom kiri dan kolom kanan) dengan kata lain pada tahap ini belum dibahas mengenai tampilan per kategori yang nantinya akan berubah setiap kita memilih menu yang tersedia. Mungkin dilanjutkan dibagian Membuat Toko Online – PHP dan MySQL Part 2 yaaa…

Semoga bermanfaat :) ⤧  Next post Membuat Toko Online – PHP dan MySQL Part 2 ⤧  Previous post Beberapa Teknik Looping Dalam PHP