🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: N/A
No summary available.
00:00
so now it's time to go one step forward so basically in the last video we have seen how do you get all the products on the screen right but now what if you want to know about each product what I'm talking about is let's go back to the front end so I have changed the front
00:15
end for this video so you will see that in the description and let me open that new code in vs code yeah okay so this is the front end two as you can go with the names so the first one was one this is two so this is a UI nothing much changes
00:31
only one particular change so if I click on SRC you can see there's a folder called components inside this component there's folder called a product so basically uh let's go back to first of all the home we don't have navigations here right navigations is is here so I can basically get into
00:50
get on the products and I can call this product which is here now what is happening in the products is so basically your client will send a request to the server for one product not all of course you will get all first because of this page of homepage but
01:05
then if you click on one of the product will send a request of the server and it will send the ID of that particular server of of that particular product so this is where the we are sending the ID so of course on the back end we have to handle that okay uh so that's something we'll do in this video but before we do
01:22
that I want to make for some more changes or maybe we'll do it do it after so once we complete this we'll make those changes what I was talking about about okay so how do you make it work how do you get this particular ID or how do you get a product with the ID uh so let's run this and to see what we are
01:39
expecting so I have to run this I will say npm install and there's no problem I will say npm runev it's running on this port number let's head back to this port number here okay it says something went wrong is
01:55
because we don't have our database okay uh or we don't have a server running so let's go back to the code and let's run the server okay no problem for the server you can say it says stormcat started and now it if I head back here if I say refresh uh you can see the products on this page but then with the
02:11
new UI I can actually click on a particular product so if I click on this uh it says loading but nothing will happen Okay because the server is not configured to uh do this you can see the request here it says product SL1 uh I can just go back here and inspect
02:27
element console and and let's refresh this to see what happens okay we got an error basically we are not able to send the request because we don't have the back end ready so let's go back to the back end and let's add it so in the controller we'll go back to this
02:42
controller and add one more method in fact we don't need hello well at this point so I can just remove this part now and let's add one more method now this is going to return only one product not the least of products so I can simply say product and the method name will be
02:59
let's say get product okay now one thing if you remember we have talked about this before you are sending the number you're sending the ID right in the URL so if you see here we are sending product SL1 okay so in that case I will just map
03:14
it with get mapping and we'll say slash product slash I can't say one is because the number might change so in that case I will accept that in the ID format and we have to also accept that here so I will say path variable and then int ID
03:29
so this is where it will be mapped and once you got the ID I can get a particular product but who will give me this particular product so of course I can say return service you are responsible to get me the product so I will say get product uh baby by ID so
03:45
get product by ID and we'll pass this ID here but unfortunately we don't have this method in this service so what I will do is I will ask my ID to create this get product by ID method and of course even the service will not do anything service will ask the repo to
04:00
give the data so it will say hey repo it is your jobs return repo dot uh now we can't say find all because find all will give you all the products we want the one uh so in that case we have to search by yeah so you can see we have find by
04:16
ID method so we'll use this and let's pass the ID okay now this will not work is because of this uh find by ID returns you the optional product not the product because there might be a chance that in
04:32
the database we don't have any product with this particular ID so it will return null and then you will get null Point exception so we don't want it so to safe side it says I will return return optional it is your job to handle it now I can handle it I can check if the product is present don't only return
04:48
this otherwise you can return something else or I can simply say Get it will give me the product okay or by the way is say or else if the product is not there in in that case it will you can return a lying product by sending value let's say zero okay there a lot of
05:03
values I have to set okay so what I will do is I will uh simply keep it empty so that you will get all the null values or default values not a good option okay uh properly you should implement this with the status code and something but we'll set the status code later at this point just keep it simple it return the empty
05:20
product or you can even say get even that works but again not a good idea okay so at least if you have a product it will give you that's what we are doing now now so now after making these changes I hope this will work so I will just refresh and it
05:36
says okay still okay table created all the steps have been done started on Tomcat let's head back to our browser and let's close this let's go back to homepage we got all the products and this time let's click on some other car and we got it you can see this ISS Honda
05:53
City cool uh so this is how basically you get it a few changes I don't know why it is coming out of stock we'll check this later but if you see the date here this is weird Okay we don't want to show product listed on this you can do two changes here either you can make this changes in the front end you can
06:08
simply get it and using react you can change this value you can read this value and convert it into DD YY I mean ddmm YY format or we can directly store this type of data in the database in a different format let's see how we can do that in that case what I will do is I will go to product and on top of release
06:25
date this is where you have to make a change uh so you can basically change is the way you store data in database or the data in database okay and the way you can do that is with the help of the Jackson Library we have used so Jackson is a library which we used to convert your object into Json Json to object but
06:41
it can be used to change other formats as well which is dat format here and the way you can do that is by using the Json format so this is the an we have to use Json format and specify what you want to change uh so basically I want to show this in a string format so say control
06:57
space it can be done with the help of of shape and we have to use a format I want to use a string format so control space and we got string then the next thing you have to mention is the pattern in which format you want to store it so I will say pattern and the format which I
07:14
have is DD mm y y y so it will basically make my job easy so by doing this we are changing the format how it will look okay uh so restart the application I think I've done that so let's go back to the the browser and click on home so we
07:31
got the products and if I click on one product uh now look at the format so this is much more rable for the IND at list I'm not sure which format we use all over the world different countries with different formats but this I'm very familiar with so whatever format you prefer you can change that uh so you can
07:48
say it says the day uh it says 30 uh this is weird this is not 30 it should be 14th okay I think I have to make m capital you know dat formats are always headache okay so started refresh and hit okay now it looks good
08:07
so Capital we have to make the m capital okay now it looks good so this is how basically you can uh do that format uh date format stuff uh what else we can change uh this is working we have made the product controller worked right for the particular ID now there's one more
08:24
thing I want to talk about see if you go back to postman so let's say if I'm not using the client uh uh the react client I I'm using Postman as a client and when I when I hit this you got this response right but maybe it's a good idea to send your own status code we're not sending
08:40
it okay and sometime in the front end also if they want to handle the errors and stuff if you send a proper status you have to send the status that's important okay how will you send status because we are not doing that this these are the default HTP status which we are getting so we are not doing that here so instead of returning this we should
08:56
return the data as well as the status and the way you can do that is by using something else and that something else is called the response entity so instead of returning the list of products return the response entity object of type list list list product so I will say response
09:13
entity of type list of products so by doing this we are not just sending data but also the response entity so we can have status there but then you can't return a products where it is asking you for the response entity so what you have to do is you have to create object of response entity and in the bracket you
09:29
pass this object and the benefits are with the object you can also pass the status code so maybe I want to pass HTTP status dot so we have inbu object you can see we have okay uh you can you can send something else as well maybe anything you can also say found if you
09:46
want to do that I think that's the only thing matching here apart from okay so I will say okay uh we can also use created when you create a product now we are not doing that we are simply sending response so uh okay works if you are not comfortable with this syntax what you can also do is you can create a list of products separately get the products and
10:03
then pass the object of list of products here so I mean St upon you how you want to do it so this is one way this is one thing uh we can also do it for this but let me just run this how it will look like for all the products just restart the application you know after making the changes we have to check if that
10:18
work that is working so let's get back here refresh it is working it is working but then the front end if you're working on front end as well you have more control depend upon the status code you can change the way you show data uh and you can also check that in Postman but
10:34
of course you will only get okay because we have not done that uh we have sending okay but let's see if I send something else I'm not sure I've never tried this found I don't know the status code for this we can check it you can click on found and found returns 302 so let's check what's the scode you get on the
10:50
postman so head back here click on send okay so still not started started now okay so you got data but you can see the status code is 302 found and this is not a good idea so good status is always 200 series so we'll say okay let's change
11:06
the product as well so here also we'll use response entity so from now we are going to focus on response entity not just the product or the data so here also we'll say new response entity we'll put that here looks good and we send the
11:21
status now since we are doing this we have we can do one more thing now since we are sending the status don't you think we should also check if the product is there uh so I can check if first of all let's get the product product what product product equal
11:37
to service. get product by ID will send this and that's what we are doing here right on this line so we don't have to say this now we can send the product itself but we can check if the product is not null then only you send this
11:53
response right but what if the product is not there in that case you can return something else you can return new response entity we have one more Constructor which takes only the status so I will say HTTP status dot uh not acceptable yeah not found so
12:12
we can send not found so this is one way uh to handle this let's uh relaunch it so let's head back to the postman and now send a request for let's say one uh we have it so it will get data but what if you said 12 we don't have any product with 12 I hope and you got error and
12:28
this is is where you are getting because of this so I have to make one more changes in the because I was assuming that you will get data and we don't have it uh so I will say or else return null let's work with null because anyway I'm checking that on the client side right I
12:45
mean from the controller so send this works 12 and you can see it says not found so this is what I want to I wanted to return see there are multiple ways to handle the situations um I'm going for this approach looks easy but depend upon uh different scenario we can use
13:00
different approach again sending n is not a good idea we have to find some other way of doing that cool so this is how basically you get one product and we have done that here as well so it is working okay uh what next maybe uh in the next video let's try to add the
13:16
product so see you in the next video everyone bye-bye