Understand Laravel basics 2021 | Laravel tutorial | Laravel for beginners

hey what's going on i'm matt and today we're going over some larval basics so i was kind of just youtubing some larval tutorials and for some reason all of these tutorials are like four hours long so and let's be honest like nobody really wants to watch like a four hour video on youtube by the end of this video you'll know how to make a basic application in larval you'll understand how to make views create models and migrations basic routing and inserting and editing records in the database all right so what are we going to build we're going to build a simple crud application and the most common crud application is just like a simple to do list so and by the end of building like this to-do list you'll know how to make a simple application in larval all right so let's go ahead and get started okay so we're going to obviously start with just creating a new larval project so we're going to go ahead and paste that in here let's call it to-do list i'm gonna go ahead and create that okay so let's cd into our to-do lists app i'm gonna run php artists and serve to run the actual app okay with that running we can go to localhost 8000 and there we go we ran php artisan serve we got our basic standard brand new larval app running so we can go ahead and get started okay so the first thing we're gonna do is just change this view up to basically be a to-do list so let's go ahead and do that okay so this is the basic welcome page it's inside resources views and the file is called welcome.blade.php so uh right now it has like all this kind of stuff and we don't really need any of that so we're going to go ahead and just remove it so inside this div you can look okay so it's everything in here let's just make sure that works we'll refresh the page there we go everything's gone we're gonna create an h1 here call it to-do list let's make sure that's showing up there we go okay so simple to-do list maybe an input okay so we got an input so all i did add a title right we have two elements here so a label and an input and as you see here pretty simple just to-do list okay yeah i'm gonna make everything white so we can like the text white so we can see it easier there we go okay so we got our basic to-do list view and right now obviously actually i just realized we need a button to save the list item okay so since i'm kind of like doing this very fast uh i'm not gonna be like following every best practice that you should follow but if you're just learning the platform or like sorry if you're just learning the framework for the first time like don't really worry about following best practices just try and like understand how things work basically okay so we got our basic to-do list view here and obviously right now like it doesn't do anything you can type into the input and you can click the save button but nothing happens so we basically can now just start making it work and the first thing that we need to do is basically hook up our larval app to a database so what i'm going to go ahead and do that so i'm going to open table plus i'm going to open my local database i'm going to click here these are my local databases and then i'm going to create a new one so let's just call this to do list gonna go ahead and open it up okay so obviously right now there's nothing under tables because we haven't created any but so that creates the database on like our local mysql installation uh which obviously like i i guess i should mention that like you need mysql or postgres whatever type of database you're using you kind of need it installed locally for this to work uh but that's like out of scope of this uh this video okay so we created our database locally through table plus now we wanna hook it up to our actual laravel app so you're gonna go ahead and open up your env file uh which is where you set up all your environment variables and then all you really wanna do is change the database to whatever you titled your database on table plus so um username and password is what you're going to set up when you actually have like when you install mysql for the first time since i already have that up and running i don't need to do that okay now that we got our database hooked up to our larval app the next thing we need to do is create the models and migrations for a to-do list and if you don't know what models or migrations are that's totally fine don't worry about it i'll explain that in a second but let's go ahead and just create the models and migrations first so okay so the command to make a model uh is pretty self-explanatory so it's obviously php artisan make model and then the name of the actual model that you want and then the dash m at the end is for migration so we want to create both a model and migration and this is one way to do it in one command so go ahead and run that and you can see that the model is created and the migration is also created okay so i'm just going to double check that our database is actually hooked up to our larval app correctly and to do that i just basically run the migration so to run the migration you just run you just type php artisan migrate okay there you go so when i refresh here in table plus all of our tables are here which basically means that everything's hooked up correctly and everything's good to go okay so when we create our migration it's going to create a file inside the database folder inside migrations and then there's going to be the latest one which is called create list items table and we don't actually need the other tables here or the other migration so i'm going to go ahead and delete them this is how you're going to store basically the list items that we create okay so we have to decide what columns are going to be on this table and we're going to keep it super simple and we're just going to have two columns one first which is a string value and it's called name and one an integer value which is called is complete okay so i'm going to go ahead and run php arts and migrate if you roll back your migrations you should do this as well basically all you do all you want to make sure is that you have your list items table inside your table plus okay so our models and migrations are created now and just to quickly recap basically migrations are to create tables in or edit tables in the database and this is just basically our structure of that table and then for models like there's a lot to you can do with models but basically basic version just to keep it super simple basically this list item model is just how we're gonna access this list items table okay so the next thing we need to do is actually make our to-do list work so we're going to have you type something in here and then click this button and then it will basically just save it to the database so let's just get that working okay to make our text input here actually work we need to wrap it in a form element okay so we got our label input and button wrapped in a form element and we gave it a method of post we're still going to populate this action but i need to mention that one thing you need to keep in mind when working with forms in larval is that it needs one of these crsf tokens uh basically for every form and you don't really have to worry too much about it but basically it's for security purposes um so just keep in mind that you need always need one of these inside the form tag okay so let's go ahead and populate the action value so the action value is basically what's gonna happen when we click the submit button the save button you define this as like a route so i'll explain where route is pretty soon but let me just define this action value okay so you can kind of just read this and it should just make sense that the action is when we click this save button uh we will hit this route and the route is called save item if you don't know what routers we're gonna go through that right now okay so you're gonna open web.php and then this is all of our routes and obviously we only have one right now for the entire application and basically if you don't know what routes are routes are basically uh what does your application do on like a certain action basically so when you go to this page or you click this button or anything like that what do you want your application to do okay so this is the default route and i'll just kind of explain what it does real quick so basically when you go to this route uh in the url page so basically like this if you were to like just hit slash which is technically just like the home page and same with local hosts like that it's just that's the default route uh what do you do and right now it just returns this view so if i were to comment this out and i would go here like technically you the page doesn't show up right because obviously we're hitting the route and nothing we're not telling it to do anything so i'm gonna put it back and then there we go okay it shows up again okay so to create a route i'm just gonna copy and paste the default route and there's a couple things we need to change so our forum element has a method of post which means that we have to make our route a post route now the first argument is basically uh what url to hit to trigger this or to fire this uh route so i'm just going to go ahead and call it save item now the next thing i'm going to do is i'm going to just give it a name a name value i'm going to give the same name value as basically the route so this is how the action item knows which route to point to you technically don't have to give this a name value uh but if you want to have this action item as this route uh you basically have to name it like this it's basically a larval way to kind of like organize your routes and kind of have them in like like if you want to name the specific things okay so we defined our route and now actually if we go and to our form and we click the save button uh you will actually see that it goes to our route url so uh you can see in the url now we have save item route okay so but technically right now our form is working we can submit it and uh it's hitting this our endpoint which is great okay so our route is working but you generally don't want your like logic and point logic to just be inside the web.php file so what we're going to do is we're going to basically move this logic to a controller method larval has another method for that or another command for that okay so it's php artisan make controller and then to-do list controller go ahead and run that and then inside app http controllers we can see that we have our new to-do list controller okay now that we created our controller we want to edit our route to hit a method inside our controller so the first thing we need to do is import our controller at the top of the file and then edit our route to hit a method inside the controller so just like this we import at the top and then we kind of define that this controller is going to hit this method when this route is hit so now we actually have to like define the method and we're just going to do the exact same thing that i did before return our view okay and now our form basically should work just as it did before so we click the save button and yeah so it hits uh it hits our route and it's basically now instead of doing all of the work in web.php it's now hitting the controller method okay so that basically makes the code a little bit more organized now that we're using uh our controller and now we basically actually want to save our item okay so we're going to import our model at the top and we're our save item method is going to take a request object our request object is basically everything we're passing into from our form to our endpoint so we're going to see this input value inside this this method so if you ever want to see what you're passing in through what i do is just i just log out the request method okay so right now i'm logging out everything that we're passing into this method so if you want to look at your logs you go to storage logs and the larval log just clear all the errors out okay so this is our larva log and all we're going to do is we're going to see what values are being passed into this function uh when we hit our endpoint so let's go ahead and click our button and then so this is the value being passed in so we have a token which is that crsf token that i mentioned earlier and then the list item which is null because i didn't enter anything so let's go ahead and type in just random stuff and then there we go okay so logged out the same thing and you can see that this time we're actually getting like the value i inputted so basically we can take this and just save it to the database okay so i'm going to get rid of the logs and then now we want to just create a new list item so let's define a variable okay so we defined a variable called new list item and all we really need to do is define the values on it so name equals this is basically how you save items to the database so you define a new one we're setting the name and this is what we're passing in through the request and we're setting the default value for is complete so it's complete it starts off as zero because we're just creating basically a brand new one so now let's see if it works so if i call this item new item i click save and it didn't work let's see oh right because i have to the the url is wrong okay so i was i wasn't importing it correctly so let's reset that new item two all right there's a typo there new item two click save item and then it's still not working what am i doing oh it's models there we go okay i think i got the right path thing this time okay okay this should work click save item there we go okay and then we go back to our table plus and we refresh and there we go you see that it we have a new row in the table and this is exactly what i inputted okay so things are looking good our list items are being saved to the database but obviously as you can kind of tell that we're not actually listing off the items here like there's no actual list we're just able to save them right now so what we want to do is on our initial route we want to return all the lists and then kind of render them on the page okay so on our default route here so right now we're just returning the view so we basically want to do the exact same thing so we're going to create a new method inside our to-do list controller that basically handles the default route okay so all i did is i changed our default route to now hit our method called index inside our to-do list controller and then our index method literally does the exact same thing it just returns the welcome page so we want to pass in our new items our list items to this uh to this view okay and to pass values into our view it's actually pretty easy uh the view takes a second parameter so we're gonna go ahead and call it list items and then we're gonna just right now return all of them we're using the model to basically return all the values in this table so right now you're not going to see anything in the view but the values are being passed back now we basically just have to render it in our page so laravel blade actually has like a pretty good way of actually just rendering uh lists so i have to double check but i'm pretty sure it's just like a four each so i'm just going to quickly google it okay so it is a for reach from our index we're passing in a list item's value and we're looping over each list item and then kind of displaying the name so this is fetching everything from my database so right now when i refresh the page it should show the our view there we go okay so but the problem is is that right now if i were to create a new item you're gonna see that it errors out and obviously that's because the error is obviously undefined variable list items which means since we're hitting this route we're not passing back this value with this route so all we have to do is pretty much copy and paste this to our our save item route and then it should fix itself so let's just refresh the page and there you go so okay so now another thing is there's probably another thing that you might have noticed is that every time i refresh the page it's going to give me this continue form submission and that's because we're in this route so we don't want to continue going to this route we technically just want to redirect back to the home page route all we're going to do is instead of returning this view we're going to redirect it back to the default route so now every time i create a new method instead of going to that route it's redirecting us back to the default route and you can see that it just refreshes the page and it just adds it as we go okay so right now our to-do list is looking pretty good we can technically add as many items as we want but the one thing we did do earlier is we added is complete column to our list items table so we basically just want to be able to mark items off as like completed so the first thing we need to do is kind of just show a button i guess next to them that just like marks them complete so let's do that okay so all i did was put a button next to our list item so this is what it looks like we just have a button marked complete next to our the the name and then uh i made it not look like complete garbage so i just added some styles to the element right now it's not gonna do anything when you click it so we basically have to do the same thing we did for this button to this button so we need to wrap it in a form element okay so i wrap the button in a form element and we need to create a new route so this route will just be called like mark complete complete so let's go ahead and define this route now okay so we created the route now we need to create the method inside our controller so right now it should just refresh the page okay great so obviously it doesn't do anything right now but we're just kind of we can see that it's hitting our route so like our old method we don't actually want to return the view we want to return we want to redirect back to our index method so let's continue that there we go now we need to think of a way that we how do we know which one we're clicking on right so we need to pass each of these have like a unique name or a unique id so we need to pass in the id to the endpoint so how do we do that so in our route we're going to basically pass in an id like this and then it will take a pram id so that but now inside the route we have to pass in a second value and the value is going to be the list item id okay so right now we're passing in an id to our route and i'm just going to quickly recap how we're doing that so we're looping over in our forage we're looping over each list item right and each list item as you can see from our table has a primary id or just like an id column which is basically a unique identifier so we know uh because you can technically have names that are exactly the same so how would you know which one you're clicking on just by like the name right so you can see this one's id three four or five and then so when you pass in that id to the route so luckily our route can take a second parameter like this and all we're doing is we're passing in the id value into the mark complete route and then when to define it in your web.php it's like this so you change the url to pass in uh taken an id and then inside the method uh all you're going to do is have a parameter uh inside the method called id and then as you can see as i'm logging it so i'll click this button so this when i click this one it should log out id one and there we go laravel i in our log we have id one and then when i click like this one this one's gonna be eight and seven so then we're gonna see yeah eight first because i clicked eight first and seven there we go so now we know which one we're passing through and we're able to kind of edit that one specifically we're passing in the id now we need to edit the actual record so how do we do that okay so we need to fetch the list item uh that goes by this id so laravel has an easy way to do this with uh just finding it so we're gonna do we're gonna define a variable for list item and then i'm going to log out this list item just to make sure we're getting the right one which like for mostly for demonstration purposes we already know we're passing the right id so we can just kind of safely assume this will work but just for demonstration purposes let's do it all right so we're doing the last one dfg and there we go so we're logging out the id8 the names dfg and it's complete is zero so now we basically all we need to do is just save it so i'm going to remove these logs just to clean it up so it looks a little bit easier to read so pretty much exactly the same as what we did in our save item except so we're fetching it we're setting the value to 1 and then we're clicking save we're not clicking save you know what i mean we're you know saving the record and then we're redirecting back to our index page okay so let's test if our mark complete button actually works now so we're going to test it with our first uh list item so the name is this should work and in our database the id is one and then you can see that the is complete column is zero so when we click this we're not going to see anything change but if you refresh our database you can see that is complete value changed to one so it is working one thing that we can do is basically make it that it the list only shows items that aren't completed so basically anything that's completed won't show up on this list so this will be the final thing we do and then it's basically done so all we really have to do to change that is just change this query so right now we're turning every single one all we want to do is add a condition to this so if this is also pretty easy to do with larval so we change the where it's complete the zero we get so pretty self-explanatory but we're basically querying we're this is basically just an sql query where uh we get all the list items where is complete is zero so when we refresh the page that one's going to disappear and now each one that we click is going to be removed from the list and there we go we basically have our to-do list okay so our to-do list is working and it does everything we wanted to do i hope this kind of gave you a basic understanding of building applications with laravel if i missed anything or if there's something you want to know that we didn't cover in this video feel free to leave a comment below but yeah that's basically it thanks for watching guys see you

Channel: Matt Socha

Views: 8,011

Keywords: laravel, laravel tutorial, learn laravel, html, css, php, larvavel for beginners, laravel 8, laravel 8 tutorial for beginners, learn laravel for beginners, web development using laravel, laravel web development tutorial, php laravel web development

Id: AEVhR-hD2Wk

Length: 22min 51sec (1371 seconds)

Published: Tue Oct 05 2021