In the previous video, we created a website.
Actually, this is not a website, it's just a web page.
Now we're going to create a website which has multiple pages.
And to create a website you need a web framework.
And we're going to use the flask web framework for that.
So Flask is a Python library.
That means you need to install it.
So make sure you have created a Python project and then I have mine.
That's pure file, which is currently empty.
And I have this tutorial that's a HTML file which I'm going to use.
You can find this attached in the lecture resources if you don't have it.
And you'll also find this cat dot PNG file which is needed by this HTML document.
So let's go to main and import flask.
Actually, we only need the flask class from the flask library.
So install package flask.
The package is being installed so the web framework is being installed.
So this web framework is what's going to manage multiple HTML pages.
So you can think of a web framework as a manager of multiple pages, and it's responsible that these
pages interact with each other correctly.
So Flask was installed successfully on my computer.
And the first thing we want to do now is we want to create a website object.
So this flask here is a class.
And this class creates websites, object instances, or you're going to say flask object instances,
but think of it as a website object.
So just like we have strings to represent text, we have numbers to represent numbers, lists to represent
series of objects.
We also have website objects to represent websites.
So let's create a variable and say flask.
So that's class and give a name to this.
It can be anything.
We'll change it later.
But for now, let's say website, whatever it is.
So with that we have a website object.
Now we need to connect HTML pages with this website object.
To do that we refer to the app variable, this variable using this special symbol for ADD symbol.
I'll explain in just a bit why we use that symbol.
And so you refer to that and then to the root methods of that app object.
And inside here includes you give a path, let's say home.
So you know that whenever you go to a website and you click on different links, those links take you
to a particular path to that website, particular URL in that website.
So each page has a particular URL.
So this HTML that will connect now will have this URL and the HTML will be inside this function that
we need to define in here.
Let's call this function home.
You can call it whatever you like.
And this will return this HTML document.
And so that HTML document will be rendered whenever the users visit your website URL slash home.
So for that, we need to return.
But you cannot return
tutorial dot HTML directly like that.
You need to return it through a function which you need to import first.
The function is called the render template.
And then you go here and then you say render template tutorial.
That's HTML.
But the total that HTML has to be inside a specific folder in the root directory.
That folder should be named templates with lowercase letters and ending with se.
So not template but templates.
So you see, my folder is here.
It's in the same directory with with main dot pie.
So that's the root directory and inside template you want to drag tutorial dot html.
So make sure that tutorial is there.
So tutorial dot html and here you say tutorial dot html.
So flask will look for HTML documents inside that template folder by default.
So flask is configured to look for a template folder in your root directory.
And lastly, we need to say here that to run and give an argument for the debug.
So the debug arguments should be true and this will allow you to see errors on the web page, either
errors.
So you want to see them to understand what's going on.
Make some space here and yeah, let's run this to run this app you can just right click and go to run
main and that's the URL of the app.
So click that.
And we see this not found page because we haven't created such a URL yet.
So that would be the home page.
If you delete home from there and save the script, go here, refresh the page, then you should see
this view.
Otherwise, if you wanted to have home here, then you should type in home here.
Right?
And then you go to this page.
So now it's rendering fine, because the URL so this URL is connected to that HTML document.
So in other words, what's happening is that when the user visits that URL, this function is called,
so that root is connected to this function and the decorator makes it possible.
So this at symbol here means that this line is a decorator and it decorates this function.
So basically it connects that method to this function so that when this is visited on the browser,
this is called and tutorial that HTML is rendered.
That's the idea.
Now if you want more pages, you can duplicate this function.
And here write something else such as a boat.
And then here say something like about that.
HTML creates an about that file about.
So there we go about that HTML.
Maybe write something here in the body tag.
Hello.
I am about page.
Go to main that why make sure everything looks fine or you need to change the home function to something
else else like a boat.
Then save the script, go to the browser and change the URL to a boat and you'll get that page as you
can see here.
Hello, I'm the about page.
Then next what you can do is you can go to tutorial dot email and you can go to the nav element and
make sure that you have the URL of the abode in here.
So.
About here.
That means when you click that about menu item from here.
That should take you to the about page, but you need to add one more slash here in the root.
So let's refresh.
There we go.
So again, what we just did.
So let me wrap it up.
What we just did is that we have this app with two pages, two URLs, two pages.
The first URL is the domain name, which in our case, since it is local, the domain name is 1 to 7
.0.0.15 hundreds.
So domain name slash home gives us that page and this page renders tutorial that email and this tutorial
that HTML has this content and this menu bar in here and the uploads link points to the about page.
It's a page of our website.
So when the user clicks that link this is visited and when that is visited, this function is called
and that function renders the about the XML documents.
So that's the idea.
That's how you create multiple page websites.
And you can do that with flask as you just so now we have an issue here with the image.
So the image is not being displayed.
To display images, you need to create another folder in the root directory and call it static.
And inside static you put the images.
So I'll drag this cat dot PNG image to static.
And you also need to do something else besides putting the image there.
You need to go to to toggle that HTML, locate the image that I img tag which is in here and you need
to change this.
So this is dynamic now and you need to give this syntax so double underscores and you say you URL for.
Static and single quotes.
And then a comma and then a single quotes.
Cut that P and G.
So you need to declare the folder where cat is.
And be careful here.
All this, the parentheses, the curly parentheses should go inside double quotes.
So please double check this.
We have this brackets here which closes in here.
And then as our C has this enclosed in quotes, and then we have four static enclosed and single quotes
cannot plug in single quotes.
And these should be double quotes.
And these two need to be in parentheses.
So basically, this is like a method.
It's like a python method with two arguments static and CAD PNG.
So static is a string candidate.
PNG is a string.
So this method is inside double curly brackets and the curly brackets are inside double quotes.
So let's go back to the website.
So we need to go to one of the valid URLs we have home or about.
So that's slash home.
So that's one of the errors you might get on the Web page.
So this is as well for takes two positional arguments, but three were given.
So let's check it.
We need to go to dot HTML.
And I know that the problem here is that you need to give this argument name.
So with that, let's go and refresh.
And finally, that's the image.
The cat is very angry because we had lots of errors, obviously.
But that's fine.
Yeah, that's the final code for this app.
So that's what a web framework does.
You have a python file and the python file is managing multiple HTML pages and it's defining when these
HTML pages should be displayed on the website through these root methods.
Yeah.
Thanks for following.
We will continue with flask because we need to build an API with flask.
So in the next videos we need to build the web page of our API where we show the documentation of our
API.
So see you there.