Now that we got our files
and routes migrated,
let's start handling user input
when that form here is submitted.
And for that, we need what in our server-side code?
We want a POST route.
We want to handle incoming POST requests
because as we learned,
if a form is submitted with the intention
of that data to be stored on the server,
we wanna send a POST request
so that the data can also neatly be merged
with the request body.
And therefore, somewhere here in app.js,
the exact position does not matter,
I will add another route
but this time for incoming post requests
by using the post method on app.
Now, the path which we expect here
is totally up to you
but I will actually use recommend again,
which I did already use up here for get.
Now I'll use it again here for post,
and therefore, I'll actually grab this post route
and move its definition close to the get route,
not because it's required
but because it shows us as the developer
that the two routes are kind of connected.
And you might wonder here
if it's allowed to use the same path
for two different routes?
And the answer is yes
if you use different HTTP methods, GET and POST.
It would not be valid to define another get route here.
I mean, you could do that
but this code here would actually never execute
because this route already handles the incoming request
and sends back a file.
So this here would be redundant.
Your routes are evaluated from top to bottom
in that file, and hence, this would be skipped.
But for a post request,
this get route will not become active
and hence, this handler here
would actually then handle this incoming request.
So yes, this is something we can do.
And therefore now here,
we again wanna parse the incoming request data
and then store it.
And for the moment, I'll again store it
in a file because we don't know yet
how to work with databases.
Now, you did learn that in order to use incoming data,
we got this body property on the request object,
but you also learned that it will only be populated
if we added some middleware to this Express app
that actually tells Express to look
into incoming requests
and try to extract incoming data.
And therefore, we should add that middleware.
We typically do that at the beginning of this file,
just as we do it for the static files.
And then hereafter,
or in front of the static file middleware,
it doesn't matter,
you can use express.urlencoded
and pass this object, this configuration object
to it where you set extended to false,
just as we did it before.
Now, with that, the incoming request data
should be parsed,
and in this post route, we now have access to it.
Now, if we have a look at recommend.html
at the form we find there,
then we see that in there, we got a couple of inputs,
and that they all already have a name attribute,
name, address, cuisine, website, and description,
and we can extract the data by these keys therefore
in our backend code.
We'll also have to come back to the form element
and configure this correctly
but for the moment, let's go back to app.js
and extract that data correctly.
For example, the name, which was the first field we have
in there for the restaurant name.
I'll store the data stored in that field
in a constant named restaurantName.
And then I'll continue like this for my other fields as well
to also store the address and so on.
Or do I?
Let's think about this again.
We, in the end, wanna extract all that data
to then store it together as one piece of data
in a JSON file let's say,
as we did it in the previous section.
Now, if that is our goal
to store the data as a whole somewhere,
then we don't even need
to extract all those different keys here.
Instead, we could just store request.body as a whole,
and that's what I'll do here.
I'll add a restaurant constant
and just store request.body in it,
and then I wanna store this restaurant value,
so this body object which we have here,
in a JSON file, which we have yet to create.
So that's what I'll do next.
I'll create this file,
and I'll store it in a data folder as I did before,
and name it restaurants.json.
Again, in there, I'll add this empty array,
the empty square brackets
so that we can then read that file
and add stored or submitted restaurants into this array,
and store the updated array back into this JSON file.
So therefore here back in this post recommend route,
I now wanna open that file,
edit the data and store it back.
For that, we first of all need our filePath again
with path.join as we did it before
with __dirname, then the data folder
and then the file name,
which was restaurants.json.
Like this.
And with that filePath,
we can open that file and read it.
For this, we need this file system package,
which is built into NodeJS,
which we also used before already.
Require it like that.
And then here in this post route,
we can now use this file system to read the content
with readFileSync.
Again, the sync part is important for now.
And then we pass filePath to that,
and this will then give us our fileData.
Now, as mentioned, even though that data might look
like an array to us,
technically, it's just some text,
and we need to translate this into a JavaScript array
with help of this JSON.parse helper,
which we also used before.
So we got our storedRestaurants here,
which we can get by using JSON.parse
on that raw fileData.
And then we can use the storedRestaurants
to add this new restaurant that was submitted here.
So for that, we can use storedRestaurants
and push this new restaurant into this array.
And then we wanna save this restaurants array.
So for that, we want to again use the file system package.
This time with writeFileSync.
Again, use the filePath from before
but the data which I now wanna store
is this storedRestaurants array,
again converted back to text in that JSON format
by using JSON.stringify here.
And then we pass storedRestaurants
as a value to stringify.
Now, that should store the data in the JSON file.
We, of course, still wanna send back a response as well.
And for this, of course, we use the response object
but the question is what do we now send back?
In the end, I wanna send back this confirm page
but we're now going to do something new.
Before, in the previous course section,
I did, indeed, just send back a HTML response.
But this had one disadvantage.
It meant that if the user ever tried
to reload the confirmation page,
he or she would get this warning
or this question whether that form data
should be submitted again.
And that's not the behavior I wanna have here,
also because I don't want users
to accidentally click on yes in this prompt
and submit the same data again,
which would cause the same restaurant to be stored again.
Therefore, instead of sending back some HTML content here
as part of the post route,
I'd like to redirect users
so that once this post request was sent and handled,
I tell the browser that the browser should switch
to a different page.
And we can send such a instruction
to the browser from the server
by using the built-in redirect method,
which is offered by Express on this response object.
And redirect takes a string,
which simply contains the path we wanna redirect to.
And in my case, that's /confirm
so that I do redirect to this path down there.
So that's now how we can redirect
once the data was submitted.
And with all of that,
we now just have to go to the recommend.html file
and configure this form correctly.
And you learned that we do this on this from element
with help of the action and the method attributes.
Action is the path, method is get or post,
and of course, here we wanna enter the data
that we did now configure in app.js.
The path is /recommend, so that's our action here.
And the method, of course, is POST.
With that, if we now save everything again,
if I reload this recommend page here in the browser,
let's try submitting this.
Now, for this, we first of all have to enter something
because I added some validation HTML attributes
and therefore, I'll add some data here like Test.
Teststreet 5, Testcity.
Now let's say this is Italian cuisine.
The website is https://mytest.com,
which probably exists
but I haven't looked it up.
It's just some dummy data, of course.
And here I'll say it's awesome.
With that, if I now click share restaurant,
we go to this confirm page,
we can now also reload this page
without getting this warning
because we redirected,
and you'll see that we redirected
because the path here changed in the URL bar.
And if we have a look at restaurants.json,
we see the data was stored there.
You can also press the auto format shortcut here
to have that in a more readable way.
So that's the data I entered.
It was submitted and stored succeeded,
and that's therefore, all looking great.
Now, let's try another restaurant just to be safe.
Here I'll name this Test 2 in Teststreet 10, Testcity 2.
This is Indian let's say.
And then here I have mygreattest.com.
It's also amazing
is what I'll enter here.
Share this restaurant.
It works.
And now if I reformat this again,
we see that second restaurant was stored as well.
So that is all working.
Now, of course, the next step
is to load that data and present it
when we visit browse restaurants.
And that will now be a major step forward
because that will now introduce a brand new topic,
generating HTML code dynamically
with help of so-called template files.