Now, for this course section,
I prepared a simple starting project,
which you find attached.
This starting project contains an
app JS file,
a package.json file and a front-end site folder.
Now you'll see a couple of other files
and folders for me here,
and you get those extra files and folders.
Namely the package-lock.json file,
and the node modules folder by opening this integrated
terminal here in visual studio code.
And by then running NPM install in that attached starting
project, which you download it and extract it.
If you then ran NPM install in that folder,
this package-lock.json file should be created for you.
And more importantly,
the node modules folder should have been created for you.
You can ignore this, git-ignore file,
this has nothing to do with node or express.
Now, you will notice that the app.js file is totally empty
because we're going to work on that together.
But I first want to dive into that front-end site folder.
And in there we got to go to old HTML,
CSS and JavaScripted driven website.
As we built it multiple times in this course,
before we had a look at all these back-end related topics.
And indeed the content inside this front-end site folder
has nothing to do with node JS or express,
though,
we're going to change this fraud discourse section.
Now, we can have a look at this
starting front-end
site here,
by right clicking on index HTML
and opening this with the live server extension,
which we also use before in this course.
If you do that, you should see a site that looks like this.
Now, obviously the styling of this site is probably not the
fanciest you have ever seen,
but it's a great demo site for exploring static and dynamic
content and how we can use node and express to serve a real
website with dynamic content.
So it will be a great example for this course section.
And now here we have the starting page and does overall
website will be about sharing restaurants that we like or
browsing restaurants that have been shared by other users of
this website, other visitors,
and hence on the starting page,
we can either browse existing restaurants. And we got some
dummy data here, this link won't work.
It's just a dummy placeholder.
Or if we go back to the starting page by clicking the logo,
we can also share our favorite restaurant with this form
here.
We can also use the links here in the navigation to switch
between these pages.
And we also got the dummy about page here,
which just shows some static content.
Now you can and should definitely go through the code for
that,
but it won't be anything you haven't seen before.
In the recommend HTML file,
we've got this form with input elements, labels,
and a text area and a button.
And, on the form element itself,
you will see that we have no action or method yet because
we're going to add that,
together in this course section.
And then the other files,
we all just have some default HTML elements,
which we also solved before in the course already.
And of course in the styles folder,
we've got some CSS styles,
some shared styles here in shared CSS.
And then also some page specific styles
in the,
in the other CSS files, which matched the HTML file names.
We also got a little bit of JavaScript code,
which is responsible for the responsiveness of our website.
As specifically,
if you were shrinking the viewport here a little bit with
the Def tools,
you've got this hamburger menu and you've got this
responsive navigation, which you can open up here.
So that is controlled with JavaScript here.
We simply add or remove this open class here.
When I clicked this hamburger and the debts,
how we then open or closed this drawer.
Because for this open closet,
we got some styles to find in shared CSS that will ensure
that the drawer is visible or hidden.
Now definitely feel free to go through that code.
I have prepared it in advance because the course section
is not about writing this HTML CSS or browser site,
JavaScript code. Instead in discourse section,
I now want to show you how we can serve this page with our
node express code. So with our own service side code.
Why we might want to do that and how we can then handle the
user data submission and also populate this
restaurant list
here with dynamic data that will be fetched from the server,
and that will display the actual restaurant data that has
been submitted by users through that
share a restaurant page.
That's what we're going to work on in this course section.
And therefore,
let me actually start with outlining the problems we have
with this current website,
which does not use any custom server-side code.
The problem we have is that if we try to share a restaurant,
if you want to submit this form,
we encounter the same difficulties as we have them in the
forums course section
where we gotten away
of storing that
data of handling that submitted form.
Because we need a custom server side code for it,
as you saw it in the previous course section,
where we started to store user input in a file.
We might want to do something similar here.
And then of course, once we get stored data,
we want to show that here on browse restaurants,
instead of that dummy data,
we want to show to real data that while submitted by users.
And that means of course, that
A,
we need to let users submit data and handle that.
That's what I said a couple of seconds ago,
but
B,
we then also need to generate this page.
This restaurants HTML file dynamically?
Because at the moment in this restaurant's HTML file,
we got this dummy restaurant item here, this list item.
But of course, that's, hard-coded here into this HTML page.
That's not what we want on our website.
We want real data, dynamic data,
which changes as users use our website.
And I did talk about that before,
when I showed you Amazon.com.
There,
we also have dynamic data.
We have products that change.
A cart, that changes.
It's the same here, now.
We have data that should change as users,
use our website.
And therefore,
we need a custom backend, custom server-side code to handle
and store submitted data and to then generate dynamic
responses instead of using the same pre-written static,
HTML file over and over again.