Laravel 8 CRUD Tutorial For Beginners

in this video we'll take a look at how to perform product operations using the latest version of laravel laravel provides an elegant api to create read update and delete any resource in your application we'll build a simple ui as a proof of concept for how the user will interact with our application everything we do in this video will be available at github so feel free to use or extend this for your projects as you can see we have a fresh installation of flarewell and the first thing that we need to do is set up our database credentials so i'm going to open up my dot env file and change the database name to your name whatever you want i'm gonna say laravel crowd the username is root and the password is secret so let's save that close it out and need to actually create the mysql database so mysql dash u root dashb and i'm going to enter in my password finally let's just um create the database using create database laravel crud and we can exit out of there and then we can run the migrations perfect so now let's open up web.php file which is the uh located inside the routes folder web.php and here is where you register all your routes what we need is some way to create read update and delete posts right so we can register a new route called slash posts and actually let's just um create a new controller so we don't have to do it here so you can say post controller class and the action name is going to be called index you need to create this controller so use app http controllers and enable the controller post controller and now we need to create this generate this post controller so php artisan make controller post controller let's open up posts controller post controller and add this this index method right so public function index and here we need to update all the posts but in order to output all the posts we need the post model so let's generate that php artisan make model post and along with the post because it's a new model we need the migration as well migration file is where you define all your all the columns for your particular table this is the migration file that it generated and we can open this up create posts table and uh to keep it simple we're just gonna have two fields the string of title and content of content and sorry not the content this is going to be text you can check out the laravel's documentation for to see all the options you have available for the column types next we need to run this migration to create the post table we can say php origin migrate and that will migrate the post table so now we also have this migration and we've run that migration that created a post table in our database and also if we open up app models it created a post model which can be used to query the database for posts so if we import that model up here in the in our controller we can say app models post and we can just return actually let's just die and dump all the posts so post all and if we open this up in our browser it's called slash post so let's open this up slash posts um you can see it's an empty array because we don't have any posts yet so let's create a dummy post i'm going to say php artisan tinker and we can say post actually we can use post create because we never let's create a new post um it needs to be app models post okay and then the title is gonna be my first post and the content is gonna be my first post content and then we can save the post if you do that and refresh the page you can see the items array is now filled with one model and if you open that up and look at its um attributes we have that post so but we don't want to display displays like this we want to have a we want to have some html so let's um let's go back to post controller instead of dying and dumping let's save this in our in a variable called posts and then return a view and it's going to be called posts.index and we're going to pass in the compact post you can do this or you can define it like so post and then post variable so this is how you pass data to your views so let's open up our sidebar and go to resources uh views and in here we need to create a new folder called posts and inside of that folder let's create a new um view called index.blade.php and we can just generate some html and i'm thinking i'm going to need some sort of ui framework but i don't want to use bootstrap or anything like that so let's use tailwind css and let's go to tl1 css and let's just include the cdn this is not actually recommended but let's just go with it because it's just a dummy project okay so what do we need let's create a let's create an h2 and that says my post title and we can define that we can add some utility classes to it text to excel let's go with excel let's make it bold let's make it text gray 900 so dark gray color so i'm going to refresh the page my post title and we can add a paragraph um let's keep it let's make it md text gray let's make it a little bit grayer a little bit lighter there my post and let's just say learn so that's your post and let's add a container here with our pixels max width 100 actually we can add utility classes for max width so so we can say max width full for max worth 100 percent the page uh we need to also say mx auto and then we'll copy that paste it here looks okay so let's add some padding top of four it doesn't look that exciting but let's go with it and i'm just going to wrap this inside a div or if you want you can use an article tag let's actually output the post from our database so since we passed this post variable it's going to be available to us in our view and we can loop through it using add for each process post and for each and i'm also going to add some sort of margin bottom to four or let's go with oh let's go with four or two so let's create another post just to see if it gets added to the list so i'm going to say my second post so you can post content post save oh so we also need to add a content so title first title let's save the post and see it in the browser oh so um i need to update the title and the content so we can output anything we can open anything using the curly braces and then the name of the variable so post title post content save that and let's take a look at it in the browser so now this is directly coming from our database let's go back to our controller and see what we need to do next okay so now we need to add the add a link so when we click this we can go to a page where we can update the post so let's go here and add another one get this needs to be post and update uh sorry edit actually this can be slash post slash edit so this is gonna open up a form where you can update any post so let's add this method in our controller and i say post equal so actually laravel is automatically going to inject the post if you pass a post id and so we will have the post here like so we need to type in the post um class here so you say we were looking so we're basically telling where about that we're expecting a model being model injected here so and in here we just return the view so return view and we say pose dot edit and we pass the post the po and we pass the post like so so let's create that view edit the blade.php and um you can actually if this was a real-world project you're probably going to need a layout but i'm just going to copy everything from index to edit just for simplicity okay so this view is going to have a form the action is going to be slash pose slash the id of the post so we can grab the post using the post variable and remember we passed that in our controller and so we need to say post and then the id this this is where the form will submit so post slash the id of the post and the action uh sorry the method is going to be what actually needs to be put but you can actually say put here because html doesn't support that so you need to say post and then say add method and say put they'll tell variable that hey um we need to submit to a put endpoint and so also you're going to need to add csrf and that'll basically protect you against any cross-site request forgery attacks all right so we need a an input and i have a little snippet here that will generate an input for me so this is the title and let me capitalize that and we need another another one for um the content let's capitalize that actually we don't need an input tag we need a text area tag so that will create a text area for us because um this is supposed to be the content of the post so let me refresh the page and go to slash one now um slash one slash edit okay there we go we have a title a content and this content has a text area so actually let's just say h um 12 so just so it's a little bigger i don't know if h12 exists or not i know for fact 816 is supposed to exist so yeah there you go so you're going to enter in your title your content um but we need to inject the title and content as values so we need to say all right the value is the post title and for the text area we need post content and you can see it's working let's add a button so i have a button snippet and that needs to just say update so when i click this update button uh what i want to do is update the post so if i say update it and click this update button i need it to update so what happens when we uh submit the form well means when we submit the form it sends a put request to slash post slash whatever the id is so we need to create that endpoint create a new endpoint for put and say posts and then the id of the post and we'll say post controller class and then update okay let's open up our post controller and add the update method this will also have the post variable so okay so now let's just die and dump everything we get just to see where we at request i'm gonna say everything so when we submit the request you can see um along with the method and the token we have title and content so what we need to do is simply update simply update the post so you say post use the update method and provide in the title which is the request title and the content is going to be quest content okay let's save that but before we do that we also need the we need to validate the title and content in fact exists in our request so to do that we just say request validate and provide in any validation rules so title is required as well as the content so let's save that and refresh the page continue okay so it says add title affiliate property to law mass assignment so what's basically happening is laravel is trying to protect us against certain type of attacks so what we need to do is go to our post model and add a protective field it's called a fillable this just says hey laravel just limit my mass assign um title and content so when we reverse the page this should work and it doesn't say anything but if we go back to our post table posts list view it says updated let's go back to our controller and in here after we update i just want to return i just want to return a redirect back to slash post and let's try it out again so post and then edit and you can say update it again again update and you can see that it's working so now we can view all posts we can update the posts as well so we need a way to create new posts route get slash post slash create post controller class and then create let's go back to post controller and add this method up here public function create and this will basically return a view post.create let's create that view create.blade.php and again i'm going to copy the edit page and remove the put method here and remove the values like so and when we update the method we want to post to slash posts and not slash slash id so when we do that let me go back here and add another endpoint this is going to be post slash posts and this needs to be store method let me add the store method in the controller now so public function store we need to validate the title and content exists so let's copy this and paste okay next we need to create a new post and the way to do that is say post create and then all the fields so title is going to be request title content it's going to be content just um next after we create a uh create a new post let's redirect back to the uh all posts page now let's test it out so if you get a post slash create brand new post title this is brand new post title content so update as you can see the new post is created finally let's make it easier to go back and forth between these pages instead of manually typing out the url in the browser so let's add the link here so i need to go to index.php and instead of h2 let's use an anchor tag and say href that goes to posts slash the post id and slash edit so let's refresh the page and if you click on any of these go here so also let's just change the text to make it look like the link so instead of text grade 900 let's go text blue um 500. there you go when you click on any of these you go here and actually let's um add another thing after the post content let's add an hr just so you can see the separation between each post so there you go let's add a little bit of margin top margin top two save and you can see it looks better and let's add a title here say each one class font bold and we need the text to be to excel and i'm going to add margin bottom four and i don't know you can see my blog or something so there we go let's make it for excel there you go so you can go to any particular post you can edit the post you can click update and also let's um add another button here that says add post so i'm gonna say tailwind simple button say add post and i'm gonna add the link to that so it says it it's supposed to go to slash post slash create and let me add some margins so margin y four so from top and bottom we need four pixels so let me go to add post you can add a new post another new post another new post content and we can click update that will create another new post just over let's add a back button here so go to edit whp go up here above the form let's uh say tailwind button and say go back let's make it an anchor tag with an href that goes to posts or actually let's go down here with the update button after the update button let's add another one that says cancel let's change this to gray 500. so you can update or cancel but let's make it an anchor tag so anchor href slash post change this here as well save this refresh the page and now we can go back as well behind the scenes i also added the cancel button on the add post page the last thing that i want to cover is the process of deleting a post so when we click on any of the posts uh we go to the edit page and in here let's say that we want to add a delete button so whenever they click on this delete button we want to remove that post so let's go ahead let's open up our edit dot blade view and in here we want to add a new form action pose and then the id of the post and we need the csrf field and also we want to specify that the method we want to use is delete and the button well let's just use the same button delete also i want to change the color of the button to red okay let's save that and check it out in the browser let's add a little margin so margin left um four okay that's fine so when we click this button this form is submitted and laravel is going to interpret it as sending the sending a delete request so let's go back to web.php let's add the delete route here post slash post id post controller and destroy method destroy we will have that post all we want to do is delete the post and then redirect them back to the posts page and as you can see the my first post has been deleted [Music] you

Channel: TheCodePro

Views: 27,499

Keywords: laravel crud tutorial for beginners, build your first laravel project, laravel for beginners, laravel tutorial for absolute beginners, laravel 8 tutorial for beginners, laravel crud, how to build a CRUD app in laravel

Id: QVNQq-LfHBk

Length: 27min 47sec (1667 seconds)

Published: Mon Jan 11 2021