Introduction
In this tutorial, we will learn how to create a simple shopping cart in Node.js with session storage. We will create a simple e-commerce application that will allow users to add items to their cart and view their cart. The shopping cart will be implemented using session storage to store the cart data.
Prerequisites:
- Node.js installed on your machine.
- Basic knowledge of Node.js and Express.js.
Step 1: Set up the project and install dependencies
Create a new directory for your project and navigate to that directory using the command prompt. Once you are inside the directory, initialize the Node.js project by running the following command:
npm init
This will create a package.json file in your project directory. Next, we need to install the required dependencies for our project. We will be using the following dependencies:
- Express.js: A Node.js web application framework.
- body-parser: A Node.js middleware for handling HTTP request body parsing.
- express-session: A Node.js middleware for handling user sessions.
- mysql: A Node.js driver for MySQL database.
Install the dependencies using the following command:
npm install express body-parser express-session mysql
Step 2: Create the product table
Create a new table named product in your MySQL database using the following SQL script:
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `product`
--
CREATE TABLE `product` (
`product_id` int(20) NOT NULL,
`product_name` varchar(120) NOT NULL,
`product_brand` varchar(100) NOT NULL,
`product_price` decimal(8,2) NOT NULL,
`product_ram` char(5) NOT NULL,
`product_storage` varchar(50) NOT NULL,
`product_camera` varchar(20) NOT NULL,
`product_image` varchar(100) NOT NULL,
`product_quantity` mediumint(5) NOT NULL,
`product_status` enum('0','1') NOT NULL COMMENT '0-active,1-inactive'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Indexes for table `product`
--
ALTER TABLE `product`
ADD PRIMARY KEY (`product_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `product`
--
ALTER TABLE `product`
MODIFY `product_id` int(20) NOT NULL AUTO_INCREMENT;
Insert some sample data into the product table using the following SQL script:
--
-- Dumping data for table `product`
--
INSERT INTO `product` (`product_id`, `product_name`, `product_brand`, `product_price`, `product_ram`, `product_storage`, `product_camera`, `product_image`, `product_quantity`, `product_status`) VALUES
(1, 'Honor 9 Lite (Sapphire Blue, 64 GB) (4 GB RAM)', 'Honor', '14499.00', '4', '64', '13', 'image-1.jpeg', 10, '1'),
(2, '\r\nInfinix Hot S3 (Sandstone Black, 32 GB) (3 GB RAM)', 'Infinix', '8999.00', '3', '32', '13', 'image-2.jpeg', 10, '1'),
(3, 'VIVO V9 Youth (Gold, 32 GB) (4 GB RAM)', 'VIVO', '16990.00', '4', '32', '16', 'image-3.jpeg', 10, '1'),
(4, 'Moto E4 Plus (Fine Gold, 32 GB) (3 GB RAM)', 'Moto', '11499.00', '3', '32', '8', 'image-4.jpeg', 10, '1'),
(5, 'Lenovo K8 Plus (Venom Black, 32 GB) (3 GB RAM)', 'Lenevo', '9999.00', '3', '32', '13', 'image-5.jpg', 10, '1'),
(6, 'Samsung Galaxy On Nxt (Gold, 16 GB) (3 GB RAM)', 'Samsung', '10990.00', '3', '16', '13', 'image-6.jpeg', 10, '1'),
(7, 'Moto C Plus (Pearl White, 16 GB) (2 GB RAM)', 'Moto', '7799.00', '2', '16', '8', 'image-7.jpeg', 10, '1'),
(8, 'Panasonic P77 (White, 16 GB) (1 GB RAM)', 'Panasonic', '5999.00', '1', '16', '8', 'image-8.jpeg', 10, '1'),
(9, 'OPPO F5 (Black, 64 GB) (6 GB RAM)', 'OPPO', '19990.00', '6', '64', '16', 'image-9.jpeg', 10, '1'),
(10, 'Honor 7A (Gold, 32 GB) (3 GB RAM)', 'Honor', '8999.00', '3', '32', '13', 'image-10.jpeg', 10, '1'),
(11, 'Asus ZenFone 5Z (Midnight Blue, 64 GB) (6 GB RAM)', 'Asus', '29999.00', '6', '128', '12', 'image-12.jpeg', 10, '1'),
(12, 'Redmi 5A (Gold, 32 GB) (3 GB RAM)', 'MI', '5999.00', '3', '32', '13', 'image-12.jpeg', 10, '1'),
(13, 'Intex Indie 5 (Black, 16 GB) (2 GB RAM)', 'Intex', '4999.00', '2', '16', '8', 'image-13.jpeg', 10, '1'),
(14, 'Google Pixel 2 XL (18:9 Display, 64 GB) White', 'Google', '61990.00', '4', '64', '12', 'image-14.jpeg', 10, '1'),
(15, 'Samsung Galaxy A9', 'Samsung', '36000.00', '8', '128', '24', 'image-15.jpeg', 10, '1'),
(16, 'Lenovo A5', 'Lenovo', '5999.00', '2', '16', '13', 'image-16.jpeg', 10, '1'),
(17, 'Asus Zenfone Lite L1', 'Asus', '5999.00', '2', '16', '13', 'image-17.jpeg', 10, '1'),
(18, 'Lenovo K9', 'Lenovo', '8999.00', '3', '32', '13', 'image-18.jpeg', 10, '1'),
(19, 'Infinix Hot S3x', 'Infinix', '9999.00', '3', '32', '13', 'image-19.jpeg', 10, '1'),
(20, 'Realme 2', 'Realme', '8990.00', '4', '64', '13', 'image-20.jpeg', 10, '1'),
(21, 'Redmi Note 6 Pro', 'Redmi', '13999.00', '4', '64', '20', 'image-21.jpeg', 10, '1'),
(22, 'Realme C1', 'Realme', '7999.00', '2', '16', '15', 'image-22.jpeg', 10, '1'),
(23, 'Vivo V11', 'Vivo', '22900.00', '6', '64', '21', 'image-23.jpeg', 10, '1'),
(24, 'Oppo F9 Pro', 'Oppo', '23990.00', '6', '64', '18', 'image-24.jpg', 10, '1'),
(25, 'Honor 9N', 'Honor', '11999.00', '4', '64', '15', 'image-25.jpg', 10, '1'),
(26, 'Redmi 6A', 'Redmi', '6599.00', '2', '16', '13', 'image-26.jpeg', 10, '1'),
(27, 'InFocus Vision 3', 'InFocus', '7399.00', '2', '16', '13', 'image-27.jpeg', 10, '1'),
(28, 'Vivo Y69', 'Vivo', '11390.00', '3', '32', '16', 'image-28.jpeg', 10, '1'),
(29, 'Honor 7x', 'Honor', '12721.00', '4', '32', '18', 'image-29.jpeg', 10, '1'),
(30, 'Nokia 2.1', 'Nokia', '6580.00', '2', '1', '8', 'image-30.jpeg', 10, '1');
Step 3: Create the server.js file
Create a new file named server.js in your project directory and add the following code:
server.js
const express = require('express');
const mysql = require('mysql');
const body_parser = require('body-parser');
const session = require('express-session');
const app = express();
app.use(body_parser.urlencoded({ extended : false }));
app.use(body_parser.json());
//middleware for serving static file
app.use(express.static('public'));
//Set up EJS as template engine
app.set('view engine', 'ejs');
//Make MySQL Database Connection
const connection = mysql.createConnection({
host : 'localhost',
database : 'testing',
user : 'root',
password : ''
});
//Check MySQL Database Connection
connection.connect((error) => {
console.log('MySQL Database is connected Successfully');
});
//Set up Session Middleware
app.use(session({
secret : '1234567890abcdefghijklmnopqrstuvwxyz',
resave : false,
saveUninitialized : true,
cookie : { secure : false }
}));
//Create Route for Load Product Data
app.get("/", (request, response) => {
const query = `SELECT * FROM product LIMIT 3`;
//Execute Query
connection.query(query, (error, result) => {
if(!request.session.cart)
{
request.session.cart = [];
}
response.render('product', { products : result, cart : request.session.cart });
});
});
//Create Route for Add Item into Cart
app.post('/add_cart', (request, response) => {
const product_id = request.body.product_id;
const product_name = request.body.product_name;
const product_price = request.body.product_price;
let count = 0;
for(let i = 0; i < request.session.cart.length; i++)
{
if(request.session.cart[i].product_id === product_id)
{
request.session.cart[i].quantity += 1;
count++;
}
}
if(count === 0)
{
const cart_data = {
product_id : product_id,
product_name : product_name,
product_price : parseFloat(product_price),
quantity : 1
};
request.session.cart.push(cart_data);
}
response.redirect("/");
});
//Create Route for Remove Item from Shopping Cart
app.get('/remove_item', (request, response) => {
const product_id = request.query.id;
for(let i = 0; i < request.session.cart.length; i++)
{
if(request.session.cart[i].product_id === product_id)
{
request.session.cart.splice(i, 1);
}
}
response.redirect("/");
});
app.listen(3000, () => {
console.log('Server has started on port number 3000');
});
Under this file first we have import require Node module and then after we have set up require middleware for Node.js Shopping cart application.
Under this Node.js Shopping cart we have use Session for store shopping cart data in Session, so when page has been refresh then shopping cart data will be removed from this Node Application. So here in this file we have also set up Session middleware for store Shopping cart data.
After this we have make MySQL database connection and then after we have test that our Node.js shopping cart application has been connection with MySQL database.
Under this file we have create three route for handle shopping cart action.
First is the "/" route when has been use get() method and under this route we have fetch data from product table and send that data to product view file. Under this route we have also create cart session variable if it is not created.
Second route is "/add_cart" which has been use post() method. This route has receive data from Add to cart form. So when we have add item into cart by click on Add to cart button then this route will receive Item data which has been store in shopping cart. But suppose particular item data already exists in cart session variable then it will increase that product quantity by 1. And lastly it will redirect web page to display list of product with shopping cart data.
And last route is "/remove_item" which has been use get() method and this route is receive query for remove item from shopping cart. So under this route it has receive item id in url and based on that id value it will remove that id item from shopping cart and it will redirect web page to display all product with remaning shopping cart data on web page.
Step 4: Create Views File
In Node Express framework we have use EJS template for display HTML output in the browser. So in Node Express framework we have to create views directory under our Node Application and under that directory we have to create product.ejs file and under this file we have to write following code.
views/product.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Node.js Tutorial - Simple Shopping Cart</title>
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid mt-5 mb-5">
<h1 class="text-center"><b>Node.js Tutorial - Simple Shopping Cart</b></h1>
<div class="mt-3 mb-3">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header"><b>Product List</b></div>
<div class="card-body">
<div class="row">
<% products.forEach(product => { %>
<div class="col-md-4 mb-5 text-center">
<img src="/images/<%= product.product_image %>" class="img-thumbnail mb-3" />
<h4><b><%= product.product_name %></b></h4>
<h3 class="text-danger"><%= product.product_price %></h3>
<form method="post" action="/add_cart">
<input type="hidden" name="product_id" value="<%= product.product_id %>" />
<input type="hidden" name="product_name" value="<%= product.product_name %>" />
<input type="hidden" name="product_price" value="<%= product.product_price %>" />
<input type="submit" class="btn btn-warning" value="Add to Cart" />
</form>
</div>
<% }) %>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header"><b>Shopping Cart</b></div>
<div class="card-body">
<table class="table">
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total Price</th>
<th>Remove</th>
</tr>
<%
if(cart.length > 0)
{
let total = 0;
cart.forEach(item => {
%>
<tr>
<td><%= item.product_name %></td>
<td><%= item.quantity %></td>
<td><%= item.product_price %></td>
<td><%= parseFloat(item.quantity) * parseFloat(item.product_price) %></td>
<td><button type="button" class="btn btn-danger btn-sm" onclick="remove_item(<%= item.product_id %>)">Remove</button></td>
</tr>
<%
total += parseFloat(item.quantity) * parseFloat(item.product_price);
})
%>
<tr>
<td colspan="3" aling="right"><b>Total</b></td>
<td><%= total %></td>
<td> </td>
</tr>
<%
}
else
{
%>
<tr>
<td colspan="5" align="center">No Item Found in Cart</td>
</tr>
<%
}
%>
</table>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
</body>
</html>
<script>
function remove_item(item_id)
{
if(confirm("Are you sure you want to remove it?"))
{
window.location.href = `/remove_item?id=${item_id}`;
}
}
</script>
This code is the view template for the product page. The page displays a list of products with their respective images, names, and prices. For each product, there is a form to add the product to the shopping cart. The shopping cart is also displayed on the same page on the right side of the screen. The shopping cart shows the list of items added to the cart with their respective quantities, unit prices, and total prices.
The shopping cart also provides a remove button to remove an item from the cart. The function remove_item is defined in the script tag that removes the item from the cart by sending a request to the server with the item's ID.
The page is designed using Bootstrap 5 CSS classes, with a container-fluid and a row for the main content, and two columns for the product list and the shopping cart, respectively. The product list is created using a loop that iterates over each product in the products array and displays their information using EJS syntax. The shopping cart is also created using a loop that iterates over each item in the cart array and displays their information. If the cart is empty, the page shows a message indicating that no items have been added to the cart.
Conclusion
Overall, creating a shopping cart in Node.js is a relatively easy task, and with the help of this tutorial, you can create a shopping cart for your Node.js application.
0 comments:
Post a Comment