OK so now what we're going to focus on is actually getting each team implemented with our web application.
So right now we're responding with these little things of text like this.
And before we go too much further just another note if you know him out great.
If you don't know Tim I am he'll just sort of have to hang on for the ride here.
I'm sure you've heard of it.
Well I guess hopefully I'm not assuming too much but most you've come across age Tim.
Every web page to look at is built with age him.
Behind the scenes there is this marketplace guage that is dictating what elements go where and then
there CSSA which I'll get to later which makes it look pretty.
So what we're going to do is focus on writing aged him out so that we can have things like a form and
a button or we can have large text which is known as an H1 and we actually can do that right now and
it really hacky way.
So let's say rather than just.
Well let's do it for my joke.
But I could do is make this joke.
I'd talus sized part of it.
So I'd say What do you call a dog that does magic tricks and all type italicize the answer by putting
around it the E-M tag which is how you make things.
Italicize sense for emphasis.
So if I just put him out inside of this string and actually I can make this bold to say I'll do strong.
First thing you should notice if you've ever written to him.
This is a horrible way to write it instead of a single line like this.
It's just not a good experience so we're going to see how to get around that.
But I'm just showing you it's possible to have Tim Allen there.
So if I go to slash joke you can see I'm getting him out.
That's being rendered properly properly.
So if we wanted to get like a form on our home page which is what we want eventually by the end of this
video we could put all of h tim out to make a form instead of the string.
But it's going to be significantly longer than this.
So we're not going to do that.
And there's a bunch of reasons why the main one is that it's a pain but it's also hard to change things
and it doesn't really allow us to style it.
SS When we get there.
So to jog your memory this is what we're working towards.
Here's what our app will look like.
We have a big background photo of a beautiful mountain in Argentina and we've got.
Join us.
Big text different font different color then we've got this other text.
To your email to join 500 or whatever the number of users is.
Others on our waitlist.
We are 100 percent not a cult.
And then we have a form with a single item in it or single fields a text field and then a button that
will submit the form.
But if we strip away all the pretty styling all the makeup or paint on top.
This is probably what it looks like.
This is you know the bare bones of it.
So this is what we'll get to by the end of this video.
So this will be our home page.
We are going to replace the content here.
The single string with this and to do it there's a couple of steps we have to take.
So here is the HTML itself if you don't want to type it this is the Timah we need.
We've had an 81 and says join us.
We got a paragraph.
We'll come back to this class.
You don't need that actually right now.
But then we've got enter email to join strong which is the bold around 518.
Then we've got a form which will also come back to.
So I'm just showing you this is all we need to actually make him I'll at the correct time out to make
that page.
Now how do we actually get this to be sent back.
What we want is you know in this route when you go to slash basically give the user to this.
We can't just make that a single string.
So what we do is use something called Ejay Yes.
And you have to bear with me here.
There was a couple of steps you have to go over and if you're new to web development this will be a
bit intimidating possibly.
It's probably a terrible thing for a teacher to say but just hang in there just know that we're going
somewhere and some of the steps along the way may be confusing but once we get there it won't be too
bad.
So E.J. this is what's known as a templating language stand for embedded javascript.
It's an alternative to writing just plain edged him out.
It allows us to add in variable values and code logic.
So this is where it's that slide I go back here.
This is H Tim L but this right here is not always 518.
So we couldn't do that in a normal HTML file we would want to be able to say okay this is Tim.
But right here in that strong tag in the bold area there's a variable but you can't do a variable in
regular h him up.
So that's what we're going to use Ejay ask for.
It stands for embedded javascript.
It didn't just HMO that allows you to embed javascript inside of it.
So we'll see how to do that in a moment.
But the first thing we have to do NPM install dash dash save.
Yes this is you know you should know by now hopefully that this is going to tell our app and our packages
are based on that we want yes installed and it should install it and save it record to packaged Jaison
which you can see now we have Ejay us there.
That's our first step.
Then we're going to do something else.
This is configuring our express application set view engine Khama.
Yes.
So apps that said is a method that allows us to set certain settings in our app view engine is the most
common one to change.
There are other templating engines there's things like Jayde which is a common one Hammil.
There's other languages.
So basically they are similar analogs T.J..
Yes.
OK so we'll go do it at the top is a traditional place to do it just like we're setting up you know
our connection appear and make sense to set and to configure application wide things up top.
So we'll do that and then the next step is OK where do we actually start writing these files and to
show you that I'm actually going to work backwards so the line that will be running in our route that
will actually render a file is redstart render some string.
In our case home and the process that will happen behind the scenes that express doesn't really show
you or tell you about it it will automatically look for a directory called views.
That's a standardized name.
So we're going to look for a directory called views you can change it if you want it to but we're not
going to.
And inside that directory it's going to look for a file called home dot whatever the view engine we
said which is Ejay us in our case so it's going to look for home.
Got you.
Yes.
In that View's directory.
So what that means is we need to create a directory and then we need to create a file we'll call it
home.
But you could call it landing page yes or route study.
Yes.
Whatever it is you just need to remember the name.
So let's do that now.
Will do.
Right click where you can do make directory of whom are comfortable with a terminal new folder views
inside if there will make a single file which we will call home.
Yes.
Again you could call it whatever as long as it ends and Ejay.
And you remember what you call it and we'll start with a single H-1 we'll just say this is HMO and save
it.
Then we go to her.
Yes.
And let's just work with our route rather than sending results and we have count.
We're no longer working if rest does send.
We have a restaurant render home test.
I'm going to be a broken record but it's looking for a home.
Yes because we added this new engine is Ejay Yes and it's looking in views by default.
So we need to make sure we have that file.
It's going to take the contents of this file and send it all back rather than a single line.
We can write our code now in a separate file.
So let's see if it works.
Start her app.
Try going to the home page.
There we go.
This is aged him up.
Our other pages still have.
Well this one is HDMI out but it's not coming from a separate file.
OK.
So then what we can do next is I'll just show you.
You could you know use rest out render home you can send the same file in all of these instead of just
send.
You can reuse files in different routes.
It doesn't matter.
So here we have the same thing for joke so for now if I get a joke as well I get the exact same thing.
OK.
So these don't care about what they're called.
The name of this has nothing to do with the route although it should if you're just following best practices
to get rid of that.
So now let's just copy the time that I provided here so that we don't have to type it all ourselves.
So I went home that E.J. is just going to paste this in.
We'll go over what some of this is.
In particular the form we haven't talked about but let's just get this in here and see how it works.
So we have to save a file.
Now we get our form.
So we have join us which is our H-1.
So we started with and we have a paragraph again.
Don't worry about the class at all for now.
Can actually just get rid of that if you want.
Just focus on keeping it simple.
Then we've got end to your e-mail to join in said the paragraph.
All of this is in the paragraph.
There we go.
518 is hard coded for now.
We're about to replace that.
We are 100 percent not a cult.
And then we've got this form which we're just going to ignore for now.
Except know that there's a text input in a button which we get all looks good.
And in fact we can clear out that form and just leave it like this to start OK.
So now what we want to do is figure out how we get our data in here because right now this is just plain
to him.
There's no use for this Ejay a stuff that I was talking about but the whole point is that we want this
to be five 19:5 20 499 10000 whatever the result of this is whatever count is.
But how do we get count this variable over here.
What we do is after resod out render we can pass a comma and pass a javascript object and I'm allowed
to pass data through.
So what we want to send is count.
But first I have to give it a name.
So typically you'll see something like this.
Count count rather than that all do data is counted.
I'm going to change it later but just to show you they're distinct.
So what this does now is it says OK take count whatever it is which last time we counted as 501.
Send that to this template and give it the name of data basically put it in an object under the key
of data.
So inside if here if I refer to data it will be referring to whatever count was.
The problem is I can't just say data.
I just do that and refresh we just get into your e-mail to join data others on our list.
So I need a way of saying hey this is not.
This is not each tim Elvis this is special.
This is code and the way we do it.
It's weird if you've never seen it before.
It looks like this.
So we have brackets just like we would.
Tim Alba angle brackets.
But then percent equals and then percent on the closing side.
And this is basically a signifier that says this is not age timeo whatever's in here is going to return
a value that we want to put in the HMO.
So if data is equal to 500 it will be replaced with 500 If it's equal to 12.
It will be replaced with 12 kind of a lot to take in as I was saying there is a lot of moving pieces
here.
Unfortunately we don't have well we don't really have time I guess we could we could have time.
But the Course isn't on.
E.J..
Yes.
It's not on web development.
This is just a vehicle to showing you how to make something.
OK.
So data will be count whatever's coming through there.
Let's try it and we've got five on one.
And of course we could insert one more user very quickly.
Let's do Austin.
Two three four refresh refresher page now it's 502.
So we've accomplished our goal.
If you feel comfortable with how it's working.
Go ahead.
Stop move on to the next video.
If you have a couple of questions so go through the process again.
I'm not going to recreate it but I'm going to step through what's happening.
So we'll start with this app that get slash that's activating the router when I go to this you are well
we still have our slash joke for instance we we're talking about the route route when I hit that route.
First thing that happens is this code runs which the end result is it figures out how many users are
in our database.
It's running this code in our database.
Select count start as count from users that's coming back stored in results inside of results.
We're finding it the reason it's stored under count is because of this as.
So if I call this counter then this needs to be done counter.
OK.
So then we're storing that in a variable called count.
So this has something like 501 in it.
Then what we're doing can get rid of this line now is we are rendering the home that Ejay s file which
is automatically looked for it in the directory which is right here.
We have a bunch of H-2 melon here some of which we haven't talked about yet but then we have this one
variable.
But this very weird syntax we haven't seen before.
This is our way of saying hey this is not h tim Jim.
This is a special value we can put javascript in here and just to show you a couple other things I'll
do another one.
And then our funky bracket thing again.
And I can actually just do simple math in here.
It's something like 4 times 98.
This will run as JavaScript whatever the result is I'm terrible at mental math will be printed there.
So if we refresh our page we get 392 and we could also pass in another piece of data like favorite color
and I'll just say it is purple which is true color highly underrated.
Pass that in over here.
I can refer to.
Favorite color.
Why we would do this.
Well that's another question.
But I'm just showing you that way.
Here we go.
Favorite underscore color.
We have access to whatever we pass in here.
So favorite color is the string purple.
I will need to restart the server.
If we are changing our Actually yes file now we get purple it's coming through.
So the only difference is that data right here is not something we're coding in our cells are not hard
coding and it's coming from the database from all this work running the query and then basically extracting
the data out saving into the count variable and the last thing I'll do is change to be count because
data is just a bad to bad name for a variable.
Everything is data.
But the reason I call the data again was just to kind of show you that there's a difference.
It can be confusing at first if you see count count which one is which.
This is the value we're passing and this is the label for it.
This is the key.
OK.
So just make sure it's still working.
Refresh your email to join 502 others on our waitlist.
We are 100 percent not a cult.
Perfect.
We're done.