Okay. Now what I'd like to do is update our shopping_list
app to use all of these techniques we've just learned with
templates. So first thing what we're going to do is going to get
rid of this code that we've been playing around with. [SOUND]
I get rid of this n equals n, we don't need
that anymore. Then we're going to go to our shopping list and
get rid of this stuff. We don't need this anymore. [SOUND]
Okay. Let's go back to our browser and make sure things okay.
When we reload this we see our basic shopping list. Type
in food and it appears in the URL. We could type in
different food, milk, and it updates that parameter in the URL. Now,
let's go ahead and add in the functionality that we had before
with the hidden input elements and actually showing the list of
foods that we had added so far. Okay, now, first thing we
do is we can get rid of all of this, well, most
of this stuff. Let's uncomment it for now. Okay, so we don't
need any of this HTML junk anymore. This stuff
is nasty, so let's get rid of all that, and
we don't need any of this stuff. And, this line,
can just go there. Okay, so, we're just going to get
our food, get all get perimeters food out of the
URL, store them in items and we're going to pass items
into our template. Now the variable names don't always have
to match when you're passing things into the template but,
I find very often they do. Generally makes your life a little
easier because then, when you're thinking
about, you know, you're often working in
your template and in your handler. It's handy to just call things the
same thing, so, you known, you don't have to do that translation in
your head. Now we had all of this HTML up here, we're not
going to use this anymore so let's just g a head and get rid
of it. Now let's go ahead and update our shopping list template. Okay,
so the first thing we want to do is add in hidden input elements.
So, if items four item and items. let's
add our hidden input. Input type equals hidden. Name equals food. Value
equals, item. Notice, we can substitute our variable right in the
middle of this HTML here. Because in the template the HTML is not special. It's
just, it's just a string. And we can
substitute anywhere into the string that we want.
Let's close up our loop. Okay. Let's make sure this
part worked first. Recall if this part works, we should
see things appearing in the URL. So it's always good
to test as you go in case you make a mistake
you don't, you don't, have that mistake for too long.
Okay, milk, and now if I add eggs, I see eggs
and milk in the URL. Let's add some more food.
You can see things are starting to accumulate in the URL,
which means if we look at the source that our,
template is actually working and we're adding all these hidden
inputs. Notice the white space is all messed up. It's
not a big deal. It's basically because our template includes white
space. And it's getting put in here literally. But HTML
doesn't care about extra white space. All is well here
so far. Back to our template. Let's add that shopping
list to the bottom. So again, only if we have items,
if items. We're going to say we're going to add a
couple of blank lines. This not the best way
to add blank lines but it works for us. Okay. We do our shopping list and it is
going to be an, let's say, an unordered list. Now,
for each item and items list that item. We'll
go to unordered list. And our if statement, and
let's indent everything, and let's, let's fix our indenting. Okay.
And let's see if this works. Close the source,
reload this page, and we load this page. And there,
behold, is our shopping list. Let's add some more items.
Cheese, it appears on our list, it appears on our
URL and if we view the source of this page,
we can see our hidden inputs here. And we can
see our shopping list down here. And if I were
to modify this URL we can see that everything disappears.
Likewise, if we delete it here, [SOUND] everything goes
away. Okay, very cool. Now, looking at our code
this is much simpler. We have our, our parent
class, that just has our simple rendering functions and
then our main page handler, has actually gotten a
lot shorter. All it does, is it gets the
items out of the URL, and passes that into
the shopping list template. Which, now has the structure
of the HTML that we're actually generating, and this is
a lot easier to think about than that madness we
had before with string substitution and string concatenation, and all
of that. That was very difficult to read. And everything here,
works you know, much more smoothly. Now there is one
little problem that I'd like to show you. Let's add some
food here. Now we can just auto complete our food,
because our shopping list is learning our tastes. What happens if
I really want some pizza and I put our
pizza in an H1. Okay, nothing. The HTML is
not interpreted and the food is just added directly
to our list. Or the raw HTML, in this
case, the H1 is displayed. Or HTML actually rendered,
in which case our food appears very big in
our list, in this particular case. Why don't you
go ahead and try yourself and see what happens.