Python for decision makers and business leaders Transcripts
Chapter: Web development with Python
Lecture: Adding dynamic HTML

Learn more about this course
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.