Now let's, first of all,
start with what we learned thus far.
I already mentioned that we learned about HTML,
CSS and Java script,
and you'll learn that HTML is there
to structure your content, to describe your content,
CSS is there to add some styling,
and JavaScript can be used to add interactivity.
And therefore both CSS and JavaScript
are technically optional
because in the end, content is everything you need.
But of course, you typically also want to make sure
that it looks good
and you might want to add some interactivity.
That's why you then also might want to add
JavaScript and CSS.
But as I mentioned,
all that code we wrote thus far
and all these free technologies are only responsible
for what's displayed by the browser
and how that loaded website behaves in the browser.
So it all takes place in the browser
and therefore it takes place in a so-called front-end,
because the browser is a tool installed on the machines
of your end users
and that is the front-end of your website,
it is what the user sees,
what has a direct impact on what the user sees.
Now for some websites, that's enough.
For some websites, you only need that browser side,
You only have some content that should be displayed
in a nice way.
But there also are websites that need
certain service side capabilities
in addition to what the user sees.
And that of course brings up one question,
what are such server-side capabilities?
Well there are a couple of things you can do on that
so-called server-side,
at which we're going to take a closer look soon,
but typical examples would be
that you want to store data in a database.
That you might be building a website
where a user enters some data in a forum, for example.
You might remember that forums section
where we didn't really work with the data
entered by the user.
Well, soon we will be able to work with it
because storing such data in a database
might be something we want to do.
And that has to be a database
that's not installed on the machine of our visitor,
but on some central machine that we,
as the website owner own,
so that we can use that entered data.
We also might want to store uploaded files,
if you think about something like Facebook or Twitter,
where users can upload profile images,
you might want to store those somewhere.
And again, you need to store them on a central machine,
not on the machines of your visitors,
because every visitor should be able to see
those uploaded files.
And you also might want to load data from a database
and possibly even send back different
HTML content for different visitors
based on the loaded data.
And I think a good example could be amazon.com.
If you visit amazon.com,
you will probably see a different starting page than I do,
especially if you're logged in,
because then you will see some recommendations
that Amazon got for you.
And of course there,
we don't have one HTML page that is the same for everyone,
but instead Amazon's computers,
so some machines owned by Amazon,
generate different HTML pages for different visitors
with product data
that's stored in Amazon's product databases.
So here we have a scenario where,
when we visit a website, amazon.com,
Amazon will actually reach out to its databases,
look up some product data which it wants to present to you,
and then send back a customized HTML site
that contains that product data.
So here we don't have one HTML page for every visitor,
but we have customized HTML pages
that are generated on demand once you visit the website.
the same would be true if you visit your cart.
Here my cart is empty,
but if I start adding items to the cart,
this HTML page, which it still is in the end,
of course contains the products I added.
Let's see how that could work
if I go back to the starting page
and let's say here, I want to add some item to a cart.
Let's say I want to add this keyboard/mouse set here.
And I click on related items,
and I pick one and add that to the cart.
Then at this point, when I clicked add to cart,
some data was sent to Amazon's computers,
to Amazon's servers, as they are called,
and then there, probably, that data is stored in a database.
So the products I have in my cart,
that's stored somewhere on Amazon's servers in a database.
And if I now visit this cart page,
I get a customized HTML page back
because of course the content on this page
is my specific content.
Not every user has this item in his or her cart,
I have it in my cart.
And here, if I inspect this in the developer tools,
we can see that this cart item,
that's still regular HTML with some CSS clauses,
with some CSS styling.
So that's still HTML,
but of course not HTML written by some developer,
but instead generated on demand
based on some data stored in some database
that we submitted a couple of seconds ago,
once we added this item to a cart for us.
And that's why for some websites, it's not enough if we,
as a developer, write some HTML, CSS and JavaScript code,
because we also need the capability to add code
that runs on some remote machine on the server,
and that deals with incoming data,
like when we clicked on add to cart,
and that's also able to then store such data somewhere
or load that data and generate some HTML page on demand.
So to put this into perspective,
let's maybe come back to how the web works.
Here we learned that a visitor using a computer
or a mobile phone, in the end, enters a URL like amazon.com,
and that then sends a so-called request
to the computers owned by Amazon.
And on those computers, those so-called servers,
we have the website code, those browser instructions,
the HTML, CSS, and JavaScript code
that's being sent back as part of the so-called response
to the browser so that the browser data
is able to display this website.
Now that's what we learned up to this point.
But in case of Amazon,
we actually saw that these instructions
are not always the same,
different visitors get different pages
and therefore different HTML code,
maybe even different styles,
it really depends on what should show up on the page.
Now we did learn that we call the part
with the user and the browser the front-end, or client,
and we call the computer that holds the code server,
or backend.
Now we just learned that sometimes
you don't wanna just store the finished instructions
and sent those back because they need to differ.
And different visitors need to get different HTML code
with different content and maybe all the different styles.
Because of that, we can change this picture a little bit.
We still have front-end and back-end, client and server,
but on that server,
we might have those finished instructions.
But in cases like Amazon,
we actually instead have some server-side code
that execute there,
that then generates those instructions on demand
for every incoming request,
so that different pages, different HTML code,
can be sent back for different users.
And as part of that page generation and code execution,
that server-side code could also maybe store incoming data.
If we clicked that add to cart button
and/or fetch data from a database or from a file system,
these are all things we are going to explore
over the next sections.
But that's nowadays changed Big Picture
of how the web works,
which you should keep in mind.
Because as a web developer,
it's actually about more than just writing HTML,
CSS and JavaScript code,
You sometimes also might need to write some server-side code
to do
more kinds of
work, or to do other kinds of work
and/or to pre-generate different HTML content
that is then being sent back to the client.