Python for Decision Makers and Business Leaders Transcripts
Chapter: Web development with Python
Lecture: Adding dynamic HTML
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Hello World is fun, but it's not very realistic.
0:02
We want HTML pages.
0:04
These are the pages you see on the web, right?
0:06
Not this silly little string.
0:08
So let's do a quick thing to change this.
0:10
Notice I've added two directories
0:12
static, where we're going to put some design things
0:14
like images and style sheets and so on
0:16
and this template folder.
0:18
So over here I'm going to add a file
0:21
HTML file called index.html.
0:25
It has a title. Let's call this Guitary.
0:28
That's going to be our little application.
0:30
And let's put a little header like this.
0:33
Welcome to our guitar store.
0:37
And what we want to do is we want to list out the guitars.
0:39
We want to have some data and show it.
0:41
First of all, we're going to need to change this around.
0:43
Instead of saying here's a string
0:45
we have to go to Flask and say render_template
0:49
and we have to give it the name.
0:50
And PyCharm knows about this convention
0:52
so it's like, oh, here's one that looks like it might work.
0:55
If we rerun this and we check it out now
1:02
woohoo, look, welcome to our guitar store.
1:06
We look at it, there's exactly what you would expect.
1:08
That's pretty cool.
1:10
However, we would like to pass some interesting data.
1:12
We're going to get a bunch of guitars.
1:13
How do we pass the guitars along?
1:15
Well, let's just say I've got a little bit of data here
1:18
and it's a letter A, a letter B, a letter E, and a letter J.
1:23
So we can come in down here
1:25
and just say values equal data or whatever.
1:27
We could just make up this name
1:29
as long as we know what to refer to over on our template.
1:32
And we can come down here
1:33
and we can have a little section.
1:35
We can have, like
1:36
an unordered list that has a list item in it.
1:40
If you don't know HTML, don't worry about it.
1:41
We're just going to put some repeating HTML
1:44
in here real quick. So what we say is we say
1:47
it'll be % for letter and value's what I called it
1:51
and then down at the end, we'll have to say N4.
1:55
And the middle, we're just going to put out the value.
1:57
So let's put out the letter
1:59
and let's say we want to make it uppercase
2:01
so we can do that if we like.
2:03
Now, over here guess we'd better run it again.
2:07
If we click on this, look at that, what we get.
2:09
A, B, E, J. And to be honest
2:13
we're kind of done with Flask in a sense.
2:16
Like, this is mostly what Flask does.
2:18
And to give you a sense
2:19
that's why I wanted to go through this
2:20
of what web frameworks do in Python is
2:23
we get then started, get 'em running
2:25
we tell it what the URLs that it needs to process are
2:28
what is the logic behind each one
2:30
we're going to go and get some data
2:32
and we pass it over to an HTML file
2:35
which has a way to take this data
2:38
and an HTML template like this
2:40
and we didn't really look at the outcome, did we?
2:42
Let's actually look at the view page source.
2:45
And it turns it into just straight, static HTML.
2:49
So this is what Flask does.
2:51
We're going to do two quick more things
2:53
just to make this work better.
2:54
We're going to go and get this data from a database
2:57
or something like a database
2:59
instead of just making it up here.
3:01
But this part doesn't change.
3:02
We're also going to put a little web design on here.
3:05
But again, that's just HTML and CSS.
3:08
That's kind of a separate thing.
3:10
If you understand what's happening here
3:11
you kind of know what Flask does.