1
00:00:00,180 --> 00:00:03,450
In this video, you learn how to create this Web app.

2
00:00:04,140 --> 00:00:08,640
It's a typical web app that gets some input from the user.

3
00:00:09,300 --> 00:00:12,480
For example, this one here is a volume calculator.

4
00:00:12,990 --> 00:00:21,900
Let's say the user will enter the dimensions of a cube like four five four seven three, and they can

5
00:00:21,900 --> 00:00:23,870
press, calculate avails.

6
00:00:23,890 --> 00:00:24,870
Get the results here.

7
00:00:25,290 --> 00:00:33,750
So I'm including this web app in this course because this is a very modern way to distribute to publish

8
00:00:33,750 --> 00:00:35,130
your programs.

9
00:00:35,160 --> 00:00:40,710
And you can just give the URL to people and they can use your program.

10
00:00:41,160 --> 00:00:43,470
So let's build this app in this video.

11
00:00:44,790 --> 00:00:50,580
For this, we're going to use the flask library, so go to packages and install flask if you haven't

12
00:00:50,580 --> 00:00:51,480
done so already.

13
00:00:53,640 --> 00:01:01,110
Then you want to go to the directory and create a directory tree, which is basically just a templates

14
00:01:01,320 --> 00:01:01,980
folder.

15
00:01:02,190 --> 00:01:04,830
So you should create an empty directory name.

16
00:01:04,830 --> 00:01:11,130
That's templates, and then you should have a main that's profile or whatever name you want to give

17
00:01:11,130 --> 00:01:12,120
to your profile.

18
00:01:12,300 --> 00:01:18,360
And then inside templates, you want to click there and add the file and name its index.

19
00:01:18,480 --> 00:01:19,560
That's the email.

20
00:01:19,950 --> 00:01:21,900
It has to be an item of file.

21
00:01:22,770 --> 00:01:26,340
So what we're having here isn't actually in the file and the Python file.

22
00:01:26,550 --> 00:01:33,540
The the email is responsible to render all these visual elements of the text.

23
00:01:34,110 --> 00:01:36,270
This text box is input boxes.

24
00:01:36,450 --> 00:01:45,780
The bottom all these are built using the email language, and Python is responsible to do the processing

25
00:01:45,780 --> 00:01:46,650
of the data.

26
00:01:46,680 --> 00:01:51,930
So in this case, we're going to give these three numbers from the user and then we're going to implement

27
00:01:51,930 --> 00:01:58,010
a formula in Python to calculate the volume, which is basically that times that.

28
00:01:58,020 --> 00:01:58,710
Times that.

29
00:01:59,310 --> 00:02:05,850
And then we get a final number and then we send that to this place here in the email.

30
00:02:06,540 --> 00:02:11,580
Now if you right click here and go to inspect Element.

31
00:02:13,130 --> 00:02:16,640
You can see the HTML of this page.

32
00:02:18,690 --> 00:02:24,330
Of course, you cannot do this because you don't have the you are perhaps, but you can see on my screen

33
00:02:24,330 --> 00:02:24,600
here.

34
00:02:25,230 --> 00:02:32,160
So basically, this sixty eight point four corresponds with this elements.

35
00:02:32,580 --> 00:02:35,040
So it's a p h html element.

36
00:02:35,280 --> 00:02:38,610
And then we have things like input boxes.

37
00:02:38,910 --> 00:02:42,220
So this year, it's an input element.

38
00:02:42,960 --> 00:02:46,830
So it's designed to receive inputs from the user.

39
00:02:47,430 --> 00:02:52,110
A key element is designed to display some text to the user.

40
00:02:52,260 --> 00:02:54,590
And then we have other things like H1.

41
00:02:55,110 --> 00:02:57,300
This is designed to display big text.

42
00:02:57,450 --> 00:03:04,830
So this H1 tag here, so that is the HDMI port basically that we're going to right here inside index

43
00:03:04,830 --> 00:03:05,640
that HMO.

44
00:03:06,710 --> 00:03:13,520
So you might want to start either with the HMO codes or you can start writing the Python code.

45
00:03:13,820 --> 00:03:16,520
I prefer to work on the front end first.

46
00:03:16,700 --> 00:03:23,840
So on the a.m. part, so what I'm going to do is I'm going to write the HMO documents here.

47
00:03:25,250 --> 00:03:27,830
So you start with diff elements.

48
00:03:28,790 --> 00:03:31,070
These are the alter elements.

49
00:03:31,310 --> 00:03:40,130
A diff is basically a division, a section on the website which could contain other elements.

50
00:03:40,130 --> 00:03:49,410
So we have a D, for example, then we could have an H1 tag and you should work like this.

51
00:03:49,430 --> 00:03:51,200
So you open that stack here.

52
00:03:51,350 --> 00:03:54,560
You close it with this backslash, as you see on my screen.

53
00:03:55,040 --> 00:03:56,920
The same goes with other attacks.

54
00:03:56,930 --> 00:03:57,920
You open it there.

55
00:03:58,790 --> 00:04:00,350
You write the contents in here.

56
00:04:00,350 --> 00:04:05,870
So volume calculator and then you close the tag there.

57
00:04:07,820 --> 00:04:10,370
Alan, perhaps you want smaller text.

58
00:04:11,550 --> 00:04:18,540
For that's for small effects, you need pre-tax to open a P-TECH close here, and then in between the

59
00:04:18,540 --> 00:04:27,270
tax, you write something like enter the three dimensions to get the volume rights.

60
00:04:27,510 --> 00:04:33,090
So so far, this is the end product just for you to see as a reference.

61
00:04:33,810 --> 00:04:36,930
So so far, we built that we wrote that sports.

62
00:04:37,140 --> 00:04:42,660
Now we have to have some sort of form EdgeHTML elements for that.

63
00:04:43,320 --> 00:04:52,860
We need the form element to open it and close it, and in between now, form will contain different

64
00:04:53,340 --> 00:04:54,420
input elements.

65
00:04:55,410 --> 00:05:00,180
And it's good to have those input elements inside div tags.

66
00:05:00,840 --> 00:05:03,990
So inside this, we have the first input element.

67
00:05:07,220 --> 00:05:10,760
Like that, and we're going to have three of those.

68
00:05:11,120 --> 00:05:14,780
So one, they're two and three.

69
00:05:16,110 --> 00:05:18,420
Let me fix the alignment.

70
00:05:19,380 --> 00:05:22,590
So you see the hierarchy of the elements.

71
00:05:23,280 --> 00:05:28,920
It means this H1 tag is part of that div tag.

72
00:05:29,250 --> 00:05:35,130
This is also part of that div tag form is part of the div tag as well.

73
00:05:35,130 --> 00:05:40,800
And then we have this other div tag, which is part of the form, is nested inside the form.

74
00:05:40,950 --> 00:05:44,070
So all these these attacks are inside that form.

75
00:05:44,550 --> 00:05:50,640
And then after the input boxes, we should have a Pete tag to display the outputs.

76
00:05:50,910 --> 00:05:53,970
So let's create a p-tech p.

77
00:05:55,690 --> 00:06:04,630
Like that, let's leave it empty for now, because we're going to inject the artful dynamically with

78
00:06:04,630 --> 00:06:06,670
Python inside these Beats X.

79
00:06:07,030 --> 00:06:12,250
This is just a static estimate, string or text, but this will be dynamic.

80
00:06:12,820 --> 00:06:16,270
And then lastly, we have the button element.

81
00:06:19,950 --> 00:06:23,100
Which is going to have a label calculate.

82
00:06:23,680 --> 00:06:24,300
And that's it.

83
00:06:24,720 --> 00:06:27,480
So that's the basic email.

84
00:06:27,510 --> 00:06:28,950
We have to improve it further.

85
00:06:29,520 --> 00:06:30,840
But for now, that's enough.

86
00:06:31,320 --> 00:06:41,970
Now let's create the backbone of our web app, which is done via Python, and the flask web framework

87
00:06:42,180 --> 00:06:43,230
comes in handy.

88
00:06:43,410 --> 00:06:45,920
So we have different frameworks to use with Python.

89
00:06:45,960 --> 00:06:47,670
We also have Django and Flask.

90
00:06:48,000 --> 00:06:55,440
Probably the most used ones, Django is best for bigger web applications, which have a big database

91
00:06:55,440 --> 00:07:00,990
and many, many pages, and flask is best for smaller web apps like this one.

92
00:07:01,080 --> 00:07:11,130
So from Flask, we want to import the flask a class and then creates an instance, a web app instance

93
00:07:11,130 --> 00:07:12,870
using that flask.

94
00:07:14,110 --> 00:07:22,060
This class gets as input a string, but it is a good practice to put as inputs a special on the score,

95
00:07:22,060 --> 00:07:24,820
on the school name, on the score underscore variable.

96
00:07:25,030 --> 00:07:32,890
This is a special variable that contains a string and this string is the name of the current module.

97
00:07:33,220 --> 00:07:36,190
This could be needed later on and we will cover that.

98
00:07:36,460 --> 00:07:40,480
But for now, let's just ignore this on the underscore name on the score.

99
00:07:40,630 --> 00:07:44,170
So let's just put it here and carry on with the other code.

100
00:07:44,680 --> 00:07:52,750
Then we have to think of where the user you are so that the user may be visiting.

101
00:07:53,140 --> 00:07:55,870
So the first one we have to think about is.

102
00:07:57,090 --> 00:08:05,450
The homepage, so when they visit the homepage that is represented via this backslash, if they visit

103
00:08:05,450 --> 00:08:11,580
this example dot com slash about that is be slashed about.

104
00:08:12,660 --> 00:08:27,540
And then you write a function such as define home and then in this function, you basically return that

105
00:08:27,540 --> 00:08:30,300
index, that a.m. document.

106
00:08:30,810 --> 00:08:40,200
So that means if the user visits your domain, which could be example dot com slash about, you will

107
00:08:40,200 --> 00:08:46,920
return that a.m. to the user so that they seeds on the web browser.

108
00:08:47,460 --> 00:08:49,020
That's how flask works.

109
00:08:49,680 --> 00:08:56,490
If you remove that, that means if they go to example dot com again, they will see once we return here,

110
00:08:56,490 --> 00:08:58,830
which is, as I said, the index annotation email.

111
00:08:59,040 --> 00:09:06,870
But you don't just do that, but you use a render template function which you have to import.

112
00:09:08,590 --> 00:09:13,960
In here, surrendered templates, import it and use it in here and provide as a string the path.

113
00:09:16,120 --> 00:09:20,590
To the extent of document that you want to serve, let me remove the double return.

114
00:09:21,940 --> 00:09:30,370
So this should be indexed, not HD email and not templates slash index that they because flask is designed

115
00:09:30,670 --> 00:09:36,700
to look inside a templates folder for these female documents.

116
00:09:36,940 --> 00:09:47,290
So it's important that your folder is named exactly templates like this not template, not templates

117
00:09:47,290 --> 00:09:55,540
with a capital T. So it should be this lowercase letters templates, and to make this app work now,

118
00:09:55,690 --> 00:09:57,640
we need one more line.

119
00:09:58,180 --> 00:10:03,310
And that is calling the wrong methods all of this.

120
00:10:04,360 --> 00:10:11,950
Flask instance, Silver Flask Glass creates an instance, and this instance as this method to which

121
00:10:11,950 --> 00:10:14,170
will run the actual application.

122
00:10:14,620 --> 00:10:22,750
Now, if you are on a local computer such as Windows, Mac or Linux, you can just live this like this.

123
00:10:23,020 --> 00:10:32,770
But if you are using your Apple, you need to change the host to a string, which is 0.0.0.0, so you

124
00:10:32,770 --> 00:10:37,600
don't have to add to this if you are on a local computer.

125
00:10:38,110 --> 00:10:43,090
But the Apple is a bit special, so it has to serve the application in this horse.

126
00:10:44,570 --> 00:10:45,680
IP address.

127
00:10:46,250 --> 00:10:47,240
No, I can run this.

128
00:10:49,330 --> 00:10:56,170
And immediately, we can see the Web app, so we can see it's here in this split screen, or you can

129
00:10:56,170 --> 00:10:58,240
just copy that you URL.

130
00:10:58,420 --> 00:11:04,690
So now that is a public URL, you can just paste it in your browser and you can see your web app.

131
00:11:06,290 --> 00:11:08,690
However, nothing will happen at this point.

132
00:11:09,410 --> 00:11:18,770
So if I enter some values like that and press calculates, we're not going to see anything because we

133
00:11:18,770 --> 00:11:19,340
haven't.

134
00:11:20,600 --> 00:11:26,180
Given instructions to the calculate button, what to do when that button is pressed.

135
00:11:29,200 --> 00:11:31,240
So the page does reload.

136
00:11:32,440 --> 00:11:34,210
But we don't see anything.

137
00:11:34,450 --> 00:11:35,980
So let's do something about this.

138
00:11:38,070 --> 00:11:42,570
But first, you need to understand gets requests and posts requests.

139
00:11:42,900 --> 00:11:45,750
So both are HTP requests.

140
00:11:46,200 --> 00:11:56,280
A nature of the request is this If you load a URL, you are making an HTP request to a server and a

141
00:11:56,280 --> 00:12:04,140
gets requests is when you are just getting data from the server, you are not sending any user information.

142
00:12:04,230 --> 00:12:10,020
So if you load this page, if you just want to see the empty boxes, if you just load it as I just did,

143
00:12:10,530 --> 00:12:11,850
that is it gets requests.

144
00:12:12,060 --> 00:12:20,490
But if you enter, some dots are in some boxes or some other widgets, such as checking boxes and so

145
00:12:20,490 --> 00:12:20,640
on.

146
00:12:20,640 --> 00:12:29,340
You are sending data to a server that is a post request, and the post or requests occurs when you press

147
00:12:29,610 --> 00:12:30,450
this button.

148
00:12:30,990 --> 00:12:37,280
So if you press calculates you are sending those data, however, we have not yet implemented a post

149
00:12:37,290 --> 00:12:37,860
request.

150
00:12:38,130 --> 00:12:40,230
All we have is it gets requests.

151
00:12:40,740 --> 00:12:42,000
This one in here.

152
00:12:42,270 --> 00:12:48,330
So what we need to do is we need to copy that and paste it one more time.

153
00:12:48,810 --> 00:12:57,900
And here, as the second argument we say methods equals to a list and the list has one item, it says

154
00:12:57,900 --> 00:12:59,550
this post string.

155
00:13:00,330 --> 00:13:01,990
So no, this you are out.

156
00:13:02,020 --> 00:13:07,290
So the home page can handle both get requests and post requests.

157
00:13:08,500 --> 00:13:16,720
Now, let's do something here, let's print here, just gets a request shrink just to see what three

158
00:13:16,720 --> 00:13:18,100
gets into the command line.

159
00:13:19,810 --> 00:13:20,680
And here.

160
00:13:22,710 --> 00:13:30,120
Gets forced requests, so we want to see when one function is being executed and when is the other.

161
00:13:30,720 --> 00:13:34,470
So with that, I stop with the scripts and I run again the web app.

162
00:13:34,710 --> 00:13:37,230
So when you want to make a change, you want to do that.

163
00:13:38,480 --> 00:13:44,510
Now we get this error here, assertion error, which sees that of a view function is overwriting an

164
00:13:44,540 --> 00:13:46,550
existing and points function home.

165
00:13:46,730 --> 00:13:48,110
So we do have two functions.

166
00:13:48,260 --> 00:13:53,090
We have to rename one to something like home posts, right, and then run again.

167
00:13:54,020 --> 00:13:57,800
And we give the web page and I'll just use it from this window.

168
00:13:57,830 --> 00:13:59,630
You can also use it from here.

169
00:14:00,020 --> 00:14:03,110
It doesn't matter is the same thing, but this is more practical.

170
00:14:03,560 --> 00:14:11,780
So enter some things, some values PRISM calculates, and we still gather gets requests shrinking here.

171
00:14:12,050 --> 00:14:15,890
So this function is executing when we press that button.

172
00:14:16,040 --> 00:14:21,050
You see, and that is because we need to add something else in the index that a simple file.

173
00:14:21,200 --> 00:14:26,930
We also have to make the form able to handle post requests by adding form.

174
00:14:29,470 --> 00:14:36,400
Methods is equal to the string post, so inside the forum tax, you see.

175
00:14:37,820 --> 00:14:40,610
This brackets opens the and it's close in here.

176
00:14:40,850 --> 00:14:41,330
Stop.

177
00:14:41,750 --> 00:14:42,350
Run.

178
00:14:45,220 --> 00:14:51,340
PRISM calculates this time we do get the string get post requests.

179
00:14:52,600 --> 00:14:57,490
So why do we need to distinguish between get requests and posts requests?

180
00:14:57,790 --> 00:15:05,050
Well, we need to do that because when the user just loads the page as it is, we just want to show

181
00:15:05,050 --> 00:15:05,830
these.

182
00:15:06,130 --> 00:15:13,120
And when the user presses that bots and then we want to get this done from the user and calculate them

183
00:15:13,120 --> 00:15:15,820
and then return them to the user.

184
00:15:16,060 --> 00:15:19,780
So we do all of that inside this second function here.

185
00:15:20,020 --> 00:15:22,250
So let's get the data from the user.

186
00:15:22,270 --> 00:15:24,970
These dots on here, how do we do that?

187
00:15:25,300 --> 00:15:27,820
Well, you know, that's an index of QML.

188
00:15:27,820 --> 00:15:32,440
We do have this input elements, which generates these boxes.

189
00:15:32,680 --> 00:15:36,400
Now we need to give names to these input boxes.

190
00:15:36,580 --> 00:15:43,170
So inside this tag, you say, name a sequel to let's call this first.

191
00:15:44,080 --> 00:15:47,910
So first dimension and do the same for the other wants name.

192
00:15:47,920 --> 00:15:51,550
You go to second then and the third.

193
00:15:51,550 --> 00:15:55,450
One name equals two thirds DIMM.

194
00:15:56,680 --> 00:15:58,540
So two input boxes with names.

195
00:15:58,750 --> 00:16:08,020
Now we can refer to these boxes from the Python function to get those input values and then process

196
00:16:08,020 --> 00:16:08,260
them.

197
00:16:08,710 --> 00:16:13,600
But first, we need to import requests from Flask.

198
00:16:14,080 --> 00:16:23,890
So just added there, and then let's create some variables so dim one request form and we get the first

199
00:16:24,940 --> 00:16:34,960
DIMM because, you know, for now is a list and I can command that out and just print requests that

200
00:16:34,960 --> 00:16:35,890
form here.

201
00:16:36,190 --> 00:16:39,640
So stop run just to show you what we get.

202
00:16:39,910 --> 00:16:49,720
So if you enter six, six seven, calculate and we get this immutable most addicts which resembles a

203
00:16:49,720 --> 00:16:50,200
list.

204
00:16:50,590 --> 00:16:57,610
Um, so it has this tipples and it still has the name of the inputs and the value that the user entered.

205
00:16:58,060 --> 00:17:01,900
So now out of that list, we need to extract.

206
00:17:03,190 --> 00:17:04,210
First then.

207
00:17:08,599 --> 00:17:10,010
Second in.

208
00:17:15,010 --> 00:17:17,609
And in three thirds Zim.

209
00:17:19,150 --> 00:17:25,540
So now we have each value of the user enters stored in each of these variables.

210
00:17:26,140 --> 00:17:32,860
Then we can calculate the volume as volume is equal to be aware that these are strings, so we need

211
00:17:32,860 --> 00:17:37,810
to convert each of them to a flow stream one times float.

212
00:17:38,630 --> 00:17:43,110
Then two times float, then three.

213
00:17:44,020 --> 00:17:47,530
Now we could print out the volume in here.

214
00:17:47,920 --> 00:17:48,850
Just print volume.

215
00:17:48,850 --> 00:17:55,900
But that's we would show the volume in the command line for the command line is just seen by US programmers.

216
00:17:56,140 --> 00:18:00,730
So we want to show that outputs to the user, to the web app.

217
00:18:01,720 --> 00:18:06,460
We do that by using ginger variables.

218
00:18:07,240 --> 00:18:18,100
So remember that we said we're going to put the outputs in these P tags, which are underneath these

219
00:18:18,100 --> 00:18:22,780
text boxes between the lost textbooks and the calculate button.

220
00:18:23,110 --> 00:18:31,720
So in there, we could use this special syntax with double curly brackets and inside Syria puts a variable

221
00:18:31,720 --> 00:18:33,190
outputs, for example.

222
00:18:35,030 --> 00:18:40,460
This is just the valuable vets should also reflect a variable in here.

223
00:18:40,880 --> 00:18:49,580
So now in render templates in the home post function, we send a solid foods so that.

224
00:18:51,250 --> 00:18:56,200
Valuable outputs outputs will be replaced with a value of volume.

225
00:18:57,280 --> 00:18:57,610
All right.

226
00:18:57,880 --> 00:19:02,020
So we inject the volume in the output variable stop.

227
00:19:02,770 --> 00:19:03,220
Run.

228
00:19:04,680 --> 00:19:06,780
Three, four, five.

229
00:19:06,930 --> 00:19:11,040
Calculate six is the outfits, so it's working.

230
00:19:11,400 --> 00:19:16,680
However, it is not the user friendly at the moment because the input values disappeared.

231
00:19:17,190 --> 00:19:21,630
To fix that, you also want to send back to that page.

232
00:19:22,260 --> 00:19:23,490
Some other variables.

233
00:19:23,880 --> 00:19:26,070
So let's say them on the score.

234
00:19:26,070 --> 00:19:26,550
One.

235
00:19:27,150 --> 00:19:29,040
A sequel to Team one.

236
00:19:29,850 --> 00:19:32,130
So that one goes in here.

237
00:19:33,400 --> 00:19:43,630
And underscore one should also be a variable in this template through the value property of input tax.

238
00:19:43,930 --> 00:19:48,760
So value equals to, you know, you can also put a constants here.

239
00:19:48,970 --> 00:19:53,530
So the value, let's say, example and stop and run.

240
00:19:54,400 --> 00:19:58,690
So example will now be a default value of this input box.

241
00:19:59,050 --> 00:20:08,470
But if you put not a string there, but a ginger to variable, so this is these are called ginger.

242
00:20:08,470 --> 00:20:16,690
Two variables in the flask template engine ginger two is what makes it possible to do this syntax.

243
00:20:17,560 --> 00:20:21,430
So there we do the same, Jim on the second one.

244
00:20:21,610 --> 00:20:26,830
So don't confuse this variable with that.

245
00:20:27,250 --> 00:20:32,830
That is the argument name that we sent to the EdgeHTML file.

246
00:20:32,830 --> 00:20:34,840
So that should be the argument name.

247
00:20:35,170 --> 00:20:37,810
The value is the one that one.

248
00:20:39,040 --> 00:20:40,020
So known.

249
00:20:41,540 --> 00:20:45,700
If I stop this and I run it again, we get this first, Jim.

250
00:20:47,720 --> 00:20:56,630
Oh, because I forgot to put quotes around this, like that's so single, they're saying, of course,

251
00:20:56,650 --> 00:20:58,710
they're all double quotes if you want.

252
00:20:59,820 --> 00:21:00,630
So run again.

253
00:21:00,990 --> 00:21:01,210
Yeah.

254
00:21:01,230 --> 00:21:10,440
Now we don't see the value, but if I put four five six, calculate now the fall is there because the

255
00:21:10,440 --> 00:21:13,730
function we'll send that's deemed one value.

256
00:21:13,740 --> 00:21:16,560
So we first get it from the user.

257
00:21:16,860 --> 00:21:23,370
When the user first enters that we saw in this variable and we hold it and we send it back to the form.

258
00:21:24,230 --> 00:21:25,160
So there you go.

259
00:21:25,700 --> 00:21:32,570
So let's do the same for the other variables, team on the score two equals two.

260
00:21:33,050 --> 00:21:37,220
And finally, Tim on the Score three, a sequel to Jim three.

261
00:21:38,360 --> 00:21:40,220
Let's do this here as well.

262
00:21:40,970 --> 00:21:43,240
So I'm just copying that pace.

263
00:21:43,280 --> 00:21:48,380
It's in the other inputs, elements and change that from one to and here as well.

264
00:21:48,680 --> 00:21:50,330
Change that from one to three.

265
00:21:51,350 --> 00:21:51,890
Stop.

266
00:21:52,190 --> 00:21:52,880
Run again.

267
00:21:54,050 --> 00:21:56,750
One to four calculate.

268
00:21:57,590 --> 00:22:02,090
And this time we do see the values of the input values and also the outputs.

269
00:22:02,840 --> 00:22:10,850
Lastly, let's improve the layout of our website because currently we don't have what is called as see

270
00:22:10,880 --> 00:22:20,120
as as CIUSSS is another language that you apply to your HTML code to make it look more modern and more

271
00:22:20,120 --> 00:22:21,050
user friendly.

272
00:22:21,290 --> 00:22:28,370
No, we don't have to write any courses because we have libraries, CSIS libraries such as Bootstrap,

273
00:22:28,820 --> 00:22:30,140
which is very easy to use.

274
00:22:30,320 --> 00:22:35,780
So all you have to do is just search on Google for bootstrap.

275
00:22:36,230 --> 00:22:42,200
And the Get Bootstrap dot com website is the official bootstrap website.

276
00:22:42,440 --> 00:22:52,340
So if you go to zone here to just deliver and if you copy that CSIS only I'm just using this copy button.

277
00:22:52,610 --> 00:22:53,270
Copy that.

278
00:22:54,050 --> 00:22:59,810
Go back to your HMO file and just paste it in here.

279
00:23:00,470 --> 00:23:01,000
Stop.

280
00:23:01,550 --> 00:23:02,030
Run.

281
00:23:03,750 --> 00:23:07,560
And we're going to see already that this looks a bit better.

282
00:23:07,890 --> 00:23:17,310
But the way bootstrap works now is that you want to give these estimate elements bootstrap classes,

283
00:23:17,310 --> 00:23:23,310
for example, if you want to make the outer division so the entire page a bit different.

284
00:23:23,460 --> 00:23:29,790
You want to apply the class container so that space a bootstrap class.

285
00:23:30,240 --> 00:23:34,200
If I stop this now and I run it again, you see?

286
00:23:34,200 --> 00:23:36,450
No, that's the page is a bit shift.

287
00:23:36,450 --> 00:23:37,440
It's own the rights.

288
00:23:37,470 --> 00:23:46,080
So there is some margin here between the left border of the browser and where the content starts.

289
00:23:46,620 --> 00:23:52,260
Then if you want to make this bottom to give it a color, for example, you want to go to the bottom

290
00:23:52,440 --> 00:23:53,370
tag again.

291
00:23:53,820 --> 00:24:00,930
So just like we went inside the diff tag, so you see the opening bracket, the closing brackets, we

292
00:24:00,930 --> 00:24:11,330
go again to the first bottom tag here and we see a space class is equal to open and close quotes, Beattie.

293
00:24:11,340 --> 00:24:18,570
And you see that this is a bottom and you see that this button has a warning color, which will make

294
00:24:18,570 --> 00:24:19,920
it yellow.

295
00:24:19,930 --> 00:24:21,450
So stop the run.

296
00:24:22,140 --> 00:24:24,150
And this is how the bottom looks like now.

297
00:24:25,060 --> 00:24:30,930
Lastly, let's put some placeholders to these boxes because they don't have labels.

298
00:24:31,230 --> 00:24:38,910
So what you can do is you go to the input tag and say placeholder is equal to.

299
00:24:41,180 --> 00:24:42,620
First, though, I mention.

300
00:24:43,920 --> 00:24:45,240
Let's do the same for the other one.

301
00:24:59,640 --> 00:24:59,890
Yep.

302
00:25:00,480 --> 00:25:01,410
Stop and run.

303
00:25:03,190 --> 00:25:04,180
Now we see that.

304
00:25:05,460 --> 00:25:14,700
They do have some sort of labels placeholders inside, and the app will still work calculates we get

305
00:25:14,700 --> 00:25:15,350
the article to you.

306
00:25:15,510 --> 00:25:15,900
Yes.

307
00:25:16,110 --> 00:25:18,330
So now your app is this reusable.

308
00:25:18,340 --> 00:25:25,860
You can just get this URL and copied and give it to anyone, and they will use your program in an nice

309
00:25:25,860 --> 00:25:32,520
interface so you don't have to give them command line programs, which they have to install and so on.

310
00:25:32,790 --> 00:25:35,010
So thank you for following this, and I'll talk to you later.