So this lesson, we are going to be concluding our interaction with the front end Tester API.
So what it's doing, it's loading some dummy data.
We can move through the dummy data.
We can make a selection of one at any one of the users.
We can update and interact with the content for the user and make updates to it and then take that updated
information, send it over to the server.
We get a response with the updated information from the server and we can always go back to the main
page and once again released all of the users and then click through the users within the list.
So depending on what page we want to look at, we can load the different users according to the page.
So that's what we're going to be building and finalizing this interactive application in this lesson.
So let's go ahead, open up the editor.
When we click the user, we have the ability to update the user information and now we want to select
that information when we press the update button and send it over to the server.
So let's go over to our rest documentation.
And in order to update data, we can either use, put or patch.
So both of those methods allow us to put the content and send it over.
And as you can see, you do get a response object value.
So it's not actually updating, but it's simulating an update.
And that's what we wanted to do now, is we want to do a simulation of the update.
We are going to send over the name and the email of the selected user and the request is done to the
user ID path, and that's where it's updating the user.
So going into where we've got the code and we're making the update request.
And I did want to note as well that with most browsers with Chrome, you will have to update some of
the flags within Chrome.
So I'll walk you through and I'll show you the messages that you're going to get as well, whether it
might encounter and how to accommodate that within the browser.
Let's also do a quick update and comments about the console messages that we have got quite, quite
a few of them going on.
So that will just clear the console and allow us to interact with the content a lot easier.
So when we do the update request, we've got the updates, the user information.
This is where we left off last we're sending over or we've got this user information that we're ready
to send.
So let's make another function and add user.
And actually this is going to be update user and we'll create another one for adding the user.
So we're passing over the user info.
And I'll just add that here, instead of the console message, it will output the user info.
And then we can console log the user info within this function.
So that means that we're already we've passed over the user info and let's do a click to the update.
So we've still got the information that we can pass.
And let's go back one more time, take a look at the path that we need to create.
So this is going to be another Futch request and let's set it up as just we did before.
But this time it's going to be slightly different where we're updating the path for users and we've
got the ID within the user information.
So that's contained within that object.
So user information ID is going to be the path that we're going to post the content to and that's going
to be the URL.
Let's also log out the euro.
So it's going to be helpful for any debugging that we see, the URL that we're passing to.
And instead of doing a request, we're going to update this and send the euro.
But we're going to add in some parameters here.
And the parameters that we're adding in is we're going to set the method and the method is going to
indicate the method that we want to use by default.
It's been get, but we want to specify it to post since we want to send some post information.
And this is also where you can pass header information.
So the headers are passed in as an object.
So we'll create the headers and we'll add them into this object and then within the body, that's where
you can pass that data.
So using JSON string of fi, we need to pass the data object as a string value.
So we'll just take the data object and pass it in a string.
So that's going to be the request that we're making.
Let's add in some variables.
So for headers, these are the headers that we're going to be using.
And within the headers, there's a number of options that you can have for headers.
In this case, we do need to specify the content type that we're sending over and that's going to be
as JSON data.
So application JSON, you can also send form data, text data and so on.
So sending the content type.
So that will indicate to the headers the content type that we want to use.
Also, we need to set up our data values and this is information that's coming directly from the user
info so we can select that user info and have.
The name, and that can be user info and let's just get the value so that user info and object property
name and email will be user info and property is going to be email.
So that's the data that we're sending.
And Stringer, find the data and then we're expecting the response as Jason returning back the response.
And for now, we'll just console log out the responded data and console log and we'll just use data.
And we are actually using data a little bit too much.
So let's update this.
And this is going to be the.
Info, and then we'll just string a fight us info, so to avoid any confusion about using the data value,
so let's try it out and clear the console update and that gives us the information that's being sent
back.
So using the SO because we're using post and sending it over to the users, what it's doing is it's
creating a brand new entry.
That's why we've got a different ID value, but it is taking the information from the Web page.
And as we're updating it, we can see that we've created a new entry with the new name and the email
address since returning back an ID.
So this is, again, a simulated response in in order to update that existing user, we need to use
the put method.
And so we need to update the method from post to put and going to this route that should then instead
of creating a new user, it should update the existing user.
And again, this is a simulation, so it's not actually creating or updating on the real database.
And one of the things I did want to mention is that in some cases you might encounter some errors within
the browser when you're testing this locally.
So the way to update that is you can go to the cookies with the same site must be secure.
So you will sometimes, even occasionally see that you've got some type of issues here.
So that's how you can manage those where you've got some messages and it'll give you some information
about the cross site requests that you're doing because this is local to cross site.
So it is flagging that that generally is a security precaution.
The browsers will check to see if you've got some local data and you're sending it over to a server.
And that's where it's going to flag it so that the browsers can't be used to take information off of
your computer and just send it with the application running in the background.
So in order to enable, you can enable you can disable these options and I'll include the path within
the next lesson.
So in case you do need to access it, you can do that.
And within Chrome, it's going to have a link going over and more explanation.
So if you click.
This link, it's going to bring you over to a website that's going to play more about the same site
cookies and explaining them.
So if you are seeing this warning message, you can just ignore it or as well, you can update your
browser settings.
And don't forget, after you're finished, just to reset them back to the default, if you do make some
updates to it.
So Post is creating and it's ignoring the rest of the path information.
That's what we're creating.
So we do want to try the put and the put is actually the one that's going to do the update, the put
in the patch.
So update the method to put and go back out and do a refresh, click any one of the users.
So this one and this one has an add value of six.
So when we do make the updates to it, it gets returned back that we are making the updates to that
particular user.
Let's update some of the content for the user.
And we've got updated at being returned back and we can try that one more time just to make sure everything
is working properly.
So selected user number two, and we're seeing that.
We're getting it updated.
So keeping in mind that this is testing and point and typically you're not going to be doing puts and
updates from front end code from the JavaScript, you don't want to leave your database open for these
types of updates.
So this would be more something that would be done within the backend code where you're making the updates
to the database content.
So you've got some more options to provide security.
But if you do want to practice this as a good API that you can practice and get more familiar with making
these types of requests.
So also, let's update some of these buttons.
And we could also update this to create the user.
And because it is just a testing API, I'm not going to do that.
But you're welcome to do and update this to post it be creating a new user with the same end point.
And I'm just going to select these inputs and highlight the input.
So update the style to display and display it as non.
So that will disappear that and let's update the button to tax content, and this will just see main
menu.
And I'll play some styling to the button as well.
So that the main menu button is going to be centered, so button class list add and other class of button
update.
So that will just center the content and make it look nicer.
And whenever the user wants to get back to the main menu and they can just click the main menu button
to load and reload the user information so that this was live data, if you went back there, this would
be updated as we are sending over their update request and the server is receiving it the way that the
testing server set up, that it just does the response chasten object when you're doing any updates
or any creating any new users.
So it's not actually updating the database once again.
So let's just make it look nice and then we can wrap up this application and this testing endpoint.
So using some Google fonts.
And I add the Google fonts to the document and set the font family for the body of the content, so
it's a body font family suit that looks like.
But just some changes in the way the fights are being presented.
Let's also update and add to the buttons.
So do a HEITZ.
And some padding to the button.
And also border radius, and you can apply styling, however, however you feel necessary.
And also make the font size bigger.
And just get it to go to whatever the default height is going to be.
And also, let's make the font size bigger for the entire document.
So there we go, so that we can update we can interact with the content and actually I'm going to add
one more option into it.
So this will be Updater Field and for the updater,
it will select the device within the updater and apply a border to each one of them.
And really light border and update and add to that element.
So when we create the user page.
Four main.
Class lost and the class of updater, and that way those elements are going to be presented differently
and they're actually going to look a little bit more like editable fields.
And also, let's do the background color.
So just to make it look different so that look a little bit more like input fields.
And then the user can update that information.
In this lesson, we're finalizing the application, so we also want to take the opportunity for post
and put method testing and this is a test server.
So one of the tasks for this lesson is to add in the ability to send data and post it and put it to
the server.
So simulating adding content to the database, test the application, ensure the functionality is as
required.
Apply some styling to make it look nice.
And customize the application as needed.