Hey guys, welcome to day 54 of 100 days of Code.
And today we're going to be moving on to a new topic and that is going to be web
development.
And we're going to be working on this for the next few days as well.
Now there's quite a lot to cover today.
We're going to be talking about the command line, Python decorators,
as well as web development using Flask,
one of the most popular frameworks for creating websites using Python.
Now, before we get started though, you might be thinking, well,
I already know how to make websites.
I learned about HTML and CSS on days 41 through to 44.
So I really know how to make websites.
So what exactly is it that you're teaching me now? Well,
if you think of a website,
a simple website just contains HTML and CSS.
Now that is also what we call the front-end.
This is the beautiful mermaid that the user gets to see. Now for the website to
actually have some functionality, for example, if you're building a web app
instead of just a simple display website,
then it's also got to have a backend.
And the backend is the part that we're going to be learning how to build right
now.
So if the front end is just the part that displays information to the user,
the backend is the part that does a lot of the business logic,
a lot of the calculations,
and a lot of the things that we've been doing with Python. Now,
when people talk about full stack web development
which is a term that you would've heard of
if you were searching for web development jobs. Now full stack basically just
means frontend and backend.
So somebody who can deal with both frontend and backend technologies. Now,
usually there's quite a few languages that are used for the front and the back
end. So the front it's usually HTML,
CSS and JavaScript. HTML gives the website structure,
CSS gives it style and JavaScript allows it to have some sort of interactivity.
Now the backend can also be created by a bunch of different languages,
and here is more of a choice. Um, you could choose between JavaScript, Java,
Python, Ruby,
there's whole bunch of different languages. To make it even more
complicated, in addition to languages,
there's also different frameworks that you could use for the front and back end.
So some popular frameworks you might have heard of
are things like Angular and Rreact from the front end and Node and Flask or Django
for the backend.
So these frameworks are basically tools that really come with a lot of code
prebuilt for a lot of the common functionalities that you find when building
the front and back end.
So that way, we don't always have to reinvent the wheel and we can simply just
use the wheel and build a bicycle or build a car or built a scooter and whatever
it is that we want. Now,
when we're considering Python backend,
there's a whole myriad of different frameworks that you could choose from.
For example, Flask, Django, Bottle, Cherry pie, pyramid,
and a whole bunch more. But the most popular ones, if you look at job search
anyways,
is Flask and Django where Flask is better suited to beginners and also small
projects and Django suited much more to larger commercial projects. In order to
build out a website which has a front end and a backend,
we have to kind of understand what exactly is the backend.
There's three components that you really need to understand when it comes to the
backend. And that is the client,
the server and the database.
These three components together will determine how your backend will work.
Now, firstly, the client,
you can sort of imagine just as a user going onto a browser,
this is the client's side. This is the part that faces the user.
And then there's the server.
So you can think of the server as basically just a powerful computer
that's hooked up to the internet and it's on 24/7
always ready to receive requests over the internet. Finally,
you've got the database
which is kind of like a souped up spreadsheet where you are storing all the
information related to your website.
So let's say the client wanted to go to google.com. Well,
when they type that into the URL bar and they hit enter,
that gets sent to the server as a request,
and this goes across the internet to this other computer.
And this server has to respond. And it responds by sending over the HTML, CSS and
JavaScript files that it has for that particular website.
And once that gets sent back to the browser,
then that can be rendered by the browser as the actual webpage. Now,
if you're a website that has a lot of use of data or different types of data
that could be requested by a user, then usually you'll have a database.
So when the client requests, for example,
to see all the tickets they have on Eventbrite, well,
the page that they're viewing, that is the front end. That is the client side.
But in order to render all the tickets they have,
the client makes the request to the server and the server fetches the data from
the database. Once it gets the data back from the database,
it puts the data into the HTML, CSS and JavaScript files,
and it sends the whole bundle back to the browser to be viewed by the user.
If this whole process seems a little bit convoluted and complex, don't worry.
We're going to be diving deep into creating our server, creating our database,
and we're going to be creating all of these parts from scratch step-by-step
ourselves. So at the end of the web-dev section,
you'll find that if you come back to this video,
everything's going to make a lot more sense.
Now in order for you to have a good overview of what the whole system looks
like, I'd like to use the analogy of a restaurant.
So imagine if you have a restaurant and you've got the front of house
which is where the tables are,
when the customer sit. And then
you've got the kitchen
which is where the chefs work and where you're creating all the dishes.
And finally, you've also got the larder
which is where you store all the ingredients in the fridge or on the shelves.
Now this front of house part
which is where the user seats in is the client site. Now in the middle,
we've got the kitchen, which is the server. And finally we've got the larder
which is basically the database of ingredients.
Now the client side is completely separate from the rest. So as a user,
when I go onto a website,
I'm not interacting with the server or the database directly. Instead,
I'm interacting with my browser, which is on the client side. Now,
when you go to a website and you request to see some piece of information,
for example, you log in to Spotify and you want to view your playlists,
what actually happens is, you know,
you don't have the chef sort of cooking up the dish in front of you on the
client side. No,
instead what happens is that the server fetches the relevant ingredients from
the database, so the data that's related to your Spotify playlist,
and then it takes that data and it renders it into a HTML,
CSS and JavaScript files.
And then once that endproduct is created,
it ships it out to the browser on the client side, which you
as the user, can now view.
So this is basically an overview of how our frontend and our backend interact in
order to create a website experience for people. And in the coming lessons,
we're going to be building out each of these parts and you gonna see in greater
detail how they work together. So head over to the next lesson
and we'll get started building our very first website.