Ecommerce Application Using ASP.NET Core API With React JS And SQL Server

hello everyone this is Manoj welcome back to my YouTube channel in today's video we'll try to create one project which is related to e-medicine as the name suggests this will be a kind of online e-commerce portal where we can select medicines we can search medicines and we can add to cart and we can create our orders as a end user and we'll also have admin panel and from that admin panel like we can add medicines we can check orders we can check how many users are there how many register registration are there so end to end will try to create one e-commerce project related to e-medison all right so before starting the actual development of this project let me quickly walk through you with the end result of this particular project so this is the login page and we will use the same login for user and admin so let's quickly login as admin first so username and password is admin admin this is the user sorry admin dashboard and from here you can use ADD medicine delete update and view so as of now I have already added seven medicines over here and if you want you can add it from here one more and from here you can delete and from here you can add it or modify the existing medicine this is the customer management whatever customers will register from the registration form they will come over here and from the admin panel we can manage the funds if I want to update the fund of this particular user so you simply need to click on this update button it will open a pop-up box and that's if you want to update it 5000 once updated so you can see the funds are updated as 5000. let's quickly go to order management whatever orders customers will place they will come here as a list so as of now we have four orders of this particular customer and as of now let's say the status of this order is dispatched if you want to make it like delivered so you need to click on this update and a pop-up will open and from here you can select any status let me click on delivered and update status as you see the status has been changed to delivered okay and this is the order number let's say if you want to see how many items are there what is the unit price quantity discount so you just need to click on this order number and it will open this particular order detail so in this particular order there are two items one is this second one is this and this is the manufacture detail unit price quantity and this is the total price and this is the order date all right let me close it similarly if you want to click on this order so this is the order detail so when so far perfect so this is the overall your admin panel working let's quickly log out and now let me log in as a user one two three four five six seven sign in so this is the user dashboard and if I click on my profile so it will display my first name last name my email and my password so if you want to update your details these are the personal details so you can update it so update successful and let's go to my orders so these are some orders which I have already placed and you see one is delivered which I just marked as admin from the admin panel and these three are pending and let me quickly go to all products so these are the products which are coming from the medicine table which I added from the admin panel and as of now there is no item in my cart so if I want to place a order let's say this oximeter 3 quantity a two card item added to cart let's quickly go to cart so quantity three and let's also add this quantity 4 had to cut go to card so these are two items here and if I check my card table so there are two items with the quantity three and four all right so this is the unit price and this is the total discount actually if you see the Madison table while adding a medicine I have already placed some discount percentage So based on this percentage it is calculating the actual discount amount all right and this is the total price let me place an order placed successfully all the items has been removed from the cart let's go to my orders and this is my newly added order let me click on it so these are two items one is oximeter second one is protein powder and quantity three and four and this is the total price after applied the discount all right so let me close it so this is my overall user module working click on logout so again we'll come to our login page so this is the overall working of our admin and user panel and if I go to the next slide so here we will use react as a front end and dotnet core as a web API which is backend and SQL Server as the database and if you see here we have two modules one is user module another one is admin so if I talk about the user so here we have user registration then user login then view edit profile cart management place order from cart view orders user sign out so these all are user modules and now let's talk about admin so admin can log in admin can view all the medicines he can check what is the current order status how many stock is there so he can update the stock whenever he wants and he can also generate some reports like based on medicine name and based on a date filter and next one he can also see the customer details and here we have some kind of fund management so whatever fund admin will give to a particular user the user can only use that much fund to create a order for a medicine and finally is admin sign out so these are two modules and inside these two main models we have some we have some sub modules as you can see here and let's go to another slide so these are some table structure which I have already created so for the users we'll use these fields and this is the sample data of users and this is the medicine table and this is the sample data whatever we will get in the medicine table whenever we integrate our front end back end let's go to another slide here if you see the card so cart we will use whenever we add any medicine to God so that data will come here and we can see the data in this format let's go to another slide and here whenever we place an order from the card so the data will be populated in two Fields sorry two tables one is order another one is order item so here we will have a consolidate order number order total and order status which is pending or shift again this status will be changed by admin only and this order item we will have that order ID which is coming from here like this one and medicine whatever medicine we will choose from the front end and whatever medicine we will add to the cart so that individual medicine will come over here that unit price discount quantity and if you see so this is a sample data let's say user one has created two orders so this is the order table five double zero double zero one and for this particular order we have these much medicines in that particular order same five double zero double zero two and if you see the relationship so user can add medicine to the cart user can also create order and based on that order we'll create order item and this is a separate entity which is medicine so this is overall our e-medicine project so we'll try to achieve all these functionalities in our project so we'll use react as a front-end and dotnet core as a backend and SQL as a database so this is about the project requirement so let's create our Frontier and back-end project so let's create a database first so open SQL Server this is your server name so I'm connecting with Windows authentication so I'm not using username and password click on new query and let's create a database create a database e medicine F5 database is created now use the same database let's open the BPT the first table so this is of user table so let's create a table for users so create table excuses First Column should be ID of int let's make it Auto incremented so I int identity 1 comma 1 also make it primary key and first name [Music] last name where care password for care 100 email worker 100 phone date of birth I'm not going to use that because if you need you can create those fields one should be decimal 18 comma 2 so it will accept 18 length and 2 decimal points type because we have two type of users one is admin another one is normal user and status and let's say created on date time so execute this command our table is created now go to another slide so this is my decent table so let's create table for medicine let's copy this ID and Medicine name so let's say name manufacturer unit price decimal 18 comma 2 discount decimal quantity end yeah that's it takes expiry date time image URL and status active and active status and let's execute this table so our medicine table has been created go to another slide so this is for cart so create table card ID int identity 1 comma 1 primary key user ID and medicine ID int unit price decimal discount decimal and we have quantity and total price quantity and and total price decimal foreign created now so we are done with our card table let's go to another slide so here we have order and order item so let's create a table for order so create table order so ID paint identity primary key and we have user ID user ID and we have order number so order number and foreign and order status order status so where care execute this foreign order is that inbuilt keyword that is why it gave an error we cannot use inbuilt keywords as a property of a table so that's why it didn't allow to create okay so our order table is created now let's create order item table so create table order items ID and identity primary key order ID order ID not end order ID is yeah order ID is end okay and medicine ID and key unit price decimal discount decimal quantity quantity is integer type and total price total price decimal yeah let's execute so we are done with our SQL part so let's try to select all the tables so select star from users let's copy and paste four times medicines card orders order item yeah done so we are done with our SQL part now let's open video Studio so I'm using Wheel Studio 2019 you can use any version of your Visual Studio which supports web api.net core so create a new project click on this and now from here we need to select uh dotnet core web API as a template I have already created multiple projects on.net core web API so it will directly display here a direct link of.net core or if you want you can also search your template from this search bar so as you can see asp.net core web API so click on this click on next now it will ask us to give a meaningful name so let me give e medicine backend and let me change the location click on next so here I'm using that framework has 3.1 click on create maybe if you are using visual studio 2022 you will get dotnet core 6.1 or 6.0 so our backend project is ready as you can see this is the default folder structure and this is the default page and if I expand my controllers folder so by default we will get this weather forecast controller and we have launch settings dot Json in the properties folder and we have some predefined dependencies and let's go to the startup so this is the file which is responsible to run this project smoothly and let's go to app.settings so here in this file you will create or mention all your app settings like connection string or if you have some keys which you need to use let's say for you need to send an email so for that you need to store some ID password SMTP server so all that you can store over here in this app settings dot Json all right so let's close all of them and now first of all let's create a folder here and give it a name models and inside this model let's create a file called response in this file we will create some properties so first property would be status code and another property should be status message save again right click on this models folder click on ADD class give it a name users and we need to create all the properties whatever we used in our database so if I go back to SQL server and if I execute Select Staff from users so these are the fields which we need to create as a property here so the first one is first name and another one is so prop is the shortcut to create a property so if you type prop and then if you hit tab so it will create a property so from here you can change the data type and then you need to give your property name so last name again prop tab string password prop string email prop ER decimal fund prop string type and prop int status and finally create it on prop date time created on save now go to response here we need to use some properties so first one is public list users that we will require in admin panel so through this property we will get our list of users and display in the admin panel one more property we will use public users the user so this will return a particular user on email basis or on ID basis that we will decide when we design the front end so it will give a particular user and this will give a list of users all right so let's save now medicine right click on this folder class medicines same First Column is ID after that we have name so prop string name manufacturer let's copy prompt string manufacturer and we have unit price as decimal so prop decimal and unit price then we have discount so prop decimal discount and we have quantity prop and quantity we have expiry date prop date time expiry date and image URL prop string image URL and status so prop and status so our medicines model is ready again go to response here similar to users first we will require list of medicines so call it list of Medicine and after that public medicine so this will return list of medicines whatever we have in the database and this property will return us a single medicine object all right so save this now we also need to create one model for cart add class call it cart prop int ID and user ID p prop and user ID and then we have unit price so prop decimal unit price we have discount prop decimal discount prop decimal quantity should be integer and total price prop decimal total price save so our cart model is also ready go to response so public list card list card so this will return all the medicine list whatever is available for a particular user in the card table okay so save now let's create a model for orders again right click on this model add class orders from int ID and we have user ID so prop and user ID copy paste and we have order number as worker so our next property is order number prop string order number and we have order total as decimal so prop decimal order total and order status prop string order total order status save so our order's bundle is ready now we need to create one more model for order item so right click on this models add class and Order items prop and ID and order ID from in order ID medicine ID from int medicine ID unit price block decimal unit price discount decimal discount and quantity and last one is total price so prompt decimal total price done so we are done with our models so as you can see this is order item orders cart medicine users and response all right so in the response class let's add two properties for order and order item so first will be list of orders so list orders get set and one is for a particular order so public orders order get set and one more is for public list of order items so list items and last one is for public order item order item get set so we are done with our models part so let's save now let's close all of them now in the controllers part so let's add One controller so if you see the scope so here we'll try to create API for user first so let's try to add One controller so add controller I am giving it a name as users controller because in the single controller we will use all the users API so users first of all private lead only I configuration for that we need to include one namespace so just press Ctrl dot it will display you all the related name spaces so we need to include this one Microsoft dot extensions dot configuration and create a object with underscore now we need to create a Constructor of this controller so simply type c t o r and hit tab so it will create a Constructor for you that's a shortcut for creating a Constructor so now again IE configuration cut this from this location and paste it here as a parameter and here underscore configuration is equal to configuration this we will use to fetch our connection string all right so save now let's try to add our first API which is for the user registration so let's also add one more class over here so add class in name meter name Dal data access layer so here we will use our all the methods which will directly connect with the database all right so whatever request you will send from your front end which is react that will come to here on the controller then from here from the controller part it will go to Dell and here in this Dell this is the place where we will write our database logic in ad.net all right so save all so first of all we need to include one more namespace which is SQL Server so the first API would be HTTP post and let's give a route so route registration and here public the type would be our response class which is in models folder so simply control dot we need to include one namespace which is e medicine b e dot models that's a direct reference of this folder so click on it and now the function name the method register and this will take our users class as a parameter so users and response response is equal to new response and return response save now here we need to use one more namespace which is SQL connection so control Dot we need to install one so if you see in the last packet install packet system dot data dot sqlclient click on it find and install the latest one so it will install our packet if you see the pop-up yeah the package has been installed if you see the namespace system.data dot SQL client and you can also see the SQL connection is highlighted now so connection is equal to new SQL connection and here underscore configuration dot get connection string and now the connection string name for that I'll give e mad CS Dot to string so our SQL connection is ready now go to our Dell here we need to create one function for a registration so simple public response register this will accept a SQL connection and a object of users class so users comma SQL connection let's add a namespace so using system dot data Dot SQL client also use SQL using Dot system dot data so SQL connection response is equal to new response return response SQL command make it little shorter like CMD and here we will pass our procedure name so SP register and the object of connection so CMD Dot command type is equal to command type dot stored procedure and CMD dot parameters Dot add with value so the first parameter would be for users is add that first name and the value will be coming from users DOT first name so copy this paste and change the respective values so second one is last name change it this also last name password email fund I think we don't need to pass let's make it zero because fund will be organized by admin only so whenever a user will register he will get 0 as funds by default now type will be by default users CMD and by default the status would be pending only admin can approve it and that's it created by we will mention in the procedure only so we are done with our procedures connection dot open and I is equal to CMD dot execute known query connection Dot close if I greater than 0 then response dot status code is equal to 200 and response Dot status message is equal to user registered successfully else status code should be 100 and user registration [Music] field save so we are done with our register data access layer method go to controllers now create object of dial class dial in here response is equal to dial Dot register and here we need to pass two parameters first is uses and second one is SQL so users and connection save so we are done with our registration API so save now go to the PPT now we have a user login all right so in the Dal let's create a API for login so public response login so this will again accept the same two parameters so let's copy paste both of them and here SQL data adapter d a is equal to new data adapter and here we will write a sp sp login and the connection object so d a DOT select command Dot command type is equal to command type dot stored procedure and d a DOT select command Dot parameters dot add with value so for login we will pass only two parameters one is email and second one is password so let's pass the first parameter as email and this email we will get from users dot email and second one is password so let's copy it from here password comma users dot password and now we also need one data table DT is equal to new data table new data table and FDA dot fill DT and let's create one more object of response class and if DT dot rows dot count greater than zero it means the credentials we which we are passing for this particular user this user exists in the database so we will come into this condition if the user exists then response Dot status code is equal to 200 and response dot status message is equal to user is valid so we will allow user to enter in our application for the else part if let's say we provide some invalid credentials or the user is not exist in the database in that case we will return status code as 100 and user is invalid so let's save and finally return response save go to user's controller let's try to create one more API again that will be a post API and Route will be login public response login users tell not while Del is equal to new Del and SQL connection is equal to news SQL connection I configuration dot get connection string dot to string and response is equal to new response when this response is equal to Del Dot Login users and connection object so save return this part so save so we are done with our login API as well now go to the PPT now here we can see view edit profile so let's create a method and dial function for this view edit profile so here we will pass one property so let's create a method for view edit so public response view user this will again accept users and SQL connection and here SQL data adapter view user and here we will pass a user ID from the front end and based on that ID we will fetch that particular user from the database and display on the front end so d a DOT select command dot parameters dot add width value so we will only pass if you see the table this ID so at the rate ID comma users dot ID data table d a DOT fill DT let's create a response class object and if TT Dot rows.count greater than zero then let's copy the same thing from here only done instead of user is valid so we will pass okay user exists and in the else part user does not exist so save so we are done with our views so basically this will return us a single uh user data all right and with that we also need to if you see the login we might use the logged in user data all right so here what we can use is let's create a user object so user equal new users and here in the success part user dot ID is equal to convert dot 2 and 32. so DT dot rows zero column name should be ID and user Dot first name is equal to convert dot to string DT Dot rows 0 first name let's use last name also and okay email and type because based on this type we will redirect a user to the corresponding dashboard if it is user then will redirect to the user dashboard if it is admin then it should go to the admin dashboard so type save and after that response Dot user is equal to user we already have a object of user in the response class if you see the response class so we have this particular user all right so let's bind it here in the dial so save and in the else part if user is invalid then simply pass null for the user object so save so same thing let's copy from here and paste it here so this will return a complete user detail and here we also need like email fund and other thing let's copy quickly so after email let's copy this fund email not this one convert to decimal and after that status we don't need let's change that date as to date time also password done and for the else part response Dot user is equal to user save go to the users controller so again that will be a post API and let's create a route give the same name as view user public response view user this will again accept users as parameter Del is equal to new Del and response response is equal to Del Dot view user we need to pass users and connection of SQL so first let's create the connection so SQL connection is equal to connection no SQL connection foreign copy this from here and paste it here and pass as a second parameter return this Pawns so save so we are done with our view users also now if you see here we already have a view slash added profile so now we need to create a API for added means user can update his profile so simple let's go from in the dial file public response update profile and users user and SQL connection connection response response is equal to new response and finally return response here SQL command is equal to new SQL command and here we will pass SP update profile we will create those SPS once we done with our API part all right and after that let's pass the connection object CMD Dot command type is equal to command type dot stored procedure and CMD Dot parameters Dot add with value so let's go to the users again so user can update his first name and the updated value will come from is users Dot first name let's copy foreign he can also update his her password email fund he cannot also the type yeah that's it connection dot open and end I is equal to CMD Dot execute known query connection Dot close if I greater than zero means the record is saved successfully means the record is updated then it will return greater than zero so response Dot status code is equal to 200 and response dot status message is equal to record updated successfully and for the else part 100 some error occurred try after some time so save so we are done with our update profile also so go to here and let's try to create one API for update profile so HTTP post route will be the same let's copy the name here update profile public response update profile the users so response is equal to new response first create object of Dell class so dial is equal to new Del and now response is equal to new response SQL connection is equal to underscore configuration Dot get connection string Dot to string new SQL connection Del Dot update profile surpass uses and connection and return response so save let's copy the connection string name done so our update profile API is also ready go to PPT cart management cart management means whenever we add a medicine that will go to the card management all right so here public response add to cart so here we will use our we need to add one more property here which is medicine ID because from the front end whenever we click on any button for a particular medicine at that point we will pass a user ID who is logged in and the particular medicine ID with unit price discount and quantity so let's add medicine ID also here this one prop and Medicine ID yeah I think now this is complete model so go to Dell so here medicines and SQL connection response equal new response SQL command SP ad to cart comma connection object so CMD Dot command type is equal to new command type foreign type dot stored procedure and CMD Dot parameters Dot add with value so let's go to our cart model so the first parameter we will pass is user ID so medicines dot user ID sorry if we need to pass the cart model here not the medicines card dot user ID let's copy this and unit price discount quantity total price and the medicine ID done so connection dot open and I is equal to CMD dot execute known query connection Dot close if I greater than 0 else part so if I is greater than 0 then response dot status code is equal 200 and response Dot status message is equal to item added successfully and in the else part change the status quo as 100 and item could not be added save and finally return the response class save sorry I took out dial method is ready now go to our controller and here see if you want you can create multiple you know that controllers for this project but I am using okay let let me create another controller for this medicine so save add controller so I'm giving it name medicine so whatever methods will be related to medicine so we will create in this controller only so medicines controller so go to user controller and copy this and paste it here change the Constructor and for that we need to use one namespace so hover on it and Microsoft dot extension dot configuration save Also let's copy the models namespace which is e Madison dot models so paste it here okay so let me open this dial so we will create a add to cart okay so here HTTP post route to card and public response add to cart card and SQL not SQL connection here we only need cart and Del SQL connection let's copy from here only and response is equal to Del Dot add to cart so pass our cart object and the connection object let's add a namespace SQL dot data dot SQL clients so add this and finally return response so save so we are done with our add to cart API also now go back to PPT so we have a place order from cart all right so see let's say I have added four medicines in my card all right and to place an order what will I trigger from the front end I only send one notification that these are my medicines which are available in the card just take those medicines take that data from the card table and generate an order in the orders table all right so just to place an order I only need to send one trigger point from the front end so in the Dell public response place order so let me check the users okay we have a type okay go to dial place order okay so this will require again a user ID because based on that user ID we will take the data from the cards table if you see the card table we have a user ID here all right and if you again see the sample data of your card let me check user Madison [Music] yeah this one so if you see user ID So based on this user ID we will take all the medicines data and based on that data we'll generate an order okay so go to the API SQL connection response response is equal to new response return response so save now SQL command CMD is equal to news SQL command so that will create a SP so SP place order and connection object CMD Dot command type is equal to command type dot stored procedure CMD Dot parameters dot add with value so we will only pass ID and this ID we will get from the users dot ID that's it and connection dot open and I equal CMD dot execute known query and connection Dot close let me take this code from here and let's change the message so if I greater than 0 it means our order has been placed successfully then order has been placed successfully order could not be placed save so our dull method is ready go to my distance controller and http post route place order public response place order and here we will need users parameter let's copy this entire part from here and instead of this add to cart change it to place order and change this parameter as users so we are done with our place order API also let's go to PPT and okay view orders all right so save so in orders let's go to the dial public response order list or make it user order list users user comma SQL connection response foreign and SQL data adapter d a is equal to new data adapter SP not use it order data list we will use the same SP for admin and user we will pass one type and based on that type we will return the users for a particular user and for admin all right so connection so go to the users let's add one more property prop string order type or I think we don't need this one because this type we already have for a user type all right so we don't need this one so here d a DOT select command Dot command type is equal to stored procedure and d a DOT select command Dot parameters dot add with value so the first parameter we will pass as type so users Dot type and d a DOT select command Dot parameters add with value and second we will pass ID for admin we don't need this ID but in case of user we required this ID because if you see here in the orders table we will have multiple users data so whatever ID we will pass from here it will give that particular user's order data all right so for that we will require this ID so users dot ID yeah that's it so we only require these two parameters to return the order list of a particular user so let me also change this method because we will use the single method for admin and user now data table DT is equal to new data table t a DOT fill DT if DT dot rows dot count greater than zero here we will use one for for Loop so int I is equal to 0 I less than DT Dot rows dot count I plus plus and let's create a list of foreign order is equal to new list order new list order and here in the for Loop let's create a single object of orders so order is equal to New Order so order Dot ID is equal to convert dot 2 and 32 DT dot rows I which is index ID and order Dot order number is equal to convert dot to string DT dot rows index and the property name which is our order number and in orders we have ID okay user ID we don't need order total okay order dot order total order is decimal okay convert dot to decimal DT Dot rows order total order status order status order status is strings change the conversion as string so ID user ID order number order status done so now list of orders dot add this order so after this for Loop if list of orders dot count greater than zero means we have any order for this particular user then response Dot status code is equal to 200 response Dot status message is equal to order details fetched and response Dot list orders is equal to list order let's copy this and go to else part paste it here when that's part change the status code order details are not available and instead of list order simply pass null save copy this also from here and paste it here so if no row is available it means no data is there in the database so simply pass the same response here also and finally return the response save now go to my distance controller so here so that will not be here let's okay let's use here only so HTTP get route copy the name order list public response order list so here if you see the dial it will take users again let's copy this entire stuff from here and paste it here and instead of this placeholder paste it here Order list and that should be a post not get post so we are done with our order list API also go back to the PPT so few orders is our same this order list and sign out we don't need any API for the sign out so we are done with our user module apis so this registration done login view user update profile add to cart place an order and Order list all right so now let's create an controller for admin so right click on the controllers folder add controller API API and controller empty and change the name as admin controller click on ADD it will add our admin controller so let's go to the PPT we have admin login add update View generate Reports customer detail manage fund and sign out so first of all login so login we will manage through this user controller so no need to create a separate login for admin and add view medicine so we need to create one API to add medicine so go to here let's copy this Constructor part and the I configuration paste and change the Constructor and for that we need to add one namespace which is Microsoft dot extensions dot configuration save let's close the other one and open dial so here we need to create one method for ADD and update medicines all right so public response add update medicine so it will take medicine as object and the SQL connection SQL connection response response is equal to new response and return response so here we will use SQL command so SQL command is equal to new SQL command so SP will be SP and update medicine and after that let's pass the connection object CMD Dot command type is equal to command type dot stored procedure and CMD dot parameters Dot add with value so if you see the first parameter let's go to the SQL table for medicine so it will take name and name will be coming from the object so my distance Dot name let's copy this second one is manufacturer medicine start manufacturer then unit price unit price and then we have discount we have quantity and we have expiry date we have image URL and status save connection dot open and CMD dot execute non-query connection Dot close if I greater than 0 else response dot status code is equal to 200 and response dot status message is equal to medicine inserted successfully copy paste and in case any error medicine [Music] did not say try again save so uh we are done with our dial method now go to admin controller and let's create I API so that will be again HTTP post so HTTP post let's create a route copy the same name public response control dot we need to add the namespace of models folder and the name let's pass the medicines object so medicine and here Del is equal to new Del and SQL connection control Dot connection is equal to new SQL connection and underscore configuration dot get connection string Dot tostring foreign response is equal to Del Dot add update medicine first parameter should be the medicines object and the second one is the connection object the object not the class and return response oh add update medicine save and [Music] let's go to users controller and copy the connection string name copy and paste it here save so we are done with our add update medicine and go to medicines again and let's pass one more parameter here of string type I'll tell you why I'm using it and give it a name type save go to the dial folder so here type and medicines Dot type so basically I'll create a single stored procedure to add and update this medicine otherwise I have to create two stored procedures one for ADD and second one for update but based on this type I can manage both the operations in a single stored procedures all right so I'll pass type like insert or update So based on that operation type I'll go to that particular section whether it is for insertion or it is for updation all right I hope you got that logic so let's save save all so we are done with our add update medicine go back to the PPT generate reports reports will check later View Customer detail and manage fund okay View Customer details if I go back to users controller so view user if you see here go to definition okay this is for a single user okay okay let's create a new API which will return all the users for admin only all right so go to dial and let's copy this order list paste and okay user list and change the SP as user list we don't need any parameter for this so save and instead of this order let's make it user and list users I'm changing all the things corresponding to user so first we need to create a user list and then if this DT like the data table if this contains the data then here we need to create a user class so user is equal to new users and let's copy this and paste and if I see users so we have first name okay first name we have last name we have password last name is of string type and then we have email fund fund is decimal type so convert dot to decimal we don't need type status and created on okay created on convert dot to date time and status is end okay 2032 and list users dot add user save so users detail first user details are not available and user details are not available save so we are done with our tal method go back to admin not this one so this will be a get method route user list public response user list no parameter is required Del is equal to new Del SQL connection response is equal to new response Del Dot user list connection we need to pass connection to the user list you don't need this users over here and finally return response save so we are done with that user list also go back to the PPT and now we are sine out so that's it so overall a part of this report we are done for the admin part also so let's go to the solution Explorer now if you see the structure of this project so we have three controllers one for admin one for medicine one for user and in models we have respective class cart medicine order item order users and we have dial and response all right so let's save so we are done with our API part also so now we'll create the front end which is react.js so now let's go ahead and create the react.js project so we'll create the front end things now so far I have created a new react.js project as you can see this is the default page of a new re-exist project and if you see here this is the default for file and folder structure and if you see the package.json I have installed three new packages one is axios second one is react dot bootstrap and third one is router Dom so let's close it and let's create all the respective modules and the components first of all let's create a new folder inside this Source folder and give it a name components and inside this folder let's create two folders one is for admin and one is for users and inside this user let's create a file and give it a name header.js in this file we'll create our all the links of a menu all right and first of all in the components let's create a new file for routes so give it a name router page.js you can give any meaningful name and let's create a simple import react from react and export default function router page and return router save let's copy this and go to the header.js and change the name so header save again right click on this users folder and create a new file and give it a name dashboard.js and copy this code and paste it over here and simply change the name dashboard and paste it here also save create a new file and give it a name profile.js so this we will use to display and update current users profile paste change the name profile save copy this code right click create a new file give it a name card dot Js card and we have dashboard we have header okay let's create one more file so we will create a medicine display kind of page where we will display all the medicines whatever admin will add for the users to add in cart and to place an order so let's create a more component for medicine display here we will display all the medicines with the quantity name and image so medicine display save and let's create one more file for all the orders of user so order s save so we have cart we have dashboard we have header medicine orders and profile all right done so save close all of them close all now let's create admin modules so for the new file admin header.js let's copy the header part from here copy and paste it here and change the component name as admin header paste and let's create one more file admin dashboard dot Js copy paste dashboard paste save copy all and let's create one more component for to display all the customer list so whoever user will register as a user on this website so here in this customer list component we will display all the customers with their personal details with their fund with their order detail all right so this is the customer list customer list save let's copy and let's create new file for all the orders because admin will manage the orders whatever user we will place and we can from the admin panel we can update the order status like dispatch shipped all right so admin orders dot JS paste admin orders copy paste and let's create a new component for medicine so here we will use our complete crud operation for this medicine like ADD medicine delete create update View and we will also use a image while creating a medicine we will save a image in our local folder inside this public all right so let's copy this one and paste change the name Madison save we have admin header we have dashboard we have order customer list medicine done let's close all of them and now go to router page and here we need to import import from react router Dom so browser router as router routes and route save and here first of all use router and then routes and here we'll create each route for the respective component so the first route will be let's say path this is this will be the default route and give the element and first element will be let's comment this house first and here inside this component let's create one component for login and let's quickly paste some default code paste login and again we create one more file for registration.js registration save and let's create one more file and give it a name constant.js so here we will use our default web API URL so export const base URL save so we are done with all our components respective folders and the Pages all right so let me close all of them go to router page and let's create all the routes so the first component will be login import login from login let's quickly copy this paste we need to create all the routes for these pages so the second round for registration let's import registration foreign this is for users dashboard and this is for user orders so orders profile see here and cut so simply import all the components import foreign dashboard from users dashboard and import orders from users orders and profile from users slash profile and cart from users slash cart so we are done with our users components so now let's add all the routes for admin all right admin dashboard admin orders customer list foreign we forgot to add route for medicine display all right so let's quickly add these components so first one is for admin dashboard so this will be from admin and admin dashboard copy and let's quickly copy this admin order paste paste customer list customer list and Medicine now let's give the routes for for this let's cover out registration for this dashboard my orders profile card and this will be products admin dashboard admin order customers and Medicine save so we are done with our routes close so let's open this header first uh let's open this login First to create login page design registration page design nav bar or the HTML table we don't need to create any code from our own so we have a lot of templates so if you type login page design bootstrap so you will get this website mdbootstrap.com similarly for registration page design if you see we have this website same way if you type nav bootstrap so get bootstrap.com and one more thing we will require in our project that is table bootstrap so these are four things first of all this is the login page so on this website we have a lot of login page designs or you can say the templates so whatever template you will like you will simply need to click here show code and copy these two things this is the HTML part and this is the CSS part all right similarly if you see here so we have so many registration page templates so you can choose any of them and if you see here the snap bar so we have so many never templates so whatever number you will like you can simply copy code and paste in your project and here we have different different kind of tables with the design so whatever template table template you will like you will simply copy paste in your project all right so I have already created the design of all the components because for me it took almost two days to create this project completely so our backend project is loaded let's run it sorry APA project is up and running so our react.js project is about to render as you can see localhost colon 3000 this is the URL so this is our login page so here we will enter email and password and if I click this registration button so we'll go to the registration page and similarly if I click here so we'll go to the login page so let's try to register a first user so let's say without and we're not at gmail.com password one two three four five click on register registration successfully okay go to login and will not add Gmail one two three four five sign in perfect so we are in the user module perfect if I click on my profile so you see my details are coming my orders no order no product no cart okay so first of all let's log out and now we need to login as admin for admin let's go to the database first and if I select this command select start from users so as of now we have only one user which is type of user so let let's quickly add one more user so we'll enter and for this user we will use admin so first name admin last name admin password also admin email admin and type also admin status 1 and for created on let's use the inbuilt method get date and now if you select this command so we have a admin user all right the type of admin that's copy and login with admin so simply give admin admin credentials click on sign in perfect so we are in the admin management so first of all if you see here customer management so I have just added one user as Virat so you see here all the details so as of now if you see the funds are zero let's click on this update button and let me give fund as thousand and if you see here also point is zero so let's update find updated 1000 and if you again execute this query select stuff from users so funds are updated now perfect so let's add some medicines here so I have some data some dummy data of some medicines so let's quickly add all of them unit price discount five quantity hundred and let's take some random expiry date and I have already downloaded some images so let's try to add so see the medicine has been added and let's quickly add some more this is the manufacturer unit price 347 discount 10 quantity 200 choose image add let's quickly add another one price 250 discount five percent quantity 500 add foreign medicines all right so if you want to delete you can simply click here and delete and if you want to add it simply click on ADD it so these details will fill here over here and you can update from here okay so we have medicines we have customers we don't have any order all right so we have updated this one so let me log out and let's login with the Virat again yeah one two three four five sign in okay so click on all products so these are all products which we just added from the admin panel so let's add this product item added successfully so this product has been added to my cart so again go to all product and let's add this also one quantity of this and let's say three quantity of this so I have added all four products so go to my cards you see two two one three okay if you wanted to move you can remove from here and if you want to place an order so you can simply place here so if I go to my orders so as of now I don't have any order so let's go to cart click on place order so order has been placed successfully all items has been removed from my cart and if I go to my order so this is my order number which is system generated and this is the total amount and as of now if you see the status is pending and this is the order date if you click on this order number so it will display all the item details so I have added these four products these are the manufacturers and this is the actual unit price quantity and total price all right let me close it now let's go to admin panel and try to update the status so as of now this is pending so log out and let's admin and now go to order management same if you click here it will display all the order detail and click on update so let's say shift update status order status has been updated log out and if I again login with Virat okay and if I go to my orders say see order is shipped all right so this is the overall working of this complete e-medicine project now let's go to vs code and let me go through the code which we have already created so first of all if you see the admin one so this is the admin dashboard simple straightforward no fancy code and if you see this header so in this header we have an app bar simple and we have added link from react router Dom all right so this is again straightforward and if you see this admin order here we have use a API so here we are passing type of admin and the use email So based on this email if this email belongs to any user so it will return all the user orders otherwise it will return the admin orders so if we are hitting it from this admin order so we are passing type as admin all right so if you see here get data so we are passing type as admin so once it gets the data then it is setting this one like data list order all right and based on this object if you see this state over here data and item data data is for the orders and item data is for the item details of a particular order if you see here so this table is based on this data because this is the order table data if you go to SQL server and this one so this is the order date table and this is the order item table all right so this state we are using for this order table and if you go down I have added a model if you see when I click on this order number so it will open a model pop-up and in that model popup we are displaying all the order items so here we are using item data all right and this is again a simple customer list we are fetching the user details from the API and we are simply displaying on the table so this is again pretty straightforward no fancy code over here to manage a fund we are using again a API to update the fund if you see we are updating a fund based on a user email so we are passing email and fund to the web API and based on these two values it is updating the funds of a particular user and if you see the medicine yeah in this component we are using complete grid operation like create insert delete get by ID so let me collapse all of these yeah done so if you see this is to get all the medicines this is to delete again this is a simple get API sorry type is get we are passing email because I am using the same API for admin and a user if I am passing any email so it will return the data of that particular email if that belongs to any user and if email is admin then it returns all the orders irrespective of any particular user delete here we are passing a ID of a particular item whatever ID we are passing it will go to the medicine table and delete it add it if you see here again based on a particular ID it is going to the database and returning a particular medicine details and we are setting these states based on a ID save this is to save image of a particular medicine into the database and also in a particular folder if you see here I have already created a folder inside this public assets an image so these are the images of products I just added from the admin panel and upload file this is simply to upload a file not upload a file basically it is to insert a medicine into the database if you see here type is add all right so this is complete credit operation of medicine component and let me quickly close all of them now come to users so if you see the cart again this is very simple based on email ID it is taking data from this card table this is very simple as of now there is no item because we have placed an order the moment you place an order it took all the data from the orders and delete all the items from the cart that's the logic so it is taking the data from the card table and we are displaying in a table and this is the simple dashboard this is the header again we are using navbar similar to admin panel and Medicine display this component is responsible to display all the medicines from here we can select the quantity we can add all the products we can see the manufacturer the image and the medicine name again it is taking data from the medicine table and displaying and if you see here add to cart so for add to cart we are simply passing the medicine ID and quantity whatever we are choosing from the drop down and the email which user is trying to add item in the cart all right so again this is very simple post API and if you see here this is the drop down so I have already created four default quantity if you want you can increase it or if you want you can make it Dynamic from the database all right and Order detail we are not using this order details so let's close it orders again whatever order user is placing so we are taking data from this order table and displaying over here in the table and one more thing when you click any order then it is we are passing the order number if you see this we are passing this order number and based on this order number it is taking all the items from this order item if you see here on order number C handle item detail so when you click on this order number it takes the order ID and based on that ID we are displaying all the items in this model pop-up so again we are using here data and item data this data is taking data from the orders and this item data is taking data from the order details table order items table all right and profile this is again very simple based on our email ID it is taking data of a particular user and if the data is available then we are setting all our respective States that's it and if you want you can simply update it based on action type update so it will update your first name last name email and password so this is about this complete project and I have already mentioned so many times the login and registration this is again a very simple post API for login we simply pass email and password that's it and for registration we pass first name last name email and password and if you want you can add multiple properties like mobile number address pin code whatever you want you can include but for this particular video I only uh took four properties first name last name email and password and this is we have a simple post API so that's it this is about this complete e-madison react.js project so I hope you like this project this react.js and the web API and the database if you like it please hit the like button share comment and if you face any kind of problem if you and if you're looking for any kind of technical app let's say you are creating a finally a project or your if you are doing any internship and you have assigned a project and you are facing difficulties you are getting issues then you can directly contact me you can find my contact details in my channel description and my Instagram handle is open programmer you can also connect with me on my Instagram so I'll see you in the next one thanks for watching take care bye

Channel: Manoj Kumar

Views: 50,633

Keywords: Ecommerce, ecommerce project with asp.net core, ecommerce project with web api, React JS ecommerce application, react js, .net core web api, react js and .net core api, crud application with react js and .net core api, online medicine application, E-Medicine Full Stack Ecommerce Application, rest api, api, web api, asp.net core, ASP.NET core web api, rest api Asp.Net Core, rest api demo, rest api crud operations, crud operations in asp.net core, Rest api C#, Rest api tutorial

Id: O3y-I_6OAW8

Length: 145min 25sec (8725 seconds)

Published: Mon Oct 17 2022