Cart Item Using Spring Boot Java

um good afternoon I hope you are well so now um I will be describing you how our application is working and the code I have given to you how this code will work okay so first of all I want to add a product um app over add to card now I want to add another one called banana banana um $10 so let's say $12 and I'm adding to card and here as you can see my apple and banana is being added to my card and it is showing in the total amount so this was a raw quote in our spring boot application so how this code is working so let's open our Intel IG idea so first of all um I want to mention um this is our main file so I told you that copy paste and create a controller for this thing right so the first one uh this is our main controller card controller so here as you can see get mapping with the help of G mapping what we are doing so every time when the user is clicking on this button it is adding some element in our list okay so by using session so by using session here as you can see by using session what we are doing when the user is um clicking anything so it is going to add page and it is receiving with the help of post method item name and item price and it is setting into session card so here as you can see every time if we don't have have any cart item declared so I declared a card list and it is adding a new item every time in my card list so what is card list card list is type of uh Dynamic array or a a list it is a type of list I hope you already know about this thing in your second semester when you are completing your Java course that time also we discussed in your third semester when you completed your Java FX which is programming concept to on the time also we declared about list and now in your fourth semester finally we are using list inside our spring boot application so what is list list is a kind of dynamic array where we can put multiple item um it is an type of array where um it have index and we can add unlimited number of uh item as we want so it is actually a multi-dimensional area so how it is working if you want to use um list in your Java application so you to define a list and then cart item this is class so this is same like our entity class so we declared it just for handling our list item as we have multiple um uh multiple thing in our inside our list like the first index will contain name and price and if we want to add quantity also we will add here quantity and we will set a getter Setter class so same like our previous database application we have to create a om class object relational mapping class for our list okay so then I declared this list and called a list variable and what we are doing we are setting our all um we are first of all we are checking that do we have any cart item declared in our session so if it is then we are putting inside this variable and we are passing it with the help of model to our cart application so initially when I am loading my application so it is checking my session said do I have any uh list uh in my S if I have then it is displaying my all item okay so now let's go to our next controller so that one is ADD so how to add any element so when user is pressing anything for example I am writing anything here Apple um now apple cider and it is $15 so when I'm am adding it to add to card so here as you can see it is going to another page which is known as ADD and with the help of post method if we inspect elements so here as you can see um with the help of post method actually we are sending our item name and item price into our controller and it is uh receiving it this item and price and it is storing inside our um card item so how it is storing so this first of all it is checking our that do we have any session um cut item declared if we don't have then it is initializing our card item and if we have then what it is doing it is adding item in our um in our card and then it is redirecting to our main page okay now the second one removing card how to remove card so removing card is also as list is dynamic thing uh by using list. add cart item. add we can add it so by saying list. remove if we write the list name list variable name cart item. remove and if we pass the index of our current item it will remove the item um from our array now this function is helping us to calculate the total price amount so if you if you see so here you can see cart item using this cart item class what it is doing whatever value so this cart item calculation we are using it here so here as you can see calculate total we are passing our whole list from the session and it is calculating by using for Loop it is calculating our price one by one and that's how this cut is displaying very simple code but very top level codee if you don't understand list and all other item then you will not actually able to figure it out how this is working okay if you if you don't understand anything uh please let me know later because I will discuss it with you so right now what we will be doing so this is a raw design and raw Java code okay so these are nothing but Java code in raw Java code I write it down I declared a array inside this array um Dynamic array list I am putting all the item whatever I am doing same like our PHP code and uh obviously the syntax and everything will be very difficult for you if you are new at Java or if you don't know anything but what we will be doing right now we will be learning how to implement this code in our template so first of all we need a template I hope you remember this file uh we did it in our class we designed this thing and we learned how to design this one so we created this one for our uh last course in this semester so the same way uh what I'm doing I am um I'm using the same template the HTML template which is ready and this is our card page so the both page is being um developed uh by our front end developer or we developed it as a front end developer now how to implement the same code inside our um inside our spring boot application right the one which you are seeing right now this is a row code and now we have we want to uh implement this code implement the same code inside our template file so you can do it um in either way either you can um uh work on same project or you can just copy paste uh the project and you can recreate another project so what I'm doing I'm trying to copy paste and uh create a new project for you uh so that um always keep back up of our code so what I'm doing right now cart application so spring cart application so this was cover Card application so what I'm doing right now I'm creating a zip file okay so I will suggest you also to create a zip file if anything happens then maybe your project will not run so right now I create a backup uh code um I mean I create a backup for my um current file now what we will be doing we will be trying to implement this code into our previous code so first of all um if you go to our design part so here as you can see inside our design we have these two bootstrap file so bootstrap CSS how to Ed it you know it already like we have to use bootstrap website and we we will be implementing our uh implementing it inside our theme LIF so if you want to see how to um implement it so first of all what I am doing I we have to uh actually go to our bootstrap website bootstrap 5 so if you click here so it is our bootstrap 5 website and inside that here you will see this CDM okay this is min.js and this one so copy this CSS now we need a notepad we need a new tab and inside this one I am pasting all this item and now what we'll be doing we will see now this two line we need to take it out and we need to integrate this two line so the first one is this line Boot Steps CSS so I'm copying this line and implementing inside our Intel IGA project uh in the header so header part I'm adding this bootstrap CSS now I have to add JavaScript from bootstrap right so what I have to do in order to add JavaScript you need this tags all this tag in order to add JavaScript so I am adding all this tag at the bottom of my file so what I'm doing right now so I'm going to Intel IG IG and um Intel idea so at the bottom of my file I have added this one okay finally boot STP is integrated now what we have to do according to our design part if you go to our design CSS and everything is loaded we have style. CSS right so I'm copying this one um from our theme and I have to add this style. CSS this is our own style. CSS uh so we have to add it and not only this we have to write it in this way we need this CIS then we need at theate then we need um this one sign and style. CSS and obviously we have to put our Styles sheet inside our static folder right so what I'm doing right now I'm going to my hidden file I mean my template file I'm copying this template and what I'm doing right now inside my static folder I'm pasting my design so my um row CSS is is being added uh my cart is added over here okay everything is done now bootstrap navigation bar so let's start with bootstrap navigation bar so this is our bootstrap navigation bar which is telling that this is our shop so I'm copying this bootstrap navigation bar into our code the one which we had in our Intel idea so I'm pasting it now our navigation bar is being added now what you have to do after adding navigation bar just rerun your project and let's see how our project is looking like then we will be pasting all the codes because first of all we have to check whether our code is running or not so I'm going to my card yes so here as you can see bootstrap uh navigation bar successfully added to our card now what we have to do we have to modify this cart and we have to put it here uh all this stuff right so if I am clicking home it should take me to the card page it is not taking to another page if I'm clicking on card it should take me to another page which is which will be loading our card design which will be looking like this page okay this page this is our index page and when I'm clicking on card page it will be taking us to another page okay by the way right now here as you can see we have successfully integrated bootstrap but we don't have any footer and other stuff so let's bring those stuff so body area inside our body area we had some product so I'm bringing those product inside our body area okay and I have footer area as well so all together I'm copying and pasting all this stuff okay after navigation bar I'm putting all this stuff now um we will uh now the images are not loaded so for images I'm going to my image folder and here as you can see all the images so I'm copying it pasting it in our static folder image copy paste done after that what you have to do we have to connect our image and if we want to connect our image so what we have to do same at the rate this one so wherever I have those image name for example um this was our this is our card file so didn't I past those file oh sorry so where I pasted it um okay so maybe I put it in a wrong area okay I pasted it inside our um what we can say I pasted it inside our cart item right so actually I have to make it contrl z contrl z whatever um now if I go to my index page okay so I I have to take this code from here from here to till end so I'm copying this code I have to paste it inside my Intel idea code okay so Intel IDE after navigation bar I'm putting all this code now um here as you can see I have images so for those images what I have to do I have to add those images over here so wherever I have image um I have image here uh so this one I have to add it like this 1. jpg okay and now this is c. jpg okay and this is grocer jpg so. jpg so let's keep Itor let's keep it like this okay and instead of this one just instead of one I'm putting this one and removing this one so gr. jpg is 10 jpg 1. jpg 2. jpg 3 1 2 1 3 4 1 2 3 4 okay so um let's start it with two three and now I need four here because I think it's going in this way 2 3 4 okay 2 3 4. jpg and this is 1. jpg everywhere right 1 jpg 1 jpg 1 jpg fantastic so we have already copy pasted our code for the design part so if you run your application you will [Music] see so if I I run my application now my application is looking like this okay so unfortunately the images are not loading so we have to think about this one so um let me check why our image is not loading if I go back to our uh springbot resources template I have pasted all these thing inside our template uh maybe it is not loading all this stuff right uh but I already pasted all these things so so let me check inspect element so inside the inspect element is telling us 3. jpg could not load okay so unfortunately it is telling us that it could not load all this thing so why because we did not put th tee Leaf so unless we are putting th it will not work right uh because if you remember uh so controll H wherever I have SRC before that one I have because th means Team LEAF and this is a variable actually right so th this one as I did not put it so it was not showing so I am putting all this stuff all this stuff all this stuff over here and I hope this one will work because without theme Leaf it is not understanding that this is theme Leaf variable right now um let's uh rerun our application and let's see U whether our images are loading or not once our images are load um images are showing then we have everything here so I'm running my cart application and uh okay internal error explicit mapping okay so after reading theme Leaf something so let me check this one what happened so um I added themee leaf and it is telling me this error okay so let's try to figure it out so it is telling that theme LIF template ex um exception so processing style template card doline okay so first of all this one um our template will is not able our template cannot load this thing right um so let me fix it that was a silly mistake I guess so I did I have to put at the rate um at the beginning of everything but I put at the inside this one right so actually yeah it was not like that if you go back to our uh declaration then you will see that if you go back to our Activity one you will see that actually we have to put at the rate at the beginning of our um theme Leaf variable right so now everything is okay so let's rerun our application and let's check whether our design is okay or not so right now um I'm running this application I don't want to see anything here I just uh I'm running this application and here I'm hoping that yeah so everything is done right now uh this is the same one here how to add to card so the same thing which we did here um if you go back to our um application so now we need a um this page card. HTML and we need another one um which is displaying all the card so how to add this thing in cart so here as you can see form action should be going cart name will be item and price right so you can take any name uh but we have already this one name and uh this type of thing so I'm just putting action here so inside our action uh we are putting add to card okay and this one is name item and image is here but I don't want to put this image right now so it is your task you have to put image or you can just add image here um item name item image name item image so every time if you add it as we are adding new item image so what we have to do we have to declare a private okay string image okay and um obviously we have to receive an image over here um string image so because we want to string our we want to put our image here so this is image right and I'm putting image over here so now um getter Setter uh for getter Setter you know it already so we need to delete it right click generate getter and Setter we can create getter Setter together so getter Setter is done everything is done um cart item when we are adding new item obviously here as you can see one related problem in cart controller so every time whenever you are adding this one new item so we need to add another one which is called image request parameter this will be our image and now price item image so our image will be storing inside our variable so everything's everything is looking good uh except this one this line um it is telling us that image cut item New Image so I already took not it is not double is spring actually right so that was actually the problem so yes so successfully we added image here so now in the template um so wherever you have these three name you have to change it okay so um yeah I did not add anything for the other other one as well so I added uh this one now I will be adding it in our card right so this was only for two product I guess I did so 1.2 dot so okay so let's add those two product orange this is Apple Apple value $3 3. jpg is it was 2. jpg and finally another one you can addit okay this is schemed milk do we have anything else um so carted this is also add to cart this is also a two card and what we are doing it is skimmed milk so let me add skimmed milk so product name is skim sked milk um which is $5 okay value uh for [Music] example jpg by the way um so so far our uh everything is ready so if we redun our application so this will work but um so this one we will remove it later so this one is adding our card so I already added this one total price so wherever we will be displaying this thing is needed in another page not in this page right we have to display another page for um displaying our cart item right so I will take all this stuff into another page so right now our adding into cart is ready so let's see whether it is working or not and whether it is displaying everything in the bottom or not so um so far what I'm doing I'm rerunning this application and you are seeing that our cut application is ready okay so I'm adding apples um explicit error bad request okay by the way I'll let let me fix it and another one when I'm sending okay application has not explic my ping okay error 400 right so let me fix this one okay so I find out the silly error uh so here I made one mistake that's why it was giving us white level error so the name will be item okay so here I took name equal to name so the name will be item and rest of the thing will be um for this thing so for example this is item price and image so because um in our card item uh when we are receiving it in a controller it is actually item so um let me fix this one and let's uh check again so in our card item what I have to display as I told you that the first one will be item so as I was declaring something else so that's why just G quite now let's restart this application and let's try to rerun our application and let's try to check that whether everything working perfectly or not so I'm going to my card okay so anyhow I'm going to my card right now so it is loading I'm adding at to cart okay the card item is being added in here as you can see apple okay this is added so I I want to add orange orange is being added so it is displaying here but we where we have to display we have to display to the another page so that's why what we have to do we have to create another page so I'm for example I'm card item so this is the another page where we will display our item and in this page we need our navigation bar okay so let me fix our navigation bar first because um when we will be working there will be issue with navigation bar so let me fix our navigation bar first so in our navigation bar here as you can see um so first of all when we will click on our homepage it should take us to the cart page right cart okay and when I am taking this one it should take us to the item page card SL item so we have to Define one um controller here uh obviously as usual we will Define One controller this one is item right so we will display our card item over there so I'm declaring One controller which which name is card item so um cart item card so I'm defining one method session is enough so in this page we will display all the items that we are seeing in our card so I'm copying this one literally I'm copying this one pasting it again and I'm renaming it as card tyen item so now our page is ready ready controller uh navigation bar is ready only this area so what we have to do Welcome to our grocery shop and until the last part of our code we have to remove this Center and what we have to do we have to put this one okay so before putting this one let's go to our design page um so according to our uh frontend developer so our card will be displaying in this one like this is a table we T so what I'm doing I'm opening it in um vs code so how to copy paste this code so obviously we will take out this one okay all the table item so until this cut item so I'm copying all this thing pting until here actually so let's take everything so here our shop will be there okay so I'm copying pasting from from this card item to this area Okay uh it's always good if you don't know just go to HTML format this website HTML format if you don't have extension in your um in your vs code or anything go to HTML format copy paste this code so it will format and align code perfectly for you so copy it from there and you can paste it inside your intellig idea so your code will be organized okay so these are professional things that all the professional developer are applying so now I have this item but uh see one thing how this cart item is displaying whatever I'm adding inside our cart now it is displaying in the bottom right and here you will see one word called th this them leaf for Loop th each right so th each UL Li so this one means the whole Li will be repeated every time until we have card items so I will copy this line okay and carefully I will paste this line here because where it is repeated our this row is repeated so I'm typing this one th H art item it will be repeated here this one okay this is our page which will be TR will be repeated every time whatever I adding then product name obviously this one so if you go there you will see how our name is being displayed this is called dollar item th text dollar item name so if you go to our cart item now uh we have remove this form because we don't need this form head more remove it we will remove it later so now we need our this one so inside TD just put th text this one automatically it will put text inside this this one so we need item item name pH text item price okay we need our item price and this will be our one C so item price dollar sign uh this one slash what we have to display that much CAD right so we will be displaying it here uh that much C and finally we have to copy another thing which is uh item price and item image right th image so what I have to do I have to go back to my this area th whatever so instead of th text so what we'll be doing th SRC inside this SRC item do image uh and um I hope the image will be loaded so uh let's go back to our uh application let's run it and let's see and finally we have to display our total so total is here if you go to our total according to our code this is the uh price of our total right so I'm copying this one and I'm pasting it inside any any of this one so let's put it here right last one let's remove unnecessary things so product name price quantity sub total product name price um quantity and sub toal will be it is your home t you will be adding it quantity um product price quantity so name price is there quantity and then subtotal so quantity subtotal you have to calculate it you will be calculating so product price quantity subtotal so after that this is our total area right so now our cart item is also ready and inside our cart item application as we copy pasted it I think everything is ready if we check it right now so let's see how how it is looking th each means for Loop okay so I'm going to my cart okay so this page as I am restarting my application so session will be zero there will be no session so here as you can see no nothing I will remove it later so I'm adding one product uh fantastic it is being added here I'm adding another product it is being added here so whatever I'm adding it should be in my cart item page but right now card item page telling that white level error card item nothing called card item right so card item there is nothing so let's check why there is nothing there should anything so card SL item no we write it down right so card SL item it should return us this page um okay so one thing is very important that maybe we have to put slash so okay card SL item so why it is not displaying internal server error so now this page is displaying but we have internal server let me check I was checking the error and according to the error here as you can see very important it is telling me that cart item slash I put this cat sign which is actually giving me error so I cannot put this cat sign here so in beside this text what I have to do I have to put it here that much cat I guess um now it will work but I don't know how it will work so let's see how it is working otherwise we'll fix it okay so let me check um if it is working or not but uh let me check how they are showing our all this stuff so I'm putting on cart item okay I have nothing because I added I have recreated this project uh restarted so one item is being added I'm going to this cart item and it is displaying this one but image is not loading why because image is showing that cut image 2. jpg now where is this image um if we go here 2. jpg is showing but 2. jpg should not be displayed in this way so what we have to do we have to add at theate because it will be loading all this thing from this area right so now I hope everything will work so let me check uh total is showing that $3 so subtotal will be here I want to just uh check whether our code is working so I'm adding one product Apple adding one product orange okay and if I go to my card page okay so now still it is not showing why because here now it is sing okay so item image SRC item image right so there is issue so um again I made mistake with this blade at the rate item image so dollar sign item image is already telling us our image but why not it is displaying because okay th hsrc because according to our them Lea this is our right so it should display okay let me check so I fixed it how I fixed it um so this is the way that's how you can fix it so if you go to your C HTML actually we have to Define it in this way so my variable Declaration was not good so now we find it out how to display this one um and CAD is displaying or not no CAD is not displaying so in order to display this CAD we have to concatenate uh our um variable with our string so if we concatenate like this one right we want to display CAD so I want to concatenate this one and I'm typing Cad and before that also I have to concatenate that string because this item and everything is my variable and whenever you are writing variable you have to write it in this way okay don't forget to write it in this way this is my variable this is Cad and I'm adding Canadian dollar so I hope it will work now so let's restart and let's see if it is not working then my declaration is wrong so I have to research on it and I have to fix it so um so let me run our project so um it's almost uh 12:00 so from after evening actually I was creating a tutorial I got so many error I fixed it and uh finally our application is showing so I'm adding one apple one orange and now we will see our card okay so our item is showing internal error obviously this error is generating from that that that places because I I made some mistake over here uh so um what I did I told that use this dollar sign symbol okay yeah we cannot added it in this way we have to add it in this way at the rate no at the so okay so what I did dollar sign is there but Dollar Sign Plus okay item price plus I think this cat this amount of SC right okay let me check now if it is not running then I have um I have to fix it this so let meun this one if it is not then I will fix it and I will let you know what to do okay so white level error again so I'm sure that there is some issue okay so it is showing us let me check that much cat that much cat Okay so internal s because my representation is not let me fix guys uh so I fixed it uh so we have to display it in this way okay so let me copy paste the code and let me fix it so we have to display it in this way okay so item price should be here so what is the difference between this one and this one so here as you can see I missed one uh blade sign so the blade sign need to be inside uh the one which we which we want to display our variable okay so I hope you understand uh what was the issue uh so by the way um day by day when you will be nursing with this code when you will will be um I mean when you will create many application when you will be doing this that when you will be working uh and researching on each project then you will learn any application initially all application will be very difficult for any student so it is not easy I know that um you are maybe you are thinking that how we will do it uh in our practical work so you will be doing it after one by one so my intention was to show you that all this application either it is PHP or Java everything is almost similar so here as you can see I added it and it is showing perfectly the subtotal now quantity and subtotal you have to calculate it by yourself so calculation is easy just I want to give you some hints um so imagine if I want to add subtotal so I will be doing nothing quantity okay so quantity for quantity we have to take another another um item like quantity QT QT one or two okay imagine that everything is quantity one um so uh in order to add this subtotal what you have to do you have to multiply it with our quantity and um then you have to take two variable actually and then you will find it out okay quantity and sub if you want and if you do further research then you'll be also able to add this thing so I'm finally we have to remove our uh row code um which was at the bottom so please go back to your application let's go back to our application let's remove our unnecessary code from the bottom because we successfully created our card and card is showing perfectly so we are removing our previous code and now our everything is working fine so I showed you how to do these things so if you go back and re restart your application so your application will be looking like um so far if you can integrate your design with this one then this course is I mean this uh test is done um for your test you can get good Mark full marks uh if you do it until what I showed you on the video okay so if you don't add um quantity total are fine uh if you can display name price and total total one this one uh that will be enough and one and two serial um you can show something so these are actually index so if you even print uh cart item like index plus one that will actually also show you this one and two serial okay so let's go back to our cart item and let's do this research so here I put this one so you can put dollar sign cut item uh so what will be displaying sorry pH text so this one we want to replace this uh text with our where is our serial right so this is our serial table heading this is table data okay okay whatever uh so here it is index index you know it very well index + one how it would be um if I restart my application I hope it will display if there is internal eror then I have to do research again and I have to add this one but I am hoping that this will add our serial number so if you can do until what I showed you in the video that is enough for getting good number full number but if you cannot integrate design you will pass but you will not get good number so the more thing you will add in your uh card item you will get good marks Okay so here it is showing internal so that means I have to fix it okay guys uh so I find it out uh finally I uh write down this one uh for calculating our um I serial number which number it is one or two or three so if I restart my application if I go to my cart item now here you will see that I have nothing in my cart item when I'm going to my homepage I'm adding Apple orange and banana in my cart item and if I go to my cart item you will see that okay one out of three two out of three three out of three actually we have to show the bottom one uh so let's remove this one um so C item size that's enough I guess C item size so if you write it down uh so it will display 1 2 three okay so one out of two out of okay so C item size is not good we have to uh we have to remove the bottom part right and we have to remove this sign as well so we don't need this size if you write index. count so it will automatically show you the number uh that you want to display as a serial 1 2 3 4 and another thing is um so finally if we run it um so here as you can see okay so okay so let me add cart orange banana okay and here as you can see it is showing me the total number and the previous one actually this code is also will be beneficial for us I hope you understand where it is so if you if you just take this portion of code card item size and if you just take it out okay this one is also beneficial for us uh this one will be added in the top I hope you remember this one so um we were displaying one zero this thing spend B so here th text equal so if you write it down okay so here what we have to do we have to give dollar sign cut item size um and anything else no yeah sign card item so if you put this thing then it will display the total card number instead of zero okay card item size I'm uh I showed you all this thing uh so if in order to get a plus you have to complete all the requirements that I'm seeing showing you in this video tutorial okay so as long as you are adding this thing and if you want to add extra thing extra thing will give you bonus Mark uh so as long as you are satisfying all the criteria that I have mentioned um in this video then you are getting full Mark for sure okay um and if you just uh past those code and if you just create a raw design without any design you will just pass you will not get good number so thanks for watching the video tutorial I hope that will help you and please try to understand that I'm investing my 5 six hour outside College just for uh showing you and teaching you how to do all this stuff in a professional way now it's your turn if you are not taking initiative nobody can teach you anything okay so take your initiative this four five hours that you will sacrifice uh that will actually uh make you become uh that will actually help you to make uh I mean that will help you to become a successful full stack developer okay ladies and gentlemen thanks for watching my video thank you and all the best for your upcoming test and um please communicate with me if you need help or anything okay thank you

Channel: SenecaCTY

Views: 152

Keywords:

Id: qdqPfcOHY2s

Length: 45min 42sec (2742 seconds)

Published: Mon Feb 12 2024