Updating Profile using Laravel and Vue 3 | Part 42

alright friends welcome back to another video on building multipurpose liable and view 3 application and in this video we'll be working on the profile page where we'll be updating the profile information for the authenticated user so now let's get started so first of all we need to add the design on this page so let me go to resources views stops and then update profiler bladder PSP let me copy this and let me go to update profile.view file and inside this container fluid let me paste that in and then if I come up here you see this beautiful design now first of all we need to display the name and email by default over here as well as here as well this is name and this is role so let's work on that part first so for that let me create the end point call Api slash profile so let me go to web.psp file and up this let's create the get proud for API slash profile and will be calling the profile controller we haven't created this class so let's create this class first PSP audition make me a controller instead of admin call Profile controller okay this got created so let's import this and the class is imported okay over here so let's go inside of this class and let's create that method called index so public function index and over here let's pass the request let's just leave it as empty and let me go to update profile.b file okay and let me go to the top for here let's add a script setup as well script setup let's indent this property and inside this script setup let's create the method called get user so once to get user and over here we can perform the XCS request so let's do X use dot get and I'm going to hit the endpoint call Api slash profile and then we'll receive the response and instead of then block let's set the form value to response.data but we haven't defined this form so let's define that const form equals let's make this as reactive and we need to import that from View and inside this let's define name as empty spring email and then roll now from this endpoint we need to return these values so let me go to profile controller and over here let me do return request user which is the authenticated user and we want to return only name email and then roll okay so let me go over here and let's create the unmounted function on mounted we want to call that method call get user okay so that will hit this endpoint so let me refresh this page let me open up the console let me go to network tab Let me refresh it again and we are hitting that end point and we are getting those values this is name email and role which is perfect let me click on this view tab as well so let me click on this update for file and for the form these values are empty but we have extra value so to fix that instead of making this reactive let's make this a ref and let's send this over here so that we can set the form value okay so let me refresh this now if I click on update profile we have this form fill out which is perfect now we can simply use those values so let me close this and let me go over here and instead of so Android let's do form third name and form dot email sorry here rule let's do the same for this input fields over here let's do the model Calls Form dot name and we have Zonday let's do the same for email as well V model equals form dot email which is perfect now when we click on this substances we need to send the access request again and update this profile informations so let's work on that part so let's listen for this substances event so over here on our form on Summit let's prevent the default Behavior and let's call the method called update profile so let's create this method th for file xus dot put API slash profile and we want to pass this form and then we'll get the response back and for now let's say alert file saved now let's create this endpoint so let me go to web.psp file and after this let's create the port route for APS last profile and let's call the methodical update let's create that method function update let's get the request inside this first of all let's perform the validation so let's do validated equals request validate and we want to validate name and it should be required email should be required and also it should be email and also we need to check the unique email validations so for this let's do rule let's import this and it should be unique for the users table and then we need to ignore this current user which is the authenticated user email so for that we can call the ignore method request user ID now if I DD validate it let me try this let me open up the console let me go to network tab click on Save changes and we have the validations error message and it is saying the name field is required Let me refresh this and try again do our form fields are not empty it is giving the error message which is the name fill is required because we missed something over here in our update profile.view file and instead of passing this form we need to pass form value okay so make sure to change that and click on substances again and now we are getting this information which is John DOI and this email right and our validation is also passed and we are doing DD over here now let me remove this we can simply do request user and I want to update with this information which is validated data right and finally let's return Json response response position and simply say success is true let me try this reconceptions and we see this a lot which is file set which is perfect close this refresh this let me change this to John Doe is changed click on substances and it got accepted if I refresh the space yeah we have this information and instead of showing that alert let's show that beautiful to us notifications so we can do the similar thing that we have done on our update settings.v file so we need to import use toaster from toaster so let's do that import use toaster from poster and over here let's call that method and instead of using all out let's send that to to store.success and let's say profile update it successfully let's remove this now let's try this again click on substances and we see this toast notification this is perfect and finally let's work on adding the validation as well because if I remove this and click on Save changes then we see nothing because there is a validation error so if I go over Network Tab and click on substances and we are getting 422 status with this error message called the name field is required so it will be better if we display that error message over here so we have already drawn that similar thing in our update settings so let me copy some of these steps so over here let's copy this cash block and we need to Define this errors status pair so let's do that part let's define that errors State and let's make this as reactive and let's add a cash block and we are checking we have here on our response and the status is 422 then we are setting that errors value to error response data errors and let me go over here in our update settings let's add this span tag as well okay each profile after this input over here let's say over here so instead of app name let's send this to name let's do the same for email as well instead of app name let's say email it's indented and have the same same score now let me remove this name and click on substances then we have the validation error message the name field is required right if I remove this and click on substances we have the email validation as well and if I go to users we have this user or new user at gmail.com and if I change this user email to this email click on substances then we have this validation the email has already been taken which is perfect and finally let's send this name over here as well so for that we can go to app.play.psv file let me search for LX and instead of this name we have on played files so we can do authenticated user name okay if I refresh it and we get that name so this was for this video I hope this video was helpful for you so don't forget to like share and subscribe to this channel as I'll be uploading the videos like this so till then have a great time and I will see you on the next one [Music]

Channel: Clovon

Views: 1,211

Keywords: coding, tutorial, laravel, laravel 9 and vue 3 tutorial, laravel and vue 3 project, laravel admin panel, laravel vue adminlte, laravel admin, vue3 tutorial, laravel application development, learn laravel 9, learn laravel framework, laravel crud, laravel crud tutorial, laravel how to, adminlte with php, vue 3 events, laravel vue popup modal, laravel vue 3 tutorials, how to update profile using laravel and vue 3, update profile page

Id: F8a8hTdnKEk

Length: 12min 0sec (720 seconds)

Published: Sat Aug 05 2023