Commit b5c29be1 authored by Erma Safira Nurmasyita's avatar Erma Safira Nurmasyita
Browse files

[ADD] Review interface

parent 72838a0b
......@@ -34,7 +34,7 @@
<div class="flex-container book-detail">
<div class="flex-1 book-desc">
<div class="title-author">
<div class="orange-text text-size-50" ><b>'.$book_detail['Judul'].'</b></div>
<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>
......@@ -46,7 +46,7 @@
<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;
......@@ -119,10 +119,10 @@
<div id="reviewer">@'.$review['username'].'</div>
<div id="detail-paragraph">'.$review['komentar'].'</div>
</div>
<div id="add-flex-direction-column">
<div class="add-flex-direction-column">
<div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'">
</div>
<div class="text-size-20" align="center">'.round($review['rating'], 1).'/5.0</div>
<div class="text-size-20" align="center"><b>'.round($review['rating'], 1).'/5.0</b></div>
</div>
</div>';
$str = $str . $str_review;
......
......@@ -175,7 +175,7 @@ a {
}
.book-title {
size: 50px;
font-size: 65px;
}
.detail-container {
......
......@@ -30,6 +30,7 @@
#star-icon {
width: 70px;
margin-block-end: 10px;
}
.order-button {
......
......@@ -3,18 +3,39 @@
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
const STARPATH = "../svgIcon/";
const FULL_STAR = STARPATH + "star-filled.png";
const STAR = STARPATH + "star.png";
function ratingClick(starValue) {
for (idx = 1; idx <= 5; idx++) {
if (idx <= starValue) {
document.getElementById("star"+idx).src = FULL_STAR;
} else {
document.getElementById("star"+idx).src = STAR;
}
}
document.getElementById("rating-given").value = starValue;
}
function hoverStar(starValue) {
for (idx = 1; idx <= 5; idx++) {
if (idx <= starValue) {
document.getElementById("star"+idx).src = FULL_STAR;
}
}
}
function noHoverStar(starValue) {
var rating = document.getElementById("rating-given").value;
for (idx = 1; idx <= 5; idx++) {
if (idx <= starValue && idx > rating) {
document.getElementById("star"+idx).src = STAR;
}
}
}
\ No newline at end of file
<?php
include('view.php');
?>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Book Review</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/header.css">
<link rel="stylesheet" type="text/css" href="../css/color-lib.css">
<link rel="stylesheet" type="text/css" href="../css/basic.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/review.css" />
<script type="text/javascript" src="../javascript/review-book.js"></script>
</head>
<body>
<div class="detail-container add-nunito-font">
<div class="flex-container book-detail">
<div class="flex-1">
<div class="book-title orange-text"><b>Judul Buku</b></div>
<div class="book-author"><b>Pengarang</b></div>
</div>
<div class="add-flex-direction-column" id="rightbar-pic" align="center">
<div class="flex-1">
<img id="book-pict" src="../images/books_picture/4.jpg">
</div>
</div>
</div>
<form action="submit_review.php" method="POST">
<div class="book-detail">
<div class="head-title">Add Rating</div>
<div class="order-select">
<div class="rating-pict">
<input type="image" id="star1" class="fivestar-rating" onclick="ratingClick(this.value); return false;"
src="../svgIcon/star.png" value="1"
onmouseout="noHoverStar(this.value)" onmouseover="hoverStar(this.value)">
<input type="image" id="star2" class="fivestar-rating" onclick="ratingClick(this.value); return false;"
src="../svgIcon/star.png" value="2"
onmouseout="noHoverStar(this.value)" onmouseover="hoverStar(this.value)">
<input type="image" id="star3" class="fivestar-rating" onclick="ratingClick(this.value); return false;"
src="../svgIcon/star.png" value="3"
onmouseout="noHoverStar(this.value)" onmouseover="hoverStar(this.value)">
<input type="image" id="star4" class="fivestar-rating" onclick="ratingClick(this.value); return false;"
src="../svgIcon/star.png" value="4"
onmouseout="noHoverStar(this.value)" onmouseover="hoverStar(this.value)">
<input type="image" id="star5" class="fivestar-rating" onclick="ratingClick(this.value); return false;"
src="../svgIcon/star.png" value="5"
onmouseout="noHoverStar(this.value)" onmouseover="hoverStar(this.value)">
<!-- Rating value submitted via POST Method-->
<input name="rating-value" id="rating-given" type="hidden" value="0">
</div>
</div>
</div>
<div class="book-detail">
<div class="head-title">Add Comment</div>
<div class="flex-review-tab">
<div class="comment-bar">
<textarea id="textarea-comment" name="comment" cols="180" rows="5"></textarea>
</div>
</div>
</div>
<div class="review-button">
<div>
<button class="back-button c-button" type="button" onClick="window.history.back()">Back</button>
<button class="submit-button c-button light-blue" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment