Simple CRUD Example with Laravel, Inertia.js and Vue

hi everyone in this video we're going to create a simple L applications that will work with wjs and njs and also we're going to make some simple CR example so let's begin in First Step uh we need to create a new LEL application so in every video where we talk about lell when we try to install something or create a new L application every time I say the same thing you can create your new L application by using L CI if you want but I prefer to use composite to create a new LEL application so let's select Lal package and that we want to create a new LEL application and let's name folder with our project that will be named like a Lal cruit view okay and now let's wait until everything will be installed and after this we are going to open folder this project in Visual Studio Cod and start installing all dependencies that we need so as you can see project successfully generated and this means that now we can open a lot of cruit view type code Dot and visual studio code is now open it so let me switch my screens and first um yeah so first maybe it's better to show you Chrome so as you can see I'm now in the official documentation of the iner JS that's really nice resource you can find here everything that you need uh for your maybe if you don't know something about inertia or you want to know some details about configuration you can go here so as you can see we have two articles about installation and here we are going to copy all code and dependencies to install vgs visia in our Lal application so first let's install composer inertia package so copy this command and I will now open my visual studio code so as you can see I'm here and let's type composer require inertia GS inertia LEL okay as you can see this package successfully installed and that means that we can now create a root template so just copy this code got open resources folder and find views folder and forename welcome toplay PHP file to app plate. PHP also if you know what I'm doing now if you know how to install inertia you can just skip this part and start making simple crud example with us so pass this copy from the official lot of U I mean iner GS documentation copy this line and now we will need to type that we want to use app. CSS file from CSS folder in resources folder okay and now we need to generate a new Lal middleware for inertia GS requests so copy this command ppan inertia Lal and past it so as you can see new middle R successfully generated and this means that now we can go to kernel. PHP file and paste this line so copy this line also from the official documentation and just do the same steps what I'm doing to install successfully ings with wjs so open kernel. PHP file go to to middleware groupes and past this line here and now we can say that we finish it server side setup or inertia and now it's time for clean side setup so let's open another another article that we have here and this is clean side setup so client s side set up so copy now this line and also you know we will need to also install one really important plugin uh and this is if I remember this name of this plugin is uh view no no not view white view plugin so we will also install this plugin but before let's type here just and PM install inertia and view so while these two dependency will be installing we are going to download vgs view plugin and maybe you will ask me well what is view vgs if you don't know what is vgs so by default vgs this is engine that is used in l applications to compile all your codes that you will write um maybe uh when you will for example when you will write some code for example for react or for vgs inside your lare application and to compile all these code successfully you you will use VJs that is installed by default in every LEL application so copy this name VJs plugin View and type here also npm install VJs we will need to install this plugin because we're going now to configure we uh that we want to use VJs so we type here import view from uh VJs plugin View and go to plugins and just call here view function and by this way we saying that W I want to use vgs in my lateral application with vgs and now vgs will compile all vgs components that you will write okay so we insult on dependencies that we need but that's not all that we need to do because we also need to copy this code and we also need to open JS folder and pass this code inside app.js folder I mean file yeah so pass this code and also you will need to delete bootstrap GS file because we didn't want to use it and this file will handle all you know all VJs request and as you can see when we trying to get some component this components will be try will be uh getting by default from the uh Pages folder that we need to create here so Pages folder uh this folder will be responsible for saving our vgs components so now we can say that we successfully um configured our L application and it's time to make some simple cruit example uh many people making vog example or for example um maybe some shop or something like this but in my case I'm going to create a first maybe Al blog so let's first create a new model named post and add here MF Flags because I want to create a immigration for this model and also Factory so press enter and as you can see Factory and migration for this model created successfully now let's go to migrations and as you can see as we now are editing our migration file this means that we are going to make connection to some database so I don't have any database so I will pause video and creates a new database for this application so I just created a new database in PHP my adminin for my local server and I name it this database crud example so now let's make this connection in that andv file so my password is root and my database is crw example CR lo- example and here let's past Port of our um local server with database so let's close this and now let's fill migration fills and first fill that I want to create say maybe it will be I don't know maybe title or something like this so I think we can type here maybe maybe string title or maybe can be text field also as you can see here by default we have user and personal token um migration that we will that we don't want to use in this lesson so okay first let's type here string title and maybe we can now type pring outter we can also make some relation between user model and post model but you know this lesson is really simple and really short because we are making just simple crude example with View and inertia so um let's make some relations just make some simple example just to show you how you can handle forms and other things in VJs vistia okay and now let's create a hair content fi uh type is text and now let's run PPR tan migrate as you can see all migrations are successful and that means that now we can create a new controller named pprt sun make controller post controller okay post controller and we can also set here I remember model post and also we can create a request for this controller and as you can see store post request and update request successfully created so now we can open Plus controller so as you can see there are many default functions that are used for for cruit so this is index create store and doer create um return update and delete okay so first um we will need also to configure our requests so first let's type here authorize this is store request this is store post request and we're are going to use this request to save um our new post that we will uh send from the uh front end part of our application so first let's type the title is required ired and Max uh maximum length is maybe 100 or maybe 200 f symbols we can make the same thing for outter let's imagine that outter can have some really big name and content will be just um required and that's all okay now let's go to post controller and now we're going to create some first some first component and it will be named index VI so let's write now some VJs code so template script and also I want to say that in this video I'm going to use um not standard way to declare your components but um is I remember uh composition API yeah so I forget just name how this uh Nam is okay so now let's create here maybe some post variable yeah or maybe it's better to create cre a props and so first let's type here Define props and we will have uh props object uh not props I mean I mean posts yeah so by use by creating this posts prop we will get all posts from the backend part of our application Also let's import here inertia class so inertia inertia that we're going to use to render our components on some page so to render some component you just type return inertia render and we type we need to type name of component in our case it will be index and also here we can use second argument and here we need to type uh which data we want to provide to our props that we created in component that we selected here and in our case it will be post prop uh that we here created here and we are going to just return all posts that we have in our database so that's all that we need for for index function uh but as you know we don't have any post so it's time to create some code inside fact post Factory file okay so first let's say that we want to generate some fake title so here we call fake function and we say for example text maybe uh 50 symbols and now after fake some name so we call here name function and content we can also type here face text and maybe 200 symbols save it and now let's go to sers database CER let's import here our post model so we type Here app models post and now type post Factory 10 so we are going to generate 10 posts or maybe let's generate 20 posts with some fake fake data and let's just type here here create so create now let's type PHP Artisan TP seat so database is seating and that's means that now we have some data inside our database and we can now go to roads web. PHP file and let's create a road for homepage that will render index function so first let's import this post controller so app HTTP controllers post controller let's open array here type that we want to use SP controller and that we want to call index function now let's run phpt on serve so local server is running now we can open Google I mean Chrome and as you can see uh we need to also to run VJs in terminal so let's create here new terminal and run PM run def command so that will start VJs that will compile all VJs code as I said and now as you can see we see empty page but if we open uh diff tools and also let's see what we have in component so oh yeah I forget to import defined props so we have error with defined props function so let's go to index. view and first let's import uh Define props from view save it open again refresh and as you can see now we have nothing and let's see view is detected on this page so I think that we need to open and close yes open and close uh the tools now we can see our index component here and as you can see we have post prop that we created and I uh provided here from beand all posts that we have in our database so as you can see this is just Json data and now we can render all this stuff inside this component okay so first of all let's add new attribute to script tag and it will be set up because we're using her composition API and now let's go to our template first of all let's create see here maybe some container by using T in CSS classes so MX out to to make this container on center of our page and maybe some uh padding of top that will be equal to two and now let's create a cards with post and we're going to use now V4 Loop so uh let's make this cards without any design so let's just use V4 so V4 or maybe let's add here one class post block just to know that this is post block and let's type Post in posts and key of every post it will be post ID let's open this post block and let's type title of every post it will be inside hitting two tag and here we show title of current page of current post that we have in our uh loop so by using title property now we can show also post outter and to show this post outter we type here do outer property okay and now let's open our browser let's refresh it and as you can see now we have some content here yeah also I forget that I'm not using for now valin CSS but I added this classes but as you can see we can also go to view and this is post from uh this prop post that we created here and have all these titles outs and we can easily also add links to Pages uh with some post and yeah all content of post we're going to show on separate page so by now I think it's time to maybe add here some link so you know we have router link and we can just type here two um 22222 maybe post ID maybe it's better to say that we will have post Ro and to get some post by some ID we type after SL post ID and we will add here read more button let's see how this looks in browser and now we have it more but yeah plus two plus one but yeah I forget that we are not using here view router so let me show you uh how you can use Link component that is provided by iner so uh in iner JS you can't use router links but you can use Link router from inertia View and this works works the same as router link but as you can see they have another name and this also have other parameters that you can use now if we refresh it you can see now this is looks like a link and if I click on this my link is not Chang yet because we didn't have any page that have um Post Yeah but yeah also oh I forgot to also uh change parameter with link so that must be R parameter like uh in enter tag let's refresh it and now if I click you can see I'm trying to go to for example to post one page but there is nothing because this page is not exist so now let's make show function to show a separate page separate post by post ID so it will be also really easy first of all let's go to post controller and let's go to show function and here we will call inertia class and render function to show post uh we are going to use sh components that we are going to create here now and by props we you going to provide Uh current post by yeah also this must be named post so inside sh component we're going to create a prop named post and this prop will have information about current prop uh about current uh post that we going to retrieve from back end part of application so now let's create s show that VI component uh first let's create a anmt template but we can type here okay maybe later so also let's create a script tag with setup it's really important to use your setup attribute on script tag because if you're using composition API uh this is required to use this setup attribute so now let's define some components so define components also don't don't forget to oh not not I mean not define components Define props Define props so it's really important to also import defined po props and now let's type here uh post uh prop that have object type and we are going to show first post title after this we're going to uh show post outter so type post outter and finally we're going to show some post content yeah this looks really ugly without any design without any structure but as I said this is really simple uh lesson very we talking about how you can uh use iner GS and we are making crude example so here we don't need something cool or something like this about design and full stack development with nergs we are going to talk in other videos okay so as you can see at least one template or script is required in single file component so that means that I did really common error so don't forget to put all your stuff inside your one component one uh maybe we can say that in one root tag or component so let's name this just post content let's close this and let's format these lines so tap tap save it and let's go to our page refresh it and as you can see we are on homepage but if I now go to oh yeah also I forget to create a road for um show page show function in post controller so let's go to web and we can just type here get ID post controller so post Controller Plus show save it and open browser again let's refresh it and go to read more um yeah so this not created because we also need to configure attribute for ID so here um type ID by this way and also don't forget to type plus so because sorry that I did this error because I had one project on Jango and I forget that enough enough writing on LEL yeah so let's refresh it and now if I click on read more as you can see we are now on uh post page show and we have some problem here uh because we can see any content we can see any content of current post so that means that we have some problem uh with post controller uh but not with post controller I mean uh we have problem only with this road because if we go to post controller we have here post variable inside show function and I'm typing here that we have a ID parameter URL so we can we just need to fix it by typing here post and now as you can see this automatically refreshed and we can see enough all content of current posts that we are see here and this works this works that's great and we can now make some maybe example with form procession and form submission also make some operations like a create and other things so now let's talk how we can work uh these forms in inertia GS how we can handle post request get request but you already know how to handle get request with ings you can you you you need just to create your functioning controller render some component and provide all data from back end part to your controller to your component by using inertia render function so first let's go to the official documentation because uh in official documentation you can find all verified data about forms in iner JS and as you can see it's really simple to handle forms so first uh you can create a form by reactive typ type so you can import reactive function from your uh vgs package and type here uh fields in your form also we can you can see that here we are using V model to update all variables that we have in form but also uh it's really easy and much more easier if you will use use form so in our case we're going to use use form function so let's go to uh maybe uh yes let's go to pages and let's create a here new function that will be Nam create. VI and we're going to use this component to create a new Post in our application so let's add here some class post create now let's add here script setup at setup attribute it's really important and import use form now we are going to create our first form and first let's use here use form function and inside this fun object that you open in this function uh you can Define all fields that you will have inside your form and that you will update so first it will be title and let's also back to documentation as you can see when you type in here uh name of from variables you can also Define default value in our case I'm going to just type null so title will be equal to n or or maybe it's better to empty string because we're working with string so after El so it will empty and content filed also will be empty and now let's create this form so form also we can now type submit prevent submit prevent and when we will call this form so when we will submit this form we will make post request to rot a named post okay and first let's add here some label some fill so first label it will be title title we can also add here four attribute and ID inside input part let's make this without this attributes so type uh name it it's not important because we can use just uh V model and we type here remodel name um not remodel title I mean and we can just copy this few times copying past few times the second field it will be outter so we type here outter form outter and content it will be now uh text area so type here text area uh copy this V Model T past it here and let's also create here mty uh div let's typ create here submit button and value value create a new post great so we created a component where we are going to create say uh all our post now it's time to go to create function in post controller and type that we want to render this component when we call create function so type here create and we don't need to pass here any data or other information Al let's add code to save a new Post in store functions so first let's get all validated data from request and as you remember uh we created store post request automatically and this request is saved um here so post request St post request and here we type it rules of validation uh for title after and content and we are going to get all the three items when and all this stuff will be validated so to get all this validated data from request we call here validated function and all this uh title outter and content fils will be saved inside data variable and now we can create a a new post so we type here post uh post create so post create and we type here data also we need to go post model and type here uh protected F able Fields so it can be all Fields or we can just use here guarded to say that uh user can uh fill all Fields so we type here this guarded yeah without any Star so guard it and it will make all fields that we have in post avilable okay so yes that's all but also we need to create here a few New Roads so first let's create a here here uh get post create so type here post create uh post controller so post controller class and when we go to post- create we are going to call here create function and also uh when we will go to when we will make request to post uh just SL Post Road uh we're going to call here controller class store function so remember that here we are making post request because we want to send some data and save it okay so now we have create function and store function and it will create a new post from new form Crea component also we can create here edit function update but we are going to do this soon after where we will test uh post create components so let's go to post create and and as you can see we have some error so let's go to roads looks like I forget to maybe uh type something so post controller create so post create render okay we already have here render but let's say it's nothing found H it's strange so maybe uh let's try to restart our server so H PRT on serve let's go again to web so post create maybe we can just remove this slash so slash and let's see how it will work now yeah let's go to browser uh oh yes so po gr is not working so maybe I think you know um because we're using here link uh I know iner JS router this means that we can need to go to index. view and first let's try to here uh create here some nowb bar and first we will have here only one link uh that will be create post and this create link will move us to post create page so post so post create page let's save it and let's refresh um yeah we don't need to refresh so we can click now on create but as you can see we have again this error and this really strange that uh this not working because we already created this function and maybe that's because we have here uh post so we have already post and maybe we can type here uh we can you know we can move on this two RADS up here and this error appears because we already have her post show and this tries to get a new post by create so uh let's refresh it and now as you can see all rendering is working everything works but we have some strange link components here maybe we should fix it later so okay first let's uh try to create a new post so also yeah also I need to change my V model for Content text area so open create a view and let's type here content okay so now let's check it so open browser it's already refreshed automatically also if you go to view uh diff tools if you have this plugin you can see that there is our form that we created and also you can see there are many other parameters data for example content and other also outer so all fils that we created inside our form by using use forms function are saved here and for example if I will try to change out you can see this fil automatically also uh changing here so our remodel is working it means that we can now test creation of our post so first let's uh add some title for example my first post after it will be fiream courses and lsom for example now let's qu click on create new post so create function fir we are not not redirected because we don't created any redirection action but if I now go to homepage and if I scroll down you can see that our post successfully create so let's go back to our code and let's see how all this stuff working because you already know how is is working by for example inside our component you can see that we're making post request as I said um but if you go to controller remember uh when we making this uh post request to post we are making post request to this road that we created here and this calls this function and all data validate by store post request after that we get all this data inside uh data variable and after that we are making uh we are making creation of post also we can make redirect for example to home page but I remember maybe we should also import class for this but let's make all this stuff without any redirects and now um let's make another uh component for editing post so let's go to Pages let's create here edit that view and we will need to copy all code from czyy that view and also import Define props because we're going to get existing props exist existing po post that we want to edit uh by prop and let's type here props or no or yeah yeah we will need to use props so Props Define props post and it will have object type save it and now let's go here so we will uh get data of prop of post that we are editing now and we will type here props out uh also we need to type here props post aor props post title and props post content as I said we are doing this to get uh data uh of current uh post that we want to edit from be so that's all and uh yeah but yeah also we need to make post put request to uh maybe I can just type this like uh yes so let's change this to this so post update post update and we can type here post ID let's save it and let's go to edit and first we will render this component so we type return render edit component and let's provide to this component post that we will get by ID from URL and also you remember that we have update post requests that work similar to store post request so we will make uh the same steps so first we are going to get all validated data and update by using update function and type uh put here data from edit component so let's go to edit as you can see we we are making this here put request so this means that now we can uh we need to go to uh web. PHP and first let's uh create a new road for editing so edit post and post controller so post controller class edit and also put request post update post and for users that paid attention to this all stuff that I'm I'm writing now uh you can see that this is typical resource typical resource that you're creating in LEL so uh you can just use uh you know resource resource post and uh post controller post controller class for to create all these roads but this is really custom example so let's Let's uh write all roads by our hand yeah so type here update function and yes it's all so it's time to test all the stuff uh so first let's go to index that VI and let's create here new link that will uh go to edit post page so let's type here edit post okay so post so post edit and let's type here post ID save it and now let's open browser there let's go to edit post so for example let's edit this post and and as you can see all content of this uh post automatically uh we get from backend part by using post prop and for example let's add here number two also you can see that we have form we have our content of post and also we need to rename this button to update post but for now let's test uh update request so this action is not authorized uh why we get this error that's because in update uh post request I forget to change this authorized function to tr so because we are working on this server we don't make any authorization so we can just type here true save it maybe it's also time to type here update post save it and let's check it refresh let's type here two update post and as you can see nonstatic methods cannot be called statically so that's why um why we get this eror that's why that's because uh I need to call update method by another way so let's fix it so to fix it let's open our controller uh let's go here and first let's open here array because when you use update function you need to open array and type here properties that you want to update in our case it will be uh title subtittle [Music] after dat data out and also content data uh data yes so that's one of the ways but as is it was said that we can use we can't use this uh method statically so you need just to call this update method by this way and you can just pass data by this way or you can as I said uh open here array and type all values that you want to update so let's make make this like this let's now refresh edit page let's adhere maybe some 222 numbers click on update post and as you can see we didn't make any redirect on backend Parts but if I open our homepage um I can see that this post was not updated um so how we can fix it because yeah we make updates but we didn't save any data okay so we updated update function let's go to update post request and as you can see we don't have any rules here here so let's copy this rules from uh store poost request. PHP file uh save it and paste it and let's go to browser okay one second I need to refresh it okay and now let's try to update something so let's set here some numbers let's click on update post and let's refresh it and as you can see now this post is updated because if I now even try to go to homepage this post is updated I can also update after so for example type here updated click on update post also you can type uh use radi react fun function if you want and as you can see everything is updated so now uh the final thing that we need to do is post deletion so it will be also really easy so we can type here just post uh Delete and that's all that you need and here we can type for example return redirect if you want and now let's open again uh our browser oh yeah also we need to create Road for deletion so let's go here we can type here delete so we will make delete request post delete post item and we are going to call here delete functions so type controller class delete save it and remember that you can use here resource if you want so resource function but in our case to show which roads we have um I'm writing this by this way okay so destroy yeah also uh not delete but destroy function let's save it and let's go to index. view and let's add here another link that will bring us to delete page so post delete post. ID so we're going to delete post by ID so delete post close this link save it and let's check how this works so let's refresh it and let's delete the first post so I click on delete post and as you can see the get method is not supported so methods delete so um you know I said that the Flink component can be used used as uh that this component it's like a router link but you can also use here another you know another uh things that you can use for example you can uh change method so method it can be get post request or something like this in our case it will be delete let's save it and click on delete post and now you can see this post was successfully deleted I refreshing this page and you can see that this post is is not existing so if I click again on delete po you can see page is automatically delet refresh it because we are making inertia GS request and uh post successfully delet so that was really simple really primitive we can say a lesson about how you can make Cru example with vs ands that's that was really simple without any design or something like this and if you want to learn more about iner GS you can check my other videos so thanks for watching and we're going to meet in the next videos

Channel: Fire Camp Courses

Views: 4,912

Keywords: Laravel, Inertia.js, Vue.js, CRUD Example, Laravel Inertia.js, Vue.js CRUD Tutorial, Web Development, Laravel Tutorial, Inertia.js Example, Single Page Application, SPA Tutorial, Laravel Vue.js CRUD, Full-Stack Development, Web Application Tutorial, Laravel CRUD Operations, Inertia.js Vue.js Integration, Laravel Inertia.js Vue.js, Modern Web Development, Laravel Vue.js Tutorial, Inertia.js CRUD, Vue, laravel, php, php tutorial, laravel tutorial, inertia.js, javascript, vue.js

Id: V-FhBu7agiM

Length: 40min 1sec (2401 seconds)

Published: Sun Nov 12 2023