By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,498 Members | 1,564 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,498 IT Pros & Developers. It's quick & easy.

How to send exact data from one table to another

P: 2
Hey everyone, I'm working on a small webshop project. I have register and login form which are working fine and are storing data into table users. Now, I have another table: orders, in which I want to transfer data from logged user when he makes order.

users data: id, username, email, password, address, city, country

orders data: id, username, email, address, city, country, item, quantity, price, total_price (where i want firt 6 data to be the same as user which ordered something from the shop)

this is the php code in index.php regarding storing the data in orders table

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     require_once('connect.php');
  3.   $username2 = $_SESSION['username'];
  4.   $email = $_SESSION['email'];
  5.   $address = $_SESSION['address'];
  6.   $city = $_SESSION['city'];
  7.   $country = $_SESSION['country'];
  8.  
  9.  
  10.     if (isset($_POST['purchase_btn'])) 
  11.   {
  12.     $sql = "SELECT * FROM users WHERE username='$username2'";
  13.     $result = mysqli_query($conn, $sql);
  14.  
  15.     if(mysqli_num_rows($result) > 0)
  16.     {
  17.     while($row = mysqli_fetch_assoc($result))
  18.     {
  19.       $id = $row["id"];
  20.       $username2 = $row["username"];
  21.       $email = $row["email"];
  22.       $address = $row["address"];
  23.       $city = $row["city"];
  24.       $country = $row["country"];
  25.     }
  26.     $item = $_POST['item'];
  27.     $quantity = $_POST['quantity'];
  28.     $price = $_POST['price'];
  29.     $total_price = $_POST['total_price'];
  30.  
  31.     $sql = "INSERT INTO orders (username, email, address, city, country, item, quantity, 
  32.             price, total_price) VALUES ('$username2', '$email', '$address', '$city', 
  33.             '$country', $item, $quantity, $price, $total_price);";
  34.     mysqli_query($conn, $sql);
  35.  
  36.   }
  37. }
  38. ?>
  39.  
There is no error codes, it just does nothing when clicked on purchase_btn

any help would be lovely, thanks :)
4 Weeks Ago #1
Share this Question
Share on Google+
1 Reply


P: 2
Update: every code file in my project. Is it maybe something to do with the js code for cart section that needs to be refrenced? Because cart is empty when you open the index.php file and through js it is stored in shop section (add to cart button)

index.php

Expand|Select|Wrap|Line Numbers
  1. <!--Zadnje dodano: PHP kod (potrebna provjera jel dobro, svi ovi values dodani u kodu za svaku stvar (dal valja?) )-->
  2.  
  3.  
  4. <!DOCTYPE html>
  5. <html lang=en>
  6.     <head>
  7.         <!-- Required meta tags always come first -->
  8.         <meta charset="utf-8">
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.         <meta http-equiv="x-ua-compatible" content="ie=edge">
  11.  
  12.         <!-- Bootstrap CSS -->
  13.         <link rel="stylesheet" href="css/bootstrap.min.css">
  14.  
  15.         <!-- Custom Style CSS-->
  16.         <link rel="stylesheet" type="text/css" href="style.css">
  17.         <script src="store.js" async></script>
  18.     </head>
  19.  
  20. <!--**************************************SPAJANJE NA BAZU****************************************************************************************-->
  21. <?php
  22.     require_once('connect.php');
  23.   $username2 = $_SESSION['username'];
  24.   $email = $_SESSION['email'];
  25.   $address = $_SESSION['address'];
  26.   $city = $_SESSION['city'];
  27.   $country = $_SESSION['country'];
  28.  
  29.  
  30.     if (isset($_POST['purchase_btn'])) 
  31.   {
  32.     $sql = "SELECT * FROM users WHERE username='$username2'";
  33.     $result = mysqli_query($conn, $sql);
  34.  
  35.     if(mysqli_num_rows($result) > 0)
  36.     {
  37.     while($row = mysqli_fetch_assoc($result))
  38.     {
  39.       $id = $row["id"];
  40.       $username2 = $row["username"];
  41.       $email = $row["email"];
  42.       $address = $row["address"];
  43.       $city = $row["city"];
  44.       $country = $row["country"];
  45.     }
  46.     $item = $_POST['item'];
  47.     $quantity = $_POST['quantity'];
  48.     $price = $_POST['price'];
  49.     $total_price = $_POST['total_price'];
  50.  
  51.     $sql = "INSERT INTO orders (username, email, address, city, country, item, quantity, price, total_price) VALUES ('$username2', '$email', '$address', '$city', '$country', $item, $quantity, $price, $total_price);";
  52.     mysqli_query($conn, $sql);
  53.  
  54.      /*$_SESSION['message'] = "Thank you for your purchase! You can expect your order in next 3-5 working days. Team MFDAGS :)";*/
  55.   }
  56. }
  57. ?>
  58.  
  59.  
  60. <body>
  61. <!--*******************************************COVER SECTION***************************************************************************************-->
  62.     <section id="cover">
  63.         <div id="cover-caption">
  64.             <div class="container">
  65.                 <div class="col-sm-12 col-sm-offset-1">
  66.                     <h1 class="display-3">Welcome <?php echo "$username2"; ?> to MFDAGS Official website</h1> <!--MOŽDA NE RADI-->
  67.                     <p class="front">Determine who you are and what your brand is, and what you're not. The rest of it is just a lot of noise.</p>
  68.                             <button id="btnshop" class="btn btn-success btn-lg">Shop!</button>
  69.                     <a href="#yogi-shop" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a>
  70.                 </div>
  71.             </div>
  72.         </div>
  73.     </section>
  74. <!--*******************************************NAV BAR***********************************************************************************************-->
  75.     <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;" id="nav-main">
  76.           <img class="navbar-brand" src="photos/showcase.png" height="120px" width="120px">
  77.           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  78.             <span class="navbar-toggler-icon"></span>
  79.           </button>
  80.  
  81.           <div class="collapse navbar-collapse" id="navbarSupportedContent">
  82.             <ul class="navbar-nav mr-auto">
  83.                   <li class="nav-item active">
  84.                     <a class="nav-link" href="#cover">Home <span class="sr-only">(current)</span></a>
  85.                   </li>
  86.                   <li class="nav-item">
  87.                     <a class="nav-link" href="#about">About Us</a>
  88.                   </li>
  89.                   <li class="nav-item dropdown">
  90.                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shop now 
  91.                     </a>
  92.                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  93.                               <a class="dropdown-item" href="#yogi-shop">Yogi Collection</a>
  94.                               <a class="dropdown-item" href="#badger-shop">Badger Collection</a>
  95.                               <a class="dropdown-item" href="#owl-shop">Owl Collection</a>
  96.                         </div>
  97.                   </li>
  98.                   <li class="nav-item">
  99.                     <a class="nav-link" href="#kosarica">Cart</a>
  100.                   </li>
  101.             </ul>
  102.         <div class="dropdown navbar-right" id="right">
  103.           <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><?php echo $username2;?>
  104.             <span class="caret"></span></button>
  105.             <ul class="dropdown-menu">
  106.               <li><a href="logout.php">Logout</a></li>
  107.             </ul>
  108.         </div>
  109.             <form class="form-inline my-2 my-lg-0" action="" id="login-register-form" method="post">
  110.                 <li class="nav-item">
  111.                     <a class="nav-link" href="login_form.php">Login here</a>
  112.                     <a class="nav-link" href="signup.php">Register here</a>
  113.                   </li>
  114.         </form>
  115.           </div>
  116.     </nav>
  117. <!--*******************************************SLIDE SHOW**************************************************************************************-->
  118.     <section id="carousel">
  119.         <div class="bd-example">
  120.               <div id="carousel-home" class="carousel slide" data-ride="carousel">
  121.                 <ol class="carousel-indicators">
  122.                       <li data-target="#carousel-home" data-slide-to="0" class="active"></li>
  123.                        <li data-target="#carousel-home" data-slide-to="1"></li>
  124.                       <li data-target="#carousel-home" data-slide-to="2"></li>
  125.                       <li data-target="#carousel-home" data-slide-to="3"></li>
  126.                       <li data-target="#carousel-home" data-slide-to="4"></li>
  127.                       <li data-target="#carousel-home" data-slide-to="5"></li>
  128.                 </ol>
  129.                 <div class="carousel-inner">
  130.                       <div class="carousel-item active">
  131.                         <img src="photos/DAGS1.jpg" alt="YOGI for man, 2018" height="934px" width="936px">  <!--SLIKA MODELA-->
  132.                         <div class="carousel-caption">
  133.                               <h5>YOGI Collection, black T-Shirt</h5>
  134.                               <p>Domagoj Malic as a model in our black YOGI Male T-Shirt.</p>
  135.                         </div>
  136.                       </div>
  137.                       <div class="carousel-item">
  138.                         <img src="photos/DAGS2.jpg" alt="..." height="934px" width="936px">        <!--SLIKA MODELA-->
  139.                         <div class="carousel-caption">
  140.                               <h5>YOGI Collection, yellow T-Shirt</h5>
  141.                               <p>Mia Dumbovic as a model in our yellow YOGI Female T-Shirt</p>
  142.                         </div>
  143.                       </div>
  144.                       <div class="carousel-item">
  145.                         <img src="photos/DAGS3.jpg" alt="..." height="934px" width="936px">        <!--SLIKA MODELA-->
  146.                            <div class="carousel-caption">
  147.                               <h5>YOGI Collection, white T-Shirt</h5>
  148.                               <p>Mia Dumbovic as a model in our white YOGI Female T-Shirt</p>
  149.                         </div>
  150.                       </div>
  151.                       <div class="carousel-item">
  152.                         <img src="photos/DAGS4.jpg" alt="..." height="934px" width="936px">        <!--SLIKA MODELA-->
  153.                         <div class="carousel-caption">
  154.                               <h5>YOGI Collection, black T-Shirt</h5>
  155.                               <p>Mia Dumbovic as a model in our black YOGI Female T-Shirt</p>
  156.                         </div>
  157.                       </div>
  158.                       <div class="carousel-item">
  159.                         <img src="photos/DAGS5.jpg" alt="..." height="934px" width="936px">        <!--SLIKA MODELA-->
  160.                            <div class="carousel-caption d-none d-md-block">
  161.                               <h5>YOGI Collection, yellow T-Shirt</h5>
  162.                               <p>Juraj Gobac as a model in our yellow YOGI Male T-Shirt</p>
  163.                         </div>
  164.                       </div>
  165.                       <div class="carousel-item">
  166.                         <img src="photos/DAGS6.jpg" alt="..." height="934px" width="936px">        <!--SLIKA MODELA-->
  167.                            <div class="carousel-caption d-none d-md-block">
  168.                               <h5>YOGI Collection, white T-Shirt</h5>
  169.                               <p>Domagoj Malic as a model in our white YOGI Male T-Shirt</p>
  170.                         </div>
  171.                       </div>
  172.                 </div>
  173.                 <a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
  174.                       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  175.                       <span class="sr-only">Previous</span>
  176.                 </a>
  177.                 <a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
  178.                       <span class="carousel-control-next-icon" aria-hidden="true"></span>
  179.                       <span class="sr-only">Next</span>
  180.                 </a>
  181.               </div>
  182.         </div>
  183.     </section>    
  184. <!--************************************ABOUT SECTION************************************************************************************************-->
  185.     <section id="about">
  186.         <div class="section-content">
  187.             <div class="container">
  188.                 <div class="col-md-6">
  189.                     <div class="about-text">
  190.                         <h3>About us</h3>
  191.                         <p class="lead">Located in Sisak, Croatia, we're three friends with an idea about making new clothing brand for young folks like ourselves. From high quality material, reasonable prices and funky style, we are determined to change the bussines! Feel free  to contact us for more information.</p>
  192.                         <p>Juraj Gobac as Commercial Executor, <br>Domagoj Malic as Financial Value-Driver and <br>Dino Kekić as Corporate Ambassador</p>
  193.                         <h5>Follow us on the web!</h5> <!--LINKAJ OVO-->
  194.                         <a href="https://www.facebook.com/" class="btn btn-sm btn-secondary-outline">Facebook</a>
  195.                         <a href="https://www.instagram.com/mfdags/" class="btn btn-sm btn-secondary-outline">Instagram</a>
  196.                         <a href="https://twitter.com/?lang=en" class="btn btn-sm btn-secondary-outline">Twitter</a>
  197.                     </div>
  198.                 </div>
  199.             </div>
  200.         </div>        
  201.     </section>
  202. <!--**************************************SHOPPING******************************************************************************************************-->
  203.     <section class="container content-section" id="yogi-shop">
  204.             <h2 class="section-header">YOGI Collection</h2>
  205.             <div class="shop-items">
  206.                 <div class="shop-item">
  207.                     <span class="shop-item-title" name="item">YOGI Male</span>
  208.                     <img class="shop-item-image" src="photos/slik1.png">
  209.                     <div class="shop-item-details">
  210.                         <span class="shop-item-price" name="price">$23.99</span>
  211.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  212.                     </div>
  213.                 </div>
  214.                 <div class="shop-item">
  215.                     <span class="shop-item-title" name="item">YOGI Female</span>
  216.                     <img class="shop-item-image" src="photos/slik2.png">
  217.                     <div class="shop-item-details">
  218.                         <span class="shop-item-price" name="price">$23.99</span>
  219.                         <button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>
  220.                     </div>
  221.                 </div>
  222.                 <div class="shop-item">
  223.                     <span class="shop-item-title" name="item">YOGI Dogs</span>
  224.                     <img class="shop-item-image" src="photos/doggy.png">
  225.                     <div class="shop-item-details">
  226.                         <span class="shop-item-price" name="price">$19.99</span>
  227.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  228.                     </div>
  229.                 </div>
  230.             </div>
  231.         </section>
  232.         <section class="container content-section" id="badger-shop">
  233.             <h2 class="section-header">BADGER Collection</h2>
  234.             <div class="shop-items">
  235.                 <div class="shop-item">
  236.                     <span class="shop-item-title" name="item">BADGER Male</span>
  237.                     <img class="shop-item-image" src="photos/majica8.jpg">
  238.                     <div class="shop-item-details">
  239.                         <span class="shop-item-price" name="price">$39.99</span>
  240.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  241.                     </div>
  242.                 </div>
  243.                 <div class="shop-item">
  244.                     <span class="shop-item-title" name="item">BADGER Female</span>
  245.                     <img class="shop-item-image" src="photos/majica7.jpg">
  246.                     <div class="shop-item-details">
  247.                         <span class="shop-item-price" name="price">$34.99</span>
  248.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  249.                     </div>
  250.                 </div>
  251.                 <div class="shop-item">
  252.                     <span class="shop-item-title" name="item">BADGER UniSex</span>
  253.                     <img class="shop-item-image" src="photos/majica5.jpg">
  254.                     <div class="shop-item-details">
  255.                         <span class="shop-item-price" name="price">$44.99</span>
  256.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  257.                     </div>
  258.                 </div>
  259.             </div>
  260.         </section>
  261.         <section class="container content-section" id="owl-shop">
  262.             <h2 class="section-header">OWL Collection</h2>
  263.             <div class="shop-items">
  264.                 <div class="shop-item">
  265.                     <span class="shop-item-title" name="item">OWL Male</span>
  266.                     <img class="shop-item-image" src="photos/owl6.jpg">
  267.                     <div class="shop-item-details">
  268.                         <span class="shop-item-price" name="price">$29.99</span>
  269.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  270.                     </div>
  271.                 </div>
  272.                 <div class="shop-item">
  273.                     <span class="shop-item-title" name="item">OWL Female</span>
  274.                     <img class="shop-item-image" src="photos/owl5.jpg">
  275.                     <div class="shop-item-details">
  276.                         <span class="shop-item-price" name="price">$34.99</span>
  277.                         <button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>
  278.                     </div>
  279.                 </div>
  280.                 <div class="shop-item">
  281.                     <span class="shop-item-title" name="item">OWL UniSex</span>
  282.                     <img class="shop-item-image" src="photos/owl2.jpg">
  283.                     <div class="shop-item-details">
  284.                         <span class="shop-item-price" name="price">$29.99</span>
  285.                         <button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
  286.                     </div>
  287.                 </div>
  288.             </div>
  289.         </section>
  290. <!--**************************************CART*****************************************************************************************************-->
  291.     <section class="container content-section" id="kosarica">
  292.             <h2 class="section-header">CART</h2>
  293.             <h3>Before ordering anything, make sure that you are logged in</h3>
  294.             <div class="cart-row">
  295.                 <span class="cart-item cart-header cart-column">ITEM</span>
  296.                 <span class="cart-price cart-header cart-column">PRICE</span>
  297.                 <span class="cart-quantity cart-header cart-column">QUANTITY</span>
  298.             </div>
  299.             <div class="cart-items">
  300.  
  301.             </div>
  302.  
  303.             <div class="cart-total">
  304.                 <strong class="cart-total-title">Total</strong>
  305.                 <span class="cart-total-price"  name="total_price">$0</span>
  306.             </div>
  307.             <button class="btn btn-primary btn-purchase" name="purchase_btn" type="button">PURCHASE</button>
  308.         </section>
  309.  
  310. <!--********************************************PRE-FOOTER*********************************************************************************************-->
  311.     <section id="company">
  312.         <div class="container">
  313.           <div class="row">
  314.             <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  315.               <h4>Contact Us</h4>
  316.                 <ul>
  317.                   <li><i class="fa fa-phone"></i> (+385)981828557</li>
  318.                   <li><i class="fa fa-envelope"></i>dagsbussines@gmail.com</li>
  319.                   <li><i class="fa fa-map"></i> Ulica Stjepana Rozankovica 4, 44000 Sisak</li>
  320.                 </ul>
  321.             </div>
  322.             <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  323.               <h4>About Us</h4>
  324.               <ul>
  325.                   <li>Fashion label company.</li>
  326.                   <li>High quality material.</li>
  327.                   <li>Changing the business.</li>
  328.                 </ul>
  329.             </div>
  330.             <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
  331.               <h4>Newsletter</h4>
  332.               <p>Subscribe to our Newsletter</p>
  333.               <form class="" action="" method="post">
  334.                 <input type="text" name="email" value="" placeholder="Enter Email">
  335.                 <button type="submit" name="button">Submit</button>
  336.               </form>
  337.             </div>
  338.           </div>
  339.         </div>
  340.     </section>
  341. <!--*******************************************FOOTER*******************************************************************************************************-->
  342.     <!--Footer-->
  343.     <footer id="mainfooter">
  344.       <div class="container">
  345.         <div class="row center-xs center-sm center-md center-lg">
  346.           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
  347.             <p>Copyright &copy; 2019 | MFDags - Bart</p>
  348.           </div>
  349.         </div>
  350.       </div>
  351.     </footer>
  352. <!--*******************************************DISCOUNT*****************************************************************************************************-->
  353.     <div class="bg-modal">
  354.         <div class="modal-content">
  355.             <div class="close">+</div>
  356.             <img src="photos/bravocado.jpg" height="150px" width="150px">
  357.             <h4>Congratulations!</h4>
  358.             <p>
  359.                 Take advantage of 20% discount on your order<br>
  360.                 Use code<br>
  361.                 <b>MFDAGS</b>
  362.             </p>
  363.         </div>
  364.     </div>
  365.  
  366.  
  367.                                 <!-- jQuery first, then Bootstrap JS. -->
  368.     <script src="js/bootstrap.min.css"></script>
  369.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  370.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  371.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  372.     <script>
  373.         document.getElementById('btnshop').addEventListener('click',
  374.         function() {
  375.         document.querySelector('.bg-modal').style.display = 'flex';
  376.         });
  377.  
  378.         document.querySelector('.close').addEventListener('click',
  379.         function(){
  380.         document.querySelector('.bg-modal').style.display = 'none';
  381.         });
  382.     </script>
  383. </body>
  384. </html>
  385.  
store.js

Expand|Select|Wrap|Line Numbers
  1. if(document.readyState == 'loading') {
  2.     document.addEventListener('DOMContentLoaded', ready)
  3. } else {
  4.     ready()
  5. }
  6.  
  7. function ready() {
  8.     var removeCartItemButtons = document.getElementsByClassName('btn-danger')
  9.     for (var i = 0; i < removeCartItemButtons.length; i++){
  10.         var button = removeCartItemButtons[i]
  11.         button.addEventListener('click', removeCartItem)
  12.         }
  13.  
  14.     var quantityInputs = document.getElementsByClassName('cart-quantity-input')
  15.         for (var i = 0; i < quantityInputs.length; i++) {
  16.             var input = quantityInputs[i]
  17.             input.addEventListener('change', quantityChanged)
  18.         }
  19.  
  20.     var addToCartButtons = document.getElementsByClassName('shop-item-button')
  21.         for (var i = 0; i < addToCartButtons.length; i++) {
  22.             var button = addToCartButtons[i]
  23.             button.addEventListener('click', addToCartClicked)
  24.         }
  25.     document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
  26. }
  27.  
  28. function purchaseClicked(){
  29.     alert('Thank you for your purchase')
  30.     var cartItems = document.getElementsByClassName('cart-items')[0]
  31.     while (cartItems.hasChildNodes()){
  32.         cartItems.removeChild(cartItems.firstChild)
  33.     }
  34.     updateCartTotal()
  35. }
  36.  
  37. function removeCartItem(event) {
  38.     var buttonClicked = event.target
  39.         buttonClicked.parentElement.parentElement.remove()
  40.         updateCartTotal()
  41. }
  42.  
  43. function quantityChanged(event) {
  44.     var input = event.target
  45.     if (isNaN(input.value) || input.value <= 0) {
  46.         input.value = 1
  47.     }
  48.     updateCartTotal()
  49. }
  50.  
  51. function addToCartClicked(event) {
  52.     var button = event.target
  53.     var shopItem = button.parentElement.parentElement
  54.     var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
  55.     var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
  56.     var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
  57.     addItemToCart(title, price, imageSrc)
  58.     updateCartTotal()
  59. }
  60.  
  61. function addItemToCart(title,price,imageSrc) {
  62.     var cartRow = document.createElement('div')
  63.     cartRow.classList.add('cart-row')
  64.     var cartItems = document.getElementsByClassName('cart-items')[0]
  65.     var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
  66.     for (var i = 0; i < cartItemNames.length; i++){
  67.         if (cartItemNames[i].innerText == title) {
  68.             alert('This item is already added to the cart!')
  69.             return
  70.         }
  71.     }
  72.     var cartRowContents = `
  73.     <div class="cart-item cart-column">
  74.         <img class="cart-item-image" src=${imageSrc} width="100" height="100">
  75.            <span class="cart-item-title">${title}</span>
  76.     </div>
  77.     <span class="cart-price cart-column">${price}</span>
  78.     <div class="cart-quantity cart-column">
  79.           <input class="cart-quantity-input" type="number" value="1">
  80.           <button class="btn btn-danger" type="button">REMOVE</button>
  81.     </div>`
  82.     cartRow.innerHTML = cartRowContents
  83.     cartItems.append(cartRow)
  84.     cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click',removeCartItem)
  85.     cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change',quantityChanged)
  86. }
  87.  
  88.  
  89. function updateCartTotal() {
  90.     var cartItemContainer = document.getElementsByClassName('cart-items')[0]
  91.     var cartRows = cartItemContainer.getElementsByClassName('cart-row')
  92.     var total = 0
  93.     for (var i = 0; i < cartRows.length; i++){
  94.         var cartRow = cartRows[i]
  95.         var priceElement = cartRow.getElementsByClassName('cart-price')[0]
  96.         var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
  97.         var price = parseFloat(priceElement.innerText.replace('$', ''))
  98.         var quantity = quantityElement.value
  99.         total = total + (price*quantity)
  100.     }
  101.     total = Math.round(total * 100) / 100
  102.     document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
  103. }
  104.  
signup.php

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     require_once('connect.php');
  3.  
  4. if (isset($_POST['register_btn'])) {
  5.  
  6.     $username2 = mysqli_real_escape_string($conn, $_POST['username']);
  7.     $email = mysqli_real_escape_string($conn, $_POST['email']);
  8.     $password = mysqli_real_escape_string($conn, $_POST['password']);
  9.     $password2 = mysqli_real_escape_string($conn, $_POST['password2']);
  10.     $address = mysqli_real_escape_string($conn, $_POST['address']);
  11.     $city = mysqli_real_escape_string($conn, $_POST['city']);
  12.     $country = mysqli_real_escape_string($conn, $_POST['country']);
  13.  
  14.     if ($password == $password2) {
  15.     $password = md5($password);
  16.     $sql = "INSERT INTO users(username, email, password, address, city, country) VALUES('$username2', '$email', '$password', '$address', '$city', '$country')";
  17.     $result = mysqli_query($conn, $sql);
  18.     header("Location: login_form.php");
  19.     }
  20.     else{
  21.         echo "Error: The two passwords don't match!";
  22.     }
  23.     }
  24. ?>
  25.  
  26. <html>
  27. <head>
  28. <title>Sign up Form</title>
  29.     <link rel="stylesheet" type="text/css" href="login.css">
  30. <body>
  31.     <div class="loginbox">
  32.         <img src="photos/doggy.png" class="avatar">
  33.             <h1>Sign up Here</h1>
  34.             <?php
  35.                 if (isset($_SESSION['message'])) {
  36.                     echo "<div id='error_msg'".$_SESSION['message']."</div>";
  37.                     unset($_SESSION['message']);
  38.                 }
  39.             ?>
  40.             <form method="post" action="signup.php">
  41.                 <p>Enter your email</p>
  42.                 <input type="text" name="email" placeholder="Enter Email">
  43.                 <p>Choose your username</p>
  44.                 <input type="text" name="username" placeholder="Enter Username">
  45.                 <p>Password</p>
  46.                 <input type="password" name="password" placeholder="Enter Password">
  47.                 <p>Enter your password again</p>
  48.                 <input type="password" name="password2" placeholder="Re-enter Password">
  49.                 <p>Enter your address</p>
  50.                 <input type="text" name="address" placeholder="Enter Address">
  51.                 <p>Enter your city</p>
  52.                 <input type="text" name="city" placeholder="Enter City">
  53.                 <p>Enter your country of residence</p>
  54.                 <input type="text" name="country" placeholder="Enter country">
  55.                 <input type="submit" name="register_btn" value="Register"><br>
  56.                 <a href="login_form.php">Already have an account?</a>
  57.             </form>
  58.     </div>
  59. </body>
  60. </head>
  61. </html>
  62.  
login_form.php

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.     require_once('connect.php');
  3.  
  4. if (isset($_POST['login_btn'])) {
  5.  
  6.     $username2 = mysqli_real_escape_string($conn, $_POST['username']);
  7.     $password = mysqli_real_escape_string($conn, $_POST['password']);
  8.  
  9.     $password = md5($password);
  10.     $sql = "SELECT * FROM users WHERE username='$username2' AND password='$password'";
  11.     $result = mysqli_query($conn, $sql);
  12.  
  13.     if(mysqli_num_rows($result) > 0)
  14.     {
  15.         while($row = mysqli_fetch_assoc($result))
  16.         {
  17.             $id = $row["id"];
  18.             $username2 = $row["username"];
  19.             session_start();
  20.             $_SESSION['id'] = $id;
  21.             $_SESSION['username'] = $username2;
  22.             $_SESSION['email'] = $email;
  23.             $_SESSION['address'] = $address;
  24.             $_SESSION['city'] = $city;
  25.             $_SESSION['country'] = $country;
  26.         }
  27.         header("Location: index.php");
  28.     }
  29.     else
  30.     {
  31.         echo "Invalid username or password";
  32.     }
  33. }
  34. ?>
  35.  
  36.  
  37.  
  38. <html>
  39. <head>
  40. <title>Login Form</title>
  41.     <link rel="stylesheet" type="text/css" href="login.css">
  42. <body>
  43.     <div class="loginbox">
  44.         <img src="photos/doggy.png" class="avatar">
  45.             <h1>Login Here</h1>
  46.              <?php
  47.                 if (isset($_SESSION['message'])) {
  48.                     echo "<div id='error_msg'".$_SESSION['message']."</div>";
  49.                     unset($_SESSION['message']);
  50.                 }
  51.             ?>
  52.             <form method="post" action="login_form.php">
  53.                 <p>Username</p>
  54.                 <input type="text" name="username" placeholder="Enter Username">
  55.                 <p>Password</p>
  56.                 <input type="password" name="password" placeholder="Enter Password">
  57.                 <input type="submit" name="login_btn" value="Login"><br>
  58.                 <a href="signup.php">Still don't have an account?</a>
  59.             </form>
  60.     </div>
  61. </body>
  62. </head>
  63. </html>
  64.  
connect.php and logout.php not needed i believe
4 Weeks Ago #2

Post your reply

Sign in to post your reply or Sign up for a free account.