1
00:00:05,600 --> 00:00:08,190
Welcome back in this lecture we're going to go through it.

2
00:00:08,190 --> 00:00:14,440
An example of the basic template so far we've only returned back each T.M. manually through a python

3
00:00:14,440 --> 00:00:15,340
string.

4
00:00:15,340 --> 00:00:19,960
Realistically we're going to want to connect the view function through under an HMO template that is

5
00:00:19,960 --> 00:00:21,420
to say needs to mail file.

6
00:00:21,420 --> 00:00:27,890
So we've already created for page Flast will automatically look for HTL templates in the templates directory

7
00:00:28,220 --> 00:00:33,800
which means you need to make sure your folder that's actually holding oyur HTL files is called templates.

8
00:00:33,800 --> 00:00:39,710
Later on we're going to discuss how to separate larger applications to have multiple template directories.

9
00:00:39,730 --> 00:00:43,990
For now we're going to render templates simply by importing the render underscore template function

10
00:00:43,990 --> 00:00:47,550
from flask and returning an HTML file from our view function.

11
00:00:47,560 --> 00:00:52,690
Let's see this action by heading over to our text editor or a here I am back in my text editor what

12
00:00:52,690 --> 00:00:57,490
I'm going to start off with is I have a basic thought py file and it's underneath a folder called flask

13
00:00:57,520 --> 00:00:58,900
underscore examples.

14
00:00:58,900 --> 00:01:04,690
I'm going to create a new folder here and the new folder is going to be called templates and it's at

15
00:01:04,690 --> 00:01:07,290
the same level directory as my base pi.

16
00:01:07,390 --> 00:01:13,570
And then inside of templates I'm going to create a new file and I'm going to call this basic dot h tim

17
00:01:13,570 --> 00:01:14,280
L.

18
00:01:14,860 --> 00:01:16,310
So this is an HCM file.

19
00:01:16,330 --> 00:01:20,800
So let's go ahead and type out h T.M. which should fill this out for us.

20
00:01:20,800 --> 00:01:25,550
Remember you have to save as an e-mail file to get the auto completion and then we're going to do here

21
00:01:25,550 --> 00:01:33,230
is just inside the body we're going to have a head or one tag that says Welcome to the site that is

22
00:01:33,230 --> 00:01:34,310
going to save that.

23
00:01:34,310 --> 00:01:35,650
So I have a basic team.

24
00:01:35,690 --> 00:01:39,110
Now it's time to link this to my actual flask application.

25
00:01:39,110 --> 00:01:46,880
We'll come back to basics up high and we'll say from flask import flask as we've done before and we're

26
00:01:46,880 --> 00:01:56,210
going to import render template or create my flask application by passing in that name variable and

27
00:01:56,210 --> 00:02:02,470
then I'm just going to have a single page just the home page going to be my index page.

28
00:02:02,570 --> 00:02:10,250
And in order to actually render that table file I say return rendered template and then I pass in the

29
00:02:10,250 --> 00:02:11,260
name of the file.

30
00:02:11,350 --> 00:02:12,910
Basic h tim L.

31
00:02:13,070 --> 00:02:14,320
And what else is going to do.

32
00:02:14,330 --> 00:02:19,340
It's going to automatically look in the same level directory for a folder named templates and then it's

33
00:02:19,340 --> 00:02:22,950
going to look inside that templates folder for a file name based studies T.M..

34
00:02:23,100 --> 00:02:26,260
So you need to make sure that this string matches exactly with the name.

35
00:02:26,270 --> 00:02:31,100
You call this h him I'll file and that's a and all file has to be in the templates folder at the same

36
00:02:31,100 --> 00:02:35,150
level as whatever that PI file you're running.

37
00:02:35,180 --> 00:02:41,020
Once you've done that we're going to say if name is equal to mean take my app and run it.

38
00:02:41,130 --> 00:02:42,700
And let's go ahead and set debug.

39
00:02:43,070 --> 00:02:44,690
Equal to true.

40
00:02:44,690 --> 00:02:50,350
Just to make sure we can easily debug in case we get any errors I'll say Python basic that pi.

41
00:02:50,400 --> 00:02:54,450
Let's run this and it looks like it's running in my browser going to bring my browser over.

42
00:02:54,450 --> 00:02:55,690
Just so it can check this out.

43
00:02:56,570 --> 00:02:58,760
And I bring it over and it says Welcome to the site.

44
00:02:58,820 --> 00:03:04,220
So I successfully connected my flask application to an aged team file and hopefully you can see that

45
00:03:04,230 --> 00:03:10,000
you'd easily be able to expand this by creating more functions and creating more each time files.

46
00:03:10,010 --> 00:03:14,760
The last thing I want to show before we finish up this lecture is how to connect to a static file.

47
00:03:15,180 --> 00:03:19,480
So we're going to do is back and on each team I'll file.

48
00:03:19,650 --> 00:03:22,070
I'm going to say H2.

49
00:03:22,470 --> 00:03:32,350
Here is a pic of a puppy and let's create an image test and we're going to set the source to forward

50
00:03:32,600 --> 00:03:40,500
slash static forward slash puppy underscore pick that shape.

51
00:03:41,010 --> 00:03:45,960
Now we've actually provided a picture of a puppy for you inside that course notes or if you want you

52
00:03:45,960 --> 00:03:50,610
can go to something like an splash and that's a free Web site for photos.

53
00:03:50,650 --> 00:03:55,530
An splash that is really useful especially when you just rendering example web sites or bring it over

54
00:03:55,540 --> 00:03:57,240
just so we can see what it looks like.

55
00:03:57,440 --> 00:04:01,900
Here's on Splash it's free photos and you don't need to worry about things like copyright.

56
00:04:01,930 --> 00:04:06,910
It's basically all donated by photographers so I can look up something like puppie do a search here

57
00:04:07,120 --> 00:04:09,070
and eventually we'll see cute pictures of puppies.

58
00:04:09,070 --> 00:04:10,720
So let's go and just grab one of these.

59
00:04:10,770 --> 00:04:11,940
I kind of like this guy right here.

60
00:04:11,950 --> 00:04:13,240
It's going to click on this.

61
00:04:13,330 --> 00:04:17,560
Going to right click save images and let's save this to a static file.

62
00:04:17,590 --> 00:04:20,020
So I'm going to save this under flask examples.

63
00:04:20,020 --> 00:04:21,560
I have my templates folder here.

64
00:04:21,610 --> 00:04:28,120
What I'm going to do is create a new folder I'll see file new folder and I'm going to call this static

65
00:04:28,220 --> 00:04:34,260
and then inside that static folder I'll save this and I'm going to rename this puppy underscore pick

66
00:04:34,540 --> 00:04:35,580
dot G.P.A..

67
00:04:36,780 --> 00:04:37,820
Save that.

68
00:04:38,140 --> 00:04:39,890
That's downloaded now.

69
00:04:39,930 --> 00:04:43,730
And if we come back to Adam I should now be able to see a static folder here.

70
00:04:43,770 --> 00:04:46,810
Expand this and then see Papy underscore picked that jpeg.

71
00:04:46,920 --> 00:04:49,070
And that's exactly what the source is pointing to.

72
00:04:49,080 --> 00:04:54,330
It says Go back up a directory and then check out the static folder and then check out puppie pick a

73
00:04:54,330 --> 00:04:54,920
peg.

74
00:04:55,200 --> 00:05:00,800
I'm going to save this and let's rerun our actual site.

75
00:05:01,050 --> 00:05:04,950
And when you see it you should see something like this says here's a pic of a puppy.

76
00:05:04,980 --> 00:05:08,080
Let me zoom out and you should see this cute little guy there.

77
00:05:08,130 --> 00:05:08,610
All right.

78
00:05:08,700 --> 00:05:14,250
So we just explored how we can render HVM template and also how we can create static files such as an

79
00:05:14,280 --> 00:05:20,190
image link to it in the HTL template and render that as well in our flask application and technically

80
00:05:20,190 --> 00:05:24,600
you already have everything you need for a very simple landing page where you just display information

81
00:05:24,690 --> 00:05:29,010
and images are going to continue to expand on this and we're going to continue to talk about how we

82
00:05:29,010 --> 00:05:33,010
can insert things into the html template as a quick review.

83
00:05:33,150 --> 00:05:37,410
The main thing to remember is you have rendered template as your function and you're just going to return

84
00:05:37,410 --> 00:05:39,220
that in your html files.

85
00:05:39,270 --> 00:05:44,730
They need to be inside of a folder named templates and technically so that it can be called other things

86
00:05:44,820 --> 00:05:47,700
because you're manually passing in this file path.

87
00:05:47,700 --> 00:05:53,090
But in general your static files such as images should go under a folder called static.

88
00:05:53,400 --> 00:05:53,970
OK.

89
00:05:54,180 --> 00:05:56,720
If you have any questions feel free to post the Q&A forums.

90
00:05:56,760 --> 00:06:00,700
We'll see you in the next lecture where we continue to build our understanding of templates.