Merge branch 'main' of https://dev.azure.com/stockerer/MarmeladenLaden/_git/MarmeladenLaden into main

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 .vscode
 node_modules
+app.js

components/about.html

@@ -0,0 +1,8 @@
+<div class="container maincontent" id="aboutLink">
+    <h1>Über uns</h1>
+    <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
+        sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
+        Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
+    </p>
+</div>

components/cart.html

@@ -0,0 +1,35 @@
+<div class="container maincontent cartpage">
+    <div class="cart-container">
+        <h1 class="display-2">Einkaufswagen</h1>
+        <table class="table table-striped table-hover table-bordered">
+            <thead>
+                <tr>
+                    <th><strong>Product ID</strong></th>
+                    <th class="text-center"><strong>Löschen</strong></th>
+                    <th><strong>Produktname</strong></th>
+                    <th class="text-end"><strong>Preis</strong></th>
+                    <th class="text-end"><strong>Anzahl</strong></th>
+                    <th class="text-end"><strong >Gesamtpreis pro Produkt</strong></th>
+                </tr>
+            </thead>
+            <tbody id="carttable">
+            </tbody>
+        </table>
+        <hr>
+        <table class="table table-striped" id="carttotals">
+            <tr>
+                <td><strong>Gesamtanzahl</strong></td>
+                <td class="text-end"><strong>Gesamtpreis</strong></td>
+            </tr>
+            <tr>
+                <td>x <span id="itemsquantity">0</span></td>
+                <td class="text-end"><span id="total">0</span>€</td>
+            </tr>
+        </table>
+        <div class="cart-buttons">
+            <button type="button" class="btn btn-danger" id="emptycart">Empty Cart</button>
+            <button type="button" class="btn btn-success float-end" id="checkout">Checkout</button>
+        </div>
+    </div>
+</div>
+<script src="../js/cart.js"></script>

components/checkout.html

@@ -0,0 +1,135 @@
+<div class="container wrapper maincontent">
+    <div class="row g-5">
+        <div class="col-md-5 col-lg-4 order-md-last">
+            <h4 class="d-flex justify-content-between align-items-center mb-3">
+                <span class="text-success">Dein Einkaufswagen</span>
+                <span class="badge bg-success rounded-pill" id="gesamtMengeCart"></span>
+            </h4>
+            <ul class="list-group mb-3" id="productListSideways">
+
+            </ul>
+
+            <form class="card p-2">
+                <div class="input-group">
+                    <input type="text" class="form-control" placeholder="Promo code">
+                    <button type="submit" class="btn btn-secondary">Redeem</button>
+                </div>
+            </form>
+        </div>
+        <div class="col-md-7 col-lg-8">
+            <h4 class="mb-3">Ihre angegebene Adresse:</h4>
+            <form class="needs-validation" novalidate="">
+                <div class="row g-3">
+                    <div class="col-sm-6">
+                        <label for="firstName" class="form-label">Vorname</label>
+                        <input type="text" class="form-control" id="firstName" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Valid first name is required.
+                        </div>
+                    </div>
+
+                    <div class="col-sm-6">
+                        <label for="lastName" class="form-label">Nachname</label>
+                        <input type="text" class="form-control" id="lastName" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Valid last name is required.
+                        </div>
+                    </div>
+
+                    <div class="col-12">
+                        <label for="address" class="form-label">Address</label>
+                        <input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
+                        <div class="invalid-feedback">
+                            Please enter your shipping address.
+                        </div>
+                    </div>
+
+
+                    <div class="col-md-4">
+                        <label for="state" class="form-label">Stadt</label>
+                        <input type="text" class="form-control" id="city" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Please provide a valid state.
+                        </div>
+                    </div>
+
+                    <div class="col-md-3">
+                        <label for="zip" class="form-label">Zip</label>
+                        <input type="text" class="form-control" id="zip" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Zip code required.
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="my-4">
+
+            <!-- 
+                <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="same-address">
+                    <label class="form-check-label" for="same-address">Shipping address is the same as my billing
+                        address</label>
+                </div>
+
+                <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="save-info">
+                    <label class="form-check-label" for="save-info">Save this information for next time</label>
+                </div>
+            -->
+
+                <h4 class="mb-3">Bezahlung</h4>
+
+                <div class="my-3">
+                    <div class="form-check">
+                        <input id="credit" name="paymentMethod" type="radio"  checked="checked" required="" onclick="javascript:paymentTypeClicked()">
+                        <label class="form-check-label" for="credit">Kreditkarte</label>
+                    </div>
+                    <div class="form-check">
+                        <input id="lieferung" name="paymentMethod" type="radio" required="" onclick="javascript:paymentTypeClicked()">
+                        <label class="form-check-label" for="lieferung">Bei Lieferung (Bar oder Karte)</label>
+                    </div>
+                </div>
+
+                <div class="row gy-3" id="creditCardData">
+                    <div class="col-md-6">
+                        <label for="cc-name" class="form-label">Name auf der Karte</label>
+                        <input type="text" class="form-control" id="cc-name" placeholder="" required="">
+                        <small class="text-muted">Vor und Nachname wie auf der Karte ersichtlich</small>
+                        <div class="invalid-feedback">
+                            Name on card is required
+                        </div>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="cc-number" class="form-label">Kreditkartennummer</label>
+                        <input type="text" class="form-control" id="cc-number" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Credit card number is required
+                        </div>
+                    </div>
+
+                    <div class="col-md-3">
+                        <label for="cc-expiration" class="form-label">Ablaufdatum</label>
+                        <input type="text" class="form-control" id="cc-expiration" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Expiration date required
+                        </div>
+                    </div>
+
+                    <div class="col-md-3">
+                        <label for="cc-cvv" class="form-label">CVV</label>
+                        <input type="text" class="form-control" id="cc-cvv" placeholder="" required="">
+                        <div class="invalid-feedback">
+                            Security code required
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="my-4">
+
+                <button class="w-100 btn btn-success btn-lg" id="submitOrder">Bestellung aufgeben</button>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="../js/checkout.js"></script>

components/contact.html

@@ -0,0 +1,15 @@
+<div class="container maincontent" id="contactLink">
+    <h1>Kontakt
+    </h1>
+    <h5>Wenn dir unsere Produkte gefallen, kannst du dich gerne hier an uns wenden:</h5>
+    <address>
+        <p>Telefon
+            <a href="tel:+43100200340"></a>010-200-340</a><br>
+        </p>
+            <p>E-mail: <a href="mailto: info@marmeladenladen.com">info@marmeladenladen.com</a></p>
+        <p>Adresse:<br>    
+            Testadresse 1234<br> 
+            1010 Wien<br>
+        </p>
+    </address>
+</div>

components/footer.html

@@ -4,8 +4,7 @@
             <h2 class="h2 text-success border-bottom pb-3 border-light logo">MarmeladenLaden</h2>
             <ul class="list-unstyled text-light footer-link-list">
                 <li>
-                    <i class="fas fa-map-marker-alt fa-fw"></i>
-                    Testadresse 123456
+                    <i class="fas fa-map-marker-alt fa-fw"></i> Testadresse 123456
                 </li>
                 <li>
                     <i class="fa fa-phone fa-fw"></i>
@@ -21,24 +20,22 @@
         <div class="col-md-4 pt-5">
             <h2 class="h2 text-light border-bottom pb-3 border-light">Produkte</h2>
             <ul class="list-unstyled text-light footer-link-list">
-                <li><a class="text-decoration-none" href="#">Marmeladen</a></li>
+                <li><a class="text-decoration-none" href="../components/shop.html">Marmeladen</a></li>
                 <li><a class="text-decoration-none" href="#">XXXX</a></li>
                 <li><a class="text-decoration-none" href="#">XXXX</a></li>
                 <li><a class="text-decoration-none" href="#">YYYY</a></li>
                 <li><a class="text-decoration-none" href="#">ZZZZ</a></li>
-                <li><a class="text-decoration-none" href="#">AAAA</a></li>
-                <li><a class="text-decoration-none" href="#">BBBB</a></li>
             </ul>
         </div>
 
         <div class="col-md-4 pt-5">
             <h2 class="h2 text-light border-bottom pb-3 border-light">Navigation</h2>
             <ul class="list-unstyled text-light footer-link-list">
-                <li><a class="text-decoration-none" href="#">Home</a></li>
-                <li><a class="text-decoration-none" href="#">About Us</a></li>
-                <li><a class="text-decoration-none" href="#">Shop</a></li>
-                <li><a class="text-decoration-none" href="#">FAQs</a></li>
-                <li><a class="text-decoration-none" href="#">Contact</a></li>
+                <li><a class="text-decoration-none" href="../components/homepage.html">Home</a></li>
+                <li><a class="text-decoration-none" href="../components/about.html">Über uns</a></li>
+                <li><a class="text-decoration-none" href="../components/shop.html">Shop</a></li>
+                <li><a class="text-decoration-none" href="../components/contact.html">Kontakt</a></li>
+                <li><a class="text-decoration-none" href="../components/imprint.html">Impressum</a></li>
             </ul>
         </div>
 
@@ -71,7 +68,7 @@
         <div class="row pt-2">
             <div class="col-12">
                 <p class="text-left text-light">
-                    Copyright &copy; 2021 MarmeladenLaden
+                    Copyright &copy; 2022 MarmeladenLaden
                 </p>
             </div>
         </div>

components/imprint.html

@@ -0,0 +1,34 @@
+<div class="container maincontent" id="imprintLink">
+    <h1>Impressum</h1>
+    <p>Offenlegungspflicht gemäß § 25 Mediengesetz und Informationspflicht gemäß § 5 E-Commerce-Gesetz</p>
+    <h3>Medieninhaber und Herausgeber</h3>
+    <div class="container border w-75 rounded shadow-lg text-center align-items-center">
+        <h4>MarmeladenLaden</h4>
+        <h5>Gesellschaft mit beschränkter Haftung</h5>
+        <address>
+            Testadresse 1234<br>
+            1010 Wien<br>
+            Tel: <a href="tel:+43100200340"></a>+43 10 020 0340</a><br>
+            E-mail: <a href="mailto: info@marmeladenladen.com">info@marmeladenladen.com</a>
+        </address>
+    </div>
+    <br><br>
+    <h2>Unternehmensdaten</h2>
+    <strong>UID-Nummer</strong>: ATU12345678<br><br>
+    <strong>Firmenbuchnummer</strong>: 123456<br>
+    <strong>Gewerbeordnung idgF</strong>: <a href="https://www.ris.bka.gv.at/GeltendeFassung.wxe?Abfrage=Bundesnormen&Gesetzesnummer=10007517" target="_blank">www.ris.bka.gv.at</a><br>
+    <strong>Firmenbuchgericht</strong>: Handelsgericht Wien, 1030 Wien, Österreich<br><br> Mitglied der WKÖ<br><br>
+    <strong>Gewerbeberechtigungen</strong>: Gastgewerbe gem. § 142 (1) Z. 2-4 GewO 1994<br>
+    <strong>Unternehmensgegenstand</strong>: Erzeugung und Vertrieb von Nahrungs- und Genussmittel<br><br>
+    <h3>Beschwerden</h3>
+    Verbraucher haben die Möglichkeit, Beschwerden an die Onlines-Streitbeilegungsplattform der EU zu richten:
+    <a href="https://www.ec.europa.eu/consumers/odr" target="_blank">European Commission Online Dispute Resolution</a><br> Sie können allfällige Beschwerde auch an die oben angegebene E-Mail-Adresse richten.<br><br>
+    <h3>Haftungshinweise</h3>
+    Sämtliche Texte auf der Website wurden sorgfältig geprüft. Dessen ungeachtet kann keine Garantie für Richtigkeit, Vollständigkeit und Aktualität der Angaben übernommen werden. Die Klaab Hotelverwaltung GmbH übernimmt keine Verantwortung für die Inhalte
+    von externen Websites, die über Links von dieser Website erreicht werden können oder die ihrerseits auf diese Website verweisen und übernimmt keinerlei Verantwortung für den Inhalt solcher Websites oder deren Richtigkeit, Vollständigkeit oder Gesetzeskonformität.
+    Für Inhalte übernehmen wir keine Gewähr. Preisänderungen vorbehalten.<br><br> Diese Website benutzt Google Analytics, einen Webanalysedienst der Google Inc. („Google“). Google Analytics verwendet sog. „Cookies“, Textdateien, die auf Ihrem Computer
+    gespeichert werden und die eine Analyse der Benutzung der Website durch Sie ermöglicht. Die durch den Cookie erzeugten Informationen über Ihre Benutzung diese Website (einschließlich Ihrer IP-Adresse) wird an einen Server von Google in den USA übertragen
+    und dort gespeichert. Google wird diese Informationen benutzen, um Ihre Nutzung der Website auszuwerten, um Reports über die Websiteaktivitäten für die Websitebetreiber zusammenzustellen und um weitere mit der Websitenutzung und der Internetnutzung
+    verbundene Dienstleistungen zu erbringen. Auch wird Google diese Informationen gegebenenfalls an Dritte übertragen, sofern dies gesetzlich vorgeschrieben oder soweit Dritte diese Daten im Auftrag von Google verarbeiten.
+    </p>
+</div>

components/login.html

@@ -1,29 +1,31 @@
 <div class="container maincontent">
-<form>
-    <!-- Email input -->
-    <div class="form-outline mb-4">
-      <input type="email" id="emailLogin" class="form-control" />
-      <label class="form-label" for="email">Email address</label>
-    </div>
-  
-    <!-- Password input -->
-    <div class="form-outline mb-4">
-      <input type="password" id="passwordLogin" class="form-control" />
-      <label class="form-label" for="password">Password</label>
-    </div>
-  
-    <!-- 2 column grid layout for inline styling -->
-    <div class="row mb-4">
-      <div class="col d-flex justify-content-center">
-        <!-- Checkbox -->
-        <div class="form-check">
-          <input class="form-check-input" type="checkbox" value="" id="rememberMe" checked />
-          <label class="form-check-label" for="rememberMe"> Remember me </label>
+    <form id="loginForm">
+        <!-- Email input -->
+        <div class="form-outline mb-4">
+            <input type="email" class="form-control" name="email" id="emailLogin" placeholder="E-Mail" required>
         </div>
-      </div>
-    </div>
 
-    <!-- Submit button -->
-    <button type="button" class="btn btn-success btn-block mb-4 float-end">Sign in</button>
-  </form>
+        <!-- Password input -->
+        <div class="form-outline mb-4">
+            <input type="password" class="form-control" name="password" id="passwordLogin" placeholder="Passwort" required>
+        </div>
+
+        <!-- 2 column grid layout for inline styling -->
+        <div class="row mb-4">
+            <div class="col d-flex justify-content-center">
+                <!-- Checkbox -->
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" value="" id="rememberMe" checked />
+                    <label class="form-check-label" for="rememberMe"> Merken </label>
+                </div>
+            </div>
+        </div>
+
+        <!-- Submit button -->
+        <button type="submit" class="btn btn-success btn-block mb-4 float-end">Einloggen</button>
+    </form>
+    <div>
+        <button type="button" class="btn btn-success float-end" href="../components/register.html">Registrieren</button>
+    </div>
 </div>
+<script src="../js/login.js"></script>

components/main_nav.html

@@ -15,26 +15,32 @@
                     <a class="nav-link" type="button" id="homeLink">Home</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link"  id="aboutLink">About</a>
+                    <a class="nav-link" type="button" id="aboutLink">Über uns</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="shopLink">Shop</a>
+                    <a class="nav-link" type="button" id="shopLink">Shop</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" id="contactLink">Contact</a>
+                    <a class="nav-link" type="button" id="contactLink">Kontakt</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" type="button" id="loginLink">Login</a>
+                    <a class="nav-link" type="button" id="loginLink">Einloggen</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" type="button" id="registerLink">Register</a>
+                    <a class="nav-link" type="button" id="registerLink">Registrierung</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" type="button" id="profileLink">Profil</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" type="button" id="logoutLink">Ausloggen</a>
                 </li>
             </ul>
         </div>
         <div class="navbar align-self-center d-flex">
             <div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
                 <div class="input-group">
-                    <input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
+                    <input type="text" class="form-control" id="inputMobileSearch" placeholder="Suche ...">
                     <div class="input-group-text">
                         <i class="fa fa-fw fa-search"></i>
                     </div>
@@ -43,9 +49,9 @@
             <a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#marmeladenladen_search">
                 <i class="fa fa-fw fa-search text-dark mr-2"></i>
             </a>
-            <a class="nav-icon position-relative text-decoration-none" href="#">
+            <a class="nav-icon position-relative text-decoration-none" type="button" id="cartLink">
                 <i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
-                <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
+                <span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark" id="cartCount"></span>
             </a>
             <a class="nav-icon position-relative text-decoration-none" href="#">
                 <i class="fa fa-fw fa-user text-dark mr-3"></i>

components/profile.html

@@ -0,0 +1,50 @@
+<div class="container registerform maincontent">
+    <h1> Profil
+        <p id="usernameHeader"></p>
+    </h1>
+    <form id="userProfile">
+        <div class="row">
+            <div class="col-3">
+                <input type="text" class="form-control" name="salutation" id="salutation" readonly>
+            </div>
+            <div class="col-4">
+                <input type="text" class="form-control" name="firstname" id="firstname" readonly>
+            </div>
+            <div class="col-5">
+                <input type="text" class="form-control" name="lastname" id="lastname" readonly>
+            </div>
+        </div>
+        <div class="row" id="address">
+            <div class="col-12">
+                <input type="text" class="form-control" name="street" id="street" placeholder="Straße" required>
+            </div>
+            <div>
+                <div class="row">
+                    <div class="col-4">
+                        <input type="text" class="form-control" name="postalcode" id="postalcode" placeholder="PLZ" required>
+                    </div>
+                    <div class="col-8">
+                        <input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" readonly>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
+                    </div>
+                </div>
+                <div class="modal-footer d-block">
+                    <button type="submit" class="btn btn-success float-end" id="changeData">Daten ändern</button>
+                </div>
+    </form>
+    </div>
+    <script src="../js/datachange.js"></script>

components/register.html

@@ -3,10 +3,9 @@
         <div class="row">
             <div class="col-3">
                 <select name="salutation" id="salutation">
-                            <option disabled selected value="0" style="display:none">Anrede</option>
                             <option value="Frau">Frau</option>
                             <option value="Herr">Herr</option>
-                            <option value="Person">Person</option>
+                            <option selected value="Person">Person</option>
                 </select>
             </div>
             <div class="col-4">
@@ -20,39 +19,39 @@
             <div class="col-12">
                 <input type="text" class="form-control" name="street" id="street" placeholder="Straße" required>
             </div>
-        <div>
-        <div class="row">
-            <div class="col-4">
-                <input type="text" class="form-control" name="postalcode" id="postalcode" placeholder="PLZ" required>
-            </div>
-            <div class="col-8">
-                <input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" required>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <input type="password" class="form-control" name="password2" id="password2" placeholder="Passwort wiederholen" required>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-12">
-                <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
-            </div>
-        </div>
-        <div class="modal-footer d-block">
-            <button type="reset" class="btn btn-secondary float-start" id="cancelButton">Reset</button>
-            <button type="submit" class="btn btn-success float-end" id="registration" >Registrieren</button>
-        </div>
+            <div>
+                <div class="row">
+                    <div class="col-4">
+                        <input type="text" class="form-control" name="postalcode" id="postalcode" placeholder="PLZ" required>
+                    </div>
+                    <div class="col-8">
+                        <input type="text" class="form-control" name="city" id="city" placeholder="Stadt" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="email" class="form-control" name="email" id="email" placeholder="E-Mail" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="password" class="form-control" name="password" id="password" placeholder="Passwort" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="password" class="form-control" name="password2" id="password2" placeholder="Passwort wiederholen" required>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon" required>
+                    </div>
+                </div>
+                <div class="modal-footer d-block">
+                    <button type="reset" class="btn btn-secondary float-start" id="cancelButton">Zurücksetzen</button>
+                    <button type="submit" class="btn btn-success float-end" id="registration">Registrieren</button>
+                </div>
     </form>
-</div>
-<script src="../js/registration.js"></script>
+    </div>
+    <script src="../js/registration.js"></script>

components/shop.html

@@ -0,0 +1,9 @@
+<div class="container wrapper maincontent shoppingpage">
+    <div class="alert alert-success fade show" role="alert" id="productAddedAlert">
+    </div>
+    <div class="container" id="productOverview">
+        <div class="row g-1" id="productOverviewDiv">
+        </div>
+    </div>
+</div>
+<script src="../js/getProducts.js"></script>

config/sessionStart.php

@@ -0,0 +1,3 @@
+<?php
+session_start();
+?>

db/datahandler.php

@@ -1,5 +1,4 @@
 <?php
-include($_SERVER['DOCUMENT_ROOT'] . '/models/user.class.php');
 include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
 
 class DataHandler
@@ -7,7 +6,7 @@ class DataHandler
     public function registerUser($data)
     {
         $username = testinput($data->email);
-        $password = testinput($data->password);
+        $password = password_hash(testinput($data->password), PASSWORD_DEFAULT);
         $email = testinput($data->email);
         $phone = testinput($data->phone);
         $salutation = testinput($data->salutation);
@@ -15,10 +14,9 @@ class DataHandler
         $lastname = testinput($data->lastname);
         $street = testinput($data->street);
         $postalcode = testinput($data->postalcode);
+        $city = testinput($data->city);
         $role = "customer";
 
-        $password = password_hash($password, PASSWORD_DEFAULT);
-
         require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
         
         $sql2 = "INSERT IGNORE INTO `cities` (`city_id`, `postalcode`, `name`) VALUES (?,?,?)";
@@ -29,18 +27,22 @@ class DataHandler
         $stmtCities = $db->prepare($sql2);
 
         $stmtUser->bind_param("ssssssssss", null, $username, $password, $email, $phone, $salutation, $firstname, $lastname, $street, $postalcode, $role, null);
-        $stmtCities->bind_param("sss", null, $postalcode, $coty);
+        $stmtCities->bind_param("sss", null, $postalcode, $city);
 
-        if ($stmtUser->execute() && $stmtCities->execute() && $stmtAddress->execute()) {
-            return true;
+        if ($stmtUser->execute() && $stmtCities->execute()) {
+            echo "Your registration was successfully.\n";
+            $returnArray['Response'] = "Your registration was successfully.";
         } else {
-            return false;
+            echo "Your registration was not successfully. Please try again later.\n";
+            $returnArray['Response'] = "Your registration was not successfully. Please try again later.";
         }
         $stmtUser->close();
         $stmtCities->close();
         $stmtAddress->close();
         $db->close();
 
+        return $returnArray;
+        
     }
 }
 ?>

index.html

@@ -10,8 +10,7 @@
     <meta name="description" content="Dieser MarmeladenLaden wird aktuell für die LV WebScripting umgesetzt.">
     <meta name="author" content="Iris Raab & Philip Stockerer">
     <!--Einbinden der genutzten Frameworks-->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
     <link rel="stylesheet" href="../res/css/style.css">
     <title>MarmeladenLaden</title>
@@ -31,8 +30,7 @@
     <!-- End Main Navbar-->
 
     <!-- Start Search Modal-->
-    <div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
-        aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
     </div>
     <!-- End Modal-->
 
@@ -43,9 +41,7 @@
 </body>
 
 <!-- End Content -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
-    crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 <script src="https://kit.fontawesome.com/7321626d2e.js" crossorigin="anonymous"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="../js/app.js"></script>

js/app.ts

@@ -1,17 +1,90 @@
 $(document).ready(function() {
+    
     $('#mmlMainContent').load('../components/homepage.html');
     $('#top_nav_bar').load('../components/top_nav.html');
     $('#main_nav_bar').load('../components/main_nav.html', function() {
-        document.getElementById('registerLink')?.addEventListener('click', function() {
-            $('#mmlMainContent').load('../components/register.html');
-        },);
+        updateCartCount();
+        if (document.cookie.indexOf('loggedIn=true') != -1) {
+            loggedInState();
+        } else {
+            loggedOutState();
+        }
         document.getElementById('homeLink')?.addEventListener('click', function() {
             $('#mmlMainContent').load('../components/homepage.html');
         },);
+        document.getElementById('aboutLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/about.html');
+        },);
+        document.getElementById('shopLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/shop.html');
+        },);
+        document.getElementById('contactLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/contact.html');
+        },);
         document.getElementById('loginLink')?.addEventListener('click', function() {
             $('#mmlMainContent').load('../components/login.html');
         },);
+        document.getElementById('registerLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/register.html');
+        },);
+        document.getElementById('logoutLink')?.addEventListener('click', function() {
+            logout();
+        });
+        document.getElementById('profileLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/profile.html');
+        });
+        document.getElementById('cartLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/cart.html');
+        });
+        document.getElementById('imprintLink')?.addEventListener('click', function() {
+            $('#mmlMainContent').load('../components/imprint.html');
+        });
     });
     $('#marmeladenladen_footer').load('../components/footer.html');
     $('#marmeladenladen_search').load('../components/modal.html');
 });
+
+function loggedInState() {
+    $('#main_nav_bar').find('#loginLink').hide();
+    $('#main_nav_bar').find('#registerLink').hide();
+    $('#main_nav_bar').find('#logoutLink').show();
+    $('#main_nav_bar').find('#profileLink').show();
+}
+
+function loggedOutState() {
+    $('#main_nav_bar').find('#loginLink').show();
+    $('#main_nav_bar').find('#registerLink').show();
+    $('#main_nav_bar').find('#logoutLink').hide();
+    $('#main_nav_bar').find('#profileLink').hide();
+}
+
+function logout() {
+    document.cookie = 'loggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'email=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    document.cookie = 'rememberme=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    $('#mmlMainContent').load('../components/homepage.html');
+    $('#main_nav_bar').find('#loginLink').show();
+    $('#main_nav_bar').find('#registerLink').show();
+    $('#main_nav_bar').find('#logoutLink').hide();
+    $('#main_nav_bar').find('#profileLink').hide();
+}
+
+function updateCartCount() {
+    var items = getCartCount();
+    $('#cartCount').text(items);
+}
+
+function getCartCount() {
+    var items;
+    if (sessionStorage.getItem('cart')) {
+        var cart = JSON.parse(sessionStorage.getItem('cart')!) ?? [];
+        items = 0;
+        for (let i = 0; i < cart.length; i++) {
+            var object = JSON.parse(cart[i]);
+            items += object.count;
+        }
+    } else {
+        items = 0;
+    }
+    return items;
+}

js/cart.js

@@ -0,0 +1,142 @@
+$(document).ready(function () {
+    updateCartTotal();
+    document.getElementById("emptycart").addEventListener("click", emptyCart);
+    document.getElementById("checkout").addEventListener("click", function () {
+        if (sessionStorage.getItem('cart') && document.cookie.indexOf("loggedIn=true") != -1) {
+            $('#mmlMainContent').load('../components/checkout.html');
+        } else {
+            $('#mmlMainContent').load('../components/login.html');
+        }
+    });
+});
+
+
+/* User Manually empty cart */
+function emptyCart() {
+    //remove cart session storage object & refresh cart totals
+    if (sessionStorage.getItem('cart')) {
+        sessionStorage.removeItem('cart');
+        updateCartTotal();
+        updateCartCount();
+        //clear message and remove class style
+    }
+}
+
+function updateCartTotal() {
+    //init
+    var total = 0;
+    var price = 0;
+    var items = 0;
+    var prodCount = 0;
+    var productname = "";
+    var carttable = "";
+    if (sessionStorage.getItem('cart')) {
+        //get cart data & parse to array
+        var cart = JSON.parse(sessionStorage.getItem('cart'));
+        //get no of items in cart 
+        items = cart.length;
+        //loop over cart array
+        for (var i = 0; i < items; i++) {
+            //convert each JSON product in array back into object
+            var x = JSON.parse(cart[i]);
+            //get property value of price;
+            productid = x.productid;
+            price = parseFloat(x.price);
+            productname = x.productname;
+            count = x.count;
+            totalperproduct = price * count;
+            totalperproduct = parseFloat(totalperproduct.toFixed(2));
+            //add price to total
+            carttable += "<tr><td>" + productid + "</td><td class='text-center'><button type='button' class='btn btn-danger removeproduct'>X</button></td><td>" + productname + "</td><td class='text-end'>" + price + "€</td><td class='text-center'><button type='button' class='btn btn-danger decreasecount float-start'>-</button>" + count + "<button type='button' class='btn btn-success increasecount float-end'>+</button></td><td class='text-end'>" + totalperproduct + "€</td></tr>";
+            total += totalperproduct;
+            total = parseFloat(total.toFixed(2));
+            prodCount += count;
+        }
+
+    }
+    //update total on website HTML
+    document.getElementById("total").innerHTML = total;
+    //insert saved products to cart table
+    document.getElementById("carttable").innerHTML = carttable;
+    //update items in cart on website HTML
+    document.getElementById("itemsquantity").innerHTML = prodCount;
+
+    var delbtns = document.getElementsByClassName("btn btn-danger removeproduct");
+    for (var i = 0; i < delbtns.length; i++) {
+        delbtns[i].addEventListener("click", function() { removeProductFromCart(this); });
+    }
+
+    var incbtns = document.getElementsByClassName("btn btn-success increasecount");
+    for (var i = 0; i < incbtns.length; i++) {
+        incbtns[i].addEventListener("click", function() { increaseCount(this); });
+    }
+
+    var decbtns = document.getElementsByClassName("btn btn-danger decreasecount");
+    for (var i = 0; i < decbtns.length; i++) {
+        decbtns[i].addEventListener("click", function() { decreaseCount(this); });
+    }
+
+}
+
+function removeProductFromCart(elem) {
+    
+    var productid = elem.parentNode.parentNode.children[0].innerText;
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        if (x.productid == productid) {
+            cart.splice(i, 1);
+            break;
+        }
+    }
+    var stringCart = JSON.stringify(cart);
+    sessionStorage.setItem('cart', stringCart);
+    updateCartTotal();
+    updateCartCount();
+}
+
+//function to increase product count in cart
+function increaseCount(elem) {
+    console.log("triggered");
+    var productid = elem.parentNode.parentNode.children[0].innerText;
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        if (x.productid == productid) {
+            x.count++;
+            cart[i] = JSON.stringify(x);
+            console.log(x.count);
+            break;
+        }
+    }
+    var stringCart = JSON.stringify(cart);
+    sessionStorage.setItem('cart', stringCart);
+    updateCartTotal();
+    updateCartCount();
+}
+
+//function to decrease product count in cart
+function decreaseCount(elem) {
+    var productid = elem.parentNode.parentNode.children[0].innerText;
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        if (x.productid == productid) {
+            x.count--;
+            if (x.count < 1) {
+                cart.splice(i, 1);
+                break;
+            } else {
+                cart[i] = JSON.stringify(x);
+                break;
+            }
+        }
+    }
+    var stringCart = JSON.stringify(cart);
+    sessionStorage.setItem('cart', stringCart);
+    updateCartTotal();
+    updateCartCount();
+}

js/checkout.js

@@ -0,0 +1,169 @@
+$(document).ready(function () {
+    getProductsOnSide();
+    getUserData();
+    //add click listener to submit order button
+    $('#submitOrder').click(function () {
+        //supress default
+        event.preventDefault();
+        submitOrder();
+    });
+});
+
+function getTotalAmount() {
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    var total = 0;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        total += x.price * x.count;
+    }
+    return total.toFixed(2);
+}
+
+
+function getProductsOnSide() {
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    for (var i = 0; i < items; i++) {
+        var x = JSON.parse(cart[i]);
+        /*console.log(x);
+        console.log(x.count);
+        console.log(x.productid)
+        console.log(x.price);
+        console.log(x.productname);*/
+        var total = x.count * x.price;
+        const productListSideways = document.getElementById('productListSideways');
+        const product = document.createElement('li');
+
+        product.className = "list-group-item d-flex justify-content-between lh-sm";
+        product.id = productid;
+        product.innerHTML = `<div>
+                                <h6 class="my-0">${x.productname}</h6>
+                                <small class="text-muted">${x.count} Stück x ${x.price} €</small>
+                            </div>
+                            <span class="text-muted">${total} €</span>`;
+        productListSideways.appendChild(product);
+    }
+    var gesamtMengeCart = getCartCount();
+    var totalMoneyAmount = getTotalAmount();
+    $('#gesamtMengeCart').text(gesamtMengeCart);
+    const totalAmount = document.createElement('li');
+    totalAmount.className = "list-group-item d-flex justify-content-between";
+    totalAmount.innerHTML = `<span>Gesamtpreis (EUR)</span>
+                            <strong>${totalMoneyAmount} €</strong>`;
+    productListSideways.appendChild(totalAmount);
+}
+
+function getUserData() {
+    const firstname = document.getElementById('firstName');
+    const lastname = document.getElementById('lastName');
+    const address = document.getElementById('address');
+    const plz = document.getElementById('zip');
+    const city = document.getElementById('city');
+    var username = getCookie('email');
+    var loggedIn = getCookie('loggedIn');
+    var sendData = {
+        "username": username,
+    };
+    stringData = JSON.stringify(sendData);
+    if (loggedIn == 'true') {
+        $.ajax({
+            url: '../logic/getUserData.php',
+            type: 'POST',
+            cache: false,
+            datatype: 'json',
+            data: stringData,
+            success: function (response) {
+                const data = JSON.parse(response);
+                //set data to fields
+                firstname.value = data.firstname;
+                lastname.value = data.lastname;
+                address.value = data.address;
+                plz.value = data.plz;
+                city.value = data.city;
+            }
+        });
+    } else {
+        window.location.href = '../index.html';
+    }
+}
+
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodeCookie = decodeURIComponent(document.cookie);
+    let ca = decodeCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
+function paymentTypeClicked() {
+    if (document.getElementById('credit').checked) {
+        document.getElementById('creditCardData').style.display = 'block';
+    } else {
+        document.getElementById('creditCardData').style.display = 'none';
+    }
+}
+
+        
+function submitOrder() {
+    var cart = JSON.parse(sessionStorage.getItem('cart'));
+    var items = cart.length;
+    var total = getTotalAmount();
+    var firstname = document.getElementById('firstName').value;
+    var lastname = document.getElementById('lastName').value;
+    var address = document.getElementById('address').value;
+    var plz = document.getElementById('zip').value;
+    var city = document.getElementById('city').value;
+    if (document.getElementById('credit').checked) {
+        var paymentId = 2;
+        var creditCardNumber = document.getElementById('creditCardNumber').value;
+        var creditCardExpiration = document.getElementById('creditCardExpiration').value;
+        var creditCardCvv = document.getElementById('creditCardCvv').value;
+    } else {
+        var paymentId = 1;
+    }
+    var username = getCookie('email');
+    var loggedIn = getCookie('loggedIn');
+    var sendData = {
+        "username": username,
+        "firstname": firstname,
+        "lastname": lastname,
+        "address": address,
+        "plz": plz,
+        "city": city,
+        "total": total,
+        "cart": cart,
+        "paymentId": paymentId,
+    };
+    stringData = JSON.stringify(sendData);
+    if (loggedIn == 'true') {
+        $.ajax({
+            url: '../logic/submitOrder.php',
+            type: 'POST',
+            cache: false,
+            datatype: 'json',
+            data: stringData,
+            success: function (response) {
+                console.log(response);
+                if (response == 'success') {
+                    sessionStorage.removeItem('cart');
+                    updateCartCount();
+                    alert('Bestellung erfolgreich abgeschlossen');
+                    $('#mmlMainContent').load('../components/homepage.html');
+                } else {
+                    alert('Fehler beim Abschicken der Bestellung');
+                }
+            }
+        });
+    } else {
+        alert('Bitte einloggen');
+    }
+}

js/cookieHandling.js

@@ -0,0 +1,15 @@
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodeCookie = decodeURIComponent(document.cookie);
+    let ca = decodeCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}

js/datachange.js

@@ -0,0 +1,97 @@
+//document get ready function
+    const username = getCookie('email');
+    const loggedIn = getCookie('loggedIn');
+    
+$(document).ready(function () {
+        const usernameHeader = document.getElementById("usernameHeader");
+        const salutation = document.getElementById("salutation");
+        const firstname = document.getElementById("firstname");
+        const lastname = document.getElementById("lastname");
+        const street = document.getElementById("street");
+        const postalcode = document.getElementById("postalcode");
+        const city = document.getElementById("city");
+        const email = document.getElementById("email");
+        const phone = document.getElementById("phone");
+        let hashedPassword = '';
+        //make json from username
+        const sendData = {
+            "username": username
+        };
+        stringData = JSON.stringify(sendData);
+    if (loggedIn == 'true') {
+        $.ajax({
+            url: '../logic/getUserData.php',
+            type: 'POST',
+            cache: false,
+            datatype: 'json',
+            data: stringData,
+            success: function (response) {
+                const data = JSON.parse(response);
+                //set data to fields
+                usernameHeader.innerHTML = data.username;
+                salutation.value = data.salutation;
+                firstname.value = data.firstname;
+                lastname.value = data.lastname;
+                street.value = data.address;
+                postalcode.value = data.plz;
+                city.value = data.city;
+                email.value = data.email;
+                phone.value = data.phone;
+                hashedPassword = data.password;
+            }
+        });
+    } else {
+        window.location.href = '../index.html';
+    }
+    const userForm = document.getElementById("userProfile");
+    userForm.addEventListener('submit', function (e) {
+        e.preventDefault();
+        updateUser(hashedPassword);
+    });
+});
+
+function updateUser(pwd){
+
+    const sendData = {
+        "username": username,
+        "street": street.value,
+        "postalcode": postalcode.value,
+        "city": city.value,
+        "phone": phone.value,
+        "password": password.value,
+        "hashedPassword": pwd
+    };
+    stringData = JSON.stringify(sendData);
+    console.log(stringData);
+    $.ajax({
+        url: '../logic/updateUserData.php',
+        type: 'POST',
+        cache: false,
+        datatype: 'text',
+        data: stringData,
+        success: function (response) {
+            console.log(response);
+            if (response == 'success') {
+                alert('Data updated');
+            } else {
+                alert('Data not updated - please try again later or enter correct password.');
+            }
+        }
+    });
+}
+
+function getCookie(cname) {
+    let name = cname + "=";
+    let decodeCookie = decodeURIComponent(document.cookie);
+    let ca = decodeCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}

js/getProducts.js

@@ -0,0 +1,162 @@
+$(document).ready(function () {
+    getProducts();
+    document.getElementById("productAddedAlert").hidden = true;
+});
+
+function getProducts() {
+    //ajax call to php 
+    $.ajax({
+        url: '../logic/getProductData.php',
+        type: 'GET',
+        cache: false,
+        datatype: 'json',
+        data: {},
+        success: function (response) {
+            const data = JSON.parse(response);
+            //set data to fields
+            const productOverview = document.getElementById("productOverviewDiv");
+            for (let i = 0; i < data.length; i++) {
+                const product = document.createElement("div");
+                product.className = "product col-md-3";
+                product.id = data[i].id;
+                product.innerHTML = `<div class="card p-3">
+                                        <div class="text-center">
+                                            <img src="../res/img/${data[i].image}" class="card-img-top" alt="${data[i].name}" width=200>
+                                        </div>
+                                        <div class="product-details">
+                                            <span class="fw-bold d-block productname">${data[i].name}</span>
+                                            <span class="fw-bold d-block price">${data[i].price} €</span>
+                                            <span>${data[i].description}</span>
+                                            <div class="buttons d-flex flex-row shopbutton">
+                                                <div class="cart"><i class="fa fa-shopping-cart"></i></div> <button class="btn btn-success cart-button btn-block addtocart">Add to cart</button>
+                                            </div>
+                                            <div class="weight">
+                                                <small class="productweight">1 Stück | ${data[i].weight} g</small>
+                                            </div>
+                                            <div class="id">
+                                                <small class="productid">ID: ${data[i].product_id}</small>
+                                            </div>
+                                        </div>`;
+                productOverview.appendChild(product);
+            }
+
+            var btns = document.getElementsByClassName('btn btn-success cart-button btn-block addtocart');
+            for (var i = 0; i < btns.length; i++) {
+                btns[i].addEventListener('click', function () { addToCart(this); });
+            }
+        }
+    });
+}
+
+function addToCart(elem) {
+    //init
+    var productDetails = elem.parentNode.parentNode;
+    var productDetailsKids = productDetails.children;
+    var getprice;
+    var getproductName;
+    var getproductId;
+    var productCount;
+    var cart = [];
+    var stringCart;
+
+    for (let i = 0; i < productDetailsKids.length; i++) {
+        if (productDetailsKids[i].className == "fw-bold d-block price") {
+            getprice = productDetailsKids[i].innerText.replace(" €", "");
+        }
+        if (productDetailsKids[i].className == "fw-bold d-block productname") {
+            getproductName = productDetailsKids[i].innerText;
+        }
+        if (productDetailsKids[i].className == "id") {
+            getproductId = productDetailsKids[i].innerText.replace("ID: ", "");
+        }
+    }
+
+    //create product object
+    var product = {
+        productid: getproductId,
+        productname: getproductName,
+        price: getprice,
+        count: 1
+    };
+    //convert product data to JSON for storage
+    var stringProduct = JSON.stringify(product);
+    /*send product data to session storage */
+
+    if (!sessionStorage.getItem('cart')) {
+        //append product JSON object to cart array
+        cart.push(stringProduct);
+        //cart to JSON
+        stringCart = JSON.stringify(cart);
+        //create session storage cart item
+        sessionStorage.setItem('cart', stringCart);
+        addedToCart(getproductName);
+        updateCartCount();
+    }
+    else {
+        //get existing cart data from storage and convert back into array
+        cart = JSON.parse(sessionStorage.getItem('cart'));
+        var productExists = false;
+
+        for (let i = 0; i < cart.length; i++) {
+            var object = JSON.parse(cart[i]);
+            if (object.productid == getproductId) {
+                productExists = true;
+            }
+        }
+        if (!productExists) {
+            cart.push(stringProduct);
+            stringCart = JSON.stringify(cart);
+            sessionStorage.setItem('cart', stringCart);
+            addedToCart(getproductName);
+            updateCartCount();
+        }
+        else {
+            for (let i = 0; i < cart.length; i++) {
+                var object = JSON.parse(cart[i]);
+                if (object.productid == getproductId) {
+                    object.count++;
+                    cart[i] = JSON.stringify(object);
+                    stringCart = JSON.stringify(cart);
+                    sessionStorage.setItem('cart', stringCart);
+                    addedToCart(getproductName);
+                    updateCartCount();
+                }
+            }
+        }
+    }
+}
+
+    function addedToCart(pname) {
+        var message = pname + " was added to the cart";
+        var alerts = document.getElementById("productAddedAlert");
+        alerts.innerHTML = message;
+        if (!alerts.classList.contains("message")) {
+            alerts.classList.add("message");
+        }
+        alerts.hidden = false;
+        setTimeout(function () {
+            alerts.hidden = true;
+        }
+            , 3000);
+    }
+
+
+    function updateCartCount() {
+        var items = getCartCount();
+        $('#cartCount').text(items);
+    }
+
+    function getCartCount() {
+        var items;
+        if (sessionStorage.getItem('cart')) {
+            var cart = JSON.parse(sessionStorage.getItem('cart')) ?? [];
+            items = 0;
+            for (let i = 0; i < cart.length; i++) {
+                var object = JSON.parse(cart[i]);
+                items += object.count;
+            }
+        } else {
+            items = 0;
+        }
+        return items;
+    }

js/login.js

@@ -0,0 +1,53 @@
+const emailLogin = document.getElementById('emailLogin');
+const passwordLogin = document.getElementById('passwordLogin');
+const rememberme = document.getElementById('rememberMe');
+
+const formLogin = document.getElementById('loginForm');
+formLogin.addEventListener('submit', login);
+
+async function login(event) {
+    event.preventDefault();
+    if (checkLogin()) {
+        //get form data
+        const formData = new FormData(formLogin);
+        //create object with form data
+        const data = {};
+        formData.forEach((value, key) => data[key] = value);
+        //log data on console
+        datastring = JSON.stringify(data);
+        //send data to php with Ajax
+        $.ajax({
+            url: '../logic/loginLogic.php',
+            type: 'POST',
+            data: datastring,
+            cache: false,
+            datatype: 'text',
+            success: function (response) {
+                if (response == 'success') {
+                    if (rememberme.checked) {
+                        document.cookie = "rememberme=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+                        document.cookie = "email=" + emailLogin.value + "; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+                        document.cookie = "loggedIn=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+                    } else {
+                        document.cookie = "rememberme=false";
+                        document.cookie = "email=" + emailLogin.value;
+                        document.cookie = "loggedIn=true";
+                    }
+                    window.location.href = '../index.html';
+                    alert(response);
+                } else {
+                    alert(response);
+                }
+            }
+        });
+    }
+} 
+
+function checkLogin() {
+    if (emailLogin.value == '' || passwordLogin.value == '') {
+        alert('Please fill in all fields');
+        return false;
+    } else {
+        return true;
+    }
+}

js/logout.js

@@ -0,0 +1,11 @@
+//delete all cookies
+function deleteAllCookies() {
+    var cookies = document.cookie.split(";");
+
+    for (var i = 0; i < cookies.length; i++) {
+        var cookie = cookies[i];
+        var eqPos = cookie.indexOf("=");
+        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+    }
+}

js/registration.js

@@ -1,7 +1,7 @@
 const password = document.getElementById('password');
 const password2 = document.getElementById('password2');
-
 password2.addEventListener('change', checkPassword);
+
 const form = document.getElementById('marmeladenLadenRegisterForm');
 form.addEventListener('submit', register);
 
@@ -15,16 +15,20 @@ async function register(event) {
         //create object with form data
         const data = {};
         formData.forEach((value, key) => data[key] = value);
-
+        //log data on console
+        datastring = JSON.stringify(data);
+        console.log(data);
+        console.log(datastring);
         //send data to php with Ajax
         $.ajax({
-            url: '../logic/serviceLogic.php',
+            url: '../logic/registerLogic.php',
             type: 'POST',
-            data: {method: 'register', data: data},
-            datatype: 'json',
+            data: datastring,
+            cache: false,
+            datatype: 'text',
             success: function (response) {
-                if (response === 'success') {
-                    window.location.replace('index.html');
+                if (response == 'success') {
+                    $('#mmlMainContent').load('../components/login.html');
                 } else {
                     alert(response);
                 }
@@ -33,8 +37,6 @@ async function register(event) {
     }
 }
 
-        
-
 async function checkPassword() {
     if (password.value != password2.value) {
         password2.setCustomValidity('Passwords do not match');

logic/getProductData.php

@@ -0,0 +1,35 @@
+<?php
+getData();
+function getData()
+{
+    require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+
+    $sql = "SELECT `product_id`, `name`, `price`, `description`, `stock`, `weight`, `image`, `category`, `created_at` FROM `products`";
+    $stmt = $db->prepare($sql);
+
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($product_id, $name, $price, $description, $stock, $weight, $image, $category, $created_at);
+
+    $data = array();
+
+    while ($stmt->fetch()) {
+        $data[] = array(
+            'product_id' => $product_id,
+            'name' => $name,
+            'price' => $price,
+            'description' => $description,
+            'stock' => $stock,
+            'weight' => $weight,
+            'image' => $image,
+            'category' => $category,
+            'created_at' => $created_at
+        );
+    }
+    $data = json_encode($data);
+    $stmt->close();
+    $db->close();
+
+    echo $data;
+}
+?>

logic/getUserData.php

@@ -0,0 +1,47 @@
+<?php
+include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
+
+$data = json_decode(file_get_contents('php://input'));
+getData($data->username);
+
+function getData($email)
+{
+    require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+    
+    $sql = "SELECT `user_id`, `username`, `password`, `email`, `phone`, `salutation`, `firstname`, `lastname`, `address`, `role`, `created_at`, `plz`, `name` FROM `user` JOIN `cities` ON `plz` = `postalcode` WHERE `username` = ?";
+    $stmt = $db->prepare($sql);
+    $stmt->bind_param("s", $email);
+    
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($user_id, $username, $password, $email, $phone, $salutation, $firstname, $lastname, $address, $role, $created_at, $plz, $name);
+    if ($stmt->num_rows == 1) {
+        if ($stmt -> fetch()) {
+            $data = array(
+                'user_id' => $user_id,
+                'username' => $username,
+                'password' => $password,
+                'email' => $email,
+                'phone' => $phone,
+                'salutation' => $salutation,
+                'firstname' => $firstname,
+                'lastname' => $lastname,
+                'address' => $address,
+                'plz' => $plz,
+                'city' => $name,
+                'role' => $role,
+                'created_at' => $created_at
+            );
+            $data = json_encode($data);
+            $response = $data;
+        } else {
+            $response = "failure";
+        }
+    } else {
+        $response = "failure";
+    }
+    $stmt->close();
+    $db->close();
+    
+    echo $response;
+}

logic/loginLogic.php

@@ -0,0 +1,45 @@
+<?php 
+include($_SERVER['DOCUMENT_ROOT'] . '/config/sessionStart.php');
+include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
+
+$data = json_decode(file_get_contents('php://input'));
+$username = testinput($data->email);
+$passwordUnhashed = testinput($data->password);
+
+loginUser($username, $passwordUnhashed);
+
+function loginUser($username, $passwordUnhashed)
+{
+    require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+    
+    $sql = "SELECT `username`, `password`, `role` FROM `user` WHERE `username` = ?";
+    $stmt = $db->prepare($sql);
+    $stmt->bind_param("s", $username);
+
+
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($username, $password, $role);
+    if ($stmt->num_rows == 1) {
+        $stmt->fetch();
+        if (password_verify($passwordUnhashed, $password)) {
+            $response = "success";
+            $_SESSION['username'] = $username;
+            $_SESSION['role'] = $role;
+            $_SESSION['loggedIn'] = true;
+        } else {
+            $response = "failure";
+        }
+    } else {
+        $response = "failure";
+    }
+    $stmt->close();
+    $db->close();
+    
+    echo $response;
+}
+
+
+
+
+?>

logic/registerLogic.php

@@ -0,0 +1,46 @@
+<?php
+    include($_SERVER['DOCUMENT_ROOT'] . '/logic/testinput.php');
+
+    $data = json_decode(file_get_contents('php://input'));
+
+    $username = testinput($data->email);
+    $password = password_hash(testinput($data->password), PASSWORD_DEFAULT);
+    $email = testinput($data->email);
+    $phone = testinput($data->phone);
+    $salutation = testinput($data->salutation);
+    $firstname = testinput($data->firstname);
+    $lastname = testinput($data->lastname);
+    $street = testinput($data->street);
+    $postalcode = testinput($data->postalcode);
+    $city = testinput($data->city);
+    $role = "customer";
+
+    registerUser($username, $password, $email, $phone, $salutation, $firstname, $lastname, $street, $postalcode, $city, $role);
+
+    function registerUser($username, $password, $email, $phone, $salutation, $firstname, $lastname, $street, $postalcode, $city, $role)
+    {
+
+        require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+        
+        $sql2 = "INSERT IGNORE INTO `cities` (`postalcode`, `name`) VALUES (?,?)";
+        $sql = "INSERT INTO `user` (`username`, `password`, `email`, `phone`, `salutation`, `firstname`, `lastname`, `address`, `plz`, `role`) VALUES (?,?,?,?,?,?,?,?,?,?)";
+        
+
+        $stmtUser = $db->prepare($sql);
+        $stmtCities = $db->prepare($sql2);
+
+        $stmtUser->bind_param("ssssssssss", $username, $password, $email, $phone, $salutation, $firstname, $lastname, $street, $postalcode, $role);
+        $stmtCities->bind_param("is", $postalcode, $city);
+
+        if ($stmtCities->execute() && $stmtUser->execute()) {
+            $response = "success";
+        } else {
+            $response = "failure";
+        }
+        $stmtUser->close();
+        $stmtCities->close();
+        $db->close();
+        
+        echo $response;
+
+    }

logic/serviceLogic.php

@@ -1,18 +1,24 @@
 <?php
 include( $_SERVER['DOCUMENT_ROOT'] . '/logic/userLogic.php' );
 
-$param = "";
+$data = "";
 $method = "";
 
-isset($_GET["method"]) ? $method = $_GET["method"] : false;
-isset($_GET["param"]) ? $param = $_GET["param"] : false;
-
 $logic = new UserLogic();
-$result = $logic->handleUserRequests($method, $param);
+$method = 
+$result = true;
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $json = file_get_contents('php://input');
+    $data = json_decode($json, true);
+            $result = $logic->handleUserRequests($method, $data);
+}
+
+
 if ($result == null) {
-    response("GET", 400, null);
+    response('POST', 400, $result);
 } else {
-    response("GET", 200, $result);
+    response('POST', 200, $result);
 }
 
 function response($method, $status, $data)

logic/submitOrder.php

@@ -0,0 +1,168 @@
+<?php
+$data = json_decode(file_get_contents('php://input'));
+$email = $data->username;
+$firstname = $data->firstname;
+$lastname = $data->lastname;
+$address = $data->address;
+$cart = $data->cart;
+$total = $data->total;
+$payment = $data->paymentId;
+
+
+addOrder($email, $total, $payment, $cart);
+
+//addOrdertoDB($user_id, $total, $payment);
+//$success = addOrderToDB($user_id, $total, $payment);
+
+/*if ($success) {
+    $success = addItemsToOrderItems($cart, $user_id);
+    if ($success) {
+        echo "success";
+    } else {
+        echo "failure";
+    }
+} else {
+    $success = false;
+    echo "failure";
+}*/
+
+
+function addOrder($email, $total, $payment, $cart) {
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+
+    //get UserID
+    $sql = "SELECT `user_id` FROM `user` WHERE `username` = ?";
+    $stmt = $db->prepare($sql);
+    $stmt->bind_param("s", $email);
+
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($user_id);
+    if ($stmt->num_rows == 1) {
+        $stmt->fetch();
+    } else {
+        $user_id = 0;
+    }
+
+    //add order to DB
+    $sql = "INSERT INTO `order_details` (`user_id`, `total`, `payment_id`) VALUES (?, ?, ?)";
+    $stmt = $db->prepare($sql);
+    $stmt->bind_param("idi", $user_id, $total, $payment);
+
+    if ($stmt->execute()) {
+        $successorderToDB = true;
+
+    } else {
+        $successorderToDB = false;
+    }
+
+    //getLastInsertID
+    $sql = "SELECT LAST_INSERT_ID() FROM `order_details`";
+    $stmt = $db->prepare($sql);
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($order_id);
+    if ($stmt->num_rows == 1) {
+        $stmt->fetch();
+    } else {
+        $order_id = 0;
+    }
+
+    //addItemsToOrderItems
+    for ($i = 0; $i < count($cart); $i++) {
+        $product = json_decode($cart[$i]);
+        $product_id = $product->productid;
+        $quantity = $product->count;
+        $sql = "INSERT INTO `order_items` (`order_id`, `product_id`, `quantity`) VALUES (?, ?, ?)";
+        $stmt = $db->prepare($sql);
+        $stmt->bind_param("iii", $order_id, $product_id, $quantity);
+        if ($stmt -> execute()) {
+            $successaddItemsToOrderItems = true;
+        } else {
+            $successaddItemsToOrderItems = false;
+        }
+    }
+    $stmt->close();
+    $db -> close();
+    if ($successorderToDB && $successaddItemsToOrderItems) {
+        echo "success";
+    } else {
+        echo "failure";
+    }
+}
+
+
+/*function getIdByEmail($email) {
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+    $sql = "SELECT `user_id` FROM `user` WHERE `username` = ?";
+    $stmt = $db->prepare($sql);
+    $stmt->bind_param("s", $email);
+
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($user_id);
+    if ($stmt->num_rows == 1) {
+        $stmt->fetch();
+    } else {
+        $user_id = 0;
+    }
+    $stmt->close();
+    $db->close();
+
+    return $user_id;
+}*/
+
+/*function addOrdertoDB($user_id, $total, $payment) {
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+
+    $sql = "INSERT INTO `order_details` (`user_id`, `total`, `payment_id`) VALUES (?, ?, ?)";
+    $stmt = $db->prepare($sql);
+    $stmt->bind_param("iis", $user_id, $total, $payment);
+
+    if ($stmt->execute()) {
+        return true;
+    } else {
+        return false;
+    }
+    $stmt->close();
+    $db->close();
+}*/
+
+/*function getLastInsertID() {
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+    $sql = "SELECT LAST_INSERT_ID() FROM `order_details`";
+    $stmt = $db->prepare($sql);
+    $stmt->execute();
+    $stmt->store_result();
+    $stmt->bind_result($order_id);
+    if ($stmt->num_rows == 1) {
+        $stmt->fetch();
+    } else {
+        $order_id = 0;
+    }
+    $stmt->close();
+    $db->close();
+
+    return $order_id;
+}*/
+
+/*function addItemsToOrderItems($order_id, $cart) {
+    require_once($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+
+    for ($i = 0; $i < count($cart); $i++) {
+        $product = json_decode($cart[$i]);
+        $product_id = $product->product_id;
+        $quantity = $product->quantity;
+        $sql = "INSERT INTO `order_items` (`order_id`, `product_id`, `quantity`) VALUES (?, ?, ?)";
+        $stmt = $db->prepare($sql);
+        $stmt->bind_param("iii", $order_id, $product_id, $quantity);
+
+        if ($stmt->execute()) {
+            return true;
+        } else {
+            return false;
+        }
+        $stmt->close();
+        $db -> close();
+    }
+}*/

logic/updateUserData.php

@@ -0,0 +1,37 @@
+<?php
+$data = json_decode(file_get_contents('php://input'));
+$email = $data->username;
+$phone = $data->phone;
+$address = $data->street;
+$name = $data->city;
+$plz = $data->postalcode;
+$password = $data->password;
+$hashedPassword = $data->hashedPassword;
+updateData($email, $phone, $address, $name, $plz, $password, $hashedPassword);
+
+function updateData($email, $phone, $address, $name, $plz, $password, $hashedPassword){
+    require($_SERVER['DOCUMENT_ROOT'] . '/config/setupDBAccess.php');
+    if (password_verify($password, $hashedPassword)) {
+        $sqlOrt = "INSERT IGNORE INTO `cities` (`postalcode`, `name`) VALUES (?, ?)";
+        $sqlUser = "UPDATE `user` SET `phone` = ?, `address` = ?, `plz` = ? WHERE `username` = ?";
+        $stmtOrt = $db->prepare($sqlOrt);
+        $stmtUser = $db->prepare($sqlUser);
+        $stmtOrt->bind_param("ss", $plz, $name);
+        $stmtUser->bind_param("ssss", $phone, $address, $plz, $email);
+
+        if ($stmtOrt->execute() && $stmtUser->execute()) {
+            $response = "success";
+        } else {
+            $response = "failure";
+        }
+        $stmtOrt->close();
+        $stmtUser->close();
+        $db->close();
+    } else {
+        $response = "failure";
+    }
+    
+    echo $response;
+
+
+}

res/css/style.css

@@ -12,6 +12,9 @@
   background-color: #d86f23 !important;
   border-color: #ba5c19 !important;
 }
+.table-success {
+  background-color: #d86f23 !important;
+}
 
 /* Navbar */
 #top_nav_bar { min-height: 40px;}
@@ -83,3 +86,98 @@
   padding: 10px;
   margin-bottom: 10px;
 }
+
+.registerform .form-control:read-only {
+  background-color: #f07f7f;
+}
+
+
+/* shop page */
+.shoppingpage {
+  background: #eee;
+}
+.card{
+  border:1px solid #eee;
+  cursor: pointer;
+}
+.weight{
+  margin-top: -65px; 
+  transition: all 0.5s;  
+}
+.weight small{
+  color: #e2dede;
+}
+.id small{
+  color: white;
+}
+.shopbutton {
+  padding: 10px;
+  background-color: #d6d4d44f;
+  border-radius: 4px;
+  position: relative;
+  margin-top: 7px;
+  opacity: 0;
+  transition: all 0.8s;
+}
+.cart-button {
+  height: 48px
+}
+.cart-button:focus {
+  box-shadow: none
+}
+.cart {
+  position: relative;
+  height: 48px !important;
+  width: 50px;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  padding: 11px;
+  border-radius: 5px;
+  font-size: 14px;
+  transition: 1s ease-in-out;
+  overflow: hidden;
+}
+.cart-button.clicked span.dot {
+  animation: item 0.3s ease-in forwards
+}
+@keyframes item {
+  0% {
+      opacity: 1;
+      top: 30%;
+      left: 30%
+  }
+  25% {
+      opacity: 1;
+      left: 26%;
+      top: 0%
+  }
+  50% {
+      opacity: 1;
+      left: 23%;
+      top: -22%
+  }
+  75% {
+      opacity: 1;
+      left: 19%;
+      top: -18%
+  }
+  100% {
+      opacity: 1;
+      left: 14%;
+      top: 28%
+  }
+}
+.card:hover .buttons{
+  opacity: 1;
+}
+.card:hover .weight{
+   margin-top: 10px;
+}
+.card:hover{
+  transform: scale(1.04);
+  z-index: 2;
+  overflow: hidden;
+}