Laravel 9 Vue js 3 Complete Crud Application

hi friends welcome to tutor's funny Channel today I'm going to teach how to make the complete tutorial of laravel and bluejays so let's let's see how to work with the restful API with laravelan view JS first what I'm going to do is first I am going to create the laravel 9 project first we have to install it so how to install it if your mission is let's go to the laravel official website type on the Google this is the official website click on here it goes to the respective website so this is the official website of laravel right so what I'm going to do is here we have to type get started here you have to go to the installation this is the installation so if you have to installation uh what is the operation uh you have you have to select the particular operating system so I have I have a windows so I just click on the Windows right so if you click windows so here this is the documentation explain how to install the laravel programming into your uh Windows machine so you can see here right so here this simple command here right okay before that you have to install the compose right how to install the composer you already studied right okay no problem so so I have to I have I'm going to install wire composer so here this is the compost this is a simple way you have to create the composer create project this is a predefined keywords right larabar larabar here you have to this is your real group can change your name as your project right so I just copy this one and proceed to copy I'm going to go to my read write this is my e Drive so I'm going to create the project right so each I am going to create the project uh project as uh here I'm going to create a project as cool office I'm going to go to office I'm going to get the folder which is office so you can create any name of the folder I just create the foldered MS office here I'm going to inside the folder I'm going to create my projects right so you have to inside the project bar you can see it's a my if you open the folder you can get this address bar your type here CMD here copy here inside this folder I'm going to install my learnable projects okay so what how to install this is the command which you which are going to run in your machine copy it back to your CMD here paste it you can see here this comma you will be able to change your name of the app I'm going to change the path office app okay press enter key on your keyboard you have to wait until your projects get installed okay here laravel 9 project is it will be installed this is the latest version of laravel you you have to wait until the installation completed now your learnable project has been installed successfully here created successfully you have to get this success message info application all the things are success succeed okay all things are success without any failure now now if you go to the your folder you can see here inside the folder here there will be the inside the folder there will be another folder created office app this is the project name I have given so instead of that you can give this is the backend application alarm so you have to give us a office backend okay this is the industrial experience you have to call like this laravel slash office packet uh a backend okay right now here this is a separate folder we have to create this back end this this all things are related to the back end operations okay double click and open it here double click here I have to type CMD here if you are not installed The View if you are not installed there uh vs code editor you must install for vs code editor okay visual code editor visual code this is the full moon visual code editor okay you have to go and download them and install your machine this is a professional manager to write the PHP codes right now let's back to our uh now let's back to our project data right okay I already installed after installed type com you go to your project okay this is your project so that double click and open it inside the project you can see here it's a project directory CMD you have to open this all the folder into your vs coordinator you just type on this command if you type this command code space dot press enter key this is all your folder will be open on the vs code editor right here yes you trust author it's all things are installed open into your folder right okay now we whether it's working fine or not what I did here is you have you have to close all this common front all things I have open it so I just close close it close it all okay right right we keep only one Command right this is installation okay now here we have to run the application we have to run it here terminal here they'll be the terminal window new you have run here otherwise so you have command from okay here also now we are in the office folder okay now inside the office folder out run it you have to go you have to access this photo how to access this folder to type on this command CD office app press enter key now we are in which folder inside this folder right now you will be able to run the command this is the simple way we have run it okay otherwise you will be run it here or here the same thing but I am running here it's simple okay so PHP artisan the right PHP Artisan so write like this here press enter key it generates all the ports and all you will be running okay otherwise if you are if you're if it is easy for you are so you have to go here you have run it on here simply here PHP audition press enter key now here it's Port is generated I just copy this port go here and paste it over here sorry this is not this one okay that of this lines okay this right now you can see whether it's working fine or not your lower level application is working fine or not here it's it is Success okay so this is a latest version It's install successful right perfect after that what you are going to do is we have to make the simple form step by step let's see how to do the step step by step right now what I'm going to do is here first I'm going to go to my if you are not going to watch my blocks uh tutors funny block you just go and watch it my laravel 9 you will be getting the updates we have a if you want to learn about you eight you will be there with optional eight okay if you have a option here okay here let's go to read more you can see here how to develop the credit system I will be step by step I will be attach a video tutorial you will be able to see okay so the same thing here we have created the project I already saw after that what you are going to do is after create a project you have to configure the database okay database configure is must okay so you must use all the Zam server in your machine if you are not installed you must install the zap in your machine okay you have to go to the exam okay this is the Apache you have to install this in your machine right I've already installed after install you have to open it up so again this this one right check I already opened it hide install and open this software right like this okay after after open it will be start start you you click this both buttons start start after that it will be change desktop stop okay therefore all the things are generated successfully here okay then if it if this port two ports are running success your application is running right so after that if it is running you go to the simply you have to go to that log lost you simply type on the address bar low plus slash my phpmyfp type and enter you you are getting the screen now here the screen I'm going to create a new database new simply upgrade the database app office name you can give the press the database okay I have uh I just example purpose I'm giving Creator's office right my database has been created successful then that is the things you have to do after that if the database creation successfully you back to your laravel project again here now what I'm going to do is now your server is running already I just control C here it's telling if you want to stop the server it will be telling press Ctrl C to stop the server so control key order on the control key downline press C on your keyboard your service server is stopped now you will be able to it will be allowed to type the command to create the uh database and all right so now my database has been created successfully now I want to create their tables so tables we have created in here here how to create the database for sure the documentation said change the EnV file you have to give the name of the database right so the follow you have to go through the project along with the documentation then only you have to learn right so we asked again before here is again design you click on the en file what the database you have created you you go and see office so back to your project this is your project you can see there are the section which is a MySQL configuration section is there DB connection MySQL this is the WASP this is the port this is a database name wrote all the things are there here I'm going to change the DB database name as yup yup created the database name is office you already created office that's it that's the thing you have to do but that's the thing we have to do right you just save all right now you have created the database file after that after done the stuff what you're going to do is go back to my document it's simple if you go through the documentation our thing is simple right here it's working after that your table creation you you create the database what is the database have database have tables right database have a tips right so how to create the table you can type this command PHP artisan make migrate create your your table name here I'm going to mention as students your credit name what is the table name shop right now I just copy this one right back to my project here I'm going to cheat you have to paste it over here right I'm going to change this one as a instead of the students I'm going to change employees okay your type is don't forget this one is this must right this is the professional way to case of tape right if I type this take too much of time to complete that's why I just copy and paste it okay don't think me as wrong so here PHP your type space Artisan space me colon migration space create uh create a create here after the tables employees employees table name whatever table name you can give here okay this one only you have to change the name of the table okay the other things are the predefined uh laravel keywords right you don't change this one this all the things it never work only you have to change it you have to give the table name on it right after that press enter key now you can see created migration now if you get this info command your table has been created migrated mean your table has been created okay we have we are you we can find that go and see we ask your database folder inside the database folder we have a tables employee tables you click and drag if you click this Arrow here you can see here there will be the four different folder three different folders are there okay factories migration C does you go inside the migration folder inside the migration folder we have a create employee table click on this right click on here you can see this is the auto generated ID and thanks this is defaulty created if you type this command PhD my Artisan migrate create employee table this is a default table it has been created in laravel here here to yeah here you have to declare your song right so how to define the table Fields so here simply I have typed this one I am going to type all things as string so you type this to all the things right so I just copy and paste it over here okay right so how to type and sign table string data type string so this is not a error this is a double single partition your type is single quotation like this right this is it will be generated this one is not this one single quotation or that's your type like this okay if you want to type and show you here sign table it will be here Arrow key error string okay operator that does second thing is address to the address employee name so address and mobile okay mobile also I have to paste it okay this is the three columns are there right this is the last thing that quotation okay right okay right now we have created the three columns right along with that the ID will be the auto encryption right okay so you can see the Hub function and the down function these are there if you have to delete drop the table you have to call the drop function right so here I'm going to create a table for this one let's out create the table if you are type table never create okay we have to run the your table has been created so if you have type PHP artisan migrate press enter key you can see here table is creating okay here creating now you go and check in your database table whether it's creating or not here ah at the moment is not table is found another moment only your database is name is there but inside your database nothing it's an empty database you have now you have created now if you have refresh it and check here now you have a this following table has been created okay here employees all the things are created but same thing right now what I'm going to do is this all these things are created successfully now back to my documentation now I am going to create the controller okay now our we have created the database and table after that we have to controller Okay so first you have to create the control how to create the controller you have to run this command PHP audition make control here at the first time how to create the migration part the same thing if you learn this one the same thing you have to PHP PHP audition make this time we already controller how to create a controller PHP audition make colon controller controller name your resources okay at this time we know need the resources the keyboard right let's also mean we no need to that I'm not going to uh only we have to view the records only I'm telling so I'm gonna I this time not doing so here just copy this I'm I'm I don't have I don't want to the restful uh resource controller I need a simple control okay so I just copy this one PHP address and make controller only the controller name so here let's back here paste it over here here I'm going to get a controller which controller I'm going to create it okay which which table I'm going to get employee table so based on the employee table you have to create a controller as a employee controller press enter key now you are you can see the success message your employee controller has been traded successfully that's it okay PHP audition make controller right this is not resource not resources controller mean it is degenerated the complete credit okay so here it's a basic let me we will do it in later on okay how to create an S4 controller resources controller now we have learned without resource control okay employee okay CMT controller has been created you can check whether controller has been created or not go to the app folder and inside the app folder there will be the folder which is a HTTP folder inside the HTTP folder there will be the folder which is a controllers folder inside the controller folder there'll be the page cover page name which is a employeecontroller.php like if you click on this one you can see here right it's an empty page right okay so here what I'm going to do is okay if it is a resource control it will be generated to all the methods right here function so here this empty controller it will be empty right we want the generator okay don't worry about that we'll see how to generate right so here the same command the index function will be run you copy this one index function paste it over here how to create the function pH public function Index this index function I have created you can you name whatever you want okay I'll give you the integration it's the professional one public function index start the function and close the function here I am going to load the data from the database we have to load the data from the database right so how to draw the database data from the database you have to give here as right here what's the table you have to create context table employees table you have to create right so what I'm going to do is after that we have to we have to create the models right so how to create a model before that we have to create a models okay it's a mod the model command credit is this one PHP audition the same thing PHP Artisan controller this controller controller name okay if it is a model PHP Artisan May model this is a model name model name is copy this one simply paste it over here sorry this one copy it paste it all here here we have to change this one as the employee press enter key the employee model has been created you can check here the model you say the model employee models they are here here I'm going to create the all the fields right before the control location because the data is coming from the database why are the models so first you have to after controller has been created okay after that you have to go to and create the mods right okay some models so how to create the models but what are the fields are there all things I got to mentioned so here the simple way is all things I have written you just copied your paste it okay don't worry if this all this is going to provide you but you have to understand the step-by-step process this is how the uh model view architectural pH works right so the table what's the table you have created you have to mentioned tables name what's the table name your table name what's the table name employees it has ID Prime you have to go to the structure you can see the primary ID say primary is set up these are the fields okay this is created by the laravel we don't need them this Fields name address mobile so get name copy this one name address they are mobile freezing so I have already again okay these three okay things are there so here feel sorry again okay ID name address mobile right solve it perfect this is the thing we have to do right your model has been created successfully right we let's save all right so model has been created successfully here you can see here the table or the table values you are passing right so name address and mobile right now let's back to our HTTP controllers employee controller getting the data this all the data right here we don't have any data yet okay if the data is available all the data it will be loaded coming to models model and loaded to the controller so how to load a controller you have changed this one as employees employees what's up model name employee so model name employee if you if you type all all the data this all the data will be loaded and passing to here and it is passing this variable this variable here call it as a Json format so this one is a return view we don't need this one instead of that you type this one as a Json format right Json format you have to write its Association from this form right write like this return response Arrow Json context sorry employees okay this all the employee information is loaded and passing the controller here it assigns this variable this variable assigned here it's load as a Json format this is the things we have right perfect okay now this one after that we have to study with the routes okay now here we have done the model spot and controllers part now we have to do the resources not abuse it's a we have to do that routes inside the house if you type the particular URL out to works right in our we already done the laramal credit system using web API so this sorry web.php here we have to connect with the routes instead of that this is the API access so go to the file which is api.php we are right like this the same thing you're writing a the API okay write a wait I'll tell you explain don't worry about that the same thing right okay this is right so here firstly you have to mention your route is is there so your control is where it resides on the app folder you save further Inside the Fire HTTP controllers your what is the control employee controller you have to mentioned we are your controllers website after that you have to give the path okay so routes you said get reaches we have to get the data from the database so it should get reduced okay so get request you have to type employee if you type employee type employees your type employees I have to bring the data if you type employees it goes to the controller you have to give the path app inside app HTTP controller what is the controller contact control this is a contact controller class it is accessible action method inside the sorry employee controller it's not a contact and the employee control so employee controller it has action method which is the index you can go and check this is employee control it has a action method which is a index action method okay if you are calling the Intex action method of the employee control okay he's coming here let's load the data from the model and passing the variable this variable perfect here it's not the data this is how it's it's the restful API box okay right that is the things we have to do it okay now right okay so here first you have to do the path of the controller so your path you have to give here as well if you type the URL like this employees you are passing the information like this right now let's check that it's working fine or not right now this goes to the we have to run the laravel project again we have run it we have to run Bishop artisan so to run the project it's running now here export your copy this one so here anito here that's running or slash your type employees press enter key now what so sorry not time flush API slash employees employee the models a app HTTP controllers app not found right so okay okay now this errors comma you have to understand that what is the thing is we have to what you are telling class app employee not found with the model is not found okay your model you have to get if you are called the model but the path we didn't give so how to give the path your model is reside on the app inside the app there's the models here employment so you write use amp flash models slash your employee that's it that's how we have YouTube models save our now it will be wise right you are the not this slash not this slash perfect that's it now let's now if your type employees now here is blank why it's blank so if you go here and check there is no data is there now let's check the data some data instead go and set insert some name John address India mobile number something mobile number you Peter address USA and some mobile number go now we have two datas right we have to go to the browse button we have two datas right now if you go here we have the API uh okay the API if we refresh it now if you have a John and now the API is working successful you can see the Apes working successfully here it's working successful the API is working successfully now my backend is working successfully APS working successfully now this web API we are passing to that of front-end application view case so let's back to our for this is my backend application here we have a separate folder which is a front end so I'll create this one see how type CMD right so firstly you have to install the view okay so how to install it simply you have to install using this comma npm install G View CL right you also see a light like this okay you have to use like this is this command uh otherwise so if you're run running Dot press enter key sorry space okay so we have to wait so we are simple you are getting the command go to the uh View JS install so type view JS installed you have to view JS installation CLI your paste on this comma copy and paste paste it on here okay okay it will be you have to you have to wait until the comma process installed now my backend is working successfully apis working successfully now this web API we are passing to the front end application view case so let's back to our for this is my backend application here we have a separate folder which is a front end so I'll create this one so you have type CMD right so first you have to install the view okay so how to install it simply you have to install using this comma npm install G View CL but you also see a light like this okay you have to use like this is this command otherwise so if you are run running Dot press enter key sorry space okay so we have to wait so you are simple you are getting the command go to the uh View JS install so type view JS installed you have to view JS installation CLI you're based on this comma copy and paste paste it on here installed right now it installed successfully now I'm going to create the app so you have to type this one view init webpack here I'm going to create the name of the app so I'm going to create this my app simple I get my app press enter key on your keyboard unless you can type over here the front end okay project name you can use any name so I'm going to the name office let's go to the office for project description if you want you can give the project author also you can give uh okay name here you have to select as here runtime compiler press enter key uh installer view routes yes okay yes why this one also y yes you have to select as a standard press enter key yes select here you have to use the arrow key on your keyboard okay you have to put a karaoke okay on your keyboard here press below okay this one Karma this one it is on select and press enter key on your keyboard yes Night Watch yes press enter key mpm yes default is selected your right angle the dependency installation is complete now your project has been created successfully your project you can check here whether it's created or not uh if you get this success message project installation finish you can see here my app it is my front-end name okay my app you can give here the front end it's a backer if you that is your wish these are my front net application is a backend right so here we have run it on CD your type Maya this is my project my app my app press enter key outrun the view JS so npm run Dev press enter key now your project is configuring and running okay so it will be configuring in your machine now it will be running here this is a port plus Ctrl C to copy this one this is a printed application go over here paste it on your browser address bar over here press enter key here it is successfully working okay this successfully work right this is your welcome screen of the view JS now what I'm going to do is I'm going to open up in my vs code editor over vs bootjs right so this my app this is my project which is fronted the application here type CMD your configure into my vs correct space scope now here this is the Fault structure of view JS so you can see here this node modules are the isrc so index.html this is the main file here it will be configured and running this is that's why it's calling as a single page application vue.js is a single page application here there will be the divid app it's called the app so we have a Pista let's reside on the SRC you can see the app.bjs it's configured the app and it will be load right so ATM loaded it's called to the go to the index Dot yes this is an important fight this this is this file it will be the route configuration okay it's first it will be set the route as you can say hello world what is the component here said it however component right so the all the front-end application has worked as a component right so here where you can find the component you can see the separate folder it will be created in viewjs right so it will be this inside the compound the welcome Pages they say hello view hello worldview this is a home page is running right this is a home page is run so here what I'm going to do is I just go to remove these things this are not least uncontrolled remove it now control is to save you can check the output here the output is working fine okay this is this is our application is working right this application is working this is how the application is right so here we have to run at the this one this is the styling path let's remove the styling part as well we're going to save write this dissolve The View application is fun okay this is out there this is a few applications right so you can see okay now what I'm going to do is now uh I'm going to do I'm going to create a new component right so this one that's okay new component this one should be the component should new here this is this component I am going to give the uh correct the current view records anything else correct otherwise I'm going to create an opportunity employee View employee View this is a computer I'm going to create employee with this component their name is employee view it's nothing used to be there now what I'm going to do is here I'm going to the routes here I'm going to set the route as well so comma copy this one and paste it over here so here if you come the request as him low EMP view if you type if the request is come EMP view so type EMP view I'm going to generate the employee view so you write this the name is you have write the same name employee the same thing kind of seed copy conversation account right so without telling here components reside on where inside the compounded folder you have to name the compound so here also import this one copy and paste it over here my components say employee view so you're right employees the same thing employee name say employee right that's it Ctrl s a bar that's a new component this is your new component right for your new component this is the hello world program just copy and this same thing control bit paste over here here I'm going to change the things as I just something this one should be the employee view your change the name as employee view this component is employee view component it's not available right so let's relax you have to save our go back over here type which one uh employee EMP I have what's the name here EMP eror here what's the name you're typing it will be producing the output employee here next view what's the name your type it is it's working now let's set the bootstrap so go to the work order and type bootstrap implementation bootstrap implementation so you can go here over here get the bootstrap files and paste here so yeah this is the CSS and yes are there so this is CSS file you just copy on that back to my project you have to paste where you have to paste it you have to go to the index.html inside the attack your patient over here that's it that's the thing you have to do you have to work right so after that what you're going to do is I need one table so bootstrap table then only we have to copy and paste the bootstrap table go and type uh you have to type the bootstop table go here get one of these one of these I'm going to get this one it's a beautiful one I just copy this one paste it over here pop it back to my project right paste on this one inside the due tag right so let's save all and back to your browser and check what is the output will be it's working but the right it's working now it's working the style is happening here data is working right now I want to call the restful API so how to call it right so this one I am going to time it as ID your changes this one should be there name dot called as employee name employee name this one should be our address this one should have mobile you know not an easy mobile recorders mobile that's it now what I'm going to do is this this is the field you have changed to save all you can check here here it feel that changes successful is adding now if the data I need only one this one this two things we don't need that only the one right so let's save control let's save you check right now here I'm going to to the loop right so here data you can check right so let's connect with the restful AP so what what to do here is your application is running now let's uh open up my this is my front-end application so this here is this is my frontal application folder right so yeah I'm going to open another command prompt here because you can work with this terminal as well but instead of that the front end if I work with this one you see it is it is working easy okay so I work is fast so here I am going to if you access the restful API you have to use it you have to install the xcos okay so you have to download them in excess yes you got right install right npm install right so you have type npm install Excel Cs and this one view access right.com npm installed and this one right so type this then only you will the you will be accessed there foreign if you are not install this dependencies this called as the solar quarter strip dependency because this is very much if you have installed these dependencies right now it will be installing successfully now what what I'm going is now back to my project is my project now let's what I'm going to do is I'm going to relax at this line so here I'll be excellent.org equal array here we are that record is displayed okay inside this compound right so here we have to create this one over here if I need over here right after that what I'm going to do is I'm going to go to write this code created and I'll be explained don't worry don't worry about that I'll be explained okay if I write it out it should take too much of time to complete it right so based on it right now what I'm going to do is here I've just I'm going to go to this one I'm on only this one also right load tasks right right now here employee load I'm going to change this one as employee loads employee load I'm going to create a function employee load I'm going to call the function over here it will be running right it'll take right now what I'm going to do is this is the section this is the this is our template this is the design section this is our logic okay if you write the course only here the two files are managed over here right so this export section say employee username it's a data so here the result is displayed over here restart here right like this so here comma you have to write this one it's a data after data function function create that function inside the function we have to call this one this methods okay we have to call this this function okay you can write it on here if you if you do it a separate one it's a professional one okay if you are right and separate so here comma you have to write a methods colon here to start with then close it over here method you have to start it and close it but hey motherly started you can disclose it by here right now here we have to create a separate method employee load it's open up and close it here we have to create a variable page okay we have to load up the this API employees right so here this one we have to uh run our we already have a View application is running here okay we are View application is running okay so it is I I already tested this support right so where it will be uh right okay so here how to test support here whether it's because it's coming or not so the same thing uh but if it is this one the same book right that we already tested this this same power to copy it and paste it over here we already hit the same portion 14 pages so here this URL this is all coming here like a Json format is the output before that we have to write the exercise right so we have to write it as this like this let's call the exercise right so they import the stuff then what it will be work otherwise the restful AP is not working here inside the script you have to import This One Import your right import View EXO is this one right you have to this one you have to import it over here then only two others it won't work right save on right that's the thing you have to do it right so the same record we are passing the data into here inside the body right so what I'm going to do is test uh let's do the things you just copy and paste it I'll be explaining it don't worry here right we right we are test right this ID all right here we have to name it as task right okay now what now let's explain right now let's check whether it's working fine or not let's save all yeah go to our office here employee the record is loaded successfully it's loaded successfully but we have one uh name address right mobile what is happen mobile is not working why what's happened right the mobile I am not plotting here it's your name as mobile now let's save and you can check now it's working and I'll be explained right so here what I did here is I hope we just write this code here is first this is the default one you have to inside this return you had called the recharge after that comma you have to create a separate function right this created function right this created function we have to call the method this load method okay after that comma methods inside the method we have to create the separate function employee log yeah what I did here is stage wire this is the API access your data our API is here my data is in this API okay if you upload the server you have to view the server Port over here right xocs got your call this page then data you get the data console.clock you can check the console.log after this dot resolve.data you'll pass the data it will be displayed okay it's where it will be displayed you are calling this get the data it will be displayed one by one turn off here ID name address and mobile now you can check it whether it's coming or not here getting and checking how the data will be displayed for the console this is the vs code editor warnings right small problem so you can check here though there are this array you can have the data is coming your path this data is coming like this okay you can pass the name mobile name just name your pass it out over here this result which is this result okay what are the records it will be there it is connect this result this result you have to pass in the task to task dot ID name address it is printed out it's Loop it so Loop this is the this is how we have write the follow this result mean this result okay this result we have to this function all the paths into this inside this result that's why at empty it is passing in this result we have to call it over here and we are passing the follow with one by one it will be displayed how many record is there it will be dispense of the output here I hope you guys you understood that hi friends welcome to Q Plus funny channel in our last class we saw how to view the employee records from the database right so using laravel and view JS so here now what I'm going to see here this is a Blog is showing on uh viewages I want to hide this logo here I'm going to make the simple attractive registration form of the employee so first what I'm going to go back to my project uh my new project here go to the this is my component employee component go to the app Dot View compound here where logo is coming from here this is a template app compound this compound is first loaded right so it's loaded with along with the logo I am going to cut off this logo this line image SRC assets logo PNG just this online language backspace to remove them now save all and back here here your logo is gone now I'm going to make the simple attractive login form right so how to do the task is is simple go to the Google and type bootstrap form type boost cap for press enter key if you type on this you can come here in this place so here click on the forms now this forms to get one some one thing is okay this one I just get it this phone copy them come right click and copy it back to my uh application here so go to the my component we ask my component employee view this is my component right this is a view page I have this design but this is my template inside the template we have to do my design right this is my table above the table I'm going to paste my form design right so here I'm going to paste the design over here right paste it here I'm going to type the ID the setting copied paste over here so I'm going to name this employee registration yeah this employee registration right now let's save all and check whether it's fine or not okay it's working here it's working now what I'm going to do is here I I'm going to remove these fields I don't need them only one field I'm gonna take it and I'm going to this all things have been known in them I'm going to get rid of this one label only the label we need this one no need that label this one I want to change the name as this one as a employee name okay so write employee name right that's the thing here this one should be not a email this is a text so it is text that's it this one I need no needed this one only the keep few of you if you need you can keep the place order right that's the thing we have to do right the same thing the same design I just copy and paste it copy and paste it below all right now here this one should be employee address right say address this one should be there employee uh what is the things mobile so mobile that's it that's the thing we have to write okay right now let's save our and check whether this form is correct yeah it's working right the place order only we have changed this one com copy and paste it over here employee name his employee address copy and paste over here this mobile copy and paste it over here Ctrl save all you can check it's working fine now what I'm going to do is if there is instead of submit button you have to make the decision save it's not submit button save perfect right now what I'm going to do is another important stuff we have to make the two-way binding right two-way binding if I import the two a binding method over here so how to import the QR web dual binding method if you type something here employee name you have to stop so we have to write over here V Dash model on wheeljase V Dash model equal model equal the name so you have write task you have write the some variable right what are the way you can create any area right here I'm going to create here employee say employee dot name go to name right these all the things we have we have we need to create so the same thing task this one copy it the same thing you have to paste it over over here as well this one should be there employee address the same thing copied paste that below this is an employee mobile like this variables we need to create below right so that's that's how the two-way binding works right so what I'm gonna do is after that we go below I'm going to create the variables now I'm going to create this variable right so I'm drop copy this one name employee the same then the same name we have to create below you type here result after restart your PC talking employee colon open bracket and close bracket here what I'm going to do is this variable you have to take it right what are the variables you're declare first one should be the ID say employee ID right what are the columns available we have to it's like all the things we need to create right employee right so colon you have to right it will be stored here okay it will be stopped when you type the variables it's stored here employee name second one should be there uh second should be the what is the name employee ID employee name address and mobile okay so first this is the API API you'll get the API first API slash save so APS slash uh what is the name employees right there uh APS mask right the right so here this one ID name this is a name right the same name you have to give name address whose name okay name colon after the comma address colon comma here we have a mobile colon to write like this okay perfect now what I'm going to do is bin bin someone type on this text fields employee name it will be stored over here this name this employee name as well right that's the thing first you have to do it okay after that what I'm going to erase I'm going to uh creating other things yeah after the methods we have to create the functions so I'm going to create another function this is save okay the save function I'm going to do two different things one is ADD records another one is update record right later on we do the update record so first we have to inside the save method I'm going to create another method this is save data save data because we are do this uh add and edit the same form that's why I'm going to make the two different functions over here save function and save data function so save data function you have to type the exocius this Excel CS this one right this is the save function right so simple first I'm going to get this one at this time when you save the record not get value it's a post value you have to post the value first here we have write the same request your type over here only the thing is here right here we can write double quotation as well it's no problem our question mark here slash here uh employee not a employee this one should be saved if the request is coming from the data APS shape account need to be saved comma which record need to save this dot employee employee it's not employ me this employer course is all the records it will be when you type the when you fill the form this form when you fill the form if all the record will be this form fillable it will be stored in the v model V model to Y binding it will show here and if you call this one employee restore template all the component will be yep it will be go to the same right so after that what you are going to do is after that [Music] but I didn't after that bracket Open Bracket close okay after that you applied bracket to Open Bracket close here you have right uh Open Bracket close bracket hit data the data look like data data plug right here your first message as alert good for Save foreign controller section employee control here only I have written on the index function it will be returned the Json view will be getting that API like this now okay what I'm going to say I'm going to store the data so whatever I'm going to explain it okay don't worry about that copy this one I paste it over here see as simple as I'm going to create another function public function store we have a request the request values what are the value of uh through coming from the coming through the post method it's request it will be getting the values right getting the value we have a employee say employees here this one should be employed table okay it's getting the value it it is passing deleted setting to the these values are setting to the models like this right this is a name address this is a mobile it's mobile right so what are the apis the same thing same field should be here we have set this one this values are coming here store the same value we will set it here it will be Insider right so it is not interested first you have set the value and put it in the vary by employee write this employee variable after that the same variable we have a free defined method which is same in laravel it is called call the value our data will be saved the database right employee creator but that's it the simple stuff do but it won't work but we have to we didn't give the route go to the API here the section you have to copy this these things paste it over here so yeah this one should be there employees this one should be there now templates same so save what's the method store if you type the same effect like this it goes a function stop that's the function this is store function store function what is it will be inside the platform into the database that is the stuff it will work right okay that's the thing it should be work now let's go back here right so here it's not work now when you click the button it's nothing not working right now we have to do some things right so what to do is after that we have to this we have to call this one as a in the same method we have type this Dot save data you can call this one here save data after that in the form when you click the when you click the button submit button the submit button it goes to that form we form the form right the form you have to go to the action method form right so we are trying to submit you have right how to write the view JS you'll write like this at you just want to add submit that submit okay to add submit right at submit you have to add submit dot prevent you're going to prevent the uh reload it okay just save save function right if you write like this it goes to the submit if you click the submit button whatever this goes here and it's called the function save where the save function is there the same function is here it goes to the function this function let's go to the it will be complete your request every success it will be success Magic right now let's check and something address mobile number under type save uh not working let's impact you can check here the element the requires something problem but now if you get this result we just go to the Lara it's a laravel program go to the Lara social laurable API all right the problem is here post not get we are posting the value to save right so let's go to the function store right so let's save all and check it again right now I am going to work it here and address USA mobile number something like that click save button again go back to our laravel this is if you get the error if you will be learned but here the this one is correct save store function score store function something here all right this is the mobile okay nice that's the problems I think I hope right now we have to change the name also same right that's why the problem is happened now let's again you have to right employee and address u s u s a mobile number something like that click save button share Save Right This is how we have find the error and do the program right so that's why I have uh do some uh do some troubleshooting part right so here if you are if you work with the while by the errors come if you have sought out how to sort out the other hand everything I will be include this video right you have to go through and if you have any problem with the URL just go to the routes if your route is correct or not okay if you go to the routes the route is not correct it worked it won't work right scores check the API browse okay after that if you try out is correct then if it is not added the record in the devs your check with the the function the function everything is correct or not that this is how we have so all of your errors thank you for watching if you have any doubt you let me know that in my next video tutorial I'll be teaching how to edit the record and delete the record right thank you for watching hi welcome back part 3 tutorial in this tutorial I am going to teach about the edit part so here this is my project office I'm going to this is my uh front-end application this is a back end so first I'm going to open the right first how to open them you see this one I'm going to open it CMD code space dot okay this is how we have to open it on the vs code right if you are close it and again open it you have to open it right CFG right okay first what I'm gonna do is we have to do that back end part okay now here this is the save part we already done in our last video now I'm going to do the edit part so first what I'm going to erase here I'm going to this is my api.php here I'm going to copy another URL so that is that that is the one here is a edit part so how to do the test case which I already done it so I don't worry I'll explain it right here paste it I'll explain it down here if you retrieve the record from the database you have to use the get method so this this one should be the load the data into our table bootstrap table if you save the record without use of post method if you update the record you have to use the put method right instead of that we are implementing we have to using the route resource so we will later video will be explained uh avoid this for function we will be instead of that we are using resource first you have to learn what happened that's why first I have to learn this one this thing very much if you are request put up after slash this is the ID you are passing the ID of the records right so it's also the update method this this update method the Contra contact controller update action method right so what I'm going to do is you go to our not this employee controller not the employee controller update action method go to employee controller we have to defining the method so we have already created I will explain it so we have to go to these two methods okay one this is so so function I don't worry I'll be explaining it second one is update function all right what is the meaning of show function if you are type the ID slash ID we learned based on the ID records will be shown okay so if you want to find the particular employee employee ID if I enter the ID as1 the matching record will be displayed so that's why we have a show function right so if you need you can get them so here the update part is coming the update okay so request data we are posting data from there okay uh front end so get the request get the data along with ID so here it will be finding the ID and passing the ID that the information will be getting from there which one this employee uh wanted right because I already thought the controller is communicate with the model and get the data from the database it will be control will be passing control will be communicating to the model and get the data from the database right so this employees that's how we communicate the data right so the employees passing the data into the variable variable employees is getting an update all the employee data so here my record my message will be passing the employee updated that's how it worked but that's how it's working okay right so the front end will be doing all right okay so what I'm going to say I'm going to go to open the front now here this is your front end right front end uh employee view so here I have designed employee view so here we have made the registration form so the same registration form we have to do two operation manager save okay so what I'm gonna do this here uh here this is our table right table as ID name address and mobile now here table I'm going to just I am going to name it here as option and I'm going to make another column option here also TD this one also I'm going to make the columns like this column foreign [Music] this one right so I am going to make it as a edit Parts this one you can get any one morning I'm getting this one has studied part and put it the button right sub button okay when you click this button so it goes to that now I'm going to change this one as a edit so on and right now with the same button I'm going to put another button this one should be there delete button and this one should be a danger but the button style I'm going to make this then yeah the bootstrap Style right now let's save after save we'll check will run the application after Stuff how to run it that's why I will be again I am I'm running the application this is your folder uh this is your backend this is your front end now here go over here the address bar type here again you have to open and run it so you have tried to command again here in pm run Dev okay press enter key you have to wait it will be running okay the server is running now it's it will be running so you can see the port as we already showed the port right so 8080 right so here go you have right have it a fourth 88 now it will be running now let's go to the go to our component what is our component we have created pmpv here if you forget this one the name of the compound here go to that uh file this this one route index dot here what's the company now if you open up the view section you can see here the button should be display here edit and delete we already see here we have changed the button here we have given the button name over here right so the edit 10 button uh you can see here right now here if you have click edit button This editable Record should be display on this phone so how to do the task we'll see right now let's back to our page so here I'm going to go to go to uh do here after this one right so here I'm going to this button I'm going to make the event on click event I'm going to make the on click event if you click you have to type add click if you type R click equal edit task right if you have click on this particular button it goes to the event edit event so edit event is save is start here close up here so here now what I'm going to do is above this save okay this one here I'm going to to do the edit form right so you can uh otherwise you can do it here as well okay if you haven't conclusive eight function you'll get edit function edit this one to task uh we have to square this one not task we have to do this one as a edit employee the employment is the employee you get all the employee details right so what I'm going to get a det employee here you have to type edit employee open and close bracket so you have type over here as distort employee equal employee so type like this right here we have a type like this when you click the particular Row the record should be displayed on the phone now here after that I am going to do the simple modification here this all the things of employee so this employee you have copy this employee name so here this is a result or this result what is the result you are getting your display here this one is employee all things are make it as employee for Loop employee this also ID also employee ID employee ID employee name employee address employee number your changes like s the same as it is will be coming here along with if you click the edit button thereby but the record will be displayed along with the ID okay this ID also coming from here what is IDs there right now let's go to your front and it's there edit beta here the all the records are displayed what is a row your click on okay successfully it's working as it is right now what I'm going to do is here I'm going to do the editor edit stuff right so what I'm going to do is uh uh without wasting a time this update but I just copy and paste and I'll be explained don't worry about that right so I just copy this one this code uh basic over here I'll be explained don't worry about that right let's say the same save code write the same save the edit after they did the here are the basic View if you open it let's close it right so you have to create the function update right this update function you can see here you have create the variable URL so whatever variable if you want to the problem edit records whatever like this same URL opacity right so here what I'm going to do is here here I create a variable edit records here we have passing the URL right this is the URL we are my uh this reporter API here update this is the API going to update the record you have to create the API like this right you have create the API like this update Plus right the ID what is the empty this this one should be the employee ID the employee ID for say employee uid you are select but when you click on the click the edit button it the record will be displayed along with the employee ID the employee IDs will be there so when you are when you when you modify the records and click right will uh do the things right don't worry about that right so after that you have to access yes put this edit record here with this this employee task this employee or the employees that goes along with this employee right so all the record will be displayed it it will be updated right so when you call this URL your ID this particular air plus what is your this one yo this all the this all things have we have from B model B model we have set this name address and mobile so we are simply write here as this dot template so all the things are there it will probably right then data has to update the record which will be clear all the forms here you have to you have to clear you have to use like it's black uh here we have tried this one as a employee this one should be uh this does this Dot uh employee employee name this dot employee address dot employee mobile so clear all the feeds okay gotta clear up all the fits right here this one this fits name address mobile your table draw the fits and ID so direct record updated task loaded mean the table loader we are called this load a table this table open Cloud method table load is not done the employee load but call this one employee load whether it will below the table that's the thing we have to do right that's a simple stuff we have to done right okay now let's go back to our uh controlled this is a controller okay here we have the we have we already we have created the this one update we have over here when you click this button here if you change anything else click button again we are not set we are not set at the validation part right what happened is it's coming to the edit section get all the requests all the requests mean here in front end this API request is coming here along the data it will be checked whether all the data is coming so all the data is coming coming and your city API API is running right this this port here right so it will be updated that's how we have to do the update part right this is this is the Json it is returned right after output as a Json form that's how your get the ID okay your data and get that data and get the ID mean this one okay this is the URL this is a data this is the URL here this is the URL the socs this one should be the your data this is the URL is coming okay this this URL along along with your ID so it's coming to here data and ID it's find the ID and update the particular of the record that's the things it will be do the update part right now let's check out whether it's working fine or not uh before that we have to do then a simple modification now let's go to the save section this is sales section only save record is there now what I'm going to do is here you have to write the edit part simply I'll write this code employed employee right right now what I did here is when the employee clicks if the record is not available if this employee ID is blank okay if the employee address does not exceed okay now it will be working the same data if the record is accessed if the employee ID is available it will be go to the update data if the record is available if if there is no if it is a new record we are fine like this in viewjs this employee ID many ID will be unique if the ID is not if not available it is updated it is not the recordable save if it is already record it will be work as a update data okay let's see how to do that right let's check whether it's working fine or not save all back over here click get it now let's change the values right so here the click John I'm going to apply Javon uh Adams u s c you can see the beauty of that if you are change over here you can change itself so if you change the names you can see the mobile number one two three here it will change this is the two-way binding method this is a beauty of the front-end application the true way if you change anything else here here you know it's a JMK if you remove that again type Adams here it works right now after that click to change anything click save button Now update that record now okay now here it will be updated successfully right this is how we have updated now if you want to update this row click on edit if you have to remove the stuff here it will be removed instead of that I am going to type one two one two one two one two one click save button now if you update it now you can see it's updated right this is how we update the record I hope you guys you understood things well if you have any doubt on this you can ask me anytime thank you for watching I'll be get in touch with my delete part in my next video tutorial thank you for watching hi friends welcome to tutor's funny channel in our last class we saw edit the record in this class I'm gonna teach how to delete the record if you click the delete button entire row need to be deleted so how to do so first we have to go to the back end part so okay back end first I'm going to go to the routes routes API section here I'm going to make the API sorry API section you have to make the route delete drop so a delete section you have write like this delete if if you are coming delete space delete okay ID get the particular raw ID and delete the entire row right so the content the controllers folder reside on here it's a destroy method if you are click it scores for the destroy method right so destroy method we are creating over here in the employee controller here I am going to this method open paste it over here public function destroy what is the ID coming on the routes the delete scores particularly along with the ID so if you call a destroy method uh it's go to the employee controller get the ID destroy method here they said what is a query we have currently employee employees here this one should be the employee table right it's a model employee model you find the ID and delete the entire and the this one should be the employee deleted we are called employees this is a thing this of the programming works pretty simple right this of the program works very simple right now the back end is finished it's a simple thing only the first you have to call the uh how the process run first you have to write the routes after that we have controller we have defined like this after that we have to go to the back end port we have to save our make sure it's save or then all it will be applied uh what was the problem foreign the problem is it like two times I have copy this one so function you're going to paste it over here right okay we have a employee employer change the employee simple you have to be careful right it's very important stuff right this goes to that uh destroyed right so after that what I'm going to do this I am going back to my view here I'm going to after that delete data is a data I started here this one here it is closing here here I'm going to get that when you click the remove button here we have a conflict method here copy this one same thing copied we have two basic over here uh what is employee why what's the problem like this one at copied difficult here right this one should be removed here I'm going to change the name as remove right now here what I'm gonna do is here I'm going to the function you have to create as remove function I am going to create uh you have to here this update this updated starting here closing here here I'm going to create this remove method let's remove method cry all done sorry get this one remove employee right now here you can see here when you click the remove delete button it's come to the method which is a remove method coming here it get the employees remove it right so here here uh let's test out this employee ID but it's working fine or not I will explain it right so let's save our let's back to the front end click delete button uh message display but code is not uh right the problem is here the URL problem is coming from here not the front end part it is uh the route the route there is a problem so you are a problem all right this is not contact control is it employee control right perfect the controllers you must this all the controls foreign [Music] right now if it is a problem with the front end it will be error will be getting right so here it's nothing problem so I am going to delete this row click delete button press enter key now let's refresh it is this paper click delete button right now I want to after d that I want to refresh the record right here you have called this one this employee load is function your code right now here if I delete this record click ok now here it's loaded right I hope you guys will understand now I'm going to create a new record is uh Raja and of India mobile number something like that click save button record sale you can see here right now if I refresh it here newly create record will be there now if you click delete and if you edit you will be able to edit the record here click save record updated save everything is fine right if you click delete it has been deleted right so here if you click delete right now let's do that quick way yeah this save data as well when you get the same method it will be here load the database here in order to delete the record you have a two two ways this is one way one way you have another way you have to commentate this one this is another way URL this way also you have to study whether if this is not working some if you put it there some Styles inside this function uh the confirmation CSS confirmation okay you you go and type the Google the bootstrap CSS confirmation uh sometime this code is not if you put this code inside the confirmation box it's not working that time you can put this code it's working but both the same but the problem is on here this one this is simple your output where you get this one you said this here is above the Tab Key you can see this symbol okay above the Tab Key open and close the symbol inside the simple you have to type this one this is a URL API deal URL this is ID variable the same thing but you have to put like this that's it that's the thing after the same delete function this works right save r back and check delete record delete action fine I hope you guys from the understood my tutorial well if you have any doubt you can ask me anytime uh I hope you guys will understood stuff the same track application I'm planning to teach in angular and react okay out the front and communicate with the laravel and front-end applications right that is very helpful to develop your industrial skills in learnable project right thank you for watching these are the industrial standard I will teach you do the program

Channel: Tutus Funny

Views: 14,372

Keywords: Laravel 9 Vue js 3 Complete Crud Application, Laravel 9 Vue js 3 Crud Application, Laravel 9 Vue js 3, Laravel Vue js, Laravel Vuejs, Laravel 9 and Vuejs 3 project

Id: 2U_wLxMCgGI

Length: 94min 16sec (5656 seconds)

Published: Sat Oct 08 2022