1
00:00:05,470 --> 00:00:09,720
Welcome back to this lecture on creating a basic flask for.

2
00:00:09,790 --> 00:00:11,950
We're going to explore how we can use that flask.

3
00:00:11,950 --> 00:00:19,190
WITF library and the W.T. forms packages to quickly create forms from our flask Python scripts.

4
00:00:19,190 --> 00:00:22,900
I want to first discuss the main components we're going to be using.

5
00:00:22,950 --> 00:00:30,390
We first need to configure a secret key for security for that SRF then we create a WITF form class and

6
00:00:30,390 --> 00:00:35,300
then we create fields for each part of the form that we want to display on the template page.

7
00:00:35,430 --> 00:00:40,680
Then we set up a view function we add a parameters that function called methods is equal to a list of

8
00:00:40,950 --> 00:00:42,540
GET and POST strings.

9
00:00:42,540 --> 00:00:47,190
Then we create an instance of the Form class and then we handle form submission.

10
00:00:47,190 --> 00:00:47,800
All right.

11
00:00:48,030 --> 00:00:52,740
One quick thing to keep in mind is for the sake of this example we're going to create the form class

12
00:00:52,830 --> 00:00:58,770
in the same pie script as the view functions that later on when we see how to structure larger applications

13
00:00:59,100 --> 00:01:04,110
we're actually usually going to separate our forms into their own forms of paice file and then import

14
00:01:04,110 --> 00:01:05,380
them from there.

15
00:01:05,550 --> 00:01:10,190
Right now let's keep everything in one file that we can see how everything interacts at once.

16
00:01:10,200 --> 00:01:12,240
Let's head over to our text editor Laura.

17
00:01:12,240 --> 00:01:14,840
Here we are at the text editor to start off with.

18
00:01:14,850 --> 00:01:19,960
We just need one basic thought PI file and then underneath our templates folder I have indexed that

19
00:01:20,030 --> 00:01:20,630
each time.

20
00:01:20,700 --> 00:01:24,270
So it's one to multiple file and one high script file.

21
00:01:24,300 --> 00:01:27,800
So let me now start off with our basic pi.

22
00:01:28,020 --> 00:01:29,950
Or just start off with quite a few imports.

23
00:01:29,970 --> 00:01:34,960
We'll say from flask import flask and we'll also be rendering a template.

24
00:01:35,640 --> 00:01:45,460
And then we're going to say from flask underscore WITF import flask form a flask form is going to be

25
00:01:45,460 --> 00:01:49,430
a class that we're going to inherit from to create our own forms.

26
00:01:50,600 --> 00:01:58,260
Then we're going to save from W-2 forms import and this is where we can actually import fields that

27
00:01:58,270 --> 00:01:59,960
are going to go into the form.

28
00:01:59,960 --> 00:02:05,500
So very basic ones are things like string field and the other most basic one is submit field which are

29
00:02:05,510 --> 00:02:08,930
pretty much always going to have if you intend to submit the form.

30
00:02:09,060 --> 00:02:14,580
So now that we have our imports let's create our application just as we've always done then we pass

31
00:02:14,580 --> 00:02:22,340
in the bill to name variable and then we need to configure a secret key in order to have the C-s RF

32
00:02:22,550 --> 00:02:23,660
security work.

33
00:02:23,840 --> 00:02:29,220
So to do this we say grab our application and then grab the config.

34
00:02:29,220 --> 00:02:35,340
And this is essentially a configuration dictionary for application and the key we're going to grab here

35
00:02:35,340 --> 00:02:38,930
is called Secrets underscore key.

36
00:02:39,240 --> 00:02:45,600
And this is a key that's actually built into a flask application configuration and you can set this

37
00:02:45,600 --> 00:02:47,250
to any string you want.

38
00:02:47,250 --> 00:02:52,680
Now later on when we actually deploy flask applications we're going to show much better ways to configure

39
00:02:52,680 --> 00:02:53,780
a secret key.

40
00:02:53,790 --> 00:02:58,860
Right now we're just going to put a string out in the open so we can say what I really want my secret

41
00:02:58,860 --> 00:03:04,840
key or whatever string you decide on in the future will show you a much better way of doing this.

42
00:03:04,840 --> 00:03:08,710
But for now just so it's clear we're going to set it up as a string.

43
00:03:08,710 --> 00:03:10,830
Usually we want to set it up as an environment variable.

44
00:03:10,900 --> 00:03:15,380
So it's not readable for me thought PI script in case someone's able to see that by script.

45
00:03:15,730 --> 00:03:16,280
OK.

46
00:03:16,450 --> 00:03:22,420
So now we need to do two things we want to create an instance or basically create there'll be a form

47
00:03:22,420 --> 00:03:27,250
class and then we want to set a view function that actually creates the instance of that form class

48
00:03:27,580 --> 00:03:30,210
and then checks if it's a valid submission.

49
00:03:30,220 --> 00:03:37,170
So let's start by creating a WTU a form class we'll call a class and then I'm going to call my form

50
00:03:37,860 --> 00:03:42,080
info form and technically this is a name you can choose whatever you want.

51
00:03:42,150 --> 00:03:49,710
So I'm just using info form and what I'm going to do isn't going to inherit from flask form so I'll

52
00:03:49,710 --> 00:03:56,030
say flask form as our inheritance and this is just a general class.

53
00:03:56,050 --> 00:04:02,750
And right now we're going to just say that this is a class form that just grabs information about puppies.

54
00:04:02,800 --> 00:04:08,110
So I want to know the breed of a puppy who's filling in this form and we're going to have that just

55
00:04:08,110 --> 00:04:14,050
be a string field because they can say hey I'm a labrador or a tree I'm a Labrador I'm a golden retriever

56
00:04:14,320 --> 00:04:16,270
and a pit bull etc..

57
00:04:16,780 --> 00:04:24,940
So typically the way it works is you're going to import certain fields from w t forms and then you're

58
00:04:24,940 --> 00:04:27,900
going to provide parameters that relate to that field.

59
00:04:28,040 --> 00:04:32,870
First drink field you're just going to automatically put in the string here for the label.

60
00:04:32,950 --> 00:04:37,820
So what breed are you.

61
00:04:37,820 --> 00:04:42,140
So we pass in a stream that directly connects the label to this string field.

62
00:04:42,140 --> 00:04:47,070
Later on we'll see dropdown fields that are a little more complex as far as the parameters it choose.

63
00:04:47,210 --> 00:04:49,800
But Springfields are pretty straightforward.

64
00:04:49,850 --> 00:04:52,330
And then we want a submit field.

65
00:04:52,400 --> 00:04:55,600
Notice how we're just setting these as attributes of the class.

66
00:04:55,730 --> 00:05:00,640
So say submit field and then we'll pass and submit.

67
00:05:00,840 --> 00:05:07,950
OK so this class in full form is a class of my choosing and I'm inheriting from flask form that is imported

68
00:05:08,490 --> 00:05:12,300
here on line to Flast the T.F. import flask form.

69
00:05:12,360 --> 00:05:17,850
Then my info form has two attributes breedings submit and these attributes are going to be something

70
00:05:17,880 --> 00:05:22,430
I can send back to my template and the related to fields of the form.

71
00:05:22,440 --> 00:05:28,350
So I have a string field asking what breed and a submit field an essay previously mentioned during the

72
00:05:28,350 --> 00:05:33,900
slides often We're going to actually put these forms in their own separate forms that py file but keep

73
00:05:33,900 --> 00:05:34,870
things simple for now.

74
00:05:34,990 --> 00:05:40,180
We're going to keep them in the same field that are in the same script that we have here.

75
00:05:40,190 --> 00:05:47,090
So now let's set up our view function we'll say apt that route.

76
00:05:47,320 --> 00:05:55,930
I want to send this to the index page and then we're going to set a parameter methods for gets and post

77
00:05:56,140 --> 00:06:04,980
and that's going to allow us to actually pass in this form to the template I'll say index.

78
00:06:05,130 --> 00:06:11,490
And what I'm going to do is I'm going to set a breed variable to the boolean false so we can use it

79
00:06:11,730 --> 00:06:19,660
as an IF statement in the T.M. so to say Breede starts off as false and later on you'll see why do that

80
00:06:19,660 --> 00:06:21,890
when we actually deal the index like C.M..

81
00:06:22,150 --> 00:06:26,740
So I said Breede to false and then I'm going to create an instance of the form.

82
00:06:26,740 --> 00:06:34,560
So I will say four is equal to an instance of info form that is how open closed predecease here then

83
00:06:34,590 --> 00:06:36,050
I do the following logic.

84
00:06:36,070 --> 00:06:40,650
I want to check if the form is valid on submission.

85
00:06:40,650 --> 00:06:43,960
And we'll talk about validation in more detail later on.

86
00:06:44,050 --> 00:06:48,290
But basically say if form validly on submit.

87
00:06:48,610 --> 00:06:54,230
Open close print sees essentially all the validators are met and they hit submit.

88
00:06:54,250 --> 00:06:56,800
Then I want to grab the data from the form.

89
00:06:56,800 --> 00:06:57,720
So I do the following.

90
00:06:57,730 --> 00:07:04,170
I say a brief variable is equal to that form.

91
00:07:04,380 --> 00:07:11,170
Breed data and then I'm going to reset the form's breed data to be empty.

92
00:07:11,230 --> 00:07:19,010
So then say form the breed data is equal to an empty string.

93
00:07:19,010 --> 00:07:26,170
And then after all this I'm going to say return render template and then just go back to my home page

94
00:07:27,210 --> 00:07:29,140
essentially just a simple refresh here.

95
00:07:30,020 --> 00:07:35,860
White pasand form is to form and breed is equal to breed.

96
00:07:37,840 --> 00:07:45,430
And then finally at the very bottom I'm going to say if name is equal to Main take my app and run it

97
00:07:46,050 --> 00:07:49,480
and we'll sit de-bug equal to true OK.

98
00:07:49,500 --> 00:07:51,760
Let me save that there are a lot of code going on here.

99
00:07:51,760 --> 00:07:53,780
So let's break it down line by line.

100
00:07:54,030 --> 00:07:55,970
First a quick review of what we did here.

101
00:07:55,990 --> 00:07:59,160
We start off with our imports we create our application.

102
00:07:59,250 --> 00:08:04,260
We grab our applications essentially configuration dictionary and we set the configuration for the secret

103
00:08:04,260 --> 00:08:06,790
key equal to a string of our choosing.

104
00:08:06,810 --> 00:08:08,450
You can call this string whatever you want.

105
00:08:08,620 --> 00:08:10,500
You just going to be something secure.

106
00:08:10,500 --> 00:08:13,570
And like I mentioned later on we'll see a much better way of doing this.

107
00:08:13,800 --> 00:08:15,560
Then we create our form.

108
00:08:15,780 --> 00:08:24,360
We create our own class of our forms choosing and we inherits from flask for then this info form is

109
00:08:24,360 --> 00:08:28,670
going to have attributes here we just have a single field for what can be filled in.

110
00:08:28,700 --> 00:08:34,190
We have agreed as an attribute and that's a string field asking what breed are you.

111
00:08:34,200 --> 00:08:39,120
And then we have a submit attribute which is a submit field essentially a submit button and the string

112
00:08:39,120 --> 00:08:42,390
you pass and to submit field is what the actual submit button will say.

113
00:08:42,390 --> 00:08:48,480
So it could say something else like enter here or ready to submit really whatever you want.

114
00:08:48,480 --> 00:08:50,110
Next we have our application.

115
00:08:50,160 --> 00:08:55,620
We set the route to the home page and notice we now add a methods equal to get and post so we can get

116
00:08:55,620 --> 00:08:57,230
and post these forms.

117
00:08:57,990 --> 00:09:03,280
Then we set a breed attribute or excuse me a breed variable equal to false.

118
00:09:03,540 --> 00:09:08,970
And notice that this Bredar variable is different from this breed on line 11 this breed is an attribute

119
00:09:09,150 --> 00:09:11,840
of info for on line 17.

120
00:09:11,850 --> 00:09:19,410
This breed is just a variable that we create an instance of reform that will say if form we evolved

121
00:09:19,690 --> 00:09:24,610
on submit we grabbed the breed from formed that breed that data.

122
00:09:24,670 --> 00:09:30,010
So this pattern is something you're are going to be using a lot you say form dot and then the attribute

123
00:09:30,010 --> 00:09:34,380
you want here attribute breed data and that returns back data.

124
00:09:34,390 --> 00:09:40,060
Those submitted for that field and you'll see more examples of this later on for it to become more clear.

125
00:09:40,150 --> 00:09:45,940
And then we say we reset formed up Breede that data equal to an empty string and essentially line 17

126
00:09:45,940 --> 00:09:50,830
and line 21 are going to make a lot more sense when we actually play around with the template then we

127
00:09:50,830 --> 00:09:54,870
return template home and pass in the form of pasand to breed.

128
00:09:54,880 --> 00:10:00,410
So let's see how line 17 and how Line 21 fully work by going to index that each team.

129
00:10:01,060 --> 00:10:06,870
And setting up index studies smell essentially our home page we're going to do the following here.

130
00:10:06,920 --> 00:10:11,350
Let's set up a paragraph variable and I have to do the following.

131
00:10:11,350 --> 00:10:14,800
I'll say an if statement so it will say if Breede

132
00:10:17,720 --> 00:10:28,390
then I will say the breed you entered was or I ask say is and then I'm going to pass in the variable

133
00:10:31,020 --> 00:10:35,030
update it in the form below.

134
00:10:37,010 --> 00:10:46,120
And then I want to have an else statement here I'll say else please enter your Breede and save that.

135
00:10:46,380 --> 00:10:48,050
So what is this actually doing.

136
00:10:48,070 --> 00:10:56,010
Remember if we come back to basic I'm passing in Breede to my home template the default for Breede is

137
00:10:56,010 --> 00:11:01,380
equal to false which means it's going to say if breed and that's going to hit trigger falls.

138
00:11:01,380 --> 00:11:05,970
So the very first thing the user sees when they hit this home page is going to say please and to your

139
00:11:05,970 --> 00:11:06,790
breed.

140
00:11:06,900 --> 00:11:13,820
So then below that what I'm going to do is have a form to say weps form.

141
00:11:13,830 --> 00:11:14,580
There you go.

142
00:11:15,010 --> 00:11:17,450
And we can delete class and action.

143
00:11:17,470 --> 00:11:24,640
So it's not really redirecting at least not with age T.M. and the method is going to be post and I like

144
00:11:24,640 --> 00:11:26,140
putting posts in all caps.

145
00:11:26,140 --> 00:11:27,370
Technically that shouldn't matter.

146
00:11:27,370 --> 00:11:32,830
By know for some weird combinations of operating systems and flask you do need to have it in all caps

147
00:11:32,980 --> 00:11:36,090
but just keep in mind it should work even if it's in lowercase.

148
00:11:36,290 --> 00:11:41,930
So that method is legal to post and then we do the following inputs.

149
00:11:41,950 --> 00:11:50,500
So in our form we're going to pass in some variables we're going to say form dots hidden underscore

150
00:11:50,620 --> 00:11:54,330
tag and that's for the see SRF security feature.

151
00:11:55,850 --> 00:12:03,990
And then we're going to say form that breed label.

152
00:12:04,490 --> 00:12:05,850
There we go.

153
00:12:05,960 --> 00:12:10,230
And then right next to it we're going to say form thought Breede

154
00:12:14,150 --> 00:12:21,350
and then we'll say here form the Submit open close princes.

155
00:12:21,800 --> 00:12:25,520
OK so now you're wondering well what the heck are these three lines doing.

156
00:12:25,530 --> 00:12:29,320
So let's take a closer look at them and they're going to separate them out just a little bit here.

157
00:12:29,400 --> 00:12:31,940
Spacing so we can read them more clearly.

158
00:12:32,310 --> 00:12:35,400
Remember that I'm actually passing in a form object.

159
00:12:35,420 --> 00:12:41,430
If we come back here at the base about pi I said for Ezekial to form or remember form is this info form

160
00:12:42,270 --> 00:12:46,440
and in full form has two attributes has breed and submit.

161
00:12:46,440 --> 00:12:53,460
So when I come over here and I call DOT breed and that submit those are actually the attributes I'm

162
00:12:53,460 --> 00:12:56,130
calling over here and those are connected to fields.

163
00:12:56,130 --> 00:13:00,340
You should also keep in mind that since I'm inheriting from Plus form there's going to be attributes

164
00:13:00,340 --> 00:13:04,660
and methods that even though I don't type them here I'm still going to have availability of them.

165
00:13:04,800 --> 00:13:06,550
And that's where hidden attack comes in.

166
00:13:06,680 --> 00:13:10,770
Hidden tag that's going to be available to us because we inherited from flask form.

167
00:13:10,800 --> 00:13:13,850
So even though we didn't define it here that's where it's coming from.

168
00:13:13,890 --> 00:13:20,430
So we have this security method hidden tag and then we say formed up Breede which remember is this string

169
00:13:20,430 --> 00:13:22,420
field and then the string field.

170
00:13:22,510 --> 00:13:27,570
Well you can do is you can either ask for its label which is the string that we pass and here what breed

171
00:13:27,570 --> 00:13:28,400
are you.

172
00:13:28,830 --> 00:13:34,080
Or you can ask to actually execute Breede which is then going to make a little string field box for

173
00:13:34,080 --> 00:13:35,080
you in your form.

174
00:13:35,250 --> 00:13:36,470
And typically you're going to do both.

175
00:13:36,510 --> 00:13:42,810
You're going to have the label that you provided and then insert the actual box to fill in or the radio

176
00:13:42,810 --> 00:13:45,410
button or whatever it happens to be in your form right next to it.

177
00:13:45,630 --> 00:13:48,790
And then at the very bottom you're going to call the submit method.

178
00:13:48,810 --> 00:13:50,390
So that's our basic form.

179
00:13:50,670 --> 00:13:52,020
Let's make sure we save this.

180
00:13:52,290 --> 00:13:54,530
And let's run this and see what happens.

181
00:13:54,600 --> 00:13:56,970
Make sure we didn't make any mistakes here.

182
00:13:57,060 --> 00:13:59,190
So Pythonesque the pie looks like it's running.

183
00:13:59,340 --> 00:14:03,060
Let me bring in over my browser so we can see this in action.

184
00:14:04,600 --> 00:14:09,160
And looking at my Yoro looks like I have a template not found there.

185
00:14:09,280 --> 00:14:11,240
It's his home but he's still not found.

186
00:14:11,260 --> 00:14:13,190
Looks like I called index studies.

187
00:14:13,200 --> 00:14:14,770
So let's quickly fix that.

188
00:14:14,800 --> 00:14:16,160
We're going to come down here.

189
00:14:16,210 --> 00:14:19,890
It says home that each team out let's fix that to be indexed still.

190
00:14:20,290 --> 00:14:21,200
Save that.

191
00:14:21,460 --> 00:14:25,750
Now that we fix that let's bring in over a browser that says please and to your breed what breed are

192
00:14:25,750 --> 00:14:26,350
you.

193
00:14:26,350 --> 00:14:32,350
I'm going to say I'm a lab and then hit submit and then updates because remember breed is no longer

194
00:14:32,350 --> 00:14:32,800
false.

195
00:14:32,800 --> 00:14:35,050
Now breed is an actual string lab.

196
00:14:35,080 --> 00:14:40,360
So it says if breed and string is going to be treated as true so then it says the breed entered his

197
00:14:40,360 --> 00:14:42,540
lab update it in the form below.

198
00:14:42,760 --> 00:14:49,750
So if I want to update this to maybe I want to be a shepherd hit submit.

199
00:14:49,750 --> 00:14:54,610
And now it's going to update again because remember it reloads that and it grabs that data from the

200
00:14:54,610 --> 00:15:00,700
form so it says Breede Ezekial to form the data and then it resets that data to be an empty string.

201
00:15:00,700 --> 00:15:04,900
The reason we reset it to be an empty string is so that I don't see something being filled in here.

202
00:15:04,900 --> 00:15:08,560
I just see the Breit I previously entered that I can continually update it.

203
00:15:08,740 --> 00:15:14,250
And so as I just type in stuff here I get to see it being updated over and over again.

204
00:15:14,700 --> 00:15:15,230
OK.

205
00:15:15,340 --> 00:15:16,780
So those are the very basics.

206
00:15:16,800 --> 00:15:20,040
So a very quick rundown of the different components here.

207
00:15:20,190 --> 00:15:24,580
To get a lot more practice of this so don't worry too much if it's not all clicking just yet when you

208
00:15:24,580 --> 00:15:28,890
see multiple examples of using W.T. of forms it's going to become a lot clearer.

209
00:15:31,090 --> 00:15:38,860
The main ideas here is that we have from Flast WITF and we import a flask form then we get to import

210
00:15:38,890 --> 00:15:43,740
whatever fields you want to use in our form from W.T. forms in the next lecture.

211
00:15:43,750 --> 00:15:47,470
We'll talk a lot more detail about the different fields that are available to you.

212
00:15:48,750 --> 00:15:54,480
Then you set up your application you set up your applications configuration secret key as a string as

213
00:15:54,480 --> 00:15:56,760
it keeps saying we'll figure out a better way to do this later on.

214
00:15:56,760 --> 00:15:58,180
So it's not so public.

215
00:15:58,440 --> 00:16:00,920
Then you create your own forum class.

216
00:16:00,930 --> 00:16:03,210
You say class in full form.

217
00:16:03,210 --> 00:16:08,140
You inherit from flask form and then you sign on the fields that your forms actually going to have.

218
00:16:08,220 --> 00:16:12,830
Our form is quite simple had just one field that we decided to call breed and we set that two string

219
00:16:12,830 --> 00:16:15,750
field and then we passed in the label though would that be displayed.

220
00:16:15,750 --> 00:16:17,030
What breed are you.

221
00:16:17,040 --> 00:16:23,070
And then we have a submit button set as a submit field and then we have at that route we set it to the

222
00:16:23,070 --> 00:16:29,460
home page and we also want to add in methods equal to this list and post and then we did the following

223
00:16:29,460 --> 00:16:37,700
logic line 17 and lines 21 were essentially four more for the template logic we set breeds equal to

224
00:16:37,730 --> 00:16:38,510
false.

225
00:16:38,540 --> 00:16:44,150
We create an instance of reform we validate on submit and we say if the form is valid on submission

226
00:16:44,540 --> 00:16:50,120
then we set breed and we actually grab the data from Breit So we say a form that read that data and

227
00:16:50,120 --> 00:16:54,480
this sort of form attribute that data that's something you're to see a lot.

228
00:16:54,560 --> 00:16:59,930
Then we've reset that data to an empty stream and we render the template passing in the form and the

229
00:16:59,930 --> 00:17:00,460
breed.

230
00:17:00,650 --> 00:17:06,830
So notice when we pass in the first time it's false which means it's going to ask for you to please

231
00:17:06,860 --> 00:17:09,200
enter your breed when it's not false.

232
00:17:09,200 --> 00:17:14,660
Essentially saying if something that's not false like a string like entering a lab that will say the

233
00:17:14,700 --> 00:17:20,120
Breguet entered is a breed you provided updated in the form below and then the way you actually connect

234
00:17:20,120 --> 00:17:23,180
the form to the template is passing in the form.

235
00:17:23,180 --> 00:17:25,340
Remember we said form is the form here.

236
00:17:25,340 --> 00:17:29,070
And you can call off the attributes a method of the form you're always going to need to have the hit

237
00:17:29,120 --> 00:17:31,990
tag in order for the security feature to work for these forms.

238
00:17:32,120 --> 00:17:39,380
And then you can call form dot your attribute your label and then form your breed some to know if sometimes

239
00:17:39,410 --> 00:17:42,760
you want to set your own class to these forms.

240
00:17:42,810 --> 00:17:51,370
So we can do that is inside of this breed call a consent class equal to whatever some CSSA classes.

241
00:17:51,440 --> 00:17:54,780
So that's the way you can stylize these forms.

242
00:17:54,800 --> 00:18:00,600
So maybe you want I don't know some border around the label or the submit button.

243
00:18:00,710 --> 00:18:05,120
You can just pass and class equal to and then the name of your C Ss class won't be messing around too

244
00:18:05,120 --> 00:18:09,150
much of CSSA in this case so we'll just leave that blank and then we have the summit.

245
00:18:09,630 --> 00:18:10,090
OK.

246
00:18:10,280 --> 00:18:11,840
And then we can see how that connected.

247
00:18:11,840 --> 00:18:16,410
And remember we say method is to post here because we're posting information.

248
00:18:16,460 --> 00:18:17,120
All right.

249
00:18:17,450 --> 00:18:17,850
Thanks.

250
00:18:17,870 --> 00:18:21,630
And we'll see you at the next lecture where we discuss form fields and a lot more detail.