All language subtitles for 006 Passing Data from Your Webpage to Your Server_en

Now in the last lesson we looked at how we can run code inside our EJS templates.

Now in this lesson I want to continue building out the functionality of what is our main goal right?

Making a To Do list app.

So inside our App.js wouldn't it be great if we didn't have to use this massive Switch statement to

convert this day from 0, 1, 2, 3 into the actual name say Sunday, Monday, Tuesday. Wouldn't it be great if we could

just use Javascript to do that?

Well let's see if it's possible.

So if you go into Google and we search for something for example Javascript date format, then if you

take a look at this highly relevant Stack Overflow post which says, 'How can I format a Javascript date

to print in a specific way'

then you can see that there's a whole bunch of answers and the accepted answer actually has this part

where it says this answer was written in 2010.

And there's better answers below and that better answer is actually this one.

There's a method called toLocaleDateString that allows you to format your Javascript using whichever

format you wish.

So for example you can include a day as numeric or 2-digit,

then you can have a weekday day which which can be narrow, short or long.

And you can have it for different languages.

So if you take a look at their example, they've created this variable called options which has a number

of properties.

So weekday is set as long,

year is set as numeric, month is long, day is numeric then they've created a new date and they've called

this method on that date rendering it in a US English format which looks like this without the options

and with the options included

it looks like this.

So this is pretty much what we want.

And so we're going to borrow this and add it to our code.

So firstly we have to create our options,

and this is going to be a Javascript object.

And in our date I want to have a weekday to begin with.

And my weekday, the option I'm going to set is going to be long.

I want to write out the entire day of the week. Weekday which is going to be long and the next thing

is the day which is going to be numeric and finally we're going to add that month which is going to

be long as well.

So now we have our options object.

We're going to use it to render our date.

So let's create a var day.

And this is going to be equal to today.toLocaleDateString and you can see that this converts

a date to a string returning the date portion using the operating systems locales conventions and of

course that means that you have to add in the locale which is basically a region.

And we're going to use something like English US,

so en-US and if you want that date string to be rendered in Japanese or Chinese, then you can

change that to the relevant locale.

So en-US and then we're going to pass in our options to format that date string.

So now if we hit save then this formatted day gets passed in here which gets sent over to our list.

ejs as a variable called kindOfDay.

And now to clear this part up as well

instead of having this code that checks for the kind of day, I'm going to have a really simple h1 that

just logs that date string inside an h1.

So I'm just going to put kindOfDay inside this tag.

So now if we hit refresh then you can see that we get our formatted string

Thursday June the 7th.

And now that we've tidied up our code a little bit, we can get on with building out the rest of our

to do list.

So the simplest form of our to do list is simply an unordered list with a bunch of list items.

So this will generate us a bunch of bullet points with each of our to do list items.

So first one will be buy food,

then you have one called--

then of course you have to cook the food.

And my favorite part which is eat the food.

Now look at the clock

it's almost lunchtime.

And guess what I'm thinking about?

So this if we hit save will render a web page as a bunch of bullet points.

So now we want to be up to add new items to this list and in order to do that, we need to pass data back

from our web page to our server. And how have we been doing that so far? Post requests of course.

So as a challenge I want you to create a new form inside your list.ejs just as you have been doing

before inside your index.htmls.

And this form is going to have a single text input that is going to take whatever value the user puts

in there as the next to do list item. And then when you hit the submit button it's going to make a post

request to the home route.

So to complete the first part of the challenge, I just want you to create the form that is going to make

the post request inside our list.ejs in the same way that you have been doing it before inside your

other HTML pages.

So pause the video and give that a go.

All right so we start off by creating a new form and I'm going to keep the class empty for now.

And I'm going to change the action to our home run which is that forward slash or also known as the

root route. But I find root route

a bit of a tongue twister so I'm going to continue calling it the home route. But I'm sure you understand

what I'm talking about.

So the method I'm going to keep as post which is going to post the information that's inside my form

to my server at the home route.

So now inside the form we're going to add a single input that is going to have type text and the name

of this input

we'll just call it newItem. And I'm going to delete the value because the value is going to be whatever

the user inputs into that textfield.

And finally I need to add a button which has a type of a submit so that it will trigger this post request

in the form to this route and the name I'm going to keep as button but the button is going to have

a title of add.

So now if we hit save and we refresh our page we've now got an input where I can put in anything I want

and when I press add of course nothing happens. And we get this error saying, 'Cannot POST' to the home

route.

And that is because we have yet to write the code in our server to handle that post request.

So you know what's coming,

there's another challenge.

So inside your App.js, I want you to write some code that handles the post request to the home route

and just console log the text that the user wrote into that input.

So pause the video and see if you can complete this challenge. All right.

So as always we start off by writing app.post to handle post requests that go to a particular route.

And the route

in this case that we want to handle is the one to the home route.

And when that does happen, we're going to trigger a callback with a request and a response.

And inside our callback we're going to grab the value of what's inside our text box.

So remember we gave our text box a name of newItem and that's equivalent to the name of a variable.

And we can tap into that value by tapping into request.body.newItem.

But before we can use this thing called body, we of course have to set up body-parser.

Now you can write this anywhere below where

we create our app, but I'm just going to add it between the set and the get.

So I'm going to say app.use bodyParser.urlencoded.

And we're going to set the extended option as true.

Now it doesn't really matter if you set it as true or false

in our case but you do have to give it a value.

So now that we've told our app to use bodyParser, we can now grab the value of new item using this line

request.body.newItem. So we can either save this into a variable called item and then console log

it, or you can of course simply place this inside here and remove the need for that extra line.

So let's just review what happens when we press the submit button. Our form is going to make a post request

to the home route and it's going to post the value of our text input which has a name of newItem.

Now when that request is received, it gets caught inside this app.post section. And we tap into the

request

looking through the body of the post request and we search for the value of something called newItem.

So this has to match up with the name of our input in order to retrieve the value of that text input.

And then we log the value of item.

So let's hit save and let's try and give it a go. Go back to localhost:3000 and let's add a

new item, press add.

And now if we go into our hyperterminal you can see that the value of that text input gets logged inside

our console.

So brilliant.

That's now working.

So onto the next thing that we need to do.

So we've now passed the data from our web page to our server but we now need to pass the data back into

our web page namely into a new list item inside the ul. So we can start doing that by creating a new

list item and its content is going to be a EJS tag that is going to render a new list item.

So now we just have to pass in that new list item.

Now some of you might think that you could do it inside the post request.

So for example you could say res.render just as we did up here and we render our list template and

we pass in our item.

So remember the variable name was called newListItem

so I'm just going to copy it and put it in here as the key. And then the value is going to be equal to the

value of our variable item.

So I'm just going to write that inside here.

So we're going to render the list template and we're going to pass in this.

Now there's a bit of a problem here because right now if you save everything, you save the App.js and

your list.js and you try to refresh this page you will get a error. And it tells you that inside

your list.ejs on line 17

there is a problem. And line 17 is where we are trying to render our newListItem.

And the problem is a newListItem is not defined.

This is because when we try to go to localhost:3000 i.e. our home route, then we land inside this block

of code. And you can see that when we're trying to render list we're only passing in the value for this

variable kindOfDay and we're not passing in anything for newListItem.

So when it tries to render a list at this point then it doesn't actually have a value to put into this

new list item EJS tag.

And that is why our app crashes.

So we now know that every single time you try to render a list we have to provide both variables that

we want to render.

So to fix this then we would probably want to add our newListItem over to this res.render and we're

going to call it exactly the same as what we have in our template page which is newListItem and we're

going to pass in the value of this item that we've got over here. And inside our post request instead

of trying to res.render, we're simply going to say res.redirect. And we're going to re

direct to our home route.

So what this does is when a post request is triggered on our home route, we'll save the value of new

item in that text box to a variable called item and it will redirect to the home route which then

gets us over here and triggers the app.get for our home route.

And it will res.render the list template passing in both the kindOfDay as well as the newList

Item.

Now it's a little bit convoluted and it is quite roundabout. So you might have to play around with this

code in order to fully understand what's going on.

But we now have another problem.

So if I-- so if I hit save and I refresh our page you can see that it says that item is not defined.

And that's telling you that in your app.js on line

26, item is not defined.

So on this line at this point it can't access this variable called item because item was created inside

the post route.

In fact item only exists when we make a post request to our server.

So once the users type something into that text box do we actually create this variable called item.

If we try to pass it in here when it doesn't exist, that's why we get this particular error. And this

problem is related to something that we call scope in programming. And in the next lesson we're going

to be exploring scope in more detail.

But let me show you how you can fix this. Instead of having our variable created over here

we can create our variable at the top of our file.

So let's create this item variable and let's set it to equal nothing.

So a empty string.

And when we do receive a post request then we reset the item variable to whatever it is that the user

typed into the text box.

So for some of you guys you might have spotted that if we write a code like this we'll have a bit of

a problem because whenever we create a new post request then we replace the value of this item variable

and this li becomes the latest item.

So let me show you what I mean.

So you can see the last item in our list is ;Eat more food.' If I add another one

say Another and I hit add,

then it replaces our last item instead of what we want which is to add another li below the previous

one.

So essentially our code at the moment only lets us store one piece of data under this variable called

item and the old ones will get overwritten.

So what we need is to store our items in a collection.

So let's create an array.

So instead of having our variable being item, let's call items.

And this is now going to be a array and it's going to start out being empty but every single time we

get a new post request and we create a new variable called item, then we can append that item to our

array called items.

So items.push and the object we want to push is the new item that we got from our post request.

And when we pass it over to render our list view, then we're going to pass over our entire array.

So now if we hit save and refresh, you can see that we have a new problem. Instead of creating new lis

we're simply just rendering our array inside the single li.

And that's because if we have a look inside our list.

ejs,

all it's doing is just planting whatever it is that we got sent over inside this list item element.

And so if newListItem happens to be an array then all of that just gets put in here and rendered as

a single list item which is not what we want.

We want them to be all separate list items and we want to create new lis for every single new item

we add to our list.

So what we would need to happen is when we pass over an array or a collection like this, we want to loop

through it and create a new li for each item inside the array.

So essentially we would need to create a FOR loop.

So here's a challenge.

I want you to replace this line of code with a FOR loop using the EJS snippets that we learned

about in the last lesson so that we can loop through all of the items in the array and we're going to

create a single li that contains every single item inside this array.

So by the end of it you should be able to add new lis every single time you type a new to do list

item.

All right so let's give this a go.

Let's comment this line out and in it's place we're going to write a FOR loop.

So if we're going to create a new traditional FOR loop then we're going to create a variable called

i that's going to start off being equal to zero.

And it's going to run while i is less than the newListItem array.length.

And finally i is going to be incremented by 1 each time.

And at this point it's probably a good idea to change the name of this to reflect the fact that it's

now an array.

It's not a single item anymore.

So let's go ahead and change this to newListItems.

And remember that means we have to change it here as well.

And now we're going to create an li that is going to be newListItems at the index of i.

So these lines of code loops through our array

and for however many items there are in there, we're going to create a list item for each of them.

So remember in order to run code inside our EJS file we of course have to add the snippets tag on

each line where we have some code.

And inside the li we're going to render the value of newListItems at index i.

So we're going to use a slightly different tag which is the one that is a angled bracket, percentage

sign, equals in order to get the value of a newListItem at index i.

So let's delete our previous line of code and let's refresh our page.

And now if I add a new item then you can see that for every single new item I have it will get added

in to our ul and each item gets its own li.

Now we can make our code even more succinct by simply deleting all of these lis.

And instead we simply add it to our array.

So our array starts off with three items, buy food, cook food and eat food, and all three items inside the

items array will get loaded up into its own li

as soon as we load up the page. And when we add new items then it will get added to the end of the list.

So now our FOR loop takes care of rendering everything into a new li and it renders every single item

that we add into our items array.

So to summarize when we first load up our home page, we go through this route and we render our list

.ejs passing in two variables: one called kindOfDay and another called newListItems.

Now newListItems is set to equal the items array which starts off containing three strings, buy foo,

cook food,

eat food.

And this gets passed into the list.ejs under this variable name newListItems.

And over here we have a for loop that loops through the entire length of the newListItems array and

it renders a new LI for each item inside the array.

Now when a user adds a new item through the text input then that gets saved under the variable name

newItem and we trigger a post request to the home route which will be caught by this block of code.

And when we're inside this block of code we grab hold of the value of the newItem,

so whatever it is that the user typed inside here,

and then we save it to a variable called item and we add that item to our array called items. And then

we redirect to the home route.

So now we go back over here

but the items array has now increased by a size of one and our new item get pushed onto the end of the

array.

And now we're able to go ahead and render list again and pass over the now updated array with all

of our list items.

So this is a really fundamental part of templating and that is passing data through from the server

to our template and populating it with dynamic content.

So if this is at all confusing I recommend trying it yourself.

So trying to build the website as we have it right now by yourself without watching the videos.

So it might take a couple of gos and you might have to come back to the videos to refresh yourself

and remind yourself of how things are done

but this requires a little bit of repetition on your part and playing around with the code passing in

different things, looping through it, or using IF statements, using FOR statements on the EJS side

and rendering it inside the template.

But after you're done, in the next lesson we're going to talk about a concept in programming known as

scope.

So for all of that and more, I'll see you on the next lesson.