1
00:00:05,340 --> 00:00:10,200
Welcome back, everyone, to this lecture where we're going to discuss static files with tags.

2
00:00:11,400 --> 00:00:17,280
Now most projects are going to have some set of static files and these are things like images, JavaScript

3
00:00:17,280 --> 00:00:18,160
or CIUSSS.

4
00:00:18,180 --> 00:00:23,430
The reason they're static is because we're not actually going to have any changes occurring to these

5
00:00:23,430 --> 00:00:25,650
files once our website is deployed.

6
00:00:25,890 --> 00:00:26,620
That is the same.

7
00:00:26,640 --> 00:00:32,400
It's not like the user can go ahead and change the JavaScript or CSC that's occurring on the website,

8
00:00:32,400 --> 00:00:34,230
so it's not really dynamic in that sense.

9
00:00:34,740 --> 00:00:40,260
So Jingo can serve these static files through the use of tags instead of having to refer to a full file

10
00:00:40,260 --> 00:00:40,590
path.

11
00:00:40,950 --> 00:00:46,590
This is very similar to the idea of the URL tag, where instead of having to write out the entire pathway

12
00:00:46,800 --> 00:00:52,890
to wherever that URL or template is on your computer, you can just say Go ahead and use this URL tag.

13
00:00:53,010 --> 00:00:55,350
We're going to be doing the same thing, but using a static tag.

14
00:00:56,790 --> 00:01:00,990
Now for this lecture, you will need to download or create some sort of static file in order to follow

15
00:01:00,990 --> 00:01:06,030
along, our example is going to be using a JPEG image, but the same logic will apply to any static

16
00:01:06,030 --> 00:01:06,420
file.

17
00:01:06,450 --> 00:01:11,250
This is really just a generic method to let your template know the location of any static file, like

18
00:01:11,250 --> 00:01:17,880
a CSV file, a JavaScript file, a JPEG file, etc. You would just put this in for the source location

19
00:01:18,060 --> 00:01:21,510
with the static tag instead of writing out the full file path.

20
00:01:21,960 --> 00:01:23,880
Let's head to the code editor and get started.

21
00:01:24,180 --> 00:01:26,640
I'll be using a JPEG file that I downloaded from the internet.

22
00:01:27,180 --> 00:01:27,450
All right.

23
00:01:27,480 --> 00:01:29,550
Here I am inside a visual studio code.

24
00:01:29,880 --> 00:01:35,130
Notice I do have a Django that JPEG file here, which is just a picture of Django Reinhardt.

25
00:01:35,400 --> 00:01:40,050
I will be moving this later on into a static folder, but just for right now, you can see where it's

26
00:01:40,050 --> 00:01:40,620
located.

27
00:01:41,250 --> 00:01:43,470
OK, so let's go ahead and go through the first steps.

28
00:01:43,950 --> 00:01:48,450
The first one is to actually just double check that static files is in your installed apps.

29
00:01:48,810 --> 00:01:52,020
So that's going to be under my site settings, not PI.

30
00:01:52,440 --> 00:01:54,810
So open up settings, up Pi, scroll down.

31
00:01:55,260 --> 00:02:00,240
And right now from the previous lecture, I have debug as equal to false and allowed hosts set.

32
00:02:00,570 --> 00:02:05,670
I'm going to set debug equal to true again just to make sure that if I make any mistake, I can go ahead

33
00:02:05,670 --> 00:02:08,550
and debug this, so we'll reset that to the default settings.

34
00:02:08,880 --> 00:02:12,810
But we also want to make sure is underneath installed apps.

35
00:02:13,140 --> 00:02:16,740
We want to make sure Django that contrib that static files is there.

36
00:02:16,770 --> 00:02:19,890
This should be there by default, but just in case it isn't.

37
00:02:19,920 --> 00:02:21,570
Make sure it's there, then.

38
00:02:21,570 --> 00:02:25,080
What you also want to make sure is that the static URL is defined.

39
00:02:25,590 --> 00:02:31,950
If we scroll down here, remember previously we were able to define directories for the templates and

40
00:02:31,950 --> 00:02:34,890
you're going to do a very similar thing for the aesthetics.

41
00:02:35,130 --> 00:02:36,420
That is your static files.

42
00:02:36,870 --> 00:02:43,920
So we scroll down until you get to the static files section and there should be a variable here called

43
00:02:43,950 --> 00:02:49,020
static underscore you URL, and by default, it's set up to static forward slash.

44
00:02:49,320 --> 00:02:53,220
That's actually what we want to ask, so that's totally OK for us now.

45
00:02:53,580 --> 00:02:57,900
Technically, you could change this if you're storing your static files in a different manner or underneath

46
00:02:57,900 --> 00:02:58,730
a different folder.

47
00:02:58,740 --> 00:03:02,290
Maybe you're calling it my static files, but this is pretty much how we want it.

48
00:03:02,310 --> 00:03:03,060
It's very simple.

49
00:03:03,210 --> 00:03:06,750
Similar to the idea that your template directory should be called templates.

50
00:03:07,140 --> 00:03:11,280
Similarly, your static files should be in a directory called static.

51
00:03:11,580 --> 00:03:16,800
So in the same way, we have my app templates, my app, we're going to have my app, static my app

52
00:03:16,980 --> 00:03:19,350
and we want it to match this URL.

53
00:03:19,890 --> 00:03:21,590
Go ahead and save those changes.

54
00:03:21,600 --> 00:03:23,970
They're essentially just confirming the default settings.

55
00:03:24,480 --> 00:03:30,210
Then what we're going to do is inside of our templates, we can then use a static template tag.

56
00:03:30,570 --> 00:03:34,830
But first, let's make sure we're storing our static files in the correct folder.

57
00:03:35,160 --> 00:03:40,170
So because I chose static here, I need to follow a structure that is going to look something like this

58
00:03:40,200 --> 00:03:40,890
my app.

59
00:03:41,920 --> 00:03:44,410
Static and then my app.

60
00:03:45,630 --> 00:03:50,460
And then your static folder, again, for example, it would be Django JPEG for us.

61
00:03:50,640 --> 00:03:57,480
OK, so we want to be able to set these up very similar to the way we set up something like templates

62
00:03:57,480 --> 00:04:01,470
and then would have this be something like example that each HTML.

63
00:04:01,530 --> 00:04:03,800
Except this time we're doing it for static files.

64
00:04:03,870 --> 00:04:07,580
So very similar to your URL tags and template names.

65
00:04:07,590 --> 00:04:09,150
This is essentially just for static files.

66
00:04:09,750 --> 00:04:11,580
Go ahead and save those changes in your settings.

67
00:04:11,670 --> 00:04:14,610
And let's create underneath my app.

68
00:04:14,760 --> 00:04:16,829
Notice how I have the templates directory.

69
00:04:16,829 --> 00:04:22,500
Here I will create a new folder underneath my app and this is going to be called static.

70
00:04:23,480 --> 00:04:28,880
And then just like in templates, I have the my app subdirectory underneath static, I will create a

71
00:04:28,880 --> 00:04:29,480
new folder.

72
00:04:29,840 --> 00:04:31,970
And this is going to match the name of my app.

73
00:04:33,430 --> 00:04:40,150
So why do my app yet again for the same reason we did it for templates, the way Django works is because

74
00:04:40,420 --> 00:04:42,010
this is called the static URL.

75
00:04:42,220 --> 00:04:46,660
It's going to start looking for underneath all the static folders in the same way it's looking underneath

76
00:04:46,690 --> 00:04:47,890
all the template folders.

77
00:04:48,190 --> 00:04:53,200
Then you want to make sure that you don't get any errors in case you have this JPEG across multiple

78
00:04:53,200 --> 00:04:56,080
apps, but or at least the name is shared across multiple apps.

79
00:04:56,440 --> 00:04:57,460
The picture is different.

80
00:04:57,610 --> 00:05:02,850
So just to make sure you don't get any errors in the feature, we'll go ahead and say static my app.

81
00:05:02,860 --> 00:05:06,340
You can technically get away without having to write my app here in the same way.

82
00:05:06,460 --> 00:05:07,930
You could then that for templates as well.

83
00:05:08,470 --> 00:05:10,960
Speaking of which, because now we have set up our static folder.

84
00:05:11,170 --> 00:05:14,440
Let's move this JPEG image into my app.

85
00:05:15,410 --> 00:05:16,740
And it says, are you sure you want to move it?

86
00:05:16,760 --> 00:05:17,570
Yes, I am sure.

87
00:05:17,930 --> 00:05:21,110
OK, so now I have this Django JPEG notice that's on there.

88
00:05:21,110 --> 00:05:25,550
My site, my app, static, my app Django, that jpeg.

89
00:05:26,000 --> 00:05:28,820
Now let's actually display this in one of our views.

90
00:05:29,420 --> 00:05:30,480
So how do we do this?

91
00:05:30,500 --> 00:05:33,230
Well, I just take a look at one of my views in my app.

92
00:05:33,650 --> 00:05:38,570
I have this example view that is rendering my app example that each HTML.

93
00:05:39,050 --> 00:05:42,800
And remember that one is just showing up on my app.

94
00:05:43,160 --> 00:05:44,960
So I will go ahead and place it there.

95
00:05:45,200 --> 00:05:51,890
So if I look again at my views, I have example that each HTML, let's use example the HTML to actually

96
00:05:51,890 --> 00:05:53,630
link to this static file.

97
00:05:54,200 --> 00:05:56,270
I open up example the HTML.

98
00:05:56,390 --> 00:05:57,820
Remember, it's extending from base.

99
00:05:57,830 --> 00:05:58,670
I have this block.

100
00:05:59,000 --> 00:06:01,490
Let's actually display now that image.

101
00:06:02,000 --> 00:06:03,650
So how does this actually work?

102
00:06:03,800 --> 00:06:10,490
I need to call two things load static in order for Django to understand that you're loading up static

103
00:06:10,490 --> 00:06:14,930
directories and then actually at the point to the exact static file I'm looking at.

104
00:06:15,860 --> 00:06:19,280
So after you've extended from the base, we're going to do here is say.

105
00:06:20,440 --> 00:06:20,950
Load.

106
00:06:22,670 --> 00:06:29,810
Static, so it's essentially load up that static directory and then we end up doing is, for example,

107
00:06:29,810 --> 00:06:31,880
to imagine I wanted to create an image tag here.

108
00:06:32,450 --> 00:06:37,370
I would say image source is equal to and recall.

109
00:06:37,380 --> 00:06:39,680
Typically I'd have to write in the full file path.

110
00:06:39,680 --> 00:06:45,740
So I have to say something like C users, my username and then static etc.

111
00:06:45,740 --> 00:06:48,800
That's all the way until I got to finally that JPEG file.

112
00:06:49,190 --> 00:06:51,110
Clearly, we don't want to have to do that all the time.

113
00:06:51,410 --> 00:06:54,800
So this is why I cannot use the tag for static.

114
00:06:55,370 --> 00:06:58,790
So I set up my tag and it's going to be static.

115
00:06:59,940 --> 00:07:04,140
And this is going to look really similar to the URL tags, I'm simply going to say my app.

116
00:07:04,980 --> 00:07:07,980
And in the name of my image, which is Dingo, that JPEG.

117
00:07:09,590 --> 00:07:13,070
Close off that string and then close off that tag.

118
00:07:14,810 --> 00:07:19,730
And if you want, you can also have an alternative just to make sure in case it can't be loaded, so

119
00:07:19,730 --> 00:07:21,920
you can say my image is the alternative there.

120
00:07:23,640 --> 00:07:31,830
OK, so clearly, I can now basically use the static tag to insert any sort of static files, so this

121
00:07:31,830 --> 00:07:33,660
is not just useful for things like images.

122
00:07:33,960 --> 00:07:39,840
If I wanted to show the source of a CSV file, I would just changes to a CSV file source and I would

123
00:07:39,840 --> 00:07:45,840
again just have to remember to load static, set up my static URL and then say static and then the location

124
00:07:45,840 --> 00:07:46,620
of that CSIS.

125
00:07:46,890 --> 00:07:52,380
So you can basically plot this in for any source that was going to be to a static file, whether it's

126
00:07:52,380 --> 00:07:59,520
a JavaScript, a CSV file, JPEG file, etc. The best way to do that would be to load all these static

127
00:07:59,520 --> 00:08:02,100
calls up inside your base html.

128
00:08:02,700 --> 00:08:06,060
OK, so now that that's done, I'm going to save those changes.

129
00:08:07,090 --> 00:08:09,910
And let's go ahead and make sure everything is correct.

130
00:08:11,050 --> 00:08:16,330
I am going to open up my website and let's go to my app.

131
00:08:17,140 --> 00:08:20,800
And if you go to that, you can actually see there's already a forum for error.

132
00:08:21,040 --> 00:08:24,000
But if you go to that page, you should say something like this.

133
00:08:24,010 --> 00:08:29,320
You would get the information, but notice it looks like that static image didn't actually link.

134
00:08:29,860 --> 00:08:34,929
The reason I'm showing this error is because it's probably one of the hardest to debug, and that's

135
00:08:34,929 --> 00:08:38,620
because technically there is no real error with our code.

136
00:08:38,860 --> 00:08:45,880
We just actually need to restart the server in order to apply and load those changes to the static URLs

137
00:08:45,880 --> 00:08:50,650
and have the template be able to load the static directory, which is one of the main reasons I wanted

138
00:08:50,650 --> 00:08:51,490
to show you here.

139
00:08:51,760 --> 00:08:55,540
This is one of those errors where you're scratching your head thinking, What did I do wrong?

140
00:08:55,750 --> 00:08:58,000
But really, you just had a restart and run the server.

141
00:08:58,030 --> 00:08:58,900
So let's do that.

142
00:08:58,960 --> 00:09:03,670
In fact, I'm going to come here, let's say control C and let's call again.

143
00:09:03,670 --> 00:09:06,100
Python managed top pie.

144
00:09:07,050 --> 00:09:09,060
Run server hit enter.

145
00:09:09,570 --> 00:09:12,210
And now I'm going to go to the exact same page and refresh.

146
00:09:12,900 --> 00:09:15,810
And now I see that picture of Django Reinhardt.

147
00:09:16,260 --> 00:09:22,920
OK, so all you had to do was restart the development server and keep in mind because it's so hard to

148
00:09:22,920 --> 00:09:23,490
debug.

149
00:09:23,580 --> 00:09:28,710
You should always be thinking in the back of your mind if you changed or edited anything in settings

150
00:09:28,710 --> 00:09:34,380
that pie or you're doing something that has a lot to do with settings that pie just do yourself a favor

151
00:09:34,380 --> 00:09:39,450
and then restart the development server, do head and control C and then restart Python, manage that

152
00:09:39,450 --> 00:09:40,020
run server.

153
00:09:40,320 --> 00:09:43,640
So that's going to help you debug this sort of error.

154
00:09:43,650 --> 00:09:48,390
And the best advice I can give is keep in the back of your mind that I do something to setting up high.

155
00:09:48,570 --> 00:09:49,120
If I did.

156
00:09:49,140 --> 00:09:51,750
Let me just be extra careful and restart that server.

157
00:09:52,020 --> 00:09:54,270
But other than that, that's how static files work.

158
00:09:54,570 --> 00:10:00,030
Again, you load static and then you can now use this static call in order to work with static files

159
00:10:00,030 --> 00:10:00,780
stored anywhere.

160
00:10:01,200 --> 00:10:05,940
I should point out that if you went to settings that pie, it actually tells you this documentation

161
00:10:05,940 --> 00:10:07,740
link on how to use static files.

162
00:10:08,130 --> 00:10:13,950
This has it broken down step by step, as well as how to set up global static file directories in the

163
00:10:13,950 --> 00:10:16,890
same way, you can set up a global template directory.

164
00:10:17,610 --> 00:10:21,020
The way you do that is in the settings that pie file.

165
00:10:21,030 --> 00:10:26,670
You can go ahead and set up a static directory structure as another variable here.

166
00:10:26,760 --> 00:10:31,230
So I'll leave that up to you if you want to explore it, but it's a really good documentation link.

167
00:10:31,230 --> 00:10:32,430
Essentially everything we showed here.

168
00:10:32,790 --> 00:10:33,790
Now, step by step.

169
00:10:34,290 --> 00:10:34,590
OK.

170
00:10:34,740 --> 00:10:35,700
That's it for this lecture.

171
00:10:35,730 --> 00:10:36,480
I'll see it the next one.