1
00:00:02,090 --> 00:00:04,860
So our online shop is taking shape,

2
00:00:04,860 --> 00:00:08,660
and if we log in now with the admin account.

3
00:00:08,660 --> 00:00:10,030
That's important.

4
00:00:10,030 --> 00:00:12,180
If you log in with that account,

5
00:00:12,180 --> 00:00:16,170
then indeed we can see the manage products,

6
00:00:16,170 --> 00:00:19,390
and manage orders, items here.

7
00:00:19,390 --> 00:00:21,310
Now, what we can't see yet,

8
00:00:21,310 --> 00:00:23,870
is the actual site or the pages

9
00:00:23,870 --> 00:00:26,100
that belong to these navigation items.

10
00:00:26,100 --> 00:00:29,010
And that's exactly what we'll work on now.

11
00:00:29,010 --> 00:00:31,900
And I'll start with the administration area,

12
00:00:31,900 --> 00:00:33,862
where we can manage products,

13
00:00:33,862 --> 00:00:36,210
before then in a next step,

14
00:00:36,210 --> 00:00:39,790
we, of course, also work on the customer facing part

15
00:00:39,790 --> 00:00:42,380
where customers can browse products

16
00:00:42,380 --> 00:00:44,600
and add them to their carts.

17
00:00:44,600 --> 00:00:47,420
But we, first of all, need to be able to create products

18
00:00:47,420 --> 00:00:50,553
before it makes sense to work on the customer pages.

19
00:00:51,840 --> 00:00:55,540
So, therefore, we get this managed products link here.

20
00:00:55,540 --> 00:00:59,490
And if we take a look at our nav items,

21
00:00:59,490 --> 00:01:04,280
we can see that this leads to /admin/products.

22
00:01:04,280 --> 00:01:07,090
Of course, it's up to you to set your own path here,

23
00:01:07,090 --> 00:01:09,163
but whichever path you choose,

24
00:01:09,163 --> 00:01:12,800
you need to register it as a route.

25
00:01:12,800 --> 00:01:15,890
And for that, we could go to products.routes.js

26
00:01:15,890 --> 00:01:17,776
and work on the route there,

27
00:01:17,776 --> 00:01:22,776
but actually I'll create a dedicated file admin.routes.js

28
00:01:23,070 --> 00:01:24,460
where I want to group

29
00:01:24,460 --> 00:01:27,710
all the administration related routes together.

30
00:01:27,710 --> 00:01:32,210
So the routes for the products, for managing the products,

31
00:01:32,210 --> 00:01:36,180
and then also later the routes for managing the orders.

32
00:01:36,180 --> 00:01:40,100
for that, of course, we can copy the base setup

33
00:01:40,100 --> 00:01:43,630
from one of the other routes files and add it in there.

34
00:01:43,630 --> 00:01:47,230
And now just register different routes here,

35
00:01:47,230 --> 00:01:48,450
To be precise here,

36
00:01:48,450 --> 00:01:52,170
I want to have a route for /admin/products.

37
00:01:52,170 --> 00:01:55,190
And then that should be, first of all, a get route

38
00:01:55,190 --> 00:01:57,550
for showing us the page

39
00:01:57,550 --> 00:02:00,060
with all the products that we created

40
00:02:00,060 --> 00:02:03,720
and showing us options to add new products.

41
00:02:03,720 --> 00:02:06,270
But then I also want to have another route

42
00:02:06,270 --> 00:02:10,330
where I, for example, have /products/new

43
00:02:10,330 --> 00:02:13,723
for loading a page where we can add a new product.

44
00:02:14,610 --> 00:02:18,070
And as you can tell all these routes here,

45
00:02:18,070 --> 00:02:20,653
we'll start with /admin.

46
00:02:21,550 --> 00:02:24,990
Now we can repeat /admin over and over again

47
00:02:24,990 --> 00:02:27,460
in the admin.routes.js file,

48
00:02:27,460 --> 00:02:29,028
but it would be even more convenient

49
00:02:29,028 --> 00:02:32,120
if we would load this routes file such that

50
00:02:32,120 --> 00:02:33,450
all the routes in there

51
00:02:33,450 --> 00:02:37,730
are automatically prefixed with /admin.

52
00:02:37,730 --> 00:02:39,980
So that in this file, we just have /products

53
00:02:39,980 --> 00:02:44,020
or /products/new and so on.

54
00:02:44,020 --> 00:02:47,690
And the /admin is added in another place.

55
00:02:47,690 --> 00:02:50,440
And that's very easy and also common to do

56
00:02:50,440 --> 00:02:54,890
in Express.js or with Express.js in App.js,

57
00:02:54,890 --> 00:02:59,890
where we set up our basic request flow and our main app,

58
00:03:00,030 --> 00:03:03,720
we can now include these admin routes here

59
00:03:03,720 --> 00:03:08,200
by requiring ./routes/admin.

60
00:03:08,200 --> 00:03:13,023
Whoops, not auth, admin.routes like this.

61
00:03:13,880 --> 00:03:17,730
And then in the place where we register those routes,

62
00:03:17,730 --> 00:03:19,720
let's say here,

63
00:03:19,720 --> 00:03:23,720
we register the admin routes, but not just like this,

64
00:03:23,720 --> 00:03:27,170
but instead by using a different version of app.use.

65
00:03:27,170 --> 00:03:30,577
A version which I also showed you earlier in the course.

66
00:03:30,577 --> 00:03:33,787
You can just start using middlewares like this,

67
00:03:33,787 --> 00:03:37,550
but you can also add an optional first parameter,

68
00:03:37,550 --> 00:03:41,510
which then actually is a path that will act as a filter.

69
00:03:41,510 --> 00:03:43,813
In this case, for example, /admin.

70
00:03:45,080 --> 00:03:50,060
What this will do is that only paths that start with /admin

71
00:03:50,060 --> 00:03:54,220
will make it into the adminRoutes route configuration.

72
00:03:54,220 --> 00:03:59,000
So any request with a path that does not start with /admin,

73
00:03:59,000 --> 00:04:00,413
won't make it in there.

74
00:04:01,470 --> 00:04:04,500
And this starting path is then removed

75
00:04:04,500 --> 00:04:06,310
from the path of the request,

76
00:04:06,310 --> 00:04:08,320
so that inside of this file,

77
00:04:08,320 --> 00:04:10,480
we can look at the rest of that path,

78
00:04:10,480 --> 00:04:12,640
which is what I'm doing here.

79
00:04:12,640 --> 00:04:17,160
So this will handle requests at /admin/products,

80
00:04:17,160 --> 00:04:19,839
even though I just have /products here,

81
00:04:19,839 --> 00:04:24,062
because I have to /admin in the App.js file.

82
00:04:24,062 --> 00:04:26,704
We could have done something similar for products,

83
00:04:26,704 --> 00:04:31,673
and for example, only handled /products/something here.

84
00:04:33,630 --> 00:04:36,600
That is something we could consider doing for the future.

85
00:04:36,600 --> 00:04:39,180
For the moment, I will leave it as it is,

86
00:04:39,180 --> 00:04:42,103
and just filter my admin routes like this.

87
00:04:43,130 --> 00:04:45,260
Now back in the admin.routes.js file,

88
00:04:45,260 --> 00:04:47,390
I now do have these two routes,

89
00:04:47,390 --> 00:04:48,223
but, of course,

90
00:04:48,223 --> 00:04:50,610
I have no controller actions for these routes,

91
00:04:50,610 --> 00:04:53,883
and that's there for the next part, the next important part.

92
00:04:54,920 --> 00:04:56,707
In the controllers folder,

93
00:04:56,707 --> 00:05:00,439
I'll add a new admin.controller.js file,

94
00:05:00,439 --> 00:05:03,270
and in here, I want to define all the functions

95
00:05:03,270 --> 00:05:08,270
that we'll use for managing administration related pages,

96
00:05:08,590 --> 00:05:13,063
for showing pages or for handling posts or other requests.

97
00:05:14,660 --> 00:05:16,480
For example, we need a function

98
00:05:16,480 --> 00:05:21,480
for showing us the products page, the admin products page.

99
00:05:21,510 --> 00:05:24,940
And hence, I'll name this function getProducts.

100
00:05:24,940 --> 00:05:27,820
I will also already add a function

101
00:05:27,820 --> 00:05:31,700
where I choose a name of getNewProduct,

102
00:05:31,700 --> 00:05:34,160
because this will be the action that's responsible

103
00:05:34,160 --> 00:05:36,993
for showing us to page for adding a new product,

104
00:05:38,470 --> 00:05:40,790
and we will then later also have functions

105
00:05:40,790 --> 00:05:43,110
for submitting a new product.

106
00:05:43,110 --> 00:05:48,110
So here we could add createNewProduct function for example.

107
00:05:49,850 --> 00:05:51,633
The function name is up to you.

108
00:05:52,590 --> 00:05:54,110
We will add more functions

109
00:05:54,110 --> 00:05:56,810
because we'll have more administration actions

110
00:05:56,810 --> 00:05:59,080
that I to handle in this controller,

111
00:05:59,080 --> 00:06:01,700
but this is a good start, and of course, as always,

112
00:06:01,700 --> 00:06:04,490
you want to export them with this syntax

113
00:06:04,490 --> 00:06:07,973
to make them available outside of this file as well.

114
00:06:08,850 --> 00:06:11,360
And here I'll use the function names as keys

115
00:06:11,360 --> 00:06:14,323
and then point at the respective functions.

116
00:06:15,160 --> 00:06:17,720
So here, I'll make them available

117
00:06:17,720 --> 00:06:20,503
outside of this file like this.

118
00:06:22,250 --> 00:06:24,800
And back in the admin.routes.js file,

119
00:06:24,800 --> 00:06:27,880
this of course means that here we can import

120
00:06:27,880 --> 00:06:31,600
the adminController by requiring,

121
00:06:31,600 --> 00:06:36,600
going up one level, controllers/admin.controller like this.

122
00:06:38,280 --> 00:06:40,390
And here for this first get route,

123
00:06:40,390 --> 00:06:41,700
where I want to load a page

124
00:06:41,700 --> 00:06:44,100
with all the products that we can manage,

125
00:06:44,100 --> 00:06:48,250
I point at adminController.getProducts.

126
00:06:48,250 --> 00:06:49,430
For the second route,

127
00:06:49,430 --> 00:06:52,610
where I want to load a page for adding a new product,

128
00:06:52,610 --> 00:06:57,610
I will load getNewProduct, and that is that.

129
00:06:58,080 --> 00:07:00,080
Now we can add a fitting template,

130
00:07:00,080 --> 00:07:02,840
and then add the logic for rendering the template

131
00:07:02,840 --> 00:07:04,963
in the adminController file.

132
00:07:06,240 --> 00:07:09,030
So therefore in views under admin,

133
00:07:09,030 --> 00:07:12,380
I'll add a products sub folder.

134
00:07:12,380 --> 00:07:15,350
I also have a products sub folder under customer,

135
00:07:15,350 --> 00:07:17,030
but here I'm talking about the views

136
00:07:17,030 --> 00:07:18,650
that are exclusive to the admin.

137
00:07:18,650 --> 00:07:21,810
That's why I have this specific product sub folder

138
00:07:21,810 --> 00:07:23,980
in the admin sub folder.

139
00:07:23,980 --> 00:07:28,980
And here I'll add all-products.ejs file.

140
00:07:29,510 --> 00:07:33,210
That is the same name as here in the customer facing part,

141
00:07:33,210 --> 00:07:35,250
but we will show different products,

142
00:07:35,250 --> 00:07:37,683
and different options for the products.

143
00:07:39,010 --> 00:07:43,480
And in that same products folder, I will also add

144
00:07:44,500 --> 00:07:48,010
new-product.ejs file,

145
00:07:48,010 --> 00:07:50,380
which will be the viewed that holds the form

146
00:07:50,380 --> 00:07:51,903
for adding a new product.

147
00:07:53,830 --> 00:07:56,460
Now, I will start with all products,

148
00:07:56,460 --> 00:07:59,420
and for this I'll copy the code

149
00:07:59,420 --> 00:08:01,470
from the all-products.ejs file

150
00:08:01,470 --> 00:08:03,960
in the customer products folder,

151
00:08:03,960 --> 00:08:06,530
and add that into my admin products folder,

152
00:08:06,530 --> 00:08:09,050
all-products.ejs file.

153
00:08:09,050 --> 00:08:11,760
And I still want to include the shared head and so on,

154
00:08:11,760 --> 00:08:13,833
that is all fine, I will keep that.

155
00:08:13,833 --> 00:08:15,780
I will keep the header.

156
00:08:15,780 --> 00:08:18,193
I'll keep that dummy content for now.

157
00:08:19,160 --> 00:08:23,510
I'll just add admin in parentheses after all products,

158
00:08:23,510 --> 00:08:26,090
so that we can see that we are on this page,

159
00:08:26,090 --> 00:08:28,743
the admin specific all products page.

160
00:08:30,350 --> 00:08:33,640
And now to render this for the given route,

161
00:08:33,640 --> 00:08:36,610
I'll go to admin controller,

162
00:08:36,610 --> 00:08:39,230
and they are in get products.

163
00:08:39,230 --> 00:08:43,140
Of course, as always, I get my request and my response,

164
00:08:43,140 --> 00:08:46,200
and the next function, if I would need it.

165
00:08:46,200 --> 00:08:48,680
And on the response we can call render,

166
00:08:48,680 --> 00:08:53,680
and then render admin/products/all-products.

167
00:08:53,810 --> 00:08:56,463
That's the path to view we just added.

168
00:08:57,380 --> 00:08:59,900
And in the future we'll, of course, also get products

169
00:08:59,900 --> 00:09:02,550
from the database and pass them to the template,

170
00:09:02,550 --> 00:09:04,800
for the moment we don't have that yet though.

171
00:09:05,850 --> 00:09:07,640
But with that, if I now reload,

172
00:09:07,640 --> 00:09:09,490
and I click on manage products,

173
00:09:09,490 --> 00:09:12,490
you see I'm switching to this admin page,

174
00:09:12,490 --> 00:09:14,770
and that's the first step.

175
00:09:14,770 --> 00:09:17,070
Now on this admin page,

176
00:09:17,070 --> 00:09:19,710
I also want to provide a link

177
00:09:19,710 --> 00:09:23,070
that takes us to the new product page,

178
00:09:23,070 --> 00:09:25,610
so that we can add a new product.

179
00:09:25,610 --> 00:09:28,000
And for this, in this main area here,

180
00:09:28,000 --> 00:09:32,063
I'll actually add a section and add another section,

181
00:09:33,530 --> 00:09:35,860
and take this h1 tag,

182
00:09:35,860 --> 00:09:40,240
and actually move that above those sections,

183
00:09:40,240 --> 00:09:45,240
but move this paragraph into the second section, like this.

184
00:09:45,830 --> 00:09:48,956
And then in the first section here there,

185
00:09:48,956 --> 00:09:53,083
I will add another title where I say product management,

186
00:09:54,550 --> 00:09:57,350
and actually the title of the h1 element here

187
00:09:57,350 --> 00:10:00,883
can become Product Administration.

188
00:10:02,110 --> 00:10:04,220
And then here in this section, as I just said,

189
00:10:04,220 --> 00:10:06,470
I have Product Management,

190
00:10:06,470 --> 00:10:11,470
or maybe actually Manage Products as a title.

191
00:10:11,790 --> 00:10:14,450
And then below that, that's the important part,

192
00:10:14,450 --> 00:10:18,280
I'll have a paragraph where I add an anchor tag,

193
00:10:18,280 --> 00:10:23,280
an anchor element that leads to /admin/products/new.

194
00:10:24,720 --> 00:10:27,920
So to this page where we will have a form

195
00:10:27,920 --> 00:10:29,363
for adding a new product.

196
00:10:30,250 --> 00:10:34,723
And hence, I'll say Add Product as a caption on that link,

197
00:10:35,910 --> 00:10:37,760
and I'll give it a class of btn

198
00:10:37,760 --> 00:10:39,443
to give it that button look.

199
00:10:40,620 --> 00:10:42,390
With those changes made,

200
00:10:42,390 --> 00:10:44,620
if we save everything and reload,

201
00:10:44,620 --> 00:10:47,480
now we've got this Add Product button.

202
00:10:47,480 --> 00:10:50,080
And if we click that, because it's actually a link,

203
00:10:50,080 --> 00:10:53,500
we'll be taken to the page for adding a new product.

204
00:10:53,500 --> 00:10:55,630
At the moment, though, that will fail

205
00:10:55,630 --> 00:11:00,540
because whilst I have connected the route in admin routes,

206
00:11:00,540 --> 00:11:02,978
I connected it to getNewProduct,

207
00:11:02,978 --> 00:11:07,660
this getNewProduct function in my admin controller

208
00:11:07,660 --> 00:11:08,950
doesn't do anything yet

209
00:11:10,020 --> 00:11:11,400
There, we want to make sure

210
00:11:11,400 --> 00:11:13,700
that we also get the request and response,

211
00:11:13,700 --> 00:11:15,760
and we also render a template here.

212
00:11:15,760 --> 00:11:19,190
In this case, the template for adding a new product.

213
00:11:19,190 --> 00:11:20,960
And the path to that template file was

214
00:11:20,960 --> 00:11:25,960
/admin/products/new-product

215
00:11:26,480 --> 00:11:28,333
That was the name of the template.

216
00:11:29,990 --> 00:11:32,350
However, that is an empty template right now.

217
00:11:32,350 --> 00:11:35,230
It's this new-product.ejs file, which is empty.

218
00:11:35,230 --> 00:11:38,740
And therefore for now, I'll just copy all-products.ejs,

219
00:11:38,740 --> 00:11:42,350
and add that here into new-product.ejs,

220
00:11:42,350 --> 00:11:47,350
And in there, I now want to get rid of those sections,

221
00:11:47,870 --> 00:11:51,880
and say Add new Product as a title.

222
00:11:51,880 --> 00:11:54,380
And now in here, we want to add the form

223
00:11:54,380 --> 00:11:56,390
for adding a new product.

224
00:11:56,390 --> 00:11:58,550
Now for this new product form,

225
00:11:58,550 --> 00:12:01,760
we start of course, by adding the form element,

226
00:12:01,760 --> 00:12:05,170
and there we'll have a certain action and a method,

227
00:12:05,170 --> 00:12:07,020
we'll set the those later.

228
00:12:07,020 --> 00:12:08,040
And in that form,

229
00:12:08,040 --> 00:12:11,360
we, of course, have all the different form controls,

230
00:12:11,360 --> 00:12:14,870
Now I'll wrap every control into a paragraph here,

231
00:12:14,870 --> 00:12:18,160
and every form input then has a label

232
00:12:18,160 --> 00:12:20,140
with a human readable text.

233
00:12:20,140 --> 00:12:22,380
And that label is connected to the actual input

234
00:12:22,380 --> 00:12:24,790
with the for attribute, as you learned before,

235
00:12:24,790 --> 00:12:27,290
in this course and in this project,

236
00:12:27,290 --> 00:12:29,320
and here, we could say that every product

237
00:12:29,320 --> 00:12:30,333
should have a title.

238
00:12:31,300 --> 00:12:34,030
Now that title should be entered with an input element,

239
00:12:34,030 --> 00:12:36,500
and it is a regular text input.

240
00:12:36,500 --> 00:12:40,575
Now I'll point at a element with ID title here,

241
00:12:40,575 --> 00:12:43,810
hence we have to add this ID to input,

242
00:12:43,810 --> 00:12:46,390
so that the label is connected to the input

243
00:12:46,390 --> 00:12:50,313
for accessibility reasons through that for attribute.

244
00:12:51,290 --> 00:12:52,748
And we add a name attribute

245
00:12:52,748 --> 00:12:55,850
so that we have a key that we can use on the server side

246
00:12:55,850 --> 00:12:58,030
for extracting the entered data.

247
00:12:58,030 --> 00:13:01,143
And I'll choose title as identifier here as well.

248
00:13:02,540 --> 00:13:05,119
Now I will also add required here to make sure

249
00:13:05,119 --> 00:13:09,160
that we have this front-end validation,

250
00:13:09,160 --> 00:13:11,760
and the that is actually it for now.

251
00:13:11,760 --> 00:13:15,360
Then thereafter, we can add another form control

252
00:13:15,360 --> 00:13:19,340
in another paragraph, where I actually want to choose

253
00:13:19,340 --> 00:13:22,520
an image for the product.

254
00:13:22,520 --> 00:13:25,640
And that, of course, should be pickable by the user,

255
00:13:25,640 --> 00:13:27,550
by the administrator.

256
00:13:27,550 --> 00:13:29,450
Hence here again, I'll add an input,

257
00:13:29,450 --> 00:13:32,010
but now it's of type file.

258
00:13:32,010 --> 00:13:34,923
Which is one of the built in supported input types.

259
00:13:36,090 --> 00:13:38,030
Still, We want to connect it to the label,

260
00:13:38,030 --> 00:13:40,490
so here I'll choose image as an identifier,

261
00:13:40,490 --> 00:13:45,440
and hence add that as an ID here, also use that as a name,

262
00:13:45,440 --> 00:13:48,720
which we can then use on the server side for extracting it.

263
00:13:48,720 --> 00:13:51,570
And I'll add the accept attribute to control

264
00:13:51,570 --> 00:13:53,960
which types of data are accepted.

265
00:13:53,960 --> 00:13:57,040
And here I explained that you can, for example,

266
00:13:57,040 --> 00:13:59,807
specify the file extensions you want to accept

267
00:13:59,807 --> 00:14:02,450
as a comma separated list like this,

268
00:14:02,450 --> 00:14:07,160
or more general image/png,

269
00:14:07,160 --> 00:14:09,900
and image/jpg

270
00:14:09,900 --> 00:14:14,510
to support all valid PNG and JPG images.

271
00:14:14,510 --> 00:14:17,760
Now we'll work on making the file upload work later,

272
00:14:17,760 --> 00:14:19,630
we'll also add an image preview.

273
00:14:19,630 --> 00:14:21,423
For the moment, that is it.

274
00:14:22,400 --> 00:14:25,060
Now I will add another paragraph here,

275
00:14:25,060 --> 00:14:29,720
which now should allow the user to enter a summary text,

276
00:14:29,720 --> 00:14:32,380
which is simply a short summary that shows up

277
00:14:32,380 --> 00:14:34,410
on the all products page.

278
00:14:34,410 --> 00:14:36,850
And that can be a regular text input,

279
00:14:36,850 --> 00:14:38,810
nothing too fancy here.

280
00:14:38,810 --> 00:14:42,230
We just also might want to enforce a maximum length

281
00:14:42,230 --> 00:14:44,654
of let's say 250 characters,

282
00:14:44,654 --> 00:14:46,853
but ultimately that is up to you.

283
00:14:47,920 --> 00:14:52,920
Now we also need a price input to set the product price.

284
00:14:55,120 --> 00:14:58,630
And hence I choose price here and here.

285
00:14:58,630 --> 00:15:03,630
And as a name and the type here then is actually number

286
00:15:03,980 --> 00:15:06,313
because the price that we enter is a number.

287
00:15:07,410 --> 00:15:08,980
We don't have a max length here,

288
00:15:08,980 --> 00:15:12,020
but now I want to have a min value.

289
00:15:12,020 --> 00:15:15,530
Min now doesn't control the minimum amount of characters,

290
00:15:15,530 --> 00:15:18,400
but the minimum value that has to be entered.

291
00:15:18,400 --> 00:15:21,140
And that should be at least $0.01 let's say,

292
00:15:21,140 --> 00:15:23,431
if we use dollar as a currency,

293
00:15:23,431 --> 00:15:26,840
and I will also add the step attribute,

294
00:15:26,840 --> 00:15:30,070
which we can add on any input that's of type number,

295
00:15:30,070 --> 00:15:30,970
which controls,

296
00:15:30,970 --> 00:15:35,080
which step will be used for incrementing or decrementing

297
00:15:35,080 --> 00:15:39,110
the value when using the arrow buttons that will be added

298
00:15:39,110 --> 00:15:40,980
automatically by the browser

299
00:15:40,980 --> 00:15:43,000
whenever you choose type number.

300
00:15:43,000 --> 00:15:44,820
You'll see them in a second.

301
00:15:44,820 --> 00:15:48,453
And I'll set this to $0.01 as the smallest unit as well.

302
00:15:50,200 --> 00:15:53,940
Now there's another of paragraph, another form control,

303
00:15:53,940 --> 00:15:55,050
which I want to add.

304
00:15:55,050 --> 00:15:57,290
And that's for the actual description,

305
00:15:57,290 --> 00:16:00,460
which is a longer text describing the product.

306
00:16:00,460 --> 00:16:03,453
This will be shown on the product detail page later.

307
00:16:04,481 --> 00:16:06,730
Hence, I'll choose description here,

308
00:16:06,730 --> 00:16:09,410
and also as an ID and as a name,

309
00:16:09,410 --> 00:16:14,170
but I don't want a input here of type anything,

310
00:16:14,170 --> 00:16:16,251
but actually a text area,

311
00:16:16,251 --> 00:16:19,568
which is another default HTML form element.

312
00:16:19,568 --> 00:16:23,317
We don't have a min or a step attribute,

313
00:16:23,317 --> 00:16:26,240
but we do have the required attribute,

314
00:16:26,240 --> 00:16:29,310
and text area is not a wide element,

315
00:16:29,310 --> 00:16:31,440
but has an opening and closing tag.

316
00:16:31,440 --> 00:16:33,433
So you need to write it like this.

317
00:16:34,520 --> 00:16:37,290
Now on text area, you can add the rows attribute

318
00:16:37,290 --> 00:16:40,960
to control how many rows are shown by default.

319
00:16:40,960 --> 00:16:42,990
So how big this input will be.

320
00:16:42,990 --> 00:16:44,803
And I'll set this to seven here,

321
00:16:45,640 --> 00:16:47,790
and with that, last but not least,

322
00:16:47,790 --> 00:16:50,410
I'll add a last paragraph at the bottom

323
00:16:50,410 --> 00:16:53,810
where I just want to add two buttons.

324
00:16:53,810 --> 00:16:56,080
The first button will be of type reset,

325
00:16:56,080 --> 00:16:58,270
and it will say reset.

326
00:16:58,270 --> 00:17:00,910
This allows the user to reset all the inputs

327
00:17:00,910 --> 00:17:03,220
to their starting values.

328
00:17:03,220 --> 00:17:06,260
And the second button is of type submit,

329
00:17:06,260 --> 00:17:08,400
or you don't choose any type at all

330
00:17:08,400 --> 00:17:10,560
since submit is the default,

331
00:17:10,560 --> 00:17:14,183
which will then actually save that product you entered.

332
00:17:15,390 --> 00:17:18,710
Now it is second button gets a class of btn.

333
00:17:18,710 --> 00:17:23,609
The first button will get a class of btn and then btn-alt,

334
00:17:23,609 --> 00:17:24,930
which we have yet to add,

335
00:17:24,930 --> 00:17:27,453
which is a slightly alternative button look.

336
00:17:28,870 --> 00:17:30,100
With all that added though,

337
00:17:30,100 --> 00:17:33,660
if you saved this and you reload that product new page,

338
00:17:33,660 --> 00:17:35,410
it should look something like this.

339
00:17:36,790 --> 00:17:39,430
Now of course, all the form styles are missing

340
00:17:39,430 --> 00:17:41,080
the form styles we already had

341
00:17:41,080 --> 00:17:43,050
on the log in and sign up pages.

342
00:17:43,050 --> 00:17:44,230
And the reason for that

343
00:17:44,230 --> 00:17:48,062
is that we defined all those styles into forms.css file,

344
00:17:48,062 --> 00:17:48,895
but, of course,

345
00:17:48,895 --> 00:17:52,290
we're not including that in the new-product.ejs file.

346
00:17:52,290 --> 00:17:55,060
That, of course, is something we can change though.

347
00:17:55,060 --> 00:17:58,140
Right after including the head area,

348
00:17:58,140 --> 00:17:58,973
and actually here,

349
00:17:58,973 --> 00:18:03,048
we could change this to add new product as a title,

350
00:18:03,048 --> 00:18:05,262
but right after including this,

351
00:18:05,262 --> 00:18:10,262
we can now add a link here and link to styles/forms.css.

352
00:18:12,300 --> 00:18:15,810
Now we can reuse all the form styles we defined before

353
00:18:15,810 --> 00:18:17,440
for this form.

354
00:18:17,440 --> 00:18:20,740
And of course you can tweak this and ensure that it looks

355
00:18:20,740 --> 00:18:22,163
the way you want it to look,

356
00:18:22,163 --> 00:18:26,060
but I am quite happy with that look I set up before,

357
00:18:26,060 --> 00:18:28,810
and therefore, I'll stick to it like that.

358
00:18:28,810 --> 00:18:31,810
The only thing I want to change is the reset button look,

359
00:18:31,810 --> 00:18:32,643
There, indeed,

360
00:18:32,643 --> 00:18:36,120
I wanted to find such a button alt class look.

361
00:18:36,120 --> 00:18:37,060
Now, to do that,

362
00:18:37,060 --> 00:18:40,630
We can quickly go back into the base.css file,

363
00:18:40,630 --> 00:18:44,050
where I also defined the main button styles,

364
00:18:44,050 --> 00:18:46,060
and after defining those button styles,

365
00:18:46,060 --> 00:18:48,890
I'll add button-alt as a rule

366
00:18:48,890 --> 00:18:51,050
or as a selector for this rule.

367
00:18:51,050 --> 00:18:51,883
And here,

368
00:18:51,883 --> 00:18:54,016
I just want to set the background color to transparent,

369
00:18:54,016 --> 00:18:59,016
but change the text color to var --color-primary-500,

370
00:19:00,100 --> 00:19:03,340
which otherwise would have been the background color.

371
00:19:03,340 --> 00:19:06,100
And then the hover style should change as well

372
00:19:06,100 --> 00:19:10,070
for btn-alt:hover and btn-alt:active

373
00:19:10,070 --> 00:19:14,100
There, we now also want to ensure that this looks good,

374
00:19:14,100 --> 00:19:16,000
so therefore, here I'll then give it

375
00:19:16,000 --> 00:19:17,780
a little bit of background color,

376
00:19:17,780 --> 00:19:22,640
and I'll choose --color-primary-500-bg

377
00:19:22,640 --> 00:19:26,193
which is a special CSS variable we defined before.

378
00:19:28,420 --> 00:19:31,563
If you save that and reload, this is the reset button look.

379
00:19:32,730 --> 00:19:35,810
But that's now the finished form for adding a new product,

380
00:19:35,810 --> 00:19:36,670
of course,

381
00:19:36,670 --> 00:19:40,150
it's lacking all the logic for adding a product though.

382
00:19:40,150 --> 00:19:42,713
At the moment, submitting the form, won't be handled,

383
00:19:42,713 --> 00:19:44,513
the file upload won't work,

384
00:19:44,513 --> 00:19:47,290
and we have no file upload preview.

385
00:19:47,290 --> 00:19:49,790
These are all the features we have to work on now.