1
00:00:05,180 --> 00:00:09,890
Welcome back, everyone, in this lecture, we're going to start off with the basics of creating a view,

2
00:00:10,190 --> 00:00:16,219
particularly with a function and then connecting it to the URLs that file so we can see it in our example

3
00:00:16,219 --> 00:00:16,960
website.

4
00:00:17,000 --> 00:00:22,160
And then we'll keep building on complexity and functionality to this particular website as we go on

5
00:00:22,160 --> 00:00:23,240
through the rest of the lectures.

6
00:00:23,600 --> 00:00:28,070
Right now, let's just focus on the basics, creating a view and then connecting it to an actual root

7
00:00:28,070 --> 00:00:28,730
on our page.

8
00:00:28,940 --> 00:00:34,610
I'm going to head over to the Visual Studio code now or here I am at Visual Studio Code, and we're

9
00:00:34,610 --> 00:00:40,190
going to be using the my site and first app that we created in that short little exercise.

10
00:00:40,550 --> 00:00:47,090
So we're going to do is open up first app and then inside a first app, I'm going to right click create

11
00:00:47,090 --> 00:00:47,750
a new file.

12
00:00:48,990 --> 00:00:50,790
And call it your LS that pay.

13
00:00:53,150 --> 00:00:58,640
And this will control the URLs that are associated with views inside of first app and then later on

14
00:00:58,640 --> 00:01:01,850
will connect it to the project level URLs that pie.

15
00:01:02,330 --> 00:01:06,590
Sometimes the easiest way to tell whether or not you're in the custom function or, excuse me, custom

16
00:01:06,590 --> 00:01:11,300
app URLs that pie file versus the project level one is recall.

17
00:01:11,300 --> 00:01:15,530
The project level one will always have this helpful info already filled out for you.

18
00:01:15,830 --> 00:01:19,730
And it's also already going to have the pattern for the admin.

19
00:01:20,060 --> 00:01:24,500
We're going to be talking about the built in admin panel in a further section in the course.

20
00:01:24,500 --> 00:01:28,760
But just keep in mind, that's one easy way to tell in case you get confused of what current URLs that

21
00:01:28,790 --> 00:01:29,900
profile you're in.

22
00:01:30,820 --> 00:01:36,860
So what we're going to do right now is we're going to focus on creating a very simple view inside of

23
00:01:36,860 --> 00:01:40,100
views that pie, so I open up views that pie.

24
00:01:40,120 --> 00:01:41,650
This is inside my first app.

25
00:01:41,920 --> 00:01:48,040
And let's create a very simple view that's just going to return back a HTP response that confirms we're

26
00:01:48,040 --> 00:01:48,730
on this page.

27
00:01:49,030 --> 00:01:53,320
This is technically just review since we've already done this before we say from.

28
00:01:54,340 --> 00:01:55,490
Django Dot.

29
00:01:55,510 --> 00:01:57,550
Let me zoom in here a little bit here for you guys.

30
00:01:57,910 --> 00:02:02,560
Here we go from Django Dot http dot response.

31
00:02:04,280 --> 00:02:09,289
Imports and we're going to import HTP response, and then later, we're going to import other things

32
00:02:09,289 --> 00:02:09,680
as well.

33
00:02:10,639 --> 00:02:16,910
Then I'm going to create the simplicity of possible just simple underscore view it takes in a request.

34
00:02:18,330 --> 00:02:19,410
And then we return.

35
00:02:20,430 --> 00:02:24,180
Each to the response, and let's just call this a simple view.

36
00:02:25,650 --> 00:02:26,100
There we go.

37
00:02:26,580 --> 00:02:31,470
And let me actually quit what's going on here in the terminal.

38
00:02:31,650 --> 00:02:32,130
There you go.

39
00:02:32,940 --> 00:02:38,220
OK, so things to note here is we have a function based view and it's called simple view.

40
00:02:38,550 --> 00:02:42,450
Then we connect it to the URLs, the profile that exists inside the application.

41
00:02:42,930 --> 00:02:46,470
So I come to your URLs, that pie, which is inside my application.

42
00:02:46,830 --> 00:02:49,620
And then in order to work with this, I say from.

43
00:02:50,970 --> 00:02:58,650
Jingo the earl's import path, and I also need to connect it to the view, so I say from dot import

44
00:02:58,650 --> 00:03:04,140
views where that means just look in the same folder you're currently in because you are all that pine

45
00:03:04,140 --> 00:03:05,820
views appear both under first app.

46
00:03:06,950 --> 00:03:11,510
Next, I create a list called URL Patterns, and it should always be called this.

47
00:03:12,230 --> 00:03:17,660
And then inside this list is where we begin to add those paths and recall we discussed this function.

48
00:03:18,020 --> 00:03:21,110
We have path it takes in that route should be a string.

49
00:03:21,500 --> 00:03:25,490
Then it takes in a view that should be a something from views.

50
00:03:25,490 --> 00:03:27,620
That pie right now is just going to be a function from it.

51
00:03:27,950 --> 00:03:31,100
And then later on, we can add in keyword arguments and we can actually name that.

52
00:03:31,370 --> 00:03:32,390
We'll discuss that later on.

53
00:03:32,390 --> 00:03:37,070
But for right now, we're just going to use a path, and I set this as an empty string.

54
00:03:37,550 --> 00:03:43,760
The reason I set this as an empty string right now is because in my project level, URLs that pi file,

55
00:03:44,030 --> 00:03:48,950
that's where I'm actually going to define what these views are going to fall under.

56
00:03:49,850 --> 00:03:54,860
So essentially, what's going to happen is I'll leave this as an empty string and then I'll connect

57
00:03:54,860 --> 00:04:00,880
it to views, stop simple view, and then I save those changes.

58
00:04:00,920 --> 00:04:08,390
Then I go to my project level URL configuration and then add in another path here.

59
00:04:09,290 --> 00:04:16,130
So say path and then we define this as first app or really whatever you want to attach to these.

60
00:04:16,490 --> 00:04:18,269
And this is going to be the route.

61
00:04:18,380 --> 00:04:22,310
And then what I need to do is just connect it to include the URL for pie.

62
00:04:22,460 --> 00:04:24,500
And then that means I need to import include.

63
00:04:25,940 --> 00:04:28,430
And then inside a path, I say include.

64
00:04:29,710 --> 00:04:34,660
And then I'm going to type out first underscore app that your URLs.

65
00:04:35,380 --> 00:04:39,580
OK, so that's technically everything we need to do, but let me review what's actually happening here.

66
00:04:40,150 --> 00:04:43,720
So it starts off in views that pie, that's probably easiest part to understand.

67
00:04:43,750 --> 00:04:46,180
It's just a function you call the function whenever you want.

68
00:04:46,510 --> 00:04:50,200
It takes in a request for now and then returns some sort of HTP response.

69
00:04:50,350 --> 00:04:51,940
Simple view later on.

70
00:04:51,940 --> 00:04:57,490
In the future, this will actually connect to a template HTML file, and we'll be sending back specific

71
00:04:57,730 --> 00:04:58,450
HTML files.

72
00:04:58,750 --> 00:05:04,540
And then later on, we'll actually use Jinja templating to insert stuff into this HTML file.

73
00:05:04,930 --> 00:05:09,700
But for right now, we're just dealing with a very simple HTP response that's going to display the text

74
00:05:09,700 --> 00:05:10,150
on the page.

75
00:05:10,360 --> 00:05:11,050
Simple view.

76
00:05:11,860 --> 00:05:16,910
Now you may be wondering, where does this simple view actually show up on the website?

77
00:05:16,930 --> 00:05:18,580
So what web page is this going to?

78
00:05:19,150 --> 00:05:23,800
And what's sometimes a little confusing at first is if we just leave it blank, you might think it's

79
00:05:23,800 --> 00:05:26,200
going to the homepage, but that's actually not true.

80
00:05:26,770 --> 00:05:33,340
These URL patterns are going to be added to whatever was defined on a project level and on a project

81
00:05:33,340 --> 00:05:33,670
level.

82
00:05:33,670 --> 00:05:35,560
We defined it as first app.

83
00:05:36,010 --> 00:05:44,170
So that means when you go back to your app, all these URL patterns are going to have first app attached

84
00:05:44,170 --> 00:05:47,800
to them before you add in whatever is here on the path.

85
00:05:48,250 --> 00:05:50,320
So if I said here in the path.

86
00:05:51,530 --> 00:05:57,140
Simple view, then, this would show up at, let's just say, your domain.

87
00:05:57,320 --> 00:06:02,090
Com Whatever it happens to be called forward slash first step and then forward slash.

88
00:06:02,820 --> 00:06:03,380
Simple.

89
00:06:05,000 --> 00:06:05,480
View.

90
00:06:05,810 --> 00:06:07,520
If I were to take this away.

91
00:06:08,470 --> 00:06:14,030
And leave that as just a simple string, then it's just going to show up at domain the comps first.

92
00:06:14,590 --> 00:06:15,690
So let's actually try this.

93
00:06:15,700 --> 00:06:21,040
I'm going to run the server and we'll experiment with displaying this on different URL routes.

94
00:06:21,580 --> 00:06:28,450
So going to come back to you, jingle lectures, I'm going to CD into my site and then I run Python.

95
00:06:29,810 --> 00:06:32,330
Manage that pie, run the server.

96
00:06:34,450 --> 00:06:37,570
OK, so that is running running on Jenga four.

97
00:06:38,380 --> 00:06:40,510
And let me bring in my browser here.

98
00:06:41,020 --> 00:06:49,390
So recall from the last section, if you just go to one two seven zero zero 8000, you should see this

99
00:06:49,390 --> 00:06:51,370
debug 404 error.

100
00:06:51,670 --> 00:06:56,500
And the reason for that is because it's actually telling you quite clearly there was only two URL patterns

101
00:06:56,500 --> 00:07:01,720
to find that the project level URLs that PY file now was the admin and the first app.

102
00:07:02,230 --> 00:07:04,720
So this empty path didn't match any of these.

103
00:07:04,990 --> 00:07:06,860
But let's go to first app and see what happens.

104
00:07:06,880 --> 00:07:11,200
We're going to say forward slash first app enter.

105
00:07:11,320 --> 00:07:13,900
And now we have simple view as expected.

106
00:07:14,470 --> 00:07:16,720
So we're going to do is experiment with this a bit.

107
00:07:17,200 --> 00:07:22,960
Recall, I mention that we have URL patterns here that then is defined on top of whatever is included

108
00:07:23,230 --> 00:07:24,400
with this project level.

109
00:07:24,520 --> 00:07:32,320
So that means if I come back here and say this path is now simple, view and save those changes, Django

110
00:07:32,320 --> 00:07:36,670
should automatically restart for you upon saving those changes going to come back here.

111
00:07:37,060 --> 00:07:42,960
Now I'm going to refresh this and note now I get Hey, page not found for this.

112
00:07:42,970 --> 00:07:50,290
And then first up, and here's what's really cool it begins to define Hey, I only found admin and then

113
00:07:50,290 --> 00:07:51,670
I only found first app.

114
00:07:51,940 --> 00:07:54,760
And within that first app, I only found simple view.

115
00:07:55,150 --> 00:07:58,330
So that current path, this first app doesn't match any of these.

116
00:07:58,720 --> 00:08:06,130
So if I go to first app forward slash simple underscore view and enter, then I see simple view.

117
00:08:06,730 --> 00:08:12,220
So hopefully this helps you with not just understanding your URLs and how they actually connect to the

118
00:08:12,220 --> 00:08:18,310
roots for the views, but also this super useful 404 debug page.

119
00:08:18,340 --> 00:08:21,310
Now, later on, we'll discuss how to not show this to the user.

120
00:08:21,520 --> 00:08:26,320
You're seeing this because we have technically debug is equal to true inside settings, not pie.

121
00:08:26,680 --> 00:08:31,210
Later on, we would change that to false, and it's going to display a standard for a four page or some

122
00:08:31,450 --> 00:08:32,480
actual specific core.

123
00:08:32,480 --> 00:08:34,240
For that, we define using a template.

124
00:08:34,480 --> 00:08:38,559
But we should keep debug right now in order to understand what's going on for our website so we can

125
00:08:38,559 --> 00:08:43,240
see right now because I change this and you are supposed to be simple view.

126
00:08:43,600 --> 00:08:46,660
I basically broke that connection to just first app.

127
00:08:47,500 --> 00:08:52,750
Now you may be wondering, Well, I want something to show on my actual home page right here, which

128
00:08:52,750 --> 00:08:54,880
would eventually be replaced with domain BCom.

129
00:08:54,890 --> 00:08:57,940
Whatever your website happens to be, how could I actually do that?

130
00:08:58,390 --> 00:08:59,710
There's lots of different ways you could do that.

131
00:08:59,890 --> 00:09:03,430
Sometimes one of the easiest ways is we go to the project level.

132
00:09:03,940 --> 00:09:08,320
It actually tells you, Hey, if you have some function based view, you can just import it from views

133
00:09:08,320 --> 00:09:11,350
and then set path use home name is called home.

134
00:09:11,890 --> 00:09:18,730
So what I could do is inside a my site level is create and you've used our pie file and use that just

135
00:09:18,730 --> 00:09:20,440
to define the home view.

136
00:09:20,560 --> 00:09:25,990
Or I could even create that function in here and make that of you kind of depends on what approach you

137
00:09:25,990 --> 00:09:26,530
want to take.

138
00:09:28,550 --> 00:09:33,410
So let me just show you what that would look like in the simplest case of a function view.

139
00:09:33,800 --> 00:09:39,590
The absolute simplest case would be to even just define the home function inside you, where else that

140
00:09:39,590 --> 00:09:45,110
pie again, kind of unusual, but I just want you to really make sure you understand how to use function

141
00:09:45,110 --> 00:09:48,050
views or importing from your configuration.

142
00:09:48,320 --> 00:09:49,730
Classmates views will come later.

143
00:09:49,970 --> 00:09:53,450
But the key thing to understand is how does path function actually work?

144
00:09:53,960 --> 00:09:57,380
So we're going to this practice this inside of your old pie.

145
00:09:57,950 --> 00:09:58,520
I'll create.

146
00:09:59,690 --> 00:10:07,130
Something called home view takes in a request, and then it's going to return and the type of response

147
00:10:07,130 --> 00:10:07,910
that says.

148
00:10:09,510 --> 00:10:14,880
Homepage now, the one thing I have to make sure is I actually import the response and I have imported

149
00:10:14,880 --> 00:10:18,870
it already from Django, the HP response import HTP response.

150
00:10:19,320 --> 00:10:21,510
So now I have home view here.

151
00:10:21,870 --> 00:10:24,120
How would I connect that inside of your patterns?

152
00:10:24,630 --> 00:10:27,330
Pass the video and see if you can actually figure this out right now.

153
00:10:27,540 --> 00:10:30,180
It's going to be slightly different than what we've been doing with include.

154
00:10:30,510 --> 00:10:34,620
And if you're able to figure this out, it means you're able to basically read and understand these

155
00:10:34,620 --> 00:10:35,220
directions.

156
00:10:35,340 --> 00:10:36,780
So try your best.

157
00:10:37,560 --> 00:10:39,330
OK, I'll show you how to do it now.

158
00:10:40,020 --> 00:10:42,330
We're going to connect it by adding in.

159
00:10:44,360 --> 00:10:45,200
A new path.

160
00:10:46,490 --> 00:10:52,040
I'm going to leave it blank, so this will be at the index and the recall, I need to connect it to

161
00:10:52,040 --> 00:10:52,460
the view.

162
00:10:52,730 --> 00:10:53,990
Now I don't need to import this view.

163
00:10:53,990 --> 00:10:55,190
It's right here in the same file.

164
00:10:55,580 --> 00:10:59,960
So simply just going to say home underscore view.

165
00:11:00,290 --> 00:11:03,890
Hopefully you're able to figure that out and then try to do views that home view because this is all

166
00:11:03,890 --> 00:11:04,250
thin.

167
00:11:04,260 --> 00:11:05,240
You are all stock pie.

168
00:11:05,660 --> 00:11:08,700
And if you come back here, you could also give it a name, but that's actually not necessary.

169
00:11:09,110 --> 00:11:11,030
So we're just going to save this.

170
00:11:11,930 --> 00:11:16,220
And then let's go back to our homepage here and now we're going to refresh.

171
00:11:17,000 --> 00:11:18,830
And now we see home page.

172
00:11:19,280 --> 00:11:21,860
So again, this is all being done within the URLs.

173
00:11:21,860 --> 00:11:28,160
That pie file a little unusual, but it's definitely common for just helpfully starting up a website

174
00:11:28,160 --> 00:11:32,240
really quickly and making sure your home page lands to just return something inside you.

175
00:11:32,450 --> 00:11:32,990
Stop pie.

176
00:11:33,260 --> 00:11:38,180
But clearly, I could have made another separate maybe indexed that pie file at home pie file or used

177
00:11:38,180 --> 00:11:41,990
a pie file that could have been on my site for project level things.

178
00:11:42,320 --> 00:11:43,610
Again, just doing it here.

179
00:11:43,970 --> 00:11:47,060
Let's go ahead and try following the exercise of doing it through views.

180
00:11:47,450 --> 00:11:49,430
So I will delete it here.

181
00:11:50,700 --> 00:11:54,780
I will come back to my site or create a new file.

182
00:11:56,660 --> 00:11:58,280
Called views that pie.

183
00:11:59,290 --> 00:12:03,670
And now this is kind of project level views, and I'm going to have a very simple one.

184
00:12:04,330 --> 00:12:06,070
I'm going to copy and paste this line.

185
00:12:07,030 --> 00:12:07,540
Save that.

186
00:12:08,730 --> 00:12:10,050
Going to post it in here.

187
00:12:11,100 --> 00:12:12,120
And then we'll say the F.

188
00:12:13,800 --> 00:12:16,200
Home view takes in a request.

189
00:12:17,170 --> 00:12:21,040
And then return that HIV response.

190
00:12:21,400 --> 00:12:24,340
And this will be on view.

191
00:12:24,370 --> 00:12:26,950
I'm going to rename it home for you instead of home page to make sure it's working.

192
00:12:27,550 --> 00:12:30,910
And then I need to import this file into your stockpile.

193
00:12:31,270 --> 00:12:35,200
So I'll come back to Earth up high and then I can pretty much almost follow exactly what's going on

194
00:12:35,200 --> 00:12:35,470
here.

195
00:12:35,860 --> 00:12:43,810
So we say from my app import views, but here I can just say from dot import views and then this home

196
00:12:43,810 --> 00:12:47,270
view will now just be views, dots, home view.

197
00:12:47,290 --> 00:12:48,940
Let's make sure that matches up with what I wrote here.

198
00:12:49,210 --> 00:12:50,050
This is the home view.

199
00:12:50,470 --> 00:12:54,670
I should be able to run this, save this, have it reload.

200
00:12:54,880 --> 00:12:59,350
And then I'm going to come back to my website, refresh this and now I see home view.

201
00:12:59,770 --> 00:13:05,410
OK, so clearly this should now help your understanding of connecting views through imports.

202
00:13:05,680 --> 00:13:09,550
The one part where it can get tricky is you have a lot of files that end up sharing similar names.

203
00:13:09,850 --> 00:13:15,220
You get a bunch of used up files, you get a bunch of URLs that pi files and sometimes a lot of debugging.

204
00:13:15,220 --> 00:13:18,640
It's just, Oh, I import from the right place, or am I calling the right file?

205
00:13:18,940 --> 00:13:21,340
So that does take a little bit of time to adjust.

206
00:13:21,580 --> 00:13:25,900
And that's why separating things out into multiple applications is sometimes really helpful.

207
00:13:26,770 --> 00:13:34,070
OK, so I have been able to create my first app and now I understand these neural patterns within that.

208
00:13:34,090 --> 00:13:40,170
Then again, if I delete this, then this will just show up within the home for the first app.

209
00:13:40,180 --> 00:13:46,240
So now if I come here and say forward slash first app, enter I.

210
00:13:46,240 --> 00:13:47,290
Now I get a simple view.

211
00:13:48,490 --> 00:13:51,910
That's the very basics of URLs, routing and views.

212
00:13:52,180 --> 00:13:56,470
We'll talk about dynamic views and more complex views like View Logic in the next lecture.

213
00:13:56,620 --> 00:13:57,130
I'll see you there.