Everything You Need to Know About Laravel in 30 Minutes

getting started with laral is very straightforward especially if you are coming from some other framework or platform anything that's MVC which most things are nowadays then well you're going to be right at home because laravel is an MVC framework and all we have to do is just translate what you know into the world of larl and so the first thing that you need is an environment for developing laravel applications and for mac and windows users the quickest way to get up and running is with laravel herd that is herd. lal.com just download and install it and you're pretty much good to go it gives you everything that you need now if you are on Linux there are many other options one of those is zamp xpp but if you're on Linux or if you already have an environment for PHP then you will need to be sure that you have composer just go to get composer. comom and then install it and then you can create a new laravel project using composer or you could do what I do and that is to install the laravel installer that way you can create a new laravel project with just the laravel command and you will be good to go so if you install herd one thing you might want to check out is the general tab there are her paths so so herd is going to watch these paths and it's going to add local DNS entries for whatever projects that you have inside of those paths so it's a good idea to create a new project inside of these paths and if you want to add your own custom path then you can do that it's very straightforward just create your directory set it up here and then you're good to go and you can also create a new website just go to the sites tab click on the plus sign and it's going to ask you how you want to create your new laravel project you can use no starter kit laravel Breeze or laravel jet stream I typically use the command line so here I am inside of that herd directory and I'm going to use the larel command to create a new project and I'm going to call it messages the idea being that the end user would be able to send me messages and yeah why not so we are prompted to choose a starter kit just like herd offered but in this case I'm going to choose none it's going to ask us what testing framework we want to use I'm going to choose Pest and yes I want a git repository then this is going to create our project and then it will prompt us to choose a database now if you're using herd and if you're using the free version it doesn't support databases but really that's okay because larel has built-in support for SQL light so that's the option that we are going to choose here let's CD into our project and fire up the code editor and let's hop over to the browser because herd should give us a website that is HTTP messages. test and yes great if this didn't work then we might need to flush our DNS cache but here we go this is the welcome page for every new laravel application or at least every new LEL application that doesn't use any of the other starter kits there's some differences between those but let's look at where that is coming from so larel is of course a framework that routes requests to some code that's going to execute so if we go to the routes directory there is a web.php this is where all of the routes live for our web application and we can see that there is a route that hand Les the get request for the root of our application and it simply Returns the welcome view so this means we can create another route for a get request for slash Conta we'll have a function that's simply returns let's do this let's have an H1 that says hello laravel and of course if we navigate to/ contact in the browser then we will see that text hello laravel now of course naturally we don't want to hardcode all of our HTML here instead we would want to use a view just like the welcome view is being used up here so our views are inside of the resources folder and then views and you can see this welcome. blade. PHP so the view engine in laravel is called blade and all of our views begin with the name of the view blade. PHP and all we have to do to tell laravel which view we want to use is just use the name welcome behind the scenes it's going to know to find the file welcome. blade. PHP so that's all we have to specify well most of the time but inside of the welcome view we can see that well it's a full-fledged HTML document except that there's some other things like here we can see that there's some double curly braces being used if we scroll on down more we see some directives like this if directive and this o directive and there are other directives that we are going to look at but this is basically it so what we could do then is create a new file we'll call it contact. blade. PHP let's give it some simple markup the title let's say contact me and then for the body uh let's do this we'll say hello blade so we can go back to our routes and instead of returning this HTML we can return our contact view so of course now whenever we refresh the page we see Hello blade and everything works as it should but of course we want a contact form here so that the end user can contact us the first thing I want to do is add in tailwind and we'll do so using the play CDN so that URL is CDN Tailwind css.com now I know that you want to see me type all of this out but I'm sorry I'm going to have to deny you and just paste in this markup because it's just a straightforward contact form there's a field for the person's name their email address and then the message that they want to send us everything else is just a bunch of CSS classes so if we take a look at this in the browser it it's not going to Blind us anymore so that's fantastic well one thing I did do though is for the form I turned off the browser's built-in validation and this is just so that that we can always submit the form because in this video we're going to submit the form with some invalid information and I want that to actually be sent to the server so that we can see how the server is going to respond with invalid information but that's that's just how that is so we are going to send a post request to SL contact in order to process this form so that of course means that we need another route for a post request for SLC contact and let's just say for right now we are going to return a redirect response just to the route just back to our welcome page just so that we can see that everything's going to work and so let's click on send message and now we get this page expired what in the world does that mean what page expired and and that's one of the things I wish that there was a little bit more information here I understand why it's doing what it's doing and I understand why there's not a lot of information here but basically this is the cross-site request forgery protection kicking in because it's built into laravel every request that is not a get request is going to be expected to include a csrf token we didn't do that with the form so we need to do that and it's very easy to include we can use a directive called csrf of course we could write that HTML ourselves but why this will do it for us so we can go back refresh to make sure that the token is included send the message and we are redirected so we have builtin csrf support that's awesome now we just need to process this request and of course the first rule of handling user input is to not trust user input so we need to validate it and we can tell our function here that we are going to get a request and and we can use this request to validate our data because it has a method called validate and we pass in an array where the keys are the names of the incoming inputs so we have name email and message and then the values for these keys are the validators so the name is required the email is of course going to be required but we also need to be sure that it is a valid email address so we can specify another validator by using a pipe and then we have an email validator but then let's say that's well our message is of course going to be required but we might want to have a minimum text length so let's say that the message has to be at least a characters but we also want to limit what they can send so we can say that it can only be a Max of a th000 characters and the beautiful thing about larav Val's validation is that if this validation fails it's just going to redirect back to the form it's not going to do anything else and that gives us the opportunity to tell the user hey there's something wrong with this data but if the validation passes then you know we don't really have to worry about that either because the code is just going to continue executing so let's add back in that redirection response just so that's we have something to do here so let's go back to the browser let's go to/ contact and let's just submit the form now it looks like that nothing happens and that's exactly what we expected because remember I said that if validation fails it's just going to reload that form but we don't get any of the error messages by default we of course have to include that inside of our view so one of the ways that we could do that well probably the easiest way that we could do that is like this so we want to check if there are any errors so we're going to use the if directive and then we can close an if directive with the end if directive so if there are any errors then we want to display them and we're going to contain them inside of a div that has some margin padding it'll have a border and that border is going to be Rose Colored and it will have rounded corners and then inside of this div element we are going to create an unordered list and we are going to iterate with with the for each directive over all of the errors and as we do so we simply want to Output An Li element and the error and to Output this information we use just a pair of curly braces we need to add the end for each directive but there we go that's going to Output all of our errors so if we go back to the contact us form and we submit this we can now see those errors all of these fields are required so okay fine we'll add some text but we won't add a valid email address and of course our message is going to be too short so we will submit that again and we get some more validation messages the email field must be a valid email address and the message field must be at least eight characters but notice though that we lost the values that we had input and we don't want that we want to include all of the invalid information so that the user can make it easy to provide valid information so let's go back to our view and we can easily do this for our form fields for the value we are simply going to Output the old name and this is of course for the name field but we will essentially do the same thing for the other fields so that for the email field we will output the old email value and then for the text area we will output the old message value so perfect let's go back to the browser let's refresh and let's see if that's going to put that in NOP okay so let's make this invalid once again with an invalid email address and a message that is too short we can see that our old values are there so that's great the user can then easily make this work and so let's add a message that has more than eight characters we submit and so we should be redirected back to our welcome page so all of that works now we just need to take this information and store it in our database but of course we don't have any way to do that or at least we actually do but we don't have a table to store this information so that means that we need to create a table and we also need to create a data access layer to work with that table and it's very easy to do we will create a model and we can do that from the command line because larl has a command line called Artisan which we can use to do a lot of things and one of those is to create a model which we'll call Simply message and I'm going to use the m flag this is basically going to tell Artisan that we want to create this model called message and we also want to create a migration for the database so that we can Define the column layout for that table and then we can actually create that table by running the migration so this is going to create two files for us so let's go to to the database folder because inside of here is a migrations folder and we can see that there were already some migrations there the users table was created the cach table and the jobs table but now we have this create messages table and then inside of this file we can Define the column layout of our table we have this table Builder here so we're going to use this table and we simply Define the types that our columns are going to be and then we specify the names of those columns so in this case let's have a sender name and we'll have a sender email all of these are going to be strings and then the third is going to be message now you can see here that by default it already is going to add an ID field because every table needs an ID and then there are some timestamp columns which can also be useful and then notice that there is a down method here so that is all inside of the up method that is going to execute when we run the migration if we ever need to roll back the migration then the down method is going to execute and it's going to drop this messages table which is well that's exactly what we want it to do the other file that this creates is inside of our app folder there's a models folder and now there's this message. PHP we can see that it extends our model and it's a fairly straightforward class there's not a whole lot here but this model class is going to give us everything that we need to interact with our new messages table so this is going to be our Gateway into querying and creating and deleting and all of that wonderful stuff so with that done we can go back to the command line and we are going to use Artisan to migrate our database so that's going to create our new messages table so that's ready for us to use we just need to use it so right here inside of this post request Handler we are going to use our message model that we just created because this has a static method called create and then we can pass in an array that has the keys so that would be sender unor name and then the value validated name now if our column names matched the names of the input from the request we could have done something like this validated and you'll see that's used a lot because that's just a nice way of doing it however since I didn't do that we're going to do this more manually but that's okay so we'll have sender name and its value is going to come from our validated variable and we will have our name so we just need to do the same thing for the email and then the message so that's going to create a new record in the database with the information that was provided from the form and then we redirect back to the main page but you know what let's do this we want to be able to display these messages don't we so let's say that we will read direct to a URL of/ messages which means we will need to create a new get request route for messages and we will get our messages by using our message model we'll call the all method that's going to get all of our messages and then we will return a view which we'll just call messages and then we will pass our messages to that view so that the view can display them and we do so with just an array like like that now of course we could simplify this we could just take this so that instead of creating this messages variable at all we can do something like that which cleans that up so now we just need to create that messages view so inside of our views folder let's create a new file called messages. blade. PHP and I tell you what let's take our contact View and let's paste that inside of our message view because that's going to give us a lot of everything uh we still want to use Tailwind here but the is going to be messages we don't need the form so let's get rid of that we'll still have this H2 here but this will be messages and then we just want to display those messages and we can do that once again with the for each directive that we used inside of the uh contact View and we'll say for each message that we have in messages now notice here I'm using this messages variable this isn't defined anywhere except for when whenever we passed our messages as messages to the messages view that's not confusing at all but that's where this is coming from we passed our messages as this messages variable so we have access to that so that for every message we're going to have a div that has some margin at the bottom then we'll have an H2 that has some margin at the bottom and let's do this we'll say that the sender is from our message sender name and then we want to dis display the actual message so we'll do that using the message property so with all that in place should work let's go back to our contact form and let's fill this out I I say it should work it's not and we'll talk about why it's not so let's have a message that is longer than eight characters and then let's send that message and we get an error it says add sender name to fillable property to allow Mass assignment so by default larl is not going to let you Mass assign the properties or the attributes on your model you have to opt into that feature and this is just a safety thing because there are some values that you don't want to mass assign now what do I mean by mass assign well if we go back to our route whenever we created this message we are mass assigning those attributes the other option would be to create create a new message object and then individually set those attributes and in that case it would be fine but not by just passing all of these to the create method so we can get around this by going back to our message model and here we are going to add in the protected fillable field which is an array and then we just basically Define the attributes that are okay to mass assign so that would be sender name that would be sender email and then that would be the message so with that done we can go back to the browser we should be able to refresh this and resubmit that and we get another error view messages not found did I mean message I don't know I probably mistyped something yes I mistyped something so the view was not correct so the view should be messages. blade. PHP so now we should be able to re refresh and there we have our messages the sender was me and hello the message that is longer than eight characters so we can go back to our contact form and we could say that this is from John do and that's at johd do.com and your contact form is great fantastic yes so we will submit that and now we see that our messages are indeed here but of course there are ways that we can improve this we have these routes defined directly inside of our web.php but this is starting to get a little unruly so what we can do is extract some of this into a controller so let's do that we can create a controller manually or we can use Artisan to make a controller and let's see since this is dealing with messages we could call it message controller or we could call it contact controller let's do that let's call it contact controller and this is going to create a new file for us inside of app and then HTTP controllers and now we have this contact controller and it's just an empty controller so let's do this we can say show form and then let's go to our web.php and let's just take the code from inside of that route and we're going to paste that inside of show form so we're just going to return the contact view let's have a function called process form or or let's do this let's call call it store message and this is where we needed the request and then we will grab the code inside of that function we'll paste that inside of our store message and then let's do this we will have a public function index and this is going to display all of our messages or not let's just call it show messages then we will rob that code paste it in and so we have this controller now we just need to set up the routes to point to the appropriate methods on this controller let's make sure there's no other errors okay so we're good there so we can go back to our web.php and we can still set up our routes this way but instead of using these functions we'll say that we want to use our contact controller and we actually need to do it like this to where we are passing in an array where the first element is the name of the controller class that we want to use and then the second element is a string that has the name of the method that we want to use so for our contact for the get request we want to show that form for the Post request I believe we called that store message and then for messages we had that method called show messages so now our routing file is much cleaner and all of the functionality for the contact form and showing the messages are now inside of that controller now there are other ways that we can clean up our code like for example in our store message method we can extract the validation into another class so that it would essentially look like this we would need to make a few other changes but all we would have to do here is create our model and then redirect to our messages so let's look at how we would do that we would use Artisan to make a request and let's call it store message request this is going to create a new class inside of our app HTTP folder there's this requests and now we have store message request there's a couple of things here first is this authorized method by default no one is authorized to make this kind of request so of course we want to change that to true and then we just need to Define our rules and these are the same exact rules that we used before so we can just lift those array entries paste them into our return statement and now in inside of our contact controller instead of just using request here we can use store message request and behind the scenes LEL is going to automatically validate that input for us and we will see the same behavior if validation fails then we would see those messages inside of the page but if validation is successful then the data would be saved into the database and then the user would be redirected to our messages the only thing that we need to do here though is change how we get the data we will use the request object to get the request input for name email and message and we can also clean up our views so our contact and our messages views have a lot of the same markup we can extract that out into a layout and we can create a layout in a couple of different ways I'm going to use the component approach to where we will use Artisan once again to make a component we'll just call it layout and this is going to create among other things a view inside of our views folder components and then layout and all we have to do then is extract all of the boiler plate markup so basically everything from the top to the H2 element we're going to lift that out paste it inside of our layout page and then everything from the form or rather after the form is going to go into the layout pages as well and then here inside of the layout page we can Define certain what are called slots like for example our title we could just say that we're going to have a title slot here and then we can reuse that title slot for this H2 element because they essentially have the same content and then inside of our contact view we just need to make a few modifications first of all we need to specify that we have a layout page that we want to use so our root element is going to be X layout we'll of course need that closing tag so let's put that at the very bottom we will need to provide a value for that title slot so we will use an element called X slot colon and then the name of the slot which was a title and in this case it was simply contact us and then we will leave the rest of this view alone this main content is then going to go inside of our layout and we need to specify where that's going to go and all we have to do is use this slot variable that is our default content slot so we just need to make the same modifications to our messages view so let's do that let's get rid of everything except our for each Loop that's going to build the markup for the messages we need to close out the layout and then for the title we'll just use messages here so we can go back to the browser we can refresh and we see everything is still the same if we go to our messages view we will see again everything looks the same but now we have that layout page so if we need to make any change to the overall markup we can so let's say that we want to add to the title lar casts and then we have our title slot so that inside of the browser we can see that title change L casts messages if we go to the contact we will see something similar except L cast and contact us and of course there are so many other features that laral has that just makes our lives a lot easier but of course we don't have the time to go into all of them but here at lar casts well we have a lar cast for that so be sure to check them out

Channel: Laracasts

Views: 4,188

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: e7z6KJkGhmg

Length: 29min 15sec (1755 seconds)

Published: Fri May 17 2024