-1

Created shopping cart using html classes and added functionalities to them using javascript and now i wanted to save the cart details like product name, price,total to phpmysql database I have written the code in php for connecting my shopping cart with database but its not working

--html page

<html>
<head>
<title>Fruits & Vegetables</title>
<link rel="stylesheet"type="text/css"href="FVc.css">
</head>
<body>
<Style>body {background-image: url('image1.jpg');background-repeat: no-repeat;backgroung-attachment:fixed;background-size:cover;}</style><div class="container">
  <div class="screen-togo">
    <h2>To Go Menu</h2>
    <ul class="menu-items">
      <!--    Menu Item 1    -->
      <li class="menu-item">
        <img src="potato.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">potato</p>
          <p class="g-price">RS 30</p>
        </div>
 <button
          class="add-button"
          data-title="potato"
          data-price="30">Add to Cart</button>
        
      </li>
      <!--    Menu Item 2    -->
      <li class="menu-item">
        <img src="onion.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">onion</p>
          <p class="g-price">RS 40</p>
        </div>
        <button
          class="add-button"
          data-title="onion"
          data-price="40">Add to Cart</button>
      </li>
      <!--    Menu Item 3    -->
      <li class="menu-item">
        <img src="capsicum.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">capsicum</p>
          <p class="g-price">RS 20</p>
        </div>
        <button
          class="add-button"
          data-title="capsicum"
          data-price="20">Add to Cart</button>
      </li>
      <!--    Menu Item 4    -->
      <li class="menu-item">
        <img src="brinjal.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">brinjal</p>
          <p class="g-price">RS 15</p>
        </div>
        <button 
          class="add-button"
          data-title="brinjal"
          data-price="15"
          >Add to Cart</button>
      </li>
      <!--    Menu Item 5    -->
      <li class="menu-item">
        <img src="tomato.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">tomato</p>
          <p class="g-price">RS 50</p>
        </div>
        <button
          class="add-button"
          data-title="tomato"
          data-price="50">Add to Cart</button>
      </li>
    

      <!--    Menu Item 6    -->
      <li class="menu-item">
        <img src="apple.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">apple</p>
          <p class="g-price">RS 200</p>
        </div>
        <button
          class="add-button"
          data-title="apple"
          data-price="200">Add to Cart</button>
      </li>
  
  
<!--    Menu Item 7    -->
      <li class="menu-item">
        <img src="banana.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">banana</p>
          <p class="g-price">RS 120</p>
        </div>
        <button
          class="add-button"
          data-title="banana"
          data-price="120">Add to Cart</button>
      </li>
    
<!--    Menu Item 8    -->
      <li class="menu-item">
        <img src="pomegrenate.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">pomegrenate</p>
          <p class="g-price">RS 300</p>
        </div>
        <button
          class="add-button"
          data-title="pomegrenate"
          data-price="300">Add to Cart</button>
      </li>
    
<!--    Menu Item 9   -->
      <li class="menu-item">
        <img src="guava.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">guava</p>
          <p class="g-price">RS 80</p>
        </div>
        <button
          class="add-button"
          data-title="guava"
          data-price=" 80">Add to Cart</button>
      </li>
    
<!--    Menu Item 10   -->
      <li class="menu-item">
        <img src="mango.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">mango</p>
          <p class="g-price">RS 60</p>
        </div>
        <button
          class="add-button"
          data-title="mango"
          data-price="60">Add to Cart</button>
      </li>
    

<!--    Menu Item 11   -->
      <li class="menu-item">
        <img src="grapes.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">grapes</p>
          <p class="g-price">RS 40</p>
        </div>
        <button
          class="add-button"
          data-title="grapes"
          data-price="40">Add to Cart</button>
      </li>
    
<!--    Menu Item 12   -->
      <li class="menu-item">
        <img src="papapya.jpg" class="menu-image">
        <div class="menu-item-dets">
          <p class="menu-item-heading">papapya</p>
          <p class="g-price">RS 55</p>
        </div>
        <button
          class="add-button"
          data-title="papapya"
          data-price="55">Add to Cart</button>
      </li>
    
  </div>
  <div class="screen-cart">
    <h2>Your Cart</h2>
    <!--  Cart Items -->

    <ul class="cart-items">
    </ul>
  
    <div class="cart-math">
      <p>Add items to cart</p>

    </div>



 <b><a href = "consumer_dashboard.php" target = "_self">Back</a></b>
<button style="background-color:#87CEFA" align =right><a href = "Fvconnect.php?id=F">OrderNow</a></button>

  </div>
</div> 

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
<script src="Fruits.js"></script>

</body>
</html>

--css code

body {
  background-image: url('../img/background.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  font-family: "Poppins", sans-serif;
}

h2, .g-price {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
}

.g-price {
  margin: 8px 0;
}

.container {
  width: 90%;
  max-width: 780px;
  margin: 0 auto;
  padding: 70px 0;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 950px) {
  .container {
    display: block;
  }
}
.screen-togo, .screen-cart {
  width: 375px;
  max-height: 750px;
  overflow: scroll;
  border-radius: 25px;
  background: white;
  padding-top: 30px;
  padding-left: 30px;
  margin: 20px;
  box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.1);
}

ul {
  padding: 0;
  list-style: none;
}

.menu-item {
  background: #E4F0FD;
  border-radius: 20px 0 0 20px;
  margin: 30px 0;
  padding-top: 15px;
  padding-right: 30px;
  padding-bottom: 10px;
  position: relative;
}
.menu-item:nth-child(2n) {
  background: #FBE4F0;
}
.menu-item:nth-child(3n) {
  background: #F7F7FE;
}
.menu-item:nth-child(4n) {
  background: #E4FDF1;
}
.menu-item img {
  width: 150px;
  position: absolute;
  top: -20px;
  left: -20px;
}
.menu-item .add-button {
  position: absolute;
  border: none;
  background: #6B00F5;
  padding: 6px 20px 4px;
  border-radius: 20px;
  color: white;
  font-weight: 700;
  font-size: 16px;
  bottom: -10px;
  left: 150px;
  transition: all 0.3s;
}
.menu-item .add-button:hover {
  background: #5815AE;
}

.menu-item-dets {
  margin-left: 150px;
  padding-bottom: 15px;
}

.menu-item-heading {
  font-size: 18px;
  margin: 10px 0 12px;
}

.screen-cart {
  padding-right: 30px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(10px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.cart-item {
  display: flex;
  align-items: flex-start;
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #D7D7F9;
  animation: fadeIn 0.3s;
}
.cart-item:last-child {
  border-bottom: 5px solid #D7D7F9;
}
.cart-item img {
  width: 30px;
}
.cart-item .g-price {
  font-size: 24px;
}

.cart-item-dets {
  margin-left: 15px;
  width: 100%;
}

.cart-item-heading {
  margin: 10px 0;
}

.cart-math-item {
  margin: 5px 0;
  font-weight: 700;
}
.cart-math-item span {
  display: inline-block;
  text-align: right;
}
.cart-math-item .cart-math-header {
  width: 50%;
}
.cart-math-item .g-price {
  width: 40%;
}

--javascript code

let subtotal = 0;


const calculateTax = subtotal => {
  const tax = subtotal * 0.13;
  const formattedTax = tax.toFixed(2);
  return formattedTax;
};

const calculateTotal = subtotal => {
  const tax = calculateTax(subtotal);
  const total = parseFloat(subtotal) + parseFloat(tax);
  const formattedTotal = total.toFixed(2);
  return formattedTotal;
};

const getImgLink = title => {
  let imgLink;
  switch (title) {
    case 'potato':
      imgLink = 'potato.jpg';
      break;
    case 'onion':
      imgLink = 'onion.jpg';
      break;
    case 'capsicum':
      imgLink = 'capsicum.jpg';
      break;
    case 'brinjal':
      imgLink = 'brinjal.jpg';
      break;
    case 'tomato':
      imgLink = 'tomato.jpg';
      break;
case 'apple':
      imgLink = 'apple.jpg';
      break;
case 'banana':
      imgLink = 'banana.jpg';
      break;
case 'mango':
      imgLink = 'mango.jpg';
      break;
case 'pomegrenate':
      imgLink = 'pomegrenate.jpg';
      break;
case 'guava':
      imgLink = 'guava.jpg';
      break;
case 'grapes':
      imgLink = 'grapes.jpg';
      break;
case 'papapya':
      imgLink = 'papapya.jpg';
      break;
    default:
      imgLink = 'potato.jpg';}

  return imgLink;
};
$('.add-button').on('click', function () {
  const title = $(this).data('title');
  const price = $(this).data('price');
  const imgLink = getImgLink(title);
 
  const element = `
    <li name=cart class="cart-item">
      <img src="${imgLink}" alt="${title}">
      <div class="cart-item-dets">
        <p class="cart-item-heading">${title}</p>
        <p class="g-price">Rs${price}</p>
      </div>
    </li>
  `;
  $('.cart-items').append(element);


  subtotal = subtotal + price;

  const formattedSubtotal = subtotal.toFixed(2);
  const tax = calculateTax(subtotal);
  const total = calculateTotal(subtotal);

  $('.cart-math').html(`
    <p class="cart-math-item">
      <span class="cart-math-header">Subtotal:</span>
      <span class="g-price subtotal">${formattedSubtotal}</span>
    </p>
    <p class="cart-math-item">
      <span class="cart-math-header">Tax:</span>
      <span class="g-price tax">${tax}</span>
    </p>
    <p class="cart-math-item">
      <span class="cart-math-header">Total:</span>
      <span class="g-price total">Rs${total}</span>
    </p>
  `); 
});

--php code

<?php
session_start();

$host="localhost";
  $user="root";
  $password="abc";
  $db_name="gsd";

   $con = mysqli_connect($host, $user, $password, $db_name);

$LoginId=$_SESSION['id'];
$Category=$_GET['id'];
$TotalAmt = "10";
$NoItem = "2";

echo $LoginId;
echo $Category; 

if($_POST['OrderNow'])
{
echo "T";
echo $s="insert into MyOrder(LoginId,Category,TotalAmt,NoItem)values('$LoginId','$Category','$TotalAmt','$NoItem')";
echo"Order Placed Successfull";
header('Refresh:50; URL=http://localhost/consumer_dashboard.php');

 if (mysqli_query($con,$s)){
echo"data inserted";
}
else{
echo"error";}

}
?>
Shadow
  • 33,525
  • 10
  • 51
  • 64
Rahul sinha
  • 1
  • 1
    "Not working" isn't an error message or a useful problem statement. We can't fix "not working" in code, like a mechanic can't fix a car that is "not working" without any other information about the problem. How isn't it working? What [debugging](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/) have you done? What exactly happens when you run this? What did you expect to happen instead? Please provide details of error messages, unexpected behaviour etc. See also [What do you mean "It doesn't work"?](https://meta.stackexchange.com/questions/147616/what-do-you-mean-it-doesnt-work) – ADyson Nov 29 '22 at 16:09
  • P.S. As you're new to StackOverflow (welcome!) I suggest you take the [tour] which you were recommended to do when you signed up for StackOverflow (but I can see from your profile that you haven't) and read the [ask] guide, and [What topics can I ask about here?](https://stackoverflow.com/help/on-topic). That way you'll have a better idea of what a good question looks like, and then you can [edit] yours to improve its quality, and therefore improve your chances of getting an answer. These resources are here to help you have a good experience on StackOverflow, so please use them. Thanks. – ADyson Nov 29 '22 at 16:09
  • Also how highly doubt a big pile of CSS is going to be relevant to the issue. Please provide only a [mre] of the issue - i.e. the smallest code necessary to demonstrate the problem, not just an unfiltered dump of your entire codebase. That will make it a lot easier for us (and you) to get to the root of the issue quickly. – ADyson Nov 29 '22 at 16:10
  • **Warning:** Your code is vulnerable to SQL Injection attacks. You should use parameterised queries and prepared statements to help prevent attackers from compromising your database by using malicious input values. http://bobby-tables.com gives an explanation of the risks, as well as some examples of how to write your queries safely using PHP / mysqli. **Never** insert unsanitised data directly into your SQL. The way your code is written now, someone could easily steal, incorrectly change, or even delete your data. – ADyson Nov 29 '22 at 16:11
  • https://phpdelusions.net/mysqli also contains good examples of writing safe SQL using mysqli. See also the [mysqli documentation](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php) and this: [How can I prevent SQL injection in PHP?](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) . Parameterising your queries will also greatly reduce the risk of accidental syntax errors as a result of un-escaped or incorrectly quoted input values. If you learnt your current technique from a tutorial or book, please don't use it again. – ADyson Nov 29 '22 at 16:11

1 Answers1

1

Use an AJAX request to send the cart data to the server.

You'll need to do some JSON encoding/decoding in your JS and PHP on the data.

Should be enough to get you started.

noob_sadge
  • 21
  • 3
  • If you use ajax, then no, you do not need form element or any of the unput elements as js will take care of sending the data to the server. You can use forms and form input elemens with ajax, but you do not have to. – Shadow Nov 29 '22 at 16:43
  • Yes, thats true. Instead of ajax, you would just add a submit button on the page. – noob_sadge Nov 29 '22 at 16:55