PHP MySQL Ecommerce Web Design Part 2
Postingan saya kali ini adalah cara upload file-file gambar (.jpeg atau .png) tetapi melalui sebuah jendela Admin. Untuk masuk jendela Admin adalah dengan meng-klik Admin yang ada di bagian footer.
1. Buat folder baru dengan nama admin di D:\TUTOR WEB\RIANKLIK\
2. Buat file .PHP dengan nama index.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file index.php di dalam folder admin. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
<?php include_once("check_admin.php"); ?>
<!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>Rianklik Admin</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head2.php"); ?>
<!---------------------- closing LINK -------------------------->
</head>
<body>
<div id="wrapper">
<div id="manager" class="one-edge-shadow">
<!---------------------- LINK -------------------------->
<?php include_once("template_headerP.php"); ?>
<!---------------------- closing LINK -------------------------->
<div id="managerA">
<!--- when Home button clicked it also destroy SESSION['manager']
log out from SESSION['manager']) --->
<a href="../logout.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>
<br />
<br />
<a href="shipping_list.php"><input name="shipping" type="button"
value="Biaya Pengiriman" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="store_register.php"><input name="addStore" type="button"
value="Tambahkan Supplier" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="color.php"><input name="addColor" type="button" value="+ Color"
style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="slideshow_list.php"><input name="addSlide" type="button"
value="+Slideshow Image" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="promo_list.php"><input name="addProductPromo" type="button"
value="+Product Promo Image" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
</div> <!--- END of managerA --->
<div id="managerB">
<a href="clothing_list.php"><input name="manageClothing" type="button"
value="Kelola Clothing" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
</div> <!--- END of managerB --->
<div id="managerC">
<a href="supplier_list.php"><input name="checkSupplier" type="button"
value="Lihat Supplier" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="customer_list.php"><input name="checkCustomer" type="button"
value="Lihat Customer" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="member_list.php"><input name="checkMember" type="button"
value="Lihat Member" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="clothingStock_list.php"><input name="manageStock" type="button"
value="Lihat Stock Clothing" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="clothingOrder_list.php"><input name="checkOrders" type="button"
value="Lihat Pesanan Clothing" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="clothingPurchase_list.php"><input name="checkPur" type="button"
value="Lihat Pembelian Clothing" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="sales_list.php"><input name="checkSales" type="button"
value="Lihat Penjualan" style="font-size:14px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/></a>
<br />
<br />
<a href="konfirmasi_list.php"><input name="checkKP" type="button"
value="Lihat Konfirmasi Pembayaran" style="font-size:14px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/></a>
<br />
<br />
</div> <!--- END of managerC --->
</div><!--- END manager --->
</div><!--- END Wrapper --->
</body>
</html>
3. Buat file .PHP dengan nama admin_login.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file admin_login.php di dalam folder admin. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start();
if(isset($_SESSION["manager"])){
header("location: index.php");
exit();
}
?>
<?php
// Parse the log in form if the user has filled it out and pressed "Log In"
if(isset($_POST["username"])&&isset($_POST["password"])){
// filter everything but numbers and letters
$manager = preg_replace('#[^A-Za-z0-9]#i','',$_POST["username"]);
// filter everything but numbers and letters
$password = preg_replace('#[^A-Za-z0-9]#i','',$_POST["password"]);
// Run mySQL query to be sure that this person is an admin and
//that their password session var equals the database information
// Connect to the mySQL database
include "../phpScripts/connect_to_mysql.php";
// query the person
$sql = mysql_query("SELECT*FROM admin WHERE username='$manager'
AND password='$password' LIMIT 1");
//------- MAKE SURE PERSON EXISTS IN DATABASE ---------
// count the row nums
$existCount = mysql_num_rows($sql);
// evaluate the count
if($existCount == 1){
while($row = mysql_fetch_array($sql)){
$id = $row["id"];
}
$_SESSION["id"] = $id;
$_SESSION["manager"] = $manager;
$_SESSION["password"] = $password;
header("location: index.php");
exit();
} else{
echo 'That information is incorrect, try again <a href="index.php">Click Here</a>';
exit();
} // closing if ...
} //closing if ...
?>
<!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>Admin Login</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head2.php"); ?>
<!---------------------- closing LINK -------------------------->
</head>
<body>
<div id="wrapper">
<div id="adminLogin" class="one-edge-shadow">
<h2>ADMIN LOG IN</h2>
<form id="form1" name="form1" method="post" action="admin_login.php">
User Name:
<br />
<input name="username" type="text" id="username" placeholder="username" size="35"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
<br />
Password:
<br />
<input name="password" type="password" id="password" placeholder="password" size="35"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
<br />
<br />
<input type="submit" name="button" id="button" value="Log In"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</form>
</div><!--- closing admin --->
</div><!--- closing Wrapper --->
</body>
</html>
4. Buat file .PHP dengan nama check_admin.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file check_admin.php di dalam folder admin. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start();
if(!isset($_SESSION["manager"])){
header("location: admin_login.php");
exit();
}
// memastikan manager SESSION ini ada di database
// filter everything but numbers and letters
$managerID = preg_replace ('#[^0-9]#i','',$_SESSION["id"]);
// filter everything but numbers and letters
$manager = preg_replace('#[^A-Za-z0-9]#i','',$_SESSION["manager"]);
// filter everything but numbers and letters
$password = preg_replace('#[^A-Za-z0-9]#i','',$_SESSION["password"]);
// Run mySQL query to be sure that this person is an admin
// and that their password session var equals the database information
// Connect to the mySQL database
include "../phpScripts/connect_to_mysql.php";
$sql = mysql_query("SELECT*FROM admin WHERE id='$managerID'
AND username='$manager' AND password='$password' LIMIT 1");
// query the person, MAKE SURE PERSON EXISTS IN DATABASE
$existCount = mysql_num_rows($sql); // count the row nums
if($existCount == 0){ // evaluate the count
echo "Your login session data is not on record in the database";
exit();
}
?>
5. Buat file .PHP dengan nama template_headerP.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file template_headerP.php di dalam folder admin. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
<div id="headerP">
<div id="logoP">
<img src="http://192.168.88.111/logo_image/rianklik.png"
width="281" height="60" alt="Rianklik"/>
</div><!--- END logo --->
</div><!--- END headerP --->
6. template_links_head2.php
Buka Notepad++, pilih File, klik Open, cari file template_links_head2.php di dalam folder admin. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/beaverslider.js"></script>
<script type="text/javascript" src="../js/beaverslider-effects.js"></script>
<link href="../styleCSS/style.css" rel="stylesheet" type="text/css" />
7. Buat file .PHP dengan nama slideshow_list.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file slideshow_list.php di dalam folder admin. Copy dan paste-kan 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="slideshow_list.php?yesdelete='.$_GET['deleteid'].'">Yes</a>
| <a href="slideshow_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 slideshow WHERE ss_id='$id_to_delete' LIMIT 1")
or die (mysql_error());
// unlink the image from server
if(file_exists($pictodelete)){
unlink($pictodelete);
}
// and reload page
header("location:slideshow_list.php");
exit();
}
?>
<?php
// Parse the form data and add inventory item to the system
if(isset($_POST['addSlide'])){
$name=mysql_real_escape_string($_POST['name']);
// See if that product name is an identical match to another product in the system
$sqlSlide=mysql_query("SELECT ss_id FROM slideshow WHERE name='$name' LIMIT 1");
$productMatch=mysql_num_rows($sqlSlide); // Count the output amount
if($productMatch > 0){
echo 'Sorry you tried to place a duplicate "Name" into the system,
<a href="slideshow_list.php">click here</a>';
exit();
}
// Add this product into the database now
$sqlS=mysql_query("INSERT INTO slideshow
(name, date_added) VALUES('$name', now())")
or die (mysql_error());
$pid=mysql_insert_id();
// Place image in the folder
$newname="$pid.jpg";
// Make sure that the slideshow_images folder in the server has Write permission
move_uploaded_file($_FILES['slide1']['tmp_name'],"../slideshow_images1/$newname");
move_uploaded_file($_FILES['slide2']['tmp_name'],"../slideshow_images2/$newname");
move_uploaded_file($_FILES['slide3']['tmp_name'],"../slideshow_images3/$newname");
move_uploaded_file($_FILES['slide4']['tmp_name'],"../slideshow_images4/$newname");
move_uploaded_file($_FILES['slide5']['tmp_name'],"../slideshow_images5/$newname");
move_uploaded_file($_FILES['slide6']['tmp_name'],"../slideshow_images6/$newname");
header("location:slideshow_list.php"); // Avoid re-adding item when refreshing the page
exit();
}
?>
<?php
// This block grabs the whole list for viewing
$product_list="";
$sql2=mysql_query("SELECT*FROM slideshow ORDER BY date_added DESC");
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)){
$ss_id=$row["ss_id"];
$name=$row["name"];
$date_added=strftime("%d-%m-%Y", strtotime($row["date_added"]));
$product_list.='<div id="slidelist2">';
$product_list.='<div id="slidelist_A1">'.$ss_id.'</div>';
$product_list.='<div id="slidelist_B1">'.$name.'</div>';
$product_list.='<div id="slidelist_C1">'.$date_added.' </div>';
$product_list.='<div id="slidelist_D1"> </div>';
$product_list.='<div id="slidelist_E1"> </div>';
$product_list.='<div id="slidelist_F1"> </div>';
$product_list.="<div id='slidelist_G1'>
<a href='slideshow_list.php?deleteid=$ss_id'>
<button>Del</button>
</a>
</div>";
$product_list.="</div>";
} // closing while ...
}else{ // closing if ...
$product_list="You have no product listed in your store yet";
}
} //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>Slideshow List</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head2.php"); ?>
<!---------------------- END of LINK ------------------->
<!--- Validasi ----------->
<?php include_once("validasi_slide.php"); ?>
<!--- closing Validasi --->
</head>
<body>
<div id="wrapper">
<div id="contentSlide" style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<center><h2>SLIDESHOW LIST</h2></center>
<!--- 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="slideshow_list.php#slideshowForm" 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="slidelist" style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div id="slidelist_A">ID</div>
<div id="slidelist_B">Name</div>
<div id="slidelist_C">Date</div>
<div id="slidelist_D"> </div>
<div id="slidelist_E"> </div>
<div id="slidelist_F"> </div>
<div id="slidelist_G">Delete</div>
</div>
<div id="slidelistWraper">
<?php echo $product_list; ?>
</div>
<center>
<a name="slideshowForm" id="slideshowForm"></a>
<h2>SLIDESHOW IMAGE FORM</h2>
</center>
<form action="slideshow_list.php" enctype="multipart/form-data"
name="myForm" id="myForm" method="post">
<div class="sliderow" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div class="slidebox1">Slideshow Name</div>
<div class="slidebox2">
<select name="name" id="name" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="promoLebaran">Promo Lebaran</option>
<option value="promoTahunBaru">Promo Tahun Baru</option>
</select>
</div><!--- END slidebox2 --->
<div class="slidebox3">
</div><!--- END slidebox3 --->
<div class="slidebox4">
</div><!--- END slidebox4 --->
<!------------------------- IMAGE 1 ----------------------->
<div class="slidebox19">Slide Image 1
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div><!--- END slidebox19 --->
<div class="slidebox20">
<input type="file" name="slide1" id="slide1" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div><!--- END slidebox20 --->
<!------------------------- IMAGE 2 ----------------------->
<div class="slidebox19">Slide Image 2
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div><!--- END slidebox19 --->
<div class="slidebox20">
<input type="file" name="slide2" id="slide2" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div><!--- END slidebox20 --->
<!------------------------- IMAGE 3 ----------------------->
<div class="slidebox19">Slide Image 3
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div><!--- END slidebox19 --->
<div class="slidebox20">
<input type="file" name="slide3" id="slide3" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div><!--- END slidebox20 --->
<!------------------------- IMAGE 4 ----------------------->
<div class="slidebox19">Slide Image 4
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div><!--- END slidebox19 --->
<div class="slidebox20">
<input type="file" name="slide4" id="slide4" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div><!--- END slidebox20 --->
<!------------------------- IMAGE 5 ----------------------->
<div class="slidebox19">Slide Image 5
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div><!--- END slidebox19 --->
<div class="slidebox20">
<input type="file" name="slide5" id="slide5" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div><!--- END slidebox20 --->
<!------------------------- IMAGE 6 ----------------------->
<div class="slidebox19">Slide Image 6
<span style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; color:blue">
(.jpg)
</span>
</div><!--- END slidebox19 --->
<div class="slidebox20">
<input type="file" name="slide6" id="slide6" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
</div><!--- END slidebox20 --->
<div class="slidebox3">
</div><!--- END slidebox3 --->
<div class="slidebox4">
</div><!--- END slidebox4 --->
<div class="slidebox21">
</div><!--- END slidebox21 --->
<div class="slidebox22">
<input type="submit" name="addSlide" id="addSlide"
value="Add This Item Now" style="font-size:15px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"
onclick="javascript:return validateMyForm();" />
</div><!--- END slidebox22 --->
<br />
<br />
<br />
</div><!--- END sliderow --->
</form>
</div><!--- END contentSlide --->
</div><!--- END Wrapper --->
</body>
</html>
8. Buat file .PHP dengan nama promo_list.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file promo_list.php di dalam folder admin. Copy dan paste-kan 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 / product if choosen
if(isset($_GET['deleteid'])){
echo 'Do you really want to delete product with ID of'
.$_GET['deleteid'].
'?<a href="promo_list.php?yesdelete='.$_GET['deleteid'].'">Yes</a>
| <a href="promo_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 promo WHERE p_id='$id_to_delete' LIMIT 1")
or die (mysql_error());
// unlink the image from server
if(file_exists($pictodelete)){
unlink($pictodelete);
}
// and reload page
header("location:promo_list.php");
exit();
}
?>
<?php
// Parse the form data and add inventory item to the system
if(isset($_POST['addPromo'])){
$name=mysql_real_escape_string($_POST['name']);
// Mengecek apakah nama ada di database
$sqlSlide=mysql_query("SELECT p_id FROM promo WHERE name='$name' LIMIT 1");
$productMatch=mysql_num_rows($sqlSlide);
if($productMatch > 0){
echo 'Sorry you tried to place a duplicate "Name" into the system,
<a href="promo_list.php">click here</a>';
exit();
}
// memasukkan item/product ke database
$sqlP=mysql_query("INSERT INTO promo(name, date_added)
VALUES('$name', now())") or die (mysql_error());
$pid=mysql_insert_id();
// Place image in the folder
$newname="$pid.jpg";
// pastikan folder adv_images1 sampai adv_images1 konfigurasinya Write
move_uploaded_file($_FILES['adv1']['tmp_name'],"../adv_images1/$newname");
move_uploaded_file($_FILES['adv2']['tmp_name'],"../adv_images2/$newname");
move_uploaded_file($_FILES['adv3']['tmp_name'],"../adv_images3/$newname");
move_uploaded_file($_FILES['adv4']['tmp_name'],"../adv_images4/$newname");
move_uploaded_file($_FILES['adv5']['tmp_name'],"../adv_images5/$newname");
move_uploaded_file($_FILES['adv6']['tmp_name'],"../adv_images6/$newname");
move_uploaded_file($_FILES['adv7']['tmp_name'],"../adv_images7/$newname");
move_uploaded_file($_FILES['adv8']['tmp_name'],"../adv_images8/$newname");
move_uploaded_file($_FILES['adv9']['tmp_name'],"../adv_images9/$newname");
header("location:promo_list.php");
// Avoid re-adding item when refreshing the page
exit();
} // closing if ...
?>
<?php
// This block grabs the whole list for viewing
$product_list="";
$sql2=mysql_query("SELECT*FROM promo ORDER BY date_added DESC");
if (!empty($sql2)){ // untuk hilangkan error saat tabel kosong
$productCount=mysql_num_rows($sql2); // count the output amount
if($productCount>0){
while($row=mysql_fetch_array($sql2)){
$p_id=$row["p_id"];
$name=$row["name"];
$date_added=strftime("%d-%m-%Y", strtotime($row["date_added"]));
$product_list.='<div id="promolist2">';
$product_list.='<div id="promolist_A1">'.$p_id.'</div>';
$product_list.='<div id="promolist_B1">'.$name.'</div>';
$product_list.='<div id="promolist_C1">'.$date_added.'</div>';
$product_list.='<div id="promolist_D1"> </div>';
$product_list.='<div id="promolist_E1"> </div>';
$product_list.='<div id="promolist_F1"> </div>';
$product_list.="<div id='promolist_G1'>
<a href='promo_list.php?deleteid=$p_id'><button>Del</button></a>
</div>";
$product_list.="</div>";
} // closing while ...
}else{
$product_list="You have no product listed in your store yet";
} // closing if ...
} //closing tambahan ...
// 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>Promo List</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head2.php"); ?>
<!---------------------- END of LINK ------------------->
<!--- Validasi ----------->
<?php include_once("validasi_promo.php"); ?>
<!--- closing Validasi --->
</head>
<body>
<div id="wrapper">
<div id="contentPromo" style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<center><h2>PROMO LIST</h2></center>
<!--- 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="promo_list.php#promoForm" 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="promolist" style="font-size:13px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div id="promolist_A">ID</div>
<div id="promolist_B">Name</div>
<div id="promolist_C">Date</div>
<div id="promolist_D"> </div>
<div id="promolist_E"> </div>
<div id="promolist_F"> </div>
<div id="promolist_G">Delete</div>
</div> <!--- END promolist --->
<div id="promolistWraper">
<?php echo $product_list; ?>
</div>
<center>
<a name="promoForm" id="promoForm"></a>
<h2>PROMO IMAGE FORM</h2>
</center>
<form action="promo_list.php" enctype="multipart/form-data"
name="myForm" id="myForm" method="post">
<div class="promorow" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
<div class="promobox1">Promo Name</div>
<div class="promobox2">
<select name="name" id="name" style="font-size:15px; width: 170px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif">
<option value="0">Please Select</option>
<option value="promoLebaran">Promo Lebaran</option>
<option value="promoTahunBaru">Promo Tahun Baru</option>
</select>
</div><!--- END promobox2 --->
<div class="promobox3"> </div><!--- END promobox3 --->
<div class="promobox4"> </div><!--- END promobox4 --->
<!------------------------- ADV 1 ----------------------->
<div class="promobox19">Promo Image 1
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv1" id="adv1"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<div class="promobox3">
</div><!--- END promobox3 --->
<div class="promobox4">
</div><!--- END promobox4 --->
<!------------------------- ADV 2 ----------------------->
<div class="promobox19">Promo Image 2
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv2" id="adv2"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<!------------------------- ADV 3 ----------------------->
<div class="promobox19">Promo Image 3
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv3" id="adv3"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<!------------------------- ADV 4 ----------------------->
<div class="promobox19">Promo Image 4
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv4" id="adv4"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<!------------------------- ADV 5 ----------------------->
<div class="promobox19">Promo Image 5
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv5" id="adv5"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<div class="promobox3">
</div><!--- END promobox3 --->
<div class="promobox4">
</div><!--- END promobox4 --->
<!------------------------- ADV 6 ----------------------->
<div class="promobox19">Promo Image 6
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv6" id="adv6"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<!------------------------- ADV 7 ----------------------->
<div class="promobox19">Promo Image 7
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv7" id="adv7"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<!------------------------- ADV 8 ----------------------->
<div class="promobox19">Promo Image 8
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv8" id="adv8"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<!------------------------- ADV 9 ----------------------->
<div class="promobox19">Promo Image 9
<span
style="font-size:13px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
color:blue">
(.jpg)
</span>
</div><!--- END promobox19 --->
<div class="promobox20">
<input type="file" name="adv9" id="adv9"
style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif"/>
</div><!--- END promobox20 --->
<div class="promobox21">
</div><!--- END promobox21 --->
<div class="promobox22">
<input type="submit" name="addPromo" id="addPromo" value="Add This Item Now"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"
onclick="javascript:return validateMyForm();" />
</div><!--- END promobox22 --->
<br />
<br />
<br />
</div><!--- END promorow --->
</form>
</div><!--- END contentPromo --->
</div><!--- END Wrapper --->
</body>
</html>
9. Buat file .PHP dengan nama validasi_slide.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file validasi_slide.php di dalam folder admin. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
v_slide
<script type="text/javascript" language="javascript">
// By Adam Khoury @ www.developphp.com
function validateMyForm ( ) {
var isValid = true;
if ( document.myForm.name.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.slide1.value == "" ) {
alert ( "Please select your Slide Image" );
isValid = false;
} else if ( document.myForm.slide2.value == "" ) {
alert ( "Please select your Slide Image" );
isValid = false;
} else if ( document.myForm.slide3.value == "" ) {
alert ( "Please select your Slide Image" );
isValid = false;
} else if ( document.myForm.slide4.value == "" ) {
alert ( "Please select your Slide Image" );
isValid = false;
} else if ( document.myForm.slide5.value == "" ) {
alert ( "Please select your Slide Image" );
isValid = false;
} else if ( document.myForm.slide6.value == "" ) {
alert ( "Please select your Slide Image" );
isValid = false;
}
return isValid;
}
</script>
10. Buat file .PHP dengan nama validasi_promo.php di dalam folder admin
Buka Notepad++, pilih File, klik Open, cari file validasi_promo.php di dalam folder admin. Copy dan paste-kan 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.name.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv1.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv2.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv3.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv4.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv5.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv6.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv7.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv8.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
} else if ( document.myForm.adv9.value == "" ) {
alert ( "Do not leave it blank!" );
isValid = false;
}
return isValid;
}
</script>
11. Buat file .PHP dengan nama logout.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file logout.php di D:\TUTOR WEB\RIANKLIK\. Copy dan paste-kan script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start();
session_destroy();
header('location:index.php');
// use below instead of header('location:index.php');
//if you want to see logged out message
//print "You have been logged out.
//<a href='index.php'>Go back</a>";
?>
12. create_admin_table.php
Buka Notepad++, pilih File, klik Open, cari file create_admin_table.php di dalam folder phpScripts. Copy dan paste-kan 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 admin (
id int(11) NOT NULL auto_increment,
username varchar(24) NOT NULL,
password varchar(24) NOT NULL,
email varchar(50) NOT NULL,
last_log_date date NOT NULL,
PRIMARY KEY (id),
UNIQUE KEY username (username)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your admin table has been created successfully!";
} else {
echo "CRITICAL ERROR: products table has not been created.";
}
?>
13. Buat file .PHP dengan nama insert_admin_name.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file insert_admin_name.php di dalam folder phpScripts. Copy dan paste-kan 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 admin
(id, username, password, email, last_log_date)
VALUES
( '1', 'rian', '654321', 'rian@yahoo.com',now())";
if (mysql_query($sqlCommand)){
echo "Your admin name has been inserted successfully!";
} else {
echo "CRITICAL ERROR: admin name has not been inserted.";
}
?>
14. Buka Notepad++, pilih File, klik Open, cari file style.css di dalam folder styleCSS. tambahkan script warna biru di bawah lalu jangan lupa di-save :
/*--------------- headerP & LogoP ----------------- */
#headerP {
padding: 0px; width: 740px; height: 80px; margin-right: auto;
margin-left: auto; position: relative; z-index: 1000; overflow: hidden;
}
#logoP {
height: 80px; width: 380px; background-position: left top;
float: left; padding: 10px;
}
/*--------------- shadow div----------------- */
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
/*--------------- admin_login----------------- */
#adminLogin {
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 10px; /* regular */
opacity: 0.8; /* Transparent Background 50% */
padding: 20px;
height: 280px;
width: 300px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/*--------------- admin/index----------------- */
#manager {
-moz-border-radius: 10px; /* for Firefox */
-webkit-border-radius: 10px; /* for Webkit-Browsers */
border-radius: 10px; /* regular */
opacity: 0.8;
width: 720px;
margin-right: auto;
margin-left: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
position: relative;
overflow: hidden;
border: 1px solid #CCC;
background-color: #FFF;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}
#managerA {
height: 550px;
width: 230px;
margin-right: auto;
margin-left: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
position: relative;
float: left;
padding-right: 3px;
padding-left: 3px;
padding-top: 5px;
padding-bottom: 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
font-size: 15px;
}
#managerB {
height: 550px;
width: 230px;
margin-right: auto;
margin-left: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
position: relative;
float: left;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
font-size: 15px;
}
#managerC {
height: 550px;
width: 230px;
margin-right: auto;
margin-left: auto;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
position: relative;
float: left;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 3px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
font-size: 15px;
}
/*--------------- slideshow_list/slidebox----------------- */
#contentSlide {
-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: 798px;
position: relative;
overflow: hidden;
padding: 30px;
border: 1px solid #CCC;
background-color: #FFF;
}
#slidelist {
width: 800px;
height: 35px;
margin: 0px;
float: left;
position: relative;
}
#slidelist_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;
}
#slidelist_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;
background-color: #CCC;
}
#slidelist_C {
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;
}
#slidelist_D {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 60px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
}
#slidelist_E {
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;
}
#slidelist_F {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 70px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
}
#slidelist_G {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 160px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
}
#slidelistWraper {
width: 800px;
position: relative;
overflow: hidden;
padding-bottom: 10px;
}
#slidelist2 {
width: 800px;
height: 45px;
margin: 0px;
float: left;
position: relative;
}
#slidelist_A1 {
padding: 2px;
float: left;
height: 45px;
width: 70px;
text-align: center;
margin: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#slidelist_B1 {
margin: 0px;
float: left;
height: 45px;
width: 200px;
text-align: center;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#slidelist_C1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#slidelist_D1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 60px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#slidelist_E1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#slidelist_F1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 70px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#slidelist_G1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 160px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
.sliderow {
width: 523px;
padding: 10px;
margin-left: 130px;
float: left;
margin-right: 130px;
position: relative;
overflow: hidden;
}
.slidebox1 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
padding-top: 15px;
}
.slidebox2 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
}
.slidebox3 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.slidebox4 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.slidebox19 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.slidebox20 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.slidebox21 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
.slidebox22 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
/*--------------- promo_list/promobox----------------- */
#contentPromo {
-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: 798px;
position: relative;
overflow: hidden;
padding: 30px;
border: 1px solid #CCC;
background-color: #FFF;
}
#promolist {
width: 800px;
height: 35px;
margin: 0px;
float: left;
position: relative;
}
#promolist_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;
}
#promolist_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;
background-color: #CCC;
}
#promolist_C {
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;
}
#promolist_D {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 60px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
}
#promolist_E {
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;
}
#promolist_F {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 70px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
}
#promolist_G {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 30px;
width: 160px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
background-color: #CCC;
}
#promolistWraper {
width: 800px;
position: relative;
overflow: hidden;
padding-bottom: 10px;
}
#promolist2 {
width: 800px;
height: 45px;
margin: 0px;
float: left;
position: relative;
}
#promolist_A1 {
padding: 2px;
float: left;
height: 45px;
width: 70px;
text-align: center;
margin: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#promolist_B1 {
margin: 0px;
float: left;
height: 45px;
width: 200px;
text-align: center;
padding: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#promolist_C1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#promolist_D1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 60px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#promolist_E1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 100px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#promolist_F1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 70px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
#promolist_G1 {
text-align: center;
margin: 0px;
padding: 2px;
float: left;
height: 45px;
width: 160px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999;
}
.promorow {
width: 523px;
padding: 10px;
margin-left: 130px;
float: left;
margin-right: 130px;
position: relative;
overflow: hidden;
}
.promobox1 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
padding-top: 15px;
}
.promobox2 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
padding-top: 15px;
}
.promobox3 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.promobox4 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.promobox19 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 30px;
}
.promobox20 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-right: 10px;
padding-left: 10px;
}
.promobox21 {
margin: 0px;
float: left;
height: 30px;
width: 180px;
text-align: left;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 30px;
}
.promobox22 {
margin: 0px;
float: left;
height: 30px;
width: 280px;
text-align: left;
vertical-align: middle;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;
}
15. Buat folder dengan nama DATA_RIANKLIK atau nama lain terserah kalian dan simpan di mana saja kalian mau, asal jangan di dalam D:\TUTOR WEB\RIANKLIK\
Folder tersebut akan berisi file-file data atau file file Photoshop atau Illustrator atau Corel dan file-file lain yang dibutuhkan tapi folder tersebut tidak untuk disimpan di web server.
Disini folder DATA_RIANKLIK ada di D:\TUTOR WEB\DATA_RIANKLIK\
16. Buat 2 folder baru di dalam folder DATA_RIANKLIK dengan nama slide-img dan tshirt
17. Buat 6 file .jpeg, Beri nama: original.jpeg, mens.jpeg, womens.jpeg, boys.jpeg, girls.jpeg, kids.jpeg atau bisa memakai nama lain terserah kalian, ukurannya 960 x 350px, dan kemudian simpan di dalam folder slide-img
File-file tersebut adalah untuk tampilan slideshow di index.php. Desain gambar dan tulisannya terserah kalian.
18. Buat minimal 7 file .jpeg, dengan nama file terserah kalian. 7 file gambar produk T-shirt dengan warna berbeda-beda yaitu merah, biru, abu-abu, hijau dan hitam, dan kemudian simpan di dalam folder tshirt
Saya menyarankan untuk satu warna T-shirt minimal ada 3 variasi pandangan: 1 gambar pandangan depan, 1 gambar pandangan belakang, 1 gambar desainnya/gambar yang ada di T-shirt. Jadi totalnya adalah 7 warna kali 3 pandangan yaitu 21 file .jpeg
tshirt_img
19. Upload semua file yang sudah dibuat ke web server
Untuk file yang ada di dalam folder phpScripts, buka dengan browser 192.168.88.111/phpScripts/, urutannya adalah klik create_admin_table.php terlebih dahulu baru kemudian insert_admin_name.php
20. Buka 192.168.88.111 dari browser (Mozilla Firefox)
Pada bagian bawah (di bagian footer), klik tulisan admin
akan muncul jendela admin login
lalu akan muncul
Slideshow Name: pilih salah satu dari pilihan drop down. Untuk Slide Image 1 sampai dengan Slide Image 6, masing-masing klik Browse cari lokasi tempat file .jpeg-nya.
Disini seperti yang sudah dibuat sebelumnya adalah di D:\TUTOR WEB\DATA_RIANKLIK\slide-image\, kemudian klik Add This Item Now
Jika proses upload berhasil maka akan muncul di list seperti pada gambar di bawah
slide_image_2
tapi belum tentu upload file gambarnya berhasil, oleh karena itu kita cek di halaman index.php dengan cara mengklik tombol <-Home lalu klik lagi pilihan tombol <-Home
Jika sudah terlihat gambar desain kita dan bisa berubah-ubah/berganti-ganti secara otomatis (slide) sebanyak 6 gambar berarti sudah berhasil
22. Ulangi langkah nomor 20, lalu klik tombol +Product Promo Image
Promo Name: pilih salah satu dari pilihan drop down. Untuk Promo Image 1 sampai dengan Promo Image 9, masing-masing klik Browse cari lokasi tempat file .jpeg-nya.
CATATAN:
9 adalah maksimal upload file secara bersamaan, saya mencoba lebih banyak tidak berhasil
Jika proses upload berhasil maka akan muncul di list seperti pada gambar di bawah
tapi sekali lagi, belum tentu upload file gambarnya berhasil, oleh karena itu kita cek di halaman index.php dengan cara mengklik tombol <-Home lalu klik lagi pilihan tombol <-Home
Jika sudah terlihat gambar desain kita berarti upload file gambar berhasil. Jika kursor melewati atas gambar (hover) secara otomatis akan berubah menjadi gambar yang sama dengan yang sudah kalian simpan di dalam folder ayoBelanja
promo_image_5
Sampai disini hasil akhir halaman index.php adalah seperti gambar dibawah
Comments
Post a Comment