 Hello, this is Christian in this episode. We're going to look at web forms and Laravel mainly want to do some just the Service side form validation and how do you set up a form? Okay, so first thing is that We need to go in here. We're going to just use the Forms which we created for the contact page right here Okay, so this is a really simple form that has three fields and we want to process this form and then you know Sent it back in. So I'm going to open this also in the routes page and open up the web PHP and it's going to go into this contact page right here. So this is what I'm going to clean up this a little bit Okay, I'm going to remove this thing here. It makes a little bit Too messy to look at I'm going to do a format to clean this up a little bit. All right now Let's move this down a little bit. What I'm going to do is I'm going to create another round here to process a post Request. Okay, so I'm going to copy this and put it right below it. We'll make this as a post Now the first thing you want to do is That if you are submitting form to the back end, you need to be able to retrieve the data From the form and you do that by doing something called the dependency injection It's a really early early stage in dependency injection or DI for that matter So what do is when you inject a request object to this function here, right? So You know, as far as I know, like since PHP 5 or 7 you can actually do using type hint to allow Certain type to inject to a function. So we're going to use a request class in here If you type that in here uppercase R. Remember, you're going to get that from the HTTP from the support HTTP Client, okay, so make sure you hit that and on the right top here, you're going to see HTTP request if you don't see that you probably got the wrong one So make sure you grab the right one for that and then you will go ahead and then we need to add an object call request This is just a variable copy question call. Whatever you want can be ABC doesn't matter. This is not so important What's important is this type here Okay, so now when we load the form using the post method is going to load this as opposed to this I'm going to use the same URL. Okay, you can make it differently if you want to I use the same URL But the content here will be different and then when I submit the form go to this page I'm not going to return the user back to the same view. I'm going to go to a different view Let's say we call this is a thank you view. Okay, so thank you And I'm going to create a view just a minute. So if we're here, thank you And then we're going to create a very simple view. Maybe just copy the one that we have Contact is okay. It doesn't matter Copy that and paste it right back and we name it to say thank you dot blade PHP and then here we're going to just put a message in here Um to say Thank you Let's put into a p tag Thank you, and then put the name right here. So wherever this is. So we're going to put the name in here And and you can put whatever message you want to put in here. It doesn't really matter. You can say something like thank you for um See to your Message and it will be in touch Something like that. Okay, so we know this is the user and a very simple form Okay, so save that form there now back here. I think we are almost done Now, so let's go to the form first. I want to show you something here Um that when you submit forms using Laravel by default the Laravel engine requires you to include Something what's called a cs um cs rf token What that is is really just a token Which is called um, let me let me go right here. Okay, I'll put it right here need to include that in the form Okay, so it's really the app symbol followed by cs rf Now this is a token that Will be generated by Laravel to prevent your form from being submitted from a different site Okay, um, you know because a user can create these forms in any site they want and they can direct that to Action to your site, right? They can put like htp here and then your site something.com and then whatever the form is Okay, very dangerous and sometimes so you want to prevent that from happening and only this form That is submitted from your server from your site will be allowed And that is what this cs rf is for okay to prevent the exploitation of unauthorized commands or Form submissions from a robot or from another user home hacker for that sort. Okay, just a security layer really important And you can turn this off if you want to but I highly recommend that too Okay, so this one here is going to go back to the same page which is the contact page Right and then the method is it's going to be a pose as opposed to the fork of gap Okay, um everything here is will be the same we'll leave it as is And I'll show you without this one here. Let me turn this off. Okay if I say that and Now if you go and launch the application, let me show you run that first So again report eight thousand And go to the site and refresh it Okay, so here's a form here. Okay, so notice I did not have the CRF install if you go into the store view you can see there's no token here I'll leave this open for now And if you try to submit your form without nothing I didn't record anything here So submit you're gonna get error or something like this. This is page expired. Why because Of the token right so that token actually general is session That is managed by laravel. So if the session or token is not matched It expired that form data and so therefore it does not accept any form coming into your site. Okay Very very very useful um An example to do that is that you can send any form to google and google will take it, right? So That's something that you want to think about so now if I turn this on Like that Okay, and save it and go back and try to submit it again And just click okay, and you see that See probably didn't do something correctly. Let's try again and submit Okay, so you can see that it goes it did work Except I didn't include the name here because of the form I submitted to the thank you right here I didn't include it right so it does work now, which is good So let's go and fill up our form for the mclose Down here go to the thank you. This is good in the url here. We go to the thank you here We need to include the variable for the name as well So the name here is can be mapped to a variable called name. We will get that name from The request okay, so the form data comes in it's going to be attached to the request object This is an object by the way and so it has all the fields attached to it I have three fields So you can just grab the name they will create a variable called name And it's going to be assigned with the value coming from the request And request here is an object so you can use The arrow function method to get the name of your field Okay, the name here is the field of your form. I have the name field Email and message right either one of those will which should be here So I just want to get the name and I'll do that And I pass that to the form and that should be okay So let's go back to the browser and refresh. You just refresh it. You should still take it But there's no name attached. So it's empty really. Okay. So now if I go back again Now I put my name here And I'll leave the rest blank. I didn't require that so you can see that pass the mining over And it goes to the thank you page again the URL is still the same Right, even though the same URL I can load a different view if I want to which is pretty nice, right Okay, so you can see how that works now the next thing I want to do is I want to validate these fields here I'm just really simple validation You can do front end validation using html like the require and all this stuff You can also use javascript. Both of those are front end validation Which are usually really good to do and then you have another layer on the back end which is the server side validation So I'm going to do just in server side the front end. I'll leave that to you. You already know how Well, let's say when I require All three fields and then email should be an email of that email type. Okay Now I'll do you want to point out here and their Documentation on the larval side if you go to this link here under validation and they're very towards like the middle of the way here. You have a Rule of validation for all your different types of fields. So there's a lot of them here for a date You know, whatever it is Um, we're going to do one for the email. So if you click email, you're going to do something like this Um, maybe just the email and then it'll be very simple here. I'm not going to do too much about it Um, okay, so all the rules are here if you want to look into that further So let's go back to our code And validate this form again. I'm not going to touch anything in the front end. Okay. I've managed everything in the back end So back here when the data comes in Okay Before I submit, you know assigning status data, I want to make sure they're required now to do that You can call the request And then request has a function called a validate Okay This function will run if you Run this first if this validation fails Then all these here will not this data will not be set It will By default it will redirect the user back to the same view where they came from Whatever that site is Not only that it will also Let you display some error messages Okay, so What do you validate here inside here is a array or a list of all the fields you want to validate I have only three fields. The first field is called the name. So I want that name to be validated using Some key terms in here one of these called required Okay, just like that in like html I wanted that to be required. I want to do a control Alt Shift down just to copy that down Email is also required and the message is also required But the email also want to include the type of email. So you put the type symbol like that You make it so that it's email. Okay, it will validate that make sure it's an email format There are the rules, you know Number of characters the minimum maximum Lowcase uppercase all the stuff again. It's in the url. I mentioned earlier Okay, so what this one does is it will run this function And validate that for you if it passes all the validation are required Then it's good to go and then we'll proceed down here and then go back to the thank you page. All right Now this function here returns an object Well, I'm not actually an array Of this one of you including here Okay in three fields. So you can do that by setting to another You know call it data. We call it validate data doesn't matter. We call it form data Okay, and then now once it's been Validated the data here contains all these data you set from the form field Which is the same as the request. So it's kind of duplicated Only difference is that this is an array. This is an object What is the difference? Well, quite a lot. So for example an object notation I can do one of these let me duplicate this again You can use the arrow like like that. You can use the array method, which is this Racket or you can use a function called get You get the name so I get her. Okay. So these three options are available for the request Object, whereas the data here is just an array name. So you have to use this method here Okay, so entirely up to you which one we use it So I'm just to make sure it does work and in these in these should should work Okay So now once we've got a dated if you don't intend to use the data You don't have to set it here. You can just leave a blank, you know request and and be done with it But I just want to show you that you know these should work as well all right Now let's go and get this a test drive. Now they are all required if you do We load the page If you try to submit it Right notice it doesn't load because we didn't put any error messages If I type in something here like that Okay, how do we know that it's going to show any messages? We don't know because we didn't include the error messages So let's fix the error messages first so we can see what's going on Now when you create this validation Once you require it what happens when it's seen is that it includes an errors variable This errors variable is available in the view So all your views will have this error variable if you go out here doing the blade page here You can display the error messages um, you know to the view and that is a A An instant. I mean the error message. So it would look something like this right here Maybe kind of div here Okay, and then we can put a class here for like alert and then alert using mixing with Bootstrap here. Okay, and we'll put here a list of messages. So ul You know what? Let me do this ul and then here I have a bunch of allies, right? And you can use a loop to go through Each of the error messages. So it's again error and its error here has a function to get all or get all of them and the error goes actually Goes into a Actually it's an instance of if I remember correctly Let's see if you go to the Uh, web. What is it at the vendor? I'll show you really quick vendor Uh, the lurevo Bring work. We've seen this before src under the illuminate. There is a um, a support Function, I mean class folder in here is a message bag class Okay, this message bag If you can see has a lot of functions that actually capture all the type of error You can see if I go and open the outline here. You can see that would be better And let me collapse these Okay, so you can see here that you can get the error messages from If it has any a particular type of error message if it has any error message the first message get a particular type of message Um, you get all the messages to do a give you account Um, all or Another way is any here if it has any messages it will return account if it's greater than zero and You know, so so use this to check your if I wait your data. So back here on the Contact page I can say if all the error messages return as this is called the error for each type of error, right and make sure we end Here I'm going to put the end Okay, so inside here that I want to display the error messages Whatever they are will be displayed here All right, so if I say this and go to the browser And refresh the page Um, here, okay. I think uh, it's called errors not error. I should be plural Errors Yeah errors and not error Okay, so refresh this again. Remember. I already submitted earlier What lost my data by using this box here, right? This is what error messages is But if I go to about come back again The box is here. I only want to show when the error is triggered But I want to show you that if I tell you something like this hit submit You can see that the error is here. This is the email is invalid and I don't include everything you should Have all three messages. Okay. So again, I only want to show if I have an error So you can do that by using another, um, class, which is the if right only show this box right above here if the errors Any It's true. Right. If it has any Then go ahead and show the error messages. Otherwise Don't show it Okay, let me go ahead and put this like that and then now it's Much nicer And refresh the page again if I go back you see that it's not there until I submit that and has the error messages Great. So now again, we'll go here for something here chr.com and then test and submit and there it is All right, perfect The last thing I want to do is sessions. Okay, it's really important to us and as well as we move forward into doing You know collaborations. So let's say that I once I contact send us contact form. I want to add the name to The message up here instead of saying guess they should say welcome christian or whoever that name is. Okay, so we do that really quickly Now session is quite simple in php. If you know that already it's also really simple in blade It's almost the same same method here So let's say that once I submitted the form and everything once has been validated I get the name already filled and then I want to pass that to a session variable So in here you can also use the global session if you want to if you do the php method like like that right remember that one That that's okay too if you do that you have to go and Turn on the session and things like that or you can use the level method, which is also called the session function And it's this available globally you can pass in here as a key value pairs an array it looks like this And the key is going to be a calling name a user or user name as a matter as a map to the name here Okay, so I set the session From here on so after this the session is active and how do we true the name back? You just call the session function followed by the key So let's say I set a session and then now I'm going to go to the partial be a navigation here And right in here instead of saying guess I want to load my name or whatever name is So you can do an if and else block above your anywhere else, but you can use a shortcut as well Just by going here and do the um, you know the add symbol So in here like that I'll do something like if the session Of the name Now it's called you so name a user user user right call the user Yeah user so if the user exists if that is true Then go ahead and load the session of the user Right, otherwise Load the word yes, okay Um, yeah, that should do it right Let's go back to the browser and if you fresh out page and if every load it should changes to say christian because I already set the form to well. Yeah to that already. All right. So here we go. And if I go and do something like Jake something at j.com test And now it changes to Jake Okay, very cool. Now. The last thing I want to do is how do you get rid of these sessions here, right? um A couple ways to do it, but the easier way to do in and learn about is you can go into the storage here The storage under the uh, I think the app now framework under the sessions You can see these sessions here. If you lower your page, it keeps a track of your session So you can see here is a session user here has a has a name jake here And this is for the other one as well if you want to delete your session and install it over again You just basically delete these just you know to lead the monster say yes to remove all the sessions um Yeah, so let's do that too. Okay. So now for go back and that should better be moved from these sessions Right. That's one way another way is you can create another route Let's say that I want to go to a route called c and I want to clear the session For whatever that reason is. Okay. So very simple to do in here You don't need to create a view at all just a route. So let's go here and say I want to create a route that will go to um Yeah, so get up the clear for session and the function here Be to clear the session. So you do that by calling the session class Then cold and colon flush You do it go to flush you will clear the session for you now the session here as you can see It's not available because need to import that in and you can import that by going to Again, if you mouse over this click on it control spacebar and you want to get from the um the facade I think okay from the support facades here click that And make sure it's a session in that session on And it should be important on the right top here. You can see right here. Okay So that is another way to clear your session your cache As well flush all of them if you want to flush a certain type you can use a different method But this is what do all of them. Okay. So let's say if we go back again and create my form Right. No no flush no session here go and type it again So session is on again. You can see here now once it's on even the the only way is you can you can actually Close the browser come back. It will still be there But if I go to the slash c to clear the cache Right And it's there. I did not be directly user. I shouldn't be directly user back to the home page But now you can see if it loaded is now gone. Okay, so let's fix that really quick and then we'll be done with this video So once I flush The sessions i'm going to return a redirect to the home page Right. Remember how we do that in the previous video redirect If I spell it out correctly Okay, so save that And then just do one more if I go and do a c and then redirect to the home page Okay, so that is it for this one Again, when in the future video when do collaborations, we're going to create a little bit more complex form Not that complex, but maybe to perform some of these portfolio objects need to add lead and and things like that All right, any questions, please let me know and see you guys in the next video