Laravel 8 + Vue JS with Vuex Crash Course using Element UI - CRUD in Laravel 8 with Vue JS

hey guys welcome to my channel so guys we will be doing a card application from the scratch using laravel your vue.js and your view x so guys we'll be learning in this series like our core concepts of our ux that is your state getter mutations where actions modules everything okay and we'll be using advanced application structure also for this our ux so guys now let's begin with installation part from the part one so yes guys let's go to a laravel documentation and you can install this wire composer to install this application you need to have a composer guys so please make sure you install the composer let's go to our htdocs under xampp folder let's open a git bash or a command prompt and paste where i want to change this application to laravel view and hit enter let's wait guys to get installed okay so the folder is created guys and this is the application but it's still installing so let's wait to get installed fully so it's successfully installed and let's close this let's open in our editor guys so guys now let's open our terminal and install our view in a laravel application so guys for that you need to install a laravel ui package so composer require laravel slash ui hit enter so guys it's successfully installed now and let's install the view guys so php artisan ui space view double hyphen hyphen hyphen auth okay and hit enter so perfect please run npm install and npm run dev first guys let us run this npm install so npm install okay so let's let's wait for this to get installed let me just make it to full width okay so guys and we have installed successfully so this after successfully in npm is installed then we are going to install all the views libraries and its packages so as for that there is a single command so let's install at once so you can just copy this and paste and hit enter guys so it will install our view compiler view loader view router view x and x use and view x use all the things so let's just wait guys to get install for this okay so you can find that all set and now guys let's run the npm run dev and pm run dev to set all the things let's see okay so it's building it guys so guys you can see that laravel mix it's already compiled successfully all set guys and you can execute the output now so once if you get no error and all it's all set so now guys let me just minimize and show you the package.json file so inside this you can find all the dev dependencies as your loader router view x compiler sas loader everything and your x used to so guys now let me just close and let's run this so let's go to our folder and open the git bash guys or else if you're using command prompt not i should just serve it so php artisan serve hit enter all set started let's go to our google chrome and just start with the localhost 8000 okay so done guys and now let's see the example of vue.js so let's move first step guys let's go to resource where js inside this js component component you have an example so we want to view this example data this is view so guys for that you just need to set up one simple route let's go to web.php and copy and paste let's create a bleed file with the name example okay because we are going to do the example component let's move to views and directly create the file guys example.blade.php done and for designing and all you can just use that layout so which has all this header footer everything okay so we'll be using this let's just extend that at extents where you will tell layouts folder app.php and let's i mean call the section content and end section inside this we will create a div tag where you will give a id is equal to view hyphen app done now this content is coming from your extended layout okay so inside this you are going to show the output so with this id how are you going to call you just need to go back to your component and this example component is called in our app.js file okay so you can see that your view component example and which is set over here okay so if you go to this page you'll move to example component okay guys so now you just need to change over here make it to view app so it will be clear guys so you are setting that new app and this will this app.js calls in a particular id so how it is connected this is all it's handled by the level so you do not need to worry just create the route and over here i am going to create a route with the name example guys so let's copy and go forward slash example if you give perfect but you did not get the output let's see why we will start the application so your artisan is already start but your view one we have to start so for that guys npm run what you have to give so let's enter and here guys it started so now let's just wait to finish building it all set guys it is shown as build successfully let me just show you here it is built successfully guys but over here you are getting an error so this is toast error that alert error so in my system it is not set so it is showing like that okay so now guys let's go to our web.php and copy the route and let's see the output enter okay so we are not getting the output let's go back so now this id is also correct oops we have not called the component guys so you need to call this example component inside your example blade file so for example here in this you can see they have set it okay so let's copy this because the same example component we have to call you can just make in this way that's it guys so this example component make sure you register in the app.js at this place so that is the thing we are going to show okay and now you can see the output refresh perfect so guys we have successfully executed the view x i mean vue.js and laravel application so yes guys let's continue next applications how to set up and create a student cred application in view js and view x and now insert the data into our database using view x okay so guys now let's get started so first we need an some demo to create the cred application so as we will be starting with the student data so let's go to our laravel application and let's close all this so first step guys let's connect our database let's move to dot env file and this is my database laravel view so copy and paste that so database connection set now guys let's begin with creating the migration model and controller for student so php artisan make colon migration create underscore students table hit enter yep created migration let's go to database migration where you'll find at the last the students table and now that let's add the fields over here of string where we will tell the name and the class the section and his email guys okay let's add one status also over here so is he active or not active so you can use tiny integer so tiny integer and by default we should make it to zero so let's add zero all set now guys let's migrate this tables php artisan migrate so all the tables got migrated guys over here as you can see so now guys let's create the model so php artisan make colon model i want student model okay so just create student let's go to app model where student.php model has come now guys define or assign the table is equal to where the table name is students so let's copy the student and call its fields so dollar product dollar fillable is equal to the student name next is class the next was section and final was email guys and one was status done now guys we have successfully set up the model and now guys let's create a student controller so php artisan make colon controller where i want the controller name as student controller hit enter created so you can go to http controller where student controller is done now guys let's create a function so first we'll be creating the data so let's use create function and inside this let's return view where i want to view the data oops public function the data okay so student dot form so let's create that so go to resource views inside views i want one student folder and inside that student folder let's create a blade file with the name form.blade.php all set so now guys we need to create a route for this to call the form page let's close let's go to routes web dot php okay so route colon colon get method where you'll tell add student with the controller that is your student controller colon colon class and to the create function okay so import the class guys all set when it goes to create function it moves to this function and this will take you to the form blade perfect so now let's let's extend we are already having that app.played.php while creating the view auth so let's extend that extends layouts dot app and call its content section content and end section now guys over here create a div tag where we want to start with the view app okay view hyphen app so this will set up the view file okay so over here we are going to create the student form okay so let's tell student form hyphen compo nent open and close all set guys so guys now inside this i'll pass some things so which is like we are going to do all the work inside this one file like edit show and create okay so within one file only we'll be doing all the tasks so for that guys let's give us code is equal to double quotes we're open and close dollar seo pe scope okay and one id also we need to pass give colon id double equal to where if there is a i data so you can take id else it should assign with zero guys now this data should be passed from your controller so you can just copy this scope and get back so where you'll pass with the data is equal to open and close bracket where you will tell seo p scope okay so this is the scope you're taking and inside this you are going to assign create value and let's take this data and pass into your with function dollar data so in this dollar data you are taking the scope copy the scope go to the form and paste that over here all set guys and now let's create the component so we are going to start with view now so first up guide let's go to resource where js inside components we require one folder with the name student okay so let's create a file student form compo nent dot view okay so guys now let's set up the view things over here so you can just copy from our example component given by laravel okay so let's copy this and just paste that full thing done so we are not going to use this bootstrap instead we will be using uh element i o bootstraps okay so we will be using this element dot io so just go to the component and you can just install this so we are going to use this user interface so let's install this package okay so guys we have successfully installed this let's see this plugin is installer i mean package is installed or not let's go to package.json where you'll find element.ui okay so let's close this and yep now guys we will be starting with here you can search for the card and many other things so this is a basic card let's use this let's remove the start with div open and close where element card and close element card okay so after card we need a header let's go back and here it is so let's copy this okay let's paste here and now guys inside this let's use element page header so element page header inside this you can just type at back will be go back function and let's give the content where you'll mention just use backtick guys over here it's backtick below escape button and hyphen dollar open and close curly brace and the thing you have passed that is your seop is scope so this scope is coming from your form blade file so over here we are taking this scope and pasting here all set and now guys let's create that body let me just give a div tag over here and from here we will start creating the form so for that let's just give right now form only to test it and the name component here will be a student hyphen form hyphen component and now guys let's copy this and register in your app.js so you can just copy and paste let's take this student form component which will be your let's remove this till inside components folder i have a students folder inside student folder i have a student form component so let's type student form compo nent dot view all set so make sure this thing is same as your blade file form component okay it should be same as it is and it should be linked with the view app in your app.js so whatever you have over here that should be in your blade file all set guys and now let's go to web.php let's copy this url let's move give forward slash and paste i hope no output will come perfect so now guys let's npm run watch so let's let's wait until it gets started so that it's successfully build and now build successfully let's refresh once again and you have got the output perfect guys so now guys let's begin with designing the form let's go to our view component and yep let me just give a container inside this dot container because it should be a container so it will be good now guys let's move to our student form component and start with the element form so it's just same as everything you need to just add el before that and inside this you need to specify the model and all so model is equal to model where colon rules this will be the validation rules and all if you want to use and let's give that name so this will be my student form okay element row and this will be gutter is equal to 10 and your form items element form item where is equal to name and we want to keep this as required for the validation and the props we are passing that will be the name so after this we want the input so element input so v hyphen model your view data model dot name okay so we'll be taking all the objects in a model and if you want to give a placeholder let's get the placeholder where we will tell student name and if you want for the read only will see later all set guys so same we are going to copy this and paste for the name this is the class it will tell class model class then section section [Music] and final one email guys email let's give email and email section class so now let's let's see the output for this refresh so we are not getting the output guys so for that we have not included the file in app.js um it's too messy let me remove this all uncommented i mean commented lines okay so first here we have to import the path that is your element ui let's go this and move to quick start so over here the code is available let's copy this and paste after your bootstrap requirement let's remove this not required now and here is to use this element ui save and now let's let's see the output let's go refresh okay still we are not getting the output let's see why let's move to console okay so there are many errors guys because of that it's not showing the output because we have not yet set up this too so let me just comment all the things and just echo hello inside my element card so at least card design should work you can refresh now perfect so guys we have got the design and now let's implement those things so it should execute let's ctrl z and uncomment the form so now guys first let's move to our script so guys now we have to handle our input fields and all so for that guys you just need to move to a vue.js document so i have already opened it guys now and you can move it handling user inputs and all so over here you need data and methods so let's copy this and paste that let's give comma so and now inside this data let's return open and close curly brace so instead of colon we are already we have to use function guys so not colon we have misspelled so it should be written not written and model colon open and close so this is my name colon null and then the class section and email okay so that this represents model dot name okay so you can find that model dot name class section and email and what about this props so this props is referred from your form so from this model dot name model dot class so this props is going on okay so in that way it will validate your input fields so all set if you want to give rules also so you can assign this rules colon open and close so for this rules we'll be learning in further videos so in this video we are just going to insert the data with validating set up now now let's remove this over here we are using one back function go back let's copy this and paste that over here function open and close where we will tell window dot location dot href is equal to inside single quotes or double quotes you can use anything slash your students so when you view the data so at that time you'll be using that so let's give right now itself and one function save form okay open and close this save form will come under your button save button where is the button okay we didn't create that so let's create it so this is the row let's create a separate row for the button element row and we are going to use the same form item and let's remove this give element hyphen button and the type is equal to this will be success okay so we are using uh element ui guys so it's little different and and the button name will be save student and the function at at click is equal to where save form function so this save form or save student function here inside this i want to pass the form name for validating the requests so let's copy this and send that form name okay this is your student form let's go back to the methods inside this you can tell form capital m name okay so this will be a form name now guys let's see the output okay refresh perfect guys so here it is showing some i don't know which language is this so if you want to change this language you can just move to this internalization and change that okay so now guys let's continue now guys you can just click on this input and if you come out you can see name is required validation is already done now okay so until unless it's validation is given so you cannot save the student data so guys now let's get back and let me just remove this now guys we have to save the data so our view x concept starts here so yep guys let's move to app.js file and go to viewex website so you can just move from here ecosystem or view x okay and here is your core concept guide so for this these are the things for ux let's go to application structure and create a structure in this format so let's copy the store so move to resource js inside js i want to create a folder name store and from here let's create all the files actions dot js as you can see actions mutation dot js let's copy this and create mutations and getters also be required so this is your getters let's tell getters.js and one finally that is your index.js which stores the export the store okay so let's copy this store i don't want to keep as indexed let me keep a store which will be more clear so store.js all set guys and your app.js is already defined if you want to create the modules and all we will see in further videos how to move on with modules but we will see how to use vox in laravel view so yep guys let's get back so first we will start with the store function store.js file first step guys will be import view from view where same way you are going to import view x from view x okay and then guys let's use getters import your getter file okay gtter s getters from the path dot forward slash getters dot gs file okay and then your mutations let's set up everything over here mutations which will be your mutations file and the final one your action so i want to call all the fields from the action as i mean actions the page name action and now let's use view dot use function to call the view x so this view acts you are importing that and now guys let's export variable store is equal to new view x dot store function okay open and close curly brace where inside this you will call your modules modules colon open and close comma then your state state state colon open close comma and then your mutation come on your actions and finally your getter all set so all these things should be called and now guys this file will this store.js will be called in your app.js file let's get back so you can just import after this element before the element so you can just store from the path store folder oops give dot before store folder where store dot json call okay all set and you can pass inside this creating the app store perfect so now guys let's go back to store from here you will call all your view x things so guys first va as we are want to save the data so let's write the code to save the data okay so let's get back refresh so guys now when i click to save the student so that time it should validate all the fields so there is one function from this element ui let me just type directly okay so this dot dollar refs your reference of the form name form name dot validate function where here you are going to open and close curly brace where inside this you will tell validate valid then and then guys it will check all the valid details so you can just give in a if condition if it is valid then you are going to insert the record where this ref is read checking with the form reference and then form name okay so yep let's use this dot dollar store okay dot dispatch so this all are rebuilt okay in build things so you don't have to worry about this from where it's coming dispatch function where you will tell save student okay so this will be a safe student action comma this dot model all set so this dot model means your model fields value okay from inside this how you are getting the data let me just show you a demo over here okay let's go to view you just need to download one i mean active the extension for okay so let me type this is my model data model let's type name sds where you can see that sds let me just type the class as bca you can see data is coming so we will take this data and insert the record yep let's get back so now guys let's go to dispatch this save student so first you need to move to action.js file so let's go to action so first let's import guys import view from view and then export variable as save student is equal to open and close bracket where inside this curly bracket commit comma tell payload so all the data will be coming from here open and close curly brace so over here guys you are going to let me create one url url is equal to where i'm going to use backtick forward slash save student semicolon and now let's call axios dot post method then response and this you will pass the url and then your input fields value that is your payload and then guys you are going to show the message so guys in this element ui we have a notifier so we will use that notifier over here view dot prototype dot dollar notify open and close function where your title colon success comma copy and paste next will be your message where you will tell student created successfully and then success the type all set after this i want to windows dot location is equal to where i want to move to students page okay so we don't have right now but it will redirect over there so guys if you want to use loader and all so you can just let me remove this we don't require let's create a function show loader open and close function so now before that let's use one let let loader is equal to null and here d a loader is equal to view dot prototype dot dollar loading open and close where open flows calibrates first will be lock and lock colon is equal to true and the text colon text so this text will be from your function name so let's pass that by default will keep as loading if anyone use as empty else we will send the data and then your spinner the icon will be icon hyphen loading okay and the background if you want to give like rgb a five and this will be that this will be the background color so this will be for the show loading and for let's create one function for hide loader open and close loader dot close function and the function so let's copy this show loader and before sending this actual request you can show that over here as saving student okay inside single quotes and after showing this we want to close that so you can just copy this hide loader after your success message so now let's test it guys let's get back and refresh let's move to console first so there should be no error for that so see you can see that it's undefined scope is not defined okay let's define that where is our form component inside this let's use props colon open and close curly brace where you can define the scope scop scope colon as string okay so let's remove this and add comma we have made mistake save refresh perfect so the create data is coming guys all set and let's save the data let's insert the data with prakash bcaa section a and email with gmail.com let's click to save let's see what happens saving student and here is error is showing 404 that means url not created so let's create that guys okay it's a simple error for this action we didn't create the url so let's go to web.php and create a route with the post method so it's almost done guys finally let's go to the student controller comma store function let's go to student controller public function store function and inside this dollar student new of student semicolon and from here you are going to input all the fields so name is equal to your request okay requst request you need to get all the requests from your axios dollar request where a request of input field name copy and paste this will be a class where assign the class next is section and your database fields section and then email okay so that will be the email and after this guys you just need to save the record save open and close function and after this return response in json format so you can open and close square bracket where you will tell status is 200 success and then the message you will show as student saved successfully okay all set and now let's let's test it once again let's refresh here we go so with prakash bcaa section and way that gmail.com let's click to save student saving student let's see okay so we are getting 500 internal error let's see what is that let's move to network so you can see student not found so student not found means model is not imported so just need to import the model import and here it is okay so now guys let's refresh once again and insert the data let's go to console with prakash bcaa where with gmail.com let's click to save saving student student created successfully and it's redirected to students page perfect so as we have done that code to redirect on the students page okay so guys we have successfully done how to use a view x in laravel vue.js application and now guys let's see in the next how to fetch those records in our view js using view x okay so now let's fetch all this data whatever we insert the data we have to fetch in our table using view x okay so let's let's get started so first let's create a route with the students okay so let's copy and go to our feb.php so let's move to web.php route web.php and create a route using get method where you will tell students comma and your controller so my controller is student controller colon colon class with the function name index copy and go to your student controller and create a function guys public function where the function name will be index all set and now guys over here let's return view where you will tell student folder where i want to create a view blade file let's move to the resource views student inside student i want to create a file with the name view.blade.php file spelling mistake we have to add a dot all set guys and now let's copy from our form code and paste that so we don't require all these things and let's change the component name from student table component okay so let's make it this and a simple guys now let's create a student table component in our app.js file so let's move to resource gs in app.js let's add that view dot component function where inside this you are going to mention that view student table component okay and then call the path let's paste here and instead of student form component will make it as table component copy this and create the file inside your component guys so inside the students let's create the student table component done so guys now we have set up the things from our form let me close all the things so it will be much clearer so first it was overview so from view you went to app.js from this how is this called using this id view app so make sure in your view blade file you are adding that view app okay so with this id it's calling this component which is we have assigned over here and this will go to your view component okay so your student table dot view we are here now and now guys you can just use the same template so let's use this to design the user interface and let's get below and paste all set guys this will be your table data over here let's remove this instead let's keep a div tag where we will tell this is students data and one element button guys so let's add that beauty and button which will be create or add student okay and make this type as success or default and user at click is equal to we are going to create a function where it will go to create function okay so you can either create directly or let's create this function as this so let's keep it in this way and now guys for the script let's copy from it so you can copy full thing and paste that let's keep this model as empty right now and on the mounted we have to get the data and we are not getting any props over here we don't require and yep guys so now let's go top on this create function let's copy that and just paste here add hyphen student and we don't require the save form just remove this yup guys and now let's see the output for this so where go to your routes web.php copy the route called students and refresh okay so you can see that student data and this is your add button let's make it to side and start designing with the table let's move and you can give a class load right refresh perfect so now guys let's design the table let's move to our element dot io website and search for table select here so we get many designs guys so we will be using a search box thing okay so we'll be using this design guys because we have a search box so we'll make this search data also something like this okay so let us just copy this need the table not template just copy this and get back and paste that so now we are going to modify this we don't need like again and again to loop the table columns so for that guys i want to do something else which is shown in this customization option so at the last so at the last you have all these columns where you can see that your stripe max height everything okay in this table attributes you will get how to customize this table so let me just start with that so now guys let us remove all this we don't require all these things so this is our search box so i have just aligned this guys and now i want to use stripe where make it to true and want to give the border for this let's make it true this is for designing guys this type and border this data is the main thing where you will get the data inside this and let's give the minimum height i want to show heig ht height is equal to where i want to show as 400 save and now guys main thing starts from here element table column we are going to use for loop where you will tell column in table columns so this table columns we are going to get the data from where you will assign that into your data function okay so let's give here we don't need rules so just remove that go then open and close so before this we are going to use that first is colon key your column value dot label and then the label let's give label the label will be as label and then guys we are going to send the props prop prop where column dot prop and next is column key c-o-l-e-m-n hyphen k-e-y column key will be your column of prop okay let's set the that is minimum width is equal to your minimum width you want sortable also you can assign that sortable which will be sortable itself let's copy and paste that next we are going to keep alignment if we align like center and all so at that time you can align and next is header align that header line header means like name class we assign that same thing so fixed is equal to column which will be fixed fixed fixed or else we'll make it to null guys so it should be accepting null and then finally formatter so this formatter comes under like active or inactive that means boolean value we are going to check over here formatter that's it so now guys we are going to check all this into our table column over here so open and we need an array it's in curly brace so first step change this to array and then guys you are going to start with curly brace where first prop colon you are going to assign id id so this id is nothing but your data field database field name id name class section email so these fields we are going to call in props and then your label which you want to show on the table format let's give name and if you want to set the minimum width minimum width i think the correct spelling we have given let's keep it 40 we do not need in double quotes this spelling should be matching from your table which you have given over here okay so this minimum width we have to assign and then guys for sword table colon i want to make it true not it's colon and then if you want to give as hidden you can but we want is false let's align this in center and then guys make it to fix it which will be true so same way guys you are going to check for all the columns so let's copy this give comma paste comma paste and paste finally so one is id let's take the student um database field name name and this will be the name id guys so we don't need to give that name and next is i need the class take a correct value this is same as your db field okay and give the final one section and then guys we are need one email okay copy and paste this will be your email field email done so you can keep the width for name which will be let's keep it 150 and other things if you require let's keep it to 40 only or else you can just make it to 80 default okay let's save and now guys let's see the output let's refresh okay there is some error let's see what is the error okay it shows that center is not defined it's inside the data function let's go okay so here is the center guys let's given double quotes so it's a string and okay guys and now let us once check that from beginning so first we'll check the form name okay we have entered the wrong thing let's give student table component the this name just copy that and place it over here and for this columns table columns let's see this also let's go top okay oops we have to give the bracket for this column itself not for whole loop let's save and now guys successful okay let's go refresh and check the output perfect so as we have got the data done so sortable is for all things which i don't want so only for id i want this sortable so for that guys you can just move and make it to false this sortable as false for name class your section and the email save it refresh that's it guys so there is writing this is writing in some other language so let's make it to english language guys let's go over here and move to internationalization where we have to select with this language first copy and paste inside the app.js let's let's paste and now let's see the output guys first let's refresh perfect so we are getting an english language now us so there's no data it's telling now guys let's start with the view x to fetch the record let's go first you need to move to your component table component at this mounted you have to call the loading first so let's tell loading is equal to this dot dollar loading open and close bracket open and close curly brace let's copy this code from our action.js copy and paste let's remove this all set now guys once it's loading this dot dollar store dot dispatch function which will call get student okay students data so get students we are going to create the dispatch which will go in the store.js file and check that with this uh right now we will fetch the data first okay so now guys let's copy this and go to dispatch so which means which moves to store.js so let's move to our store.js okay and inside the store.js we have to assign the table first so where is the table data so table data the same thing name here it is okay so this table data we have to call it same variable we will use inside our store.js colon where i want multiple data inside that so just add this array option and this option will be going to get us so from this getter it will take to your store.js servers for that export default open and close curly brace where your table data function open and close well return state dot table data all set inside this you are going to send the state guys state so this function will be called from somewhere else your state thing okay so now guys this table data will be called inside your store.js how from this importing getters so from the getter you are going to store now guys how to use this your store and getters so that will be used in the actions and your mutations so go to your action and write the code guys so for that let's write a code to get the data first and then commit to mutations export const get students where open and close curly brace comment and then give comma where your payload values if you send any data from there so you are going to accept that data open and close curly brace and then guys over here you are going to write the axios so let's copy from below the code and paste so this first you are going to set the url let's set this as students or will tell get students data and so let's remove that loader and we don't need this also let's remove this [Music] so once we get the data we are going to commit function so this commit function is a pre-built okay it's inbuilt thing so you don't need to worry from where it's coming it will automatically understand so now you are going to set table data inside this you are going to get the response dot data okay so guys let's create a route for this and get the data first let's go to our web.php so move to web.php and create a route colon colon using get method no we'll use post method where get student data at the student controller student controller colon colon class at fetch student data okay copy this let's go to the student controller and create one function guys so as simple let's copy and paste create the function students is equal to where get all the students data so you can just assign student where all the data i want return dollar students okay semicolon all set guys and let's get back to our action.js so now you will get the data over here okay so once you receive the data you are going to commit which will go to your mutation so where is the mutation here it is which will export default set table data table data open and close with curly brace where guys first you are going to set the state okay and then your table data all set and now state dot table data is equal to your table data okay so now guys you will get the set table data from your action you are going to this and storing your table data into your state dot table data okay so this state is nothing but your store so this store is called as table data where inside the store the data okay and from where are you getting this data you'll go to your getters so from here you are going to define that state it will get and give you that inside this okay all set so now let's get back to our table view component and all set guys over here perfect let's after loading the table data we want to close the loading so just use close function loading dot close so guys now when you call this dispatch function that is your get student okay so after getting that what it is setting so you can see that in your action.js get students data it's committing to set table data so which is defined in the you can see that it's going to state dot table data okay so you can go to your store.js and find that table data thing so how will you get this so you are going to get from the getters guys so let's move and this data you are getting in a table data okay we are not using model let's remove this okay now here we have to create one component that is computed colon open and close it's not computer guys it's computed and this view come on where you are going to use the map getters so we have to give the map getters guys so you can just go to your ux website okay so you can find that getters and here is a map getter helper you can copy this function name so let's copy that and paste then open and close calibrates close the bracket and now inside this guys you are going to define table data so this table data you have to call into your table okay so this is the table where table data we have defined and insert this value what you are going to send your insert double quotes you will send the table data okay so from where are you getting this data you will copy this you can you will get this data from your getters so go to your getters you can see this table function table data function let's copy that and you can again paste that over here so this will this data will be defined in this and this will call your table component so as you are using map getters so please import the class import that is your map getter from obviously it's view x all set so now guys let's see the output for this okay let's refresh perfect so guys we have got the data and here we see see the error one warning that is your search is not defined okay i think this search box is not defined so let's define that let's go to the table and this is your search guys model v search so instead of search let's write search query so let's copy this and go to your data inside written just give search query colon null so right now we'll define it as null refresh perfect guys so there is no error and let's add the students click to add and yep so we are on the add student now guys let's insert the data one more record let me start with om prakash bca c section where um gmail.com let's click to save and saving data student created successfully and redirected to students page where you can view the data guys perfect so guys let's see next about how to edit and delete these records update the records and now guys in this we are going to learn how to edit and update the data okay so let's let's get started so let's move to our vs code and here is our table component guys that is our student table component which is over here done and now we have fetched that and our edit button is find over here and now inside this guys you will get the id so scope dot dollar index of score dot dot row okay so this will give you all the details of it because this is this row is getting from your table row so you you need to understand about this element ui package so from there you can understand how it's working on this okay so guys now let us test this when i click this edit button so you should get the row id so let's go below and inside the methods you are going to now you need to copy the edit name so instead of handle edit will write as edit data now let's copy this function name and go below the methods so i did data function open and close curly brace and with comma and inside this let's console log and see the id first so you can just tell row dot id let's pass that one is your index key and one is your row okay so your table row data now guys let us execute so make sure your npm run what is executed let's refresh and let's click on the id number two so edit you can see that today data has come let's click on one so one data has come perfect yes so on this basis we will start creating the code so now let's remove this and give the windows location code where we will tell edit student with row.id plus forward slash edit so now let's copy this path and create a route guys so let's move to web.php and just create a route with this let's copy and paste edit student forward slash with the id forward slash edit this edit one all set and now over here you will go to edit function so let's go to student controller and create a function with the name edit so let's go to student function and move below create a public function with the name edit function now first you will get your dollar id and let's create a variable data is equal to in array format where first will be our scope s-c-o-p-e scope of which will make it to edit copy and paste and this dollar id you will take and pass it in id guys so let's send this in id and once done you are going to return view let me just copy this from here to student form so same form will be going it okay so let's see what happens there so let's move to student form and this is the form guys over here scope and id is already defined if id is given means it will take this else it takes a 0 so let's go back to our controller student controller and from here back to our table component guys now let's open the form all set so if you are not understanding how to do edit an update please watch out from the part one so you can understand this flow okay so now guys let's move to top and this is our form inside this form we'll be pasting the data so now guys you are going to follow two steps that is inside your props you have got the scope okay so scope is like we are getting the edit and we are getting one id also so for that let's define id and that will be number guy save and next is let's move on mounted and on this mounted you have to get your axios data so for that guys you can start with the switch case because for inserting the data we are using the same form and for edit also we are going to use the same form component okay so for that let's use switch switch where this dot scope open and close curly brace so case of edit when we are going to edit that time you will be calling break copy and break now guys inside this you are going to run the axios so let's type ax dot get method dot then function open and close and insert the response we are going to get the data so first we will create a code guys for this let's start with the backtick symbol fetch student it show by id forward slash dollar this opener close curly brace this dot id so this id is nothing but your this props id so after getting the data guys you are going to set out that so you can use this dot dollar set function so this is not hash it is dollar so dollar set function where this comma where my model column so this is my model inside the data function inside that model what i am going to set the response dot data whatever data whatever results come from this route so let's copy this and create a route for it let's go and route colon coolant get method paste this over here you are going to send id and then guys same controller will move and you can show that edit data function let's go over there and create the function public function the name edit data open and close and inside this you are going to get id variable and from this variable id you will get your student is equal to your student model colon colon find function and then get the result guys so you can get the result as for this response so your json response okay so let's take this and pass this in a variable called data all set so now you will be copying this and let's move to our student form component and inside this you will get the data guys so response dot data dot data because we are passing in multiple so for this let's check the output once console.log dot log function let's save and now guys let's refresh once and see the output for this okay so let's click on id2 edit perfect edit student with the id and data has come over here guys and the console log is also viewed correctly done because we have used this data in data as your student controller where you are getting in a variable data so this is sending over there and we are fetching that data guys so let's comment this out and yep guys let's see the code to insert the data into a database i mean update the data so now let's get back so now guys let's move below at our method where for saving the data we are using the same function so our save form function save student so for update also we'll be using the same function so let's get back to our save function and inside this guys we are going to give a condition so let's use switch switch function where inside this you are going to this dot scope which we have seen this code for creating the student okay so this you can put in a create case so let's type create colon where this will be inside the create case and break it so now let's use the second case for edit okay all set and same view x thing we are going to call so let's copy this and paste so install save student we are going to create a dispatch of update student so this dispatch function goes to your actions and calls the function guys so now let's copy this function name and whatever data we are getting we are storing inside this and sending the data to update the data into our database okay so once the switch case is done we have to default colon and use the break that's it guys so let's over here after this we have to send we have to send the id also so where you will use this this dot model model colon this dot model with this you are going to send the id also so let me just keep that id colon this dot id comma all set so this dot id comes from your props so this id you will get and the data the model you are getting from your data function whatever data is insert present in that all set so with this id and your this dot model you will send to update function so guys now the work of dispatch is going to call action.js and call this function so now let's copy this and move to our action.js where we will let me comment it let's copy this above function so we save the time let's copy and paste over here and first step guys we are going to get the payload value from this payload you are going to get your id and model data now let's set the url first give forward slash dollar open and close curly brace where inside this your payload dot id okay once you will get the id variable and one thing one more thing we have to get your model so payload.model make sure your spelling is correct so this is the id and model let's paste that now your url is set over here and your data also is coming let's change the message i mean loader updating and once updated you will show updated successfully perfect so now guys let's create a route for this to update the data into a database so once updated you are going back to where students page okay so let's move to a web route and create a route with the put method okay update student forward slash id so we are going to use put method so make sure you have given the form in your action.js as put method we are going to use put method so make sure you are adding put not post so yep lets get back and then guys let's call the controller let me just copy from here beware update function let's go to our student controller and create a update function let's make comment let's copy the function from above of store let's copy this function name and paste so you are getting all the request that is your model data and your id also from the url so with that help of id you're going to find the student id and then you are going to update those data so this student whatever data is there let's make it to update and once updated let's show the message as updated successfully all set now guys let's take this message and show back into our action.js so once updated if you want to show over here this is our customized one so let's get from the back end itself you can put response dot data dot message okay so this is the response from that response you are getting the message which will show as updated successfully so yep guys let's go back to our student form control and that's it guys so three steps we have to follow that is when our props we are getting the id and we are sending the xcs request and getting them and setting into the model so this is one way of setting the model or else you can use another way this dot model with the response data.data from then you are going to save the function okay all set so let's test it guys let's get back refresh okay so you have got the data let me just from om prakash let's make it to om n okay and this one a section let's save student so updating student student updated successfully and redirected to students page where you can see that data has been updated guys perfect so let's try to edit and let's update from home to om prakash n and from bca2 will make it to mca and this will be a b section on prakash gmail.com let's save student updating updated successfully and you're back to students page perfect guys we have seen that how to edit and update the students data and now guys let's see next how to show the data without this fields as editing it so right now it is editable while showing it will not be editable okay now guys in this video we'll be learning how to show the data so as we seen that we have when we click on edit we will see all the fields in input field and edit and update that so same way we are going to use that cm function of edit to show the data okay so let's get started so first let's move to this table structure of your table component now here is our student table let me just minimize this sidebar and this is the edit and delete button guys so let me just copy and paste this button and make it as show and we'll make it this as info save and refresh okay so the button is not aligned properly guys for that you can just give a little space over here let me just remove this show so from instead of writing show let's keep an icon so element icon hyphen view you can keep for edit also where you will mention as edit and remove this from this edit and this delete also just remove that and you can keep an icon you can make it as delete let's save and refresh once again perfect okay it's still not aligned so let's give the minimum width guys so you can just move over here template i mean table column where you can assign with minimum width will give us 90 let's save and refresh perfect so now guys when i click on this we should move to show so let's make this as show data function let's copy this function name and move to our methods and just create the function let's copy this and paste and from this data function we are getting the index value and the row value so we will be using the row let's change the path so we'll tell show student now let's create the path guys let's move to our webroute dot php let's copy and paste this above function i mean above route where you will tell this function to show page let's copy this and go back to this edit function okay so let's move where you can find this so same thing you are going to copy and just change the few steps inside in it we are getting the id and from that id you are going to create this as show all set so this id make sure you have passed in your web dot php id is passed all set let's get back to our student component now let's test it refresh and let's click on it guys let's click so so student with one but data did not come because we have not written the code so now guys let's go to our form that is student form i mean this where we are coming over here okay so yep over here in the mounted function you have a edit case okay so we are going to fetch the data in this so same function we will use it so let's just copy and paste for the show also do not break here okay so if you break that case will be gone out so if you set this it will understand and execute that okay let's refresh and perfect so you have got the data guys but it is editable so let's make it like uneditable so there is one required field what we have to do first we have to go to our computed function so inside the student form we need a computed function think we don't have here let's create that after the mounted computed colon comma and inside this let's give read only fields d as fields function where you will tell return this dot scope double equal to show which means we will set it to true or false all set so now this read-only function will be assigned everywhere so let's copy this read-only function guys and let's move to our form so this is our form and the input fields so at this input field i am going to use colon read-only attribute is equal to this field so read only field so same thing you are going to paste paste and paste done i think we don't require this placeholder okay let's save and now guys let us see the output let's refresh and yep so it's not editable done so this is how we make a show data but we don't need this button also so for this guys you just need to give one simple case over here let's do it on this gutter itself so v if v if is equal to double quotes where you will tell scope not equal to show when it is not on show the scope the data which we are getting always to show that show create edit if it's not equal to show then show or else it should show okay let's save let's refresh perfect so that button is disappear guys and it's on show let's get back let's move it adding student where you can see that cases create and you have the button let's test for the edit also okay let me edit on this perfect so we have the button and it is editable over here okay so let's get back and let's see on once again on show you cannot edit or you cannot see the button also so guys in this video that's it we have successfully seen that how to show the data without editing input field and hide the buttons in level view js view x okay so guys let's continue next about how to delete the data from our database using view x guys so we are not going to use any axios and all directly we will use view x and delete this record where now guys in this will be learning how to delete the data from our database using view x in laravel so let's get started so now let's move to our editor okay so let's go to our table student table component and here is the button guys so this is our delete button so which is visible over here yep and now guys let's change this function name so delete data we will keep okay so let's copy this function name and go below in our methods so let's paste that open and close where inside this you are getting the index value also and your row also so this row means your table data you will get all set so let's use confirm and delete guys over here let me use confirm function if you want you can use your sweet alert also in this way but for right being we are going to use this so are you sure you want to delete this data okay so if you tell yes obviously we are going to delete the data by using our view x dollar store store dot dispatch function where inside this you are going to write the code delete student your function where you are going to pass the id inside this so id colon this dot id okay so we don't have this dot id instead we are going to get the from that or delete button you are going to get the row dot id that table and you will get it and then you are going to delete it so once deleted what we are going to do will fetch the data i mean refresh the data so you can either refresh or call back the same function get students so let's copy and paste once it's deleted you will show this function reload the table let's save and yep guys let's copy this function and let's move to dispatch so dispatch is nothing but it goes to your actions which calls the function from there so let's paste here and let's copy this so we can save the time okay let's paste delete function and from this you are going to create a url delete student with the id and then you are going to just send url because we we are not sending any data so no value and now once deleted you can so it is success and the message you will get from the response is deleted successfully so once it's done let me just comment this line because we don't want to refresh it will automatically reload the page okay i mean reload the table data so we don't have to refresh i'll save now guys let's copy this path and create a route so yep route colon colon we'll use delete function okay so if you want to use delete function make sure you are adding your axios route as delete okay so inside your student we are going to use delete where we will use this delete in your route and then get started with creating a route guys where forward slash we are going to get the id and then move to your controller so let me just copy from above the controller name which will be delete all set so let's move to student controller let's go go to last public function with the name delete function where inside this you are going to get the dollar student is equal to your student colon colon find with the id which we have sent in the route so same way you are going to get that dollar id and user delete function to delete the data so once deleted you can show the message let's copy and show the message where you will tell student deleted successfully and this will be at 200 status so now guys let's save and let's see okay refresh and yup guys so let's delete this data are you sure yes okay student deleted successfully the message we did not change over there and the row is also not deleted let's refresh and check guys so the data is deleted guys but it not did not refresh or reload the table so you have to use something else so let's set that so before setting that let's go to our action.js and change this updating to deleting student so this is our loader so when we click on delete it will show deleting student and after the success i want to okay so now let's take this just ctrl x and now guys you need to create one function so let's tell that this dot fetch student data okay so this will be the function and where you will create this function over here inside your methods itself fetch student data function and call that dispatch again inside this so instead of set student why make it as like all so it will be useful for every module so let's send this so fetch all data over here and it will call this function and then execute the output let's save this guys and yep let's refresh once let's add one dummy data guys first okay so is the is the sum section at g dot c save saving student done let's go back let me add one more data okay so some random so done at gmail.com let's save all set so guys now i'm going to delete this center data that is id 7 and then it should automatically load without the page reload okay so now let us click on id number seven to delete the data delete deleting student deleted and here is your data guys so whatever it just loaded automatically without the page reload so guys this is how we delete the data in laravel view acts with view.js okay and now guys it will be learning how to make a search box in our view js view x okay so let's let's get started so first let's move to our this table component student table component at this search box okay okay and let's move to the search button here is our search button guys okay type to search so let's copy this model that search query copy and go below here inside the data function we have assigned that search query also and before this data function you have to call the watch so whenever we search directly we have to check the data so we should put under watch function so open and close curly brace give comma and insert this you can assign the search query colon function function open and close where so from this function you are going to get all the val i mean that where whatever you type inside this so you will get the data so once if you get the data we have to fetch these records so what we are going to use the same dispatch function to get the data but with the search query so let's use the same dispatch this dispatch gets to that okay so same data but we are going to integrate this one more thing that is our like search query not this dot search colon this dot search query okay so this dot search query is nothing but your data so you will get from here and you are going to send it in your get students so same will let's copy this and assign this in your mounted also because we wanted to fetch the search data so you have to work like this if you're not understanding this how it is set you have to watch the part one the link is given in the description so you can watch from there how we are setting this and then you can come to this search module all set and now guys let's go to this get function i mean get student of dispatch so let's move to our action.js and here is the get function okay get student make sure it is the same so yes it is correct let's get back and inside this the payload you are going to send it so you need to send over here so right now we were just calling the data and sending it but we are going to use search options so whatever we get from there we have to send it directly over here so that is we are using post method to send the data so let's save no changes guys and now guys when you send the request whatever you are sending the actual request with this payload okay so what is in the payload so as you can see that we are sending this query so we are posting the data so you will get an input of search query so now let's write the code into our controller so let's move to this what is that url get students data so let's copy this and search with that in our web route perfect so this is the route guys and let's move to this controller at the function fetch student data so right now it's written that we have to fetch all the data now guys we will give a condition over here so let's make something like query okay so this will be the query and if if you get any request so dollar request before that we have to assign the request over here because we are getting a request with the post method of search data a request of what request of let's move to table component this code so let's copy this search query get back to your controller paste if it is like data is there then you'll get inside dollar query of where condition we are using query builders in laravel so use a function use use dollar request inside this you are going to give dollar q this dollar q you are going to use it or where like what what what are the things one is name okay let me close this first it's closed over here let me just remove this all set guys where you are going to give the condition that is like comma inside single code you are going to use percentage dot dollar request of what your search query whatever data you are getting from there and you are going to assign it so now you're going to dollar students students is equal to your dollar query get function so now this value you are going to remove instead of all let me just comment and keep it for the reference so over here you are going to select what are the fields you want let me just rename this as students we'll just leave that so what it was before and select what are the fields so by default you have to select id that is compulsory and then your fields so let me just show you so my fields is over your name class section email okay so these four fields are required name comma class comma section and the email so these are the fields which i need let's save and then guys you're going to use get function and return now let's see the output refresh okay perfect so there is no issue with working on this fetching the data and now guys let's try with searching i am going to type bc a and here you find no data ved perfect so we are only searching with the name ybca did not found you can see that we have written a query here is the query only we are searching with the name okay so that means you are going to search only the name next is varun or let's search with the mahesh you can find that mahesh over here perfect so if you want like you want to find from the class also so in that case guys you just need to copy and paste this and just class if you want email add email okay save and all done let's once refresh not required but okay so let's search with the email guys with add gmail.com we are getting let's search with bca so these are the bca students let's search with the bcom and these are to become students so guys this is how we implement our search box in our laravel vue.js with view x so we are using view x in this crash course guys so guys in this video that's it and we have completed with this series and now let's see with adding more up so guys thank you for watching this video please subscribe like and share

Channel: Funda Coder

Views: 397

Keywords: fundaofwebit, funda coder, laravel 8 vue js vuex crud, laravel vue js admin panel, laravel vuex tutorial, laravel vue vuex, laravel vue js vuex crash course, crud operation in laravel vue vuex, crud operation in laravel vue js, laravel vue crud, Laravel 8 Vue JS CRUD Tutorial, install vuex in laravel 8, laravel 8 vue js authentication, laravel vue js crash course, integrate element ui in vue js laravel, laravel 8 vue js tutorial

Id: Fu2VK-6sDnQ

Length: 115min 50sec (6950 seconds)

Published: Thu Oct 21 2021