As of now, inside our Web application, we have a profile link inside the dashboard that we are displaying
to the end user, but we don't have any controller class on any HTML file that handles a web page that
we are going to display when someone click on this profile link.
So for the same, let's go to the idea and try to build a controller and his team and file that we needed
in order to display the profiles of web page to my end user.
So in order to create the controller class, we can go to the baggage controller here and we can try
to create a new controller inside this package present inside the Example 47 project.
So I'm just trying to create a new class with the name profile controller.
So once I create this profile controller class, I can mention these two annotations that I needed like.
So the very first one is from the Lombok Library and post that we have a stereotype annotation, which
is a storage controller.
And this stereotype annotation is an indication to my spring framework that this class will act as a
controller inside my spring MVC flow.
So now inside this profile controller class, we need to create a method which handle the web page display
profile for the same.
Let me create a new method inside this profile controller class.
So here, like you can see, I have created a new method with the name display messages, and this will
handle the part slash display profile.
Like you can see, as of now, there is nothing inside this method.
We are just trying to retain the view name as profile dark pigment.
So once my user clicks on this profile, this link inside the dashboard, we are to link to the spring
MVC floor to display the profile page by displaying the view from the profile dock heads to your email
template.
So right now, as of now, we don't have this profile that has HTML template.
So let me try to create this template.
So for the same, I'm just clicking here new as HTML file and the name that we can use profile dark
hits.
So as of now, this is an empty HTML file.
Let me copy paste all the required code inside this profile Dart hits team.
So first, I remove the existing code that we have here.
We'll start.
I'm just to copy and paste all the code that I have already for the profile, documents GM.
So you can see here this hits G.M. code also is very similar to other hits HTML files that we have.
Plus, we will try to import the header and post that we have a banner section along with the breadcrumb.
After the banner section, you can see there is a profile block.
So here I haven't had been with the name my profile and inside that I haven't had DML form, which will
invoke an action update profile.
Of course we are to build this update profile action in the back inside.
And this is going to make a post request to the backend.
And this form will have an corresponding object with the name profile, which means we need to create
a baweja class profile on the back and side, which is going to hold the data present inside this history
html malformed page.
So if you can see here inside the system and form page first, we haven't had of personal details.
And here we are trying to display what is the name of the person, what is a mobile number and what
is the email post that we have?
Another had been saying that address details and their address details.
We are trying to display that data with the feed names like Address Line one and Line two, city state
and zip code.
So this way we have in his HTML form page and post this his general form.
And then we also have two buttons.
The very first button is the update button, which will submit this form action to the back end with
the latest data presented inside this history HTML page for this update.
But we also have a back button which will redirect the user back to that dashboard page.
So this is what I have inside my profile art history mode.
So don't worry, when you look at the profile web page inside the browser, then it will make more sense
to you.
The key point that I want to highlight here is if you see this anywhere form has around 10 feel and
these 10 fields, we need to store the data.
We need to fetch the data with the help of object, with the name profile and inside this profile object,
we should.
How this feels like name, mobile number, email address, one industrial city, state and zip code.
So that's why let's try to create a profile model for your class in the backend for the same.
Let me go to the model package here.
I can create a new class with the name profile.
Inside this profile model class, I will mention the annotation and the read data, which is from the
Lombok post that I will mention all the fields with the similar names that I have inside my profile
dart daemon.
Along with the field details, I'll also mention the validations that I want to perform with the help
of spring MVC validations.
So let me.
Based feels that I have here, like you can see, I have pasted all the required fields like name mobile
now e-mail at just one and trust to city and state, and at last we have zip code as well.
So along with this real names, I also mentioned that it quite animations like not blank average size
Android batch and based upon my requirements.
So these are all familiar to you.
So on top of that too, I don't want to do any validations.
That's why I have not mentioned any annotation on top of this field.
And here you can ask me a question that these fields are already available inside the person and address
for your classes.
So while you're not using those baweja classes in order to fetch and save the data from the way to the
backend, the answer is very simple.
So you can take my profile that hits to your men.
I can only refer to one for each object at a time.
Insider its and form like a that I can use a person or I can use the address.
Of course, I can also make it work by mentioning the person inside my profile page because anyway,
this person for your class has a reference to the address as well, but that is a very complicated process.
That's why I want to create a separate profile model class for my profile page alone, and that will
make my job easy.
So that's why I have created a profile model class here and here.
We don't want to mention a IT entity on top of this model class because anyone out I want to store some
information from the profile page.
I can populate the information to the person and address which are already entities.
So that's why I don't want to make this poster class as a separate entity because there is no database
table inside my database as well with the name profile.
So due to all these reasons, I made this profile page as a simple project class, which will help me
to bring the data from the UI to the backend and vice versa.
So now we have created this profile model class.
So obviously from our Profile Controller banner, we are trying to display this profile.
Dart hits team and very first time we should make sure we are sending the profile object from the backend.
That's how my history email template can try to display that data from my profile object that I'm sending
from my back and controller.
So let's try to add that code so far to what I can do.
Here is first, I'll try to create an empty object of profile.
So let me try to import this profile class.
So once I created an object of profile, I need to send this profile object to my UI by sending inside
my model and view object.
So in order to send my profile object inside my model and view, I can add this line of code.
So with this line, I'm trying to add an object with the name profile, and I'm trying to assign the
object of profile, which I have created at the line number 16.
So now inside profile dart hits the email.
We should refer to the same name that I have highlighted here.
So let's run that dart by going to the profile Dart hits team.
So here I am opening this profile.
Dart hits to email and you can look there is an object reference with the same name, so we should be
fine.
And inside this object, we also have the similar file names like what is the name, what is a mobile
number email and just one at the central city state and zip code.
So now we have built a completely the required code inside our backend controller class, and we also
created a new model for your class with the name profile, which will handle the data inside this profile
testament.
So now we can see all these code changes and we can trigger a build and post that we can go to the browser
and validate the profile web page if it is displaying properly or not.
So, so now my build is completed, I can quickly go to the browser and validate the changes.
So I came to the browser and I'm trying to login with the credentials that I have.
So this login is a normal student login.
So let me try to log in into this web application.
So here you can see right now I have a profile link.
Let me try to click on this profile link.
So this time I'm able to display web based successfully to the end user.
And this is the profile, the page, how it is going to look like.
So we'll be having what is a name of the user mobile number email and I just line one and this line
to city state and typical.
So here we have an issue which of course, is showing the value as zero.
The reason is inside our profile model class, we had declared the zip code as an integer.
So by default, the value of integer isn't zero.
So to fix this issue, we can quickly change this value to the string.
For the same, I can go to the profile dot java and I can make this entire string.
And since we are making this change inside the profile of Java, very similar change we have to do inside
the address Dark Java Kojo class as well.
Because in the future, I'm going to save the information that I have inside this profile object into
the address object that we're.
Can get updated into my database as well.
So in to do the same, let me go to the ad to start Java here.
And this is an entity class we can update this year to stream.
So with this change, we should be good.
So let me go to the dashboard and try to refresh the web page one more time.
So my browser refresh the page and this time let me go and check the report.
So here you can see that Jim Collins, M.D. I know it is not showing the default zero value.
So this way I am able to display and profile of a page to my end user whenever he click on the profile
link inside that dashboard.
So we also have update and back buttons here, so Update will send the data to the backend.
So of course, we had to build that code, but we can quickly check the back functionality.
So when I click on this back, you can see I'm redirected to that dashboard webpage so I can go back
again to the profile webpage.
So right now there is a problem here.
So the problem that we have here is I already have my personal details sailed into the database during
the registration process.
Like my name, mobile number, email, they are already available inside my bus and stable.
It just that I don't have the address details, so it is fine to display that information as blank.
And it is an indication to me that I need to enter all the address details and I can try to update.
But unfortunately here the entire form is blank.
The reason is when we are sending the profile object to the UI, we are not loading the person details
that we have inside that database.
So let's try to fix that issue that way.
Well, now the user comes on to this web page.
If his personal details and address details are already available inside the database, we will simply
display the same values and he can keep updating the same values whenever he want.
So that will bring good feel to the end user as well.
Otherwise, if you keep displaying the same empty web page every time, and if you keep asking the end
user to enter his details again and again, so that's not a good experience.
So that's right.
Let's fix that issue in the next picture.
Thank you, and I'll see you in the next lecture by.