diff --git a/assets/css/detail.css b/assets/css/detail.css
index f65828b8b7062f238a9618a0a6a23f8ec28843da..9904bcfd53de5a3e0530d2348d4c8a4c1c2a27b9 100644
--- a/assets/css/detail.css
+++ b/assets/css/detail.css
@@ -49,6 +49,9 @@ h2{
.detail-right{
grid-column : col-2 / col-3;
+ text-align : center;
+ font-size : 24px;
+ font-weight : bold;
}
.order{
@@ -56,7 +59,7 @@ h2{
grid-row : row-2 / row-3;
}
-img{
+#book-img{
min-width: 50px;
}
@@ -104,25 +107,23 @@ img{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
- padding-top: 100px; /* Location of the box */
+ padding-top: 20%; /* Location of the box */
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
- top: 80%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
+ top: 0;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
- margin: auto;
+ /* margin-top: 200px; */
+ margin: 0 auto auto auto;
padding: 20px;
border: 1px solid #888;
- width: 80%;
+ width: 30%;
}
/* The Close Button */
diff --git a/assets/css/navBar.css b/assets/css/navBar.css
index 16ba39e8c512f8d69732cf5df6cd66f9e0c806e9..b13d327fb578e39dc0981bf131c56c5355b62dfb 100644
--- a/assets/css/navBar.css
+++ b/assets/css/navBar.css
@@ -4,9 +4,14 @@ ul.topNavBar {
overflow: hidden;
margin: 0;
padding: 0;
+ color: #ffffff;
/* height: 40px; */
}
+#username{
+ text-decoration : underline;
+}
+
li {
display: inline-table;
font-family: 'Tw Cen MT';
diff --git a/assets/js/detail.js b/assets/js/detail.js
index 3189b93182ab14c9f53172d31a4e31dac1e1c167..f993507999f49a9e35d5aa392f83ac2fbd335dd8 100644
--- a/assets/js/detail.js
+++ b/assets/js/detail.js
@@ -11,9 +11,7 @@ function order(){
var book_id = window.location.search.split("=")[1];
var d = new Date();
var date = d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate();
- console.log(date);
- console.log(amount);
- console.log(book_id);
+
// get search result by ajax
ajax('ajax/book/order', {
data: {
@@ -27,6 +25,10 @@ function order(){
function showModal(data){
+ let orderid = document.getElementById("order-id");
+ orderid.innerHTML = 'Nomor Transaksi : ' + data['data'];
+ console.log(data['data']);
+
// Get the modal
var modal = document.getElementById('modal');
modal.style.display = "block";
@@ -34,12 +36,6 @@ function showModal(data){
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
- // // When the user clicks the button, open the modal
- // var btn = document.getElementById("order");
- // btn.addEventListener("click", function() {
- // modal.style.display = "block";
- // });
-
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
diff --git a/assets/js/result.js b/assets/js/result.js
new file mode 100644
index 0000000000000000000000000000000000000000..9906448b6ef7f23ac71bc91f45a7674404721e7e
--- /dev/null
+++ b/assets/js/result.js
@@ -0,0 +1,4 @@
+window.onload(function(){
+ var data = "<?= $data['results'] ?>";
+ console.log(data);
+})
\ No newline at end of file
diff --git a/mocks/detail.png b/mocks/detail.png
index 98369bdd1bb9f86b470caf41e3fccc2955f8b6ef..1803f6e5cdc559863801be2a997e56a82ac435c0 100644
Binary files a/mocks/detail.png and b/mocks/detail.png differ
diff --git a/view/detail.php b/view/detail.php
index 921a4151e918ec6a3fbcca657095c0abf0b690a1..daf88f458ee950c2864437412dc01ae39e17688b 100644
--- a/view/detail.php
+++ b/view/detail.php
@@ -1,6 +1,9 @@
<?php
if ($response['code'] != 200) {
- echo $response['code'] . " " . $response['message'];
+ echo "<script>
+ alert('Error : ' + '{$response['code']}' + ' ' + '{$response['message']}');
+ window.location.href='" . URLROOT . 'history' . "';
+ </script>";
die;
}
?>
@@ -18,15 +21,13 @@
css("detail.css");
js("detail.js");
?>
- <!-- <link rel="stylesheet" href="assets/css/detail.css"> -->
- <!-- <script src="assets/js/bootstrap.js"></script> -->
</head>
<body>
<div class="container">
<div class="detail">
<div class="detail-left">
- <h1><?php echo $data['book']->title;?></h1> <br>
- <h4><?php echo $data['book']->author;?></h4> <br>
+ <h1><?php echo $data['book']->title;?></h1>
+ <h4><?php echo $data['book']->author;?></h4>
<p>
<?php
echo $data['book']->description;
@@ -34,15 +35,29 @@
</p>
</div>
<div class="detail-right">
- <!-- <img src="../ajax/image/get?id=1" alt="si teng lang" width=100px> -->
- <img src=
+ <img class="profile" src=
<?php
if(empty($data['book']->image_id)){
- echo path();
+ echo path("assets/image/empty_image");
+ } else {
+ path("ajax/image/get?id=" . $data['book']->image_id);
+ }
+ ?>
+ alt="book picture" id="book-img" width=100px height=100px> <br>
+ <?php
+ $avgrating = $data['book']->avgrating;
+ echo(number_format($avgrating, 1) . " / 5.0 <br>");
+ $avgrating = round($avgrating, 0, PHP_ROUND_HALF_DOWN);
+
+ // print full star
+ for($i = 0; $i < $avgrating; $i++){
+ echo("<img src=\"/book/assets/image/full_star.png\") width=23px height=23px>");
+ }
+ // print empty star
+ for($i = 0; $i < 5-$avgrating; $i++){
+ echo("<img src=\"/book/assets/image/empty_star.png\") width=23px height=23px>");
}
- path("ajax/image/get?id=1");
?>
- alt="book picture" id="book-img" width=100px height=100px>
</div>
</div>
<!-- end of detail div -->
@@ -65,23 +80,27 @@
</div>
<!-- end of order div -->
<div class="review">
- <h2>Reviews</h2>
- <?php
- $reviews = $data['reviews'];
- foreach($reviews as $review){
- createReviewItem($review);
- }
- ?>
+ <h2>Reviews</h2>
+ <?php
+ $reviews = $data['reviews'];
+ for($i=0; $i<count($reviews); $i++){
+ $review = $reviews[$i];
+ createReviewItem($review);
+ }
+ ?>
</div>
<!-- end of review div -->
</div>
- <!-- The Modal -->
+ <!-- end of container div -->
+
+ <!-- Modal -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
- <span class="close">×</span>
- <p>Some text in the Modal..</p>
+ <span class="close">×</span>
+ <b>Pemesanan Berhasil!</b><br>
+ <div id="order-id"></div>
</div>
</div>
@@ -90,25 +109,29 @@
<?php
function createReviewItem($review){
- echo("<div class=\"review-item\">");
- echo("<div class=\"review-left\">");
- echo("<img src=\"");
- echo("</div>");
- echo("</div>");
- echo("<div class=\"review-middle\"");
- echo("<div class=\"review-username\"");
- echo $review->username;
- echo("</div>");
- echo("<div class=\"review-message\"");
- $message = "<p>" . $review->message . "</p>";
- echo $message;
- echo("</div>");
- echo("</div>");
- echo("<div class=\"review-right\"");
- echo $review->rating;
- echo("</div>");
- echo("</div>");
- echo "<br>";
- echo("</div>");
+ if(empty($review->image_id)){
+ $image_src = "\"/book/assets/image/dummy.jpg\"";
+ } else {
+ $image_src = "/book/ajax/image/get?id=" . $review->image_id;
+ }
+ echo("
+ <div class=\"review-item\">
+ <div class=\"review-left\">
+ <img class=\"profile\" src=" . $image_src . " width=100% height=100px>
+ </div>
+ <div class=\"review-middle\">
+ <div class=\"review-username\">
+ @". $review->username .
+ "</div>
+ <div class=\"review-message\">
+ <p>" . $review->message . "</p>
+ </div>
+ </div>
+ <div class=\"review-right\">
+ <img src=\"/book/assets/image/full_star.png\" width=50px height=50px><br>"
+ . number_format($review->rating, 1) . "/5.0" .
+ "</div>
+ </div>
+ ");
}
?>
\ No newline at end of file
diff --git a/view/item.php b/view/item.php
new file mode 100644
index 0000000000000000000000000000000000000000..f701b1ba515b1efca53ea83fc1f6282bd1c226cd
--- /dev/null
+++ b/view/item.php
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<div class="item">
+ <div class="book-image">
+ <img class="book-image" src=<?php path("ajax/image/get?id=". $image_id)?> alt="book-image" width=100px height=100px>
+ </div>
+ <div class="book-title">
+ <?php echo($title) ?>
+ </div>
+ <div class="book-author">
+ <?php echo($author . ' - ' . $avgrating . '/5.0' . ' (' . $votes . ' votes)') ?>
+ </div>
+ <div class="book-desc">
+ <p><?php echo($description) ?></p>
+ </div>
+ <div class="book-detail">
+ <a href=<?php echo("detail?id=".$book_id);?>><button class="detail-btn">Detail</button></a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/view/result.php b/view/result.php
index 89f421a7ca1f7a2a053be6c716bc7735c098ee8c..1a26dd414890b9a9d0b81ffdc42175f732813d51 100644
--- a/view/result.php
+++ b/view/result.php
@@ -15,15 +15,15 @@
<body>
<div class="container">
<?php
- if(count($data['results']) == 0){
- echo "no results found";
- return;
- }
+ // if(count($data['results']) == 0){
+ // echo "no results found";
+ // return;
+ // }
?>
<div id="searchSection">
<div id="header">
<div id="searchbook">
- <h1>Search Book</h1>
+ <h1>Search Result</h1>
</div>
<div id="resultcount">
<h5>Found <u><b><?php echo($data['count']) ?></u></b> results.</h5>
@@ -52,13 +52,13 @@
echo(
"<div class=\"item\">
<div class=\"book-image\">
- <img class=\"book-image\" src=". $image_src . "alt=\"book-image\" width=100% height=80px>
+ <img class=\"book-image\" src=". $image_src . " alt=\"book-image\" width=100% height=80px>
</div>
<div class=\"book-title\">"
. $result->title .
"</div>
<div class=\"book-author\">"
- . $result->author . " - " . $result->avgrating . "/5.0" . " (" . $result->votes . " votes)" .
+ . $result->author . " - " . number_format($result->avgrating, 1) . "/5.0" . " (" . $result->votes . " votes)" .
"</div>
<div class=\"book-desc\">
<p>" . $result->description . "</p>
diff --git a/view/search.php b/view/search.php
index f5c35841059a0a5b5a81f58c54f7d8481b740670..55e166ca227caf616e01460c08216f69ae4b9fc4 100644
--- a/view/search.php
+++ b/view/search.php
@@ -19,7 +19,7 @@
<div id="resultcount"></div>
</div>
<div id="form">
- <form action="browse/result" method="GET">
+ <form name="search" onsubmit="return validate()" action="browse/result" method="GET">
<input id="title" type="text" value = "" name="title" placeholder="Input search terms..." autofocus><br>
<button id="search" type="submit">Search</button>
</form>