So it's time to add a couple of views.
And for this, I will again use the EJS view engine,
which is the view engine we've been using
throughout this course,
which is one of the supported view engines
you can use in your Node Express apps.
It's an extra package that allows us
to write HTML code with extra features
and placeholders,
which will be evaluated on the server site
before the finished HTML code is served to our visitors
and which therefore allow us
to enrich our HTML pages with dynamic content.
Hence, I'll open the terminal again
and run NPM Install EJS to install this EJS package,
this template engine package into this project.
And then app.js,
we now need to activate this package.
We need to make Express.js aware of the fact
that we wanna use EJS for handling our templates.
For this in-app JS, here,
after defining this app object,
we can call app.set to set some options
for this express app.
And here I wanna set two options.
The first option is the view engine option,
and that's a string you have to use here.
That is a option express we'll look for,
and I'll set it to EJS
to tell Express that I wanna use the EJS package
for rendering my views.
The second option I will set here is,
the option to tell Express where to find my views.
So that option's named views.
And the value for this option,
so the second parameter value I pass to set here
is a path to my views.
Now for constructing this path,
it is recommended that you use the built-in path package.
We don't need to install that
because it's built into Node.js already,
because this allows us to create a path
that will be recognized on all operating systems.
And on this path package which I'm now importing.
We can call the join method to create an absolute path,
which will be correctly formatted
for different operating systems
to a folder in this project of our choice.
And for this,
I wanna start with a path to the overall project folder
and NodeJS has a built in global variable for that,
the __dirname variable,
which is simply a path to this project folder.
And then as a second parameter value to join
I'll pass in views.
To construct an absolute path to
this views folder in this project.
And with that, we make express aware
off that views folder
and that the views in there
should be handled by EJS templating package.
So therefore now as a next step here in the views auth,
I'll add two files,
a signup.ejs file,
.ejs since that is the extension.
the EJS package we'll look for
and login.ejs.
Now these files should display different forums
for allowing users to create accounts
and allowing users to log in,
but they will also have some parts in common.
Now for example, the main navigation bar should be the same.
Also the head metadata should be the same,
at least partially the same.
And you'll learn before
that we can leverage a feature called Includes
when working with EJS,
to reuse code
or to outsource code into different files,
and then use it in as many other EJS files as we want to.
And I will create such commonly shared EJS includes,
but I will not just use them in sign up and log in,
but instead, also later in my cart
and products related views.
And therefore I will create a new folder
in the views folder,
which I'll name customer,
and in there I wanna have some general views
or includes that will be used
in all the customer facing parts off this site.
I already have an admin folder
for the admin specific views we'll need later.
Here I wanna have customer specific views
and in customer I'll add a includes folder.
And in there I wanna have all the includes
that will be used in my different customer facing views.
And now with that,
it also makes sense to take the auth, cart
and products folders
and move those into the customer folder,
so that we now actually have admin and customer
as a root folders in the views folder.
And then we have the feature sub folders in customer,
and we have the includes folder for any shared views
that we wanna use in different features.
And in this includes folder in the customer folder,
I will now add my shared templates
and that will be the head EJS file for the head element
and some shared metadata
and header.ejs for the shared header,
which will also hold the navigation.
And let's now maybe start with head.ejs.
In head.ejs I wanna set up a base skeleton.
For this all type exclamation mark here.
And I get the built in all the completion
and visuals to do code,
to get this base HTML skeleton.
Now, I don't wanna have the full skeleton in here,
just the doc type and the opening HTML and head text.
I will remove the closing head tag
and all the other part below that
because I just wanna use this here
as a part of my other main views,
so that here we have some shared meta setup logic.
Now we can leave the default setup here.
I just wanna make the title dynamic
and for this all use a EJS feature,
a EJS tag,
and you learned that you create those tags
with the smaller than percentage
and percentage greater sign symbols.
And I wanna output the page title here
and there with the equal sign,
that is the EJS tag we can use
for straight outputting values
in the finished rendered HTML coat.
And the idea is,
that we can then set the page title
from inside other views,
which include this head the view here,
or this head template to be precise.
Now we are going to add more things
to this head EJS file,
for example, some Google funds,
but for the moment I'll save it and close it.
And instead work on header.ejs
and in there all create a header,
so the header HTML element like this.
And in there,
we can then set up the different parts
that should make up this header,
and we'll add styling later.
But for the moment,
I'll just add a div in here with my logo
and I'll name it
WDE for web developer essentials.
That's my shop.
I'm selling web developer essentials.
So that's my shop name.
Of course feel free to pick any name you want
and actually I'll make it a link.
So I typed a here and hit tap to use this auto completion
and then put WDE between the link tags.
And then here,
the link will lead back to the starting page
with just slash nothing.
So that's the logo so to say,
which I'll have in the header.
I then also of course wanna have some navigation items
and for this I'll add a NAV element,
type NAV and hit tap to auto complete it.
And then there we'll then set up
the different navigation links
and we'll come back to that later.
For the moment I'll just set up the empty shell
and that's it for now.
This is not the final header.
We'll add way more to it.
Also a responsive mobile menu
but it's just a,
it's a first start, I would say.
Because now with that set up
with head EJS and header EJS,
we can go back to signup EJS
and start by including head and header.
And then by setting up the signup form here.
Now we include with our EJS tags.
The only special thing here,
is that we don't use the equal sign here,
but the dash.
This as you learned,
does take some code and not escape it.
And that's exactly what I want here.
I wanna take this a raw HTML code I just wrote
and include it and parse it as HTML.
The browser should treat it as HTML.
So I don't wanna escape it.
Hence I use the dash.
This is not a security issue
because this is HTML code written by us.
It's not user-generated content.
It's always a user-generated content
where you wanna be careful.
Now here we can then include,
and now between quotes actually construct a path
to the file we wanna include.
And here at the moment,
I'm in the signup EJS file,
in auth I'd wanna include the head EJS fall in includes.
So therefore for first of all,
I need to go up one level,
so that I'm inside customer.
And then I can dive into includes and point at head EJS.
And this works just as it does
for the imports in the JavaScript files.
We go up one level with ../,
then we can dive into the includes folder
and then we can point at head
and you don't need the extension here,
EJS will automatically look for EJS files.
What I do need here though,
is a value for this variable I'm expecting
and head EJS page title.
So therefore here in signup EJS,
as a second parameter value after the path
I'll pass in curly braces,
opening and closing.
So a JavaScript object in the end,
and set a value for the page title key.
And this can be any value of your choice.
It could be coming from a controller
that is rendering this template
but here I'll just hardcode it
and say, sign up.
Now then keep in mind that we include this head part,
which does not have a closing head section tag.
Therefore then after adding this include here,
I will close head and then actually
add body opening and closing tags.
And then at the end also close HTML.
So that we have a valid skeleton again.
Now, since we always wanna close body and HTML,
I'll also cut this here
and add a new footer.ejs file.
Something we haven't done before in this course
but a simple utility view,
which holds the closing body and HTML tags
and any other footer logic you might wanna add,
so that in signup EJS I can actually include,
going up includes footer
and I don't have to manually add the closing tags.
Of course here we're just saving two tags
that we would have to write otherwise
but if you have more footer logic,
this would be even more useful.
And now with that,
we got the body here.
Now we can start working on our form here
on the signup page.
Actually I'll not add it like this,
but instead start by adding the main HTML element
to mark the main area of this page.
And before I do that,
I want to include, going up, includes header
so that this main navigation bar is included first
in the body of this HTML document.
And then I have the main element
with the main page content.
And in here I just wanna add a h1 element
where I say create new account
and below that I then want to have my form
for creating that account.
Now I'll come back to action and method later.
These are the attributes we add to form elements
to configure the form
and what it should do once it's submitted as you learned.
For the moment I'll not configure it yet though
because we don't have any backend logic
for handling the form submission anyways.
Instead at the moment, the goal is to add all the fields
we need in that form.
And we'll need quite a lot of fields here
because we will need to get the email address
and password of a new user
and confirm that email address
but we'll also need the real address.
So the name of the user,
the street,
the postal code,
the city.
And these are all extra pieces of data,
which I wanna fetch.
So we'll continue working on that in the next lecture.
Of course,
as always feel free to get started on this on your own
and start working on this form on your own already.