Okay.
So now what we're going to focus on is actually getting HTML implemented with our web application.
So right now we're responding with these little ugly things of text like this.
And before I go too much further, just another note.
If you know HTML, great.
If you don't know HTML, you'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 HTML.
Every web page to look at is built with HTML.
Behind the scenes, there is this markup language that is dictating what elements go where, and then
there's CSS, which we'll get to later, which makes it look pretty.
So what we're going to do is focus on writing HTML so that we can have things like a form and a button,
or we can have large text, which is known as an H one.
And we actually can do that right now in a really hacky way.
So let's say, rather than just, well, let's do it for my joke, what I could do is make this joke
italicized part of it.
So I'll say, what do you call a dog that does magic tricks?
And I'll italicize the answer by putting around it the m tag, which is how you make things italicize,
sense for emphasis.
So if I just put HTML inside of this string and actually I can make this bold too, so I'll do strong.
First thing you should notice if you've ever written HTML, 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 more just showing you it's possible to have HTML in there.
So if I go to slash joke.
You can see I'm getting HTML 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 the HTML to make a form instead of this 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 with CSS when we get there.
So to jog your memory, this is what we're working towards.
This is what our app will look like.
We have a big background photo of a beautiful mountain in Argentina.
Then we've got join us.
Big text, different font, different color.
Then we've got this other text.
Enter your email to join 500 or whatever the number of users is.
Others on our waitlist we are 100% not a cult and then we have a form with a single item in it or a
single field, 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 what we what
it looks like.
This is 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, this single string with this.
And to do it, there's a couple of steps we have to take.
So here is the HTML itself.
You don't want to type it.
This is the HTML we need.
We've got an H one.
It says, join us.
We've got a paragraph.
We'll come back to this class.
We 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 the HTML, the correct HTML to make that
page.
Now how do we actually get this to be sent back?
What we want is in this route, when you go to slash, basically give the user this.
We can't just make that a single string.
So what we do is use something called EJ's and you'll have to bear with me here.
There's a couple of steps we have to go over.
And if you're a 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 this is what's known as a templating language stands for embedded JavaScript.
It's an alternative to writing just plain HTML.
It allows us to add in variable values and code logic.
So this is where's that slide?
If you go back here, this is HTML, 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 HTML.
But right here in that strong tag, in the bold area, there's a variable, but you can't do a variable
in regular HTML.
So that's what we're going to use edges for.
It stands for embedded JavaScript.
It's just HTML 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 EJ's.
This is to you should know by now hopefully that this is going to tell our app and our package that
JSON that we want Edge's installed and it should install it and save a record to package JSON, which
you can see now we have edges there.
That's our first step then.
We're going to do something else.
This is configuring our express application app set view engine comma edges.
So app set 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 Jade, which is a common one, Hamil, there's other languages.
So basically they are similar analogs.
tJS So we'll go do it at the top.
It's a traditional place to do it, just like we're setting up our connection up here.
It makes sense to set and to configure application wide things up top.
So we'll do that.
And then the next step is where do we actually start writing these files?
And to show you that I'm actually going to work backwards.
So the line that we'll be running in our route that will actually render a file is 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 is it will automatically look for a directory called Views.
That's a standardized name, so it's going to look for a directory called Views.
You can change that if you wanted 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 in our case.
So it's going to look for home dot edges in that view's directory.
So what that means is we need to create a views directory and then we need to create a file, we'll
call it home, but you could call it landing page, CJS or root JS, whatever it is, you just need
to remember the name.
So let's do that now.
We'll do right click or you can do make directory.
If we're more comfortable with the terminal new folder views inside of there, we'll make a single file
which we will call Home Edge's again, you could call it whatever as long as it ends in Edge's and you
remember what you call it, and we'll start with a single H one.
We'll just say This is HTML and save it.
Then we go to our Edge's and let's just work with our root root rather than sending resend.
We have count.
We're no longer working with resend.
We have a rest render home.
Just I'm going to be a broken record.
But it's looking for home DJs because we added this view engine is aegis 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.
Starter App.
Let's try going to the home page.
There we go.
This is HTML.
Our other pages still have well, this one is HTML, but it's not coming from a separate file.
So then what we can do next is I'll just show you.
You could use rest out, render home, you can send the same file and all of these instead of resend.
You can reuse files in different routes.
It doesn't matter.
So here we have the same thing for joke.
So now if I go to slash joke as well.
I get the exact same thing.
So these don't care about what they're called.
The name of this has nothing to do with the root, although it should if you're just following best
practices.
I'll get rid of that.
So now let's just copy the HTML that I provided here so that we don't have to type it all ourselves.
So in home PJs, I'm 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 the file.
Now we get our form so we have join us, which is our H one, which is what we started with.
Then we have a paragraph again.
Don't worry about the class at all.
For now you can actually just get rid of that if you want.
Just focus on keeping it simple.
Then we've got enter your email to join and said the paragraph.
All of this is in the paragraph.
There we go.
518 is hardcoded for now.
We're about to replace that.
We are 100% not a colt.
And then we've got this form which we're just going to ignore for now, except know that there's a text
input and a button which we get that all looks good.
And in fact we can clear out that form and just leave it like this to start.
Okay.
So now what we want to do is figure out how we get our data in here, because right now this is just
plain HTML.
There's no use for this EJ's stuff that I was talking about.
But the whole point is that we want this to be five, 19, five, 24, 99, 10,000, whatever the result
of this is, whatever count is.
But how do I get count this variable over here?
What we do is after resort 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, I'll do data.
Is count.
I'm going to change it later.
But just to show you, they're distinct.
So what this does now is it says, okay, take count, whatever it is, which last time we counted is
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 of here, if I refer to data.
It will be referring to whatever account was.
The problem is, I can't just say data if I just do that and refresh.
We just get into your email to join data others on our wait list.
So I need a way of saying, hey, this is not you know, this is not HTML, 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 say HTML, the angle brackets, but then percent equals and then
percent on the closing side.
And this is basically a signifier that says this is not HTML.
Whatever is in here is going to return a value that we want to put in the HTML.
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's a lot of moving pieces here.
Unfortunately, we don't have we don't really have time.
I guess we could we could have time.
But the course isn't on EJ's.
It's not on web development.
This is just a vehicle to showing you how to make something.
So data will be count.
Whatever's coming through there, let's try it.
And we've got 501.
And of course, we could insert one more user very quickly.
Let's do Austin.
Two, three, four.
Refresh our 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 I'm going to 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, get slash that's activating the route.
When I go to this URL, we still have our slash joke, for instance, but we're talking about the root
root.
When I hit that root, 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 star as count from users that's coming back stored
in results.
Inside of results, we're finding it the reason it's stored undercount is because of this.
AS So if I call this counter, then this needs to be counter.
Okay?
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 this file which is automatically
looked for in the views directory, which is right here.
We have a bunch of HTML in here, some of which we haven't talked about yet.
But then we have this one variable with this very weird syntax that we haven't seen before.
This is our way of saying, Hey, this is not HTML, this is a special value.
We can put JavaScript in here.
And just to show you a couple other things, I'll do another H one and then our funky bracket thing
again.
And I can actually just do simple math in here.
Let's do something like four 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.
So I favorite color, highly underrated.
Pass that in over here.
I can refer to my favorite color.
Why we would do this?
Well, that's another question.
But I'm just showing you that.
Oh, boy.
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 app.
JJ's file.
Now we get purple is coming through.
So the only difference is that data right here is not something we're coding in ourselves.
We're not hard coding it.
It's coming from the database.
From all this work running the query and then basically extracting the data out and saving it to the
count variable.
And then the last thing I'll do is change this to be count because data is just a bad it's a bad name
for a variable.
Everything is data.
But the reason I called it data again was just to kind of show you 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.
Okay.
So let's just make sure it's still working.
Refresh.
Enter your email to join 502 others on our wait list.
We are 100% not a cult.
Perfect.
We're done.