React JS Shopping Cart using ASP.Net Core Web API and SQL Server | React JS Project with explanation

hello everyone this is manoj welcome back to my youtube channel in today's video i'll show you how we can create a shopping cart in react.js application using asp.net core web api so for front end we'll use react.js and for the backend we will use asp.net core web api so as you can see on the screen so this is the default template which will use to create a shopping cart so here we have a product image we have actual price we have discounted price and we have add to cart button all right and below the products we have a view card button so let's minimize so far i have created a new reac js application and a new dot net core web api project and in the sql i have created a new database which is shopping card db so first let's create a table which will contain the product data so create table tbl products and this will contain id column let's make it in one by one increment primary key and product name where cat product image market and actual price decimal 18 com 2 discounted price all right so image price actual price okay so let's remove this product from here and execute select star from tbl products so now let's input some dummy data so insert into tbl product so let's execute these insert commands execute and now select star from product so we have eight products all right now let's go to our backend project and let's add a new folder and give it a name model and right click on it and add a new class and give a name products so inside this will create four properties so first one is id another one is name another one is image and actual price and last one is discounted price so our model is ready save go to controllers add controller click on api api controller empty click on add so let's give it a name shop add so our controller has been added hit object of i configuration class so private read only i configuration hit control dot so we need to use this namespace so underscore configuration and now we need to create a constructor of this shop controller so for to create a controller we have a shortcut just type c t o r and hit tab so it will create your constructor so inside this constructor we need to create another object of this eye configuration class and now we need to initialize this underscore configuration is equal to configuration so now we need to initialize this underscore configuration is equal to configuration now let's create a action method so public string get all products let's decorate this ways http get and let's also give a route product list so inside this let's create a sql connection class so for that we need to install a package system dot data or sql client so click on it find and install latest version so it will install our sql dot data dot sql clients as you can see we can see the highlighted sql connection word now let's give a name connection is equal to new sql connection so now i configuration dot get connection string inside this we need to give our connection string name dot to string go to app settings.json so here you can see we have a connection string so let's copy this and change this so inside this let's give a shopping con this is our connection string name as you can see here in app settings.json go to controller again and now create sql data adapter da is equal to new sql data adapter and we also need a data table so for that we will use a namespace system dot data dt equal new data table da dot fill dt so inside the sql data adapter we need to give a command so i'm using inline query so go to sql copy this paste if dt dot rows dot count greater than 0 then else so here for nt i equal zero i i less than dt dot rows dot count i plus plus so let's create a list of this product class so let's copy this products paste it here so hit you can use shoppingcart.backend.model because this product class is inside this models folder so we need to use a namespace and give it a name list products equal new list products so here let's add products equal new products so products dot id equal dt dot rows index and the sql field name id and this is our integer type so let's convert dot 232 and product start name equal to convert dot tostring dt dot rows index and sql field name which is name save let's copy and paste next field is image and actual price convert dot to decimal copy paste and this is our discounted price copy and paste the actual field and finally list products dot add products save go to solution explorer inside this model add one more class and give it a name response inside this we have prop and status code and prop string status message and we will also have public list products save let's use this response class response and here if lst product dot count greater than 0 it means if there is any product inside this list then response dot status code is equal to 200 and response dot status message is equal to data found and response dot list product is equal to list product in the else part we will change status code from 100 to 100 and here instead of list products we will pass null same response copy and give in the else part of this so save so from the api endpoint we are done so if you see it is giving some error because we have returned this response class so let's change the return type as response so save and finally return response so say if you see it will not give any error perfect so let's ctrl shift v let's build our project so well succeeded let's try to run this back-end project so we'll see if this is giving products on the browser or not so as you can see on the browser this is our base url we will use the same url and after that we will append our controller and method name so first let it run properly meanwhile let's go and copy this shop api slash shop and then our route product list hit enter you see on the browser we can see all our products the product code is 200 data found and this is our sql database data all right so our api is up and running now let's minimize this also minimize studio now let's open vs code so close it go to our source folder first let's go to our template so as you can see this is my template which i downloaded from the internet so first let's copy these folders so let's copy and go to the public folder right click a folder and give a name assets and paste paste now in the source folder right click and create a new folder components and inside this let's create a new file called cart dot js so i'm going to use functional component because i'll use hooks so first statement should be import react from react and function card return dev shopping cart and finally export default card let's save and open this index file in a editor i'm using notepad plus plus so first of all let's copy this entire head part and go to vs code and in the public folder go to index.html let's remove the existing head content and paste your and now we need to change the path if you see this path now everything is in inside assets folder so the path should be assets and then css similarly here so let's save we only have two css links this one and this one perfect save it go back to notepad let's copy everything from this body tag so copy and paste go to your card.js and inside this return let's use fragment and paste yeah so we have lot of errors so these are well-known errors so we need to remove these comments first because react doesn't support these comments and after that if you see this image in html we don't need to close it but in react we need to close each and everything image also the input text so let's quickly close all of them save so now we need to add one more library which is react router dom so if you see in the app.js if we need to use a component inside app.js so we need routes so let's see install npm react router dom it will create a route for this component so our package has been installed so inside this app.js let's import from react router dom so inside our app first use router inside this we will use routes and then we will use a route so path would be slash and no element is this card so here we will use card save so as you can see all the products has been rendered now go back to vs code and if you see this particular div which is having class card grid that is being repeated to render all these products all right so let's remove all the products except one and here let's use some state so data set data and use state array and use effect so for that we will use one more library which is axios so in the terminal let's import npmi xus so we'll use axios dot get request to fetch all the products so let's go to the browser not this one let me close this and copy this api endpoint and our excuse has been installed axios dot get and it will take url as a parameter dot then result set data result dot data dot if you go to web api so we are returning our response with this property so paste dot catch error console.log error so save so we are done with our use effect so save and copy this data and inside this div if you see we have image we have price and we have a form so keep this form as it is first if data and and data dot length greater than then else no data so let's copy this div and use fragment and paste this entire code inside fragment data dot map item index return so for image let's remove this path and item dot image let's copy this and paste it here also paste it here so this is our actual price and this is our discounted price so save now run the application again npm start so as you can see our four products has been rendered properly from the database now price is not coming so let's see why the price is not coming so open inspect and refresh the page so we'll see what is coming in the response so maybe that could be a reason of the naming so let's over this list product yeah the property is in camel case so let's make it p capital save refresh you see all the prices has been rendered as expected so now once we click on this add to cart button so we will pass this data to our database all right so for that on click of this button so let's pass on click and on click of this let's create a handle so handle add product and inside this we will pass item dot id save let's copy this and let's create a handler so const handle product id so const data equal id equal id whatever we are passing on click of that button so our data is ready and now axios dot post so first it will take a url so let me copy this url till here and after that we'll create a separate web api method add product so we need to wrap it inside single quotes and then data dot then result if razer if result dot data dot status code equal equal 200 then alert item added else alert no item added and let's copy this cache part from here paste so save so our add to cart handler is ready let's open video studio and stop this so after this let's create a post request so http post and route will be add product public response add product it will take product class inside this product we have a id column so change your id column to capital i these properties should be identical so response response is equal to new response and return response if products dot id greater than 0 then sql command cmd is equal to new sql command insert into cart id values let's copy this connection from here paste it here connection object and connection dot open and int i is equal to cmd dot execute non query and connection dot close if i greater than zero then response dot status code is equal to 200 and response dot status message is equal to item added else also here no item found save let's go to sql server and create a new table let's copy till here paste and change the table name as cart and product id and create the table copy this name product id and change it here also here we need to pass products dot id save so our api is ready try to build the project run the project the next tab let's try to run the dx project so api is up and running so localhost colon 3000 perfect let's try to click on add to cart so item added go to sql and select shard from cart so you can see we have added product with the id one let me create this add to cart item added again select start from cart so you can see the items has been added in the cart so simple now we'll create a new page which will show all the card items all right when we click on this button so it will show the new page so go to here and add new component new file got list.js and go to cart let's actually copy everything and paste change the component name to cart to cart list copy paste and we don't need this handle product so let me comment this out and we need to create a new api product list cart save and that's it go to app.js copy this route paste and cart here let's import the new component as cart list now go to wheel studio stop this and let's copy this product list copy and paste it here and change the endpoint as product list card save and from card save actually we need to use a join so let me create the query quickly you know join product list p on c dot product id equal p dot p dot id and here we will use p dot id p dot name p dot image p dot actual price and p dot discounted price so this is the complete command paste save run the backend project again open react also so if i click on view card you see there are only two products in our card table if i go back again and if i click this jeans item added go to view card so our three items are in our cart so here if you see on this cart cut list actually change the button as remove item save so on click on this we need to remove the item from the table so this is for you people you simply need to pass the id from this and you need to create a delete command so that is a kind of homework for you so when you try this project at home so you need to create a delete operation from here all right so this is how you can create a simple shopping cart in your react js project so this is a kind of ready-made card you can simply copy paste this code if you see these two components into your any project and these web api methods so these are very straightforward for this video i used this inline queries but this is not the right approach instead of inline queries we should use stored procedures so if you guys need stored procedures video or if you need stored procedure projects you can comment on in this video or you can directly contact me on my instagram instagram handle is open programmer so i also need to tell you one thing uh if you're looking for any final year college project or you are doing an internship and you are facing some problem difficulties in your project so i do these kind of paid services so you can contact me you can find my all contact details in my channel description so this is about today's video i hope you liked this video if you did so hit the like button share comment and also in the next one thanks for watching take care bye

Channel: Manoj Kumar

Views: 12,892

Keywords: shopping cart using react js, react js shopping cart, shopping cart react js, shopping cart react, shopping cart react javascript, react js, react, javascript react, react ts cart, react typescript, shopping cart typescript, ts shopping cart, reactjs tutorial, react add to cart, react shopping cart project, reactjs add to cart example, reactjs add to cart, reactjs add to cart hindi asp.net core web api Shopping cart, asp.net core web api cart, manoj deshwal, yt:cc=on

Id: mN-x173lcqU

Length: 40min 38sec (2438 seconds)

Published: Mon Aug 29 2022