1
00:00:05,410 --> 00:00:06,180
Welcome back.

2
00:00:06,280 --> 00:00:09,380
Let's now go over the solutions for the simple project.

3
00:00:09,430 --> 00:00:11,740
Keep in mind there's many ways you could have approached this.

4
00:00:11,740 --> 00:00:13,730
This is just one example solution.

5
00:00:13,750 --> 00:00:15,300
Let's get started.

6
00:00:15,300 --> 00:00:17,110
All right here I am at my text editor.

7
00:00:17,110 --> 00:00:21,280
I've gone ahead and copied and pasted the skeleton code from the simple project that you were given

8
00:00:21,280 --> 00:00:22,400
to start off with.

9
00:00:22,420 --> 00:00:28,120
We have some things to do here such as filling out the view functions for the index page and the report

10
00:00:28,120 --> 00:00:28,820
page.

11
00:00:28,860 --> 00:00:30,560
We're going to first set up our templates.

12
00:00:30,580 --> 00:00:36,040
I'm just going to quickly create some new files here so I'll say underneath templates.

13
00:00:36,040 --> 00:00:39,320
New file will start off with Bates thought HVM T.M..

14
00:00:39,340 --> 00:00:43,500
This is where navigation bar is going to go and we're going to create two more files here.

15
00:00:43,750 --> 00:00:49,840
One will say is the index page index the h t m l and then the other one will say this is the report

16
00:00:49,840 --> 00:00:50,500
page.

17
00:00:50,500 --> 00:00:52,570
So will go ahead and call this something like.

18
00:00:52,570 --> 00:00:57,580
Report the HTL essentially saying what we passed as far as the requirements.

19
00:00:57,580 --> 00:01:02,020
Lets start off by filling out our Based on each team l file and I'm actually going to copy and paste

20
00:01:02,020 --> 00:01:07,530
this from our notes or a provided solution may collapse this bar.

21
00:01:08,520 --> 00:01:11,910
So just copy and paste this but it's actually nothing we haven't seen before.

22
00:01:12,090 --> 00:01:15,390
It's essentially the links to bootstrap over here on the top.

23
00:01:15,390 --> 00:01:20,850
I set the title to Papy years in namecheck and then I set a navigation bar appear essentially the same

24
00:01:20,850 --> 00:01:21,910
navigation bar.

25
00:01:21,930 --> 00:01:27,280
The only thing to note is that I have a pro forma index page linking to home page as the brand.

26
00:01:27,510 --> 00:01:32,370
So that's the home page button on the brand page and then we see here we have a content block and an

27
00:01:32,370 --> 00:01:33,140
end block.

28
00:01:33,240 --> 00:01:37,670
So I'm going to be able to extend my base HTL and call these blocks.

29
00:01:37,710 --> 00:01:38,810
Let's save that.

30
00:01:38,880 --> 00:01:41,580
So our main base that each symbol is done.

31
00:01:41,640 --> 00:01:49,290
Let's set up our index page so come over here to my index page and I'll say extends and I'm extending

32
00:01:49,290 --> 00:01:57,760
from baseline h T.M. that will color block content and then we want to insert some things here.

33
00:01:57,900 --> 00:02:04,080
So I set up a Jumbotron to hold everything and this Jumbotron you can add as much instruction as you

34
00:02:04,080 --> 00:02:15,590
want but basically I'm going to say please provide a username that meets requirements so I won't bother

35
00:02:15,590 --> 00:02:19,440
to listen the requirements here since we already talked about that in the previous lecture.

36
00:02:19,450 --> 00:02:25,260
Instead we'll move on to focus on the form so we need to create a form here.

37
00:02:25,490 --> 00:02:31,680
We'll see form and I won't bother giving a class and we can't remove method here.

38
00:02:32,540 --> 00:02:36,720
The thing I want to say for the action is to go for the report Yoro.

39
00:02:37,250 --> 00:02:45,030
So we will say inside of this your L for and then we'll passen report.

40
00:02:45,080 --> 00:02:49,810
So once the person hits submit it'll take him to that report function.

41
00:02:49,820 --> 00:02:57,670
Let's create a simple label will say this label is for username and then the actual label just say username

42
00:02:58,790 --> 00:03:02,170
and then we want two inputs one for the text that the user name.

43
00:03:02,450 --> 00:03:07,560
So we'll say this is user name doesn't need to have a value here.

44
00:03:09,800 --> 00:03:16,020
And then finally will have a submit button so will say input type is submit an doesn't need to have

45
00:03:16,020 --> 00:03:16,590
a name here.

46
00:03:16,620 --> 00:03:21,730
We'll go ahead and give a value of submit form.

47
00:03:21,770 --> 00:03:22,130
All right.

48
00:03:22,160 --> 00:03:24,280
So that's our form ready to go.

49
00:03:24,290 --> 00:03:27,130
The solution has some extra explanation as far as what the requirements are.

50
00:03:27,140 --> 00:03:30,140
But since we are to discuss those we don't really need them here.

51
00:03:30,350 --> 00:03:35,360
And then the report that each team page is actually going to be some more logic to go into this report

52
00:03:35,360 --> 00:03:36,030
page.

53
00:03:36,050 --> 00:03:41,740
So let's first sync up and link the index page by coming back to our basic thought py file.

54
00:03:41,960 --> 00:03:49,430
So there's the home page and it should have the form to start by setting up my imports will say here

55
00:03:49,460 --> 00:03:50,350
at the very top.

56
00:03:50,350 --> 00:03:55,910
From flask import and I'm going to need flask.

57
00:03:55,940 --> 00:04:00,020
Gonna need to render some templates and then I'm also going to need to use request to actually grab

58
00:04:00,020 --> 00:04:03,140
the information from the form that the user provides.

59
00:04:03,140 --> 00:04:11,450
Then will say app is equal to flask and I will pass in my name variable there and then for the index.

60
00:04:11,450 --> 00:04:18,770
I'm just going to return render a template and I will render my index thought h HTML or whatever you

61
00:04:18,770 --> 00:04:21,470
happen to call your index that it's HTML file.

62
00:04:21,690 --> 00:04:26,330
Ok so now I have this page which is for reporting after the form.

63
00:04:26,360 --> 00:04:32,030
So here is where I'm going to need to actually have some conditions check to see if they're met and

64
00:04:32,030 --> 00:04:36,570
then I'm going to send back some sort of code to my template.

65
00:04:37,160 --> 00:04:38,650
So let's start filling this out.

66
00:04:38,680 --> 00:04:40,210
Notice there's a lot of different hints here.

67
00:04:40,240 --> 00:04:44,570
How to check if lower case letters exist or how to check if the last letter is an integer.

68
00:04:44,630 --> 00:04:46,230
So lots of different options there.

69
00:04:46,250 --> 00:04:50,330
Again there is essentially an infinite number of ways you could done this report check.

70
00:04:50,330 --> 00:04:55,880
I'm going to clear all this information first and set up the logic so I know I have three conditions

71
00:04:56,120 --> 00:05:02,020
would be good is to have three booleans that start each as false and then we send them back to the template

72
00:05:02,300 --> 00:05:05,640
and if they're all true then we can actually start making some logic here.

73
00:05:06,540 --> 00:05:13,350
So we'll say lower letter is equal to false.

74
00:05:13,550 --> 00:05:18,760
So that's the lower letter check and we'll have a very similar one for upper letter so that equals a

75
00:05:18,770 --> 00:05:22,610
false and then we want to make sure it ends and the numbers will say numb and.

76
00:05:23,010 --> 00:05:24,530
And that's equal to false.

77
00:05:24,530 --> 00:05:30,230
Next we want to actually grab the username from the submission of the form so I will set username equal

78
00:05:30,230 --> 00:05:40,170
to request dot ARGs that get Remember I called it user name over here on my index page.

79
00:05:40,180 --> 00:05:41,050
I have the user names.

80
00:05:41,060 --> 00:05:46,870
That's what I want to grab and then once I grab that username I can begin doing those checks and the

81
00:05:46,870 --> 00:05:49,350
logic was actually shown in those links.

82
00:05:49,360 --> 00:05:51,040
Again he did have to do it this way.

83
00:05:51,040 --> 00:05:55,510
This was just if he did a quick stack overflow of how to check of lower case letters exist or upper

84
00:05:55,510 --> 00:05:57,850
case it would have given you this code right here.

85
00:05:59,330 --> 00:06:08,640
So we can check if any see is the lower for C in username and what this is doing.

86
00:06:08,640 --> 00:06:13,180
It's essentially just saying all right C is not lower.

87
00:06:13,200 --> 00:06:21,490
So is this character lowercase for every character in the username and check if any of them are true.

88
00:06:21,510 --> 00:06:24,650
This is a more advanced one liner way of doing this.

89
00:06:24,660 --> 00:06:27,210
There are lots of other ways you could done this.

90
00:06:27,210 --> 00:06:40,320
For instance you could have said a four letter in user name if letter dot lower is equal to letter then

91
00:06:40,320 --> 00:06:42,790
you know you have a matching lowercase.

92
00:06:42,810 --> 00:06:45,060
So you have a lowercase there somewhere.

93
00:06:45,060 --> 00:06:48,090
So that's another way you could done it lots lots of different ways.

94
00:06:48,090 --> 00:06:52,200
So don't worry too much if this logic doesn't make sense to you and you for your own logic there are

95
00:06:52,230 --> 00:06:54,070
a ton of different ways you can approach this.

96
00:06:54,070 --> 00:06:55,330
So I just want to make that clear.

97
00:06:56,830 --> 00:07:00,620
And that upper letter is actually the same as this instead of lower.

98
00:07:00,630 --> 00:07:07,420
You say is upper again essentially just a simple Google search would have gotten you those stack overflow

99
00:07:07,420 --> 00:07:07,880
links.

100
00:07:07,900 --> 00:07:13,670
There were hints and then for checking if the last character is an integer.

101
00:07:13,680 --> 00:07:24,680
One way to do that is grab the last item of username and then say is it OK.

102
00:07:24,710 --> 00:07:27,880
So all of these return back booleans in one liners.

103
00:07:27,950 --> 00:07:29,350
You did have to do in one line.

104
00:07:29,360 --> 00:07:34,190
This is just kind of one of the more efficient ways to do these checks by leveraging stack overflow

105
00:07:34,190 --> 00:07:38,690
answers that have already shown us how to do the work that we want to check if they're all true.

106
00:07:38,690 --> 00:07:44,090
So I will say a variable called Report to check if all these booleans are true meaning will say lower

107
00:07:44,090 --> 00:07:52,190
letter and upper letter and none end because remember the result of all of these is that they're going

108
00:07:52,190 --> 00:07:53,330
to be true and false.

109
00:07:53,540 --> 00:07:57,380
So this is basically asking Are all of these Blands now equal to true.

110
00:07:57,380 --> 00:08:02,900
They start all as false and then after the user provides their user name we do the checks for lower

111
00:08:02,900 --> 00:08:07,790
letter upper letter and end and then we decide is report equal to all true.

112
00:08:08,390 --> 00:08:17,200
Then we can finally render a template soul return rendered template and we're going to pass in our report

113
00:08:17,240 --> 00:08:20,420
that each T.M. And let's send some stuff back.

114
00:08:20,530 --> 00:08:22,430
We'll start off by sending back a report.

115
00:08:22,450 --> 00:08:27,820
So whether or not it passed all the cases and then if it didn't pass the cases we can send back reports

116
00:08:27,850 --> 00:08:32,910
on lower letter upper letter and them end to tell the user which use cases than in past.

117
00:08:32,910 --> 00:08:42,930
So say lower is equal to lower letter than we'll say upper is equal to upper letter and we'll say numb

118
00:08:43,000 --> 00:08:46,440
and physical to numb and all right.

119
00:08:46,440 --> 00:08:47,190
Save that.

120
00:08:47,340 --> 00:08:52,860
So now we're sending back our full report to the template as well as the individual use cases or requirements

121
00:08:53,220 --> 00:08:54,780
that it did or did not pass.

122
00:08:54,780 --> 00:09:01,480
So now let's go back to our report that each team EL are going to extend from baseline each.

123
00:09:02,450 --> 00:09:04,030
And let's make sure we did that in our index page.

124
00:09:04,070 --> 00:09:04,660
Yes we did.

125
00:09:04,700 --> 00:09:05,510
Perfect.

126
00:09:05,520 --> 00:09:07,130
And let's set up our block.

127
00:09:07,560 --> 00:09:10,840
So I'll say block and then content.

128
00:09:12,750 --> 00:09:18,710
I'm going to set up a Jumbotron to kind of keep the same look and feel throughout the pages and then

129
00:09:18,710 --> 00:09:26,610
we'll say Let's check your username and this is where we begin to start using that control flow logic

130
00:09:26,610 --> 00:09:32,100
of our templating so we can say if and then I have an automatic and if

131
00:09:35,020 --> 00:09:42,050
so over here I'm going to say if reports remember a report is checking if all the conditions are true.

132
00:09:42,070 --> 00:09:47,470
I'm going to just say paragraph your user name passed all checks

133
00:09:50,240 --> 00:09:52,570
and then here are going to have an L statement else.

134
00:09:52,640 --> 00:09:55,710
That means some of the cases did not actually pass.

135
00:09:55,730 --> 00:10:00,740
So let's go ahead and build a bullet list of what cases were not passed.

136
00:10:00,740 --> 00:10:07,930
So we're going to have in other if it's all say if not lower

137
00:10:11,490 --> 00:10:18,330
than we can say just a list item here you did not use a lowercase letter

138
00:10:23,650 --> 00:10:26,620
and then we're going to do this for essentially each of the conditions.

139
00:10:26,650 --> 00:10:29,730
So let's copy this and paste this.

140
00:10:29,800 --> 00:10:35,740
So if not upper remember repassing in lower and upper if we go back to they start pi.

141
00:10:35,950 --> 00:10:38,300
That's the actual parameters are passing over here.

142
00:10:39,110 --> 00:10:45,970
So say if not upper You did not use an uppercase letter.

143
00:10:46,300 --> 00:10:53,470
And then finally over here if not numb and we'll say you did not and then a number

144
00:10:57,240 --> 00:10:57,740
there we go.

145
00:10:57,820 --> 00:11:03,450
So this will build out a bulleted list for each of these three conditions that were not passed.

146
00:11:03,500 --> 00:11:07,680
Again lots of different ways could have done this if you didn't want to use the not here you could have

147
00:11:07,680 --> 00:11:14,350
just set the reverse boolean values for a lower upper end to say something like If lower than do that.

148
00:11:14,370 --> 00:11:15,740
Or if Upperton do that.

149
00:11:16,000 --> 00:11:18,420
So keep that in mind lots of different ways to do that.

150
00:11:18,430 --> 00:11:19,770
Then finally we have an end.

151
00:11:19,770 --> 00:11:26,390
If this else Lotus is going after my unordered list here I'm going to zoom out just a little bit so

152
00:11:26,390 --> 00:11:28,540
we can see the whole page.

153
00:11:28,550 --> 00:11:30,590
So let me zoom at just tiny bit more.

154
00:11:30,590 --> 00:11:31,600
We have a jumbotron.

155
00:11:31,610 --> 00:11:37,430
We're checking the user name and saying if the report fully passed that we have all the checks else

156
00:11:37,600 --> 00:11:41,310
then we're going to build out list items for each condition.

157
00:11:41,360 --> 00:11:46,440
So that's for the lower case condition upper case condition and name and condition.

158
00:11:46,490 --> 00:11:46,980
OK.

159
00:11:47,210 --> 00:11:50,660
So let's save this and make sure it all works out for us.

160
00:11:50,930 --> 00:11:55,250
We'll say Python basic about pi and looks like I have a typo somewhere.

161
00:11:56,350 --> 00:11:57,840
And I say app not the fine.

162
00:11:57,840 --> 00:11:59,680
So let's go back to basics not pi.

163
00:11:59,720 --> 00:12:00,940
I still need to fill in this.

164
00:12:00,950 --> 00:12:04,080
So looks like I just did this say over here.

165
00:12:05,010 --> 00:12:08,720
App run debug equals.

166
00:12:08,970 --> 00:12:09,380
True.

167
00:12:09,390 --> 00:12:10,800
That should help us debug this case.

168
00:12:10,800 --> 00:12:12,800
I made any errors.

169
00:12:12,800 --> 00:12:13,690
Let's run this again.

170
00:12:13,700 --> 00:12:15,590
Let's make sure we set our app.

171
00:12:15,710 --> 00:12:15,940
All right.

172
00:12:15,940 --> 00:12:17,140
Our app is set.

173
00:12:17,240 --> 00:12:18,950
So let's save those changes.

174
00:12:18,950 --> 00:12:19,760
Run this again.

175
00:12:20,990 --> 00:12:21,280
All right.

176
00:12:21,320 --> 00:12:23,420
So it looks like it's running in my browser.

177
00:12:23,420 --> 00:12:27,550
Let me bring in my browser make sure we don't have any issues going to bring this in.

178
00:12:27,580 --> 00:12:32,060
I'm a little zoomed in here so please provide a username that meets requirements.

179
00:12:32,090 --> 00:12:33,090
Let's try it out.

180
00:12:33,110 --> 00:12:38,560
First start off with a name that doesn't meet the requirements for uppercase or the number and then

181
00:12:38,690 --> 00:12:43,110
hit submit form said you do not use an uppercase letter is not in the number.

182
00:12:43,230 --> 00:12:44,540
Go back to the home page.

183
00:12:44,570 --> 00:12:47,120
Let's try all uppercase.

184
00:12:47,300 --> 00:12:49,230
You don't use a lowercase in a number.

185
00:12:49,250 --> 00:12:50,660
Let's finally try one that works.

186
00:12:50,720 --> 00:12:56,690
So we'll do rufous one hit submit form and it says Let's check your user name user name passed all the

187
00:12:56,690 --> 00:12:57,520
checks.

188
00:12:57,530 --> 00:12:57,920
All right.

189
00:12:57,950 --> 00:12:59,680
And that's really all there was to it.

190
00:12:59,750 --> 00:13:03,460
Again really combining a lot of the ideas that we just talked about in the templates.

191
00:13:03,560 --> 00:13:08,540
Talking about connecting the templates of rendered template talking about actually grabbing requests

192
00:13:08,560 --> 00:13:13,700
are elements from the form then doing some logic inside of our flask application.

193
00:13:13,850 --> 00:13:17,360
Returning back variables and then also template control flow.

194
00:13:17,360 --> 00:13:22,340
So essentially combine all the ideas of what we just talked about throughout the previous lectures of

195
00:13:22,340 --> 00:13:23,160
the template.

196
00:13:23,480 --> 00:13:27,410
Now it's time to move on to the next section of the course where we talk about forms.

197
00:13:27,500 --> 00:13:32,240
If we look back at the forms we're building out here we're still building out forms that H Tim L and

198
00:13:32,240 --> 00:13:37,550
there's many libraries in flask that actually allow us to leverage the power of Python to automatically

199
00:13:37,550 --> 00:13:44,300
build out forms in our flask application and send out simpler templating instructions to our HTL templates.

200
00:13:44,300 --> 00:13:46,550
That's mainly we're going to be talking about in the next section.

201
00:13:46,640 --> 00:13:48,730
So I'm excited to get started with it.

202
00:13:48,740 --> 00:13:49,460
We'll see you there.
