PHP MySQL Ecommerce Web Design Part 4
Postingan saya kali ini adalah mengisi halaman mensClothing.php dengan gambar-gambar produk
1. Buat file .PHP dengan nama clothing_list.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file clothing_list.php di dalam folder admin. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php include_once("check_admin.php"); ?>
<?php
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
// Delete item question to admin and delete product if choosen
if(isset($_GET['deleteid'])){
echo 'Do you really want to delete product with ID of'
.$_GET['deleteid'].
'?<a href="clothing_list.php?yesdelete='.$_GET['deleteid'].'">Yes</a>
| <a href="clothing_list.php">No</a>';
exit();
}
if(isset($_GET['yesdelete'])){
// remove item from system and delete its picture
// delete from database
$id_to_delete=$_GET['yesdelete'];
$sql=mysql_query("DELETE FROM clothing WHERE id='$id_to_delete' LIMIT 1")
or die (mysql_error());
// unlink the image from server
if(file_exists($pictodelete)){
unlink($pictodelete);
}
header("location:clothing_list.php");
exit();
}
?>
<?php include_once("clothingList_orderby.php"); ?>
<?php
// This block grabs the whole list for viewing
$product_list="";
$sql=mysql_query("SELECT*FROM clothing ORDER BY date_added DESC");
include_once("../template_page.php");
$sql2=mysql_query("SELECT*FROM clothing $orderby_query $limit");
include_once("../template_page2.php");
if (!empty($sql2)){ // tambahan untuk hilangkan error saat tabel products kosong
$productCount=mysql_num_rows($sql2); // count the output amount
if($productCount>0){
while($row=mysql_fetch_array($sql2)){
$id=$row["id"];
$product_name=$row["product_name"];
$product_price=$row["product_price"];
$product_priceF=number_format($product_price,0,',','.');
$product_brand=$row["product_brand"];
$category=$row["category"];
$subcategory=$row["subcategory"];
$type=$row["type"];
$color=$row["color"];
$size=$row["size"];
$bahan=$row["bahan"];
$product_details=$row["product_details"];
$designCategory=$row["designCategory"];
$date_added=strftime("%d-%m-%Y", strtotime($row["date_added"]));
$product_list.='<div id="clothinglist2">';
$product_list.='<div id="clothinglist_A1">'.$id.'
</br>
<img class="goyang100" src="../clothing_images1/'. $id .'.jpg"
width="50" height="50" alt="x" class="one-edge-shadow"
style="border-color:blue; border-style:solid; border-width:0px" />
</div>';
$product_list.='<div id="clothinglist_B1">'.$product_name.'
</div>';
$product_list.='<div id="clothinglist_C1">'.$product_priceF.'
</div>';
$product_list.='<div id="clothinglist_D1">'.$product_brand.'
</div>';
$product_list.='<div id="clothinglist_E1">'.$category.'
</div>';
$product_list.='<div id="clothinglist_F1">'.$subcategory.'
</div>';
$product_list.='<div id="clothinglist_G1">'.$type.'
</div>';
$product_list.='<div id="clothinglist_H1">'.$color.'
</div>';
$product_list.='<div id="clothinglist_I1">'.$size.'
</div>';
$product_list.='<div id="clothinglist_J1">'.$bahan.'
</div>';
$product_list.='<div id="clothinglist_K1">'.$product_details.'
</div>';
$product_list.='<div id="clothinglist_L1">'.$designCategory.'
</div>';
$product_list.='<div id="clothinglist_M1">'.$date_added.'
</div>';
$product_list.="<div id='clothinglist_N1'>
<a href='inventory_change.php?pid=$id''><button>Edit</button></a>
<a href='stock_clothing.php?pid=".$id."'><button>Stock</button></a>
<a href='clothing_list.php?deleteid=$id'><button>Del</button></a>
</div>";
$product_list.="</div>";
} // closing while ...
}else{
$product_list="You have no clothing listed in your store yet";
} // closing if ...
} //END tambahan untuk hilangkan error saat products table kosong
// After done scripting close any mysql connection
mysql_close();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clothing List</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head2.php"); ?>
<!---------------------- END of LINK -------------------------->
</head>
<body>
<div id="wrapper">
<div id="contentInventory" style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div id="pagNumTopOL" align="left" style="font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; font-size:14px">
<?php include_once("clothingList_orderbyForm.php"); ?>
<?php echo $paginationDisplay; ?>
</div> <!--- END pagNumTopOL --->
<br />
<br />
<h2>CLOTHING LIST</h2>
<!--- when Home button clicked it also destroy SESSION['manager']--->
<a href="index.php" style="text-decoration:none"><input name="home" type="button"
value="<- Home" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" /></a>
<a href="add_clothing.php" style="text-decoration:none">
<input name="addnewItem" type="button" value="Add New Item"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<div id="inventorylist" style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div id="clothinglist_A">id</div>
<div id="clothinglist_B">Prod Name </div>
<div id="clothinglist_C">Prod Price</div>
<div id="clothinglist_D">Prod Brand</div>
<div id="clothinglist_E">Category</div>
<div id="clothinglist_F">Subcategory</div>
<div id="clothinglist_G">Type</div>
<div id="clothinglist_H">Color</div>
<div id="clothinglist_I">Size</div>
<div id="clothinglist_J">Bahan </div>
<div id="clothinglist_K">Prod Details</div>
<div id="clothinglist_L">Design Category</div>
<div id="clothinglist_M">Date</div>
<div id="clothinglist_N">Edit/Stock/Delete</div>
</div>
<div id="clothinglistWraper">
<?php echo $product_list; ?>
</div>
</div>
<a name="inventoryForm" id="inventoryForm"></a>
</div><!--- END contentInventory --->
</div><!--- END Wrapper --->
<?php include_once("../template_js_body.php"); ?>
</body>
</html>
2. Buat file .PHP dengan nama clothingList_orderby.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file clothingList_orderby.php di dalam folder admin. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
$selected = array();
if (isset($_GET["orderby"])) // pemakaian isset penting!!!
$orderby =($_GET["orderby"]);
if(!isset($orderby)){ $orderby = 'date_added_desc';}
if(isset($orderby)){
$selected[$orderby] = 'selected';}
if($orderby == 'date_added_desc'){
$orderby_query = "order by date_added desc"; }
else if($orderby == 'product_name_asc') {
$orderby_query = "order by product_name desc";}
else if($orderby == 'subsubcategory_asc') {
$orderby_query = "order by subsubcategory asc";}
else if($orderby == 'product_price_asc'){
$orderby_query = "order by product_price asc";}
else if($orderby == 'product_price_desc'){
$orderby_query = "order by product_price desc";}
else if($orderby == ''){
$orderby_query = "";}
else { unset($orderby); }
?>
3. jRumble
Buka website jRumble
Klik Download, extract filenya, lalu buka foldernya
Copy file JScript dengan nama jquery.jrumble.1.3, lalu paste-kan di dalam folder js
Buka Notepad++, pilih File, klik Open, cari file template_links_head.php di D:\TUTOR WEB\RIANKLIK\, tambahkan script warna biru di bawah dan jangan lupa di-save
<script type="text/javascript" src="js/jquery.jrumble.1.3.min.js"></script>
Buka Notepad++, pilih File, klik Open, cari file template_links_head2.php di dalam folder admin, tambahkan script warna biru di bawah dan jangan lupa di-save
<script type="text/javascript" src="../js/jquery.jrumble.1.3.min.js"></script>
Selanjutnya buka Notepad++, pilih File, klik Open, cari file template_js_body.php di D:\TUTOR WEB\RIANKLIK\, tambahkan sama seperti script warna biru di bawah dan jangan lupa di-save
<!-- JS to rumble berdasarkan class="" yang disebutkan-->
<script type="text/JavaScript">
// Demo goyang0
$('.goyang0').jrumble({ speed: 0 });
// Demo goyang50
$('.goyang50').jrumble({ speed: 50 });
// Demo goyang100
$('.goyang100').jrumble({ speed: 100 });
// Demo goyang200
$('.goyang200').jrumble({ speed: 200 });
$('.goyang0, .goyang50, .goyang100, .goyang200').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
</script>
<!-- JS to rumble berdasarkan class="" yang disebutkan-->
4. Buat file .PHP dengan nama clothingList_orderbyForm.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file clothingList_orderbyForm.php di dalam folder admin. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<form method='get' style="display: inline;" name='orderby_form'>
<select name='orderby' onChange="orderby_form.submit();"
style="font-size:14px; width: 150px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<option style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" value='date_added_desc'
<?php
if(isset($_GET['orderby'])){
$selected[$orderby]=isset($selected[$orderby]);
print $selected[$orderby];
}
?>>Date Added</option>
<option style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" value='product_name_asc'
<?php
if(isset($_GET['orderby'])){
$selected[$orderby]=isset($selected[$orderby]);
print $selected[$orderby];
}
?>>Product Name</option>
<option style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" value='subsubcategory_asc'
<?php
if(isset($_GET['orderby'])){
$selected[$orderby]=isset($selected[$orderby]);
print $selected[$orderby];
}
?>>Category</option>
<option style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" value='product_price_asc'
<?php
if(isset($_GET['orderby'])){
$selected[$orderby]=isset($selected[$orderby]);
print $selected[$orderby];
}
?>>Price (Low - High)</option>
<option style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" value='product_price_desc'
<?php
if(isset($_GET['orderby'])){
$selected[$orderby]=isset($selected[$orderby]);
print $selected[$orderby];
}
?>>Price (High - Low)</option>
<option style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" value=''
<?php
if(isset($_GET['orderby'])){
$selected[$orderby]=isset($selected[$orderby]);
print $selected[$orderby];
}
?>>Order by</option>
</select>
</form>
5. Buat file .PHP dengan nama add_clothing.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file add_clothing.php di dalam folder admin.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php include_once("check_admin.php"); ?>
<?php
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
// ----------- dropdown city from shipping table -------//
$shipping_cities = mysql_query("SELECT DISTINCT CITY
FROM shipping ORDER BY id ASC");
$city = array();
while($row = mysql_fetch_row($shipping_cities)){
$city[] = $row[0];
}
// ----------- dropdown brand from brand table ---------//
$brand_list = mysql_query("SELECT DISTINCT brand
FROM brand ORDER BY brand ASC");
$brand = array();
while($row = mysql_fetch_row($brand_list)){
$brand[] = $row[0];
}
// ---------- dropdown brand from brand table ---------//
$listed_color = mysql_query("SELECT DISTINCT color
FROM color ORDER BY color ASC");
$color = array();
while($row = mysql_fetch_row($listed_color)){
$color[] = $row[0];
}
?>
<?php
// Parse the form data and add inventory item to the system
if(isset($_POST['product_name'])){
$product_name=mysql_real_escape_string($_POST['product_name']);
$product_price=mysql_real_escape_string($_POST['product_price']);
$product_brand=mysql_real_escape_string($_POST['product_brand']);
$category=mysql_real_escape_string($_POST['category']);
$subcategory=mysql_real_escape_string($_POST['subcategory']);
$type=mysql_real_escape_string($_POST['type']);
$color=mysql_real_escape_string($_POST['color']);
$size=mysql_real_escape_string($_POST['size']);
$bahan=mysql_real_escape_string($_POST['bahan']);
$product_details=mysql_real_escape_string($_POST['product_details']);
$designCategory=mysql_real_escape_string($_POST['designCategory']);
$stock_amount=mysql_real_escape_string($_POST['stock_amount']);
$purchase_price=mysql_real_escape_string($_POST['purchase_price']);
$store_name=mysql_real_escape_string($_POST['store_name']);
$phone=mysql_real_escape_string($_POST['phone']);
$store_address=mysql_real_escape_string($_POST['store_address']);
$city=mysql_real_escape_string($_POST['city']);
// See if that product name is an identical match to another product in the system
$sql=mysql_query("SELECT id FROM clothing WHERE product_name='$product_name' LIMIT 1");
$productMatch=mysql_num_rows($sql); // Count the output amount
if($productMatch > 0){
echo 'Sorry you tried to place a duplicate "Product Name" into the system,
<a href="clothing_list.php">click here</a>';
exit();
}
// Add this product into the clothing table
$sql=mysql_query("INSERT INTO clothing
(product_name, product_price, product_brand, category, subcategory, type, bahan,
color, size, product_details, designCategory, date_added)
VALUES('$product_name', '$product_price', '$product_brand', '$category','$subcategory',
'$type', '$bahan', '$color', '$size', '$product_details', '$designCategory', now())")
or die (mysql_error());
$pid=mysql_insert_id();
// Place image in the folder
$newname="$pid.jpg";
// Agar file gambar yang diupload bisa masuk di 2 folder yang berbeda
// pertama memakai move_uploaded_file() disambung dengan copy ()
if (move_uploaded_file($_FILES['img1']['tmp_name'],"../clothing_images1/$newname")){
copy ("../clothing_images1/$newname","../clothing_stock_images1/$newname");
}
if (move_uploaded_file($_FILES['img2']['tmp_name'],"../clothing_images2/$newname")){
copy ("../clothing_images2/$newname","../clothing_stock_images2/$newname");
}
if (move_uploaded_file($_FILES['img3']['tmp_name'],"../clothing_images3/$newname")){
copy ("../clothing_images3/$newname","../clothing_stock_images3/$newname");
}
include_once("add_clothing_insertInto.php");
// Avoid re-adding item when refreshing the page
header("location:clothing_list.php");
exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Clothing</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head2.php"); ?>
<!---------------------- END of LINK ------------------->
<!----------------- Validasi --------------------------->
<?php include_once("validasi_addClothing.php"); ?>
<!------------------------------------------------------>
</head>
<body>
<center><h2>ADD CLOTHING</h2></center>
<form action="add_clothing.php" enctype="multipart/form-data"
name="myForm" id="myForm" method="post">
<div class="addclothingrow" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div>
<a href="clothing_list.php" style="text-decoration:none"><input
name="home" type="button" value="<- Home" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" /></a>
</div>
<div class="addclothingbox1">Product Name</div>
<div class="addclothingbox2">
<input name="product_name" type="text" id="product_name" size="25"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" />
</div>
<div class="addclothingbox3">Harga Jual</div>
<div class="addclothingbox4">Rp
<input name="product_price" type="text" id="product_price" size="20"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div>
<div class="addclothingbox3">Product Brand</div>
<div class="addclothingbox4">
<?php // dropdown brand retrieved from database
if(count($brand) <= 0){
echo 'No results have been found.';
} else {
echo '<select name="product_brand" id="product_brand"
style="font-size:15px; width: 170px; font-family:Trebuchet MS,
Arial, Helvetica, sans-serif">';
foreach($brand as $brand)
echo "<option style='font-size:15px; font-family:Trebuchet MS,
Arial, Helvetica, sans-serif'>$brand</option>";
echo '</select>';
}
?>
</div>
<div class="addclothingbox5">Category</div>
<div class="addclothingbox6">
<select name="category" id="category" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="Mens">Mens</option>
</select>
</div>
<div class="addclothingbox7">Subcategory</div>
<div class="addclothingbox8">
<select name="subcategory" id="subcategory" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="T-shirt">T-shirt</option>
</select>
</div>
<div class="addclothingbox9">Type</div>
<div class="addclothingbox10">
<select name="type" id="type" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="Regular Short">Regular Short</option>
<option value="Regular Long">Regular Long</option>
</select>
</div>
<div class="addclothingboxcolor">
<?php
$listed_img=mysql_query("SELECT * FROM color");
while($row=mysql_fetch_array($listed_img)){
$idC=$row["id"];
$colorC=$row["color"];
echo '
<a class="swipebox" href="../color/'.$idC.'.jpg"
title=" <h2>'.$colorC.'</h2>">
<img class="one-edge-shadow" src="../color/'.$idC.'.jpg"
width="18" height="18" alt="img4" style="border-color:#D6D6F3;
border-style:solid; border-width:2px" />
</a>
';
echo $row['color'];
echo ",";
} // closing while loop
?>
</div>
<div class="addclothingbox9">Color</div>
<div class="addclothingbox10">
<?php // dropdown retrieved from database
if(count($color) <= 0){
echo 'No results have been found.';
} else {
echo '<select name="color" id="color"
style="font-size:15px; width: 180px; font-family:Trebuchet MS,
Arial, Helvetica, sans-serif">';
foreach($color as $color)
echo "<option style='font-size:15px; font-family:Trebuchet MS,
Arial, Helvetica, sans-serif'>$color</option>";
echo '</select>';
}
?>
</div>
<div class="addclothingbox9">Size</div>
<div class="addclothingbox10">
<select name="size" id="size" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>-
<option value="XL">XL</option>
</select>
</div>
<div class="addclothingbox9">Bahan</div>
<div class="addclothingbox10">
<select name="bahan" id="bahan" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="Cotton">Cotton</option>
</select>
</div>
<div class="addclothingbox17">Product Details</div>
<div class="addclothingbox18">
<textarea name="product_details" id="product_details" cols="23" rows="5"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"></textarea>
</div>
<div class="addclothingbox5">Design Category</div>
<div class="addclothingbox6">
<select name="designCategory" id="designCategory" style="font-size:15px;
width: 170px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="Animal">Animal</option>
<option value="Artist">Artist</option>
<option value="Band">Band</option>
<option value="Brand">Brand</option>
<option value="City">City</option>
<option value="Comic">Comic</option>
<option value="Funny">Funny</option>
<option value="Holiday">Holiday</option>
<option value="Food">Food</option>
<option value="Military">Military</option>
<option value="Movie">Movie</option>
<option value="Music">Music</option>
<option value="School">School</option>
<option value="Sports">Sports</option>
<option value="Superhero">Superhero</option>
<option value="TV">TV</option>
<option value="Video Game">Video Game</option>
<option value="Vehicle">Vehicle</option>
<option value="">None</option>
</select>
</div>
<div class="addclothingbox9">Jumlah Barang</div>
<div class="addclothingbox10">
<input name="stock_amount" type="text" id="stock_amount" size="19"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" />
</div>
<div class="addclothingbox9">Harga Beli</div>
<div class="addclothingbox10">
<input name="purchase_price" type="text" id="purchase_price" size="20"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div>
<div class="addclothingbox9">
Nama Supplier/Toko
</div>
<div class="addclothingbox10">
<input name="store_name" type="text" id="store_name" size="25"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" />
</div>
<div class="addclothingbox9">Telepon/HP</div>
<div class="addclothingbox10">
<input name="phone" type="text" id="phone" size="25"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" />
</div>
<div class="addclothingbox17">Alamat Supplier/Toko</div>
<div class="addclothingbox18">
<textarea name="store_address" id="store_address" cols="23" rows="5"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"></textarea>
</div>
<div class="addclothingbox9">City</div>
<div class="addclothingbox10">
<?php
if(count($city) <= 0){
echo 'No results have been found.';
} else {
echo '<select name="city" id="city" style="font-size:15px;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif">';
foreach($city as $city)
echo "<option style='font-size:15px; font-family:Trebuchet MS,
Arial, Helvetica, sans-serif'>$city</option>";
echo '</select>';
}
?>
</div>
<div class="addclothingbox19">Product Image 1
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div>
<div class="addclothingbox20">
<input type="file" name="img1" id="img1" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div>
<div class="addclothingbox19">Product Image 2
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div>
<div class="addclothingbox20">
<input type="file" name="img2" id="img2" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div>
<div class="addclothingbox19">Product Image 3
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div>
<div class="addclothingbox20">
<input type="file" name="img3" id="img3" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div>
<div class="addclothingbox21"> </div>
<div class="addclothingbox22">
<input type="submit" name="button" id="button" value="Add This Item Now"
value="Add This Item Now" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif" onclick="javascript:return validateMyForm();" />
</div>
<br />
<br />
<br />
</div><!--- END addclothingrow --->
</form>
<?php include_once("../template_js_body.php"); ?>
</body>
</html>
6. Buat file .PHP dengan nama create_shipping_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_shipping_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE shipping (
id int(11) NOT NULL auto_increment,
city varchar(255) NOT NULL,
shipping_price varchar(16) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (id),
UNIQUE KEY city (city)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your shipping table has been created successfully!";
} else {
echo "CRITICAL ERROR: shipping table has not been created.";
}
?>
7. Buat file .PHP dengan nama insert_shipping_data.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file insert_shipping_data.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand =
"INSERT INTO shipping
(city, shipping_price, date_added)
VALUES
( 'Please Select' ,0,now()),
( 'Kabupaten Kediri',12000,now()),
( 'Kabupaten Malang',12000,now()),
( 'Kabupaten Mojokerto',12000,now()),
( 'Kota Batu',12000,now()),
( 'Kota Kediri',12000,now()),
( 'Kota Madiun',12000,now()),
( 'Kota Malang',12000,now()),
( 'Kota Mojokerto',12000,now()),
( 'Kota Pasuruan',12000,now()),
( 'Kota Probolinggo',12000,now()),
( 'Kota Surabaya',12000,now())
";
if (mysql_query($sqlCommand)){
echo "Your shipping data has been inserted successfully!";
} else {
echo "CRITICAL ERROR: shipping has not been inserted.";
}
?>
Seperti terlihat pada script warna biru diatas, saya hanya mengisikan beberapa kota beserta besarnya tarif pengiriman barang. Kalian bisa menambahkan lebih banyak kota lagi
8. Buat file .PHP dengan nama create_brand_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_brand_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE brand (
id int(11) NOT NULL auto_increment,
brand varchar(24) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your brand table has been created successfully!";
} else {
echo "CRITICAL ERROR: brand table has not been created.";
}
?>
9. Buat file .PHP dengan nama insert_brand_name.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file insert_brand_name.php di dalam folder phpScripts. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand =
"INSERT INTO brand
(id, brand, date_added)
VALUES
('1','Levis',now()),
('2','Lea',now()),
('3','Lee',now()),
('4','Bigstar',now()),
('5','Guess',now()),
('6','Wrangler',now()),
('7','Emba',now()),
('8','Polo',now())
";
if (mysql_query($sqlCommand)){
echo "Your brand name has been inserted successfully!";
} else {
echo "CRITICAL ERROR: brand name has not been inserted.";
}
?>
10. Buat file .PHP dengan nama create_color_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_color_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE color (
id int(11) NOT NULL auto_increment,
color varchar(24) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your color table has been created successfully!";
} else {
echo "CRITICAL ERROR: color table has not been created.";
}
?>
11. Buat file .PHP dengan nama insert_color_name.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file insert_color_name.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand =
"INSERT INTO color
(id, color, date_added)
VALUES
('1','Abu abu', now()),
('2','Hitam', now()),
('3','Biru', now()),
('4','Merah', now()),
('5','Hijau', now())
";
if (mysql_query($sqlCommand)){
echo "Your color name has been inserted successfully!";
} else {
echo "CRITICAL ERROR: color name has not been inserted.";
}
?>
12. Buat folder baru dengan nama color di D:\TUTOR WEB\RIANKLIK\.
Buatlah 5 file .JPG yaitu gambar warna Abu-abu, hitam, biru, merah dan hijau dengan ukuran 500 x 500px, lalu simpan di dalam folder color yang baru saja dibuat.
Perhatikan!, nama filenya adalah nomor ID sesuai dengan yang tertulis di insert_color_name.php.
13. Buat file .PHP dengan nama add_clothing_insertInto.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file add_clothing_insertInto.php di dalam folder admin.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// Add this product into clothingStock table
$sql=mysql_query("INSERT INTO clothingStock
(product_name, store_name, color, size, stock_amount, date_added)
VALUES('$product_name', '$store_name', '$color',
'$size', '$stock_amount', now())")
or die (mysql_error());
// Add this product into clothingPurchase table
$sql=mysql_query("INSERT INTO clothingPurchase
(product_name, store_name, product_price, purchase_price,
stock_amount, date_added)
VALUES('$product_name', '$store_name', '$product_price',
'$purchase_price', '$stock_amount', now())")
or die (mysql_error());
// See if that store name is an identical match to another name in the system
$sqlS=mysql_query("SELECT store_id FROM clothingStores
WHERE store_name='$store_name' LIMIT 1");
$productMatch=mysql_num_rows($sqlS); // Count the output amount
if($productMatch > 0){
} else {
// Add this product into clothingStores table
$sql=mysql_query("INSERT INTO clothingStores
(store_name, phone, address, city, date_added)
VALUES('$store_name', '$phone', '$store_address', '$city', now())")
or die (mysql_error());
}
?>
14. Buat file .PHP dengan nama create_clothingStores_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingStores_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE clothingStores (
store_id int(11) auto_increment,
store_name varchar(24) NOT NULL,
phone varchar(16) NOT NULL,
address varchar(255) NOT NULL,
city varchar(16) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (store_id),
UNIQUE KEY store_name (store_name)
) ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your clothingStores table has been created successfully!";
} else {
echo "CRITICAL ERROR: clothingStores table has not been created.";
}
?>
15. Buat file .PHP dengan nama create_clothingPurchase_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingPurchase_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE clothingPurchase (
po_id int(11) NOT NULL auto_increment,
product_name varchar(35) NOT NULL,
store_name varchar(35) NOT NULL,
product_price varchar(16) NOT NULL,
purchase_price varchar(16) NOT NULL,
stock_amount varchar(16) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (po_id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your clothingPurchase table has been created successfully!";
} else {
echo "CRITICAL ERROR: clothingPurchase table has not been created.";
}
?>
16. Buat file .PHP dengan nama create_customer_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_customer_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE customer (
c_id int(11) auto_increment,
customer_name varchar(24) NOT NULL,
email varchar(30) NOT NULL,
password varchar(24) NOT NULL,
confirm_password varchar(24) NOT NULL,
phone varchar(24) NOT NULL,
address varchar(255) NOT NULL,
city varchar(50) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (c_id),
UNIQUE KEY customer_name (customer_name)
) ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your customer table has been created successfully!";
} else {
echo "CRITICAL ERROR: customer table has not been created.";
}
?>
17. Buat file .PHP dengan nama create_clothingTotalSales_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingTotalSales_table.php di dalam folder phpScripts.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
// connect to your MySQL database here
require "connect_to_mysql.php";
// Create an sql command structure for creating a table
$sqlCommand = "CREATE TABLE clothingTotalSales (
sale_id int(11) NOT NULL auto_increment,
stock_id int(11) NOT NULL,
product_name varchar(35) NOT NULL,
color text(24) NOT NULL,
size varchar(16) NOT NULL,
quantity varchar(16) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (sale_id),
FOREIGN KEY (stock_id) REFERENCES clothingStock (stock_id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your clothingTotalSales table has been created successfully!";
} else {
echo "CRITICAL ERROR: clothingTotalSales table has not been created.";
}
?>
18. Buat file .PHP dengan nama validasi_addClothing.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file validasi_addClothing.php di dalam folder admin.Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<script type="text/javascript" language="javascript">
// By Adam Khoury @ www.developphp.com
function validateMyForm ( ) {
var isValid = true;
if ( document.myForm.product_name.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.img1.value == "" ) {
alert ( "Please select your Product Image" );
isValid = false;
} else if ( document.myForm.img2.value == "" ) {
alert ( "Please select your Product Image" );
isValid = false;
} else if ( document.myForm.img3.value == "" ) {
alert ( "Please select your Product Image" );
isValid = false;
}
return isValid;
}
</script>
19. Buat 3 folder dengan nama clothing_images1, clothing_images2, clothing_images3, clothing_stock_images1, clothing_stock_images2, clothing_stock_images3 di D:\TUTOR WEB\RIANKLIK
folder_images_1
20. Buka Notepad++, pilih File, klik Open, cari file style.php di dalam folder styleCSS. tambahkan sama seperti script warna biru di bawah lalu jangan lupa di-save :
/*--------------- inventory_list ----------------- */
#contentInventory {
-moz-border-radius: 8px 8px 8px 8px; /* for Firefox */
-webkit-border-radius: 8px 8px 8px 8px; /* for Webkit-Browsers */
border-radius: 8px 8px 8px 8px; /* regular */
opacity: 0.8;
margin-right: auto;
margin-left: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 3000px;
position: relative;
overflow: hidden;
padding: 30px;
border: 1px solid #CCC;
}
#clothinglist {
width: 2950px;
height: 35px;
margin: 0px;
float: left;
position: relative;
background-color: #FFF;
}
#clothinglist_A {
padding: 2px;
float: left;
height: 30px;
width: 70px;
text-align: center;
margin: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_B {
margin: 0px;
float: left;
height: 30px;
width: 200px;
text-align: center;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
border-left-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_C {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_D {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_E {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_F {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_G {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_H {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_I {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_J {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_K {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 500px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_L {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_M {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_N {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglistWraper {
width: 2950px;
position: relative;
overflow: hidden;
padding-bottom: 10px;
}
#clothinglist2 {
width: 2950px;
height: 85px;
margin: 0px;
float: left;
position: relative;
}
#clothinglist_A1 {
padding: 2px;
float: left;
height: 80px;
width: 70px;
text-align: center;
margin: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_B1 {
margin: 0px;
float: left;
height: 80px;
width: 200px;
text-align: center;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_C1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_D1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_E1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_F1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_G1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_H1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_I1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_J1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_K1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 500px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_L1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
vertical-align: middle;
}
#clothinglist_M1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
vertical-align: middle;
background-color: #FFF;
}
#clothinglist_N1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 80px;
width: 200px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #FFF;
border-left-color: #999;
}
/*--------------- inventory_list/clothingbox----------------- */
.clothingrow {
width: 523px;
height: 600px;
padding: 10px;
float: left;
position: relative;
}
.clothingbox1 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
padding-top: 15px;
}
.clothingbox2 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
}
.clothingbox3 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox4 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox5 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox6 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox7 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox8 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox9 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox10 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox11 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox12 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox13 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox14 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox15 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox16 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox17 {
margin: 0px;
float: left;
height: 150px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox18 {
margin: 0px;
float: left;
height: 150px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox19 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-right: 10px;
padding-left: 30px;
}
.clothingbox20 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.clothingbox21 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
.clothingbox22 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #DFD3F1;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
/*--------------- add_inventory/addclothingbox----------------- */
.addclothingrow {
-moz-border-radius: 8px 8px 8px 8px; /* for Firefox */
-webkit-border-radius: 8px 8px 8px 8px; /* for Webkit-Browsers */
border-radius: 8px 8px 8px 8px; /* regular */
width: 523px;
padding: 10px;
position: relative;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
overflow: hidden;
}
.addclothingboxcolor {
margin: 0px;
float: left;
text-align: center;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.addclothingbox1 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
padding-top: 15px;
}
.addclothingbox2 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
}
.addclothingbox3 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox4 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox5 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox6 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox7 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox8 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox9 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox10 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox11 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox12 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox13 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox14 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox15 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox16 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox17 {
margin: 0px;
float: left;
height: 150px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox18 {
margin: 0px;
float: left;
height: 150px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox19 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.addclothingbox20 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.addclothingbox21 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
.addclothingbox22 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
background-color: #FFFFFF;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
/*--------------- product thumb/index----------------- */
#thumb1 {
width: 210px;
float: left;
padding: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 2.8px;
height: 360px;
position: relative;
}
21. Upload semua file dan folder yang telah dibuat ke web server
22. Buka winSCP, kemudian login dengan Host name: 192.168.88.111, User name: root, Password: 654321. Pilih semua folder yang baru di upload
klik kanan lalu pilih Properties
centang seperti gambar diatas lalu klik OK
23. Buka dengan browser 192.168.88.111/phpScripts/
Klik terlebih dahulu semua file-file baru dengan awalan create_, baru kemudian file-file baru dengan awalan insert_
24. Upload gambar produk untuk mengisi halaman mensClothing.php
Klik pilihan Admin yang ada di bagian bawah (footer), masukkan User Name: rian dan Password: 654321, lalu klik tombol Kelola Clothing
klik tombol Add New Item
upload_prod_2
Isian saya adalah seperti gambar diatas, kalian bisa mengisi dengan yang lain. Untuk Product Image 1 adalah file gambar pandangan depan, Product Image 2 adalah file gambar pandangan belakang, dan Product Image 3 adalah gambar desain yang ada di T-shirt. Semua file .JPG dari D:\TUTOR WEB\DATA_RIANKLIK\tshirt yang sudah saya persiapkan sebelumnya.
Jika sudah terisi semua, klik tombol Add This Item Now
Secara otomatis akan kembali ke halaman clothing_list.php
Jika upload berhasil maka akan terisi data dengan gambar thumbnail produk
Sekarang kembali ke halaman index.php dengan meng-klik <-Home lalu klik lagi <-Home, kemudian pada menu di atas (header) klik Pria lalu pilih Clothing
Sampai disini gambar diatas adalah tampilan produk pertama. Maksimal tampilan produk adalah 12 per halaman. Jika saya isi lebih dari 12 gambar lagi maka akan muncul pilihan halaman
Comments
Post a Comment