Node.js Tutorial for Beginners - 20 - Adding More Pages Video Lecture | The Complete NodeJS Developer Course - Back-End Programming

alright punks welcome back in in this
video I'm going to show you how to add
additional web pages to your project so
right now our website looking pretty
bland this of course is just the home
page it's the only page that we have it
says Bucky tuna tuna tuna tuna tuna my
five favorite foods however people are
coming to this site and you're like Noah
this is pretty cool but I want to learn
more about Bucky I wish there was an
about page maybe a like his profile page
whatever so let's go ahead and do that
right now
now before we start adding a whole bunch
of pages we already know that we're
going to need some kind of navigation
system so users can actually click links
and go back and forth between pages
every website has it so you're like all
right I'll just write the links right in
every single ejs file boom it'll be good
to go well here's the problem with that
what if we want to add a new link to the
navigation menu at the top well that
means that we're going to have to go in
every single webpage and add a new link
manually so I show you guys how to take
care of that problem to where you only
have to worry about it in one location
so these are the files that we're going
to be adding the first thing we're going
to do is we're going to right click
views and add a new directory and I'm
just going to call this templates now
inside this new directory what we're
going to do is we're going to add one
new file and this is going to be for the
navigation at the top it's called header
ejs hit name it navigation to EGS but
since it's going to be at the top I
think this is a little more clear in
alright so before we start typing all of
our navigation code in here I just want
to add the other files water edit so the
one other file that we're going to be
adding in the views is we'll just say
we'll add on like an about page so we'll
say about ejs so essentially our web
page is going to have two pages our home
page and about page
once you learn how to add a one
additional page you guys are going to
learn how to add you know however many
you want so no use doing it repeatedly
now again anytime we add a new view we
also need to add a new route the brains
behind it so new file and it's the name
of your view or page is so here is
what's going on how can I organize this
alright let me do this so we have fjs
the index view or excuse me the index
route the about route the index template
in the about template and of course the
hetero Jessa's gonna be our navigation
that's going to go at the top of every
single web page so I'll just put some
basic links in here a href and let me
just copy this a couple times and I'm
going to separate my links with a pipe
symbol and this is the little symbol
above the enter on your keyboard so let
me actually add three links alright so
the first one whenever they click it
it's going to go to the home page the
second one is going to go to the about
page and the third one I'll just pull
the link 3 because we won't make a page
we'll just make a dead link but I don't
know if we ever want to add a page
that's where it would go now the path to
the home page is we already know is just
that forward slash and the path to this
about page is about and remember you
don't need to add the file extension
because it already knows whenever we set
up our project exactly what to do taking
care of for you so now we have a pretty
sweet navigation system the first thing
we need to do is I say the first thing
but it's like 4 minutes into the
tutorial clearly not the first thing
we're doing the 18th thing we need to do
is we need to include it in our index
page on our home page so anytime we want
to include a little bit of JavaScript
already learn how to do that just write
include and remember the location of
this our navigation
is in templates header ejs so include
templates so header e je s so actually I
can go ahead and run this ring now you
guys can see what's going on so again
this is our navigation in if I inspect
this you guys can already see it took
the code from hetero js' and it included
it right where we wanted to pretty
awesome
alright so now back to our project what
we can do now is actually just take this
entire thing and stick it in about EJ s
in a little bit alright so in about EJ s
the about page I don't want the same
stuff is my home page because that'll
look weird I'll just say like on just
say heading 3 it will be good so I'll
give it a heading of about and what is
something neat about me so I'll say hi
my name is Bucky um let's see I thought
cheese from pizza was a vain and I was
scared if you guys have no idea what I'm
talking about then you guys are missing
out because you missed a good story in
one of the last tutorials alright so now
we have a view for about and index look
in sweet actually let me change this
title to about as well alright so now
what we need to do is we need to set it
up first in app J s so essentially what
we're going to do in F KS is a let our
program know hey we made a new page so
whenever the user requests that page
this is how you handle it it only takes
two lines of code pretty simple
if you copy this so this is for whenever
you required the home page we can just
change this to about and of course we
need to change the variable to about so
now the about variable is equal to this
file right here simple and if you go
down here add one other line of code
about about alright so what we're saying
here is whenever the user makes a
request for the about page use this
right here in this is just as you can
see this file right here which is empty
but we can change that right now and
this is actually going to be really
similar to index such as so we can just
paste that in there and what do we want
to do here first of all right now what
this is saying is change my comment
right now what this is saying is
whenever the user requests the about
page then display the index view with
this information and of course we don't
want to display the index view which is
this we want to display the about ejs
file so I'm just going to change that to
about and what information do you really
want to pass in we don't need the title
actually let's do that we can set the
title equal to abouts and we'll keep the
name equal to Bucky so now over in our
view what we can do is this
instead of the title you can use the
variable title and we can actually stick
this in our heading as well and for my
name instead of typing that we can
actually just use that variable simple
enough so let me go ahead on that bad
boy refresh it and check it out so the
home page looks good about awesome it
looks like our variables are being
passed through right there and right
there
link three of course it doesn't do
anything because we didn't make any page
for it but now we have a suite
navigation system looking awesome and
the cool thing about this as well is
anytime we want to make any change
navigation system we don't have to make
any changes on every single page one by
one by one all we have to do is change
it right here and automatically updates
on every other page pretty awesome so
there you guys go that is how you add
additional pages again remember just to
add a new view a new route and make sure
everything is set up correctly in fjs
again just two lines of code and yeah
simple as that you're good to go so
thanks for watching and uh well that's
it and tutorial what are you still doing
here just go to next alright I'll see
you guys later