Hello guys.
So we are going to continue our discussion with respect to flask.
Already in our previous video, we have seen this entire skeleton.
We understood about what was app dot route and how you can create different different routes, how you
can run it with debug equal to true and by default over here.
Guys, if I probably just give you an example, the localhost is being considered over here.
But when we try to host it in any type of uh, cloud over there, the localhost instead of localhost,
you can basically give 0.0.0 like four zero, 0.0.0.0 along with port number.
So that we'll be seeing, uh, when we develop some end to end projects later on.
Okay.
So here now in this video, what I am actually planning to do is that, uh, so let me just make this
very much simple over here.
So in this video, what are we trying to do?
Right.
In this video I will try to show you that how you can integrate HTML files.
Okay.
HTML files in this web framework.
Okay.
So we'll be discussing about that.
So let's go ahead.
So initially as usual we will be using this entire skeleton.
Let's say I will just copy and paste it over here.
And uh here are some of the routes.
So welcome to the Best Flask home page.
This should be an amazing course.
Now instead of writing like this, you know I will just go ahead and provide my HTML tag over here itself.
So I will say, hey, let's go ahead and write my HTML tag.
So this basically becomes my HTML tag.
I hope everybody should know a basic information of HTML tag.
And let's say here I go ahead and create my H1 tag.
So this will be my header one tag okay.
So header one tag okay.
And this should also be my header one tag.
And let's say I want to display a message.
Welcome to the flask course okay.
Now once I execute it let's go ahead and execute it over here again.
So I will this time I have created the file name as main dot pi.
So I'll go ahead and write Python main dot pi.
Let's go ahead and execute it.
So I will just go ahead and click it over here.
And here you can see that this is my browser which shows this.
Welcome to the flask course.
And if you go ahead and inspect it right now.
So this is nothing, but it will be by default in an HTML tag, an H1 tag, right.
So this entire information is basically getting displayed over here.
Right.
So this is one very easy way how we can integrate with HTML tags over here itself.
Right on the spot.
Right.
I do not have to do much things over here.
I directly have written the HTML tags over here.
Right?
But as you all know, this is not a very good practice because you really need to write a lot of HTML
code in most of the application.
So let me do one thing.
Let me go ahead and create a separate HTML page.
Now if I'm going to create a separate HTML page, I need to redirect.
Whenever I go to this particular home page, I need to redirect to that HTML page.
So for that we will be using one more library which is called as render underscore template.
Now this render underscore template.
So let me till done.
Let me just close this okay I will not require it over here.
So this render underscore template will be responsible in redirecting to that particular HTML page.
So here I'm just going to remove this.
Entire thing or let me do one thing.
Let me just take this index page over here and let.
Me just redirect it to the index dot HTML page.
So here we will go ahead and create the.
In index dot HTML page okay.
Now you may be thinking Chris fine.
We are redirecting to.
The index dot HTML page.
But we have not created any HTML page over here.
So where do we specifically.
Create it?
Okay.
So guys that is the most important thing with respect to HTML integration in flask.
Right.
And as I have already told you that we are going to use Jinja2 template engine.
So this template engine entirely works with the help of this particular functionality.
That is called as render underscore template which is responsible in redirecting to.
That particular HTML page.
And when it is redirecting it right it is going to look.
Inside this particular folder.
And it will look for a folder which is called as template okay.
Templates.
Now inside this folder See, when I'm saying that hey, go ahead and redirect to index dot HTML, what
it is going to do.
It is going to go inside this template folder.
And it is going to check for this index dot HTML page.
So now if I just go ahead and create a file like index dot HTML right now let's do it to index one.
I just want to show you that what kind of error we will be getting if it does not find this particular
HTML page.
Okay.
So let me just go ahead and quickly execute this again.
I will go ahead and execute it.
Python main.py.
And if I go ahead and execute it uh so this is my home page over here okay.
This is my home page.
Now what I will do I will just go ahead and write slash index okay.
Now if I go ahead and execute it here it says hey template not found index dot HTML.
The reason is very simple because I have still not created that index dot HTML.
Right.
And it is right now seeing in this particular templates folder itself.
Now let me do one thing.
Let me rename this okay.
And this time I'll go ahead and write index dot HTML and let me open this particular file.
Okay.
Now once I open this file okay.
Once I open this file and let I'll write it over here.
Hey this will be my H2 tag.
Okay.
And inside this particular H2 tag I'll say welcome to the index page of flask course.
Okay.
Of flask course.
So here you can see that how easily we will be able to integrate it.
Now let me just go ahead and run it.
Okay.
Slash index.
And let me just reload it here you can see welcome to the index page of Flask Course.
And this is how you can probably go ahead and create your entire HTML page.
Okay.
Uh inside this now there is an independent HTML page, any number of HTML page based on your requirement.
You can do it.
Now let me do one thing.
I have, uh, generated one code.
You know, an HTML code.
And again, guys, as a data scientist, you do not if you have just a basic knowledge of HTML that
is more than five because whenever you will be working in an end to end.
Project in a company, there will be front end developers who will be helping you with all this kind.
Of HTML.
So here I have created this index dot HTML.
I'll say, hey, welcome to the flask app.
This is a simple web application built with.
Flask okay, so this is my HTML page that I am actually going to display.
Now if I go ahead back and reload it.
So here you can see hey welcome to my flask app.
And this is a simple web application built with flask okay.
So this is how you will be able to see that, uh, how beautifully we have just integrated an HTML page
over here.
Now let's go back to it okay.
Let's go back to my code.
Now here, what I'm actually going to do is that very simple.
I will just go ahead and create my another route app dot route.
And remember your route name route should be different completely.
And let's say I will go ahead and write slash about us or about page.
Okay.
Here again we are going to use this particular route by default.
All these route are get okay to use this HTTP verb called as get.
I will be talking about what is the difference between get and post also.
Okay, so let's quickly close this.
And now inside this I will just go ahead and say hey, this is my definition which is called as about
function.
And here I'm just going to go ahead and return the render template to about dot HTML.
Okay.
So this also we will go ahead and create it.
So over here what I'm actually going to do is that this about dot HTML.
If I go ahead and see over here it is not available.
So let's go ahead and create this.
And this time it will be about dot HTML page.
Okay.
Now inside this about dot HTML page I'm going to probably have created one more HTML.
That's the same HTML.
I'll copy and paste it over here, but this time it will be about.
This is about page of the flask app.
Now let's go ahead and execute it.
So I will just go ahead and open this.
Open my Python main.py.
And now let's go ahead and see.
Instead of index I will go ahead on and on about.
So this is my about page, uh, of my flask app.
Okay.
You can also integrate CSS.
You can integrate multiple things.
I will also show you how to.
Integrate CSS as we go ahead okay.
So these are some of the basic examples.
Now in my next video.
I've already shown you how to probably integrate all these things.
Integrate an HTML page now.
In the next video we will be talking more about HTTP verbs like get and post and let's say from a form,
if I post anything how I will be able to retrieve in this specific page.
We are going to discuss about that in the next video, but I hope you are able to understand this,
and I hope you are able to understand how we can integrate easily our HTML code, uh, with our application.
Right?
And that is what Jinja2 template engine is all about, because in the next video I will be showing you
from here, if I want to pass any data source value to my HTML file, how can I do it?
That also will be seeing.
So I hope you like this particular video.
I will see you all in the next video.
Thank you.