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

[ADD] Modal in book_order

parent 22bc5eda
......@@ -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
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 = 1;
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="location.reload()">&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
......@@ -80,4 +80,52 @@
width: 100px;
height: 30px;
margin-left: 10px;
}
#mark-icon {
max-width: 50px;
max-height: 50px;
margin-right: 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: 15px;
border: 1px solid #888;
width: 30%;
font-size: 20px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
\ No newline at end of file
......@@ -5,7 +5,7 @@ function orderBook(book_id) {
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);
......
<!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/book_review.css" />
</head>
<body>
</body>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
<!--
Font Awesome Free 5.4.1 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
\ 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