diff --git a/client/css/cart.css b/client/css/cart.css index 9fcbf560405d3023ce8b2b8c4dd9c150ff887070..fb1e4b53d146bae71a5d4760f992888df3b66426 100644 --- a/client/css/cart.css +++ b/client/css/cart.css @@ -20,9 +20,7 @@ } .cart-group{ - margin-left: 15%; - margin-right: 15%; - margin-top: 5%; + padding-top: 10%; display: block; /* background-color: red; */ } @@ -73,7 +71,7 @@ #checkout-button { cursor: pointer; color: white; - background-color: #3c00a0; + background-color: rgb(137, 62, 137); min-width: 25%; height: 10vh; font-size: 20px; diff --git a/client/css/catalog.css b/client/css/catalog.css index aa0ff07d9378d4d7d146177186d5533027546599..3987914848b5079cd8bd9d111640e776af53383c 100644 --- a/client/css/catalog.css +++ b/client/css/catalog.css @@ -14,24 +14,28 @@ mix-blend-mode: multiply; background-position: center; background-size: cover; + display: flex; + flex-direction: column; } .center{ text-align: center; - position: relative; + position: absolute; width: 100%; + bottom: 10px; } .pageview{ width: 100%; - height: 92vh; - top: 8%; + height: 85vh; + top: 0%; flex-shrink: 0; position: relative; } .catalogview{ - height: 86vh; + height: 85vh; + padding-top: 20px; text-align: center; } @@ -68,15 +72,14 @@ height: 35vh; background-color: #e9e9e9; border-radius: 10px; - border: ridge; + border: none; text-align: center; cursor: pointer; } .showItem img{ - border: ridge; width: 90%; - height: auto; + height: 50%; margin-bottom: 5px; text-align: center; } @@ -105,4 +108,9 @@ width: 40%; height: 35%; } + + .showItem p{ + text-align: left; + margin: 5px; + } } \ No newline at end of file diff --git a/client/css/make-sale.css b/client/css/make-sale.css index 003f1c8a5b9485a7a1c0e1a41cf8341f14429318..7e4762391ff881ad149f3c9d8151b3e84146c3c9 100644 --- a/client/css/make-sale.css +++ b/client/css/make-sale.css @@ -19,21 +19,18 @@ background-size: cover; display: block; place-items: center; + display: block; } .saleform-group { - /* position: relative; */ - min-width: 50%; - /* min-height: 67%; */ - max-width: 67%; - margin-left: 15%; - margin-right: 15%; - margin-top: 5%; - /* border-style: ridge; */ - display: block; - border-radius: 10px; - /* border-width: 10px; */ - /* background-color: red; */ + position: relative; + /* width: 31%; + height: 31%; */ + margin-top: 5vh; + min-width: 300px; + flex-shrink: 0; + display: grid; + place-items: center; } .saleform-group h1 { diff --git a/client/css/navbar.css b/client/css/navbar.css index cdbc2e7be1e26b759c07f4c871c1e47c1073fb4d..3c539e2123325e0d2d7f08c18c87918828032130 100644 --- a/client/css/navbar.css +++ b/client/css/navbar.css @@ -2,13 +2,14 @@ display: flex; justify-content: space-evenly; background-color: #AA1E1E; - border: none; + color: #eaeaea; outline: none; color: #eaeaea; /* float: left; */ font-size: 17px; width: 100%; height: 8%; + position: relative; } img{ diff --git a/client/css/sidebar.css b/client/css/sidebar.css new file mode 100644 index 0000000000000000000000000000000000000000..048d0b3645c545846887583ebd4ff1bb0c1d9736 --- /dev/null +++ b/client/css/sidebar.css @@ -0,0 +1,35 @@ +@import url('https://fonts.googleapis.com/css?family=Inter'); + + +.sidebar{ + width: 13%; + top: 8%; + left: -20%; + padding-top: 2vh; + background-color: rgb(12, 12, 82); + height: 92%; + transition: all 0.2s; + position: fixed; +} + +.sidebar li{ + list-style-type: none; + margin-bottom: 15px; + margin-left: 10px; + padding-bottom: 10px; +} + +.sidebar li a{ + font-size: 15px; + margin-left: 2px; + color: #fff; + text-decoration: none; + display: block; +} + +#logout{ + position: absolute; + bottom: 10px; +} + + diff --git a/client/js/catalog.js b/client/js/catalog.js index 1f1fccd959ab355e4c39d25325e8fa9ae153d8c0..97cfb10cb2100acad49b4ba9f53517d9f2d72876 100644 --- a/client/js/catalog.js +++ b/client/js/catalog.js @@ -79,7 +79,7 @@ function changePage(page){ //XMLHttpRequest const formdata = new FormData(); - var row = (page)*10; + var row = (page-1)*10; formdata.append('rows', row); formdata.append('search', document.getElementById("Searchinput").value); console.log(document.getElementById("Searchinput").value); diff --git a/client/js/login-page.js b/client/js/login-page.js index e87eaa638da84f29408ee6611cacb51eeabfca9d..e956baac46e579607507a0852b8af1cd6c3243a0 100644 --- a/client/js/login-page.js +++ b/client/js/login-page.js @@ -112,7 +112,7 @@ signupBtn.onclick = function(){ signupBtn.style.color = "#fff"; signinBtn.style.color = "#555"; nameField.style.maxHeight = "60px"; - title.innerHTML = "SIGN UP";`` + title.innerHTML = "SIGN UP"; signupBtn.classList.remove("disable"); signinBtn.classList.add("disable"); diff --git a/client/js/navbar.js b/client/js/navbar.js index 2f6ce98160fb70cd0351bfe156f19bd2797cf915..25314cd2832e8983f4cd5b7760b35cfab203bb3a 100644 --- a/client/js/navbar.js +++ b/client/js/navbar.js @@ -1,24 +1,15 @@ + addnavbar = () => { return document.getElementById("tabgroup").innerHTML =` - <div class="navbar-container"> - <a class="tabexpand" href="#"> - <i class="fa-solid fa-bars"></i> - </a> - <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%"> - <div class="searchbar"> - <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress=""> - <button class="search" onclick=""> - <i class="fa-solid fa-magnifying-glass"></i> - </button> - </div> - <a class="tabright" href="#"> - <i class="fa-solid fa-cart-shopping"></i> - Cart - </a> - <a class="tabright" href="../pages/catalog.php"> - <i class="fa-solid fa-clipboard-list"></i> - Catalog - </a> + <a id="tabexpand" class="tabexpand" href="javascript:openSidebar()" onclick="openSidebar()"> + <i class="fa-solid fa-bars"></i> + </a> + <img src="../image/logoregis.svg" alt="icon" width="10%" height="5%"> + <div class="searchbar"> + <input id="Searchinput" type="text" placeholder="Search..." value="" onkeypress=""> + <button class="search" onclick=""> + <i class="fa-solid fa-magnifying-glass"></i> + </button> </div> ` } \ No newline at end of file diff --git a/client/js/sidebar.js b/client/js/sidebar.js new file mode 100644 index 0000000000000000000000000000000000000000..0a4bd35034cb7bf980f65d90a1b41e4280f00631 --- /dev/null +++ b/client/js/sidebar.js @@ -0,0 +1,38 @@ +function openSidebar(){ + document.getElementById("sidebar").style.left = "-20%"; + document.getElementById("tabexpand").setAttribute("href","javascript:closeSidebar()"); + document.getElementById("tabexpand").setAttribute("onclick",""); +} + +function closeSidebar(){ + document.getElementById("sidebar").style.left = "0%"; + document.getElementById("tabexpand").setAttribute("href","javascript:openSidebar()"); + document.getElementById("tabexpand").setAttribute("onclick",""); +} + +addsidebar = () => { + return document.getElementById("sidebar").innerHTML = ` + <li><a href='#' id="manageuser"> + <i class="fa-solid fa-user"></i> Account + </a></li> + <li><a href='#' id="manageuser"> + <i class="fa-solid fa-people-roof"></i> + Manage User + </a></li> + <li><a href='#' id="manageitem"> + <i class="fa-solid fa-layer-group"></i> + Manage Item + </a></li> + <li><a href='#' id="adduser"> + <i class="fa-solid fa-user-plus"></i> + Add User + </a></li> + <li><a href='#' id="additem"> + <i class="fa-solid fa-cart-plus"></i> + Add Item + </a></li> + <li><a href='#' id="logout"> + <i class="fa-solid fa-right-from-bracket"></i> + Log Out + </a></li>1` +} \ No newline at end of file diff --git a/client/pages/catalog.php b/client/pages/catalog.php index fd105e48d938c874b42ca38212b3c8b45c04504c..e78cbc00a299384c6b0903047462077df4563c3c 100644 --- a/client/pages/catalog.php +++ b/client/pages/catalog.php @@ -5,7 +5,9 @@ <title>Catalog</title> <link rel="stylesheet" href="../css/catalog.css"> <link rel="stylesheet" href="../css/navbar.css"> + <link rel="stylesheet" href="../css/sidebar.css"> <script src="../js/navbar.js"></script> + <script src="../js/sidebar.js"></script> <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script> <script src="../js/catalog.js"></script> </head> @@ -36,6 +38,11 @@ <a href="javascript:nextPage()" id="btnNext">Next</a> </div> </div> + <div class="sidebar" id="sidebar"> + <script> + addsidebar(); + </script> + </div> </div> </body> </html> \ No newline at end of file diff --git a/client/protoype/cart.html b/client/protoype/cart.html new file mode 100644 index 0000000000000000000000000000000000000000..31fff5c543af234d45b7ac20bc043fd313f9de58 --- /dev/null +++ b/client/protoype/cart.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial scale=1.0"> + <title>Cart</title> + <link rel="stylesheet" href="../css/cart.css"> + <link rel="stylesheet" href="../css/navbar.css"> + <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script> + <script src="../js/navbar.js"></script> + </head> + <body> + <div class="container"> + <div id="tabgroup"> + <script> + addnavbar(); + </script> + </div> + <div class="cart-group"> + <h1> + Cart + </h1> + <div class="cart-list"> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <div class="item"> + <div class="item-picture-group"> + <image src="#" class="item-picture"></image> + </div> + <div class="item-text-fields"> + <label class="item-label">Name</label> + <label class="item-label">Quantity</label> + <label class="item-label">Price</label> + </div> + </div> + <!-- contains item divs according to data --> + </div> + <div class="button-field"> + <button id="checkout-button"> + Checkout + </button> + </div> + </div> + </div> + </body> +</html> \ No newline at end of file diff --git a/client/protoype/sidebar.html b/client/protoype/sidebar.html new file mode 100644 index 0000000000000000000000000000000000000000..544bfc298f02c9d2e7bc363a990a7ddb13610726 --- /dev/null +++ b/client/protoype/sidebar.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <meta name="viewport" content="width=device-width, initial scale=1.0"> + <title>Homepage</title> + <link rel="stylesheet" href="../css/navbar.css"> + <link rel="stylesheet" href="../css/sidebar.css"> + <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script> + <script src="../js/navbar.js"></script> + <script src="../js/sidebar.js"></script> +</head> +<body> + <div class="container"> + <div class="tabgroup" id="tabgroup"> + <script> + addnavbar(); + </script> + </div> + <div class="sidebar" id="sidebar"> + <!--admin sidebar--> + <li><a href='#' id="manageuser"> + <i class="fa-solid fa-people-roof"></i> + Manage User + </a></li> + <li><a href='#' id="manageitem"> + <i class="fa-solid fa-layer-group"></i> + Manage Item + </a></li> + <li><a href='#' id="adduser"> + <i class="fa-solid fa-user-plus"></i> + Add User + </a></li> + <li><a href='#' id="additem"> + <i class="fa-solid fa-cart-plus"></i> + Add Item + </a></li> + <li><a href='#' id="logout"> + <i class="fa-solid fa-right-from-bracket"></i> + Log Out + </a></li> + </div> + </div> +</body> +</html> \ No newline at end of file diff --git a/server/controllers/catalog.php b/server/controllers/catalog.php index 709371cf7dae57d692d8d228a64073e00d4dd716..de70248340e0c55c97591ab18cce572cbb3fd4ee 100644 --- a/server/controllers/catalog.php +++ b/server/controllers/catalog.php @@ -7,7 +7,14 @@ $conn = connect_database(); - $query = "SELECT * FROM `item` WHERE `name` LIKE '%$search%' ORDER BY if (SUBSTRING(name, 1, length('$search'))='$search', 0, 1), name LIMIT $page , 10"; + $query = "SELECT * + ,(CASE WHEN name LIKE '%$search%' THEN 1 ELSE 0 END) + + (CASE WHEN `Seller_username` LIKE '%$search%' THEN 1 ELSE 0 END) AS priority + FROM item + WHERE name LIKE '%$search%' + OR Seller_username LIKE '%$search%' + ORDER BY priority DESC + LIMIT $page, 10"; $stmt = $conn->prepare($query); if (!$stmt){ @@ -33,7 +40,7 @@ $conn = connect_database(); - $query = "SELECT COUNT(item_id) FROM `item` WHERE name LIKE '%$search%'"; + $query = "SELECT COUNT(item_id) FROM `item` WHERE name LIKE '%$search%' OR Seller_username LIKE '%$search%'"; $stmt = $conn->prepare($query); if (!$stmt){ diff --git a/server/models/db.sql b/server/models/db.sql index 3335e41a5f7f2a2bd5ff5ac7e8a6056864f3b074..ffa28e41a800ce3ae5f1e0661dea295db3fca95c 100644 --- a/server/models/db.sql +++ b/server/models/db.sql @@ -42,7 +42,6 @@ CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`item` ( ON DELETE CASCADE ON UPDATE CASCADE ); -CREATE INDEX `fk_item_Seller1_idx` ON `saranghaengbok_db`.`item` (`Seller_username` ASC); -- ----------------------------------------------------- -- Table `saranghaengbok_db`.`cart` @@ -50,6 +49,7 @@ CREATE INDEX `fk_item_Seller1_idx` ON `saranghaengbok_db`.`item` (`Seller_userna CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`cart` ( `item_id` INT NOT NULL, `cart_username` VARCHAR(45) NOT NULL, + `item_quantity` INT NOT NULL, PRIMARY KEY(`item_id`, `cart_username`), CONSTRAINT `fk_cart_username` FOREIGN KEY (`cart_username`) @@ -62,6 +62,30 @@ CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`cart` ( ON DELETE CASCADE ); +-- ----------------------------------------------------- +-- Table `saranghaengbok_db`.`transaction` +-- ----------------------------------------------------- +CREATE TABLE IF NOT EXISTS `saranghaengbok_db`.`transaction` ( + `item_id` INT NOT NULL, + `buyer_username` VARCHAR(45) NOT NULL, + `seller_username` VARCHAR(45) NOT NULL, + `item_quantity` INT NOT NULL, + PRIMARY KEY(`item_id`, `buyer_username`, `seller_username`), + CONSTRAINT `fk_item_id` + FOREIGN KEY (`item_id`) + REFERENCES `saranghaengbok_db`.`item`(`item_id`) + ON UPDATE NO ACTION + ON DELETE NO ACTION, + CONSTRAINT `fk_buyer_username` + FOREIGN KEY (`buyer_username`) + REFERENCES `saranghaengbok_db`.`user`(`username`) + ON UPDATE CASCADE, + CONSTRAINT `fk_seller_username` + FOREIGN KEY (`seller_username`) + REFERENCES `saranghaengbok_db`.`user`(`username`) + ON UPDATE CASCADE +); + CREATE user `saranghaengbok_db_admin` IDENTIFIED BY 'BOOMbitchgetouttheway';