1
00:00:02,100 --> 00:00:05,580
So let's make a plan for our project here.

2
00:00:05,580 --> 00:00:07,200
You saw what we built.

3
00:00:07,200 --> 00:00:10,920
We built this online shop, this demo online shop,

4
00:00:10,920 --> 00:00:13,800
which combines many features you'll learn about

5
00:00:13,800 --> 00:00:15,490
throughout this course.

6
00:00:15,490 --> 00:00:19,870
And to get there, what we'll need is a frontend with HTML,

7
00:00:19,870 --> 00:00:22,880
CSS and browser side JavaScript.

8
00:00:22,880 --> 00:00:24,320
And of course, a backend.

9
00:00:24,320 --> 00:00:27,550
We're going to write the code for both ends,

10
00:00:27,550 --> 00:00:31,360
but it's also not just about frontend versus backend,

11
00:00:31,360 --> 00:00:35,630
but instead, we also have too many websites combined

12
00:00:35,630 --> 00:00:38,580
in one and the same website you could say,

13
00:00:38,580 --> 00:00:42,090
because we have the customer-facing sites or pages

14
00:00:42,090 --> 00:00:44,770
and we have the administration pages,

15
00:00:44,770 --> 00:00:48,380
and they're all part of the same overarching website.

16
00:00:48,380 --> 00:00:49,230
But of course,

17
00:00:49,230 --> 00:00:53,110
these are very different areas of this website.

18
00:00:53,110 --> 00:00:55,970
They're only accessible to certain users.

19
00:00:55,970 --> 00:00:59,400
Only administrators can visit the admin pages,

20
00:00:59,400 --> 00:01:02,500
and they contain totally different features.

21
00:01:02,500 --> 00:01:05,150
It's a difference if you are able to view products

22
00:01:05,150 --> 00:01:07,400
and add them to a shopping cart,

23
00:01:07,400 --> 00:01:11,100
or if you're able to add it or delete products,

24
00:01:11,100 --> 00:01:12,730
and we're going to build all of that,

25
00:01:12,730 --> 00:01:15,403
so there is tons of content in this section.

26
00:01:16,240 --> 00:01:19,110
Now therefore, to plan this project,

27
00:01:19,110 --> 00:01:22,950
let's maybe start by thinking about the different pages,

28
00:01:22,950 --> 00:01:24,960
the views which we need.

29
00:01:24,960 --> 00:01:28,240
I'm calling it views because in this course section,

30
00:01:28,240 --> 00:01:30,440
we're going to use the MVC,

31
00:01:30,440 --> 00:01:32,810
the Model View Controller pattern,

32
00:01:32,810 --> 00:01:36,170
which you learned about in the previous course section.

33
00:01:36,170 --> 00:01:38,160
And when it comes to the views,

34
00:01:38,160 --> 00:01:40,870
the pages of this course project,

35
00:01:40,870 --> 00:01:42,750
then, of course, we can differentiate

36
00:01:42,750 --> 00:01:46,320
between the pages that are accessible to our customers

37
00:01:46,320 --> 00:01:50,300
and the pages that are accessible to our administrators.

38
00:01:50,300 --> 00:01:53,800
For both customers and administrators,

39
00:01:53,800 --> 00:01:56,770
we'll have signup and login pages.

40
00:01:56,770 --> 00:01:59,800
Those pages have to be accessible to both

41
00:01:59,800 --> 00:02:03,043
because both customers and administrators

42
00:02:03,043 --> 00:02:05,570
will need to log in.

43
00:02:05,570 --> 00:02:08,889
Actually, customers don't need to log in.

44
00:02:08,889 --> 00:02:10,900
They can browse products

45
00:02:10,900 --> 00:02:13,000
and even add them to a shopping cart

46
00:02:13,000 --> 00:02:14,850
without being logged in,

47
00:02:14,850 --> 00:02:19,350
but administrators do need to log in to do anything

48
00:02:19,350 --> 00:02:24,290
and customers do need to log in to finally make a purchase.

49
00:02:24,290 --> 00:02:28,283
So we need these pages for both kinds of users.

50
00:02:29,420 --> 00:02:31,030
But then we also have pages

51
00:02:31,030 --> 00:02:34,730
that are exclusive to certain users.

52
00:02:34,730 --> 00:02:37,490
For example, customers should be able to view

53
00:02:37,490 --> 00:02:42,140
all the products and the details for a given product.

54
00:02:42,140 --> 00:02:46,120
They should be able to add products to a shopping cart,

55
00:02:46,120 --> 00:02:49,070
and then also view that shopping cart

56
00:02:49,070 --> 00:02:53,520
where they can also edit the items in the shopping cart,

57
00:02:53,520 --> 00:02:58,230
increase or decrease the number of items of a given product,

58
00:02:58,230 --> 00:02:59,880
and customers have to be able

59
00:02:59,880 --> 00:03:02,083
to view the orders they placed.

60
00:03:02,950 --> 00:03:06,100
We also need a couple of other smaller views

61
00:03:06,100 --> 00:03:10,580
like error pages or success or failure pages

62
00:03:10,580 --> 00:03:12,210
after placing an order,

63
00:03:12,210 --> 00:03:15,020
but I don't list those separately here

64
00:03:15,020 --> 00:03:17,750
since they are rather trivial.

65
00:03:17,750 --> 00:03:19,710
Nonetheless, we're going to add them

66
00:03:19,710 --> 00:03:21,713
throughout this course section.

67
00:03:22,790 --> 00:03:27,560
Now, for the administrator, there we have the dashboard,

68
00:03:27,560 --> 00:03:30,470
the first page that's shown to an administrator

69
00:03:30,470 --> 00:03:34,210
once you visit the administration area.

70
00:03:34,210 --> 00:03:36,320
We then have the products page

71
00:03:36,320 --> 00:03:38,390
where you can view all the products

72
00:03:38,390 --> 00:03:40,790
that are currently offered in the shop.

73
00:03:40,790 --> 00:03:43,750
And we then got pages for adding new products

74
00:03:43,750 --> 00:03:46,930
or for updating existing products.

75
00:03:46,930 --> 00:03:50,550
Last but not least, we also have an orders page

76
00:03:50,550 --> 00:03:55,530
where you can view all the orders of all the users.

77
00:03:55,530 --> 00:03:59,610
And there, you will also be able to update those orders.

78
00:03:59,610 --> 00:04:01,050
Now, these are the pages

79
00:04:01,050 --> 00:04:05,020
that are exclusively accessible by administrators.

80
00:04:05,020 --> 00:04:08,090
And again, we're going to build all those pages together

81
00:04:08,090 --> 00:04:11,200
step-by-step in this course section.

82
00:04:11,200 --> 00:04:14,150
And these therefore are the main pages overall,

83
00:04:14,150 --> 00:04:17,930
the main views which we'll create in this course section

84
00:04:17,930 --> 00:04:20,273
and the main views we're going to work on.

85
00:04:21,620 --> 00:04:24,750
Now, views, pages, aren't everything.

86
00:04:24,750 --> 00:04:27,660
We're going to use the MVC pattern and therefore,

87
00:04:27,660 --> 00:04:30,770
we should also think about the models we need.

88
00:04:30,770 --> 00:04:34,020
And even if we would not use the MVC pattern,

89
00:04:34,020 --> 00:04:36,920
we still would be working with some data

90
00:04:36,920 --> 00:04:39,240
that needs to be stored in a database.

91
00:04:39,240 --> 00:04:42,690
And we wanna plan those data entities,

92
00:04:42,690 --> 00:04:46,773
these kinds of data we're going to work with ahead of time.

93
00:04:47,650 --> 00:04:51,320
So which kind of data are we going to store there?

94
00:04:51,320 --> 00:04:53,690
Well, we definitely need users,

95
00:04:53,690 --> 00:04:58,130
both customers and administrators in the end are users,

96
00:04:58,130 --> 00:05:00,400
the only difference is a little flag,

97
00:05:00,400 --> 00:05:02,390
a little extra property

98
00:05:02,390 --> 00:05:06,620
that makes users either administrators or not.

99
00:05:06,620 --> 00:05:08,830
And therefore, for a given user

100
00:05:08,830 --> 00:05:11,930
for this demo shop which we're building,

101
00:05:11,930 --> 00:05:15,310
we wanna store the email of a user, a password,

102
00:05:15,310 --> 00:05:17,570
then this isAdmin flag,

103
00:05:17,570 --> 00:05:21,340
which controls whether a user is a regular customer

104
00:05:21,340 --> 00:05:23,390
or an administrator.

105
00:05:23,390 --> 00:05:26,320
And we also wanna store the name of the user

106
00:05:26,320 --> 00:05:29,660
and the address information like the street,

107
00:05:29,660 --> 00:05:32,870
the city, the postal code and so on.

108
00:05:32,870 --> 00:05:35,900
So that in our fictional shop here,

109
00:05:35,900 --> 00:05:39,263
we would be able to send goods to a given customer.

110
00:05:41,060 --> 00:05:43,620
Now, besides users for this online shop,

111
00:05:43,620 --> 00:05:46,020
we, of course, also need products.

112
00:05:46,020 --> 00:05:48,500
And the idea here is simply that

113
00:05:48,500 --> 00:05:51,920
we can store the name of a product,

114
00:05:51,920 --> 00:05:56,920
a short summary text that shows up on the all products page,

115
00:05:57,150 --> 00:06:01,750
then also the price of a product, the image of a product,

116
00:06:01,750 --> 00:06:03,190
and the description

117
00:06:03,190 --> 00:06:05,763
that's showing on the product details page.

118
00:06:07,110 --> 00:06:10,090
We also want to allow users to add products

119
00:06:10,090 --> 00:06:11,550
into a shopping cart

120
00:06:11,550 --> 00:06:14,110
and therefore that is another data entity

121
00:06:14,110 --> 00:06:15,840
with which we have to work.

122
00:06:15,840 --> 00:06:19,640
Though you will see that throughout this course section,

123
00:06:19,640 --> 00:06:22,330
this will be a special data entity

124
00:06:22,330 --> 00:06:25,350
because we will actually not store carts

125
00:06:25,350 --> 00:06:28,820
in a separate database table or collection,

126
00:06:28,820 --> 00:06:30,640
but instead of our session,

127
00:06:30,640 --> 00:06:34,120
and you'll see why we do this and how we do this

128
00:06:34,120 --> 00:06:35,803
throughout this course section.

129
00:06:37,090 --> 00:06:39,190
Now, this cart then, of course,

130
00:06:39,190 --> 00:06:41,530
will store the items that are in the cart,

131
00:06:41,530 --> 00:06:43,800
so the products that are in the cart,

132
00:06:43,800 --> 00:06:46,760
and also the total price of all the items

133
00:06:46,760 --> 00:06:49,233
and the number of items that were added.

134
00:06:50,280 --> 00:06:52,870
And last but not least, of course, it's a shop,

135
00:06:52,870 --> 00:06:57,090
and therefore customers should be able to convert a cart

136
00:06:57,090 --> 00:07:00,910
into an order by buying the goods in a cart.

137
00:07:00,910 --> 00:07:03,440
And therefore, we also need orders

138
00:07:03,440 --> 00:07:06,050
and the order, in the end, is just a combination

139
00:07:06,050 --> 00:07:10,330
of some user data describing the user who placed the order

140
00:07:10,330 --> 00:07:13,130
and the product data, the cart data.

141
00:07:13,130 --> 00:07:15,600
And then we can also add a date stamp

142
00:07:15,600 --> 00:07:18,280
so that we know when the order was placed

143
00:07:18,280 --> 00:07:23,280
and a status which could be pending, canceled, or fulfilled.

144
00:07:23,410 --> 00:07:25,890
And that's this status which we can manage

145
00:07:25,890 --> 00:07:28,460
in the administration area.

146
00:07:28,460 --> 00:07:31,710
And these are the data models we are going to work with

147
00:07:31,710 --> 00:07:33,603
throughout this course section.