PHP MySQL Ecommerce Web Design Part 13
Postingan saya kali ini adalah membuat halaman clothing_prodComment.php beserta file-file pendukungnya.
1. Buat file .PHP dengan nama clothing_prodComment.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file clothing_prodComment.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
//start session first thing in script
session_start();
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
////////////// view posted comment //////////////////////////
$comment_list="";
$sql=mysql_query("SELECT clothingComment.com_id, clothingComment.c_id, clothingComment.id,
clothingComment.comment, clothingComment.date_added, customer.customer_name,
clothing.product_name FROM clothingComment
INNER JOIN customer ON customer.c_id=clothingComment.c_id
INNER JOIN clothing ON clothing.id=clothingComment.id
ORDER BY id ASC
");
include_once("template_page.php");
$sql2=mysql_query("SELECT clothingComment.com_id, clothingComment.c_id, clothingComment.id,
clothingComment.comment, clothingComment.date_added, customer.customer_name,
clothing.product_name FROM clothingComment
INNER JOIN customer ON customer.c_id=clothingComment.c_id
INNER JOIN clothing ON clothing.id=clothingComment.id
ORDER BY id ASC
$limit
");
include_once("template_page2.php");
if (!empty($sql2)){ // tambahan untuk hilangkan error saat tabel clothing kosong
$commentCount=mysql_num_rows($sql2); // count the output amount
if($commentCount>0){
while($rows=mysql_fetch_array($sql2)) {
$comid=$rows['com_id'];
$comcid=$rows['c_id'];
$com_id=$rows['id'];
$comname=$rows['customer_name'];
$com_comment=$rows['comment'];
$comdate=$rows["date_added"];
$product_name=$rows["product_name"];
// merubah data string yang keluar dari database bukan yang masuk ke database
$chars=array(
":>",
":))",
":<",
":o",
":[<",
":]<",
":)",
":T",
":[])",
":3",
":].",
"(:)",
":x",
"=)",
":/>",
".:)",
"(:-",
"(-P",
"(-/)",
"/:)"
);
$icons=array(
'<img src="smiley_svg/1.svg" width="15" height="15"/>',
'<img src="smiley_svg/2.svg" width="15" height="15"/>',
'<img src="smiley_svg/3.svg" width="15" height="15"/>',
'<img src="smiley_svg/4.svg" width="15" height="15"/>',
'<img src="smiley_svg/5.svg" width="15" height="15"/>',
'<img src="smiley_svg/6.svg" width="15" height="15"/>',
'<img src="smiley_svg/7.svg" width="15" height="15"/>',
'<img src="smiley_svg/8.svg" width="15" height="15"/>',
'<img src="smiley_svg/9.svg" width="15" height="15"/>',
'<img src="smiley_svg/10.svg" width="15" height="15"/>',
'<img src="smiley_svg/11.svg" width="15" height="15"/>',
'<img src="smiley_svg/12.svg" width="15" height="15"/>',
'<img src="smiley_svg/13.svg" width="15" height="15"/>',
'<img src="smiley_svg/14.svg" width="15" height="15"/>',
'<img src="smiley_svg/15.svg" width="15" height="15"/>',
'<img src="smiley_svg/16.svg" width="15" height="15"/>',
'<img src="smiley_svg/17.svg" width="15" height="15"/>',
'<img src="smiley_svg/18.svg" width="15" height="15"/>',
'<img src="smiley_svg/19.svg" width="15" height="15"/>',
'<img src="smiley_svg/20.svg" width="15" height="15"/>'
);
$new_com_comment=str_replace($chars, $icons, $com_comment);
// jika file image dengan nama=$com_id ada maka...
if (file_exists('clothing_images1/'.$com_id.'.jpg')) {
$comment_list .='
<div id="combox" style="font-size:13px">
<div id="compic" style="font-size:13px">
<a href="clothing_prod.php?id='.$com_id.'" title="Product Detail">
<img class="goyang100" src="clothing_images1/' . $com_id . '.jpg" width="57"
height="57" alt="x" class="one-edge-shadow" style="border-color:blue;
border-style:solid; border-width:1px" />
</a>
<div style="padding-top:5px">
<a href="clothingCommentReply.php?rid='.$comid.'" title="Reply">
<img src="svg_images/arrow34.svg" width="15" height="15"/>Reply
</a>
</div>
</div>
<div id="com" class="tip left" style="font-size:13px">
<font color="#0066FF">'. $comdate . '</font>
<font color="#0066FF">' . $comname . '</font>
<font color="#0066FF">mengomentari</font>
<font color="#0066FF">'. $product_name . '</font>
<br />
' . $new_com_comment . '
<br />
</div>
</div>
';
} else {
$comment_list .='
<div id="combox" style="font-size:13px">
<div id="compic" style="font-size:13px">
<a href="clothing_prod.php?id='.$com_id.'" title="Product Detail">
<img class="goyang100" src="clothing_images1/minion.jpg" width="57" height="57"
alt="x" class="one-edge-shadow" style="border-color:blue;
border-style:solid; border-width:1px" />
</a>
<div style="padding-top:5px">
<a href="clothingCommentReply.php?rid='.$comid.'" title="Reply">
<img src="svg_images/arrow34.svg" width="15" height="15"/>Reply
</a>
</div>
</div>
<div id="com" class="tip left" style="font-size:13px">
<font color="#0066FF">'. $comdate . '</font>
<font color="#0066FF">' . $comname . '</font>
<font color="#0066FF">mengomentari</font>
<font color="#0066FF">'. $product_name . '</font>
<br />
' . $new_com_comment . '
<br />
</div>
</div>
';
} // closing if ...
} // closing while loop
} // 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>Clothing Comment</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head.php"); ?>
<!---------------------- END of LINK -------------------------->
<!---------------------- LINK FREE BEAVER SLIDER -------------------------->
<?php include_once("template_js_beaverSlider_slideshow.php"); ?>
<!---------------------- END of LINK FREE BEAVER SLIDER -------------------------->
</head>
<body>
<div id="wrapper">
<div id="header_wrap">
<div id="header">
<?php include_once("template_clothingHeader.php"); ?>
</div> <!----closing header------>
<?php include_once("clothing_searchWrap.php"); ?>
</div> <!----closing header_wrap------>
<div id="contentProd">
<?php
// if( !empty($_SESSION['manager']) ){
?>
<!--- Pagination here --->
<div id="pagNum3" align="left" style="font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; font-size:15px">
<?php echo $paginationDisplay; ?>
</div> <!--- END pagNum --->
<br />
<center><h2>KOMENTAR PRODUK PAKAIAN</h2></center>
<div id="prodcomRight" align="left">
<?php echo $comment_list; ?>
</div><!--END prodcomRight-->
<?php
//} // closing if( !empty($_SESSION['manager']) )
?>
</div><!--END contentProd-->
<div id="footer">
<?php include_once("template_footer.php"); ?>
</div> <!----closing footer------>
</div> <!----closing wraper------>
<?php include_once("template_js_body.php"); ?>
</body>
</html>
2. Buat file .PHP dengan nama clothing_comment.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file clothing_comment.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start(); //start session first thing in script
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
if(isset($_GET['id'])){
$id=preg_replace('#[^0-9]#i','',$_GET['id']);
$sql=mysql_query("SELECT*FROM clothing WHERE id='$id' LIMIT 1");
$productCount=mysql_num_rows($sql); // count the output amount
if($productCount>0){
// get all the product details
while($row=mysql_fetch_array($sql)){
$product_name=$row["product_name"];
$product_price=$row["product_price"];
$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("%b %d, %y", strtotime($row["date_added"]));
} // closing while ...
}else{
echo "that item does not exists";
exit();
} // closing if ...
}else{
echo "Data to render this page is missing.";
exit();
} // closing if ...
// After done scripting close any mysql connection
//mysql_close();
?>
<?php
if (isset($_SESSION['manager'])){
$manager_name=($_SESSION['manager']);
$custsql=mysql_query("SELECT*FROM customer WHERE customer_name='$manager_name' ")
or die(mysql_error());
while($row = mysql_fetch_array($custsql)){
$c_id=$row['c_id'];
}
} // 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>Clothing Comment</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head.php"); ?>
<!---------------------- END of LINK -------------------------->
</head>
<body>
<div id="wrapper">
<div id="commentWrap" class="one-edge-shadow">
<h2>KOMENTAR PRODUK</h2>
<form
id="commentForm" name="commentForm" method="post" action="clothing_ifComment.php"
enctype="multipart/form-data" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
Name:
<br />
<input type="text" disabled="disabled" name="customer_name" size="35"
value="<?php if (!empty($_SESSION["manager"])){ echo "$manager_name"; } else{ echo "";} ?>"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
<br />
<label>Produk ID: </label>
<br />
<input type="text" disabled="disabled" name="prodid" size="27" value="<?php echo "$id"; ?>" style="font-size:15px; font-family:'Trebuchet MS', Arial,
Helvetica, sans-serif; border:solid; border-width:1px; border-color:#999"/>
<br />
<label>Comment: </label>
<br />
<textarea name="comment" cols="25" rows="4" style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; border:solid; border-width:1px; border-color:#999"></textarea>
<br />
<br />
<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
<input type="submit" name="submit" id="submitComment" value="Comment" style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
<br />
</form>
<div id="smiley" style="background-color:#CFF; padding:5px; margin-top:5px">
<?php
$sqlsmiley=mysql_query("SELECT * FROM smiley");
while($row=mysql_fetch_array($sqlsmiley)){
$sm_id=$row["sm_id"];
$string=$row["string"];
echo '
<img src="smiley_svg/'.$sm_id.'.svg" width="20" height="20" alt="smile" />
';
echo $row["string"];
echo " ";
//echo "<br />";
} // closing smiley while loop
?>
</div><!----- closing smiley ---->
</div><!--- END commentWrap --->
</div><!--- END Wrapper --->
</body>
</html>
3. Buat file .PHP dengan nama clothing_ifComment.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file clothing_ifComment.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start(); //start session first thing in script
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
/// comment box using login account (you have to login first)
/// pertama: customer register, kedua: customer login, jika sudah login, name di form comment terisi
/// klik comment to submit, id customer, nama customer tersimpan
/// echo id customer, nama customer
if (isset($_SESSION['manager'])){
$manager_name=($_SESSION['manager']);
$custsql=mysql_query("SELECT*FROM customer WHERE customer_name='$manager_name' ")
or die(mysql_error());
while($row = mysql_fetch_array($custsql)){
$c_id=$row['c_id'];
} // closing while ...
} // closing if ...
if (isset ($_POST['submit'])){
if(isset($_POST['pid'])){
$pid=$_POST['pid'];
}
$cust_comment=mysql_real_escape_string($_POST['comment']);
$sql=mysql_query("INSERT INTO clothingComment (c_id, id, comment, date_added)
VALUES('$c_id', '$pid', '$cust_comment', now())")
or die (mysql_error());
header('location:clothing_prodComment.php'); // Avoid re-adding item when refreshing the page
exit();
}
?>
4. Buat file .PHP dengan nama create_clothingComment_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingComment_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 clothingComment (
com_id int(11) NOT NULL auto_increment,
c_id int(11) NOT NULL,
id int(11) NOT NULL,
comment varchar(255) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (com_id),
FOREIGN KEY (c_id) REFERENCES customer(c_id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your clothingComment table has been created successfully!";
} else {
echo "CRITICAL ERROR: clothingComment table has not been created.";
}
?>
5. Buat file .PHP dengan nama create_smiley_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_smiley_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 smiley (
sm_id int(11) NOT NULL auto_increment,
string varchar(16) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (sm_id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your smiley table has been created successfully!";
} else {
echo "CRITICAL ERROR: smiley table has not been created.";
}
?>
6. Buat file .PHP dengan nama insert_smiley_string.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingComment_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 =
"INSERT INTO smiley
(sm_id, string, date_added)
VALUES
('1' , ':>' , now()),
('2' , ':))' , now()),
('3' , ':<' , now()),
('4' , ':o' , now()),
('5' , ':[<' , now()),
('6' , ':]<' , now()),
('7' , ':)' , now()),
('8' , ':T' , now()),
('9' , ':[])' , now()),
('10' , ':3' , now()),
('11' , ':].' , now()),
('12' , '(:)' , now()),
('13' , ':x' , now()),
('14' , '=)' , now()),
('15' , ':/>' , now()),
('16' , '.:)' , now()),
('17' , '(:-' , now()),
('18' , '(-P' , now()),
('19' , '(-/)' , now()),
('20', '/:)' , now())
";
if (mysql_query($sqlCommand)){
echo "Your smiley has been inserted successfully!";
} else {
echo "CRITICAL ERROR: smiley has not been inserted.";
}
?>
7. Buat folder dengan nama smiley_svg di D:\TUTOR WEB\RIANKLIK\
8. Buat / cari 20 gambar (.png) yang serupa dengan gambar dibawah dan samakan urutan nomornya
9. Dengan aplikasi Vector Magic, rubah 20 file .png menjadi 20 file .svg
10. Buka Notepad++, pilih File, klik Open, cari file style.php di dalam folder styleCSS. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
/*--------------- comment----------------- */
#commentWrap {
-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;
padding: 20px;
width: 300px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
overflow: hidden;
}
#contentComment {
-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;
overflow: hidden;
width: 728px;
position: relative;
display: block;
padding-top: 20px;
padding-right: 115px;
padding-bottom: 20px;
padding-left: 115px;
margin-top: 5px;
border: 1px solid #CCC;
}
#prodcom {
width: 680px;
margin: 0px;
position: relative;
float: left;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 50px;
padding-left: 20px;
overflow: hidden;
}
#cusCom {
width: 680px;
position: relative;
padding: 20px;
overflow: hidden;
background-color: #FF9;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#prodcomLeft {
-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;
width: 678px;
position: relative;
height: 250px;
background-size: cover;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
border: 1px solid #CCC;
background-color: #0F0;
float: left;
}
#prodcomRight {
width: 640px;
position: relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 20px;
}
#combox {
width: 630px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 80px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#rebox {
width: 630px;
float: left;
position: relative;
top: 0px;
height: 80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 45px;
}
#compic {
width: 60px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 60px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-top: 0px;
z-index: 10;
}
#repic {
width: 50px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 60px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-top: 0px;
z-index: 10;
}
#com {
width: 0px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 80px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
z-index: 10;
opacity: .7;
background-color: #FFF;
left: 13px;
}
#rep {
width: 0px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 80px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
z-index: 10;
opacity: .7;
background-color: #FFF;
left: 13px;
}
.left {
-moz-border-radius: 10px; /* for Firefox */
-webkit-border-radius: 10px; /* for Webkit-Browsers */
border-radius: 10px; /* regular */
opacity: 0.8; /* Transparent Background 50% */
width: 510px !important;
padding-bottom: 40px;
min-height: auto !important;
padding-right: 0;
float: left;
}
.left > p:first-of-type {
background: #ffd987;
font-style: italic;
padding: 5px 10px;
margin-bottom: 40px;
}
.tip {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2em;
position: relative;
width: 200px;
}
.tip:before {
position: absolute;
top: -14px;
left: 98px;
display: inline-block;
border-right: 14px solid transparent;
border-bottom: 14px solid #fff;
border-left: 14px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.tip:after {
position: absolute;
top: -12px;
left: 99px;
display: inline-block;
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
border-left: 12px solid transparent;
content: '';
}
.tip.left:before {
border-top: 14px solid transparent;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -28px;
top: 20px;
}
.tip.left:after {
border-top: 12px solid transparent;
border-right: 12px solid #fff;
border-bottom: 12px solid transparent;
left: -24px;
top: 22px;
}
11. Upload semua file ke web server
12. Buka dengan browser 192.168.88.111/phpScripts/, klik file create_clothingComment_table.php, create_smiley_table.php, dan insert_smiley_table.php
13. Buka dengan browser 192.168.88.111
Dari halaman mensClothing.php, klik ikon comment disebelah kanan nama produk pada salah satu tampilan produk yang akan kita komentari
Isikan komentar dengan pilihan smiley-nya
Klik Comment
Komentar akan terlihat di halaman clothing_prodComment.php
1. Buat file .PHP dengan nama clothing_prodComment.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file clothing_prodComment.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
//start session first thing in script
session_start();
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
////////////// view posted comment //////////////////////////
$comment_list="";
$sql=mysql_query("SELECT clothingComment.com_id, clothingComment.c_id, clothingComment.id,
clothingComment.comment, clothingComment.date_added, customer.customer_name,
clothing.product_name FROM clothingComment
INNER JOIN customer ON customer.c_id=clothingComment.c_id
INNER JOIN clothing ON clothing.id=clothingComment.id
ORDER BY id ASC
");
include_once("template_page.php");
$sql2=mysql_query("SELECT clothingComment.com_id, clothingComment.c_id, clothingComment.id,
clothingComment.comment, clothingComment.date_added, customer.customer_name,
clothing.product_name FROM clothingComment
INNER JOIN customer ON customer.c_id=clothingComment.c_id
INNER JOIN clothing ON clothing.id=clothingComment.id
ORDER BY id ASC
$limit
");
include_once("template_page2.php");
if (!empty($sql2)){ // tambahan untuk hilangkan error saat tabel clothing kosong
$commentCount=mysql_num_rows($sql2); // count the output amount
if($commentCount>0){
while($rows=mysql_fetch_array($sql2)) {
$comid=$rows['com_id'];
$comcid=$rows['c_id'];
$com_id=$rows['id'];
$comname=$rows['customer_name'];
$com_comment=$rows['comment'];
$comdate=$rows["date_added"];
$product_name=$rows["product_name"];
// merubah data string yang keluar dari database bukan yang masuk ke database
$chars=array(
":>",
":))",
":<",
":o",
":[<",
":]<",
":)",
":T",
":[])",
":3",
":].",
"(:)",
":x",
"=)",
":/>",
".:)",
"(:-",
"(-P",
"(-/)",
"/:)"
);
$icons=array(
'<img src="smiley_svg/1.svg" width="15" height="15"/>',
'<img src="smiley_svg/2.svg" width="15" height="15"/>',
'<img src="smiley_svg/3.svg" width="15" height="15"/>',
'<img src="smiley_svg/4.svg" width="15" height="15"/>',
'<img src="smiley_svg/5.svg" width="15" height="15"/>',
'<img src="smiley_svg/6.svg" width="15" height="15"/>',
'<img src="smiley_svg/7.svg" width="15" height="15"/>',
'<img src="smiley_svg/8.svg" width="15" height="15"/>',
'<img src="smiley_svg/9.svg" width="15" height="15"/>',
'<img src="smiley_svg/10.svg" width="15" height="15"/>',
'<img src="smiley_svg/11.svg" width="15" height="15"/>',
'<img src="smiley_svg/12.svg" width="15" height="15"/>',
'<img src="smiley_svg/13.svg" width="15" height="15"/>',
'<img src="smiley_svg/14.svg" width="15" height="15"/>',
'<img src="smiley_svg/15.svg" width="15" height="15"/>',
'<img src="smiley_svg/16.svg" width="15" height="15"/>',
'<img src="smiley_svg/17.svg" width="15" height="15"/>',
'<img src="smiley_svg/18.svg" width="15" height="15"/>',
'<img src="smiley_svg/19.svg" width="15" height="15"/>',
'<img src="smiley_svg/20.svg" width="15" height="15"/>'
);
$new_com_comment=str_replace($chars, $icons, $com_comment);
// jika file image dengan nama=$com_id ada maka...
if (file_exists('clothing_images1/'.$com_id.'.jpg')) {
$comment_list .='
<div id="combox" style="font-size:13px">
<div id="compic" style="font-size:13px">
<a href="clothing_prod.php?id='.$com_id.'" title="Product Detail">
<img class="goyang100" src="clothing_images1/' . $com_id . '.jpg" width="57"
height="57" alt="x" class="one-edge-shadow" style="border-color:blue;
border-style:solid; border-width:1px" />
</a>
<div style="padding-top:5px">
<a href="clothingCommentReply.php?rid='.$comid.'" title="Reply">
<img src="svg_images/arrow34.svg" width="15" height="15"/>Reply
</a>
</div>
</div>
<div id="com" class="tip left" style="font-size:13px">
<font color="#0066FF">'. $comdate . '</font>
<font color="#0066FF">' . $comname . '</font>
<font color="#0066FF">mengomentari</font>
<font color="#0066FF">'. $product_name . '</font>
<br />
' . $new_com_comment . '
<br />
</div>
</div>
';
} else {
$comment_list .='
<div id="combox" style="font-size:13px">
<div id="compic" style="font-size:13px">
<a href="clothing_prod.php?id='.$com_id.'" title="Product Detail">
<img class="goyang100" src="clothing_images1/minion.jpg" width="57" height="57"
alt="x" class="one-edge-shadow" style="border-color:blue;
border-style:solid; border-width:1px" />
</a>
<div style="padding-top:5px">
<a href="clothingCommentReply.php?rid='.$comid.'" title="Reply">
<img src="svg_images/arrow34.svg" width="15" height="15"/>Reply
</a>
</div>
</div>
<div id="com" class="tip left" style="font-size:13px">
<font color="#0066FF">'. $comdate . '</font>
<font color="#0066FF">' . $comname . '</font>
<font color="#0066FF">mengomentari</font>
<font color="#0066FF">'. $product_name . '</font>
<br />
' . $new_com_comment . '
<br />
</div>
</div>
';
} // closing if ...
} // closing while loop
} // 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>Clothing Comment</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head.php"); ?>
<!---------------------- END of LINK -------------------------->
<!---------------------- LINK FREE BEAVER SLIDER -------------------------->
<?php include_once("template_js_beaverSlider_slideshow.php"); ?>
<!---------------------- END of LINK FREE BEAVER SLIDER -------------------------->
</head>
<body>
<div id="wrapper">
<div id="header_wrap">
<div id="header">
<?php include_once("template_clothingHeader.php"); ?>
</div> <!----closing header------>
<?php include_once("clothing_searchWrap.php"); ?>
</div> <!----closing header_wrap------>
<div id="contentProd">
<?php
// if( !empty($_SESSION['manager']) ){
?>
<!--- Pagination here --->
<div id="pagNum3" align="left" style="font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif; font-size:15px">
<?php echo $paginationDisplay; ?>
</div> <!--- END pagNum --->
<br />
<center><h2>KOMENTAR PRODUK PAKAIAN</h2></center>
<div id="prodcomRight" align="left">
<?php echo $comment_list; ?>
</div><!--END prodcomRight-->
<?php
//} // closing if( !empty($_SESSION['manager']) )
?>
</div><!--END contentProd-->
<div id="footer">
<?php include_once("template_footer.php"); ?>
</div> <!----closing footer------>
</div> <!----closing wraper------>
<?php include_once("template_js_body.php"); ?>
</body>
</html>
2. Buat file .PHP dengan nama clothing_comment.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file clothing_comment.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start(); //start session first thing in script
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
if(isset($_GET['id'])){
$id=preg_replace('#[^0-9]#i','',$_GET['id']);
$sql=mysql_query("SELECT*FROM clothing WHERE id='$id' LIMIT 1");
$productCount=mysql_num_rows($sql); // count the output amount
if($productCount>0){
// get all the product details
while($row=mysql_fetch_array($sql)){
$product_name=$row["product_name"];
$product_price=$row["product_price"];
$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("%b %d, %y", strtotime($row["date_added"]));
} // closing while ...
}else{
echo "that item does not exists";
exit();
} // closing if ...
}else{
echo "Data to render this page is missing.";
exit();
} // closing if ...
// After done scripting close any mysql connection
//mysql_close();
?>
<?php
if (isset($_SESSION['manager'])){
$manager_name=($_SESSION['manager']);
$custsql=mysql_query("SELECT*FROM customer WHERE customer_name='$manager_name' ")
or die(mysql_error());
while($row = mysql_fetch_array($custsql)){
$c_id=$row['c_id'];
}
} // 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>Clothing Comment</title>
<!---------------------- LINK -------------------------->
<?php include_once("template_links_head.php"); ?>
<!---------------------- END of LINK -------------------------->
</head>
<body>
<div id="wrapper">
<div id="commentWrap" class="one-edge-shadow">
<h2>KOMENTAR PRODUK</h2>
<form
id="commentForm" name="commentForm" method="post" action="clothing_ifComment.php"
enctype="multipart/form-data" style="font-size:15px; font-family:'Trebuchet MS',
Arial, Helvetica, sans-serif">
Name:
<br />
<input type="text" disabled="disabled" name="customer_name" size="35"
value="<?php if (!empty($_SESSION["manager"])){ echo "$manager_name"; } else{ echo "";} ?>"
style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif"/>
<br />
<label>Produk ID: </label>
<br />
<input type="text" disabled="disabled" name="prodid" size="27" value="<?php echo "$id"; ?>" style="font-size:15px; font-family:'Trebuchet MS', Arial,
Helvetica, sans-serif; border:solid; border-width:1px; border-color:#999"/>
<br />
<label>Comment: </label>
<br />
<textarea name="comment" cols="25" rows="4" style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; border:solid; border-width:1px; border-color:#999"></textarea>
<br />
<br />
<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
<input type="submit" name="submit" id="submitComment" value="Comment" style="font-size:15px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif" />
<br />
</form>
<div id="smiley" style="background-color:#CFF; padding:5px; margin-top:5px">
<?php
$sqlsmiley=mysql_query("SELECT * FROM smiley");
while($row=mysql_fetch_array($sqlsmiley)){
$sm_id=$row["sm_id"];
$string=$row["string"];
echo '
<img src="smiley_svg/'.$sm_id.'.svg" width="20" height="20" alt="smile" />
';
echo $row["string"];
echo " ";
//echo "<br />";
} // closing smiley while loop
?>
</div><!----- closing smiley ---->
</div><!--- END commentWrap --->
</div><!--- END Wrapper --->
</body>
</html>
3. Buat file .PHP dengan nama clothing_ifComment.php di D:\TUTOR WEB\RIANKLIK\
Buka Notepad++, pilih File, klik Open, cari file clothing_ifComment.php di D:\TUTOR WEB\RIANKLIK\. Isikan sama seperti script warna biru di bawah lalu jangan lupa di-save :
<?php
session_start(); //start session first thing in script
// Connect to the mySQL database
include "phpScripts/connect_to_mysql.php";
// Error Reporting
error_reporting(E_ALL);
ini_set('display_errors','1');
?>
<?php
/// comment box using login account (you have to login first)
/// pertama: customer register, kedua: customer login, jika sudah login, name di form comment terisi
/// klik comment to submit, id customer, nama customer tersimpan
/// echo id customer, nama customer
if (isset($_SESSION['manager'])){
$manager_name=($_SESSION['manager']);
$custsql=mysql_query("SELECT*FROM customer WHERE customer_name='$manager_name' ")
or die(mysql_error());
while($row = mysql_fetch_array($custsql)){
$c_id=$row['c_id'];
} // closing while ...
} // closing if ...
if (isset ($_POST['submit'])){
if(isset($_POST['pid'])){
$pid=$_POST['pid'];
}
$cust_comment=mysql_real_escape_string($_POST['comment']);
$sql=mysql_query("INSERT INTO clothingComment (c_id, id, comment, date_added)
VALUES('$c_id', '$pid', '$cust_comment', now())")
or die (mysql_error());
header('location:clothing_prodComment.php'); // Avoid re-adding item when refreshing the page
exit();
}
?>
4. Buat file .PHP dengan nama create_clothingComment_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingComment_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 clothingComment (
com_id int(11) NOT NULL auto_increment,
c_id int(11) NOT NULL,
id int(11) NOT NULL,
comment varchar(255) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (com_id),
FOREIGN KEY (c_id) REFERENCES customer(c_id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your clothingComment table has been created successfully!";
} else {
echo "CRITICAL ERROR: clothingComment table has not been created.";
}
?>
5. Buat file .PHP dengan nama create_smiley_table.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_smiley_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 smiley (
sm_id int(11) NOT NULL auto_increment,
string varchar(16) NOT NULL,
date_added date NOT NULL,
PRIMARY KEY (sm_id)
)ENGINE = InnoDB";
if (mysql_query($sqlCommand)){
echo "Your smiley table has been created successfully!";
} else {
echo "CRITICAL ERROR: smiley table has not been created.";
}
?>
6. Buat file .PHP dengan nama insert_smiley_string.php di dalam folder phpScripts
Buka Notepad++, pilih File, klik Open, cari file create_clothingComment_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 =
"INSERT INTO smiley
(sm_id, string, date_added)
VALUES
('1' , ':>' , now()),
('2' , ':))' , now()),
('3' , ':<' , now()),
('4' , ':o' , now()),
('5' , ':[<' , now()),
('6' , ':]<' , now()),
('7' , ':)' , now()),
('8' , ':T' , now()),
('9' , ':[])' , now()),
('10' , ':3' , now()),
('11' , ':].' , now()),
('12' , '(:)' , now()),
('13' , ':x' , now()),
('14' , '=)' , now()),
('15' , ':/>' , now()),
('16' , '.:)' , now()),
('17' , '(:-' , now()),
('18' , '(-P' , now()),
('19' , '(-/)' , now()),
('20', '/:)' , now())
";
if (mysql_query($sqlCommand)){
echo "Your smiley has been inserted successfully!";
} else {
echo "CRITICAL ERROR: smiley has not been inserted.";
}
?>
7. Buat folder dengan nama smiley_svg di D:\TUTOR WEB\RIANKLIK\
8. Buat / cari 20 gambar (.png) yang serupa dengan gambar dibawah dan samakan urutan nomornya
9. Dengan aplikasi Vector Magic, rubah 20 file .png menjadi 20 file .svg
/*--------------- comment----------------- */
#commentWrap {
-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;
padding: 20px;
width: 300px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
overflow: hidden;
}
#contentComment {
-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;
overflow: hidden;
width: 728px;
position: relative;
display: block;
padding-top: 20px;
padding-right: 115px;
padding-bottom: 20px;
padding-left: 115px;
margin-top: 5px;
border: 1px solid #CCC;
}
#prodcom {
width: 680px;
margin: 0px;
position: relative;
float: left;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 50px;
padding-left: 20px;
overflow: hidden;
}
#cusCom {
width: 680px;
position: relative;
padding: 20px;
overflow: hidden;
background-color: #FF9;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#prodcomLeft {
-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;
width: 678px;
position: relative;
height: 250px;
background-size: cover;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
border: 1px solid #CCC;
background-color: #0F0;
float: left;
}
#prodcomRight {
width: 640px;
position: relative;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 20px;
}
#combox {
width: 630px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 80px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#rebox {
width: 630px;
float: left;
position: relative;
top: 0px;
height: 80px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 8px;
padding-left: 5px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 45px;
}
#compic {
width: 60px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 60px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-top: 0px;
z-index: 10;
}
#repic {
width: 50px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 60px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
padding-top: 0px;
z-index: 10;
}
#com {
width: 0px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 80px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
z-index: 10;
opacity: .7;
background-color: #FFF;
left: 13px;
}
#rep {
width: 0px;
float: left;
margin: 0px;
position: relative;
top: 0px;
height: 80px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
z-index: 10;
opacity: .7;
background-color: #FFF;
left: 13px;
}
.left {
-moz-border-radius: 10px; /* for Firefox */
-webkit-border-radius: 10px; /* for Webkit-Browsers */
border-radius: 10px; /* regular */
opacity: 0.8; /* Transparent Background 50% */
width: 510px !important;
padding-bottom: 40px;
min-height: auto !important;
padding-right: 0;
float: left;
}
.left > p:first-of-type {
background: #ffd987;
font-style: italic;
padding: 5px 10px;
margin-bottom: 40px;
}
.tip {
background: #fff;
border: 1px solid #ccc;
padding: 10px;
font-size: 1.2em;
position: relative;
width: 200px;
}
.tip:before {
position: absolute;
top: -14px;
left: 98px;
display: inline-block;
border-right: 14px solid transparent;
border-bottom: 14px solid #fff;
border-left: 14px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.tip:after {
position: absolute;
top: -12px;
left: 99px;
display: inline-block;
border-right: 12px solid transparent;
border-bottom: 12px solid #fff;
border-left: 12px solid transparent;
content: '';
}
.tip.left:before {
border-top: 14px solid transparent;
border-right: 14px solid #fff;
border-bottom: 14px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -28px;
top: 20px;
}
.tip.left:after {
border-top: 12px solid transparent;
border-right: 12px solid #fff;
border-bottom: 12px solid transparent;
left: -24px;
top: 22px;
}
11. Upload semua file ke web server
12. Buka dengan browser 192.168.88.111/phpScripts/, klik file create_clothingComment_table.php, create_smiley_table.php, dan insert_smiley_table.php
13. Buka dengan browser 192.168.88.111
Dari halaman mensClothing.php, klik ikon comment disebelah kanan nama produk pada salah satu tampilan produk yang akan kita komentari
Isikan komentar dengan pilihan smiley-nya
Klik Comment
Komentar akan terlihat di halaman clothing_prodComment.php
Comments
Post a Comment