implemented login and hashed password

footer.html

@@ -0,0 +1,34 @@
+<footer class="sectionMain">
+    <div class="w3-third">
+      <h3>FOOTER</h3>
+      <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+      <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
+    </div>
+  
+    <div class="w3-third">
+      <h3>BLOG POSTS</h3>
+      <ul class="w3-ul w3-hoverable">
+        <li class="w3-padding-16">
+          <img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
+          <span class="w3-large">Lorem</span><br>
+          <span>Sed mattis nunc</span>
+        </li>
+        <li class="w3-padding-16">
+          <img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
+          <span class="w3-large">Ipsum</span><br>
+          <span>Praes tinci sed</span>
+        </li> 
+      </ul>
+    </div>
+
+    <div class="w3-third w3-serif">
+      <h3>POPULAR TAGS</h3>
+      <p>
+        <span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>
+        <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>
+      </p>
+    </div>
+  </footer>

index.html

@@ -204,7 +204,7 @@
       <!-- Modal -->
       
       <!-- LogIn Modal -->
-      <form action="shopping/shopping.php" method="post">
+      <form action="php/login.php" method="post">
         <div class="modal fade" id="logInModal" tabindex="-1" aria-labelledby="logInLabel" aria-hidden="true">
           <div class="modal-dialog modal-dialog-centered">
 
@@ -226,11 +226,11 @@
                             <div class="modalFormWrapper">
                                 <div class="mb-3">
                                     <label for="forUsername" class="form-label">Your Username</label>
-                                    <input type="text" class="form-control" id="formUsername" placeholder="Username">
+                                    <input type="text" name="username" class="form-control" id="formUsername" placeholder="Username">
                                 </div>
                                 <div class="mb-3">
                                     <label for="forPassword" class="form-label">Your Password</label>
-                                    <input type="password" class="form-control" id="formPassword" placeholder="Password">
+                                    <input type="password" name="password" class="form-control" id="formPassword" placeholder="Password">
                                 </div>
                             </div>
                         </div>

php/connection.php

@@ -1,9 +1,9 @@
 <?php
 function connectMysql()
 {
-    $servername = "localhost";
+    $servername = "testhost";
-    $username = "root"; // your username
+    $username = "myadmin"; // your username
-    $password = "root"; //your password
+    $password = "myadmin"; //your password
     $database = "cpsc2030_project";
     $conn = new mysqli($servername, $username, $password, $database);
 // Check connection
@@ -49,4 +49,5 @@ function getProducts($P_ID,$conn){
 
 
 
+
 ?>

php/login.php

@@ -0,0 +1,73 @@
+<?php
+include 'connection.php';
+$conn = connectMysql();
+session_start();
+$userName = $_POST['username'];
+$passWord_user = $_POST['password'];
+
+function query_username($conn, $uid) {
+    $sql = "Select * From account Where C_ID= ? ";
+    $stmt = mysqli_stmt_init($conn);
+    if (!mysqli_stmt_prepare($stmt, $sql)) {
+        return null;
+    }
+
+    mysqli_stmt_bind_param($stmt, "s", $uid);
+    mysqli_stmt_execute($stmt);
+
+    $resultData = mysqli_stmt_get_result($stmt);
+    mysqli_stmt_close($stmt);
+    return $resultData;
+}
+
+$result = query_username($conn, $userName);
+
+
+if ($result->num_rows > 0) {
+    $row = $result->fetch_assoc();
+    $_SESSION['username'] = $userName;
+
+    $passWord_hashed = $row["C_Password"];
+    $passWord_correct = password_verify($passWord_user, $passWord_hashed);
+    if ($passWord_correct === false) {
+        echo "<script> alert('Wrong password!');location.href='../index.html'; </script>";
+        exit();
+    } else {
+
+        // if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) { 
+     
+        //     $secretKey   = "6LehX_4aAAAAANIoyIRIYn8QzZtwtE7ytaQ1hgmZ";
+        //     $responseKey = $_POST['g-recaptcha-response'];
+        //     $userIP      = $_SERVER['REMOTE_ADDR'];
+        //     $url         = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
+        //     $response    = file_get_contents($url);
+        //     $response    = json_decode($response);
+         
+        //     if($response->success){
+        //         echo "Verification success.";
+        //         header("Location: shopping.php");
+        //     } else {
+        //         echo "<script> alert('reCAPTHCA verification failed, please try again.');location.href='login.php'; </script>";
+        //         return;
+        //     }
+         
+        // } else {
+        //     echo "<script> alert('Please click reCAPTHCA to verify.');location.href='login.php'; </script>";
+        //     return;
+        // }
+
+        // TODO: delete later
+        echo "Verification success.";
+        header("Location: ../shopping/shopping.php");
+    }
+
+} else {
+
+		// echo "<script> alert('Username dosen't exist.Please sign up first.');location.href='../index.html'; </script>";
+        header("Location: ../index.html");
+        exit();
+
+}
+
+$conn->close();
+?>

php/register.php

@@ -0,0 +1,45 @@
+<?php
+include 'connection.php';
+$conn = connectMysql();
+$userName = $_POST['username'];
+$passWord = $_POST['password'];
+
+
+$query = "INSERT INTO account(C_ID,C_Password) VALUES('$userName','$passWord')";
+// if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) { 
+     
+//         $secretKey   = "6LehX_4aAAAAANIoyIRIYn8QzZtwtE7ytaQ1hgmZ";
+//         $responseKey = $_POST['g-recaptcha-response'];
+//         $userIP      = $_SERVER['REMOTE_ADDR'];
+//         $url         = "https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$userIP";
+//         $response    = file_get_contents($url);
+//         $response    = json_decode($response);
+     
+//         if($response->success){
+//             echo "Verification success.";
+// 		    if ($conn->query($query) === TRUE) {
+//                 echo "<script> alert('New account created successfully!');location.href='register.php'; </script>"; 
+//             } else {
+
+//                 echo "<script> alert('Username already exists.');location.href='register.php'; </script>"; 
+//             }
+//         } else {
+//             echo "<script> alert('reCAPTHCA verification failed, please try again.');location.href='register.php'; </script>";
+//             return;
+//         }
+     
+// } else {
+//     echo "<script> alert('Please click reCAPTHCA to verify.');location.href='register.php'; </script>";
+//     return;
+// }
+
+// TODO delete later
+if ($conn->query($query) === TRUE) {
+    echo "<script> alert('New account created successfully!');location.href='register.php'; </script>"; 
+} else {
+
+    echo "<script> alert('Username already exists.');location.href='register.php'; </script>"; 
+}
+
+$conn->close();
+?>

shopping/addToCart.html

@@ -1,90 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <?php
-  require_once '../php/connection.php';
-  $conn = connectMysql();
-  session_start();
-  ?>
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Bootstrap CSS -->
-    <link href="../bootstrap-5.0.1-dist/css/bootstrap-grid.min.css" rel="stylesheet">
-    <link href="../bootstrap-5.0.1-dist/css/bootstrap.min.css" rel="stylesheet">
-
-    <!--=== Main Style CSS ===-->
-    <link href="../style/style.css" rel="stylesheet">
-
-    <!-- Font Awesome styles CDN Link -->
-    <link
-      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-      rel="stylesheet"
-      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
-      crossorigin="anonymous"
-    />
-    <title>New Moon Dessert Bar</title>
-  </head>
-
-<body class="shopping_body">
-
-  <div class="container-fluid">
-
-    <div class="sectionMenu" id="index-sectionMenu">
-      <div class="row">
-        <div class="col-sm-12">
-          <h1> Shopping </h1>
-          <p>| · Click on the picture to add to the cart · |</p>
-        </div>
-      </div>
-      
-      <div class="row">
-        <?php 
-            $products = getAllProducts($conn); 
-            foreach ($products as $product): 
-        ?>
-        <div class="col-sm-12 col-lg-6 col-xl-3">
-          <div class="my-img-class">
-            <img class="imgItem" src="../img/<?= $product['Product_Name']; ?>.jpg" alt="<?=$product['Product_Name']?>">
-            <p><?= $product['Product_Name']; ?></p> 
-            <p class="price">&dollar;<?= $product['Product_Price']; ?></p>
-          </div>
-        </div>
-        <?php endforeach; ?> 
-        <nav aria-label="Page navigation">
-            <ul class="pagination justify-content-center">
-                <li class="page-item">
-                    <a class="page-link" href="#" aria-label="Previous">
-                        <span aria-hidden="true">&laquo;</span>
-                    </a>
-                </li>
-                <li class="page-item">
-                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
-                </li>
-                <li class="page-item"><a class="page-link" href="#">1</a></li>
-                <li class="page-item"><a class="page-link" href="#">2</a></li>
-                <li class="page-item"><a class="page-link" href="#">3</a></li>
-                <li class="page-item">
-                  <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
-                </li>
-                <li class="page-item">
-                    <a class="page-link" href="#" aria-label="Next">
-                      <span aria-hidden="true">&raquo;</span>
-                    </a>
-                </li>
-                </li>
-            </ul>
-        </nav>
-      </div>
-      
-
-
-    </div>
-  </div>
-
-
-
-</body>
-
-</html>

shopping/addingToCart.php

@@ -0,0 +1,36 @@
+<?php 
+
+include '../php/connection.php';
+$conn = connectMysql();
+session_start();
+$product_id = $_GET['product_id'];
+$product_name = $_GET['product_name'];
+$product_price = $_GET['product_price'];
+$quantity = (int)$_GET['quantity'];
+
+
+$mycar = $_SESSION['mycar'];
+
+
+if(array_key_exists($product_id, $mycar)){
+	$mycar[$product_id]['buy_num'] += $quantity;
+	$mycar[$product_id]['buy_price'] += $product_price*$quantity;
+
+} else {
+	$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_num'=>$quantity);
+	$mycar[$product_id]['buy_price'] += $product_price*$quantity;
+}
+
+
+
+
+
+
+if($_GET[clear]=="yes"){
+	$_SESSION['mycar']="";
+}
+
+$_SESSION['mycar'] = $mycar;
+
+header('location: cart.php');
+?>

shopping/cart.php

@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <?php
+  require_once '../php/connection.php';
+  $conn = connectMysql();
+  session_start();
+  ?>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap-grid.min.css" rel="stylesheet">
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!--=== Main Style CSS ===-->
+    <link href="../style/style.css" rel="stylesheet">
+
+    <!-- Font Awesome styles CDN Link -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <title>New Moon Dessert Bar</title>
+  </head>
+
+<body class="shopping_body">
+
+    <div class="container-fluid">
+
+        <div class="sectionShopping">
+            <?php include 'shopping_headerNav.php' ?>
+            
+
+            <div class="row">
+                <div class="col-sm-12">
+                    <h1> Shopping Cart </h1>
+                    <p>| ·  · |</p>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-sm-12">
+                    <form action="shopping.php" method="get">
+                        <table style="margin:auto; border: 2px solid black;">
+                            <thead>
+                                <tr style="margin:auto; border: 2px solid black;">
+                                    <td>Product</td>
+
+                                    <td>Quantity</td>
+
+                                    <td>Price</td>
+
+                                </tr>
+                            </thead>
+                            <tbody>
+
+
+                            <?php $totalprice = 0;?>
+
+                                <?php foreach ($_SESSION['mycar'] as $product): ?>
+                                <tr>
+                                    <td>
+                                        <?=$product['buy_name']?>
+                                    </td>
+
+                                    <td class="quantity">
+                                        <?=$product['buy_num']?>
+
+                                    </td>
+                                    
+                                    <td>
+                                        &dollar;<?=$product['buy_price']?>
+                                    </td>
+
+                                    <td>
+                                        <a href="cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
+                                    </td>
+
+                                </tr>
+                                <?php $totalprice += $product['buy_price']?>
+                                <?php endforeach; ?>
+                            </tbody>
+                        </table>
+
+                        <br>
+                        <div class="subtotal">
+                            <span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: &dollar;<span><?= $totalprice ?></span></span>
+                        </div>
+
+                        <br>
+                        <div class="buttons">
+                            <input type="submit" value="Go Back To shopping!" name="placeorder">
+                        </div>
+                        
+                        <?php $products = getProducts($_SERVER["QUERY_STRING"],$conn); ?>
+                    </form>
+                </div>
+            </div>
+            
+        </div>
+
+    <?php include '../footer.html' ?>
+    </div>
+</body>
+
+</html>

shopping/productDetails.php

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <?php
+  require_once '../php/connection.php';
+  $conn = connectMysql();
+  session_start();
+  ?>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap-grid.min.css" rel="stylesheet">
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!--=== Main Style CSS ===-->
+    <link href="../style/style.css" rel="stylesheet">
+
+    <!-- Font Awesome styles CDN Link -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <title>New Moon Dessert Bar</title>
+  </head>
+
+<body class="shopping_body">
+
+  <div class="container-fluid">
+
+    <div class="sectionShopping">
+      <?php include 'shopping_headerNav.php' ?>
+
+      <div class="row">
+        <?php 
+          $products = getProducts($_SERVER["QUERY_STRING"],$conn); 
+          foreach ($products as $product): 
+        ?>
+        <div class="col-sm-12">
+          <section class="shopping_productDetails">
+            <h1><?=$product['Product_Name']?></h1>
+            <form action="addingToCart.php" method="get">
+
+                <img src="../img/<?= $product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;">
+                <h2 style="font-size: 40px;text-transform: uppercase; "></h2>
+                <h2>Price: &dollar;<?=$product['Product_Price']?></h3>
+
+                <h3>Quantity: <input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
+
+                <input type="submit" value="Add To Cart"></h3>
+
+                <input type="hidden" name="product_id" value="<?=$product['Product_ID']?>">
+                <input type="hidden" name="product_name" value="<?=$product['Product_Name']?>">
+                <input type="hidden" name="product_price" value="<?=$product['Product_Price']?>">
+
+            </form>
+          </section>
+        </div>
+        <?php             
+            endforeach; ?>
+      </div>
+      
+
+
+    </div>
+  </div>
+
+
+
+</body>
+
+</html>

shopping/shopping.php

@@ -32,10 +32,10 @@
   <div class="container-fluid">
 
     <div class="sectionShopping">
+      <?php include 'shopping_headerNav.php' ?>
+      
+
       <div class="row">
-        <div class="col-xl-12" id="shopping_headerImg">
-          <img class="rounded mx-auto d-block" style="height: 100px; background-color: rgba(255,0,0,0.1);" src="../img/headerImg.jpg">
-        </div>
         <div class="col-sm-12">
           <h1> Shopping </h1>
           <p>| · Click on the picture to add to the cart · |</p>
@@ -48,14 +48,44 @@
             foreach ($products as $product): 
         ?>
         <div class="col-sm-12 col-lg-6 col-xl-3">
-          <a class="my-img-class" href="addToCart.php?<?=$product['Product_ID']?>">
+          <div class="my-img-class">
-            <img class="imgItem" src="../img/<?= $product['Product_Name']; ?>.jpg" alt="<?=$product['Product_Name']?>">
+            <a href="productDetails.php?<?=$product['Product_ID']?>">
-            <p><?= $product['Product_Name']; ?></p> 
+              <img class="imgItem" src="../img/<?= $product['Product_Img']; ?>" alt="<?=$product['Product_Img']?>">
-            <p class="price">&dollar;<?= $product['Product_Price']; ?></p>
+            </a>
-          </a>
+              <p class="shopping_productName"><?= $product['Product_Name']; ?></p> 
+              <p class="shopping_productPrice">&dollar;<?= $product['Product_Price']; ?></p>
+            
+          </div>
         </div>
         <?php endforeach; ?> 
       </div>
+
+      <div class="row">
+        <nav class="shopping_pageNav" aria-label="Page navigation">
+              <ul class="pagination justify-content-center">
+                  <li class="page-item">
+                      <a class="page-link" href="#" aria-label="Previous">
+                          <span aria-hidden="true">&laquo;</span>
+                      </a>
+                  </li>
+                  <li class="page-item">
+                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
+                  </li>
+                  <li class="page-item"><a class="page-link" href="#">1</a></li>
+                  <li class="page-item"><a class="page-link" href="#">2</a></li>
+                  <li class="page-item"><a class="page-link" href="#">...</a></li>
+                  <li class="page-item">
+                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
+                  </li>
+                  <li class="page-item">
+                      <a class="page-link" href="#" aria-label="Next">
+                        <span aria-hidden="true">&raquo;</span>
+                      </a>
+                  </li>
+                  </li>
+              </ul>
+          </nav>
+      </div>
     </div>
 
   </div>

shopping/shopping_headerNav.php

@@ -0,0 +1,5 @@
+<div class="shopping_headerNav">
+    <div class="col-xl-12" id="shopping_headerImg">
+        <img class="rounded mx-auto d-block" style="height: 100px; background-color: rgba(255,0,0,0.1);" src="../img/headerImg.jpg">
+    </div>
+</div>

style/modules/_sectionShopping.sass

@@ -8,16 +8,15 @@
         border: 1px solid grey
     img
         width: 100%
+        object-fit: cover
     h1
         margin-top: 5%
         text-align: center
-        color: OliveDrab
+        color: DarkOliveGreen
+        text-shadow: 1px 1.2px 2px grey
     h3
         text-align: center
         color: OliveDrab
-    p
+    .shopping_productPrice
-        text-align: center
+        color: OliveDrab
-    // #shopping_headerImg 
-    //     background-image: url("../img/headerImg.jpg")
-
     

style/style.css

@@ -305,12 +305,15 @@ video {
 
 .sectionShopping img {
   width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 .sectionShopping h1 {
   margin-top: 5%;
   text-align: center;
-  color: OliveDrab;
+  color: DarkOliveGreen;
+  text-shadow: 1px 1.2px 2px grey;
 }
 
 .sectionShopping h3 {
@@ -318,7 +321,7 @@ video {
   color: OliveDrab;
 }
 
-.sectionShopping p {
+.sectionShopping .shopping_productPrice {
-  text-align: center;
+  color: OliveDrab;
 }
 /*# sourceMappingURL=style.css.map */