[FIXING] search_result make border

web/basic/header.php

@@ -18,6 +18,7 @@ class Header {
                 <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">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <link rel="stylesheet" href="../css/'.$cssName.'.css">
             </head>
         ';
@@ -31,6 +32,7 @@ class Header {
                 <link rel="stylesheet" type="text/css" href="../css/color-lib.css">
                 <link rel="stylesheet" type="text/css" href="../css/basic.css">
                 <link rel="stylesheet" href="../css/'.$cssName.'.css">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <script src="../javascript/'.$jsName.'.js"></script>
             </head>
         ';

web/book_detail/controller.php

@@ -78,7 +78,7 @@
                 }
                 $this->book_rating = round($sum/$count, 1);
             } else {
-                $this->book_rating = (float) 0;
+                $this->book_rating = 0;
             }
         }
     }

web/book_detail/view.php

@@ -41,12 +41,12 @@
                     </div>
                     <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/default.jpg').'">
+                            <img id="book-pict" src="'.self::showPicture('book', $book_detail['ID']).'">
                         </div>
                         <div class="rating-pict">'.
                         self::drawRating($book_rating).
                         '</div>
-                        <div class="text-size-20"><b>'.$book_rating.'/5.0</b></div>
+                        <div class="text-size-20"><b>'.self::floatRating($book_rating).'/5.0</b></div>
                     </div>
                 </div>';
             return $str;
@@ -67,11 +67,19 @@
             return $str . '</div>';
         }
 
-        private function showPicture($obj, $picSrc) {
-            if ($picSrc == NULL) {
-                return '../images/'. $obj .'_picture/default.jpg';
+        private function showPicture($obj, $input) {
+            if ($obj == "book") {
+                if (fileProcessing::isExistBookImage($input)) {
+                    return fileProcessing::getImageBookPathFromRoot($input);
+                } else {
+                    return '/images/books_picture/default.jpg';
+                }
             } else {
-                return $picSrc;
+                if (fileProcessing::isExistProfileImage($input)) {
+                    return fileProcessing::getImageProfilePathFromRoot($input);
+                } else {
+                    return '/images/profiles_picture/default.jpg';
+                }
             }
         }
 
@@ -110,7 +118,7 @@
                     <div class="flex-container align-items-flex-start">
                         <div class="flex-1 flex-review-tab">
                             <div class="reviewer-profile">
-                                <img id="profile_pict" src="'.self::showPicture('profiles',$review['profile_picture']).'">
+                                <img id="profile_pict" src="'.self::showPicture('user', $review['username']).'">
                             </div>
                             <div id="comment-user">
                                 <div id="reviewer">@'.$review['username'].'</div>
@@ -120,7 +128,7 @@
                         <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"><b>'.round($review['rating'], 1).'/5.0</b></div>
+                            <div class="text-size-20" align="center"><b>'.self::floatRating($review['rating']).'/5.0</b></div>
                         </div>
                     </div>';
                 $str = $str . $str_review;
@@ -143,5 +151,9 @@
             }
             return $str;
         }
+
+        private function floatRating($rate) {
+            return number_format((float)$rate, 1, '.', '');
+        }
     }
 ?>
\ No newline at end of file

web/css/basic.css

@@ -225,4 +225,17 @@ a {
 
 #rightbar-pic > div {
     margin-block-end: 10px;
+}
+
+
+.dont-break-out {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
 }
\ No newline at end of file

web/css/book_detail.css

@@ -117,7 +117,7 @@ label {
 
 .modal-message {
     display: flex;
-    height: 15%;
+    height: 10%;
     margin-top: 40px;
     margin-bottom: 40px;
     margin-left: 40px;

web/css/edit_profile.css

@@ -8,6 +8,10 @@
     padding-top: 2.5%;
 }
 
+h1 {
+    font-family: "Nunito Bold" !important;
+}
+
 .right{
     flex-basis: 90%;
     width: fit-content;
@@ -83,7 +87,7 @@
     position: relative;
     margin-left: 10px;
     display: inline-block;
-    width: 2px;
+    overflow: hidden;
 }
 
 .btn {
@@ -93,12 +97,13 @@
     padding: 8px 10px;
     border-radius: 8px;
     font-size: 20px;
+    width: fit-content;
 }
 
 .upload-btn-wrapper input[type=file] {
     font-size: 50px;
     position: absolute;
-    width:100px;
+    width: fit-content;
     left: 0;
     top: 0;
     opacity: 00;
@@ -131,6 +136,7 @@ input[type=file]{
     width: 500px;
     margin-left: 0;
 }
+
 input[type=text]{
     width: 625px;
     font-family: 'Arial';

web/css/login.css

@@ -66,6 +66,7 @@ input, textarea {
     border-width: 2px;
     border-radius: 5px;
     font-family: 'Lucida Sans Regular';
+    font-size: 20px;
     color: orange;
     font-weight: bold;
     letter-spacing: 2px;

web/css/registration.css

@@ -12,6 +12,19 @@ td {
     margin-right: 5px;
 }
 
-textarea {
+#validate_username {
+    margin-top: 5px;
+    display: inline-block;
+}
+
+.form-input textarea {
     width: 100%;
+}
+
+.form-input input {
+    width: 100%;
+}
+
+a {
+    color: #000000;
 }
\ No newline at end of file

web/css/review.css

-#textarea-comment {
+.textarea-comment {
     width: 100%;
-    resize: none;
     font-size: 28px;
     font-family: 'Nunito', sans-serif;
     padding: 5px;
+    resize: none;
+}
+
+.warning-empty-inputs {
+    position: relative;
+}
+
+.comment-bar {
+    margin-block-end: 50px;
 }
 
 .fivestar-rating {

web/css/search_result.css

@@ -53,6 +53,7 @@ h1{
 img{
     height: 150px;
     width: 150px;
+    border: 2px solid black;
 }
 h3{
     color: #F16303;

web/edit_profile/view.php

@@ -43,11 +43,17 @@
 
     echo "<div class=\"right\">"    ;
     echo "<p>Update profile picture</p>"    ;
-    echo "<input id=\"profpict_dummy\" class=\"profpict_dummy\"type=\"text\" name=\"profile_picture2\" readonly>"    ;
-    echo "<div class=\"upload-btn-wrapper\">"   ;
-    echo "<button class=\"btn\">Browse</button>"    ;
-    echo "<input id=\"profpict\" type=\"file\" name=\"profile_picture\" accept=\"image/png, image/jpg, image/jpeg\" onchange=\"showname()\" >"  ;
-    echo "</div>"   ;
+
+    echo '
+        <div class="flex-container">
+            <input id="profpict_dummy" class="profpict_dummy"type="text" name="profile_picture2" readonly>
+            <div class="upload-btn-wrapper">
+                <button class="btn">Browse ...</button>
+                <input id="profpict" type="file" name="profile_picture" accept="image/png, image/jpg, image/jpeg" onchange="showname()" >
+            </div>   
+        </div>
+    ';
+
     echo "</div>"   ;
     echo "</div>"   ;
 

web/history/view.php

@@ -53,7 +53,7 @@ class historyView {
                         <div class="font-weight-bold text-size-20 gray-text">Nomor Order : #'.$data['orderNumber'].'</div>                    
                     </div>
                     <div class="flex-container add-flex-end-justify ">
-                        <a href="'.$data['reviewUrl'].'" class="c-button light-blue c-round">Review</a>
+                        <a href="review?id='.$data['orderNumber'].'" class="c-button light-blue c-round">Review</a>
                     </div>
                 </div>
             </div>

web/javascript/edit_profile.js

 function validateForm(){
-    // alert('Here 2');
+    //alert('Here 2');
     pp = document.getElementById("profpict").value;
     name = document.getElementById("name").value;
     address = document.getElementById("address").value;

web/javascript/review-book.js

@@ -29,4 +29,26 @@ function noHoverStar(starValue) {
             document.getElementById("star"+idx).src = STAR;
         }
     }
-}
+}
\ No newline at end of file
+
+function IsEmptyCommentBar() {
+    return document.getElementById('comment').value === "";
+}
+
+
+function trySubmitSearch() {
+    if (IsEmptyCommentBar()) {
+        document.getElementById("warning-empty-input").style.display = 'table';
+    } else {
+        document.getElementById('book-review').submit();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('comment').addEventListener('keypress', function(event) {
+        if (event.keyCode == 13) {
+            event.preventDefault();
+            trySubmitSearch();
+        }
+    });
+}, false);
\ No newline at end of file

web/javascript/validation.js

+const BLANK_FIELD = "field must be filled.";
+const INVALID_EMAIL_FORMAT = "invalid email format.";
+const INVALID_NAME_LENGTH = "name exceeded 20 characters.";
+const INVALID_PHONENUMBER_FORMAT = "please enter numbers only.";
+const INVALID_PHONENUMBER_LENGTH = "please enter valid phone number (9 - 12 digits).";
+const UNMATCHED_PASSWORD = "unmatched password and confirmed password.";
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+const BLANK_SPACE_REGEX = /^\s*$/
+const NUMBER_REGEX = /^[0-9]*$/
+
+function getFieldValue(inputID) {
+    return document.getElementById(inputID).value;
+}
+
+function validateBlankInput(inputID) {
+    var value = getFieldValue(inputID);
+    if (value == "" || BLANK_SPACE_REGEX.test(value)) {
+        showInvalidInput(inputID + BLANK_FIELD, inputID);
+        return false;
+    } else {
+        hideInvalidInput(inputID);
+        return true;
+    }
+}
+
+function validateBlankPassword() {
+    var validation = true;
+    validation &= validateBlankInput("password-input");
+    validation &= validateBlankInput("confpassword-input");
+    return validation == 1;
+}
+
 //Match password and confirmed password
-function validatePassword() {
+function validateAllPasswords() {
     var pass = document.forms["registrationform"]["password"].value;
     var conf_pass = document.forms["registrationform"]["conf_password"].value;
-    if (pass != conf_pass) {
-        alert("Unmatched password and confirmed password");
+    if (validateBlankPassword()) {
+        if (pass != conf_pass) {
+            alert(UNMATCHED_PASSWORD);
+            highlightInvalidInput("password-input");
+            highlightInvalidInput("confpassword-input");
+            return false;
+        } else {
+            hideInvalidInput("password-input");
+            hideInvalidInput("confpassword-input");
+            return true;
+        }
+    } else {
+        return false;
+    }
+}
+
+function validateName() {
+    if (validateBlankInput("name-input")) {
+        if (getFieldValue("name-input").length > 20) {
+            showInvalidInput(INVALID_NAME_LENGTH, "name-input");
+            return false;
+        } else {
+            hideInvalidInput("name-input");
+            return true;
+        }
+    } else {
         return false;
+    }
+}
+
+function validatePhoneNumber() {
+    if (validateBlankInput("phonenumber-input")) {
+        if (NUMBER_REGEX.test(getFieldValue("phonenumber-input"))) {
+            var getLength = getFieldValue("phonenumber-input").length;
+            if (getLength >= 9 && getLength <= 12) {
+                hideInvalidInput("phonenumber-input");
+                return true;
+            } else {
+                showInvalidInput(INVALID_PHONENUMBER_LENGTH, "phonenumber-input");
+                return false;
+            }
+        } else {
+            showInvalidInput(INVALID_PHONENUMBER_FORMAT, "phonenumber-input")
+        }
     } else {
+        return false;
+    }
+}
+
+function validateUsername() {
+    if (validateBlankInput("username-input")) {
+        return validateAvailability("username");
+    } else {
+        return false;
+    }
+}
+
+function validateEmail() {
+    if (validateBlankInput("email-input")) {
+        re = EMAIL_REGEX;
+        var checkFormat = re.test(String(getFieldValue("email-input")).toLowerCase());
+        if (!checkFormat) {
+            showInvalidInput(INVALID_EMAIL_FORMAT, "email-input");
+            return false;
+        }
+        else {
+            return validateAvailability("email");
+        }
+    } else {
+        return false;
+    }
+}
+
+function validateAddress() {
+    if (validateBlankInput("address-input")) {
         return true;
+    } else {
+        return false;
     }
 }
 
-function validateAccount($input) {
-    var checkTick = document.getElementById("validate_" + $input).innerHTML;
+function validateAvailability(input) {
+    var checkTick = document.getElementById("validate_" + input).innerHTML;
     if (checkTick == "") {
-        alert($input + " is unavailable!");
+        showInvalidInput(input + " is unavailable!", input+"-input");
         return false;
     } else {
+        hideInvalidInput(input+"-input");
         return true;
     }
 }
 
 function submitValidation() {
     var validation = true;
-    validation &= validateAccount("username");
-    validation &= validateAccount("email");
-    validation &= validatePassword();
+    validation &= validateName();
+    validation &= validateUsername();
+    validation &= validateEmail();
+    validation &= validateAllPasswords();
+    validation &= validateAddress();
+    validation &= validatePhoneNumber();
     
     return validation == 1;
 }
@@ -45,4 +154,26 @@ function checkUserAvailability(input, str) {
         xmlhttp.open("GET", "registration/checkaccount.php?type=" + input + "&q=" + str, true);
         xmlhttp.send();
     }
+}
+
+function showInvalidInput(message, inputID) {
+    var message = message.replace(/-input/, " ");
+    var message = message.replace(/conf/, "confirmed ");
+    alert(message);
+    highlightInvalidInput(inputID);
+}
+
+function highlightInvalidInput(inputID) {
+    var border = document.getElementById(inputID).style.border;
+    if (border == "") {
+        document.getElementById(inputID).style.border = "2px solid red";
+    }
+}
+
+function hideInvalidInput(inputID) {
+    //document.getElementById("address-input").style.visibility = "hidden";
+    var border = document.getElementById(inputID).style.border;
+    if (border == "2px solid red") {
+        document.getElementById(inputID).style.border = "";
+    }
 }
\ No newline at end of file

web/profile/view.php

@@ -26,28 +26,28 @@ function viewProfile (array $params) {
                     Your browser does not support SVG
                 </object>
                 <div class="flex-1">Username</div>
-                <div class="flex-2">@'.$params['username'].'</div>
+                <div class="dont-break-out flex-2">@'.$params['username'].'</div>
             </div>
             <div class="flex-container align-items-flex-center">
                 <object class="icon-profile" type="image/svg+xml" data="../svgIcon/mail.svg">
                     Your browser does not support SVG
                 </object>
                 <div class="flex-1">Email</div>
-                <div class="flex-2">'.$params['email'].'</div>