‫All right, guys, in the last video we left off being able to upload images and we basically said,
‫if it's not an image, then we want to show an error up at the top.
‫Now what I want you to do here, and you don't have to do this as a challenge, but I thought it was
‫a good place to to add one.
‫So instead of showing just random messages up at the top from within your PHP block, create an array
‫a messages array and loop through them and display them nicely in the UI using tailwind classes or whatever.
‫And it doesn't matter like where you put it or how it looks, what colors you use.
‫I would suggest creating an array that has the text that you want to display, along with the color
‫or the status, because some messages will be success and you'll probably want those to be green.
‫Some will be errors, you probably want those to be red, or you could just make them all gray.
‫It's really up to you.
‫All right.
‫So again you can try this on your own if you want.
‫I'd also suggest adding validation for the title and description field.
‫So basically you can just use like the empty function to see if see if something was added there.
‫If not, add it to the messages array and display it in the UI.
‫Okay, so you can pause the video if you want.
‫I'm going to go ahead and get started.
‫So I'm going to have a messages array up here.
‫Just empty start it off empty.
‫And then let's do a little bit of validation for the title and the description.
‫So right here is where we're getting the values.
‫Let's say we'll have an if statement and let's say if empty.
‫And we'll check the title.
‫So if empty title, then I'm going to take messages and I'm going to add on to that.
‫And what I want to add is an array that has two things.
‫The text that I want to display.
‫And this will be an associative array.
‫So I'll say text.
‫And in this case the text I want to show is title is required.
‫And then I also want to have the color.
‫And in this case I'm going to set the color to text Dash Red 500, which is a tailwind class.
‫You could put color class whatever you want to use there.
‫And then I'm also going to set submitted to false because I don't want it to actually get submitted.
‫All right.
‫And then let's do the same thing for the description.
‫So I'll copy that down and let's set.
‫The hoops.
‫Couldn't tell where my cursor was.
‫Let's set the description.
‫So if that's empty, then we'll say description.
‫Is required.
‫Same thing.
‫Color red 500 submitted.
‫False.
‫All right, now let's come down here.
‫And let's see.
‫We're checking.
‫Right here.
‫We're checking to make sure the file was uploaded.
‫So if it was, then instead of echoing this let's take our messages array and let's add to it.
‫And for the text.
‫I'm going to say file uploaded.
‫Successfully and then we'll add a color.
‫Now this is a successful message.
‫So for this color.
‫I'm going to do.
‫Text.
‫Dash green.
‫Dash 500.
‫All right now.
‫Oh, and also I want to set actually.
‫Wait a minute.
‫Do we want to set submitted to true here?
‫Yes we do.
‫So let's say submitted set that to true.
‫Else.
‫So if there's an error then let's set.
‫Messages.
‫Make sure you put your brackets because we're adding to it.
‫So the text.
‫Is going to be file upload error.
‫And you can keep the actually, you know what, I'm not even going to show the error.
‫I'm just going to say file upload error.
‫And then the color.
‫The color will set that to.
‫Text read 500.
‫And close that array.
‫All right.
‫And then let's see down here where it says invalid file type.
‫We want to do the same thing.
‫I'm going to just whoops I'm going to grab that.
‫Put that there and let's say.
‫Invalid or we'll say.
‫Must be.
‫File must be in image.
‫All right.
‫So I think that should do it as far as our messages array.
‫So now what we can do is come down to where we want to display.
‫So I'm going to put it right above the form tag.
‫Yeah.
‫So right here let's say PHP for each.
‫And in here, let's say for.
‫Messages as message.
‫And let's end it.
‫So PHP.
‫End if.
‫Sorry.
‫End for each.
‫And then in the middle here.
‫So what we want to show is I'm just going to do a paragraph and then.
‫We want the class to be dynamic.
‫That's going to come from the messages color.
‫So in here let's open up our PHP shorthand and let's say message.
‫And we want the color value.
‫And then close the PHP tag.
‫And then in the middle in the paragraph we want to output the text.
‫So let's use our shorthand and let's say messages or message and then the text value.
‫So I think that should work.
‫So I'm going to go ahead and just reload this.
‫And there we go.
‫So tile tile title is required.
‫Description is required.
‫File must be an image you might want to put like a margin.
‫So we could do a class of like.
‫Um.
‫Margin bottom for.
‫Yeah, yeah.
‫That'll that'll give it to each one.
‫Let's do margin bottom to.
‫Yeah, so that's fine.
‫If you want to add different styling, you can.
‫And one thing we want to do is not show this at the bottom.
‫If it's not if the if there's errors.
‫So.
‫Let's go up here and get rid of the submitted true here.
‫And we're going to want to add it.
‫Let's see.
‫So we just want to make sure that it's added here.
‫So that way if I reload again now that's not showing.
‫Now if I do this correctly.
‫Choose a file that's an image like this one here.
‫And we get file uploaded successfully.
‫And if we come over here and uploads, you can see that that file got uploaded.
‫It's just some code.
‫All right.
‫So yeah, I mean that's that's pretty much it.
‫Now if you guys got something different, that's absolutely fine.
‫Just as long as it makes sense.
‫But but yeah, just to reiterate, we just have a messages array.
‫And any time we want to display something, we're adding on to it with an associative array of text
‫and color.
‫And then at the bottom here in the UI, we're looping through the messages and showing the paragraph
‫with that class and also showing the text.