Commit a1011d2d authored by Ranindya Paramitha's avatar Ranindya Paramitha
Browse files
parents e8e38145 b5c29be1
......@@ -12,74 +12,74 @@
<script type="text/javascript" src="../js/order-book.js"></script>
</head>
<body>
<div class="detail-container">
<div class="flex-container book-detail">
<div class="flex-1 book-desc">
<div class="orange-text text-size-50" >Judul Buku</div>
<div class="book-author">Pengarang</div>
<div class="text-size-20">Buku ini adalah dsajdjdsfjdsbvfbdhvbfd lorem ipsum dolor sit a</div>
<body>
<div class="detail-container">
<div class="flex-container book-detail">
<div class="flex-1 book-desc">
<div class="orange-text text-size-50" >Judul Buku</div>
<div id="lucu" class="book-author">Pengarang</div>
<div class="text-size-20">Buku ini adalah dsajdjdsfjdsbvfbdhvbfd lorem ipsum dolor sit a</div>
</div>
<div class="add-flex-direction-column book-desc" align="center">
<div class="flex-1">
<img id="book-pict" src="../images/books_picture/4.jpg">
</div>
<div class="add-flex-direction-column book-desc" align="center">
<div class="flex-1">
<img id="book-pict" src="../images/books_picture/4.jpg">
</div>
<div class="rating-pict">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star.svg">
</div>
<div class="text-size-20">5.0/5.0</div>
<div class="rating-pict">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star-filled.svg">
<img class="rating" src="../svgIcon/star.svg">
</div>
<div class="text-size-20">5.0/5.0</div>
</div>
</div>
<div class="book-detail">
<div class="text-size-30">Order</div>
<div class="order-select">
<label>Jumlah: </label>
<select id="order-qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div align="right">
<button class="order-button light-blue" onclick="orderBook(1)">Order</button>
</div>
<div class="book-detail">
<div class="text-size-30">Order</div>
<div class="order-select">
<label>Jumlah: </label>
<select id="order-qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="book-detail">
<div class="text-size-30">Reviews</div>
<div class="flex-review-tab">
<div>
<img id="profile_pict" src="../images/profiles_picture/baron44.jpg">
</div>
<div class="review-desc">
<div class="text-size-20">@heitayo</div>
<div class="text-size-20">Waw keren juga ya asique. lalal yeye llalala yayayay yeyeyeye. lalal yeye llalala yayayay yeyeyeye. lalal yeye llalala yayayay yeyeyeye</div>
</div>
<div align="right">
<button class="order-button light-blue" type="button" onclick="orderBook(1)">Order</button>
<div class="add-flex-direction-column">
<img id="star-icon" src="../svgIcon/star-filled.svg">
<div class="text-size-20" align="center">5.0/5.0</div>
</div>
</div>
<div class="book-detail">
<div class="text-size-30">Reviews</div>
<div class="flex-review-tab">
<div>
<img id="profile_pict" src="../images/profiles_picture/baron44.jpg">
</div>
<div class="review-desc">
<div class="text-size-20">@heitayo</div>
<div class="text-size-20">Waw keren juga ya asique. lalal yeye llalala yayayay yeyeyeye. lalal yeye llalala yayayay yeyeyeye. lalal yeye llalala yayayay yeyeyeye</div>
</div>
<div class="add-flex-direction-column">
<img id="star-icon" src="../svgIcon/star-filled.svg">
<div class="text-size-20" align="center">5.0/5.0</div>
</div>
<div class="flex-review-tab">
<div class="picture">
<img id="profile_pict" src="../images/profiles_picture/baron44.jpg">
</div>
<div class="flex-review-tab">
<div class="picture">
<img id="profile_pict" src="../images/profiles_picture/baron44.jpg">
</div>
<div class="flex-1 book-desc">
<div class="text-size-20">@heitayo</div>
<div class="text-size-20">Waw keren juga ya asique. lalal</div>
</div>
<div class="add-flex-direction-column">
<img id="star-icon" src="../svgIcon/star-filled.svg">
<div class="rating-numeric text-size-20" align="center">5.0/5.0</div>
</div>
<div class="flex-1 book-desc">
<div class="text-size-20">@heitayo</div>
<div class="text-size-20">Waw keren juga ya asique. lalal</div>
</div>
<div class="add-flex-direction-column">
<img id="star-icon" src="../svgIcon/star-filled.svg">
<div class="rating-numeric text-size-20" align="center">5.0/5.0</div>
</div>
</div>
</div>
</body>
</div>
<div id="modal-container"></div>
</body>
</html>
\ No newline at end of file
<?php
class bookDetailViewer {
public const STAR_IMG = 'star.svg';
public const STAR_FULL_IMG = 'star-filled.svg';
public const STAR_IMG = 'star.png';
public const STAR_FULL_IMG = 'star-filled.png';
public static function viewBookDetail($params) {
$book_detail = $params['book_detail'];
......@@ -13,13 +13,14 @@
Header::headerLogin($params['username']).
Header::headerMenu(Header::BROWSE).
self::generateBookDetail($book_detail, $reviews, $book_rating).
self::showScript()
self::showScript().
self::showModal()
);
}
private function generateBookDetail($book_detail, $reviews, $book_rating) {
$str = '<body>
<div class="detail-container">'.
<div class="detail-container add-nunito-font">'.
self::showBookDesc($book_detail, $book_rating).
self::showOrder().
self::showReviews($reviews).
......@@ -32,18 +33,20 @@
$str = '
<div class="flex-container book-detail">
<div class="flex-1 book-desc">
<div class="orange-text text-size-50" >'.$book_detail['Judul'].'</div>
<div class="book-author">'.$book_detail['Pengarang'].'</div>
<div class="text-size-20">'.$book_detail['Deskripsi'].'</div>
<div class="title-author">
<div class="book-title orange-text" ><b>'.$book_detail['Judul'].'</b></div>
<div class="book-author">'.$book_detail['Pengarang'].'</div>
</div>
<div id="detail-paragraph">'.$book_detail['Deskripsi'].'</div>
</div>
<div class="add-flex-direction-column book-desc" align="center">
<div class="add-flex-direction-column" id="rightbar-pic" align="center">
<div class="flex-1">
<img id="book-pict" src="'.self::showPicture('books','../images/books_picture/4.jpg').'">
</div>
<div class="rating-pict">'.
self::drawRating($book_rating).
'</div>
<div class="text-size-20">'.$book_rating.'/5.0</div>
<div class="text-size-20"><b>'.$book_rating.'/5.0</b></div>
</div>
</div>';
return $str;
......@@ -75,10 +78,10 @@
private function showOrder() {
$str = '
<div class="book-detail">
<div class="text-size-30">Order</div>
<div class="head-title">Order</div>
<div class="order-select">
<label>Jumlah: </label>
<select id="order-qty">
<select id="dropdown-order">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
......@@ -87,7 +90,7 @@
</select>
</div>
<div align="right">
<button class="order-button light-blue" type="button" onclick="orderBook(1)">Order</button>
<button class="order-button c-button light-blue" type="button" onclick="orderBook(1)">Order</button>
</div>
</div>';
return $str;
......@@ -96,9 +99,11 @@
private function showReviews($reviews) {
$str = '
<div class="book-detail">
<div class="text-size-30">Reviews</div>'.
self::showPerReview($reviews).
'</div>';
<div class="head-title">Reviews</div>
<div class="reviews">'.
self::showPerReview($reviews).
'</div>
</div>';
return $str;
}
......@@ -110,13 +115,14 @@
<div>
<img id="profile_pict" src="'.self::showPicture('profiles',$review['profile_picture']).'">
</div>
<div class="book-desc">
<div class="text-size-20">@'.$review['username'].'</div>
<div class="text-size-20">'.$review['komentar'].'</div>
<div id="comment-user">
<div id="reviewer">@'.$review['username'].'</div>
<div id="detail-paragraph">'.$review['komentar'].'</div>
</div>
<div class="add-flex-direction-column">
<img id="star-icon" src="../svgIcon/star-filled.svg">
<div class="text-size-20" align="center">'.round($review['rating'], 1).'/5.0</div>
<div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'">
</div>
<div class="text-size-20" align="center"><b>'.round($review['rating'], 1).'/5.0</b></div>
</div>
</div>';
$str = $str . $str_review;
......@@ -125,7 +131,11 @@
}
private function showScript() {
return '<script type="text/javascript" src="../js/order-book.js"></script>';
return '<script type="text/javascript" src="../javascript/order-book.js"></script>';
}
private function showModal() {
return '<div id="modal-container"></div>';
}
}
?>
\ No newline at end of file
<?php
require ('../database/accessDB.php');
require ('view_modal.php');
//check login state
//if (isLogin()) {
// $user_token = getTokenLogin();
......@@ -8,10 +10,9 @@
$book_id = $_GET['book_id'];
$quantity = $_GET['qty'];
//$orderstatus = createNewOrder($book_id, $user_id, $quantity);
$orderstatus = TRUE;
showOrderModal($orderstatus);
$order_id = 100;
showOrderModal($order_id);
///}
function createNewOrder($book_id, $user_id, $quantity) {
......@@ -22,10 +23,15 @@
VALUES ("'. $quantity . '", "' . $currentdate . '", 0, "'
. $book_id . '", "' . $user_id . '")';
$result = $conn->query($sql_query);
$sql_query = 'SELECT * FROM files WHERE id = SCOPE_IDENTITY()';
$result = $conn->query($sql_query);
$order_id = $result->fetch_assoc();
$conn->close();
return TRUE;
return $order_id['Nomor_Order'];
} else {
return FALSE;
return NULL;
}
}
......@@ -35,10 +41,4 @@
$date = $result->fetch_assoc();
return $date['CURDATE()'];
}
function showOrderModal($issuccess) {
echo '<script type="text/javascript">';
echo 'alert("Hore")';
echo '</script>';
}
?>
\ No newline at end of file
<?php
function showOrderModal($order_id) {
echo '
<!-- The Modal-->
<div id="notification-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" onclick="closeModal(\'notification-modal\')">&times;</span>'.
showResult($order_id).
'</div>
</div>';
}
function showResult($order_id) {
if ($order_id != NULL) {
$mesg = "Pembelian Berhasil!";
$detail = "Nomor Transaksi: ". $order_id;
$mark = 'tick';
} else {
$mesg = "Pembelian gagal!";
$detail = "Silakan coba lagi";
$mark = 'cross';
}
return '
<div class="flex-container">
<div><img id="mark-icon" src="../svgIcon/black-'.$mark.'.png"></div>
<div>
<div id="check-description"><b>'.$mesg.'</b></div>
<div>'.$detail.'</div>
</div>
</div>';
}
?>
\ No newline at end of file
......@@ -164,4 +164,62 @@ a {
padding: 0 4px;
margin-top: 1px;
margin-bottom: 1px;
}
/*Book Detail*/
.head-title {
font: 45px 'Nunito Bold', sans-serif;
color: #00374C;
margin-block-end: 10px;
}
.book-title {
font-size: 65px;
}
.detail-container {
padding-left: 50px;
padding-right: 50px;
margin: 50px auto;
position: relative;
}
.detail-container > div {
margin-block-end: 40px;
width: 100%;
}
.title-author {
font-family: 'Nunito Bold', sans-serif;
}
.book-desc {
margin-right: 20px;
}
.book-desc > div {
width: 100%;
margin-block-end: 35px;
}
.book-author {
font-size: 27px;
opacity: 0.7;
}
#book-pict {
max-width: 170px;
max-height: 170px;
border: black;
border-style: solid;
border-width: 1px;
}
#rightbar-pic {
width: 200px;
}
#rightbar-pic > div {
margin-block-end: 10px;
}
\ No newline at end of file
.detail-container {
width: 80%;
margin: 50px auto;
margin-top: 30px;
margin-bottom: 30px;
position: relative;
font-family: 'Lucida Sans Regular';
}
.detail-container > div {
margin-block-end: 20px;
width: 100%;
}
.book-detail > div {
margin-right: 20px;
margin-block-end: 10px;
}
.book-desc > div {
width: 100%;
margin-block-end: 10px;
}
.book-author {
font-size: 25px;
#detail-paragraph {
font-size: 23;
opacity: 0.8;
}
#book-pict {
max-width: 180px;
max-height: 180px;
#comment-user > div{
margin-block-end: 5px;
}
#profile_pict {
max-width: 100px;
max-height: 100px;
border: black;
border-style: solid;
border-width: 2px;
}
.flex-review-tab {
......@@ -46,15 +25,16 @@
}
.rating {
max-width: 30px;
max-width: 40px;
}
#star-icon {
width: 70px;
margin-block-end: 10px;
}
.order-button {
border: none;
width: 100px;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
......@@ -62,7 +42,7 @@
cursor: pointer;
white-space: nowrap;
background-color: #fff;
font-size: 15px;
font-size: 20px;
}
.order-button:hover {background-color: #3e8e41}
......@@ -76,8 +56,73 @@
font-size: 20px;
}
#order-qty {
width: 100px;
label {
font-size: 20px;
}
#dropdown-order {
width: 70px;
height: 30px;
margin-left: 10px;
font-size: 20px;
}
#mark-icon {
max-width: 50px;
max-height: 50px;
margin-right: 20px;
}
#reviewer {
font-size: 27;
font-weight: bold;
opacity: 0.7;
}
.reviews > div {
margin-block-end: 20px;
}
/* Notification Modal */
/* The Modal (background) */
.modal {
/*display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
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 */
font-family: 'Lucida Sans Regular';
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 30px;
border: 1px solid #888;
width: 30%;
font-size: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 30px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
\ No newline at end of file
#textarea-comment {
width: 100%;
resize: none;
font-size: 28px;
font-family: 'Nunito', sans-serif;
margin-block-end: 40px;
}
.fivestar-rating {
max-width: 60px;
max-height: 60px;
cursor: pointer;
}
.rating-pict {
align-items: center;
text-align: center;
margin-block-end: 40px;
}
.submit-button, .back-button {
padding: 2px 30px;
border-radius: 8px;
font-size: 28px;
height: 45px;
}
.submit-button {
float: right;
color: white;
background-color: rgb(9, 136, 196);
}
.back-button {
border: 2px solid #F16303; /* Green */
color: #F16303;
}
.submit-button:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
\ No newline at end of file
//AJAX Order Book
function orderBook(book_id) {
qty = document.getElementById('order-qty').value;
qty = document.getElementById('dropdown-order').value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('order-modal').innerHTML = this.response;
document.getElementById('modal-container').innerHTML = this.response;
}
};
xmlhttp.open("GET", "../book_order/transaction.php?book_id=" + book_id + "&qty=" + qty, true);
xmlhttp.send();
}
//Order Modal
function closeModal(elmtID) {
document.getElementById(elmtID).remove();
}
\ No newline at end of file
const STARPATH = "../svgIcon/";