All right, let's move on to the rewarding part of building the UI and it's bringing the actual product with their images into the front end Okay, like I mentioned, this is the full resolution on my 1280 pixel width Screencasting dimensions, but I will zoom out to 90% so that we can trigger the Excel breakpoint and have a three column grid Straight off the bat, I can see that I've been a bit too ambitious with the margin top on the grid here You can see it's a little bit smaller proportionally to everything All right, that feels better And now we are going to replace this very boring rose

All right, that feels better And now we are going to replace this very boring rose 100 squares to bring the data from the database, which is now going to start to feel like a real application so if we break down one of the products into a Component conceptually and actually who we are going to make a component file I think we have an image and add two cards button, which is going to be a mini form I guess and then we have the what's that the category and the title and the price

I guess and then we have the what's that the category and the title and the price So we're going to write the semantic markup first and then we're going to go and style that now We could totally do the UI directly here But what I want to do instead is have an X Product component for each card. So in the views folder, I will have a new folder called Components, this is the convention and then we will have our product that's blade that PHP

Components, this is the convention and then we will have our product that's blade that PHP So if I paste the li inside of there we back in business But now we can build our product UI in its own dedicated component now We are going to want the product data So as CoPilot had hinted it we are going to want to pass a product prop Which is going to be the product and now that I'm passing this to the blade component I can receive here by defining the ad props directive and have an array of props that include product

I can receive here by defining the ad props directive and have an array of props that include product And if you confuse here that allows me to do something like product name Where the product is the props received and then we drill down to the name property and just like this You can see the desired names in each square. Nice. All right, so let's get rid of the classes on the li wrapper We will keep the li because we are inside an an ordered list But then inside of there we are going to have our markup. I saw CoPilot suggest an article tag and

But then inside of there we are going to have our markup. I saw CoPilot suggest an article tag and Yes, I mean they're not articles But they are a list of items from the same family so to speak MDN article HTML tag I didn't spell it right, but it will understand what I want. Thank you We will skip the AI wild guesses articles self-contained composition in document or any other independent item of content sort of makes sense So let's use that we're going to have an article tag and the first thing we'll

of content sort of makes sense So let's use that we're going to have an article tag and the first thing we'll have is the image tag So the source is going to be product Image and we'll have to do a little bit more work here But let's go with that for now and the alt tag. Let's go with photo of Product name Like I said, this is not going to work You can see we have a set of broken images and the reason is if I inspect the image path

You can see we have a set of broken images and the reason is if I inspect the image path Remember the image is actually just the file name What we want to do here However is to find a way to reference the images that are in resources Images and so to do that we can construct this path with the VIT asset helper But we need to add the resources/images/segment and concatenate this with the product image That I believe should work and oh, yeah, this is working We have now a nine desserts which are looking extremely yummy

That I believe should work and oh, yeah, this is working We have now a nine desserts which are looking extremely yummy We want to make these images square, but I shall resist the urge to style just yet Let's first bring the add to cart button the category the title and the price So after the image we will have a button that says add to cart We are going to have a category that can just be a P tag and this is the product category I think then semantically the most important element in this card is the name we already have an h1 in the page, so let's go h2 and go product name and

I think then semantically the most important element in this card is the name we already have an h1 in the page, so let's go h2 and go product name and product price in a paragraph tag and Whoops, we don't have the price and the reason is it's called price sense And so now we have all the information that we need now It's not quite functional yet I want to do two things before we go and do the styling the first one is I want to wrap the add to cart button in a form tag So we can submit that to the backend eventually and then the price sense is not ideal

So we can submit that to the backend eventually and then the price sense is not ideal We could do the conversion on the front end But I want to go somewhere in the back end in Laravel probably in the product model and have a little helper convenient Formatted price function that we can use on the front end. So it gives us a really nicely formatted with the currency pricing All right, so let's wrap the button inside a form eventually We will have a backend endpoint to hit the method is going to be post

All right, so let's wrap the button inside a form eventually We will have a backend endpoint to hit the method is going to be post And thank you copilot for reminding me not to forget We're going to have the CSRF directive and so let's have a button inside of it and let's make sure that it's a Submit button and submit not some bit indeed All right, and let's give ourselves a to-do comment here as we need to implement that now I want to quickly handle the pricing like I mentioned before we go and style our products

I want to quickly handle the pricing like I mentioned before we go and style our products I'm gonna go in a file that we have scaffolded but never touched and it's the product model right now It's bare bones, but here we're going to add a helper function. Let's call it public function formatted price and yes, it's going to be a string and here Let's return we're going to use the number from illuminate support and here we can use The currency function and we will pass this price underscore sense

can use The currency function and we will pass this price underscore sense But divided by 100 and then we can choose the locale in which to display the formatting Let's go us dollars And so let's try now use that formatted price property, which is passed to the front end from the product model so instead of price sense what I can do is call the formatted price method like this and Check it out. We have our beautifully formatted dollar currency

formatted price method like this and Check it out. We have our beautifully formatted dollar currency You can see the 5.50 is working as well and just for fun Let's change these to Australian dollars a ud and you can see that now it has the Australian dollars currency, but let's go back to who's the Okay, we're in a good place now. We functionally brought all of the data to our front end We have formatted pricing, which is great. And so now we can focus on Starling the product card to look like the design. Let's do this in the next

We have formatted pricing, which is great. And so now we can focus on Starling the product card to look like the design. Let's do this in the next lesson