Laravel Livewire CRUD Tutorial with File Upload | Laravel 9 Tutorial

hello friends welcome in this video i'm going to create the grad with a live wire so also we can upload the image so let's get started first i'm going to create a flash parameter application so laravel new and i'm going to name it grad ok now i'm going to use the laravel jet stream package from laravel and if you go to the documentation inside the packages we have a jet stream here okay and i'm going to install the stream with live wire so copy this command go to the terminal okay cd in the application and paste that code and hit enter after that we need to install adjust stream with the live wire stack so copy and paste that in okay and also i want to run the php artisan vendor publish and just reviews because i want to use the of this package paste that in hit enter and we need to sort around the npm install and npm run that but before that let's say let's open this with a vs code and now run the npm install and npm run that okay uh in the env file we have this database grad here so let's go and create that open the table plus and create a new database with name graph click ok and open that database and now i'm going to use the to create a cloud for posts so let's open that crowd dot test here and before we run the migration i'm going to create a post model and migration and also the live wire component for both because we are going to use live wire okay so wait for the level mix good now let's create the model so artisan make model and the a is for the is alias for the php artisan okay artisan make model post dash m for migration and it's going to create the both table let's go and open that so post okay post table and in here i'm going to add a title so that i assign table string and add the title here also the string for the image and one more for the body to text and let's say body okay let's save this and now go and run the migration artisan migrate okay let me make also the live wire so artisan make live wire and i'm going to name it post index not just post because we have the model post so let's say now for now and clear this one okay come here refresh and we are in the cut test application let's go and register i'm going to register as admin and admin gmail.com add the password okay now first thing here i'm going to add a link the go to the boss and also create the post route so let's go to the web roles first and create a new road here so road i'm going to say get slash posts and here i'm going to add the post index live wire class okay this is the livewire component so let's give it a name and i'm going to say post dot index now if you want you can give it a middleware but i'm going to leave it for now and in the if you go to the resources because we installed the test screen we have the profile and also we have this navigation and the layout we have applied so which is this one this layout now let's open this navigation and here we have this x jet nav link is a jet stream component for link let's copy this and duplicate copy and here i'm going to add so change the row to be posts dot index and also here to be both okay let's save this in the refresh we have posts here click here and we go to the post right now we don't show anything here because if i open the post index blade yeah here we have an empty div and first thing i'm going to add the class with the max with the 6xl and mx auto okay now this is italian css by the way and now in here what we need we need i need a button and when i click a button i want to show the model with a form to create or the edit post okay so first let's create the button and we need also the table to display all the posts so i'm going to add a div with class flex and justify and to go in the end and let's say also margin two and padding two okay and i'm going to use the hex jet button adjusting component and when we click here wire click i'm going to say show post mode and say here create now we need the model and if you go for the vendor components the stream components we have the dialog model okay and for this dialog i'm going to use this one we need the title the content and the footer so let's close this one and let's add also here a div with class margin 2 and margin 2 and padding and here is going to be the table and after that i'm going to add a div and here i'm going to add the model so i'm going to say x jet dialog model okay this model dialog model and now this is going to show when we the wire model a model this is going to show based on the property so let's open that post index class and create that property i'm going to say dollar sign adolescence first saved public and dollar sign showing post model to be false okay and that is going to show base in this property so paste that in if this is true it's going to show model if it falls it's going to hide okay now here we need the title the content and the footer so x slot and the name is title and i'm going to say title here let's copy this and duplicate and say here the content is going to be here also content here and one more for the footer so here is going to be the folder and say folder here if i save and come here refresh we have a button now if i click nothing happen but we have that button so when we click here i want to show this and to show this we need to change the property from false to true so let's copy this name go to the post index and create that method okay add the name we copy from there and say dollar assign this showing post model the picture and if i save refresh again click create and we have now the model okay and here we have the title content and the footer is here now in the title i'm going to say for example create post in the content i want to show the form and in the footer i'm going to add a button the when we click the button to create or update the bot so let's search for the or i think if i open the i'm going to open my notes because i have some styling css in here and let's copy the form copy the link and paste in here okay we don't need this select so let's remove that select and yeah we need only this one so let's select all here copy and go to the post index blade inside the content i'm going to paste that in and in the title i'm going to say create post let's remove this duplicated code okay now in the folder i need the button and i'm going to use x jet button and when we click here i want the wire click i want to store a new post and i'm going to say store post okay and save store here now if i save go to the project refresh click create and we have create post we have a form we have the store method okay let me also create a table here let me check notes i think maybe i have a table yeah let's copy the link and paste that link here leave this one okay so let's copy this select all copy and go to the post index blade here is going to be the table so let's paste that table in and let's save it go to the project refresh and we have a table here but let me check okay so here we have a windmill i mean with full the rim with a min and let's say just with both i have the full table also in the medium and yeah okay now i'm going to work with before we display that i'm going to work with create so here we need the title image and body let's go to the form and we have here a wire model for title and we have our model lazy so if you want you can leave it or body and new image so let's create that title new image and body come here and say public dollar sign title and also public dollar sign new image and for the body okay now let's copy this name store post and come here and i'm going to create that method so function with that name and here we need to store a new box so let's say post create and what we need here we need the title and the title is going to be we'll assign this title we need the image we need to upload the image so i'm going to say here dollar sign image and i'll assign this new image and store this new image to the public directory slash posts okay and if you are new with post up with the image uploaded i have a video about that in this channel so with this we return the path of the image to this one okay and here now we just say image and also add the body b dollar assigned this body and i think i made a mistake so let me fix that body here and also body now created that after we create the new post i want to say also import this the model okay after we create the post i want to reset all the properties here so this and call the method reset the reset of the field so this is going to be fold this title empty new image empty and body empty okay and also if you go to the live wire documentation now let me show you here we have file upload we need to use the with file uploads trade when we upload an images okay so let's copy this one and let's see what's that trade use with file uploads let's import that okay save it and come here and refresh okay create and say first title choose the image and i'm going to choose this one click open and paste something here click create okay we need to add the properties in the post so let's open the post model i forgot to do that and i'm going to say protected dollar sign fillable and we need the title we need the image and we need the body we save close this one refresh and try again so say first title choose the image open and type something here click create we close that and if i come here and refresh go to the post we have a new post and here we have that a post image path here okay good now also we can if we want we can when we choose an image we can preview that image before we upload it so if you go here to file uploads we can also and let me copy this validation so let's add the validation in store so before we do anything let's validate the new image and also i'm going to validate the title to be required and also the body to be required okay so i want to say you is if we want we can let me check here if we have temporary preview urls and yeah we can show the temporary url of the image so let's copy that go to the post index and in the form when we have the image i'm going to say if we have a new photo new image sorry new image let's preview that and here i'm going to say new image okay so if we select one a new image here we are going to display that and also let me add the errors for all the fields so for the title change this to be title also the name is going to be the error is going to be text red 400 and let's copy this and paste for the new image say new image here a new image like this and also for the body and save body here let's save this and see now if i come here in refresh create if i say create here we have all the files is required but we need to run the npm run watch the watch for the value in css classes and now if i say choose a file and i'm going to choose this one click open and we preview that image here before we upload if it's nice okay now i want to display the file in here the post so let's go to the form to the table and what we need id title and the image that removes this status because we don't have status and here copy this and say for each dollar sign both are supposed and pay that in now here we have the id so let's say dollar sign post id here we need the other title and let's say the last sign post title and we have the active but remove this here we are going to display the image so let's remove this one and add the storage facade url and dollar sign post image okay let's save this and refresh yeah we need to add the boss here so when we render add also all the posts and i'm going to say post model all okay save it and refresh and yeah now we have first title here and the image okay let's create one more create a second post choose the image and let's choose this one click open and this one is this let's save something here and yeah we have second post okay and now let's work with edit and delete in the both index we have this edit and let's say here without x that button here and when we click here i want to display the model for editing the post so wire click and say show edit post model okay and say here edit save this and copy the name go to the post index and create that method so i'm going to say or let's say in here function with that name but also here we expect the id so let me add the in here okay dollar sign post and the id let's save it and now i'm going to say dollar signpost to be with post and say find or fail that id and with that i want to say now dollar sign this title to be the post title okay and this body is supposed to be also the post body okay and after that let me change the showing postmodern to be true okay true and let's save it come here and refresh okay x chat button okay forget that double t here save refresh and if i click edit yeah we show the model but uh we need to change the button here to be update and also when we click we need to update the button the post not to create new post with this and also change the title here and now if you want to display that image here is easy so let's work with that come here and first i'm going to create new properties of public dollar sign and i'm going to name it alt image now in the when you're showing this also dollar sign this old image is going to be with dollar sign post image okay and one more thing because i want to change the title and the and the button here based if that is in edit mode or not so i'm going to create a property here let's say public i'm going to say is edit mode and this is going to be false by default but when showing that we are going to change so dollar sign this is edit mode to be true now with that we can show and hide the button so let's cut this button and say if the is edit mode we are going to say update update and also we are going to call the method update post and else so if not is not a edit mode i'm going to say create and the same thing for the create post title so let's copy let's cut this and say if dollar sign is edit mode say update post else let's say what we said create both and if i save and refresh now i say edit we have update post here and update here but also i want to show you if i click and i click here create we have all the fields with the first post or with second post so what we need to do is come to the show post model and this is when we click the create here first i'm going to say to make sure that everything is reset and after we change the structure so if i refresh open this yeah click close that and open the create now and yeah we have that one okay now when we hit it also i i said you i want to display the image this post has so for that we created the old image and to do this we can say open this content and let's copy this one and paste here now instead of new image i'm going to say if we have old image and i'm going to say also here alt image and here we need to say storage url and dollar sign alt image okay save it refresh click edit and we have the old image here and if i say create we don't show okay now let's work with edit and uh let's close this content now when we update we call this update post let's copy this come here okay but let me because we need to sort the id of the post so create a post but i'm just going to say here that assigned this both to be with the post and also for the all the fields here so let's select me and say that assign this post and create that property in here so public dollar sign both and now when we so let's say function update post now here we have the post just we say that assign this post and we call the update method and say title to be this title okay the image now we need to check if we have the new image if we have select the image or not and after that we need to save the body to be to assign this body okay but let me also add the validation here so let's copy this and before we update let's validate just the title and the body because we don't need also the when we update the image maybe we don't want to update the image so here i'm going to say if and say now if we have this new image do the same thing so let's create first the image was an image and i'm going to say this image is going to be with this post image and now if we have that if we have a new image i'm going to say dollar sign image a b with this a new image and say store the public directory slash post okay and add the image here dollar sign image let's save that and when we update also i want to close everything and reset everything so the sign call this this reset method come here and refresh and let's update this would be first title updated click update and the title updated but the image has not changed let's check also for validation and click update we have title is required let's say title and change the image also so change to this one so the previous one is this now is going to be this one say update and also it changes so if i come here and we change the image now if i say create yeah we have that thing let's work with the delete so let's go to the pos index and the yeah here we have a delete let's copy this or let's cut this one and we need to add a div with class flex and space x2 and paste that in and also duplicate this this is going to be delete and this is going to say delete post we add the post id if i save and refresh we have two buttons but now if i add a class to be pg red 400 on hover changed to be bg red 600 and let's save it refresh and yeah we change that so however why is not working but let me when you click here i want to delete that so copy this one come here and create that method so say function delete post we expect the id and what we are going to do is just say in the assigned post or not plus impose just say post and find or fail and add id and say delete and say it on this reset to reset everything and if i refresh say delete here and we delete it now also we need let me say we'll assign post to be with this one and cut this because i want also to delete the the image so say storage facade delete and add the post image image and after that say post delete okay save it come here refresh click delete and delete it create new post say first post choose a file choose this one click open okay and type something here create and it's created okay friends uh that's it for this video we can make grad with laravel and livewire hope you enjoy if you like like the video and subscribe to my channel thank you very much and see you in the next one you

Channel: Code With Tony

Views: 17,673

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel tutorial, laravel 8 tutorial for beginners, laravel livewire, laravel livewire tutorial, laravel tutorial for beginners, laravel livewire for beginners, laravel livewire crud, laravel livewire jetstream, laravel livewire full project, laravel livewire tutorial 2022, livewire file upload, livewire tutorial, laravel livewire basics, laravel livewire crud tutorial

Id: mCZ2Xk-AucY

Length: 44min 9sec (2649 seconds)

Published: Fri Mar 25 2022