Commit 9b0a2abf authored by Wildan Dicky Alnatara's avatar Wildan Dicky Alnatara
parents e92a58b5 40564ff4
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Book Detail</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/book_detail.css" />
<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 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="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>
<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>
<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>
</div>
</div>
<div id="modal-container"></div>
</body>
</html>
\ No newline at end of file
...@@ -75,10 +75,10 @@ ...@@ -75,10 +75,10 @@
return '/images/books_picture/default.jpg'; return '/images/books_picture/default.jpg';
} }
} else { } else {
if (fileProcessing::isExistProfileImage($input)) { if ($input == "null" || $input == NULL || !fileProcessing::isExistProfileImage($input)) {
return fileProcessing::getImageProfilePathFromRoot($input);
} else {
return '/images/profiles_picture/default.jpg'; return '/images/profiles_picture/default.jpg';
} else {
return '/uploads/'.$input;
} }
} }
} }
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
<div class="flex-container align-items-flex-start"> <div class="flex-container align-items-flex-start">
<div class="flex-1 flex-review-tab"> <div class="flex-1 flex-review-tab">
<div class="reviewer-profile"> <div class="reviewer-profile">
<img id="profile_pict" src="'.self::showPicture('user', $review['username']).'"> <img id="profile_pict" src="'.self::showPicture('user', $review['profile_picture']).'">
</div> </div>
<div id="comment-user"> <div id="comment-user">
<div id="reviewer">@'.$review['username'].'</div> <div id="reviewer">@'.$review['username'].'</div>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
} }
.left2{ .left2{
flex-basis: 28%; flex-basis: 28%;
padding-left: 20px; /* padding-left: 1.5%; */
padding-top: 2.5%; padding-top: 2.5%;
} }
...@@ -14,16 +14,17 @@ h1 { ...@@ -14,16 +14,17 @@ h1 {
.right{ .right{
flex-basis: 90%; flex-basis: 90%;
width: fit-content;
align-content: left; align-content: left;
padding-left: 5%; padding-left: 5%;
margin-top: 2.5%; margin-top: 2.5%;
padding-right: 9%; padding-right: 5%;
} }
.right2{ .right2{
flex-basis: 72%; flex-basis: 72%;
align-content: left; align-content: left;
padding-right: 15%; /* padding-right: 5%; */
padding-top: 30px; padding-top: 30px;
} }
...@@ -36,9 +37,10 @@ h1 { ...@@ -36,9 +37,10 @@ h1 {
.cols{ .cols{
display: flex; display: flex;
width: fit-content;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
margin-left: 100px; padding-left: 50px;
} }
.rows1{ .rows1{
display: flex; display: flex;
...@@ -53,13 +55,13 @@ h1 { ...@@ -53,13 +55,13 @@ h1 {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
margin-left: 100px; padding-left: 150px;
justify-content: space-around; justify-content: space-around;
height:80px; height:80px;
} }
.rows{ .rows{
margin-left: 100px; padding-left: 150px;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-direction: row; flex-direction: row;
...@@ -79,8 +81,13 @@ h1 { ...@@ -79,8 +81,13 @@ h1 {
} }
.right_button{ .right_button{
flex-basis: 350px; flex-basis: 350px;
margin-right: 120px; margin-right: 20px;
} }
#address {
font-family: 'Arial';
}
.upload-btn-wrapper { .upload-btn-wrapper {
position: relative; position: relative;
margin-left: 10px; margin-left: 10px;
...@@ -95,14 +102,16 @@ h1 { ...@@ -95,14 +102,16 @@ h1 {
padding: 8px 10px; padding: 8px 10px;
border-radius: 8px; border-radius: 8px;
font-size: 20px; font-size: 20px;
width: fit-content;
} }
.upload-btn-wrapper input[type=file] { .upload-btn-wrapper input[type=file] {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
width: fit-content;
left: 0; left: 0;
top: 0; top: 0;
opacity: 0; opacity: 00;
} }
#profpict_dummy{ #profpict_dummy{
...@@ -128,8 +137,9 @@ input[type=file]{ ...@@ -128,8 +137,9 @@ input[type=file]{
color: transparent; color: transparent;
} }
.profpict_dummy{ #profpict_dummy{
width: 500px; width: 500px;
margin-left: 0;
} }
input[type=text]{ input[type=text]{
...@@ -138,10 +148,14 @@ input[type=text]{ ...@@ -138,10 +148,14 @@ input[type=text]{
font-weight: 500; font-weight: 500;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 32px; font-size: 32px;
margin-left: 50px;
padding-left: 10px;
} }
textarea{ textarea{
width: 625px; width: 625px;
margin-left: 50px;
padding-left: 10px;
font-size: 32px; font-size: 32px;
} }
...@@ -175,14 +189,17 @@ textarea{ ...@@ -175,14 +189,17 @@ textarea{
#warning-1{ #warning-1{
visibility: hidden; visibility: hidden;
width: 625px; width: 620px;
margin-left: 50px;
} }
#warning-2{ #warning-2{
visibility: hidden; visibility: hidden;
width: 625px; width: 620px;
margin-left: 50px;
} }
#warning-3{ #warning-3{
visibility: hidden; visibility: hidden;
width: 625px; width: 620px;
margin-left: 50px;
} }
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
.history-image-item { .history-image-item {
height: 200px; height: 200px;
width: 200px; width: 200px;
border: 2px solid black;
} }
#label-history { #label-history {
......
...@@ -70,4 +70,5 @@ input, textarea { ...@@ -70,4 +70,5 @@ input, textarea {
color: orange; color: orange;
font-weight: bold; font-weight: bold;
letter-spacing: 2px; letter-spacing: 2px;
cursor: pointer;
} }
\ No newline at end of file
.book-detail {
margin-block-end: 50px;
}
.textarea-comment { .textarea-comment {
width: 100%; width: 100%;
font-size: 28px; font-size: 28px;
...@@ -6,12 +10,18 @@ ...@@ -6,12 +10,18 @@
resize: none; resize: none;
} }
.warning-empty-inputs { .warning-empty-input {
position: relative; display: none;
position: absolute;
}
#rating-area {
text-align: center;
} }
.comment-bar { .comment-bar {
margin-block-end: 50px; margin-block-end: 50px;
width: 100%;
} }
.fivestar-rating { .fivestar-rating {
......
...@@ -11,9 +11,10 @@ h1{ ...@@ -11,9 +11,10 @@ h1{
} }
.title-right{ .title-right{
flex-basis: 250px; margin-top: 6%;
margin-top: 5%; margin-left: 15%;
margin-left: 26%; color: #7A7A7A;
/*margin-left: 26%;*/
} }
.title-container{ .title-container{
...@@ -54,6 +55,19 @@ img{ ...@@ -54,6 +55,19 @@ img{
height: 150px; height: 150px;
width: 150px; width: 150px;
} }
.pp {
border: 2px solid black;
}
button {
cursor: pointer;
}
.button_row {
font-size: 25px;
}
h3{ h3{
color: #F16303; color: #F16303;
word-wrap: normal; word-wrap: normal;
......
...@@ -22,11 +22,11 @@ ...@@ -22,11 +22,11 @@
} }
// echo $update_name; // echo $update_name;
$update = setUserProfile($user_id, $update_name, $update_address, $update_phone, $name, $tmp_name); $update = setUserProfile($user_id, $update_name, $update_address, $update_phone, $name, $tmp_name);
if ($update == 0){ // if ($update == 0){
echo "<script type='text/javascript'>alert 'Update Failed';</script>"; // echo "<script type='text/javascript'>alert 'Update Failed';</script>";
} else{ // } else{
echo "<script type='text/javascript'>alert 'Update Success';</script>"; // echo "<script type='text/javascript'>alert 'Update Success';</script>";
} // }
header('Location: ../profile'); header('Location: ../profile');
exit; exit;
?> ?>
\ No newline at end of file
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<div class="flex-container"> <div class="flex-container">
<input id="profpict_dummy" class="profpict_dummy"type="text" name="profile_picture2" readonly> <input id="profpict_dummy" class="profpict_dummy"type="text" name="profile_picture2" readonly>
<div class="upload-btn-wrapper"> <div class="upload-btn-wrapper">
<button class="btn">Browse ...</button> <button class="btn">Browse...</button>
<input id="profpict" type="file" name="profile_picture" accept="image/png, image/jpg, image/jpeg" onchange="showname()" > <input id="profpict" type="file" name="profile_picture" accept="image/png, image/jpg, image/jpeg" onchange="showname()" >
</div> </div>
</div> </div>
......
...@@ -71,6 +71,9 @@ function validateForm(){ ...@@ -71,6 +71,9 @@ function validateForm(){
// alert(false); // alert(false);
if (isNameEmpty == true){ if (isNameEmpty == true){
document.getElementById("warning-1").style.visibility = 'visible'; document.getElementById("warning-1").style.visibility = 'visible';
} else if (isNameTooLong == true){
document.getElementById("warning-1").style.visibility = 'visible';
document.getElementById("warning-1").innerHTML = 'Name must be under 20 characters.';
} }
if (isAddressEmpty == true){ if (isAddressEmpty == true){
document.getElementById("warning-2").style.visibility = 'visible'; document.getElementById("warning-2").style.visibility = 'visible';
......
...@@ -12,6 +12,7 @@ function ratingClick(starValue) { ...@@ -12,6 +12,7 @@ function ratingClick(starValue) {
} }
} }
document.getElementById("rating-given").value = starValue; document.getElementById("rating-given").value = starValue;
document.getElementById("rating-area").style.display = 'none';
} }
function hoverStar(starValue) { function hoverStar(starValue) {
...@@ -31,24 +32,27 @@ function noHoverStar(starValue) { ...@@ -31,24 +32,27 @@ function noHoverStar(starValue) {
} }
} }
function IsEmptyCommentBar() { function isEmptyCommentBar() {
return document.getElementById('comment').value === ""; return document.getElementById('comment').value === "";
} }
function isEmptyRating() {
return document.getElementById("rating-given").value == 0;
}
function trySubmitSearch() { function trySubmitSearch() {
if (IsEmptyCommentBar()) { var valid = true;
document.getElementById("warning-empty-input").style.display = 'table'; if (isEmptyCommentBar()) {
document.getElementById("comment-area").style.display = 'table';
valid = false;
} else { } else {
document.getElementById('book-review').submit(); document.getElementById("comment-area").style.display = 'none';
} }
} if (isEmptyRating()) {
document.getElementById("rating-area").style.display = 'table';
document.addEventListener('DOMContentLoaded', function() { valid = false;
document.getElementById('comment').addEventListener('keypress', function(event) { } else {
if (event.keyCode == 13) { document.getElementById("rating-area").style.display = 'none';
event.preventDefault(); }
trySubmitSearch(); return valid;
} }
}); \ No newline at end of file
}, false);
\ No newline at end of file
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
if ($conn !== NULL) { if ($conn !== NULL) {
$sql_query = 'INSERT INTO user (name, username, password, email, address, phone, profile_picture) $sql_query = 'INSERT INTO user (name, username, password, email, address, phone, profile_picture)
VALUES ("'. $name . '", "' . $username . '", "' . $password . '", "' VALUES ("'. $name . '", "' . $username . '", "' . $password . '", "'
. $email . '", "' . $address . '", "' . $phonenumber . '", "' . $username . '")'; . $email . '", "' . $address . '", "' . $phonenumber . '", "null")';
$result = $conn->query($sql_query); $result = $conn->query($sql_query);
$conn->close(); $conn->close();
......
<!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">
<input name="order-id" type="hidden" value="0">
<input name="book-id" 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>