Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,120 --> 00:00:02,639
hello everyone my name is zura and I am
2
00:00:02,639 --> 00:00:04,799
the code public I have built e-commerce
3
00:00:04,799 --> 00:00:07,140
website with admin panel with online
4
00:00:07,140 --> 00:00:09,420
payments and deployed it on a custom
5
00:00:09,420 --> 00:00:11,219
domain with custom business email
6
00:00:11,219 --> 00:00:13,920
address I also deployed the vue.js admin
7
00:00:13,920 --> 00:00:16,199
panel on a subdomain of the primary
8
00:00:16,199 --> 00:00:17,880
domain let's have a look at the demo of
9
00:00:17,880 --> 00:00:20,400
the project let's start our demo in the
10
00:00:20,400 --> 00:00:22,380
demo starts on the website on the
11
00:00:22,380 --> 00:00:24,180
website we output all the published
12
00:00:24,180 --> 00:00:26,460
products we have pagination and at the
13
00:00:26,460 --> 00:00:28,920
moment it is set to five products per
14
00:00:28,920 --> 00:00:31,679
page and we have three more pages card
15
00:00:31,679 --> 00:00:34,020
login and registration logging in
16
00:00:34,020 --> 00:00:35,940
registration are pretty straightforward
17
00:00:35,940 --> 00:00:37,739
we have a few Fields right here to fill
18
00:00:37,739 --> 00:00:39,660
up and we have of course forward
19
00:00:39,660 --> 00:00:42,059
password page and password reset Pages
20
00:00:42,059 --> 00:00:44,760
as well we have card page which displays
21
00:00:44,760 --> 00:00:46,920
all the items you have in the cart you
22
00:00:46,920 --> 00:00:49,260
don't need to be authorized to add items
23
00:00:49,260 --> 00:00:50,940
into the cart you just click those
24
00:00:50,940 --> 00:00:53,280
buttons and the items are added into the
25
00:00:53,280 --> 00:00:54,480
cart
26
00:00:54,480 --> 00:00:57,000
when we go to the cart page we see all
27
00:00:57,000 --> 00:00:58,860
items we have already in the cart we
28
00:00:58,860 --> 00:01:00,840
have possibility to remove items from
29
00:01:00,840 --> 00:01:03,660
the card or change its quantity and as
30
00:01:03,660 --> 00:01:06,000
we see down below the total amount of
31
00:01:06,000 --> 00:01:08,520
the items in the card also increases as
32
00:01:08,520 --> 00:01:11,040
soon as we change the quantity adding
33
00:01:11,040 --> 00:01:13,619
items into the cart removing items
34
00:01:13,619 --> 00:01:15,979
changing the quantity and in general
35
00:01:15,979 --> 00:01:19,260
managing items on the front-end side is
36
00:01:19,260 --> 00:01:22,140
done using alpine.js we have also
37
00:01:22,140 --> 00:01:24,360
product Details page when we click on
38
00:01:24,360 --> 00:01:26,580
the item itself we see the details page
39
00:01:26,580 --> 00:01:28,380
and we have the description right here
40
00:01:28,380 --> 00:01:30,299
they said to card button and the
41
00:01:30,299 --> 00:01:32,460
quantity so I'm going to add like four
42
00:01:32,460 --> 00:01:34,920
more items into the card and now I
43
00:01:34,920 --> 00:01:38,040
totally have 11 items into the cart as
44
00:01:38,040 --> 00:01:40,140
soon as I hit this proceed to checkout
45
00:01:40,140 --> 00:01:43,079
now I need to log in okay but first we
46
00:01:43,079 --> 00:01:44,700
have to create an account
47
00:01:44,700 --> 00:01:46,740
when you fill up the form right here and
48
00:01:46,740 --> 00:01:48,360
click the sign up button you will
49
00:01:48,360 --> 00:01:50,700
receive a conf email confirmation you
50
00:01:50,700 --> 00:01:52,320
just accept this email confirmation
51
00:01:52,320 --> 00:01:54,659
click the button in your email and your
52
00:01:54,659 --> 00:01:56,520
account will be activated and you will
53
00:01:56,520 --> 00:01:59,100
be logged in as soon as you create your
54
00:01:59,100 --> 00:02:02,280
account or just log into the system and
55
00:02:02,280 --> 00:02:04,560
if you don't have any items into your
56
00:02:04,560 --> 00:02:08,340
cart the items which we are added into
57
00:02:08,340 --> 00:02:11,520
the card when you were guests those
58
00:02:11,520 --> 00:02:15,000
items will be moved and Associated to
59
00:02:15,000 --> 00:02:17,280
your authorized users information so
60
00:02:17,280 --> 00:02:19,200
basically you can add items into the
61
00:02:19,200 --> 00:02:20,580
cart as guest
62
00:02:20,580 --> 00:02:23,340
but whenever you log in those items will
63
00:02:23,340 --> 00:02:25,800
move and will be Associated to your
64
00:02:25,800 --> 00:02:28,319
authorized users account and after that
65
00:02:28,319 --> 00:02:30,720
you can even check out from second
66
00:02:30,720 --> 00:02:33,000
device I'm going to log in with an
67
00:02:33,000 --> 00:02:35,760
existing username and password and I'm
68
00:02:35,760 --> 00:02:37,260
going to scroll down below and hit the
69
00:02:37,260 --> 00:02:39,540
proceed to checkout this will redirect
70
00:02:39,540 --> 00:02:42,360
me to the stripe checkout page here I'm
71
00:02:42,360 --> 00:02:44,040
going to fill up the information or
72
00:02:44,040 --> 00:02:46,260
stripe checkout at the moment it is
73
00:02:46,260 --> 00:02:48,900
configured to accept test credit cards
74
00:02:48,900 --> 00:02:51,420
so feel free to provide the following
75
00:02:51,420 --> 00:02:53,940
credit card information and test how
76
00:02:53,940 --> 00:02:56,519
checkout process works and click the pay
77
00:02:56,519 --> 00:02:59,340
button this will redirect us to our
78
00:02:59,340 --> 00:03:01,200
website and we see the successful
79
00:03:01,200 --> 00:03:03,599
message Surah your order has been
80
00:03:03,599 --> 00:03:06,120
completed I'm actually authorized and I
81
00:03:06,120 --> 00:03:08,160
can click this my account right here I
82
00:03:08,160 --> 00:03:11,159
have my profile in my orders if I click
83
00:03:11,159 --> 00:03:13,140
my orders I'm going to see all the
84
00:03:13,140 --> 00:03:15,360
orders I have made all the orders
85
00:03:15,360 --> 00:03:18,599
basically are unpaid except this one I
86
00:03:18,599 --> 00:03:20,340
can click on the order number to view
87
00:03:20,340 --> 00:03:22,739
the the details of the order if I want
88
00:03:22,739 --> 00:03:24,959
to manage my addresses or my personal
89
00:03:24,959 --> 00:03:27,239
information I just click on my profile
90
00:03:27,239 --> 00:03:29,400
and from here I can manage my addresses
91
00:03:29,400 --> 00:03:31,620
update my password or just change the
92
00:03:31,620 --> 00:03:34,379
profile details now let's go to the
93
00:03:34,379 --> 00:03:36,959
admin panel once you log in in the admin
94
00:03:36,959 --> 00:03:38,640
panel you're going to see a dashboard
95
00:03:38,640 --> 00:03:41,040
this gives you an overview the latest
96
00:03:41,040 --> 00:03:44,220
orders orders by country total income
97
00:03:44,220 --> 00:03:47,159
couple of useful numbers and the latest
98
00:03:47,159 --> 00:03:48,659
customers
99
00:03:48,659 --> 00:03:52,440
the admin panel is built fully on vue.js
100
00:03:52,440 --> 00:03:54,540
as a single page application which
101
00:03:54,540 --> 00:03:58,200
connects to laravel API and communicates
102
00:03:58,200 --> 00:04:00,420
just like this so you're going to also
103
00:04:00,420 --> 00:04:02,220
learn how to create a vue.js
104
00:04:02,220 --> 00:04:04,319
applications and connect to any
105
00:04:04,319 --> 00:04:06,060
third-party apis
106
00:04:06,060 --> 00:04:08,519
let's go to the products this is the
107
00:04:08,519 --> 00:04:10,140
place from which we can manage our
108
00:04:10,140 --> 00:04:11,640
products we can edit the product
109
00:04:11,640 --> 00:04:14,519
information change the image change its
110
00:04:14,519 --> 00:04:17,699
description change the price or we can
111
00:04:17,699 --> 00:04:20,399
add new products from the orders menu
112
00:04:20,399 --> 00:04:22,320
item we're going to see all existing
113
00:04:22,320 --> 00:04:24,840
orders we can see details of each
114
00:04:24,840 --> 00:04:27,720
individual order and we can even change
115
00:04:27,720 --> 00:04:30,000
the status of this order I'm going to
116
00:04:30,000 --> 00:04:32,820
set this into shift for example when you
117
00:04:32,820 --> 00:04:34,740
change the order status the customer
118
00:04:34,740 --> 00:04:37,800
will receive an email that his order
119
00:04:37,800 --> 00:04:41,400
status was changed also when the order
120
00:04:41,400 --> 00:04:43,860
is made by by customer admin user
121
00:04:43,860 --> 00:04:46,860
receives an email that new order has
122
00:04:46,860 --> 00:04:49,440
been made okay let's click on the users
123
00:04:49,440 --> 00:04:52,259
from which we can manage all admin users
124
00:04:52,259 --> 00:04:54,720
we can change the passwords of these
125
00:04:54,720 --> 00:04:57,780
users or create new user or delete users
126
00:04:57,780 --> 00:05:00,660
from the customers menu item we can
127
00:05:00,660 --> 00:05:03,120
manage existing customers if we click
128
00:05:03,120 --> 00:05:05,520
edit right here we can see the details
129
00:05:05,520 --> 00:05:07,800
of the customer we can see all addresses
130
00:05:07,800 --> 00:05:10,440
and we can even change addresses of the
131
00:05:10,440 --> 00:05:12,900
customer let's go only reports from
132
00:05:12,900 --> 00:05:16,020
which we can see basically orders by day
133
00:05:16,020 --> 00:05:18,780
for last one month and we have a drop
134
00:05:18,780 --> 00:05:20,520
down right here here from which we can
135
00:05:20,520 --> 00:05:24,180
update the period into last week last
136
00:05:24,180 --> 00:05:27,960
day or last three months the same type
137
00:05:27,960 --> 00:05:31,199
of date range picker we have also on
138
00:05:31,199 --> 00:05:33,840
dashboard right here we can choose the
139
00:05:33,840 --> 00:05:35,460
period we want
140
00:05:35,460 --> 00:05:37,500
all right I think I showed you
141
00:05:37,500 --> 00:05:40,020
everything about the project user
142
00:05:40,020 --> 00:05:42,180
interface in this video you're going to
143
00:05:42,180 --> 00:05:43,440
learn how to build full stack
144
00:05:43,440 --> 00:05:46,139
applications with lateral vue.js Talon
145
00:05:46,139 --> 00:05:49,080
CSS and alpine.js how to correctly
146
00:05:49,080 --> 00:05:51,960
Implement stripe online payments how to
147
00:05:51,960 --> 00:05:54,240
create vue.js applications and connect
148
00:05:54,240 --> 00:05:56,940
to any third-party apis and how to
149
00:05:56,940 --> 00:05:59,520
deploy your projects on a custom domain
150
00:05:59,520 --> 00:06:01,800
with custom business email address even
151
00:06:01,800 --> 00:06:03,660
though this is multiple hours tutorial
152
00:06:03,660 --> 00:06:05,940
still it is a small part of the entire
153
00:06:05,940 --> 00:06:07,860
course I recommend to check the
154
00:06:07,860 --> 00:06:10,080
codeholic.com and have a look at all the
155
00:06:10,080 --> 00:06:12,180
features of the premium course I also
156
00:06:12,180 --> 00:06:15,360
plan to regularly create updates for the
157
00:06:15,360 --> 00:06:17,699
course for additional features such as
158
00:06:17,699 --> 00:06:20,039
having multiple images for the products
159
00:06:20,039 --> 00:06:23,520
create categories having a corrosal or
160
00:06:23,520 --> 00:06:26,880
so-called featured products add stock
161
00:06:26,880 --> 00:06:29,100
Management on the products and there are
162
00:06:29,100 --> 00:06:31,500
a few others those are the top features
163
00:06:31,500 --> 00:06:33,660
I want to include my next update which
164
00:06:33,660 --> 00:06:36,060
will probably be in December when I
165
00:06:36,060 --> 00:06:37,919
started working on this project my
166
00:06:37,919 --> 00:06:39,960
initial plan was to create six or seven
167
00:06:39,960 --> 00:06:42,360
hours tutorial on YouTube how to build
168
00:06:42,360 --> 00:06:45,360
and deploy laravel fewjs e-commerce
169
00:06:45,360 --> 00:06:46,319
project
170
00:06:46,319 --> 00:06:48,300
I had a list of the features and I was
171
00:06:48,300 --> 00:06:50,220
following that list implementing all the
172
00:06:50,220 --> 00:06:52,979
features at some point I discovered that
173
00:06:52,979 --> 00:06:55,500
I already had much more hours recorded
174
00:06:55,500 --> 00:06:58,139
then it was my initial play I tried to
175
00:06:58,139 --> 00:07:00,419
simplify the project remove few features
176
00:07:00,419 --> 00:07:03,360
and continued recording like this when I
177
00:07:03,360 --> 00:07:05,580
recorded everything all the features I
178
00:07:05,580 --> 00:07:07,259
wanted to implement I discovered that
179
00:07:07,259 --> 00:07:10,500
the the whole content was about 23 hours
180
00:07:10,500 --> 00:07:13,199
long I put so much effort in this course
181
00:07:13,199 --> 00:07:15,720
and I spent so much time on this course
182
00:07:15,720 --> 00:07:17,100
actually if you have a look at the
183
00:07:17,100 --> 00:07:18,960
GitHub repository you're going to see
184
00:07:18,960 --> 00:07:21,000
that the initial comment was made about
185
00:07:21,000 --> 00:07:23,819
five or six months ago I put so much
186
00:07:23,819 --> 00:07:25,800
effort in this project that finally I
187
00:07:25,800 --> 00:07:28,199
decided to make it as a premium course I
188
00:07:28,199 --> 00:07:29,699
tried to make the price of the premium
189
00:07:29,699 --> 00:07:31,860
course very affordable but even after
190
00:07:31,860 --> 00:07:34,259
that I knew there were some people who
191
00:07:34,259 --> 00:07:36,780
were waiting this YouTube tutorial free
192
00:07:36,780 --> 00:07:39,000
YouTube tutorial how to build and deploy
193
00:07:39,000 --> 00:07:41,160
lateral view JS e-commerce project I
194
00:07:41,160 --> 00:07:43,380
simply could not let them down so I
195
00:07:43,380 --> 00:07:45,900
decided to take some parts from the
196
00:07:45,900 --> 00:07:48,840
premium course as is without any kind of
197
00:07:48,840 --> 00:07:51,900
editing and then feel the missing gaps
198
00:07:51,900 --> 00:07:55,259
with quickly explaining what changes
199
00:07:55,259 --> 00:07:57,300
have been made from section to section
200
00:07:57,300 --> 00:08:00,060
so finally this several hours tutorial
201
00:08:00,060 --> 00:08:02,759
includes the whole process as well from
202
00:08:02,759 --> 00:08:05,099
start to finish and actually the first
203
00:08:05,099 --> 00:08:07,440
section starts setting up the project is
204
00:08:07,440 --> 00:08:09,240
unedited you're going to see the full
205
00:08:09,240 --> 00:08:11,160
process as well as the last section
206
00:08:11,160 --> 00:08:13,199
deployment is unedited you're going to
207
00:08:13,199 --> 00:08:15,000
see the full process and in between
208
00:08:15,000 --> 00:08:17,340
you're going to see also cart management
209
00:08:17,340 --> 00:08:20,099
for example and online payments those
210
00:08:20,099 --> 00:08:22,919
sections are unedited full flow but in
211
00:08:22,919 --> 00:08:26,520
between several sections are created not
212
00:08:26,520 --> 00:08:29,400
created but are explained very uh very
213
00:08:29,400 --> 00:08:31,979
fast of course not every single line
214
00:08:31,979 --> 00:08:34,620
written in this project is explained in
215
00:08:34,620 --> 00:08:36,360
this VOR tutorial because as I mentioned
216
00:08:36,360 --> 00:08:38,820
the entire content is about 23 hours
217
00:08:38,820 --> 00:08:41,820
long but the most important sections is
218
00:08:41,820 --> 00:08:43,380
unedited you're going to see full
219
00:08:43,380 --> 00:08:45,240
process at the end of this course we're
220
00:08:45,240 --> 00:08:46,800
going to deploy the project to any
221
00:08:46,800 --> 00:08:48,420
custom domain with custom business email
222
00:08:48,420 --> 00:08:50,940
address as a choice of Hosting provider
223
00:08:50,940 --> 00:08:52,740
we're going to use hostinger which is
224
00:08:52,740 --> 00:08:54,899
also a sponsor of today's video I have
225
00:08:54,899 --> 00:08:57,120
been very skeptical to Shared hosting
226
00:08:57,120 --> 00:09:00,120
Services years ago I tried it years ago
227
00:09:00,120 --> 00:09:02,399
a few times but that was very
228
00:09:02,399 --> 00:09:04,200
unconvenient for me I didn't have
229
00:09:04,200 --> 00:09:07,260
possibility to control my PHP version my
230
00:09:07,260 --> 00:09:10,080
databases I the only possibility to
231
00:09:10,080 --> 00:09:12,540
deploy my project was FTP clients using
232
00:09:12,540 --> 00:09:14,399
filezilla for example which by the way I
233
00:09:14,399 --> 00:09:17,279
don't like to deploy my projects for and
234
00:09:17,279 --> 00:09:19,920
like my previous experience working with
235
00:09:19,920 --> 00:09:22,800
premium shared hosting Services was not
236
00:09:22,800 --> 00:09:24,959
that good then I switched to Virtual
237
00:09:24,959 --> 00:09:27,600
private servers so-called vpses and I
238
00:09:27,600 --> 00:09:29,519
preferred vpss because even though it
239
00:09:29,519 --> 00:09:31,500
was a little bit expensive I had all the
240
00:09:31,500 --> 00:09:33,899
control on my web server I could install
241
00:09:33,899 --> 00:09:36,240
the version I needed I could manage and
242
00:09:36,240 --> 00:09:38,760
maintain as much as I needed but both
243
00:09:38,760 --> 00:09:41,339
hosting types have their advantages
244
00:09:41,339 --> 00:09:43,740
shared hostings are very easy to set up
245
00:09:43,740 --> 00:09:46,200
but you're kind of limited in shared
246
00:09:46,200 --> 00:09:48,720
hosting however vpses you have control
247
00:09:48,720 --> 00:09:50,820
on anything you you are very very
248
00:09:50,820 --> 00:09:53,700
flexible but it's hard to set it up when
249
00:09:53,700 --> 00:09:55,560
I discovered hostinger about two years
250
00:09:55,560 --> 00:09:57,899
ago and started working with the
251
00:09:57,899 --> 00:10:00,300
hostinger I discovered that hostinger
252
00:10:00,300 --> 00:10:03,779
has best of both hosting types it's very
253
00:10:03,779 --> 00:10:05,640
easy to start with the whole singer but
254
00:10:05,640 --> 00:10:08,040
you also have great control on whatever
255
00:10:08,040 --> 00:10:10,560
you need you can control your PHP
256
00:10:10,560 --> 00:10:13,380
versions your DNS records you have
257
00:10:13,380 --> 00:10:15,839
possibility to connect with SSH create
258
00:10:15,839 --> 00:10:19,080
up to 100 websites up to 100 databases
259
00:10:19,080 --> 00:10:21,779
you can set up sub domains and pretty
260
00:10:21,779 --> 00:10:23,640
much anything you might need I'm going
261
00:10:23,640 --> 00:10:25,440
to also show you how you can register
262
00:10:25,440 --> 00:10:27,360
with hostinger get the premium shared
263
00:10:27,360 --> 00:10:29,279
hosting which will include domain and
264
00:10:29,279 --> 00:10:32,940
SSL and SSH access and databases and
265
00:10:32,940 --> 00:10:34,860
everything basically you you will need
266
00:10:34,860 --> 00:10:36,720
but first let's talk about the
267
00:10:36,720 --> 00:10:39,300
prerequisites of this course this course
268
00:10:39,300 --> 00:10:42,060
is pretty much for everyone who wants to
269
00:10:42,060 --> 00:10:43,860
learn building full stack applications
270
00:10:43,860 --> 00:10:46,740
with the laravel and vue.js the only
271
00:10:46,740 --> 00:10:49,380
recommendation for me is to have basic
272
00:10:49,380 --> 00:10:51,180
knowledge of laravel know what is
273
00:10:51,180 --> 00:10:53,339
controller what is model where are the
274
00:10:53,339 --> 00:10:55,019
immigration files located for example
275
00:10:55,019 --> 00:10:58,079
and have a basic understanding of vue.js
276
00:10:58,079 --> 00:11:00,480
at least no words as a component this
277
00:11:00,480 --> 00:11:03,300
course also uses Talon CSS and alpine.js
278
00:11:03,300 --> 00:11:05,160
but no prior knowledge of these
279
00:11:05,160 --> 00:11:07,320
Technologies are required but still if
280
00:11:07,320 --> 00:11:09,360
you have hard time understanding what's
281
00:11:09,360 --> 00:11:12,180
happening around Talon CSS or alpine.js
282
00:11:12,180 --> 00:11:15,000
I have tutorials for both I'm going to
283
00:11:15,000 --> 00:11:16,320
put links in the video description
284
00:11:16,320 --> 00:11:19,140
building such type of projects editing
285
00:11:19,140 --> 00:11:21,360
connecting different parts to each other
286
00:11:21,360 --> 00:11:23,160
and offering you as a free tutorial
287
00:11:23,160 --> 00:11:25,740
takes a lot of time your appreciation
288
00:11:25,740 --> 00:11:27,959
will be if you hit the like button and
289
00:11:27,959 --> 00:11:29,880
subscribe there are many people watching
290
00:11:29,880 --> 00:11:31,740
this video right now who is not
291
00:11:31,740 --> 00:11:33,720
subscribed you are not losing anything
292
00:11:33,720 --> 00:11:35,640
if you just hit the Subscribe button
293
00:11:35,640 --> 00:11:38,519
that gives me additional motivation to
294
00:11:38,519 --> 00:11:40,740
create such type of videos hit the like
295
00:11:40,740 --> 00:11:42,660
button and again if you want to see the
296
00:11:42,660 --> 00:11:45,180
full working process with 23 hours of
297
00:11:45,180 --> 00:11:47,959
content 140 videos check my website
298
00:11:47,959 --> 00:11:51,060
thecold.com alright let's register on
299
00:11:51,060 --> 00:11:53,880
hostinger get premium shared hosting and
300
00:11:53,880 --> 00:11:56,459
then start building this awesome project
301
00:11:56,459 --> 00:11:59,640
all right let's scroll down below and
302
00:11:59,640 --> 00:12:01,560
right here we have this premium shared
303
00:12:01,560 --> 00:12:04,320
hosting and they have unmetered traffic
304
00:12:04,320 --> 00:12:06,899
you can deploy up to 100 websites right
305
00:12:06,899 --> 00:12:09,000
there you have 100 gigabyte of SSD
306
00:12:09,000 --> 00:12:11,700
storage you have free domain free email
307
00:12:11,700 --> 00:12:14,399
address and you have unlimited number of
308
00:12:14,399 --> 00:12:17,519
free SSL certificates and if we see all
309
00:12:17,519 --> 00:12:19,860
the features there are much more you
310
00:12:19,860 --> 00:12:22,320
have unlimited databases you have also
311
00:12:22,320 --> 00:12:25,560
git support in SSH access you have 100
312
00:12:25,560 --> 00:12:28,320
email mailboxes so when you take a
313
00:12:28,320 --> 00:12:32,160
domain you can create up to 100 emails
314
00:12:32,160 --> 00:12:33,839
which will be
315
00:12:33,839 --> 00:12:37,019
um under the domain basically all right
316
00:12:37,019 --> 00:12:40,100
so you get a lot for such a low price
317
00:12:40,100 --> 00:12:43,500
and let's click right here add to cart
318
00:12:43,500 --> 00:12:46,560
which will redirect us to their checkout
319
00:12:46,560 --> 00:12:48,899
page so right here we have four options
320
00:12:48,899 --> 00:12:50,820
we can purchase the hosting for one
321
00:12:50,820 --> 00:12:55,920
month 12 months 24 months or 48 months
322
00:12:55,920 --> 00:12:58,560
and when you purchase it for 48 months
323
00:12:58,560 --> 00:13:02,300
you get an insane discount almost 500
324
00:13:02,300 --> 00:13:05,579
okay so you can choose whichever option
325
00:13:05,579 --> 00:13:08,100
you want then scroll down below provide
326
00:13:08,100 --> 00:13:10,380
your email address right here or
327
00:13:10,380 --> 00:13:12,959
authorize using Facebook or Google
328
00:13:12,959 --> 00:13:15,600
scroll down below right here you again
329
00:13:15,600 --> 00:13:18,060
get a little bit of Glimpse what you are
330
00:13:18,060 --> 00:13:22,079
basically uh taking in this amount you
331
00:13:22,079 --> 00:13:24,360
already have a great discount but
332
00:13:24,360 --> 00:13:27,060
actually if you use my coupon code the
333
00:13:27,060 --> 00:13:29,459
code holique you're gonna get additional
334
00:13:29,459 --> 00:13:32,639
10 discount then you fill up the
335
00:13:32,639 --> 00:13:35,160
information right here and submit secure
336
00:13:35,160 --> 00:13:38,160
payment all right I recommend to take
337
00:13:38,160 --> 00:13:40,260
these premium shared hosting at the
338
00:13:40,260 --> 00:13:42,600
moment because they have Black Friday
339
00:13:42,600 --> 00:13:45,300
insane sale use the link in the video
340
00:13:45,300 --> 00:13:47,760
description or provide a coupon code the
341
00:13:47,760 --> 00:13:50,040
code holic right here to get additional
342
00:13:50,040 --> 00:13:52,920
10 discount once you fill up the form
343
00:13:52,920 --> 00:13:56,160
and click submit secure payment you will
344
00:13:56,160 --> 00:13:58,139
be redirected to the hostinger's age
345
00:13:58,139 --> 00:14:00,420
panel from there we will be able to
346
00:14:00,420 --> 00:14:02,220
claim our free domain
347
00:14:02,220 --> 00:14:05,760
configure SSL create databases deploy
348
00:14:05,760 --> 00:14:09,000
our project access to our hosting using
349
00:14:09,000 --> 00:14:13,459
SSH and do much much more
350
00:14:14,519 --> 00:14:16,440
before we start working on the project
351
00:14:16,440 --> 00:14:19,800
let's set up working environment for
352
00:14:19,800 --> 00:14:21,839
this we will need to install a couple of
353
00:14:21,839 --> 00:14:25,260
applications the first one is example
354
00:14:25,260 --> 00:14:28,200
which is a package and contains Apache
355
00:14:28,200 --> 00:14:31,980
mariadb and PHP Apache is a web server
356
00:14:31,980 --> 00:14:34,620
to run PHP Mario ADB is a database and
357
00:14:34,620 --> 00:14:36,839
PHP B is just PHP
358
00:14:36,839 --> 00:14:38,779
let's go on
359
00:14:38,779 --> 00:14:41,040
apachefriends.org click on download in
360
00:14:41,040 --> 00:14:43,500
the menu and right here we have exam for
361
00:14:43,500 --> 00:14:46,680
all major operating systems download the
362
00:14:46,680 --> 00:14:48,600
latest version for your operating system
363
00:14:48,600 --> 00:14:50,040
and just follow the installation
364
00:14:50,040 --> 00:14:51,480
instructions it is pretty
365
00:14:51,480 --> 00:14:53,699
straightforward next we will need
366
00:14:53,699 --> 00:14:56,100
composer which is which is a dependency
367
00:14:56,100 --> 00:14:58,980
manager for PHP using composer we will
368
00:14:58,980 --> 00:15:01,260
be able to create new laravel project as
369
00:15:01,260 --> 00:15:03,420
well as install dependencies in existing
370
00:15:03,420 --> 00:15:06,120
laravel project go to download right
371
00:15:06,120 --> 00:15:07,980
here and download it for your operating
372
00:15:07,980 --> 00:15:10,740
system next we will need text editor
373
00:15:10,740 --> 00:15:12,899
slash ID my
374
00:15:12,899 --> 00:15:16,800
primary choice for PHP is phpstorm it is
375
00:15:16,800 --> 00:15:20,240
pretty straightforward pretty powerful
376
00:15:20,240 --> 00:15:24,899
smart PHP ID the only disadvantage is it
377
00:15:24,899 --> 00:15:27,839
is not free as a free choice I recommend
378
00:15:27,839 --> 00:15:31,560
Visual Studio code and I also have a
379
00:15:31,560 --> 00:15:34,380
video where I install 12 useful
380
00:15:34,380 --> 00:15:37,320
extensions for PHP so if you're new to
381
00:15:37,320 --> 00:15:39,959
PHP and vs code you can just watch that
382
00:15:39,959 --> 00:15:41,579
video and install those extensions
383
00:15:41,579 --> 00:15:44,100
because without the extensions basically
384
00:15:44,100 --> 00:15:48,060
vs code is is not that intelligent
385
00:15:48,060 --> 00:15:51,060
okay download whichever editor you want
386
00:15:51,060 --> 00:15:54,360
and now let's create new larval project
387
00:15:54,360 --> 00:15:57,660
but before that uh we as soon as you
388
00:15:57,660 --> 00:16:00,720
install your exam uh let's open exempt
389
00:16:00,720 --> 00:16:02,639
control panel
390
00:16:02,639 --> 00:16:05,519
and when to start Apache in MySQL
391
00:16:05,519 --> 00:16:07,740
Services just click Start buttons right
392
00:16:07,740 --> 00:16:10,920
here and after that we will be able to
393
00:16:10,920 --> 00:16:15,240
access p in a localhost slash PHP my
394
00:16:15,240 --> 00:16:16,320
admin
395
00:16:16,320 --> 00:16:19,380
and we need to create a schema from here
396
00:16:19,380 --> 00:16:23,339
that's a Mario DB in client interface
397
00:16:23,339 --> 00:16:26,220
just click new on the left side and
398
00:16:26,220 --> 00:16:28,620
specify right here the database name I'm
399
00:16:28,620 --> 00:16:30,360
going to call my database laravel view
400
00:16:30,360 --> 00:16:33,660
Ecommerce and choose the encoding utf-8
401
00:16:33,660 --> 00:16:35,940
MP4 Unicode CI that's where I'm going to
402
00:16:35,940 --> 00:16:38,220
choose and according to my experience
403
00:16:38,220 --> 00:16:40,759
that is the encoding which works best
404
00:16:40,759 --> 00:16:44,220
for Unicode characters and just click
405
00:16:44,220 --> 00:16:47,639
create right here okay now let's open
406
00:16:47,639 --> 00:16:50,639
CMD
407
00:16:50,699 --> 00:16:54,480
and I'm going to also navigate to the
408
00:16:54,480 --> 00:16:55,800
folder
409
00:16:55,800 --> 00:16:58,199
here's the CMD and I'm going to navigate
410
00:16:58,199 --> 00:17:00,779
to the folder where the xamp is actually
411
00:17:00,779 --> 00:17:03,980
installed and that is going to be under
412
00:17:03,980 --> 00:17:08,179
Windows C drive
413
00:17:08,359 --> 00:17:14,520
example the path and navigate using CD
414
00:17:14,520 --> 00:17:18,559
hit enter and now I'm in the exam Pages
415
00:17:18,559 --> 00:17:20,640
folder and I'm going to create new
416
00:17:20,640 --> 00:17:23,640
laravel project right here for this I'm
417
00:17:23,640 --> 00:17:25,859
going to create first laravel installer
418
00:17:25,859 --> 00:17:31,100
install so composer Global require
419
00:17:31,100 --> 00:17:34,860
laravel slash installer I'm going to hit
420
00:17:34,860 --> 00:17:37,200
enter and this will download the alarm
421
00:17:37,200 --> 00:17:39,059
installer and then we'll be able to
422
00:17:39,059 --> 00:17:41,760
create new laravel projects using that
423
00:17:41,760 --> 00:17:44,760
installer now I'm going to run laravel
424
00:17:44,760 --> 00:17:46,620
new
425
00:17:46,620 --> 00:17:48,679
in the project name I'm going to call
426
00:17:48,679 --> 00:17:51,480
laravel View
427
00:17:51,480 --> 00:17:53,280
e-commerce
428
00:17:53,280 --> 00:17:55,260
let's hit enter
429
00:17:55,260 --> 00:17:57,840
it's going to take few seconds or means
430
00:17:57,840 --> 00:17:59,700
depending on internet and many other
431
00:17:59,700 --> 00:18:04,020
things and until this is actually done
432
00:18:04,020 --> 00:18:06,780
we have already folder right here I'm
433
00:18:06,780 --> 00:18:08,220
going to open the laravel view
434
00:18:08,220 --> 00:18:11,280
e-commerce in my text editor I'm going
435
00:18:11,280 --> 00:18:13,440
to use phpstorm so right click on that
436
00:18:13,440 --> 00:18:16,380
and open folder as PHP store on Project
437
00:18:16,380 --> 00:18:18,419
you can open with vs code if you prefer
438
00:18:18,419 --> 00:18:21,539
it and it's going to take few seconds
439
00:18:21,539 --> 00:18:24,179
here it is already opening
440
00:18:24,179 --> 00:18:27,660
and let's have a look in the CMD
441
00:18:27,660 --> 00:18:30,419
and application is ready okay so we have
442
00:18:30,419 --> 00:18:33,059
already successfully installed that I'm
443
00:18:33,059 --> 00:18:34,980
going to actually close CMD because I'm
444
00:18:34,980 --> 00:18:37,200
going to use later the PHP storms
445
00:18:37,200 --> 00:18:39,120
integrated terminal
446
00:18:39,120 --> 00:18:41,400
and we already have database so let's
447
00:18:41,400 --> 00:18:44,700
open Dot en file and when to configure
448
00:18:44,700 --> 00:18:47,340
the database so the connection is MySQL
449
00:18:47,340 --> 00:18:51,240
the host is this is a local IP the port
450
00:18:51,240 --> 00:18:54,299
is 3306 that is the default Port we
451
00:18:54,299 --> 00:18:56,220
should leave that and the database is
452
00:18:56,220 --> 00:18:57,900
called laravel view Ecommerce that's
453
00:18:57,900 --> 00:19:00,780
actually correct name username is root
454
00:19:00,780 --> 00:19:01,980
and the password
455
00:19:01,980 --> 00:19:05,100
for Windows installation it is empty so
456
00:19:05,100 --> 00:19:07,080
the database is actually configured
457
00:19:07,080 --> 00:19:11,340
successfully now let's open Terminal
458
00:19:11,340 --> 00:19:15,120
and I'm going to run PHP Artisan migrate
459
00:19:15,120 --> 00:19:17,760
this is going to apply migrations in the
460
00:19:17,760 --> 00:19:21,780
database okay migrations are files which
461
00:19:21,780 --> 00:19:25,200
hold the schema information okay in this
462
00:19:25,200 --> 00:19:28,380
case the migrations created users table
463
00:19:28,380 --> 00:19:31,740
they created password results table they
464
00:19:31,740 --> 00:19:34,799
created a failed jobs table and personal
465
00:19:34,799 --> 00:19:38,179
access tokens table okay now let's open
466
00:19:38,179 --> 00:19:42,900
PHP my admin and just reload right here
467
00:19:42,900 --> 00:19:45,419
and we see larval view e-commerce inside
468
00:19:45,419 --> 00:19:48,720
there we have five tables fail jobs
469
00:19:48,720 --> 00:19:51,000
migrations password resets personal
470
00:19:51,000 --> 00:19:53,520
access tokens end users and those are
471
00:19:53,520 --> 00:19:56,580
tables which we are created from here we
472
00:19:56,580 --> 00:19:58,820
will have to create our own migrations
473
00:19:58,820 --> 00:20:01,260
in a moment
474
00:20:01,260 --> 00:20:05,280
but let's test our application in the
475
00:20:05,280 --> 00:20:09,059
browser so let's run PHP Artisan serve
476
00:20:09,059 --> 00:20:12,179
hit the enter it's going to start the
477
00:20:12,179 --> 00:20:15,600
alarms development server at a local IP
478
00:20:15,600 --> 00:20:18,960
port 8000 so let's just click right here
479
00:20:18,960 --> 00:20:24,059
or open localhost port 8000 and we see
480
00:20:24,059 --> 00:20:26,580
laravel application up and running
481
00:20:26,580 --> 00:20:28,440
all right
482
00:20:28,440 --> 00:20:31,919
um perfect I think we should start right
483
00:20:31,919 --> 00:20:36,000
now working on the database schema so
484
00:20:36,000 --> 00:20:38,820
for this let's have a look at the schema
485
00:20:38,820 --> 00:20:42,120
I prepared so we have the following
486
00:20:42,120 --> 00:20:45,419
tables so the users table which already
487
00:20:45,419 --> 00:20:49,080
exists in the laravel this one
488
00:20:49,080 --> 00:20:51,660
so I don't have Fields described right
489
00:20:51,660 --> 00:20:54,240
here so that's just for the referencing
490
00:20:54,240 --> 00:20:56,880
other tables but let's understand and
491
00:20:56,880 --> 00:20:59,220
start with the products so for products
492
00:20:59,220 --> 00:21:02,820
we have title slug the slug will be
493
00:21:02,820 --> 00:21:05,460
unique uh string generated from the
494
00:21:05,460 --> 00:21:08,940
title image we have image mime and image
495
00:21:08,940 --> 00:21:11,760
size as well we have description we have
496
00:21:11,760 --> 00:21:15,600
status for the product we have price of
497
00:21:15,600 --> 00:21:17,940
course we have created that and updated
498
00:21:17,940 --> 00:21:20,100
it when the product was created and
499
00:21:20,100 --> 00:21:22,679
updated we have created by and updated
500
00:21:22,679 --> 00:21:25,380
by by whom the product was actually
501
00:21:25,380 --> 00:21:28,620
created or updated we have deleted it
502
00:21:28,620 --> 00:21:31,380
and deleted by that is for soft deletes
503
00:21:31,380 --> 00:21:33,679
when the product will be actually
504
00:21:33,679 --> 00:21:36,960
deleted by the Admin users it's not
505
00:21:36,960 --> 00:21:38,340
going to be actually deleted from the
506
00:21:38,340 --> 00:21:42,000
database but the deleted deleted add and
507
00:21:42,000 --> 00:21:44,760
deleted by Fields will be set
508
00:21:44,760 --> 00:21:48,780
then we have orders and Order items so
509
00:21:48,780 --> 00:21:50,880
here we have the orders the order has
510
00:21:50,880 --> 00:21:54,419
total price it has its status whether
511
00:21:54,419 --> 00:21:57,179
the order is appending or completed it
512
00:21:57,179 --> 00:22:00,780
has its created it updated it created by
513
00:22:00,780 --> 00:22:03,600
an updated Pi then we have order items
514
00:22:03,600 --> 00:22:05,640
which is a junction table between orders
515
00:22:05,640 --> 00:22:08,220
and products we have the order ID here
516
00:22:08,220 --> 00:22:11,400
product ID here quantity in the unit
517
00:22:11,400 --> 00:22:14,400
price okay then we have payments which
518
00:22:14,400 --> 00:22:17,520
is connected to the orders
519
00:22:17,520 --> 00:22:20,700
and we have order ID here we have amount
520
00:22:20,700 --> 00:22:23,940
we have status we have uh type right
521
00:22:23,940 --> 00:22:26,580
here created it and created by we don't
522
00:22:26,580 --> 00:22:29,340
have updated it and updated by because
523
00:22:29,340 --> 00:22:31,740
the once the payment is made it's not
524
00:22:31,740 --> 00:22:33,900
going to be actually updated
525
00:22:33,900 --> 00:22:35,100
okay
526
00:22:35,100 --> 00:22:38,039
down below we have card items now which
527
00:22:38,039 --> 00:22:42,360
references to user and product and uh
528
00:22:42,360 --> 00:22:45,360
quantity as well so that user added the
529
00:22:45,360 --> 00:22:48,120
following product with the following uh
530
00:22:48,120 --> 00:22:51,299
quantity in cart and that's the also
531
00:22:51,299 --> 00:22:54,960
date when that actually happened okay we
532
00:22:54,960 --> 00:22:57,059
can actually have right here updated it
533
00:22:57,059 --> 00:22:59,100
as well if the quantity is updated
534
00:22:59,100 --> 00:23:00,780
inside the cart
535
00:23:00,780 --> 00:23:02,940
we have order details as well which is
536
00:23:02,940 --> 00:23:04,559
connected to the orders and that
537
00:23:04,559 --> 00:23:07,679
contains the first name last name email
538
00:23:07,679 --> 00:23:10,200
phone address one address information
539
00:23:10,200 --> 00:23:13,080
basically everything and country code
540
00:23:13,080 --> 00:23:16,620
and create that and updated ad we have
541
00:23:16,620 --> 00:23:18,360
countries table which references to the
542
00:23:18,360 --> 00:23:20,220
audio details and finally we have
543
00:23:20,220 --> 00:23:23,820
customers and customer addresses and the
544
00:23:23,820 --> 00:23:27,539
order details basically is just a union
545
00:23:27,539 --> 00:23:30,600
of customers and customer addresses
546
00:23:30,600 --> 00:23:31,559
tables
547
00:23:31,559 --> 00:23:34,200
okay just like that this is our whole
548
00:23:34,200 --> 00:23:36,299
schema so we have possible we will have
549
00:23:36,299 --> 00:23:38,780
possibility to add items into the cart
550
00:23:38,780 --> 00:23:42,659
uh then make orders and then we have
551
00:23:42,659 --> 00:23:45,539
order details and make also payments and
552
00:23:45,539 --> 00:23:47,820
based on that information we can have a
553
00:23:47,820 --> 00:23:50,039
minimalistic reporting as well which
554
00:23:50,039 --> 00:23:53,340
products have been sold this month and
555
00:23:53,340 --> 00:23:56,820
so on things like that okay now we have
556
00:23:56,820 --> 00:24:00,780
to generate migrations and models for
557
00:24:00,780 --> 00:24:03,679
the following schema
558
00:24:03,679 --> 00:24:07,799
now let's open phpstorm I'm going to
559
00:24:07,799 --> 00:24:09,900
open new terminal right here I'm going
560
00:24:09,900 --> 00:24:11,520
to actually call this
561
00:24:11,520 --> 00:24:14,100
serve
562
00:24:14,100 --> 00:24:16,860
and in other terminal and right here
563
00:24:16,860 --> 00:24:18,299
we're going to generate models and
564
00:24:18,299 --> 00:24:24,299
migrations PHP artisan make model and
565
00:24:24,299 --> 00:24:26,400
I'm going to call this product and I'm
566
00:24:26,400 --> 00:24:29,280
going to specify right here Dash M for
567
00:24:29,280 --> 00:24:31,200
migration as well
568
00:24:31,200 --> 00:24:33,900
so we have to generate product
569
00:24:33,900 --> 00:24:37,500
the next will be to generate
570
00:24:37,500 --> 00:24:38,039
um
571
00:24:38,039 --> 00:24:40,080
let's wait until this is actually
572
00:24:40,080 --> 00:24:41,520
generated
573
00:24:41,520 --> 00:24:44,039
then we have to generate
574
00:24:44,039 --> 00:24:46,620
order model
575
00:24:46,620 --> 00:24:49,020
well let's have a look in the schema
576
00:24:49,020 --> 00:24:52,020
again so we should first generate tables
577
00:24:52,020 --> 00:24:53,760
which don't have references to other
578
00:24:53,760 --> 00:24:55,200
tables
579
00:24:55,200 --> 00:24:58,440
okay until that other tables is already
580
00:24:58,440 --> 00:25:01,020
generated for example when we generate
581
00:25:01,020 --> 00:25:04,380
products then we can generate cart items
582
00:25:04,380 --> 00:25:06,360
but we cannot actually generate for
583
00:25:06,360 --> 00:25:09,240
example order details table until the
584
00:25:09,240 --> 00:25:12,960
orders table is actually created so
585
00:25:12,960 --> 00:25:14,940
that's why we need to keep that ordering
586
00:25:14,940 --> 00:25:18,600
so maybe before the order model I'm
587
00:25:18,600 --> 00:25:20,039
going to leave these as it is I can
588
00:25:20,039 --> 00:25:21,500
delete that later
589
00:25:21,500 --> 00:25:24,980
but before the order model we should
590
00:25:24,980 --> 00:25:28,740
create a country which is which doesn't
591
00:25:28,740 --> 00:25:30,299
uh
592
00:25:30,299 --> 00:25:33,480
a reference to other tables itself so
593
00:25:33,480 --> 00:25:35,820
let's generate
594
00:25:35,820 --> 00:25:38,580
country then we can generate already
595
00:25:38,580 --> 00:25:39,980
orders
596
00:25:39,980 --> 00:25:43,980
and Order details as well or we can
597
00:25:43,980 --> 00:25:45,720
generate cart items as well so let's
598
00:25:45,720 --> 00:25:48,960
generate now cart item
599
00:25:48,960 --> 00:25:53,100
then we need to generate order detail
600
00:25:53,100 --> 00:25:57,960
then we need to generate uh order item
601
00:25:57,960 --> 00:26:00,900
then we have to generate
602
00:26:00,900 --> 00:26:03,659
uh maybe payment then we have to
603
00:26:03,659 --> 00:26:05,880
generate customers and customer
604
00:26:05,880 --> 00:26:08,159
addresses and we're done
605
00:26:08,159 --> 00:26:10,980
so let's generate
606
00:26:10,980 --> 00:26:14,700
customer model with migration
607
00:26:14,700 --> 00:26:18,200
and customer address
608
00:26:19,260 --> 00:26:21,360
okay now let's have a look in the
609
00:26:21,360 --> 00:26:23,220
project under app
610
00:26:23,220 --> 00:26:26,159
uh models right here we have cart item
611
00:26:26,159 --> 00:26:28,440
country customer customer detail order
612
00:26:28,440 --> 00:26:29,880
everything basically what we just
613
00:26:29,880 --> 00:26:33,120
generated let's go in the database and
614
00:26:33,120 --> 00:26:36,000
go under migrations and right here we
615
00:26:36,000 --> 00:26:39,240
have now first products then orders then
616
00:26:39,240 --> 00:26:42,120
we have countries cart items order
617
00:26:42,120 --> 00:26:45,120
details so they are right now generated
618
00:26:45,120 --> 00:26:48,059
in the order that they can run whenever
619
00:26:48,059 --> 00:26:52,080
we create uh right here corresponding
620
00:26:52,080 --> 00:26:55,200
content inside the schemas okay let's
621
00:26:55,200 --> 00:26:58,679
start from the products table and
622
00:26:58,679 --> 00:27:02,279
basically generate schema here we need
623
00:27:02,279 --> 00:27:06,240
the product title we need slag we need
624
00:27:06,240 --> 00:27:09,960
image we need image mime
625
00:27:09,960 --> 00:27:13,020
we need image size and long text which
626
00:27:13,020 --> 00:27:14,700
is going to be description
627
00:27:14,700 --> 00:27:18,539
and decimal price we will need created
628
00:27:18,539 --> 00:27:21,659
by which references to the user we need
629
00:27:21,659 --> 00:27:24,000
updated by as well which references to
630
00:27:24,000 --> 00:27:26,760
the user as well we need soft deletes
631
00:27:26,760 --> 00:27:30,360
which will add those created at sorry
632
00:27:30,360 --> 00:27:34,260
excuse me which will add those deleted
633
00:27:34,260 --> 00:27:38,039
add and deleted by fields and we will
634
00:27:38,039 --> 00:27:41,400
need foreign ID for the user as well for
635
00:27:41,400 --> 00:27:45,840
the dldt to buy and finally at the top
636
00:27:45,840 --> 00:27:48,900
right here we need to import the app
637
00:27:48,900 --> 00:27:51,539
models user because we use it right here
638
00:27:51,539 --> 00:27:55,080
for reference okay that is for the
639
00:27:55,080 --> 00:27:57,299
product table let's open the second one
640
00:27:57,299 --> 00:28:00,720
which is orders table okay for orders
641
00:28:00,720 --> 00:28:04,020
let's first import app models user
642
00:28:04,020 --> 00:28:05,880
because we're going to need that then
643
00:28:05,880 --> 00:28:08,400
down below we need to add total price to
644
00:28:08,400 --> 00:28:11,820
the order we need status on the order we
645
00:28:11,820 --> 00:28:15,360
need the created by and updated Buy on
646
00:28:15,360 --> 00:28:17,940
the order and that's that's all for the
647
00:28:17,940 --> 00:28:19,860
order we can double check in the schema
648
00:28:19,860 --> 00:28:22,559
as well we don't have anything else
649
00:28:22,559 --> 00:28:24,779
right here we don't have timestamps but
650
00:28:24,779 --> 00:28:26,460
we already have it
651
00:28:26,460 --> 00:28:29,460
the next table is countries table okay
652
00:28:29,460 --> 00:28:32,159
for countries we don't need ID and
653
00:28:32,159 --> 00:28:34,380
timestamps so I'm going to remove both
654
00:28:34,380 --> 00:28:37,380
and we're going to add a string code
655
00:28:37,380 --> 00:28:40,380
which is going to be primary key we will
656
00:28:40,380 --> 00:28:45,419
need name and we will need a Json B
657
00:28:45,419 --> 00:28:48,480
which is going to be state so that's
658
00:28:48,480 --> 00:28:50,580
going to be a Json column and it's going
659
00:28:50,580 --> 00:28:53,220
to contain States a couple of countries
660
00:28:53,220 --> 00:28:56,220
have States and we need to show States
661
00:28:56,220 --> 00:28:58,980
drop down as well when you choose a
662
00:28:58,980 --> 00:29:00,659
specific country for example United
663
00:29:00,659 --> 00:29:03,500
States so we're going to save that Json
664
00:29:03,500 --> 00:29:06,120
States information right here inside the
665
00:29:06,120 --> 00:29:07,380
states Json
666
00:29:07,380 --> 00:29:10,140
okay we have that let's open the next
667
00:29:10,140 --> 00:29:13,200
one which is card items table okay for
668
00:29:13,200 --> 00:29:15,539
cart items we don't need timestamps so
669
00:29:15,539 --> 00:29:17,640
I'm going to remove that we will need
670
00:29:17,640 --> 00:29:21,059
foreign ID for user with the user ID we
671
00:29:21,059 --> 00:29:24,779
will need foreign ID uh on product ID
672
00:29:24,779 --> 00:29:28,799
column it references ID on products
673
00:29:28,799 --> 00:29:30,779
table okay we have a foreign key on the
674
00:29:30,779 --> 00:29:31,740
products
675
00:29:31,740 --> 00:29:34,380
then we will need timestamp created it
676
00:29:34,380 --> 00:29:36,840
we actually don't need
677
00:29:36,840 --> 00:29:37,620
um
678
00:29:37,620 --> 00:29:40,799
updated it or we can actually add I
679
00:29:40,799 --> 00:29:43,080
think we decided to add we don't even
680
00:29:43,080 --> 00:29:44,940
though we don't have that in schema it
681
00:29:44,940 --> 00:29:47,940
will be good to have that so uh yeah
682
00:29:47,940 --> 00:29:51,240
that's it and we need uh quantity let me
683
00:29:51,240 --> 00:29:53,760
actually change this into
684
00:29:53,760 --> 00:29:58,380
time stamps so that we have both and I'm
685
00:29:58,380 --> 00:30:00,600
going to move this down okay and just
686
00:30:00,600 --> 00:30:03,059
like that we have cart items let's open
687
00:30:03,059 --> 00:30:05,700
the other one which is order details
688
00:30:05,700 --> 00:30:08,760
inside order details we need the first
689
00:30:08,760 --> 00:30:12,179
name last name phone which is nullable
690
00:30:12,179 --> 00:30:17,340
address 1 Idris 2 will need City we need
691
00:30:17,340 --> 00:30:18,659
state
692
00:30:18,659 --> 00:30:22,559
we need zip code and country code
693
00:30:22,559 --> 00:30:26,039
and that's basically all so we need all
694
00:30:26,039 --> 00:30:28,679
only those fields
695
00:30:28,679 --> 00:30:31,260
okay in the down basically in every
696
00:30:31,260 --> 00:30:33,960
migration down we already have drop if
697
00:30:33,960 --> 00:30:37,440
exists and it drops the table okay so we
698
00:30:37,440 --> 00:30:39,240
save that and let's open the next one
699
00:30:39,240 --> 00:30:42,960
which is order items table here we need
700
00:30:42,960 --> 00:30:46,620
uh order ID to be referenced to the
701
00:30:46,620 --> 00:30:48,240
orders table
702
00:30:48,240 --> 00:30:51,659
we need product ID to reference to
703
00:30:51,659 --> 00:30:53,460
products table
704
00:30:53,460 --> 00:30:56,760
we need quantity and we need the unit
705
00:30:56,760 --> 00:30:58,020
price
706
00:30:58,020 --> 00:31:01,080
and that's all for order items let's
707
00:31:01,080 --> 00:31:03,059
open the next one which is payments
708
00:31:03,059 --> 00:31:06,240
table or payments we will need the
709
00:31:06,240 --> 00:31:09,000
reference foreign key to orders table
710
00:31:09,000 --> 00:31:13,620
using order ID we need amount decimal we
711
00:31:13,620 --> 00:31:16,620
need status of the payment we need type
712
00:31:16,620 --> 00:31:18,600
of the payment whether the payment is
713
00:31:18,600 --> 00:31:22,559
made by cash or credit card we need a
714
00:31:22,559 --> 00:31:25,740
foreign key to create it by to the user
715
00:31:25,740 --> 00:31:29,039
table and update it by and we need to
716
00:31:29,039 --> 00:31:32,700
import that user model at the top okay I
717
00:31:32,700 --> 00:31:34,799
think we don't have the type of the
718
00:31:34,799 --> 00:31:37,440
payment in this schema now actually we
719
00:31:37,440 --> 00:31:40,980
do have that we do have okay so fine
720
00:31:40,980 --> 00:31:44,399
let's move on on the next one and which
721
00:31:44,399 --> 00:31:46,980
is customer stable for customers we will
722
00:31:46,980 --> 00:31:49,559
need first name last name we'll need
723
00:31:49,559 --> 00:31:53,580
phone we need status and we need created
724
00:31:53,580 --> 00:31:55,620
by an updated Buy
725
00:31:55,620 --> 00:31:58,799
okay and let's import the user model at
726
00:31:58,799 --> 00:32:01,260
the top here we have that so we have
727
00:32:01,260 --> 00:32:03,600
customers table migration ready as well
728
00:32:03,600 --> 00:32:06,360
and finally we need customer addresses
729
00:32:06,360 --> 00:32:09,360
here we will need type of the address
730
00:32:09,360 --> 00:32:12,120
whether that's a shipping address or
731
00:32:12,120 --> 00:32:14,700
billing address we need address 1
732
00:32:14,700 --> 00:32:19,080
address 2 we need CT we need state ZIP
733
00:32:19,080 --> 00:32:22,440
code country code and we need customer
734
00:32:22,440 --> 00:32:25,399
ID to which customer this address
735
00:32:25,399 --> 00:32:29,220
references to and we need country code
736
00:32:29,220 --> 00:32:32,539
to which country this address belongs to
737
00:32:32,539 --> 00:32:36,360
and yeah I think that's it so that's all
738
00:32:36,360 --> 00:32:39,179
what we need and we have our migrations
739
00:32:39,179 --> 00:32:43,380
actually ready now let's open Terminal
740
00:32:43,380 --> 00:32:45,299
let's clear up everything and I'm going
741
00:32:45,299 --> 00:32:48,960
to run PHP Artisan migrate this will
742
00:32:48,960 --> 00:32:52,620
apply just created migrations okay all
743
00:32:52,620 --> 00:32:54,600
of them we created successfully now
744
00:32:54,600 --> 00:32:58,380
let's open PHP my admin and reload the
745
00:32:58,380 --> 00:33:02,220
page and here we see all our tables what
746
00:33:02,220 --> 00:33:04,440
we just created
747
00:33:04,440 --> 00:33:07,679
awesome now let's open Terminal
748
00:33:07,679 --> 00:33:09,419
let's clear up everything and I'm going
749
00:33:09,419 --> 00:33:13,140
to run PHP Artisan migrate this will
750
00:33:13,140 --> 00:33:16,860
apply just created migrations okay all
751
00:33:16,860 --> 00:33:18,840
of them we created successfully now
752
00:33:18,840 --> 00:33:22,679
let's open PHP my admin and reload the
753
00:33:22,679 --> 00:33:26,460
page and here we see all our tables what
754
00:33:26,460 --> 00:33:28,679
we just created
755
00:33:28,679 --> 00:33:31,919
awesome now we need to create vue.js
756
00:33:31,919 --> 00:33:33,000
application
757
00:33:33,000 --> 00:33:36,059
for this make sure you have node.js and
758
00:33:36,059 --> 00:33:38,039
npm installed on your operating system
759
00:33:38,039 --> 00:33:40,559
if you don't have just download for
760
00:33:40,559 --> 00:33:43,399
Windows or for your operating system the
761
00:33:43,399 --> 00:33:46,559
latest version which is at this moment
762
00:33:46,559 --> 00:33:49,860
it is version 16 LTS just I'll always
763
00:33:49,860 --> 00:33:52,200
try to download LTS version which is
764
00:33:52,200 --> 00:33:53,880
long-term support
765
00:33:53,880 --> 00:33:57,120
okay and just download that install that
766
00:33:57,120 --> 00:34:00,299
and then you're gonna have npm command
767
00:34:00,299 --> 00:34:03,120
available in your terminal and in this
768
00:34:03,120 --> 00:34:06,799
case we're going to run npm create write
769
00:34:06,799 --> 00:34:09,599
and just to make sure that we have the
770
00:34:09,599 --> 00:34:13,679
latest version we can specify tag it
771
00:34:13,679 --> 00:34:17,099
latest I'm going to hit enter and it's
772
00:34:17,099 --> 00:34:19,199
going to take few seconds okay what's
773
00:34:19,199 --> 00:34:20,879
going to be the project name the project
774
00:34:20,879 --> 00:34:24,119
name will be backend I'm going to call
775
00:34:24,119 --> 00:34:27,418
this backend and which framework I want
776
00:34:27,418 --> 00:34:30,300
to choose I'm going to choose vue.js and
777
00:34:30,300 --> 00:34:32,159
whether I want to use view or just view
778
00:34:32,159 --> 00:34:34,020
in typescript I'm going to choose just
779
00:34:34,020 --> 00:34:37,500
view and just like that it is generated
780
00:34:37,500 --> 00:34:41,040
inside the backend folder okay right
781
00:34:41,040 --> 00:34:43,379
here The View application is generated
782
00:34:43,379 --> 00:34:46,679
now let's navigate inside backend and
783
00:34:46,679 --> 00:34:50,359
I'm going to run npm install
784
00:34:51,060 --> 00:34:54,540
and npm run Dev
785
00:34:54,540 --> 00:34:57,480
that's going to spin up the white server
786
00:34:57,480 --> 00:35:01,859
and now let's open a localhost port 3000
787
00:35:01,859 --> 00:35:05,099
in the browser and we see Hello view 3
788
00:35:05,099 --> 00:35:07,619
plus white and clicking on the counter
789
00:35:07,619 --> 00:35:09,540
actually works so we actually
790
00:35:09,540 --> 00:35:12,240
successfully created vue.js application
791
00:35:12,240 --> 00:35:15,599
now we need to install Talon CSS in our
792
00:35:15,599 --> 00:35:18,839
vue.js application make sure whenever we
793
00:35:18,839 --> 00:35:20,940
have to do anything inside the vue.js
794
00:35:20,940 --> 00:35:24,359
application make sure you are in the
795
00:35:24,359 --> 00:35:27,119
backend folder okay if you write any
796
00:35:27,119 --> 00:35:30,359
comments from the project root directory
797
00:35:30,359 --> 00:35:32,220
which is larval view e-commerce in my
798
00:35:32,220 --> 00:35:34,920
case it's not going to work for vue.js
799
00:35:34,920 --> 00:35:37,320
applications okay just make sure we are
800
00:35:37,320 --> 00:35:39,619
in the back end because we have to run
801
00:35:39,619 --> 00:35:42,119
commands for the vue.js application
802
00:35:42,119 --> 00:35:44,400
which is inside the backend in this case
803
00:35:44,400 --> 00:35:47,520
we have to install Talon CSS so let's
804
00:35:47,520 --> 00:35:49,320
open the browser and I'm going to just
805
00:35:49,320 --> 00:35:53,280
type talwind CSS White
806
00:35:53,280 --> 00:35:57,000
and the very first link will be guide we
807
00:35:57,000 --> 00:35:59,940
have to basically install Talon CSS post
808
00:35:59,940 --> 00:36:02,760
CSS and auto prefixer as a Dev
809
00:36:02,760 --> 00:36:06,000
dependencies that Dash d means that we
810
00:36:06,000 --> 00:36:07,920
want all of them as a Dev dependencies
811
00:36:07,920 --> 00:36:11,880
and then we have to run npx Talon CSS
812
00:36:11,880 --> 00:36:15,599
init Dash p so this will create talwin
813
00:36:15,599 --> 00:36:18,599
CSS config Dash p will create config for
814
00:36:18,599 --> 00:36:23,760
post CSS we can copy these two lines go
815
00:36:23,760 --> 00:36:25,920
inside the backend
816
00:36:25,920 --> 00:36:29,099
terminal terminal which is navigated
817
00:36:29,099 --> 00:36:31,380
inside the back end and we're going to
818
00:36:31,380 --> 00:36:33,420
paste this right here
819
00:36:33,420 --> 00:36:36,420
first npm install and then MPX download
820
00:36:36,420 --> 00:36:39,599
CSS init Dash p that's going to create
821
00:36:39,599 --> 00:36:41,640
config files
822
00:36:41,640 --> 00:36:44,760
right here we have post CSS config and
823
00:36:44,760 --> 00:36:47,760
talent config.js those two files were
824
00:36:47,760 --> 00:36:50,220
generated and the package.json was also
825
00:36:50,220 --> 00:36:52,440
updated down below we see auto perfect
826
00:36:52,440 --> 00:36:56,220
Surplus CSS and Talon CSS as added
827
00:36:56,220 --> 00:36:58,619
inside Dev dependencies
828
00:36:58,619 --> 00:37:01,560
all right so we have them now what do we
829
00:37:01,560 --> 00:37:04,380
need to do here we can find the full
830
00:37:04,380 --> 00:37:07,859
guide in the talid talent config.js we
831
00:37:07,859 --> 00:37:10,619
need to copy content open talent
832
00:37:10,619 --> 00:37:13,980
config.js and inside the content we need
833
00:37:13,980 --> 00:37:15,060
to
834
00:37:15,060 --> 00:37:18,119
oops we need to replace the content
835
00:37:18,119 --> 00:37:21,300
and down below we have to do the
836
00:37:21,300 --> 00:37:23,760
following things we need to create a
837
00:37:23,760 --> 00:37:26,880
source index CSS and copy and paste that
838
00:37:26,880 --> 00:37:29,400
right there let me actually collapse the
839
00:37:29,400 --> 00:37:30,420
terminal
840
00:37:30,420 --> 00:37:33,599
under Source I'm going to create Now new
841
00:37:33,599 --> 00:37:38,280
file called index.css
842
00:37:38,880 --> 00:37:42,119
and paste them right here and then we
843
00:37:42,119 --> 00:37:44,760
need to open main.js and we need to
844
00:37:44,760 --> 00:37:46,859
import that
845
00:37:46,859 --> 00:37:49,460
import
846
00:37:50,640 --> 00:37:52,740
index CSS
847
00:37:52,740 --> 00:37:56,040
okay and the CSS is actually running
848
00:37:56,040 --> 00:37:59,040
okay so we have created that imported
849
00:37:59,040 --> 00:38:02,339
that and then when we run npm run Dev
850
00:38:02,339 --> 00:38:05,579
the talent CSS will already work so
851
00:38:05,579 --> 00:38:08,160
let's bring up the terminal again clear
852
00:38:08,160 --> 00:38:11,660
up and run npm run Dev
853
00:38:11,660 --> 00:38:15,960
and let's open now up view or hello
854
00:38:15,960 --> 00:38:16,880
world
855
00:38:16,880 --> 00:38:20,339
and where's the template right here and
856
00:38:20,339 --> 00:38:23,220
let's actually give this one uh
857
00:38:23,220 --> 00:38:26,119
background purple
858
00:38:26,119 --> 00:38:27,780
500.
859
00:38:27,780 --> 00:38:30,300
so we save that and let's have a look in
860
00:38:30,300 --> 00:38:33,060
the browser here we see background
861
00:38:33,060 --> 00:38:35,820
purple 500 so that actually proves that
862
00:38:35,820 --> 00:38:39,060
Talon CSS is installed in our project
863
00:38:39,060 --> 00:38:42,000
now I want to install Vue X in our
864
00:38:42,000 --> 00:38:44,880
backend vue.js application so let's
865
00:38:44,880 --> 00:38:47,520
bring up the terminal make sure you are
866
00:38:47,520 --> 00:38:50,220
in the backend folder navigated into
867
00:38:50,220 --> 00:38:53,220
your terminal and we're going to run npm
868
00:38:53,220 --> 00:38:58,500
install S View X at next to install
869
00:38:58,500 --> 00:39:01,980
basically the latest version for vue.js
870
00:39:01,980 --> 00:39:04,680
I'm going to hit enter
871
00:39:04,680 --> 00:39:06,900
it's going to take a few seconds
872
00:39:06,900 --> 00:39:10,020
okay the view X is probably installed
873
00:39:10,020 --> 00:39:12,060
let's have a look right here we see
874
00:39:12,060 --> 00:39:15,839
viewix and now we need to create store
875
00:39:15,839 --> 00:39:18,119
and use that in our application
876
00:39:18,119 --> 00:39:20,820
in this Source folder let's collapse the
877
00:39:20,820 --> 00:39:22,680
terminal in the source folder I'm going
878
00:39:22,680 --> 00:39:25,800
to create a new folder called
879
00:39:25,800 --> 00:39:28,260
store and inside the store I'm going to
880
00:39:28,260 --> 00:39:32,339
create new file index and Js
881
00:39:32,339 --> 00:39:35,460
okay so from here I'm going to actually
882
00:39:35,460 --> 00:39:41,220
call const store equals create store I'm
883
00:39:41,220 --> 00:39:43,500
going to hit enter and now phpstorm
884
00:39:43,500 --> 00:39:46,260
automatically detects that there are
885
00:39:46,260 --> 00:39:48,359
create stores created in the following
886
00:39:48,359 --> 00:39:50,940
packages and if we want to import some
887
00:39:50,940 --> 00:39:52,920
of them I'm going to import the very
888
00:39:52,920 --> 00:39:55,440
first one create store okay hit enter
889
00:39:55,440 --> 00:39:58,320
and Page control automatically Imports
890
00:39:58,320 --> 00:40:00,060
that for me
891
00:40:00,060 --> 00:40:02,579
okay so we have create store and we have
892
00:40:02,579 --> 00:40:04,980
to specify right here object and we have
893
00:40:04,980 --> 00:40:08,060
to specify state
894
00:40:08,880 --> 00:40:11,720
which is an object we have Getters
895
00:40:11,720 --> 00:40:15,660
object actions
896
00:40:15,660 --> 00:40:18,680
and mutations
897
00:40:20,760 --> 00:40:25,740
okay and we have to export default store
898
00:40:25,740 --> 00:40:27,060
from here
899
00:40:27,060 --> 00:40:30,420
now let's open main.js and I'm going to
900
00:40:30,420 --> 00:40:34,640
import store from
901
00:40:34,700 --> 00:40:38,700
store and down below I have to create
902
00:40:38,700 --> 00:40:42,359
app we're going to run use store
903
00:40:42,359 --> 00:40:45,240
okay and just like that we created the
904
00:40:45,240 --> 00:40:48,300
store and we are using that store
905
00:40:48,300 --> 00:40:50,940
Let's test how store is actually used so
906
00:40:50,940 --> 00:40:54,060
let's go in the state and create test
907
00:40:54,060 --> 00:40:55,920
property which corresponds to one two
908
00:40:55,920 --> 00:40:57,119
three four
909
00:40:57,119 --> 00:41:01,079
now let's open hello world component
910
00:41:01,079 --> 00:41:03,599
and right here the hello world component
911
00:41:03,599 --> 00:41:07,020
actually uses composition API and here
912
00:41:07,020 --> 00:41:08,960
we need to import
913
00:41:08,960 --> 00:41:12,359
computed from View and then Define a
914
00:41:12,359 --> 00:41:16,859
property const test equals computed
915
00:41:16,859 --> 00:41:20,040
which accepts a callback and returns I'm
916
00:41:20,040 --> 00:41:23,240
going to import store from my store
917
00:41:23,240 --> 00:41:28,380
store dot state DOT test okay basically
918
00:41:28,380 --> 00:41:30,839
this test now will be available in the
919
00:41:30,839 --> 00:41:34,560
template and let's actually output test
920
00:41:34,560 --> 00:41:37,880
right here so we save that
921
00:41:37,880 --> 00:41:41,280
uh actually when we format the code it
922
00:41:41,280 --> 00:41:44,040
formats on four spaces and we have to
923
00:41:44,040 --> 00:41:47,760
adjust this as well but let's run npm
924
00:41:47,760 --> 00:41:49,280
run Dev
925
00:41:49,280 --> 00:41:53,460
and now open the browser
926
00:41:53,460 --> 00:41:55,560
and right here we see one two three four
927
00:41:55,560 --> 00:41:57,960
okay if we delete everything because we
928
00:41:57,960 --> 00:42:00,720
have to delete them in any case so we
929
00:42:00,720 --> 00:42:05,240
delete everything from the template
930
00:42:05,520 --> 00:42:07,859
oops
931
00:42:07,859 --> 00:42:09,720
now we have one two three four okay
932
00:42:09,720 --> 00:42:11,579
that's coming from the store if we open
933
00:42:11,579 --> 00:42:14,880
again store index.js and change this
934
00:42:14,880 --> 00:42:17,160
into five six seven we save that and
935
00:42:17,160 --> 00:42:19,859
have a look here it is okay our store
936
00:42:19,859 --> 00:42:22,260
was actually successfully used
937
00:42:22,260 --> 00:42:24,660
okay let's continue and now we need to
938
00:42:24,660 --> 00:42:27,900
install view rotor I'm going to just
939
00:42:27,900 --> 00:42:30,720
stop the server and then we're going to
940
00:42:30,720 --> 00:42:35,040
run AMPM install Dash uppercase s to add
941
00:42:35,040 --> 00:42:38,820
that in a dependencies view Rotor at
942
00:42:38,820 --> 00:42:40,380
next
943
00:42:40,380 --> 00:42:43,200
by specifying it next we're sure that
944
00:42:43,200 --> 00:42:45,119
we're going to get the latest version
945
00:42:45,119 --> 00:42:48,060
okay we hit enter okay this is actually
946
00:42:48,060 --> 00:42:52,760
done now we need to go in the
947
00:42:52,760 --> 00:42:55,740
source and we're going to create a right
948
00:42:55,740 --> 00:42:58,319
here folder rotor and inside there we're
949
00:42:58,319 --> 00:43:01,260
going to create index.js okay so let's
950
00:43:01,260 --> 00:43:05,460
create right here folder called router
951
00:43:05,460 --> 00:43:07,680
and then inside there I'm going to
952
00:43:07,680 --> 00:43:12,359
create new file called
953
00:43:12,359 --> 00:43:14,099
um index
954
00:43:14,099 --> 00:43:16,619
index.js
955
00:43:16,619 --> 00:43:20,099
okay so from that we're going to create
956
00:43:20,099 --> 00:43:23,280
a router and Export that okay let's
957
00:43:23,280 --> 00:43:28,859
write uh const rotor equals create
958
00:43:28,859 --> 00:43:32,579
rotor and when we hit enter page we're
959
00:43:32,579 --> 00:43:34,200
showing detects that there are the
960
00:43:34,200 --> 00:43:37,619
following create rotors existing and
961
00:43:37,619 --> 00:43:39,359
it's suggests me to import I'm going to
962
00:43:39,359 --> 00:43:41,280
import the first one and we're going to
963
00:43:41,280 --> 00:43:44,460
specify right here object we need to
964
00:43:44,460 --> 00:43:49,200
specify history to be create web history
965
00:43:49,200 --> 00:43:52,079
and that should be also imported from
966
00:43:52,079 --> 00:43:54,540
view router and we're going to specify
967
00:43:54,540 --> 00:43:57,359
right here Roots the roads doesn't exist
968
00:43:57,359 --> 00:44:01,440
yet so it's defined const roads equals
969
00:44:01,440 --> 00:44:05,040
an array for rows so we have rotor with
970
00:44:05,040 --> 00:44:07,500
create web history and roles as well
971
00:44:07,500 --> 00:44:09,619
this create web history by the way
972
00:44:09,619 --> 00:44:14,160
defines a history mode true so we will
973
00:44:14,160 --> 00:44:17,760
have always normal URLs and we won't
974
00:44:17,760 --> 00:44:20,520
have hashes like our users for example
975
00:44:20,520 --> 00:44:25,099
endpoint will be something like
976
00:44:25,099 --> 00:44:29,160
domain.com slash users not
977
00:44:29,160 --> 00:44:33,180
uh hashtag slash users okay so this is
978
00:44:33,180 --> 00:44:36,540
what create web history will do
979
00:44:36,540 --> 00:44:38,819
um okay and finally we need to export
980
00:44:38,819 --> 00:44:42,839
default uh router from here and we need
981
00:44:42,839 --> 00:44:46,200
to open main.js and import
982
00:44:46,200 --> 00:44:49,140
uh router from here
983
00:44:49,140 --> 00:44:51,720
and then just like we are using store we
984
00:44:51,720 --> 00:44:54,780
need to use rotor okay we already have
985
00:44:54,780 --> 00:44:57,839
rotor actually ready we can start our
986
00:44:57,839 --> 00:45:01,140
server npm run Dev now let's actually go
987
00:45:01,140 --> 00:45:03,780
in the rotor and create two routes I'm
988
00:45:03,780 --> 00:45:08,460
going to create one for uh dashboard
989
00:45:08,460 --> 00:45:10,560
I'm going to give it a name also
990
00:45:10,560 --> 00:45:14,220
dashboard and the component will be
991
00:45:14,220 --> 00:45:16,020
dashboard component this component
992
00:45:16,020 --> 00:45:17,940
doesn't exist yet and we're going to
993
00:45:17,940 --> 00:45:19,500
create that so I'm going to actually
994
00:45:19,500 --> 00:45:21,720
duplicate this and I'm going to call
995
00:45:21,720 --> 00:45:25,140
this one uh login
996
00:45:25,140 --> 00:45:27,960
and the component will be a login okay
997
00:45:27,960 --> 00:45:30,060
the login component will be also created
998
00:45:30,060 --> 00:45:33,180
now let's go in the source and we're
999
00:45:33,180 --> 00:45:35,400
going to create right here folder called
1000
00:45:35,400 --> 00:45:39,300
views and I'm going to create new vue.js
1001
00:45:39,300 --> 00:45:41,220
file right here
1002
00:45:41,220 --> 00:45:44,880
view component that's going to be login
1003
00:45:44,880 --> 00:45:47,040
okay so here we have I'm going to create
1004
00:45:47,040 --> 00:45:50,040
H1 login form
1005
00:45:50,040 --> 00:45:52,260
and then I'm going to duplicate the
1006
00:45:52,260 --> 00:45:56,280
login and create a dashboard View
1007
00:45:56,280 --> 00:45:57,900
hit enter
1008
00:45:57,900 --> 00:46:00,060
and the dashboard view of course needs
1009
00:46:00,060 --> 00:46:02,099
to have different text
1010
00:46:02,099 --> 00:46:05,099
dashboard now let's go in the router and
1011
00:46:05,099 --> 00:46:08,099
I'm going to import dashboard from views
1012
00:46:08,099 --> 00:46:11,700
dashboard okay make a few uh your ID ID
1013
00:46:11,700 --> 00:46:14,700
editor doesn't support Auto Import make
1014
00:46:14,700 --> 00:46:16,920
sure you write the following code here
1015
00:46:16,920 --> 00:46:19,740
and make sure you also specify extension
1016
00:46:19,740 --> 00:46:22,079
let me actually change this into login
1017
00:46:22,079 --> 00:46:25,079
and we have to specify extension right
1018
00:46:25,079 --> 00:46:29,040
here Dot View so we save that now let's
1019
00:46:29,040 --> 00:46:30,540
have a look in the browser I'm going to
1020
00:46:30,540 --> 00:46:31,859
refresh the page
1021
00:46:31,859 --> 00:46:36,240
and we don't see anything because if we
1022
00:46:36,240 --> 00:46:39,599
open up that view uh we still have right
1023
00:46:39,599 --> 00:46:41,579
here hello world with that image okay
1024
00:46:41,579 --> 00:46:43,859
let's delete everything we don't need
1025
00:46:43,859 --> 00:46:45,960
the hello world we don't need that image
1026
00:46:45,960 --> 00:46:49,440
in the template however we need rotor
1027
00:46:49,440 --> 00:46:51,900
view this is what we need and this will
1028
00:46:51,900 --> 00:46:54,180
be the place where our views will be
1029
00:46:54,180 --> 00:46:57,480
displayed and I'm gonna remove that from
1030
00:46:57,480 --> 00:46:59,400
setup as well and let's go in the
1031
00:46:59,400 --> 00:47:01,260
components and let's delete that hello
1032
00:47:01,260 --> 00:47:03,480
world so we save that now let's have a
1033
00:47:03,480 --> 00:47:05,700
look in the browser we have an error
1034
00:47:05,700 --> 00:47:07,619
Source components hello world
1035
00:47:07,619 --> 00:47:10,020
uh where's the component actually used
1036
00:47:10,020 --> 00:47:13,079
let's search inside the project hello
1037
00:47:13,079 --> 00:47:14,940
world
1038
00:47:14,940 --> 00:47:17,460
we don't see that project probably uh
1039
00:47:17,460 --> 00:47:19,920
patreon didn't understand that I deleted
1040
00:47:19,920 --> 00:47:23,520
and saved that now let's reload the page
1041
00:47:23,520 --> 00:47:26,160
and we see login form now let's go on
1042
00:47:26,160 --> 00:47:29,099
the dashboard and we see dashboard okay
1043
00:47:29,099 --> 00:47:31,740
that actually proves that our routing
1044
00:47:31,740 --> 00:47:34,140
successfully works now let's start
1045
00:47:34,140 --> 00:47:36,420
working on the login form I'm going to
1046
00:47:36,420 --> 00:47:39,660
open login.view let's open the browser
1047
00:47:39,660 --> 00:47:44,160
and I'm going to look for Halloween CSS
1048
00:47:44,160 --> 00:47:46,200
um actually let's search for tilewind
1049
00:47:46,200 --> 00:47:49,079
components
1050
00:47:49,079 --> 00:47:51,980
and open the very first link
1051
00:47:51,980 --> 00:47:55,140
uh no that's not actually what we are
1052
00:47:55,140 --> 00:47:58,579
looking for I want to look for talent UI
1053
00:47:58,579 --> 00:48:01,980
let's go under components and right here
1054
00:48:01,980 --> 00:48:03,960
uh talwind
1055
00:48:03,960 --> 00:48:06,119
um offers couple of free and paid
1056
00:48:06,119 --> 00:48:08,099
components I'm going to use three
1057
00:48:08,099 --> 00:48:10,319
components only and I'm looking for
1058
00:48:10,319 --> 00:48:14,819
signing and uh registration forms where
1059
00:48:14,819 --> 00:48:17,420
are those let's actually search for
1060
00:48:17,420 --> 00:48:21,060
registration here it is so let's click
1061
00:48:21,060 --> 00:48:24,599
on that and this is how our form logging
1062
00:48:24,599 --> 00:48:26,400
form should look like I'm going to
1063
00:48:26,400 --> 00:48:29,579
actually change this into view and the
1064
00:48:29,579 --> 00:48:31,560
Italian UI components basically suggests
1065
00:48:31,560 --> 00:48:35,280
only HTML uh react and vue.js version so
1066
00:48:35,280 --> 00:48:38,160
I'm going to go in the view and go in
1067
00:48:38,160 --> 00:48:40,200
the code and I'm going to copy the whole
1068
00:48:40,200 --> 00:48:43,680
code and that gives me hint as well that
1069
00:48:43,680 --> 00:48:47,940
I need to install Talent CSS forms and
1070
00:48:47,940 --> 00:48:50,160
it gives me the following hint that this
1071
00:48:50,160 --> 00:48:53,400
template requires updating your HTML and
1072
00:48:53,400 --> 00:48:56,819
body tags and this is the whole form and
1073
00:48:56,819 --> 00:49:00,720
it also uses hero icons and we have to
1074
00:49:00,720 --> 00:49:03,240
actually use install that package as
1075
00:49:03,240 --> 00:49:06,180
well and it has template and script okay
1076
00:49:06,180 --> 00:49:08,339
we have that copied now let's go and
1077
00:49:08,339 --> 00:49:11,160
replace template and script
1078
00:49:11,160 --> 00:49:13,500
however as I mentioned we have to
1079
00:49:13,500 --> 00:49:15,480
install a couple of packages like hero
1080
00:49:15,480 --> 00:49:16,740
icons
1081
00:49:16,740 --> 00:49:20,099
let's actually look for edit list UI
1082
00:49:20,099 --> 00:49:23,960
because that template basically
1083
00:49:23,960 --> 00:49:27,839
is using in this case it it uses hero
1084
00:49:27,839 --> 00:49:30,560
icons only but couple of templates
1085
00:49:30,560 --> 00:49:33,900
mentioned right here which requires
1086
00:49:33,900 --> 00:49:37,079
JavaScript functionality uses headless
1087
00:49:37,079 --> 00:49:39,420
UI in this case there is no JavaScript
1088
00:49:39,420 --> 00:49:41,099
necessary in this form everything is
1089
00:49:41,099 --> 00:49:43,619
only HTML and CSS but if we want to have
1090
00:49:43,619 --> 00:49:46,200
for example if we want to copy a drop
1091
00:49:46,200 --> 00:49:49,020
down the drop down requires JavaScript
1092
00:49:49,020 --> 00:49:51,960
and that uses headless UI so it's going
1093
00:49:51,960 --> 00:49:54,119
to be good if we need in the future that
1094
00:49:54,119 --> 00:49:55,280
JavaScript
1095
00:49:55,280 --> 00:49:58,920
JavaScript activated components we need
1096
00:49:58,920 --> 00:50:01,680
to have headless UI so let's click on
1097
00:50:01,680 --> 00:50:05,460
this headless UI and
1098
00:50:05,460 --> 00:50:07,920
here we as I mentioned here are all the
1099
00:50:07,920 --> 00:50:10,920
components which uses JavaScript and I
1100
00:50:10,920 --> 00:50:14,900
want to go on the installation section
1101
00:50:14,900 --> 00:50:18,540
let's go here's the documentation so npm
1102
00:50:18,540 --> 00:50:23,640
install headless UI for view latest and
1103
00:50:23,640 --> 00:50:27,839
we will need hero icons as well
1104
00:50:27,839 --> 00:50:30,599
so basically we need to install the
1105
00:50:30,599 --> 00:50:32,099
following packages let me actually open
1106
00:50:32,099 --> 00:50:34,140
page for sure so let's bring up the
1107
00:50:34,140 --> 00:50:37,200
terminal close that npm run Dev
1108
00:50:37,200 --> 00:50:39,540
and clear up everything and I'm going to
1109
00:50:39,540 --> 00:50:42,800
run npm install Dash
1110
00:50:42,800 --> 00:50:45,900
Dash D we need to install them as a Dev
1111
00:50:45,900 --> 00:50:48,480
dependencies
1112
00:50:48,480 --> 00:50:52,260
and let's specify a headless UI slash
1113
00:50:52,260 --> 00:50:53,760
View
1114
00:50:53,760 --> 00:50:56,640
we need to install headless UI actually
1115
00:50:56,640 --> 00:51:00,420
uh sorry a hero icons
1116
00:51:00,420 --> 00:51:04,260
um excuse me hero icons slash View and
1117
00:51:04,260 --> 00:51:07,700
we need a Tailwind CSS
1118
00:51:07,700 --> 00:51:10,079
slash forms
1119
00:51:10,079 --> 00:51:13,800
okay let's hit enter so this one is as I
1120
00:51:13,800 --> 00:51:16,619
mentioned a JavaScript that's a headless
1121
00:51:16,619 --> 00:51:18,180
UI which means that we have only
1122
00:51:18,180 --> 00:51:20,220
JavaScript we don't have user interface
1123
00:51:20,220 --> 00:51:23,339
and we are installing that vue.js ready
1124
00:51:23,339 --> 00:51:26,520
JavaScript components we have these hero
1125
00:51:26,520 --> 00:51:29,579
icons which are just for icons and we're
1126
00:51:29,579 --> 00:51:31,980
going to look for the hero icons from
1127
00:51:31,980 --> 00:51:35,460
here hero icons.com where we can get
1128
00:51:35,460 --> 00:51:37,339
that icons from here
1129
00:51:37,339 --> 00:51:41,400
and then we install that thousand CSS
1130
00:51:41,400 --> 00:51:44,480
forms which is required by that login
1131
00:51:44,480 --> 00:51:47,460
template okay so we install all of them
1132
00:51:47,460 --> 00:51:50,940
now let's run npm and run Dev and let's
1133
00:51:50,940 --> 00:51:53,400
check in the browser
1134
00:51:53,400 --> 00:51:56,520
let's go on the login page and this is
1135
00:51:56,520 --> 00:51:58,980
our form so we have the icon we have
1136
00:51:58,980 --> 00:52:01,740
nice inputs and
1137
00:52:01,740 --> 00:52:04,680
I don't think we have nice inputs I
1138
00:52:04,680 --> 00:52:07,800
think something is missing here uh we
1139
00:52:07,800 --> 00:52:11,040
need to open Italian config and we need
1140
00:52:11,040 --> 00:52:13,920
to add the Italian CSS forms plugin
1141
00:52:13,920 --> 00:52:16,559
right here so let me actually copy the
1142
00:52:16,559 --> 00:52:18,119
following
1143
00:52:18,119 --> 00:52:21,059
require and paste that right here we
1144
00:52:21,059 --> 00:52:23,579
when we format the code it formats that
1145
00:52:23,579 --> 00:52:25,800
and two spaces according to editor
1146
00:52:25,800 --> 00:52:27,780
config and now let's have a look in the
1147
00:52:27,780 --> 00:52:31,920
browser reload that and now we see the
1148
00:52:31,920 --> 00:52:35,160
actual input how it should look like
1149
00:52:35,160 --> 00:52:38,520
awesome so we actually
1150
00:52:38,520 --> 00:52:40,559
um have that do we need anything else
1151
00:52:40,559 --> 00:52:42,480
here so we have the login form let me
1152
00:52:42,480 --> 00:52:46,440
actually delete the uh comment let's
1153
00:52:46,440 --> 00:52:48,359
remove that yeah we need to add the
1154
00:52:48,359 --> 00:52:51,300
following classes on HTML and body so
1155
00:52:51,300 --> 00:52:54,359
let's open index.html oops
1156
00:52:54,359 --> 00:52:57,180
let's open index.html
1157
00:52:57,180 --> 00:53:01,579
and on the HTML tag let's add
1158
00:53:01,579 --> 00:53:08,960
H4 BG gray 50 and on body let's add h o
1159
00:53:09,180 --> 00:53:10,980
oops
1160
00:53:10,980 --> 00:53:13,559
okay we can have this always added on
1161
00:53:13,559 --> 00:53:16,559
all pages so let's hit the enter now the
1162
00:53:16,559 --> 00:53:19,500
background is slight gray and the form
1163
00:53:19,500 --> 00:53:22,079
is like four inputs are actually fully
1164
00:53:22,079 --> 00:53:24,000
white we can test this by setting this
1165
00:53:24,000 --> 00:53:27,619
on 300 for example
1166
00:53:28,200 --> 00:53:31,040
look at this but it's too much so let's
1167
00:53:31,040 --> 00:53:34,680
set this on 50. okay so we have our
1168
00:53:34,680 --> 00:53:37,559
login form ready we made small
1169
00:53:37,559 --> 00:53:39,839
modifications in the login form such as
1170
00:53:39,839 --> 00:53:43,680
removed logo and some texts and we also
1171
00:53:43,680 --> 00:53:45,960
created forward password and reset
1172
00:53:45,960 --> 00:53:48,300
password pages so whenever you click
1173
00:53:48,300 --> 00:53:49,680
this forward password it's going to show
1174
00:53:49,680 --> 00:53:51,660
The Following page you enter your email
1175
00:53:51,660 --> 00:53:54,000
address and hit the submit button at the
1176
00:53:54,000 --> 00:53:56,640
moment only front end is implemented and
1177
00:53:56,640 --> 00:53:58,380
this makes requests to the laravel in
1178
00:53:58,380 --> 00:54:00,240
the future and the laravel will send
1179
00:54:00,240 --> 00:54:02,760
email to that specific provided email
1180
00:54:02,760 --> 00:54:05,579
address and then when user clicks the
1181
00:54:05,579 --> 00:54:08,520
link in the email it should open a new
1182
00:54:08,520 --> 00:54:11,040
view which is going to be reset password
1183
00:54:11,040 --> 00:54:13,680
and this reset password link should
1184
00:54:13,680 --> 00:54:16,380
contain some secret token in the URL as
1185
00:54:16,380 --> 00:54:19,380
well okay whenever this is opened this
1186
00:54:19,380 --> 00:54:22,079
whenever we type basically whenever we
1187
00:54:22,079 --> 00:54:24,359
click the email the following URL will
1188
00:54:24,359 --> 00:54:26,220
be opened and that's going to be the
1189
00:54:26,220 --> 00:54:28,800
view and user will provide new password
1190
00:54:28,800 --> 00:54:31,260
and click the submit that the request
1191
00:54:31,260 --> 00:54:33,960
will go back to the laravel and it will
1192
00:54:33,960 --> 00:54:36,660
reset the password okay now let's start
1193
00:54:36,660 --> 00:54:39,359
working on the layouts If You observe
1194
00:54:39,359 --> 00:54:42,119
those three vue.js components for
1195
00:54:42,119 --> 00:54:44,099
request password reset password and
1196
00:54:44,099 --> 00:54:48,180
login template looks very similar to
1197
00:54:48,180 --> 00:54:50,099
each other actually we copied and pasted
1198
00:54:50,099 --> 00:54:52,680
from each other right so we have to
1199
00:54:52,680 --> 00:54:54,980
Define it's going to be good to Define
1200
00:54:54,980 --> 00:54:58,619
layout for auth for guest users
1201
00:54:58,619 --> 00:55:01,200
basically and we can move certain
1202
00:55:01,200 --> 00:55:03,240
classes inside the layout and then we
1203
00:55:03,240 --> 00:55:05,880
can have only the main part inside the
1204
00:55:05,880 --> 00:55:08,099
components and of course we're going to
1205
00:55:08,099 --> 00:55:10,339
need to Define
1206
00:55:10,339 --> 00:55:12,900
primary layout as well which will be for
1207
00:55:12,900 --> 00:55:15,660
authenticated users so let's actually go
1208
00:55:15,660 --> 00:55:17,780
under Source
1209
00:55:17,780 --> 00:55:20,339
components and inside the components I'm
1210
00:55:20,339 --> 00:55:23,460
going to create a vue.js component and
1211
00:55:23,460 --> 00:55:24,960
I'm going to call this
1212
00:55:24,960 --> 00:55:26,880
out
1213
00:55:26,880 --> 00:55:30,300
um or maybe guest layout guest layout
1214
00:55:30,300 --> 00:55:35,040
hit enter on that okay we will need to
1215
00:55:35,040 --> 00:55:37,859
copy and paste certain things uh from
1216
00:55:37,859 --> 00:55:39,839
the login form so I'm going to paste
1217
00:55:39,839 --> 00:55:42,300
that and now let's identify what's going
1218
00:55:42,300 --> 00:55:43,680
to be the layout
1219
00:55:43,680 --> 00:55:47,339
the layout can be
1220
00:55:47,339 --> 00:55:51,020
basically and this one can be layout
1221
00:55:51,020 --> 00:55:55,020
this div can be also a layout but the
1222
00:55:55,020 --> 00:55:57,359
text is different so we can provide a
1223
00:55:57,359 --> 00:56:02,160
prop right here for that uh
1224
00:56:02,160 --> 00:56:04,319
text
1225
00:56:04,319 --> 00:56:07,079
and this form of course needs to come
1226
00:56:07,079 --> 00:56:11,160
from the form component itself
1227
00:56:11,160 --> 00:56:13,800
okay the only thing we need is text okay
1228
00:56:13,800 --> 00:56:16,500
let's do like this I'm going to actually
1229
00:56:16,500 --> 00:56:19,559
take this form and replace this into
1230
00:56:19,559 --> 00:56:22,140
slot that's where the default slot will
1231
00:56:22,140 --> 00:56:25,800
be outputted and right here I'm going to
1232
00:56:25,800 --> 00:56:27,720
Output title
1233
00:56:27,720 --> 00:56:31,140
that's going to be title property
1234
00:56:31,140 --> 00:56:34,380
okay so we have the layout out layout
1235
00:56:34,380 --> 00:56:36,540
let me think
1236
00:56:36,540 --> 00:56:37,380
um
1237
00:56:37,380 --> 00:56:40,440
we can have this in in two ways like we
1238
00:56:40,440 --> 00:56:42,180
can have this as a component normal
1239
00:56:42,180 --> 00:56:46,880
component or we can have this as a uh
1240
00:56:46,880 --> 00:56:51,300
nested rotor view component okay if we
1241
00:56:51,300 --> 00:56:52,680
have this as a guest layout normal
1242
00:56:52,680 --> 00:56:54,780
component that's actually fine we can go
1243
00:56:54,780 --> 00:56:57,780
in the logging and now I'm gonna let's
1244
00:56:57,780 --> 00:56:59,760
copy this text
1245
00:56:59,760 --> 00:57:03,480
and I'm gonna remove this portion
1246
00:57:03,480 --> 00:57:07,800
and just type right here guest layout
1247
00:57:07,800 --> 00:57:10,380
we have that I'm going to specify right
1248
00:57:10,380 --> 00:57:13,079
here title
1249
00:57:13,079 --> 00:57:17,460
title to be signing to your layouts
1250
00:57:17,460 --> 00:57:20,880
and down below this is for the guest
1251
00:57:20,880 --> 00:57:23,760
layout and the guest layout needs to be
1252
00:57:23,760 --> 00:57:26,940
actually imported so if we just start
1253
00:57:26,940 --> 00:57:31,559
typing uh in a pascal case like guest
1254
00:57:31,559 --> 00:57:34,140
layout and hit enter that's going to be
1255
00:57:34,140 --> 00:57:37,440
properly imported right here okay and we
1256
00:57:37,440 --> 00:57:39,900
can use this Pascal naming for
1257
00:57:39,900 --> 00:57:42,180
components as well however if we don't
1258
00:57:42,180 --> 00:57:44,579
have that imported and if we just start
1259
00:57:44,579 --> 00:57:48,359
typing normal dished version naming
1260
00:57:48,359 --> 00:57:51,240
well it sometimes is imported properly
1261
00:57:51,240 --> 00:57:53,520
sometimes it's not in this case I
1262
00:57:53,520 --> 00:57:55,500
actually prefer to have a pascal case
1263
00:57:55,500 --> 00:57:58,740
naming guest layout so I'm going to
1264
00:57:58,740 --> 00:58:01,380
write it like this and in this case if
1265
00:58:01,380 --> 00:58:04,380
we have a look in the login form
1266
00:58:04,380 --> 00:58:05,819
uh
1267
00:58:05,819 --> 00:58:07,859
where's that
1268
00:58:07,859 --> 00:58:11,160
components guest layout we need Dot View
1269
00:58:11,160 --> 00:58:15,300
always for view components so let's go
1270
00:58:15,300 --> 00:58:18,559
on the login page
1271
00:58:18,599 --> 00:58:20,880
okay we have the form we don't have the
1272
00:58:20,880 --> 00:58:23,160
title The only thing is didn't to go in
1273
00:58:23,160 --> 00:58:25,319
the guest layout and Define right here
1274
00:58:25,319 --> 00:58:27,319
title prop
1275
00:58:27,319 --> 00:58:30,859
for this I'm going to use view threes
1276
00:58:30,859 --> 00:58:35,040
built-in function called Define define
1277
00:58:35,040 --> 00:58:36,420
props
1278
00:58:36,420 --> 00:58:39,780
and we have to specify well actually we
1279
00:58:39,780 --> 00:58:42,960
can assign this to a variable
1280
00:58:42,960 --> 00:58:47,900
const props equals Define props
1281
00:58:47,900 --> 00:58:51,660
what's the problem sorry my bad I'm
1282
00:58:51,660 --> 00:58:54,000
writing this in the style we have to
1283
00:58:54,000 --> 00:58:55,619
change this I'm going to actually change
1284
00:58:55,619 --> 00:58:58,500
this into composition API because I
1285
00:58:58,500 --> 00:59:00,599
really like this approach and I'm going
1286
00:59:00,599 --> 00:59:04,260
to put right here setup
1287
00:59:04,260 --> 00:59:08,520
okay and then we can Define already the
1288
00:59:08,520 --> 00:59:11,040
probes we can destructure the probes and
1289
00:59:11,040 --> 00:59:14,280
get the title but in the object for
1290
00:59:14,280 --> 00:59:16,440
defined props we have to define the type
1291
00:59:16,440 --> 00:59:18,660
for the props I'm going to specify title
1292
00:59:18,660 --> 00:59:21,720
must be string okay and now we have the
1293
00:59:21,720 --> 00:59:25,079
title let's open the browser and reload
1294
00:59:25,079 --> 00:59:27,359
the page and now we see that sign into
1295
00:59:27,359 --> 00:59:30,359
your account that is the title given
1296
00:59:30,359 --> 00:59:34,319
from the login.view from from here
1297
00:59:34,319 --> 00:59:38,880
okay now we can copy that and paste that
1298
00:59:38,880 --> 00:59:41,940
into multiple places
1299
00:59:41,940 --> 00:59:44,579
uh let's actually think
1300
00:59:44,579 --> 00:59:47,099
if we can't even move this form inside
1301
00:59:47,099 --> 00:59:49,319
the layout
1302
00:59:49,319 --> 00:59:53,280
so we we cannot move
1303
00:59:53,280 --> 00:59:55,859
we cannot move anything except the form
1304
00:59:55,859 --> 00:59:57,720
inside the layout that's for sure
1305
00:59:57,720 --> 01:00:00,599
however the form actually can be moved
1306
01:00:00,599 --> 01:00:02,280
inside the layout
1307
01:00:02,280 --> 01:00:05,819
and we don't need action of course we
1308
01:00:05,819 --> 01:00:07,140
aren't going to actually submit that
1309
01:00:07,140 --> 01:00:09,299
form somewhere else instead we're going
1310
01:00:09,299 --> 01:00:12,960
to need a submit on submit
1311
01:00:12,960 --> 01:00:17,220
okay and that is something which can be
1312
01:00:17,220 --> 01:00:19,380
also triggered from the guest layout
1313
01:00:19,380 --> 01:00:21,059
okay I'm going to show you what I'm
1314
01:00:21,059 --> 01:00:23,579
thinking and maybe it doesn't work I
1315
01:00:23,579 --> 01:00:25,260
will think while I'm actually doing that
1316
01:00:25,260 --> 01:00:28,859
so we can take that form move into guest
1317
01:00:28,859 --> 01:00:31,980
layout and wrap the slot
1318
01:00:31,980 --> 01:00:34,500
with the form okay now we don't need
1319
01:00:34,500 --> 01:00:36,599
that form right here we have the inputs
1320
01:00:36,599 --> 01:00:39,119
everything right there if we just reload
1321
01:00:39,119 --> 01:00:41,099
the page we see everything if we inspect
1322
01:00:41,099 --> 01:00:42,440
the form
1323
01:00:42,440 --> 01:00:45,720
and just expand the div element we still
1324
01:00:45,720 --> 01:00:48,180
see form right here however inside that
1325
01:00:48,180 --> 01:00:51,299
login component we need to listen to the
1326
01:00:51,299 --> 01:00:52,619
form submission
1327
01:00:52,619 --> 01:00:55,619
whenever a form is submitted we need our
1328
01:00:55,619 --> 01:00:58,980
function to be called and let's call our
1329
01:00:58,980 --> 01:01:01,559
function let's create function function
1330
01:01:01,559 --> 01:01:04,500
uh submit or function login
1331
01:01:04,500 --> 01:01:06,299
and I'm going to actually write console
1332
01:01:06,299 --> 01:01:08,640
log statement right here login
1333
01:01:08,640 --> 01:01:11,700
okay and I don't have the form I don't
1334
01:01:11,700 --> 01:01:13,920
have the control to attach event
1335
01:01:13,920 --> 01:01:15,780
listener on that so I'm going to go in
1336
01:01:15,780 --> 01:01:20,220
the guest layout and for the form uh I'm
1337
01:01:20,220 --> 01:01:22,319
going to Let's actually remove the
1338
01:01:22,319 --> 01:01:25,980
action I'm going to add submit event
1339
01:01:25,980 --> 01:01:28,579
listener I'm going to prevent as well
1340
01:01:28,579 --> 01:01:32,220
and that's going to be login but I don't
1341
01:01:32,220 --> 01:01:34,200
have login right here so I'm going to
1342
01:01:34,200 --> 01:01:38,940
emit my event from here to the parent
1343
01:01:38,940 --> 01:01:41,640
and down below I'm going to Define
1344
01:01:41,640 --> 01:01:45,900
Amit const aim it equals Define emits
1345
01:01:45,900 --> 01:01:49,740
and we have to specify right here submit
1346
01:01:49,740 --> 01:01:53,220
okay we have to emit submit event from
1347
01:01:53,220 --> 01:01:55,859
here and whenever the form is actually
1348
01:01:55,859 --> 01:01:59,280
submitted I'm gonna call emit
1349
01:01:59,280 --> 01:02:02,700
with the submit event
1350
01:02:02,700 --> 01:02:04,859
okay that's how I can do that now if I
1351
01:02:04,859 --> 01:02:08,339
go in the login on the guest layout I
1352
01:02:08,339 --> 01:02:12,000
can add submit event listener which
1353
01:02:12,000 --> 01:02:14,280
we'll call login method
1354
01:02:14,280 --> 01:02:18,119
okay now let's actually open the form go
1355
01:02:18,119 --> 01:02:20,940
in the console and maybe hit enter from
1356
01:02:20,940 --> 01:02:23,579
inputs let's go in the info section and
1357
01:02:23,579 --> 01:02:25,799
we see login so when I hit enter inside
1358
01:02:25,799 --> 01:02:27,599
the input that actually triggers form
1359
01:02:27,599 --> 01:02:29,819
submission or whenever I click the
1360
01:02:29,819 --> 01:02:31,380
button that's going to trigger the form
1361
01:02:31,380 --> 01:02:33,839
submission as well okay this is the
1362
01:02:33,839 --> 01:02:35,940
approach I can actually do
1363
01:02:35,940 --> 01:02:38,579
I don't know if that's the better than
1364
01:02:38,579 --> 01:02:40,380
the other one I think the other one is
1365
01:02:40,380 --> 01:02:42,299
slightly better because the guest layout
1366
01:02:42,299 --> 01:02:45,000
is more generic the guest layout is just
1367
01:02:45,000 --> 01:02:48,780
for a showing user a guest layout it
1368
01:02:48,780 --> 01:02:51,000
should not have in my opinion form
1369
01:02:51,000 --> 01:02:53,760
information right there so form is not
1370
01:02:53,760 --> 01:02:55,920
necessary in the case layout so I'm
1371
01:02:55,920 --> 01:02:58,500
going to actually undo the changes just
1372
01:02:58,500 --> 01:03:00,359
so you already know how you can aim it
1373
01:03:00,359 --> 01:03:04,140
events from the S layout so I can undo
1374
01:03:04,140 --> 01:03:06,839
this change go in the login and I'm
1375
01:03:06,839 --> 01:03:11,579
going to undo this from here as well
1376
01:03:11,579 --> 01:03:13,980
so we have form and whenever we
1377
01:03:13,980 --> 01:03:15,900
Implement actually Implement login we
1378
01:03:15,900 --> 01:03:18,000
can attach submit right here and create
1379
01:03:18,000 --> 01:03:22,799
that login form again however now we
1380
01:03:22,799 --> 01:03:25,859
need to use that guest layout in
1381
01:03:25,859 --> 01:03:29,579
password a request password so I'm going
1382
01:03:29,579 --> 01:03:33,119
to actually put this right here specify
1383
01:03:33,119 --> 01:03:35,839
the title
1384
01:03:36,119 --> 01:03:38,940
that's going to be the title let's
1385
01:03:38,940 --> 01:03:42,119
finish the guest layout and let's delete
1386
01:03:42,119 --> 01:03:45,059
everything above and below let's format
1387
01:03:45,059 --> 01:03:47,339
the code however we need that guest
1388
01:03:47,339 --> 01:03:50,040
layout to be imported okay just like we
1389
01:03:50,040 --> 01:03:52,380
have right here we can write that import
1390
01:03:52,380 --> 01:03:55,500
manually or I'm going to actually delete
1391
01:03:55,500 --> 01:03:58,440
one letter in PHP storm and hit the
1392
01:03:58,440 --> 01:04:01,200
control space and phpstorm auto
1393
01:04:01,200 --> 01:04:04,319
completes that for me however the last T
1394
01:04:04,319 --> 01:04:07,859
right here is missing and it also
1395
01:04:07,859 --> 01:04:10,020
um this autocompletes and imports that
1396
01:04:10,020 --> 01:04:12,359
guest layout for me as well but the
1397
01:04:12,359 --> 01:04:14,160
extension is missing
1398
01:04:14,160 --> 01:04:16,740
okay we have that now let's go in the
1399
01:04:16,740 --> 01:04:20,040
reset password and let's actually put
1400
01:04:20,040 --> 01:04:23,099
right here guest layout that was Auto
1401
01:04:23,099 --> 01:04:26,880
imported we specify title the title will
1402
01:04:26,880 --> 01:04:30,059
be set new password
1403
01:04:30,059 --> 01:04:32,220
sorry quick pause if you enjoy this
1404
01:04:32,220 --> 01:04:34,079
tutorial why don't you pause the video
1405
01:04:34,079 --> 01:04:36,119
hit the like button and continue
1406
01:04:36,119 --> 01:04:38,579
watching please hit the Subscribe Button
1407
01:04:38,579 --> 01:04:41,220
as well if you are not subscribed
1408
01:04:41,220 --> 01:04:44,400
and let's wrap the form and I'm going to
1409
01:04:44,400 --> 01:04:46,260
delete everything before the guest
1410
01:04:46,260 --> 01:04:49,079
layout and after so we have a nice
1411
01:04:49,079 --> 01:04:52,020
correct and guest layout let's check all
1412
01:04:52,020 --> 01:04:54,780
three forms uh the extension right here
1413
01:04:54,780 --> 01:04:57,660
is missing so we save that this is our
1414
01:04:57,660 --> 01:05:00,660
login form forward to your password uh
1415
01:05:00,660 --> 01:05:02,880
remember your password and the last one
1416
01:05:02,880 --> 01:05:06,000
is reset password134 okay this is our
1417
01:05:06,000 --> 01:05:08,520
layout awesome so we have successfully
1418
01:05:08,520 --> 01:05:14,059
created the guest layout component
1419
01:05:14,760 --> 01:05:17,940
now let's understand the changes made in
1420
01:05:17,940 --> 01:05:21,240
this section we created up layout and
1421
01:05:21,240 --> 01:05:23,339
this is how our layout looks like we
1422
01:05:23,339 --> 01:05:26,760
have this header with this user profile
1423
01:05:26,760 --> 01:05:28,859
and Logo drop down and we have the
1424
01:05:28,859 --> 01:05:31,020
sidebar and we can navigate between the
1425
01:05:31,020 --> 01:05:33,359
products and dashboard dummy Pages at
1426
01:05:33,359 --> 01:05:36,420
the moment okay let's understand how how
1427
01:05:36,420 --> 01:05:39,299
these this layout was actually made so
1428
01:05:39,299 --> 01:05:42,180
for this first we updated the I updated
1429
01:05:42,180 --> 01:05:44,700
the rules file and right here we now
1430
01:05:44,700 --> 01:05:46,799
have a component app layout which has
1431
01:05:46,799 --> 01:05:50,119
inside meta that this layout requires
1432
01:05:50,119 --> 01:05:52,740
authorization so only authorized users
1433
01:05:52,740 --> 01:05:54,839
should be able to access that and all
1434
01:05:54,839 --> 01:05:57,359
the existing roads became the children
1435
01:05:57,359 --> 01:06:00,299
roles of the following Road and down
1436
01:06:00,299 --> 01:06:03,180
below also we configured on the rotor
1437
01:06:03,180 --> 01:06:05,520
that on before each basically whenever
1438
01:06:05,520 --> 01:06:09,240
we try to access to a page we check if
1439
01:06:09,240 --> 01:06:12,619
the page we want to try to access
1440
01:06:12,619 --> 01:06:15,920
requires out Authentication and we check
1441
01:06:15,920 --> 01:06:19,319
and inside the store if the user doesn't
1442
01:06:19,319 --> 01:06:22,020
have the token we redirect user to the
1443
01:06:22,020 --> 01:06:24,780
login page okay if we open the store at
1444
01:06:24,780 --> 01:06:26,339
the moment we have the token to be one
1445
01:06:26,339 --> 01:06:29,220
two three four if I remove these and set
1446
01:06:29,220 --> 01:06:31,799
this into null for example and I save
1447
01:06:31,799 --> 01:06:34,920
and open the browser we see that I'm now
1448
01:06:34,920 --> 01:06:37,380
on the login page okay let's understand
1449
01:06:37,380 --> 01:06:40,200
this router once again and down below we
1450
01:06:40,200 --> 01:06:42,680
have this else if statement and if the
1451
01:06:42,680 --> 01:06:45,480
URL we want to basically navigate to
1452
01:06:45,480 --> 01:06:48,059
requires guest user and the token
1453
01:06:48,059 --> 01:06:50,940
already exists we redirect user to the
1454
01:06:50,940 --> 01:06:52,740
dashboard page so basically if we have a
1455
01:06:52,740 --> 01:06:54,119
look in the browser we are on the login
1456
01:06:54,119 --> 01:06:57,539
page but if we just open the store index
1457
01:06:57,539 --> 01:06:59,039
and I'm going to set this one two three
1458
01:06:59,039 --> 01:07:01,380
four right here save that now if I open
1459
01:07:01,380 --> 01:07:03,359
the browser I'm on a dashboard page so
1460
01:07:03,359 --> 01:07:05,460
basically white server automatically
1461
01:07:05,460 --> 01:07:07,680
reloads the page and the view rotor
1462
01:07:07,680 --> 01:07:10,020
detects that I have a token and I need
1463
01:07:10,020 --> 01:07:12,180
to go to the dashboard page okay these
1464
01:07:12,180 --> 01:07:14,099
changes have been made and this is the
1465
01:07:14,099 --> 01:07:16,260
app you know layout inside which we have
1466
01:07:16,260 --> 01:07:18,780
a sidebar component we have this nav bar
1467
01:07:18,780 --> 01:07:21,960
inside which we have the next to the nav
1468
01:07:21,960 --> 01:07:24,240
bar we have this main with the rotor
1469
01:07:24,240 --> 01:07:26,579
view inside and this is how our number
1470
01:07:26,579 --> 01:07:30,000
looks like and this is the sidebar we
1471
01:07:30,000 --> 01:07:32,760
also created not found page so basically
1472
01:07:32,760 --> 01:07:35,400
if we try to access a url non-existing
1473
01:07:35,400 --> 01:07:38,099
url something we see not found page and
1474
01:07:38,099 --> 01:07:40,799
this is done through the router so right
1475
01:07:40,799 --> 01:07:43,260
here we have configured basically if the
1476
01:07:43,260 --> 01:07:46,799
path matches one of the following paths
1477
01:07:46,799 --> 01:07:49,380
mentioned above then it will of course
1478
01:07:49,380 --> 01:07:51,539
render the corresponding components but
1479
01:07:51,539 --> 01:07:54,299
if the path doesn't match then this
1480
01:07:54,299 --> 01:07:56,339
component will be rendered not found and
1481
01:07:56,339 --> 01:07:59,280
this is our new note found page that was
1482
01:07:59,280 --> 01:08:03,440
all that has been made in this section
1483
01:08:04,200 --> 01:08:06,900
now let's understand what changes we
1484
01:08:06,900 --> 01:08:09,660
made so far we have created immigration
1485
01:08:09,660 --> 01:08:12,539
and we added is admin column to the
1486
01:08:12,539 --> 01:08:15,299
users table so for admin interface we
1487
01:08:15,299 --> 01:08:17,698
want only those users to be able to log
1488
01:08:17,698 --> 01:08:21,299
in who has is admin flag to be true
1489
01:08:21,299 --> 01:08:24,719
I also created admin user Cedar and I
1490
01:08:24,719 --> 01:08:26,640
created one admin user with the
1491
01:08:26,640 --> 01:08:28,560
following email and with the following
1492
01:08:28,560 --> 01:08:30,960
password so now I should be able to log
1493
01:08:30,960 --> 01:08:33,179
in as soon as I implement the bacon side
1494
01:08:33,179 --> 01:08:36,479
I created alt controller which is for
1495
01:08:36,479 --> 01:08:39,238
logging in logout for the API so right
1496
01:08:39,238 --> 01:08:41,580
here we accept the user information we
1497
01:08:41,580 --> 01:08:44,279
validate that we try to login user if
1498
01:08:44,279 --> 01:08:46,500
the username or password is incorrect we
1499
01:08:46,500 --> 01:08:49,020
return with the proper message if the
1500
01:08:49,020 --> 01:08:51,238
user is not admin we also return with
1501
01:08:51,238 --> 01:08:53,219
the proper message otherwise we create a
1502
01:08:53,219 --> 01:08:55,439
token and return the token and we have
1503
01:08:55,439 --> 01:08:58,198
implemented logout as well and right
1504
01:08:58,198 --> 01:09:00,779
here we also have an endpoint to get the
1505
01:09:00,779 --> 01:09:02,520
current user information for this we
1506
01:09:02,520 --> 01:09:04,620
created user resource and we are just
1507
01:09:04,620 --> 01:09:07,738
returning ID name in email and we also
1508
01:09:07,738 --> 01:09:10,319
created admin middleware and this
1509
01:09:10,319 --> 01:09:13,439
middleware will restrict access only
1510
01:09:13,439 --> 01:09:16,319
will allow access only for admin users
1511
01:09:16,319 --> 01:09:19,080
okay so and we of course need to
1512
01:09:19,080 --> 01:09:21,960
register these middleware in the kernel
1513
01:09:21,960 --> 01:09:25,560
file so under the under the road
1514
01:09:25,560 --> 01:09:27,899
middleware we added this admin
1515
01:09:27,899 --> 01:09:30,600
middleware right here and of course we
1516
01:09:30,600 --> 01:09:33,000
modified the rules and we ate it right
1517
01:09:33,000 --> 01:09:35,279
here admin middleware and that's
1518
01:09:35,279 --> 01:09:36,960
basically all we did on the backhand
1519
01:09:36,960 --> 01:09:39,299
side on the front hand side of course we
1520
01:09:39,299 --> 01:09:41,399
implemented the actual login in the
1521
01:09:41,399 --> 01:09:44,880
login.view and we also created separate
1522
01:09:44,880 --> 01:09:49,140
files for actions for store actions and
1523
01:09:49,140 --> 01:09:50,880
for store mutations and we're going to
1524
01:09:50,880 --> 01:09:52,799
see that as well so right here in this
1525
01:09:52,799 --> 01:09:55,380
login view we listen let's scroll down
1526
01:09:55,380 --> 01:09:57,540
below we listen to the login button
1527
01:09:57,540 --> 01:09:59,760
click we set the loading indicator true
1528
01:09:59,760 --> 01:10:02,340
we call the action store action login
1529
01:10:02,340 --> 01:10:05,160
and inside the actions now we have get
1530
01:10:05,160 --> 01:10:07,739
current user information login and
1531
01:10:07,739 --> 01:10:10,260
logout actions which by itself calls the
1532
01:10:10,260 --> 01:10:12,900
mutations if we check mutations we see
1533
01:10:12,900 --> 01:10:15,600
we have set user and set token we take
1534
01:10:15,600 --> 01:10:17,940
the user information and save it in the
1535
01:10:17,940 --> 01:10:20,400
state we take the token information and
1536
01:10:20,400 --> 01:10:22,620
save that inside station storage as well
1537
01:10:22,620 --> 01:10:25,199
as inside the state and just like this
1538
01:10:25,199 --> 01:10:26,880
the user is basically authorized and
1539
01:10:26,880 --> 01:10:28,800
this is how we modified the store as
1540
01:10:28,800 --> 01:10:30,540
well so we created separate files for
1541
01:10:30,540 --> 01:10:33,659
actions and mutations and imported them
1542
01:10:33,659 --> 01:10:36,840
right here okay so now we have the full
1543
01:10:36,840 --> 01:10:40,620
flow of uh login and logout for the user
1544
01:10:40,620 --> 01:10:42,480
and we can even test this let's open the
1545
01:10:42,480 --> 01:10:45,480
browser and hit the login right here and
1546
01:10:45,480 --> 01:10:48,800
now we are authorized
1547
01:10:49,500 --> 01:10:52,199
in next section we created fully
1548
01:10:52,199 --> 01:10:55,080
functional products crud so let's have a
1549
01:10:55,080 --> 01:10:56,940
look in the user interface first we open
1550
01:10:56,940 --> 01:10:58,920
the table we have a nice animation we
1551
01:10:58,920 --> 01:11:01,320
have the products we have pagination as
1552
01:11:01,320 --> 01:11:03,239
well we have possibility of course to
1553
01:11:03,239 --> 01:11:05,100
add new products we have also
1554
01:11:05,100 --> 01:11:08,460
possibility to sort items by The Columns
1555
01:11:08,460 --> 01:11:10,800
mentioned right here by title or price
1556
01:11:10,800 --> 01:11:13,679
with ascending or descending and we also
1557
01:11:13,679 --> 01:11:16,380
have possibility to search products by
1558
01:11:16,380 --> 01:11:18,540
keyword okay all that has been
1559
01:11:18,540 --> 01:11:20,940
implemented in the following section and
1560
01:11:20,940 --> 01:11:23,940
let's not now see how those things have
1561
01:11:23,940 --> 01:11:26,280
been implemented okay let's start from
1562
01:11:26,280 --> 01:11:27,719
scratch we created the product
1563
01:11:27,719 --> 01:11:29,820
controller the product controller has
1564
01:11:29,820 --> 01:11:33,300
basic methods such as index which should
1565
01:11:33,300 --> 01:11:35,940
return all published all existing
1566
01:11:35,940 --> 01:11:38,100
products we have in the database we have
1567
01:11:38,100 --> 01:11:41,460
store method to to store the product
1568
01:11:41,460 --> 01:11:43,140
with the image I'm not going to go
1569
01:11:43,140 --> 01:11:45,840
through the old line right here then we
1570
01:11:45,840 --> 01:11:47,460
have the show method to get a single
1571
01:11:47,460 --> 01:11:49,980
single product we have update and delete
1572
01:11:49,980 --> 01:11:52,739
right here basically basic crowd methods
1573
01:11:52,739 --> 01:11:55,020
we have the product request as well for
1574
01:11:55,020 --> 01:11:57,000
a validation we have the product
1575
01:11:57,000 --> 01:12:00,060
resource and only those fields are what
1576
01:12:00,060 --> 01:12:01,739
is returned in the product resource and
1577
01:12:01,739 --> 01:12:03,420
we have product list Resource as well
1578
01:12:03,420 --> 01:12:05,940
one is used for the table second is used
1579
01:12:05,940 --> 01:12:08,340
for the form and we have products table
1580
01:12:08,340 --> 01:12:10,860
and right here in this table we created
1581
01:12:10,860 --> 01:12:14,219
the reusable table header cell component
1582
01:12:14,219 --> 01:12:17,159
as well which handles the some common
1583
01:12:17,159 --> 01:12:20,699
staff common logic such as sorting for
1584
01:12:20,699 --> 01:12:24,679
example and this is a standard UJS table
1585
01:12:24,679 --> 01:12:28,560
and we have installed also spotties
1586
01:12:28,560 --> 01:12:30,840
larval sluggable so whenever a new
1587
01:12:30,840 --> 01:12:32,880
product is added based on the product
1588
01:12:32,880 --> 01:12:35,340
title slag of this product is generated
1589
01:12:35,340 --> 01:12:38,400
and that slag will be used later and
1590
01:12:38,400 --> 01:12:41,340
inside the product PHP we configured the
1591
01:12:41,340 --> 01:12:44,520
model to use the title for slack
1592
01:12:44,520 --> 01:12:45,780
generation
1593
01:12:45,780 --> 01:12:48,600
okay so the next thing let's have a look
1594
01:12:48,600 --> 01:12:49,980
in the products view this is the general
1595
01:12:49,980 --> 01:12:52,199
component we have a button right here to
1596
01:12:52,199 --> 01:12:54,480
show the model and we have the products
1597
01:12:54,480 --> 01:12:57,239
table and product model nothing
1598
01:12:57,239 --> 01:12:59,760
um that like um
1599
01:12:59,760 --> 01:13:02,040
difficult okay and inside the product
1600
01:13:02,040 --> 01:13:04,199
model we of course listen to the button
1601
01:13:04,199 --> 01:13:06,960
click and make requests for update or
1602
01:13:06,960 --> 01:13:08,100
for
1603
01:13:08,100 --> 01:13:11,159
um for delete and we also added
1604
01:13:11,159 --> 01:13:14,520
animation using Talon CSS and we also
1605
01:13:14,520 --> 01:13:17,280
installed the Thailand CSS forms plugin
1606
01:13:17,280 --> 01:13:21,179
that's for the for the inputs okay
1607
01:13:21,179 --> 01:13:22,980
um I think we already have forms I think
1608
01:13:22,980 --> 01:13:25,620
we only added animation right here in
1609
01:13:25,620 --> 01:13:27,780
this and whenever we just reload the
1610
01:13:27,780 --> 01:13:29,880
page we see
1611
01:13:29,880 --> 01:13:33,540
a nice animation for each individual row
1612
01:13:33,540 --> 01:13:37,199
okay so it it looks like very simple but
1613
01:13:37,199 --> 01:13:39,300
actually like this dedicated section
1614
01:13:39,300 --> 01:13:41,280
this particular section I think has a
1615
01:13:41,280 --> 01:13:43,620
about two hours of
1616
01:13:43,620 --> 01:13:46,140
um of the full process how these
1617
01:13:46,140 --> 01:13:48,060
products cried is actually
1618
01:13:48,060 --> 01:13:50,040
fully built and if you're interested of
1619
01:13:50,040 --> 01:13:52,500
course to see this full process and
1620
01:13:52,500 --> 01:13:55,380
check the full course on my website the
1621
01:13:55,380 --> 01:13:58,400
code holique.com
1622
01:13:59,219 --> 01:14:02,159
in this section we have installed Talon
1623
01:14:02,159 --> 01:14:04,500
CSS eCommerce theme into laravel
1624
01:14:04,500 --> 01:14:07,080
application and outputted all the
1625
01:14:07,080 --> 01:14:09,000
products we have in the database and we
1626
01:14:09,000 --> 01:14:11,159
have also implemented the registration
1627
01:14:11,159 --> 01:14:14,219
page in the theme design the login page
1628
01:14:14,219 --> 01:14:17,219
as well as forward password page and the
1629
01:14:17,219 --> 01:14:19,980
password related Pages basically as a
1630
01:14:19,980 --> 01:14:22,500
theme the following themes used Talon
1631
01:14:22,500 --> 01:14:24,840
CSS eCommerce theme if you want to see
1632
01:14:24,840 --> 01:14:27,900
how I built these Talent CSS eCommerce
1633
01:14:27,900 --> 01:14:30,300
theme you can check my other videos it
1634
01:14:30,300 --> 01:14:32,760
is built in two videos first you're
1635
01:14:32,760 --> 01:14:34,679
gonna see several hours I think three
1636
01:14:34,679 --> 01:14:37,440
hours video how I built this using Talon
1637
01:14:37,440 --> 01:14:39,659
CSS and then you're gonna see additional
1638
01:14:39,659 --> 01:14:42,600
video how I edit alpine.js functionality
1639
01:14:42,600 --> 01:14:44,880
to that okay but if you don't want to
1640
01:14:44,880 --> 01:14:46,860
watch that no problem just hit the
1641
01:14:46,860 --> 01:14:49,560
download clone right here and grab the
1642
01:14:49,560 --> 01:14:51,780
source code you can get it is free and
1643
01:14:51,780 --> 01:14:53,640
you can use this and I'm going to
1644
01:14:53,640 --> 01:14:55,500
actually use this the following theme
1645
01:14:55,500 --> 01:14:57,719
okay so this is the theme we're going to
1646
01:14:57,719 --> 01:15:00,239
use but what we need to do so first we
1647
01:15:00,239 --> 01:15:02,760
installed laravel Breeze once you
1648
01:15:02,760 --> 01:15:04,320
install laravel breathe it's gonna
1649
01:15:04,320 --> 01:15:06,900
create the following controllers under
1650
01:15:06,900 --> 01:15:09,600
the HTTP controller's out folder it's
1651
01:15:09,600 --> 01:15:12,060
going to also generate views under the
1652
01:15:12,060 --> 01:15:15,060
resources folder and yeah we have
1653
01:15:15,060 --> 01:15:17,040
installed lateral Breeze and then we
1654
01:15:17,040 --> 01:15:19,860
integrated our Talon CSS e-commerce
1655
01:15:19,860 --> 01:15:22,980
theme and we have included our CSS files
1656
01:15:22,980 --> 01:15:26,040
as well as whenever we need basically we
1657
01:15:26,040 --> 01:15:29,219
open the theme and copy and paste HTML
1658
01:15:29,219 --> 01:15:32,400
files and just put them into views our
1659
01:15:32,400 --> 01:15:35,940
blade files and make them live integrate
1660
01:15:35,940 --> 01:15:38,219
with the laravel so if we go now in the
1661
01:15:38,219 --> 01:15:41,280
resources and Views and open product
1662
01:15:41,280 --> 01:15:44,159
index for example this is a template
1663
01:15:44,159 --> 01:15:47,219
which is available in the Talon CSS
1664
01:15:47,219 --> 01:15:48,659
e-commerce template we can actually have
1665
01:15:48,659 --> 01:15:51,540
a look under Source we have a couple of
1666
01:15:51,540 --> 01:15:54,420
HTML files and the index.html is what
1667
01:15:54,420 --> 01:15:56,100
basically outputs all the products
1668
01:15:56,100 --> 01:15:58,739
product HTML is for the product details
1669
01:15:58,739 --> 01:16:00,659
and so on so whenever we need to create
1670
01:16:00,659 --> 01:16:02,640
product Details page we're going to
1671
01:16:02,640 --> 01:16:05,400
basically open this product HTML grab
1672
01:16:05,400 --> 01:16:07,560
the following source code identify what
1673
01:16:07,560 --> 01:16:10,320
is layout what is not layout and what
1674
01:16:10,320 --> 01:16:12,420
needs to be part of the blade and just
1675
01:16:12,420 --> 01:16:14,580
like this we integrate in our project
1676
01:16:14,580 --> 01:16:17,580
okay so here we uh basically render
1677
01:16:17,580 --> 01:16:19,980
iterate over our products and render
1678
01:16:19,980 --> 01:16:22,440
them just it's a straightforward
1679
01:16:22,440 --> 01:16:25,980
operation let's open actually product
1680
01:16:25,980 --> 01:16:29,880
controller I have I think we have it I
1681
01:16:29,880 --> 01:16:32,880
have opened it somewhere okay if not
1682
01:16:32,880 --> 01:16:36,020
then I will go into
1683
01:16:36,020 --> 01:16:39,179
controllers in a controller so in the
1684
01:16:39,179 --> 01:16:41,340
index page we select all the products
1685
01:16:41,340 --> 01:16:44,400
and sort them by updated descending and
1686
01:16:44,400 --> 01:16:46,320
for the Simplicity I have a pagination
1687
01:16:46,320 --> 01:16:49,040
to five items and pass that to
1688
01:16:49,040 --> 01:16:51,300
product.index inside which as I
1689
01:16:51,300 --> 01:16:53,640
mentioned we iterate and render render
1690
01:16:53,640 --> 01:16:55,800
them okay that's for the products now
1691
01:16:55,800 --> 01:16:58,080
let's have a look in the
1692
01:16:58,080 --> 01:17:00,420
uh authentication so so basically we
1693
01:17:00,420 --> 01:17:03,420
modified all the existing views which is
1694
01:17:03,420 --> 01:17:07,320
offered by laravel Breeze okay let's
1695
01:17:07,320 --> 01:17:10,320
open now these views out and if we have
1696
01:17:10,320 --> 01:17:13,560
a look blade so this blade a login blade
1697
01:17:13,560 --> 01:17:16,080
PHP file basically contains the template
1698
01:17:16,080 --> 01:17:19,679
which is grabbed from our
1699
01:17:19,679 --> 01:17:23,340
template from the logging HTML okay so
1700
01:17:23,340 --> 01:17:25,199
we just took the HTML template as I
1701
01:17:25,199 --> 01:17:28,020
mentioned and make it active make it
1702
01:17:28,020 --> 01:17:31,560
integrated into into laravel and we also
1703
01:17:31,560 --> 01:17:33,960
implemented email sending so whenever
1704
01:17:33,960 --> 01:17:36,659
the user is authorized not authorized
1705
01:17:36,659 --> 01:17:39,420
but uh registered on the website he's
1706
01:17:39,420 --> 01:17:40,920
going to receive an email on
1707
01:17:40,920 --> 01:17:43,140
registration and user clicks of course
1708
01:17:43,140 --> 01:17:45,300
on the link and the user is activated
1709
01:17:45,300 --> 01:17:49,800
and this is done by adding if we go now
1710
01:17:49,800 --> 01:17:51,960
inside
1711
01:17:51,960 --> 01:17:53,540
up
1712
01:17:53,540 --> 01:17:57,239
models and open the user right here the
1713
01:17:57,239 --> 01:18:00,659
user model implements must verify email
1714
01:18:00,659 --> 01:18:04,380
okay and because of that basically uh
1715
01:18:04,380 --> 01:18:06,719
the user is not able to authorize into
1716
01:18:06,719 --> 01:18:08,760
the system if he doesn't confirm his
1717
01:18:08,760 --> 01:18:11,580
email address and if you open a webphp
1718
01:18:11,580 --> 01:18:13,980
right here we are using this verified
1719
01:18:13,980 --> 01:18:18,060
middleware which restricts the user from
1720
01:18:18,060 --> 01:18:19,800
accessing the dashboard if the user
1721
01:18:19,800 --> 01:18:22,860
doesn't verify his email address and we
1722
01:18:22,860 --> 01:18:25,860
created product product Details page
1723
01:18:25,860 --> 01:18:27,600
this is the product Details page we can
1724
01:18:27,600 --> 01:18:29,820
actually have a look right here click on
1725
01:18:29,820 --> 01:18:31,739
this and this is the product Details
1726
01:18:31,739 --> 01:18:34,260
page okay that is the changes that has
1727
01:18:34,260 --> 01:18:37,260
been made in this particular section and
1728
01:18:37,260 --> 01:18:39,480
now the most interesting thing the most
1729
01:18:39,480 --> 01:18:42,120
interesting task starts and that is
1730
01:18:42,120 --> 01:18:45,360
Implement adding the items into the cart
1731
01:18:45,360 --> 01:18:49,440
and this is just unedited version what
1732
01:18:49,440 --> 01:18:51,659
uh what is also included in this course
1733
01:18:51,659 --> 01:18:54,540
so I'm offering this right now it's a
1734
01:18:54,540 --> 01:18:57,659
like I think uh one and a half hour
1735
01:18:57,659 --> 01:18:59,880
one and a half hour section of the
1736
01:18:59,880 --> 01:19:02,940
entire course where we have these cart
1737
01:19:02,940 --> 01:19:04,800
management adding items into the cart
1738
01:19:04,800 --> 01:19:07,320
removing items from the cart having a
1739
01:19:07,320 --> 01:19:10,440
dedicated card page Etc so enjoy that
1740
01:19:10,440 --> 01:19:12,540
specific section now let's start working
1741
01:19:12,540 --> 01:19:15,300
on the cart management adding items into
1742
01:19:15,300 --> 01:19:17,659
the cart changing their quantities
1743
01:19:17,659 --> 01:19:21,060
removing items from the cart and we also
1744
01:19:21,060 --> 01:19:23,760
need to add one important feature
1745
01:19:23,760 --> 01:19:25,860
whenever you're a guest you can
1746
01:19:25,860 --> 01:19:28,620
basically add items into the cart but
1747
01:19:28,620 --> 01:19:32,760
after you log in or register your items
1748
01:19:32,760 --> 01:19:35,400
which are in the cart needs to get
1749
01:19:35,400 --> 01:19:38,159
Associated to it to your account so
1750
01:19:38,159 --> 01:19:40,260
before user is authorized we're going to
1751
01:19:40,260 --> 01:19:42,600
save the items into cookie
1752
01:19:42,600 --> 01:19:44,940
so that user can navigate between Pages
1753
01:19:44,940 --> 01:19:46,920
like close the browser come back later
1754
01:19:46,920 --> 01:19:49,560
and the cart items will still be in
1755
01:19:49,560 --> 01:19:52,620
cookies but if user decided to proceed
1756
01:19:52,620 --> 01:19:57,000
with the registration login and decided
1757
01:19:57,000 --> 01:19:59,280
to basically register and login and then
1758
01:19:59,280 --> 01:20:01,620
these items which are in the cart needs
1759
01:20:01,620 --> 01:20:04,260
to move into his account and in the
1760
01:20:04,260 --> 01:20:06,420
database we're going to have them of
1761
01:20:06,420 --> 01:20:09,179
course saved in the cart items table
1762
01:20:09,179 --> 01:20:11,460
okay so this is what we're gonna
1763
01:20:11,460 --> 01:20:14,219
actually do
1764
01:20:14,219 --> 01:20:16,920
we have to do a lot of things so let's
1765
01:20:16,920 --> 01:20:19,860
start step by step let's open our
1766
01:20:19,860 --> 01:20:23,820
project and I'm going to create
1767
01:20:23,820 --> 01:20:26,699
a couple of files like we will need
1768
01:20:26,699 --> 01:20:28,440
controller of course let's go in the
1769
01:20:28,440 --> 01:20:30,600
HTTP controllers and we have to create
1770
01:20:30,600 --> 01:20:33,420
card controller right here and also
1771
01:20:33,420 --> 01:20:36,300
create a helper let me actually create
1772
01:20:36,300 --> 01:20:38,880
this helper manually I'm going to first
1773
01:20:38,880 --> 01:20:42,840
create the helpers directory and inside
1774
01:20:42,840 --> 01:20:45,719
there I'm going to create a new PHP
1775
01:20:45,719 --> 01:20:48,600
class called cart so we're going to
1776
01:20:48,600 --> 01:20:50,699
create card helper
1777
01:20:50,699 --> 01:20:52,620
so far so good now let's create
1778
01:20:52,620 --> 01:20:57,600
controller PHP artisan make controller
1779
01:20:57,600 --> 01:21:01,320
and I'm going to create cart controller
1780
01:21:01,320 --> 01:21:03,780
okay the controller was created it's
1781
01:21:03,780 --> 01:21:05,699
going to be right here
1782
01:21:05,699 --> 01:21:09,260
and we will have to create also under
1783
01:21:09,260 --> 01:21:13,920
resources views I'm going to create a
1784
01:21:13,920 --> 01:21:15,659
cart folder and inside there I'm going
1785
01:21:15,659 --> 01:21:18,000
to create index view so let me just
1786
01:21:18,000 --> 01:21:22,920
create new file under cart folder
1787
01:21:22,920 --> 01:21:26,520
index blade PHP
1788
01:21:26,520 --> 01:21:28,980
okay here we have it
1789
01:21:28,980 --> 01:21:31,679
this index played PHP will use the
1790
01:21:31,679 --> 01:21:35,400
default layout so I'm gonna get this x
1791
01:21:35,400 --> 01:21:38,699
up layout and put this right here and
1792
01:21:38,699 --> 01:21:40,860
let's just print H1
1793
01:21:40,860 --> 01:21:44,760
my cart items
1794
01:21:44,760 --> 01:21:46,980
perfect and we're going to have right
1795
01:21:46,980 --> 01:21:50,219
here this one should extend
1796
01:21:50,219 --> 01:21:54,659
the controller extends
1797
01:21:56,780 --> 01:22:00,980
controller wears out to completion
1798
01:22:01,380 --> 01:22:04,620
this one extend the controller
1799
01:22:04,620 --> 01:22:07,380
up HTTP controllers controller and let's
1800
01:22:07,380 --> 01:22:10,679
create right here index function from
1801
01:22:10,679 --> 01:22:14,460
which we will simply return a view
1802
01:22:14,460 --> 01:22:16,860
index
1803
01:22:16,860 --> 01:22:19,800
now it should be cart index
1804
01:22:19,800 --> 01:22:20,880
okay
1805
01:22:20,880 --> 01:22:23,760
so we will need of course to update the
1806
01:22:23,760 --> 01:22:26,460
web files rules file and we're going to
1807
01:22:26,460 --> 01:22:28,199
do a lot of things basically but let's
1808
01:22:28,199 --> 01:22:30,060
start step by step and I'm going to
1809
01:22:30,060 --> 01:22:34,020
start with the card PHP
1810
01:22:34,020 --> 01:22:37,580
um where is that by the way
1811
01:22:37,739 --> 01:22:41,340
oops my bed my bed that is a helper
1812
01:22:41,340 --> 01:22:44,280
let's actually call this card helper no
1813
01:22:44,280 --> 01:22:47,280
let's leave it let's call this card and
1814
01:22:47,280 --> 01:22:49,679
I'm gonna uh remove this extends
1815
01:22:49,679 --> 01:22:52,440
controller because I mistakenly
1816
01:22:52,440 --> 01:22:56,040
tended helper I needed to do this in the
1817
01:22:56,040 --> 01:23:00,060
controller so let's open cart controller
1818
01:23:00,060 --> 01:23:03,960
here it is and we need this method right
1819
01:23:03,960 --> 01:23:05,219
here
1820
01:23:05,219 --> 01:23:07,920
okay but let's start from the helper as
1821
01:23:07,920 --> 01:23:09,659
I mentioned and we're going to create a
1822
01:23:09,659 --> 01:23:13,320
couple of methods right here
1823
01:23:13,320 --> 01:23:16,560
we will need five methods right here the
1824
01:23:16,560 --> 01:23:19,980
first is git card items account we're
1825
01:23:19,980 --> 01:23:21,840
going to display how many items we have
1826
01:23:21,840 --> 01:23:24,480
in the cart in the navigation in the
1827
01:23:24,480 --> 01:23:26,820
header navigation second method we will
1828
01:23:26,820 --> 01:23:29,460
need is get card items which will simply
1829
01:23:29,460 --> 01:23:32,760
return an array of cart items we have we
1830
01:23:32,760 --> 01:23:35,580
will need get cookie cart items which
1831
01:23:35,580 --> 01:23:37,800
will return the cart items we have in
1832
01:23:37,800 --> 01:23:40,560
the cookie okay the get cart items
1833
01:23:40,560 --> 01:23:42,960
basically will analyze we'll understand
1834
01:23:42,960 --> 01:23:44,820
if the user is authorized it's going to
1835
01:23:44,820 --> 01:23:46,500
return those cart items from the
1836
01:23:46,500 --> 01:23:48,840
database if not it's going to basically
1837
01:23:48,840 --> 01:23:51,600
call get cookie cart items down below
1838
01:23:51,600 --> 01:23:54,179
we're going to need a get count from
1839
01:23:54,179 --> 01:23:57,060
items which will accept the cart items
1840
01:23:57,060 --> 01:24:00,840
and return the count from there why do
1841
01:24:00,840 --> 01:24:04,080
we need this why can't we call like get
1842
01:24:04,080 --> 01:24:07,199
cart items or get cookie cart items and
1843
01:24:07,199 --> 01:24:09,000
then calculate how many items we have
1844
01:24:09,000 --> 01:24:11,520
right there so we will understand these
1845
01:24:11,520 --> 01:24:14,300
when we go in the controller because
1846
01:24:14,300 --> 01:24:17,640
whenever we update the counter in the
1847
01:24:17,640 --> 01:24:20,340
cookie this is not yet saved in the
1848
01:24:20,340 --> 01:24:22,679
cookie okay this will be saved after
1849
01:24:22,679 --> 01:24:25,260
response is sent to the browser so in
1850
01:24:25,260 --> 01:24:27,300
this case we will need to accept and
1851
01:24:27,300 --> 01:24:29,040
cookie items in the area and we're going
1852
01:24:29,040 --> 01:24:31,020
to use this in in the cart controller so
1853
01:24:31,020 --> 01:24:33,360
you will understand this okay and down
1854
01:24:33,360 --> 01:24:35,040
below we're going to need final method
1855
01:24:35,040 --> 01:24:37,860
which will be move cart items into DB
1856
01:24:37,860 --> 01:24:41,400
whenever user registers and logs in in
1857
01:24:41,400 --> 01:24:43,500
the system whenever user authorizes
1858
01:24:43,500 --> 01:24:45,659
basically we will need to take the cart
1859
01:24:45,659 --> 01:24:48,360
items which the user has in cookie and
1860
01:24:48,360 --> 01:24:51,600
move them into database okay so let's
1861
01:24:51,600 --> 01:24:54,179
start implementing these methods step by
1862
01:24:54,179 --> 01:24:55,380
step
1863
01:24:55,380 --> 01:24:56,219
foreign
1864
01:24:56,219 --> 01:25:00,060
so first we need to get the request from
1865
01:25:00,060 --> 01:25:02,880
the request we get the user data and we
1866
01:25:02,880 --> 01:25:04,920
need to check if the user is authorized
1867
01:25:04,920 --> 01:25:08,100
we need to call cart item we are
1868
01:25:08,100 --> 01:25:09,960
basically we're making query in the
1869
01:25:09,960 --> 01:25:12,179
database so this method is called get
1870
01:25:12,179 --> 01:25:15,480
cart items account so whenever user user
1871
01:25:15,480 --> 01:25:17,640
is authorized we query from the cart
1872
01:25:17,640 --> 01:25:21,620
item table and we sum all the quantities
1873
01:25:21,620 --> 01:25:25,140
for that user ID okay basically if the
1874
01:25:25,140 --> 01:25:27,480
user has two items in the cart the first
1875
01:25:27,480 --> 01:25:30,360
item has quantity two second item has
1876
01:25:30,360 --> 01:25:32,940
quantity three we sum all of them and we
1877
01:25:32,940 --> 01:25:35,580
say that user has five items in the cart
1878
01:25:35,580 --> 01:25:38,520
okay however if the user is not
1879
01:25:38,520 --> 01:25:41,699
authorized we call get card I get cookie
1880
01:25:41,699 --> 01:25:44,219
cart items and these cart items will be
1881
01:25:44,219 --> 01:25:47,699
simply an associative array and we call
1882
01:25:47,699 --> 01:25:51,360
array reduce on that okay and we pass
1883
01:25:51,360 --> 01:25:54,060
right there cart items and a callback
1884
01:25:54,060 --> 01:25:57,600
function and we basically sum the
1885
01:25:57,600 --> 01:26:00,420
quantities from those cart items which
1886
01:26:00,420 --> 01:26:02,460
are right here in this area okay and
1887
01:26:02,460 --> 01:26:04,500
this finally will give us the same
1888
01:26:04,500 --> 01:26:07,500
result five okay let's move down below
1889
01:26:07,500 --> 01:26:09,540
and implement the second method get cart
1890
01:26:09,540 --> 01:26:11,940
items so here we get the request as well
1891
01:26:11,940 --> 01:26:14,340
we get the user information and we check
1892
01:26:14,340 --> 01:26:16,620
if the user is authorized we query card
1893
01:26:16,620 --> 01:26:20,040
items all cart items basically for that
1894
01:26:20,040 --> 01:26:23,159
specific user and we call map so we
1895
01:26:23,159 --> 01:26:26,280
basically want to map eloquent model
1896
01:26:26,280 --> 01:26:30,179
into us into an associative array okay
1897
01:26:30,179 --> 01:26:33,800
why we need to do this because
1898
01:26:33,800 --> 01:26:36,780
we need to return the data in the same
1899
01:26:36,780 --> 01:26:39,440
format from this function and whenever
1900
01:26:39,440 --> 01:26:42,659
the user is not authorized and the data
1901
01:26:42,659 --> 01:26:45,120
is in the cookie there is an associative
1902
01:26:45,120 --> 01:26:48,239
array so basically right here We call we
1903
01:26:48,239 --> 01:26:50,880
give a callback function and return an
1904
01:26:50,880 --> 01:26:53,400
associative array where key is product
1905
01:26:53,400 --> 01:26:56,100
ID and and one key is product ID and
1906
01:26:56,100 --> 01:26:58,940
second is quantity okay so basically
1907
01:26:58,940 --> 01:27:01,860
this one this whole command will return
1908
01:27:01,860 --> 01:27:04,679
an array of associative arrays where
1909
01:27:04,679 --> 01:27:07,800
each element has product ID and quantity
1910
01:27:07,800 --> 01:27:10,380
whenever the user is not authorized we
1911
01:27:10,380 --> 01:27:14,340
simply call get cookie cart items and
1912
01:27:14,340 --> 01:27:18,060
inside the cookie we save items just
1913
01:27:18,060 --> 01:27:20,580
like this okay
1914
01:27:20,580 --> 01:27:23,280
so let's continue and inside get cookie
1915
01:27:23,280 --> 01:27:25,620
cart items we get the request and from
1916
01:27:25,620 --> 01:27:28,679
the request we call cookie with the key
1917
01:27:28,679 --> 01:27:31,800
card items if that doesn't exist we give
1918
01:27:31,800 --> 01:27:34,320
it a default a string which is an empty
1919
01:27:34,320 --> 01:27:36,600
array then we decode this as an
1920
01:27:36,600 --> 01:27:38,639
associative array and finally we return
1921
01:27:38,639 --> 01:27:42,000
that which will be an array down below
1922
01:27:42,000 --> 01:27:45,420
we have get count from items we accept
1923
01:27:45,420 --> 01:27:49,080
the items and call array reduce on that
1924
01:27:49,080 --> 01:27:52,260
okay so we pretty much do the same thing
1925
01:27:52,260 --> 01:27:55,739
as we did above right right right here
1926
01:27:55,739 --> 01:27:59,580
okay so we call array reduce we give it
1927
01:27:59,580 --> 01:28:02,219
a cart items we give it a function we
1928
01:28:02,219 --> 01:28:04,500
give it initial value and this one will
1929
01:28:04,500 --> 01:28:07,500
return the number of items in this card
1930
01:28:07,500 --> 01:28:10,320
items array and finally we have move
1931
01:28:10,320 --> 01:28:13,980
card items into DB we get the request we
1932
01:28:13,980 --> 01:28:16,139
get the cart items from cookie because
1933
01:28:16,139 --> 01:28:18,780
those items needs to be moved into the
1934
01:28:18,780 --> 01:28:20,520
database okay
1935
01:28:20,520 --> 01:28:23,040
we assume that whenever this method is
1936
01:28:23,040 --> 01:28:25,980
called the user is already authorized so
1937
01:28:25,980 --> 01:28:29,639
we get the request user ID make a query
1938
01:28:29,639 --> 01:28:32,639
in the card items and get all of them
1939
01:28:32,639 --> 01:28:36,239
and we index them by product ID okay
1940
01:28:36,239 --> 01:28:39,659
let's assume the following case that a
1941
01:28:39,659 --> 01:28:43,139
user has some items in the cookie and
1942
01:28:43,139 --> 01:28:46,620
some items into the cart
1943
01:28:46,620 --> 01:28:49,080
into the database okay let's say that
1944
01:28:49,080 --> 01:28:52,139
user has item one two and three let's
1945
01:28:52,139 --> 01:28:55,380
create a scratch file scratch text file
1946
01:28:55,380 --> 01:28:58,739
for example and let's say that inside a
1947
01:28:58,739 --> 01:28:59,820
cookie
1948
01:28:59,820 --> 01:29:04,440
user has items 1 2 and 3 with id12 and
1949
01:29:04,440 --> 01:29:09,239
3. however in the database in the DB
1950
01:29:09,239 --> 01:29:13,199
user has items one
1951
01:29:13,199 --> 01:29:14,760
and
1952
01:29:14,760 --> 01:29:17,760
three or or four let's do like this okay
1953
01:29:17,760 --> 01:29:20,760
so whenever user is authorized we need
1954
01:29:20,760 --> 01:29:22,860
to take those items which are in the
1955
01:29:22,860 --> 01:29:26,280
cookie and not in the database and move
1956
01:29:26,280 --> 01:29:28,980
them into database so basically after
1957
01:29:28,980 --> 01:29:31,860
the user is authorized in the database
1958
01:29:31,860 --> 01:29:34,940
we're gonna have one
1959
01:29:34,940 --> 01:29:39,719
two three and four okay this is what
1960
01:29:39,719 --> 01:29:41,880
we're gonna have and in this case we
1961
01:29:41,880 --> 01:29:45,719
basically don't care uh quantities so we
1962
01:29:45,719 --> 01:29:49,380
basically move uh those items into uh
1963
01:29:49,380 --> 01:29:52,560
the database but if the item is already
1964
01:29:52,560 --> 01:29:54,600
in the database we leave with the
1965
01:29:54,600 --> 01:29:57,179
quantity it was there let's say that the
1966
01:29:57,179 --> 01:29:59,760
first item in the database has quantity
1967
01:29:59,760 --> 01:30:02,900
two and the fourth item has quantity one
1968
01:30:02,900 --> 01:30:07,380
however in the cookie the first item has
1969
01:30:07,380 --> 01:30:11,040
quantity three okay and the second item
1970
01:30:11,040 --> 01:30:14,760
had quantity like one and the third item
1971
01:30:14,760 --> 01:30:17,760
hit quantity one as well
1972
01:30:17,760 --> 01:30:20,760
so in this case we aren't going to sum
1973
01:30:20,760 --> 01:30:23,100
up the quantities of the items from the
1974
01:30:23,100 --> 01:30:25,080
cookie and from the database we will
1975
01:30:25,080 --> 01:30:26,940
simply leave the quantity whatever was
1976
01:30:26,940 --> 01:30:28,380
in the database so finally we're going
1977
01:30:28,380 --> 01:30:31,260
to have the first item two second item
1978
01:30:31,260 --> 01:30:32,280
one
1979
01:30:32,280 --> 01:30:36,659
third item one and fourth item one okay
1980
01:30:36,659 --> 01:30:39,840
this will be the final result in the in
1981
01:30:39,840 --> 01:30:42,120
the database and that's what we are
1982
01:30:42,120 --> 01:30:44,880
going to do so we basically
1983
01:30:44,880 --> 01:30:47,340
um get select all cart items from the
1984
01:30:47,340 --> 01:30:49,860
database and index them by product ID so
1985
01:30:49,860 --> 01:30:50,940
finally we're going to have an
1986
01:30:50,940 --> 01:30:53,100
associative area of eloquent models
1987
01:30:53,100 --> 01:30:55,860
where key will be the product ID
1988
01:30:55,860 --> 01:30:58,679
so let's continue and we create an array
1989
01:30:58,679 --> 01:31:02,219
of new card items and we start iterating
1990
01:31:02,219 --> 01:31:05,760
over the card items from the cookie and
1991
01:31:05,760 --> 01:31:08,760
we check if the cart items from the
1992
01:31:08,760 --> 01:31:13,320
cookie exists inside the database okay
1993
01:31:13,320 --> 01:31:16,139
by this check we check if the cart items
1994
01:31:16,139 --> 01:31:18,000
from the cookie exists in the database
1995
01:31:18,000 --> 01:31:21,179
we continue we don't do anything if it
1996
01:31:21,179 --> 01:31:24,300
doesn't exist we push this new item
1997
01:31:24,300 --> 01:31:26,520
which is inside the cookie but not in
1998
01:31:26,520 --> 01:31:29,100
the database into new cart items array
1999
01:31:29,100 --> 01:31:32,219
and we give it a user ID product ID and
2000
01:31:32,219 --> 01:31:36,060
quantity okay and finally we check if
2001
01:31:36,060 --> 01:31:38,400
the new cart items is not an empty array
2002
01:31:38,400 --> 01:31:41,699
we call cart item insert which will
2003
01:31:41,699 --> 01:31:44,159
finally save those cart items in the
2004
01:31:44,159 --> 01:31:45,239
database
2005
01:31:45,239 --> 01:31:48,540
okay so we we have done
2006
01:31:48,540 --> 01:31:50,760
um writing those methods and the only
2007
01:31:50,760 --> 01:31:53,100
thing we need to do is to import the
2008
01:31:53,100 --> 01:31:55,199
cart item so let's move at the very top
2009
01:31:55,199 --> 01:31:59,699
and right import uh cart item model okay
2010
01:31:59,699 --> 01:32:01,980
so far so good
2011
01:32:01,980 --> 01:32:03,780
okay now let's move in the cart
2012
01:32:03,780 --> 01:32:05,760
controller and let me actually delete
2013
01:32:05,760 --> 01:32:08,159
this index and create all the methods we
2014
01:32:08,159 --> 01:32:10,380
need right here
2015
01:32:10,380 --> 01:32:13,560
we will need four methods right here the
2016
01:32:13,560 --> 01:32:15,600
first will be index which we already had
2017
01:32:15,600 --> 01:32:19,020
second is ADD whenever we are gonna add
2018
01:32:19,020 --> 01:32:21,120
item in the cart
2019
01:32:21,120 --> 01:32:23,639
then we're going to have remove and
2020
01:32:23,639 --> 01:32:26,280
we're going to have update quantity okay
2021
01:32:26,280 --> 01:32:28,800
which will simply change the quantity of
2022
01:32:28,800 --> 01:32:31,199
the item in the cart
2023
01:32:31,199 --> 01:32:33,659
let's start implementing these methods
2024
01:32:33,659 --> 01:32:36,060
step by step and let's start with the
2025
01:32:36,060 --> 01:32:39,420
index so first we're going to call get
2026
01:32:39,420 --> 01:32:42,000
cart items to get all the cart items we
2027
01:32:42,000 --> 01:32:44,699
have no matter if it is in the cookie or
2028
01:32:44,699 --> 01:32:46,679
if it is in the database and we have the
2029
01:32:46,679 --> 01:32:49,560
cart items array then on the these cart
2030
01:32:49,560 --> 01:32:52,080
items I'm going to call array helper
2031
01:32:52,080 --> 01:32:55,380
plug method on the product ID so I
2032
01:32:55,380 --> 01:32:57,239
basically want to get a single
2033
01:32:57,239 --> 01:33:00,480
dimensional array of product IDs in this
2034
01:33:00,480 --> 01:33:03,840
case the IDS simply will contain it's
2035
01:33:03,840 --> 01:33:06,600
going to be plain array with the IDS of
2036
01:33:06,600 --> 01:33:09,420
the products okay then I'm going to make
2037
01:33:09,420 --> 01:33:11,460
a query in the database to select
2038
01:33:11,460 --> 01:33:15,120
products by those IDs and these products
2039
01:33:15,120 --> 01:33:18,719
will be now eloquent models then on
2040
01:33:18,719 --> 01:33:20,880
these cart items
2041
01:33:20,880 --> 01:33:23,280
basically I'm gonna index those cart
2042
01:33:23,280 --> 01:33:25,199
items which were taken from the either
2043
01:33:25,199 --> 01:33:27,480
cookie or from the database I'm going to
2044
01:33:27,480 --> 01:33:30,000
index them by the product ID and all
2045
01:33:30,000 --> 01:33:32,159
these card items will be associative
2046
01:33:32,159 --> 01:33:34,739
area where key will be the product ID
2047
01:33:34,739 --> 01:33:36,600
and the value will be the cart item
2048
01:33:36,600 --> 01:33:38,760
itself then I'm going to create a
2049
01:33:38,760 --> 01:33:40,800
variable total I want to calculate what
2050
01:33:40,800 --> 01:33:42,260
is the total
2051
01:33:42,260 --> 01:33:46,800
sum of all the cart items we have in the
2052
01:33:46,800 --> 01:33:49,440
either cookie or in the database because
2053
01:33:49,440 --> 01:33:52,139
we want to display this total to the
2054
01:33:52,139 --> 01:33:54,840
user in the interface then I start
2055
01:33:54,840 --> 01:33:58,620
iterating over my products and
2056
01:33:58,620 --> 01:34:01,739
basically I'm gonna sum up the product
2057
01:34:01,739 --> 01:34:05,340
price Multiplied on the card items
2058
01:34:05,340 --> 01:34:08,760
quantity and save that in the total okay
2059
01:34:08,760 --> 01:34:10,620
you get the idea
2060
01:34:10,620 --> 01:34:12,120
in the products array we're going to
2061
01:34:12,120 --> 01:34:14,280
only have those items which we have in
2062
01:34:14,280 --> 01:34:16,800
the cart so we start iterating those
2063
01:34:16,800 --> 01:34:18,719
products and multiply the product price
2064
01:34:18,719 --> 01:34:21,840
into the quantity of the cart item and
2065
01:34:21,840 --> 01:34:23,639
we save that in the total and finally
2066
01:34:23,639 --> 01:34:25,199
we're going to have total which will
2067
01:34:25,199 --> 01:34:27,360
have the value and finally we're going
2068
01:34:27,360 --> 01:34:30,120
to return the cart index View and we're
2069
01:34:30,120 --> 01:34:32,600
going to pass right there cart items
2070
01:34:32,600 --> 01:34:36,000
products in total there's a second way
2071
01:34:36,000 --> 01:34:39,540
to display the total which can be done
2072
01:34:39,540 --> 01:34:42,679
using alpine.js okay let's see which one
2073
01:34:42,679 --> 01:34:46,620
we can go with like this is a one way to
2074
01:34:46,620 --> 01:34:48,840
do I'm going to show you a second way as
2075
01:34:48,840 --> 01:34:51,900
well to display the total
2076
01:34:51,900 --> 01:34:55,199
um by alpine.js okay so let's move on
2077
01:34:55,199 --> 01:34:58,139
and implement the admit add method so we
2078
01:34:58,139 --> 01:35:00,840
get the quantity from the request if the
2079
01:35:00,840 --> 01:35:02,520
quantity wasn't given we assume that the
2080
01:35:02,520 --> 01:35:04,620
default is one then we get the user
2081
01:35:04,620 --> 01:35:07,260
information and check if the user uh
2082
01:35:07,260 --> 01:35:11,760
does exist we're gonna uh select the
2083
01:35:11,760 --> 01:35:15,659
first cart item with the given
2084
01:35:15,659 --> 01:35:18,360
uh with a given product ID and the user
2085
01:35:18,360 --> 01:35:21,840
ID so basically assume that there
2086
01:35:21,840 --> 01:35:24,960
already is a cart item
2087
01:35:24,960 --> 01:35:28,320
uh with this product ID okay we need to
2088
01:35:28,320 --> 01:35:30,900
check if there exists this cart item
2089
01:35:30,900 --> 01:35:33,719
then we're going to update its quantity
2090
01:35:33,719 --> 01:35:35,699
okay and
2091
01:35:35,699 --> 01:35:38,880
um add the quantity which we what we
2092
01:35:38,880 --> 01:35:41,400
received in the request and then we're
2093
01:35:41,400 --> 01:35:43,620
going to call update on the cart item
2094
01:35:43,620 --> 01:35:46,260
however if the cart item doesn't exist
2095
01:35:46,260 --> 01:35:48,179
this means that user is adding this cart
2096
01:35:48,179 --> 01:35:51,840
item the very first time in his card and
2097
01:35:51,840 --> 01:35:53,340
we're going to create data as an
2098
01:35:53,340 --> 01:35:55,980
associative array give it a user ID give
2099
01:35:55,980 --> 01:35:58,980
it product ID and quantity and save that
2100
01:35:58,980 --> 01:36:01,139
in the cart items table in the database
2101
01:36:01,139 --> 01:36:02,340
okay
2102
01:36:02,340 --> 01:36:04,739
however we need to handle the case if
2103
01:36:04,739 --> 01:36:07,620
the user is not authorized so right here
2104
01:36:07,620 --> 01:36:11,100
we need an else statement uh but before
2105
01:36:11,100 --> 01:36:13,380
else we need to return okay whenever
2106
01:36:13,380 --> 01:36:15,540
users successfully added the item in the
2107
01:36:15,540 --> 01:36:17,760
cart and the user is authorized we're
2108
01:36:17,760 --> 01:36:20,040
going to return the associative array
2109
01:36:20,040 --> 01:36:23,159
where we will have only count key and
2110
01:36:23,159 --> 01:36:25,920
the count will be from the card to get
2111
01:36:25,920 --> 01:36:29,460
items count okay which will understand
2112
01:36:29,460 --> 01:36:31,260
basically if the user is authorized it's
2113
01:36:31,260 --> 01:36:33,060
going to get the items count from the
2114
01:36:33,060 --> 01:36:35,100
database again have a look right here
2115
01:36:35,100 --> 01:36:37,620
get cart items count basically the code
2116
01:36:37,620 --> 01:36:39,360
will come right here and return the
2117
01:36:39,360 --> 01:36:40,920
total count
2118
01:36:40,920 --> 01:36:44,100
okay so and we need these counts to
2119
01:36:44,100 --> 01:36:46,260
update the number of items in the header
2120
01:36:46,260 --> 01:36:47,219
navigation
2121
01:36:47,219 --> 01:36:49,920
okay now now let's handle the else case
2122
01:36:49,920 --> 01:36:52,860
in else case basically we read the items
2123
01:36:52,860 --> 01:36:57,060
from the cart we can even use right here
2124
01:36:57,060 --> 01:36:59,820
we can't even use the method get cookie
2125
01:36:59,820 --> 01:37:01,380
cart items okay it's going to basically
2126
01:37:01,380 --> 01:37:03,840
do the same thing we might replace it
2127
01:37:03,840 --> 01:37:07,980
later okay and then we we have products
2128
01:37:07,980 --> 01:37:10,560
found variable which is by default false
2129
01:37:10,560 --> 01:37:12,420
and you will understand why we need that
2130
01:37:12,420 --> 01:37:16,080
then we start iterating over card items
2131
01:37:16,080 --> 01:37:19,020
and I get the each individual item by
2132
01:37:19,020 --> 01:37:21,000
reference okay that's also important
2133
01:37:21,000 --> 01:37:21,960
thing
2134
01:37:21,960 --> 01:37:25,020
and I check if the item's product ID is
2135
01:37:25,020 --> 01:37:27,659
the same as the given product ID which
2136
01:37:27,659 --> 01:37:30,360
comes on the request so we have to
2137
01:37:30,360 --> 01:37:33,300
update we have to do an update in this
2138
01:37:33,300 --> 01:37:35,219
case item quantity and this is the case
2139
01:37:35,219 --> 01:37:38,100
where I need it by reference because I
2140
01:37:38,100 --> 01:37:41,699
update this item quantity and add the
2141
01:37:41,699 --> 01:37:43,199
given quantity which comes in the
2142
01:37:43,199 --> 01:37:46,380
request okay and I also set the product
2143
01:37:46,380 --> 01:37:49,800
found equals true and I break this Loop
2144
01:37:49,800 --> 01:37:52,560
because I updated the product quantity
2145
01:37:52,560 --> 01:37:54,600
in the cart and there's nothing to do
2146
01:37:54,600 --> 01:37:57,420
anymore in this Loop so I and I set the
2147
01:37:57,420 --> 01:38:00,360
product found equals true however down
2148
01:38:00,360 --> 01:38:02,159
below I check if the product was not
2149
01:38:02,159 --> 01:38:04,920
found if we checked all the cart items
2150
01:38:04,920 --> 01:38:07,500
with what we have and there was no
2151
01:38:07,500 --> 01:38:09,600
product with the given product ID it
2152
01:38:09,600 --> 01:38:11,820
means that we have to add additional
2153
01:38:11,820 --> 01:38:14,940
item into cart items so in this case
2154
01:38:14,940 --> 01:38:17,580
cart items we push a new item in the
2155
01:38:17,580 --> 01:38:19,560
cart items which will have user ID Now
2156
01:38:19,560 --> 01:38:23,219
product ID quantity and price and
2157
01:38:23,219 --> 01:38:26,520
finally we're gonna save those updated
2158
01:38:26,520 --> 01:38:29,159
cart items in the cookie and we're gonna
2159
01:38:29,159 --> 01:38:32,219
give it a duration expired date for one
2160
01:38:32,219 --> 01:38:35,159
month and we return
2161
01:38:35,159 --> 01:38:36,960
um the same type of response what we
2162
01:38:36,960 --> 01:38:40,560
return right here with get count from
2163
01:38:40,560 --> 01:38:43,560
items this is the method what we created
2164
01:38:43,560 --> 01:38:46,440
in the cart helper get count from items
2165
01:38:46,440 --> 01:38:50,280
we give it cart items and it basically
2166
01:38:50,280 --> 01:38:53,280
calculates and returns a number so this
2167
01:38:53,280 --> 01:38:55,920
we need because the new cart item If the
2168
01:38:55,920 --> 01:38:58,020
product wasn't found or if the product
2169
01:38:58,020 --> 01:39:00,360
was updated the change is basically made
2170
01:39:00,360 --> 01:39:02,580
in the cart items is not saved yet in
2171
01:39:02,580 --> 01:39:06,420
cookie so right here we queue cart items
2172
01:39:06,420 --> 01:39:08,699
to be saved in the cookie but it is not
2173
01:39:08,699 --> 01:39:11,460
yet saved okay and this method is what
2174
01:39:11,460 --> 01:39:13,139
we need in this case
2175
01:39:13,139 --> 01:39:15,480
okay let's move down below and we have
2176
01:39:15,480 --> 01:39:17,639
to implement remove
2177
01:39:17,639 --> 01:39:20,280
for remove we first get the user we
2178
01:39:20,280 --> 01:39:22,800
check if the user does exist then we
2179
01:39:22,800 --> 01:39:25,320
make a query in the database by user ID
2180
01:39:25,320 --> 01:39:27,600
and product ID we select the first cart
2181
01:39:27,600 --> 01:39:30,480
item we check if the cart item exists we
2182
01:39:30,480 --> 01:39:33,139
simply delete that and we will return
2183
01:39:33,139 --> 01:39:34,820
new
2184
01:39:34,820 --> 01:39:37,260
response with the updated account
2185
01:39:37,260 --> 01:39:40,020
because that card item was deleted we
2186
01:39:40,020 --> 01:39:42,659
need to send to the user what is the
2187
01:39:42,659 --> 01:39:45,540
current count okay we need to handle the
2188
01:39:45,540 --> 01:39:47,639
else case in this case we read the cart
2189
01:39:47,639 --> 01:39:50,460
items again from the cookie and again we
2190
01:39:50,460 --> 01:39:53,159
could use the method get cookie cart
2191
01:39:53,159 --> 01:39:56,340
items we might replace this later and we
2192
01:39:56,340 --> 01:39:58,620
start iterating over our cart items
2193
01:39:58,620 --> 01:40:01,080
again we get the item from the reference
2194
01:40:01,080 --> 01:40:03,239
not sure if we need bioreference right
2195
01:40:03,239 --> 01:40:06,179
here or not but we check if the item
2196
01:40:06,179 --> 01:40:07,920
product ID is the same as the given
2197
01:40:07,920 --> 01:40:11,340
product ID we call array splice which
2198
01:40:11,340 --> 01:40:14,280
works internally on this card items and
2199
01:40:14,280 --> 01:40:18,000
modifies it and on that position which
2200
01:40:18,000 --> 01:40:20,100
is the index in this case it's going to
2201
01:40:20,100 --> 01:40:22,980
remove one item so basically if our
2202
01:40:22,980 --> 01:40:24,719
product was the second item it's going
2203
01:40:24,719 --> 01:40:27,300
to remove the second idea item from the
2204
01:40:27,300 --> 01:40:28,920
cart items and finally we're going to
2205
01:40:28,920 --> 01:40:31,800
have cart items updated and down below
2206
01:40:31,800 --> 01:40:34,500
we're gonna again call Q uh on the
2207
01:40:34,500 --> 01:40:37,500
cookie and we set this duration give it
2208
01:40:37,500 --> 01:40:39,659
the expired date one month and we return
2209
01:40:39,659 --> 01:40:43,679
the new count again we call git count
2210
01:40:43,679 --> 01:40:47,400
from items given the updated cart items
2211
01:40:47,400 --> 01:40:49,800
array and let's implement the last
2212
01:40:49,800 --> 01:40:52,260
method which is update quantity so here
2213
01:40:52,260 --> 01:40:55,500
we get the quantity again we get the
2214
01:40:55,500 --> 01:40:57,540
user information again we check if the
2215
01:40:57,540 --> 01:41:00,360
user is authorized and if user user is
2216
01:41:00,360 --> 01:41:03,300
authorized we select the cart item by
2217
01:41:03,300 --> 01:41:05,520
user ID and product ID and we call
2218
01:41:05,520 --> 01:41:08,699
update immediately on that okay if that
2219
01:41:08,699 --> 01:41:11,820
exists it's going to call update on that
2220
01:41:11,820 --> 01:41:13,679
okay if it doesn't exist simply it's not
2221
01:41:13,679 --> 01:41:14,820
going to do anything
2222
01:41:14,820 --> 01:41:17,460
and down below we return a response with
2223
01:41:17,460 --> 01:41:19,679
the updated count in the else statement
2224
01:41:19,679 --> 01:41:22,199
we select the cart items from cookie we
2225
01:41:22,199 --> 01:41:24,659
start iterating over those card items
2226
01:41:24,659 --> 01:41:27,719
and we select we find the cart item with
2227
01:41:27,719 --> 01:41:32,040
the given a product ID and we set its
2228
01:41:32,040 --> 01:41:34,619
quantity okay update quantity basically
2229
01:41:34,619 --> 01:41:37,440
means that we need to set new quantity
2230
01:41:37,440 --> 01:41:40,860
for that okay we don't we we don't have
2231
01:41:40,860 --> 01:41:43,980
Plus in equal right here like we had
2232
01:41:43,980 --> 01:41:46,920
whenever we were adding item in the card
2233
01:41:46,920 --> 01:41:50,159
instead we set the given quantity okay
2234
01:41:50,159 --> 01:41:53,280
and we of course save this in the queue
2235
01:41:53,280 --> 01:41:55,080
with the expired date one month and we
2236
01:41:55,080 --> 01:41:59,100
return the response okay I think that's
2237
01:41:59,100 --> 01:42:02,460
it right here do I miss anything
2238
01:42:02,460 --> 01:42:05,100
now that's it right here and the only
2239
01:42:05,100 --> 01:42:08,040
thing we need to do is to import all
2240
01:42:08,040 --> 01:42:10,560
those classes like I'm going to hit alt
2241
01:42:10,560 --> 01:42:13,139
and enter to import the card helper
2242
01:42:13,139 --> 01:42:16,679
let's import the cart item let's import
2243
01:42:16,679 --> 01:42:21,000
the cookie HTTP or I think it's
2244
01:42:21,000 --> 01:42:25,139
illuminate support facades cookie and
2245
01:42:25,139 --> 01:42:28,020
what else do we have we have to import
2246
01:42:28,020 --> 01:42:29,580
the product
2247
01:42:29,580 --> 01:42:33,780
it's a app models product not API but
2248
01:42:33,780 --> 01:42:35,820
app models product
2249
01:42:35,820 --> 01:42:37,619
and
2250
01:42:37,619 --> 01:42:40,020
at the top I think we have to import
2251
01:42:40,020 --> 01:42:44,159
this array helper as well
2252
01:42:44,159 --> 01:42:46,440
okay I think we have imported all of
2253
01:42:46,440 --> 01:42:49,980
them and I think the controller is fully
2254
01:42:49,980 --> 01:42:52,199
ready
2255
01:42:52,199 --> 01:42:57,000
now let's open web PHP and configure our
2256
01:42:57,000 --> 01:42:59,760
roads okay what do we have right here we
2257
01:42:59,760 --> 01:43:02,219
have the index we have the product view
2258
01:43:02,219 --> 01:43:04,380
page and we have the dashboard which has
2259
01:43:04,380 --> 01:43:07,320
Alton verified not sure if we need this
2260
01:43:07,320 --> 01:43:08,239
dashboard
2261
01:43:08,239 --> 01:43:12,179
however we need this verified
2262
01:43:12,179 --> 01:43:16,920
and how we're gonna do this so basically
2263
01:43:16,920 --> 01:43:19,800
a guest user can add items into the cart
2264
01:43:19,800 --> 01:43:22,380
remove items into the cart or basically
2265
01:43:22,380 --> 01:43:25,199
guest user can do card management
2266
01:43:25,199 --> 01:43:28,199
and authorized user can also do card
2267
01:43:28,199 --> 01:43:30,659
management but if the user is authorized
2268
01:43:30,659 --> 01:43:32,659
and not verified
2269
01:43:32,659 --> 01:43:35,400
we basically need to force the user to
2270
01:43:35,400 --> 01:43:37,440
verify his email address and he won't be
2271
01:43:37,440 --> 01:43:40,679
able to do anything okay so let's do
2272
01:43:40,679 --> 01:43:43,260
like this I'm going to create
2273
01:43:43,260 --> 01:43:47,280
a new middleware so
2274
01:43:47,280 --> 01:43:48,719
root
2275
01:43:48,719 --> 01:43:50,540
uh
2276
01:43:50,540 --> 01:43:53,219
middleware while Auto completion doesn't
2277
01:43:53,219 --> 01:43:56,960
work in my page store
2278
01:43:57,420 --> 01:43:59,400
okay and I'm going to call this
2279
01:43:59,400 --> 01:44:01,020
middleware
2280
01:44:01,020 --> 01:44:05,520
um yeast or verified okay the user
2281
01:44:05,520 --> 01:44:07,560
either needs to be guessed or verified
2282
01:44:07,560 --> 01:44:11,280
okay and let's create
2283
01:44:11,280 --> 01:44:13,880
group
2284
01:44:15,300 --> 01:44:18,960
okay let me restart my Facebook store
2285
01:44:18,960 --> 01:44:22,020
I restarted my PHP storm I think now it
2286
01:44:22,020 --> 01:44:24,600
can how to complete my code so let's
2287
01:44:24,600 --> 01:44:27,420
just create a group right here we're
2288
01:44:27,420 --> 01:44:29,820
going to of course accept a function
2289
01:44:29,820 --> 01:44:32,219
right here and inside that group I'm
2290
01:44:32,219 --> 01:44:35,159
going to put basically all my code so
2291
01:44:35,159 --> 01:44:37,080
this needs to be moved right here I
2292
01:44:37,080 --> 01:44:38,820
think we can completely delete this
2293
01:44:38,820 --> 01:44:42,000
dashboard we don't need that however
2294
01:44:42,000 --> 01:44:44,639
we're going to create a couple of routes
2295
01:44:44,639 --> 01:44:47,940
for the cart and let's start first
2296
01:44:47,940 --> 01:44:51,179
making a group I'm going to first give
2297
01:44:51,179 --> 01:44:54,239
it a prefix so all my rules needs to
2298
01:44:54,239 --> 01:44:56,760
have a prefix card and I'm going to give
2299
01:44:56,760 --> 01:45:01,800
it also a prefix name like cart Dot and
2300
01:45:01,800 --> 01:45:04,980
then I'm going to create a group
2301
01:45:04,980 --> 01:45:06,619
right there
2302
01:45:06,619 --> 01:45:11,340
and then we're gonna have Road get or
2303
01:45:11,340 --> 01:45:16,619
slash we're gonna have a cart controller
2304
01:45:16,619 --> 01:45:21,179
uh index method and let's give this name
2305
01:45:21,179 --> 01:45:22,920
to be
2306
01:45:22,920 --> 01:45:27,119
index and let's duplicate these three
2307
01:45:27,119 --> 01:45:29,580
times we're gonna have
2308
01:45:29,580 --> 01:45:32,159
ID and we're going to pass right here
2309
01:45:32,159 --> 01:45:34,139
product
2310
01:45:34,139 --> 01:45:38,159
with slag and this cannot be this is
2311
01:45:38,159 --> 01:45:40,739
going to call add method and the name
2312
01:45:40,739 --> 01:45:44,280
will be Ed as well right here we need
2313
01:45:44,280 --> 01:45:45,900
remove
2314
01:45:45,900 --> 01:45:49,619
for product with slug
2315
01:45:49,619 --> 01:45:54,480
and we need remove right here and the
2316
01:45:54,480 --> 01:45:58,560
last one will be update quantity
2317
01:45:58,560 --> 01:46:00,719
of course we accept right here product
2318
01:46:00,719 --> 01:46:01,920
as well
2319
01:46:01,920 --> 01:46:04,679
and select by Slug and right here we
2320
01:46:04,679 --> 01:46:09,060
have the update quantity method and the
2321
01:46:09,060 --> 01:46:14,100
name should be update Dash quantity
2322
01:46:14,100 --> 01:46:17,460
okay so we have the rules ready
2323
01:46:17,460 --> 01:46:19,800
we have the index method inside which
2324
01:46:19,800 --> 01:46:22,560
we're going to render all the cart items
2325
01:46:22,560 --> 01:46:25,080
we have the add method we have the
2326
01:46:25,080 --> 01:46:28,260
remove and update now it should not be
2327
01:46:28,260 --> 01:46:30,659
updated quantity should be update
2328
01:46:30,659 --> 01:46:33,600
quantity let's actually change this into
2329
01:46:33,600 --> 01:46:36,659
use so instead of writing namespace
2330
01:46:36,659 --> 01:46:39,719
replace qualifier with an import and
2331
01:46:39,719 --> 01:46:41,880
we're going to have at the top import of
2332
01:46:41,880 --> 01:46:45,179
card controller okay now I think we have
2333
01:46:45,179 --> 01:46:47,280
to create this guest or verified
2334
01:46:47,280 --> 01:46:49,860
middleware and Implement that so I'm
2335
01:46:49,860 --> 01:46:51,480
going to create I'm going to open the
2336
01:46:51,480 --> 01:46:54,679
terminal and write PHP artisan
2337
01:46:54,679 --> 01:46:57,840
make middleware
2338
01:46:57,840 --> 01:47:02,340
and let's call this guest or verified
2339
01:47:02,340 --> 01:47:05,580
guest or verified hit the enter
2340
01:47:05,580 --> 01:47:08,880
okay let's open guest or verified
2341
01:47:08,880 --> 01:47:10,199
middleware
2342
01:47:10,199 --> 01:47:13,679
and basically this uh middleware is very
2343
01:47:13,679 --> 01:47:17,760
familiar to email verified middleware so
2344
01:47:17,760 --> 01:47:21,600
I'm going to extend this from email
2345
01:47:21,600 --> 01:47:23,100
um
2346
01:47:23,100 --> 01:47:26,219
ensure email is verified that's the
2347
01:47:26,219 --> 01:47:28,260
correct name ensure email is verified
2348
01:47:28,260 --> 01:47:31,679
middleware and I think right here this
2349
01:47:31,679 --> 01:47:34,920
has a additional argument redirect to
2350
01:47:34,920 --> 01:47:38,159
root so we have to add this additional
2351
01:47:38,159 --> 01:47:39,440
argument
2352
01:47:39,440 --> 01:47:42,420
uh or no we don't need this is optional
2353
01:47:42,420 --> 01:47:44,400
basically uh we just need to remove
2354
01:47:44,400 --> 01:47:46,619
requests from here
2355
01:47:46,619 --> 01:47:48,960
okay
2356
01:47:48,960 --> 01:47:52,139
and we basically need to take this as an
2357
01:47:52,139 --> 01:47:54,600
optional as well so we get this optional
2358
01:47:54,600 --> 01:47:57,119
argument and
2359
01:47:57,119 --> 01:48:00,960
we need to check so if the user if the
2360
01:48:00,960 --> 01:48:05,040
request user does not exist
2361
01:48:05,040 --> 01:48:08,280
okay the user is guest basically and in
2362
01:48:08,280 --> 01:48:11,520
this case we allow users to proceed and
2363
01:48:11,520 --> 01:48:15,540
open the page so we call next otherwise
2364
01:48:15,540 --> 01:48:18,540
we call Parent
2365
01:48:18,540 --> 01:48:21,300
handle and the parent handle is the
2366
01:48:21,300 --> 01:48:25,199
ensure emails verified handle so we pass
2367
01:48:25,199 --> 01:48:28,020
request we pass next and we pass
2368
01:48:28,020 --> 01:48:32,100
redirect to root okay and we have to
2369
01:48:32,100 --> 01:48:34,380
register this middleware so let's open
2370
01:48:34,380 --> 01:48:38,760
open kernel PHP and let's duplicate this
2371
01:48:38,760 --> 01:48:42,600
line and let's call this guest or very
2372
01:48:42,600 --> 01:48:44,360
fight
2373
01:48:44,360 --> 01:48:47,639
and the middleware name should be guest
2374
01:48:47,639 --> 01:48:50,300
or verified
2375
01:48:50,460 --> 01:48:53,699
okay and comma so we have created
2376
01:48:53,699 --> 01:48:56,460
middleware we have added in the root
2377
01:48:56,460 --> 01:48:59,639
middleware so it should be properly used
2378
01:48:59,639 --> 01:49:03,719
now and I think the root file is all
2379
01:49:03,719 --> 01:49:06,600
also ready and maybe we need to go now
2380
01:49:06,600 --> 01:49:08,400
to the front end and Implement
2381
01:49:08,400 --> 01:49:11,000
JavaScript
2382
01:49:11,639 --> 01:49:14,880
so let's open up Js
2383
01:49:14,880 --> 01:49:18,119
and have a look what do we have right
2384
01:49:18,119 --> 01:49:20,940
here we have the toast data
2385
01:49:20,940 --> 01:49:24,179
we have the header related data I think
2386
01:49:24,179 --> 01:49:25,980
we don't need the header so we can
2387
01:49:25,980 --> 01:49:28,320
completely remove this we have the
2388
01:49:28,320 --> 01:49:30,000
product item
2389
01:49:30,000 --> 01:49:32,460
uh watch list I think we are not going
2390
01:49:32,460 --> 01:49:34,080
to implement watch list so I'm going to
2391
01:49:34,080 --> 01:49:38,219
remove all watch list related methods
2392
01:49:38,219 --> 01:49:40,500
I think we don't need the quantity here
2393
01:49:40,500 --> 01:49:43,380
as well we don't need the ID because
2394
01:49:43,380 --> 01:49:46,139
uh we can use we're going to use slug
2395
01:49:46,139 --> 01:49:49,320
okay to make requests we don't we don't
2396
01:49:49,320 --> 01:49:51,600
actually need the ID so we need a two
2397
01:49:51,600 --> 01:49:53,880
cart which
2398
01:49:53,880 --> 01:49:56,580
uh we can clear up because we're going
2399
01:49:56,580 --> 01:49:58,139
to implement from scratch and make
2400
01:49:58,139 --> 01:50:01,679
requests to the backend and remove from
2401
01:50:01,679 --> 01:50:05,159
watch list this can be actually changed
2402
01:50:05,159 --> 01:50:09,119
and one additional method we need is
2403
01:50:09,119 --> 01:50:12,300
um change quantity so let's create this
2404
01:50:12,300 --> 01:50:15,540
change quantity
2405
01:50:15,540 --> 01:50:19,560
and we have to implement all of that so
2406
01:50:19,560 --> 01:50:21,659
quantity
2407
01:50:21,659 --> 01:50:25,440
okay I think this looks good even even
2408
01:50:25,440 --> 01:50:27,840
ID is not necessary right here so we
2409
01:50:27,840 --> 01:50:30,840
have the method stops ready what is this
2410
01:50:30,840 --> 01:50:32,940
this is a sign up form which we don't
2411
01:50:32,940 --> 01:50:36,360
need that comes from the Alpine Jes
2412
01:50:36,360 --> 01:50:39,540
Talon CSS template so we have the toast
2413
01:50:39,540 --> 01:50:42,239
which we need we need to display a
2414
01:50:42,239 --> 01:50:45,600
successful message whenever user adds
2415
01:50:45,600 --> 01:50:48,719
something into the cart and yeah I think
2416
01:50:48,719 --> 01:50:50,940
we can already Implement these methods
2417
01:50:50,940 --> 01:50:53,400
but before that I'm going to create a
2418
01:50:53,400 --> 01:50:57,719
helper file inside the JS and I'm going
2419
01:50:57,719 --> 01:51:02,159
to call this HTTP Js
2420
01:51:02,159 --> 01:51:06,420
okay this will have this will have a few
2421
01:51:06,420 --> 01:51:08,760
methods like getting post methods we
2422
01:51:08,760 --> 01:51:10,139
aren't going to use any third-party
2423
01:51:10,139 --> 01:51:11,880
package I'm going to use axios in this
2424
01:51:11,880 --> 01:51:15,060
case I'm going to use a fetch API so I'm
2425
01:51:15,060 --> 01:51:17,219
going to create right here two three
2426
01:51:17,219 --> 01:51:20,760
helper methods for the fetch API
2427
01:51:20,760 --> 01:51:23,219
okay so let's create one function and
2428
01:51:23,219 --> 01:51:25,380
Export that function and call this
2429
01:51:25,380 --> 01:51:28,440
request this will accept the method URL
2430
01:51:28,440 --> 01:51:31,020
and some data and I'm going to create a
2431
01:51:31,020 --> 01:51:34,139
getmith get function and Export that and
2432
01:51:34,139 --> 01:51:36,480
post as well so git will accept only URL
2433
01:51:36,480 --> 01:51:39,179
and post will accept URL and data and
2434
01:51:39,179 --> 01:51:41,460
now we can Implement those methods
2435
01:51:41,460 --> 01:51:43,679
request get in post get in post
2436
01:51:43,679 --> 01:51:46,320
basically will call the request the main
2437
01:51:46,320 --> 01:51:50,219
thing right here is to implement request
2438
01:51:50,219 --> 01:51:52,560
so let's Implement gate impulse first
2439
01:51:52,560 --> 01:51:55,199
the they are very simple we're going to
2440
01:51:55,199 --> 01:51:58,020
call request past the method in the URL
2441
01:51:58,020 --> 01:52:00,540
for post we do the same thing however we
2442
01:52:00,540 --> 01:52:03,360
give additional data variable now let's
2443
01:52:03,360 --> 01:52:05,159
Implement request
2444
01:52:05,159 --> 01:52:08,159
first we're going to make a call of the
2445
01:52:08,159 --> 01:52:10,560
fetch method and pass it URL and we're
2446
01:52:10,560 --> 01:52:13,080
going to also give it a additional
2447
01:52:13,080 --> 01:52:16,619
object with the method in headers inside
2448
01:52:16,619 --> 01:52:19,080
headers we will need content type to be
2449
01:52:19,080 --> 01:52:21,420
application Json and accept Topic
2450
01:52:21,420 --> 01:52:23,880
application Json as well we will need
2451
01:52:23,880 --> 01:52:27,000
csrf token as well so we're going to
2452
01:52:27,000 --> 01:52:30,060
pass it ex csrf token to be document
2453
01:52:30,060 --> 01:52:34,020
head query selector and take these CSF
2454
01:52:34,020 --> 01:52:37,260
token from The Meta text and take its
2455
01:52:37,260 --> 01:52:40,380
content and give it right here without
2456
01:52:40,380 --> 01:52:42,480
that basically whenever we make post
2457
01:52:42,480 --> 01:52:45,900
requests we are it's not gonna work okay
2458
01:52:45,900 --> 01:52:49,739
we will get an error and right here if
2459
01:52:49,739 --> 01:52:51,480
if you just want to change this into
2460
01:52:51,480 --> 01:52:55,320
application X www.form URL encoded you
2461
01:52:55,320 --> 01:52:57,900
can easily do it okay
2462
01:52:57,900 --> 01:53:00,300
we need to pass an additional uh
2463
01:53:00,300 --> 01:53:02,940
property called body whenever the method
2464
01:53:02,940 --> 01:53:05,520
is post whenever the method is not get
2465
01:53:05,520 --> 01:53:08,460
basically and right here we check if the
2466
01:53:08,460 --> 01:53:10,980
method is guessed we take the empty
2467
01:53:10,980 --> 01:53:13,800
object and the structure it and the
2468
01:53:13,800 --> 01:53:15,600
structuring will not do obviously on
2469
01:53:15,600 --> 01:53:18,119
empty object however if the method is
2470
01:53:18,119 --> 01:53:21,900
not get we take the body right here we
2471
01:53:21,900 --> 01:53:25,380
take the data a stringify that and give
2472
01:53:25,380 --> 01:53:28,020
it into the assign it into the body and
2473
01:53:28,020 --> 01:53:30,060
then with the structure that and just
2474
01:53:30,060 --> 01:53:33,420
like this we will be able to give the
2475
01:53:33,420 --> 01:53:37,080
data to the request then we need to give
2476
01:53:37,080 --> 01:53:39,060
it a because this one will return a
2477
01:53:39,060 --> 01:53:42,420
promise fetch we call then on that we
2478
01:53:42,420 --> 01:53:45,060
get the response and we check if the
2479
01:53:45,060 --> 01:53:49,320
response status is more than 200 and
2480
01:53:49,320 --> 01:53:52,260
it's less than 300 which means that the
2481
01:53:52,260 --> 01:53:55,980
response was successful okay we return
2482
01:53:55,980 --> 01:53:57,840
response.json
2483
01:53:57,840 --> 01:54:00,239
because on the fetch API you have to
2484
01:54:00,239 --> 01:54:01,159
call
2485
01:54:01,159 --> 01:54:04,520
then two times to get an actual result
2486
01:54:04,520 --> 01:54:07,500
returned from the server okay so we call
2487
01:54:07,500 --> 01:54:09,300
then one time
2488
01:54:09,300 --> 01:54:10,760
then we return
2489
01:54:10,760 --> 01:54:13,860
response.json this one will still return
2490
01:54:13,860 --> 01:54:16,380
a promise and whenever we want to get
2491
01:54:16,380 --> 01:54:19,080
the actual result of this request we
2492
01:54:19,080 --> 01:54:22,260
have to do an additional then on that
2493
01:54:22,260 --> 01:54:25,020
okay which will be done later in the
2494
01:54:25,020 --> 01:54:28,920
app.js probably okay so if for some
2495
01:54:28,920 --> 01:54:30,840
reason uh the response was not
2496
01:54:30,840 --> 01:54:34,199
successful we throw the error whatever
2497
01:54:34,199 --> 01:54:36,659
we throw basically whatever comes from
2498
01:54:36,659 --> 01:54:39,119
the result right here because this one
2499
01:54:39,119 --> 01:54:43,080
returns also promise we await on that
2500
01:54:43,080 --> 01:54:45,300
extract the actual value from that
2501
01:54:45,300 --> 01:54:48,540
promise and throw that value okay so I
2502
01:54:48,540 --> 01:54:50,400
think we have everything ready right
2503
01:54:50,400 --> 01:54:54,000
here and we can now go in to app.js and
2504
01:54:54,000 --> 01:54:56,760
Implement these methods
2505
01:54:56,760 --> 01:54:59,580
in the add to cart method we make a post
2506
01:54:59,580 --> 01:55:02,760
request to the given URL what is this
2507
01:55:02,760 --> 01:55:06,119
URL so this Edge to cart URL doesn't
2508
01:55:06,119 --> 01:55:09,080
exist yet and we're gonna create that
2509
01:55:09,080 --> 01:55:12,119
we're going to generate that URL using
2510
01:55:12,119 --> 01:55:16,320
root laravel's root function we can have
2511
01:55:16,320 --> 01:55:19,320
hard-coded URL right here slash cart
2512
01:55:19,320 --> 01:55:23,219
slash Ed and specify maybe a slug but
2513
01:55:23,219 --> 01:55:25,139
this is not a good approach we want the
2514
01:55:25,139 --> 01:55:27,179
URLs to be generated on the larval side
2515
01:55:27,179 --> 01:55:29,520
so we're going to do that there and we
2516
01:55:29,520 --> 01:55:31,679
simply take that URL which will have a
2517
01:55:31,679 --> 01:55:33,659
string right there and make a post
2518
01:55:33,659 --> 01:55:36,659
request on that okay and we of course
2519
01:55:36,659 --> 01:55:39,500
need I need to pass the quantity as well
2520
01:55:39,500 --> 01:55:41,119
and
2521
01:55:41,119 --> 01:55:45,119
then inside then we get the result and
2522
01:55:45,119 --> 01:55:47,340
here's the interesting thing so we
2523
01:55:47,340 --> 01:55:50,780
trigger we dispatch the alpine.js event
2524
01:55:50,780 --> 01:55:53,040
card change
2525
01:55:53,040 --> 01:55:56,520
and we give the result count so from the
2526
01:55:56,520 --> 01:55:58,139
response from the card controller
2527
01:55:58,139 --> 01:56:00,420
whenever we change something eight item
2528
01:56:00,420 --> 01:56:02,400
into the cart remove item into the cart
2529
01:56:02,400 --> 01:56:05,040
we return a response which has count
2530
01:56:05,040 --> 01:56:08,159
right there okay so this is this is the
2531
01:56:08,159 --> 01:56:10,619
ad method and we return response with
2532
01:56:10,619 --> 01:56:12,960
count in both cases where the user is
2533
01:56:12,960 --> 01:56:15,480
authorized or not authorized and right
2534
01:56:15,480 --> 01:56:18,659
here we take the result count and
2535
01:56:18,659 --> 01:56:21,600
Trigger the card change and pass that
2536
01:56:21,600 --> 01:56:24,540
count and basically
2537
01:56:24,540 --> 01:56:27,380
inside the header we're gonna have
2538
01:56:27,380 --> 01:56:30,360
alpine.js component which will listen to
2539
01:56:30,360 --> 01:56:33,540
this card change and update the value in
2540
01:56:33,540 --> 01:56:36,179
the header I mean in the header right
2541
01:56:36,179 --> 01:56:40,139
here update the value whatever is
2542
01:56:40,139 --> 01:56:43,679
result dot count okay and we're gonna
2543
01:56:43,679 --> 01:56:48,080
also dispatch another event notify and
2544
01:56:48,080 --> 01:56:51,659
toast our toast basically listens to the
2545
01:56:51,659 --> 01:56:54,600
notify and it will simply display this
2546
01:56:54,600 --> 01:56:57,560
message if we want to see we can open up
2547
01:56:57,560 --> 01:57:00,840
blade PHP is scroll down below here's
2548
01:57:00,840 --> 01:57:03,239
the toast component alpine.js component
2549
01:57:03,239 --> 01:57:06,480
and here's the notify so notify on
2550
01:57:06,480 --> 01:57:09,060
windows so this one listens to notify
2551
01:57:09,060 --> 01:57:11,340
event on window and calls the show
2552
01:57:11,340 --> 01:57:14,219
method with the event detail message in
2553
01:57:14,219 --> 01:57:16,080
this case this is the message we give
2554
01:57:16,080 --> 01:57:18,900
and the show method is available right
2555
01:57:18,900 --> 01:57:21,780
here inside the toast component okay so
2556
01:57:21,780 --> 01:57:24,900
this one basically will show alpine.js
2557
01:57:24,900 --> 01:57:26,699
toast
2558
01:57:26,699 --> 01:57:29,400
okay and Inside the Cage we can simply
2559
01:57:29,400 --> 01:57:31,260
print console log response if there
2560
01:57:31,260 --> 01:57:33,719
isn't any error error let's print what
2561
01:57:33,719 --> 01:57:36,719
is the actual error let's Implement no
2562
01:57:36,719 --> 01:57:39,060
remove item from cart we make post
2563
01:57:39,060 --> 01:57:43,199
request on the remove URL the remove URL
2564
01:57:43,199 --> 01:57:45,599
will be generated in the same way like
2565
01:57:45,599 --> 01:57:50,099
a2card URL and we call then we get the
2566
01:57:50,099 --> 01:57:53,400
result we call notify we trigger we
2567
01:57:53,400 --> 01:57:55,980
dispatch to notify the item was removed
2568
01:57:55,980 --> 01:57:58,679
from cart and we dispatch also card
2569
01:57:58,679 --> 01:58:01,500
change and we give it a result count
2570
01:58:01,500 --> 01:58:04,619
okay and the last thing we need to do
2571
01:58:04,619 --> 01:58:09,119
after remove is to remove the cart item
2572
01:58:09,119 --> 01:58:12,780
from the cart items array okay what is
2573
01:58:12,780 --> 01:58:15,540
these cart items we don't have this
2574
01:58:15,540 --> 01:58:18,300
mentioned anywhere but we will have this
2575
01:58:18,300 --> 01:58:21,900
card items mentioned in the card page in
2576
01:58:21,900 --> 01:58:24,119
the blade so when we will move into
2577
01:58:24,119 --> 01:58:26,159
blade files and Implement those we're
2578
01:58:26,159 --> 01:58:28,080
going to have card items basically there
2579
01:58:28,080 --> 01:58:29,580
and
2580
01:58:29,580 --> 01:58:32,340
in the cart page whenever we click right
2581
01:58:32,340 --> 01:58:35,520
here on the cart page the items cart
2582
01:58:35,520 --> 01:58:40,199
items will be rendered using alpine.js
2583
01:58:40,199 --> 01:58:42,239
okay and
2584
01:58:42,239 --> 01:58:44,280
we simply these cart items will be
2585
01:58:44,280 --> 01:58:45,900
whatever will be rendered on the cart
2586
01:58:45,900 --> 01:58:48,599
items page and we simply remove the cart
2587
01:58:48,599 --> 01:58:52,260
item from the cart items array
2588
01:58:52,260 --> 01:58:55,679
okay now let's move on and we have to
2589
01:58:55,679 --> 01:58:58,320
implement the change quantity we call a
2590
01:58:58,320 --> 01:59:00,360
post method on the update quantity URL
2591
01:59:00,360 --> 01:59:03,300
we give it a new quantity we'll listen
2592
01:59:03,300 --> 01:59:07,320
on then we call dispatch card change we
2593
01:59:07,320 --> 01:59:09,840
give it new quantity and we dispatch
2594
01:59:09,840 --> 01:59:12,480
notify as well the item quantity was
2595
01:59:12,480 --> 01:59:13,619
updated
2596
01:59:13,619 --> 01:59:16,320
okay and I think just like this we have
2597
01:59:16,320 --> 01:59:19,560
implemented all the primary methods uh
2598
01:59:19,560 --> 01:59:22,260
we needed right here we have to import
2599
01:59:22,260 --> 01:59:25,980
this post function from the HTTP so I'm
2600
01:59:25,980 --> 01:59:28,260
going to hit alt and enter import post
2601
01:59:28,260 --> 01:59:31,320
from http.js and it's going to be
2602
01:59:31,320 --> 01:59:34,139
imported at the very top okay the only
2603
01:59:34,139 --> 01:59:36,599
thing missing right here is add to cart
2604
01:59:36,599 --> 01:59:40,400
URL remove URL and update quantity URL
2605
01:59:40,400 --> 01:59:42,599
phpstorm for some reason doesn't
2606
01:59:42,599 --> 01:59:44,940
understand this what is this dispatch
2607
01:59:44,940 --> 01:59:47,699
but it should work because that's a
2608
01:59:47,699 --> 01:59:51,420
alpine.js dispatch function okay I think
2609
01:59:51,420 --> 01:59:54,840
now we can move into blade templates and
2610
01:59:54,840 --> 01:59:57,480
modify a few things right here there as
2611
01:59:57,480 --> 02:00:01,440
well as create the cart page
2612
02:00:01,440 --> 02:00:06,719
okay let's open product index blade PHP
2613
02:00:06,719 --> 02:00:08,280
index
2614
02:00:08,280 --> 02:00:11,280
blade PHP and we're going to make a few
2615
02:00:11,280 --> 02:00:14,639
modifications right here for example in
2616
02:00:14,639 --> 02:00:18,000
the app.js we are using this Aid to cart
2617
02:00:18,000 --> 02:00:20,900
URL which is available on the product
2618
02:00:20,900 --> 02:00:25,020
and this product basically is what we
2619
02:00:25,020 --> 02:00:27,900
are passing right here on the product
2620
02:00:27,900 --> 02:00:32,540
item okay so this object is the product
2621
02:00:32,540 --> 02:00:36,360
right here so on that product we're
2622
02:00:36,360 --> 02:00:40,860
gonna add add to cart URL
2623
02:00:40,860 --> 02:00:45,119
and that basically will be to call root
2624
02:00:45,119 --> 02:00:49,800
and give it cart add as a name and the
2625
02:00:49,800 --> 02:00:53,099
product will be the parameter okay it
2626
02:00:53,099 --> 02:00:56,040
will automatically take the slug laravel
2627
02:00:56,040 --> 02:00:58,440
will automatically takes slug from here
2628
02:00:58,440 --> 02:01:00,980
even right here we don't need to provide
2629
02:01:00,980 --> 02:01:04,679
slack slack I believe
2630
02:01:04,679 --> 02:01:07,320
let's check the web PHP
2631
02:01:07,320 --> 02:01:09,599
uh yeah we don't need to provide because
2632
02:01:09,599 --> 02:01:12,780
we are selecting by the root key name
2633
02:01:12,780 --> 02:01:15,179
and we already have the root cane key
2634
02:01:15,179 --> 02:01:18,060
name changed in the model so we can
2635
02:01:18,060 --> 02:01:21,420
specify product right here let's scroll
2636
02:01:21,420 --> 02:01:24,540
down below and have a look I think we
2637
02:01:24,540 --> 02:01:26,880
can completely remove this Edge to watch
2638
02:01:26,880 --> 02:01:30,320
list button we don't need that
2639
02:01:30,320 --> 02:01:34,199
however in H2 cards we don't need this
2640
02:01:34,199 --> 02:01:36,000
ID as well because the N2 card is
2641
02:01:36,000 --> 02:01:38,820
available on the product itself okay so
2642
02:01:38,820 --> 02:01:41,480
we save this and let's open the browser
2643
02:01:41,480 --> 02:01:44,460
and let's
2644
02:01:44,460 --> 02:01:46,440
let's
2645
02:01:46,440 --> 02:01:48,599
the developer tools doesn't seem to be
2646
02:01:48,599 --> 02:01:50,780
working
2647
02:01:51,719 --> 02:01:55,739
okay ensure email is a verified not
2648
02:01:55,739 --> 02:01:57,480
found okay
2649
02:01:57,480 --> 02:02:00,480
now let's test everything
2650
02:02:00,480 --> 02:02:05,179
I think we need we need to import that
2651
02:02:06,420 --> 02:02:09,300
what's that Azure email is verified not
2652
02:02:09,300 --> 02:02:12,239
found it doesn't exist okay let's
2653
02:02:12,239 --> 02:02:14,960
import
2654
02:02:15,540 --> 02:02:16,639
um
2655
02:02:16,639 --> 02:02:22,260
ensure email is verified date comes from
2656
02:02:22,260 --> 02:02:27,139
up HTTP middleware do we have it
2657
02:02:27,840 --> 02:02:31,320
no we don't have this right here we need
2658
02:02:31,320 --> 02:02:33,900
to import that from illuminate out
2659
02:02:33,900 --> 02:02:35,239
middleware
2660
02:02:35,239 --> 02:02:38,400
ensure email is verified so we save that
2661
02:02:38,400 --> 02:02:41,280
and refresh the page
2662
02:02:41,280 --> 02:02:44,460
and here is our index let's now inspect
2663
02:02:44,460 --> 02:02:47,040
this and have a look in the network
2664
02:02:47,040 --> 02:02:50,340
let's zoom out slightly okay here's our
2665
02:02:50,340 --> 02:02:52,860
Network and let's click the edge to cart
2666
02:02:52,860 --> 02:02:55,679
button okay so the first thing is
2667
02:02:55,679 --> 02:02:58,260
successful the request was made
2668
02:02:58,260 --> 02:03:00,599
let's click on this
2669
02:03:00,599 --> 02:03:02,699
and we have an error post method is not
2670
02:03:02,699 --> 02:03:05,520
supported on this route okay I think we
2671
02:03:05,520 --> 02:03:08,219
know the reason so let's open web PHP
2672
02:03:08,219 --> 02:03:11,520
and right here we have all get requests
2673
02:03:11,520 --> 02:03:15,060
so this one this and this should be post
2674
02:03:15,060 --> 02:03:16,860
okay we save this
2675
02:03:16,860 --> 02:03:19,500
and let's check in the browser and click
2676
02:03:19,500 --> 02:03:21,840
add to cart once again okay we see the
2677
02:03:21,840 --> 02:03:24,780
toast item was added into the cart and
2678
02:03:24,780 --> 02:03:27,679
the request was successfully completed
2679
02:03:27,679 --> 02:03:31,560
let's now open the application by the
2680
02:03:31,560 --> 02:03:34,320
way let's see what is the response okay
2681
02:03:34,320 --> 02:03:37,860
we see count one so this means that the
2682
02:03:37,860 --> 02:03:39,840
item was added in the cookie well so
2683
02:03:39,840 --> 02:03:42,540
let's click once again now count is two
2684
02:03:42,540 --> 02:03:45,080
let's go in the application
2685
02:03:45,080 --> 02:03:48,179
and here are the card items of course
2686
02:03:48,179 --> 02:03:51,599
the actual cookie value is encrypted but
2687
02:03:51,599 --> 02:03:54,900
I think we have successfully added item
2688
02:03:54,900 --> 02:03:57,000
into the cart
2689
02:03:57,000 --> 02:03:58,739
we don't see this
2690
02:03:58,739 --> 02:04:02,639
um outputted right here so let's open
2691
02:04:02,639 --> 02:04:06,020
uh navigation blade PHP
2692
02:04:06,020 --> 02:04:08,820
and by the way we need to change this
2693
02:04:08,820 --> 02:04:11,940
into card as well so let's set this into
2694
02:04:11,940 --> 02:04:14,159
root cart
2695
02:04:14,159 --> 02:04:17,159
card.index
2696
02:04:17,219 --> 02:04:20,520
and let's scroll down below and this is
2697
02:04:20,520 --> 02:04:21,900
the place where we need to make some
2698
02:04:21,900 --> 02:04:23,639
changes
2699
02:04:23,639 --> 02:04:27,000
okay so previously in the template we
2700
02:04:27,000 --> 02:04:29,219
were using store header but I'm going to
2701
02:04:29,219 --> 02:04:32,880
remove this store header and right here
2702
02:04:32,880 --> 02:04:35,940
as well let's move up and at the top in
2703
02:04:35,940 --> 02:04:38,159
the header we have the six data mobile
2704
02:04:38,159 --> 02:04:40,260
menu open true or false so I'm going to
2705
02:04:40,260 --> 02:04:42,239
create one additional property right
2706
02:04:42,239 --> 02:04:45,020
here and I'm going to call this cart
2707
02:04:45,020 --> 02:04:47,580
items count
2708
02:04:47,580 --> 02:04:50,820
and as an initial value I'm going to use
2709
02:04:50,820 --> 02:04:54,300
the cart Helper and I'm going to call
2710
02:04:54,300 --> 02:04:57,000
get cart items count
2711
02:04:57,000 --> 02:05:00,360
okay so card items count corresponds to
2712
02:05:00,360 --> 02:05:03,060
the following value and let's move down
2713
02:05:03,060 --> 02:05:04,040
below
2714
02:05:04,040 --> 02:05:06,300
and if
2715
02:05:06,300 --> 02:05:08,520
the cart items count exists then this
2716
02:05:08,520 --> 02:05:10,800
will be displayed using Geeks show
2717
02:05:10,800 --> 02:05:14,280
and we need to Output in X text as well
2718
02:05:14,280 --> 02:05:16,440
let's move down below we have the
2719
02:05:16,440 --> 02:05:18,360
desktop version as well I think we made
2720
02:05:18,360 --> 02:05:22,219
changes on the mobile version only
2721
02:05:22,739 --> 02:05:26,659
let's remove the watch list
2722
02:05:26,659 --> 02:05:28,199
let's
2723
02:05:28,199 --> 02:05:32,480
have a look this is a different thing
2724
02:05:33,300 --> 02:05:36,840
okay here is the responsive or I think
2725
02:05:36,840 --> 02:05:39,659
this is the desktop the above one is
2726
02:05:39,659 --> 02:05:43,860
responsive so we set these roots oops
2727
02:05:43,860 --> 02:05:48,420
approach to be card dot index we scroll
2728
02:05:48,420 --> 02:05:50,040
down below
2729
02:05:50,040 --> 02:05:54,619
we set this into cart items count
2730
02:05:54,619 --> 02:05:58,260
right here as well let's move down below
2731
02:05:58,260 --> 02:06:01,500
and we have to remove
2732
02:06:01,500 --> 02:06:05,760
the watch list from here as well
2733
02:06:05,760 --> 02:06:07,920
okay now let's have a look in the
2734
02:06:07,920 --> 02:06:10,560
browser we reload the page and we see
2735
02:06:10,560 --> 02:06:13,860
two already immediately right here which
2736
02:06:13,860 --> 02:06:16,380
is awesome one additional thing we need
2737
02:06:16,380 --> 02:06:18,960
to do on the component so this one
2738
02:06:18,960 --> 02:06:21,060
header is already already alpine.js
2739
02:06:21,060 --> 02:06:23,940
component okay whenever we get the
2740
02:06:23,940 --> 02:06:26,639
response we dispatch the cart change and
2741
02:06:26,639 --> 02:06:28,440
we need to listen to the card change so
2742
02:06:28,440 --> 02:06:31,260
right here we're going to listen to card
2743
02:06:31,260 --> 02:06:34,219
change on window
2744
02:06:34,219 --> 02:06:37,020
and basically I'm going to set card
2745
02:06:37,020 --> 02:06:39,199
items count
2746
02:06:39,199 --> 02:06:42,440
equals to event
2747
02:06:42,440 --> 02:06:46,920
detail count okay whatever we pass right
2748
02:06:46,920 --> 02:06:49,139
here the whole object is detail event
2749
02:06:49,139 --> 02:06:51,540
detail and we need to take the count
2750
02:06:51,540 --> 02:06:54,719
from this event detail so I save this
2751
02:06:54,719 --> 02:06:56,820
and let's have a look in the browser I'm
2752
02:06:56,820 --> 02:06:58,619
going to add one more item in the cart
2753
02:06:58,619 --> 02:07:01,619
and we see three right here okay let's
2754
02:07:01,619 --> 02:07:05,040
add more items into the cart and we see
2755
02:07:05,040 --> 02:07:09,179
the counter increases magic right no
2756
02:07:09,179 --> 02:07:10,860
it's not a magic
2757
02:07:10,860 --> 02:07:13,679
it's just the correct implementation
2758
02:07:13,679 --> 02:07:16,380
all right so we have now six items into
2759
02:07:16,380 --> 02:07:18,719
the cart and I think we didn't need to
2760
02:07:18,719 --> 02:07:20,460
do anything on this page we need to
2761
02:07:20,460 --> 02:07:22,679
implement the cart page so I click on
2762
02:07:22,679 --> 02:07:26,280
this and we see my cart items now let's
2763
02:07:26,280 --> 02:07:31,860
open cart slash index blade PHP and this
2764
02:07:31,860 --> 02:07:35,520
is the place we need to work in
2765
02:07:35,520 --> 02:07:39,020
okay let's now open the Talon CSS
2766
02:07:39,020 --> 02:07:40,760
alpine.js
2767
02:07:40,760 --> 02:07:44,179
template the front-end template
2768
02:07:44,179 --> 02:07:48,360
and we have to copy and paste the card
2769
02:07:48,360 --> 02:07:51,360
template so basically what do we need to
2770
02:07:51,360 --> 02:07:52,380
do
2771
02:07:52,380 --> 02:07:57,540
let me actually copy the whole container
2772
02:07:57,540 --> 02:07:59,340
this container
2773
02:07:59,340 --> 02:08:03,420
and let's put this in the PHP store and
2774
02:08:03,420 --> 02:08:04,860
let's format the code
2775
02:08:04,860 --> 02:08:06,659
and save this and have a look in the
2776
02:08:06,659 --> 02:08:09,080
browser
2777
02:08:09,420 --> 02:08:12,780
okay so images are missing but the
2778
02:08:12,780 --> 02:08:15,780
template I guess is what we want
2779
02:08:15,780 --> 02:08:19,440
okay now let's make some changes we
2780
02:08:19,440 --> 02:08:22,380
don't want of course so many items
2781
02:08:22,380 --> 02:08:24,900
because we're going to iterate over our
2782
02:08:24,900 --> 02:08:28,320
items so let me actually delete all the
2783
02:08:28,320 --> 02:08:31,260
cart items and leave only one
2784
02:08:31,260 --> 02:08:33,780
okay how we're going to iterate
2785
02:08:33,780 --> 02:08:38,219
so from the cart controller I think we
2786
02:08:38,219 --> 02:08:40,380
are passing
2787
02:08:40,380 --> 02:08:42,420
where is that we're passing the cart
2788
02:08:42,420 --> 02:08:43,860
items
2789
02:08:43,860 --> 02:08:48,119
uh we're passing the products and total
2790
02:08:48,119 --> 02:08:49,980
okay
2791
02:08:49,980 --> 02:08:52,320
we get those variables and they are
2792
02:08:52,320 --> 02:08:54,480
available right here so
2793
02:08:54,480 --> 02:08:57,239
you know what I'm going to do so on this
2794
02:08:57,239 --> 02:09:00,119
div element which is the
2795
02:09:00,119 --> 02:09:03,420
wrapper of the card items I'm going to
2796
02:09:03,420 --> 02:09:08,280
make these is an Alpine JS component so
2797
02:09:08,280 --> 02:09:11,940
I'm going to specify X data right here
2798
02:09:11,940 --> 02:09:14,400
okay just like this and I'm going to
2799
02:09:14,400 --> 02:09:18,960
specify cart items right here which will
2800
02:09:18,960 --> 02:09:21,900
be the cart items given from the
2801
02:09:21,900 --> 02:09:23,639
controller but I'm going to modify it
2802
02:09:23,639 --> 02:09:25,500
slightly
2803
02:09:25,500 --> 02:09:28,920
and I'm going to do this and I'm going
2804
02:09:28,920 --> 02:09:30,360
to also
2805
02:09:30,360 --> 02:09:35,400
create a getter get cart total
2806
02:09:35,400 --> 02:09:36,599
okay
2807
02:09:36,599 --> 02:09:39,599
and this will be a calculated property
2808
02:09:39,599 --> 02:09:44,880
so and we are going to return
2809
02:09:44,880 --> 02:09:48,119
um something from here
2810
02:09:48,119 --> 02:09:50,760
so basically I'm going to run on the
2811
02:09:50,760 --> 02:09:53,580
cart items reduce and I'm going to
2812
02:09:53,580 --> 02:09:55,980
delete something something similar I'm
2813
02:09:55,980 --> 02:09:58,260
doing on the backend side calling reduce
2814
02:09:58,260 --> 02:10:01,020
on the cart items to calculate the total
2815
02:10:01,020 --> 02:10:05,400
so I'm calling reduce on this uh the
2816
02:10:05,400 --> 02:10:08,239
initial value will be 0 and we multiply
2817
02:10:08,239 --> 02:10:12,900
the product price on the quantity and
2818
02:10:12,900 --> 02:10:15,540
then add it to the accumulator so
2819
02:10:15,540 --> 02:10:19,020
finally this will give me the total sum
2820
02:10:19,020 --> 02:10:22,920
of all the card items but what are the
2821
02:10:22,920 --> 02:10:26,099
actual card items I'm going to run here
2822
02:10:26,099 --> 02:10:31,139
a PHP code so using blade curly braces
2823
02:10:31,139 --> 02:10:34,139
I'm going to call Json encode so I'm
2824
02:10:34,139 --> 02:10:37,260
going to take the products products
2825
02:10:37,260 --> 02:10:38,639
array which is given from the card
2826
02:10:38,639 --> 02:10:40,920
controller okay and the products are
2827
02:10:40,920 --> 02:10:44,580
basically eloquent collection okay so
2828
02:10:44,580 --> 02:10:46,739
I'm calling map on this and we accept
2829
02:10:46,739 --> 02:10:49,020
each individual product and I'm gonna
2830
02:10:49,020 --> 02:10:52,080
return an associative array which
2831
02:10:52,080 --> 02:10:54,840
finally will be Json encoded and
2832
02:10:54,840 --> 02:10:57,000
inserted right here so Json encoding
2833
02:10:57,000 --> 02:10:59,639
will give us a Json which is also an
2834
02:10:59,639 --> 02:11:01,800
array and right here we're going to have
2835
02:11:01,800 --> 02:11:04,860
an array okay so what do we have we have
2836
02:11:04,860 --> 02:11:08,820
ID slot image title and price we give
2837
02:11:08,820 --> 02:11:11,880
all of them inside the cart items plus
2838
02:11:11,880 --> 02:11:14,580
we give the quantity the quantity is not
2839
02:11:14,580 --> 02:11:16,260
available on the product instead the
2840
02:11:16,260 --> 02:11:18,780
quantity is available on cart items and
2841
02:11:18,780 --> 02:11:20,280
let's have a look in the controller once
2842
02:11:20,280 --> 02:11:25,139
again cart items is indexed array so
2843
02:11:25,139 --> 02:11:28,139
it's indexed using Key by so the cart
2844
02:11:28,139 --> 02:11:30,480
items is an associative area where key
2845
02:11:30,480 --> 02:11:31,920
is the
2846
02:11:31,920 --> 02:11:34,020
product ID
2847
02:11:34,020 --> 02:11:37,800
so right here based on the product ID we
2848
02:11:37,800 --> 02:11:40,320
get the quantity from the cart item okay
2849
02:11:40,320 --> 02:11:43,080
and additionally I'm going to give the
2850
02:11:43,080 --> 02:11:46,800
href which will be the product view page
2851
02:11:46,800 --> 02:11:49,560
and I'm going to give it the cart remove
2852
02:11:49,560 --> 02:11:51,960
URL which is going to be the remove URL
2853
02:11:51,960 --> 02:11:54,179
used in app.js
2854
02:11:54,179 --> 02:11:56,580
right here and we're going to have
2855
02:11:56,580 --> 02:11:59,159
update quantity URL which is going to be
2856
02:11:59,159 --> 02:12:03,239
used also in app.js right here okay so
2857
02:12:03,239 --> 02:12:06,420
I'm basically mapping the eloquent model
2858
02:12:06,420 --> 02:12:08,520
into an associative array each
2859
02:12:08,520 --> 02:12:11,400
individual model and then finally this
2860
02:12:11,400 --> 02:12:13,800
will be Json encoded so I'm going to
2861
02:12:13,800 --> 02:12:15,540
save these
2862
02:12:15,540 --> 02:12:17,520
uh we're going to save this and let's
2863
02:12:17,520 --> 02:12:19,619
have a look in the browser so far so I'm
2864
02:12:19,619 --> 02:12:21,960
going to reload the page and let's view
2865
02:12:21,960 --> 02:12:23,820
page source
2866
02:12:23,820 --> 02:12:26,780
okay let's scroll down below
2867
02:12:26,780 --> 02:12:29,639
and where is
2868
02:12:29,639 --> 02:12:33,260
where is that here it is
2869
02:12:36,179 --> 02:12:39,360
okay it has a lot of
2870
02:12:39,360 --> 02:12:42,119
quotations
2871
02:12:42,119 --> 02:12:44,219
should it be like this
2872
02:12:44,219 --> 02:12:46,500
I don't know
2873
02:12:46,500 --> 02:12:52,199
let's see okay let's see next
2874
02:12:52,199 --> 02:12:57,000
right here on that div basically
2875
02:12:57,000 --> 02:12:57,900
um
2876
02:12:57,900 --> 02:13:00,659
think we need to do this
2877
02:13:00,659 --> 02:13:04,679
on the div I'm going to create template
2878
02:13:04,679 --> 02:13:07,679
and I'm going to run the for Loop
2879
02:13:07,679 --> 02:13:10,619
alpine.js for loop on that but first i'm
2880
02:13:10,619 --> 02:13:13,280
going to make a check if
2881
02:13:13,280 --> 02:13:19,139
uh using X if if the cart items length
2882
02:13:19,139 --> 02:13:22,980
exists so if there are at least if there
2883
02:13:22,980 --> 02:13:25,560
is at least one cart item so and I'm
2884
02:13:25,560 --> 02:13:27,199
going to wrap
2885
02:13:27,199 --> 02:13:31,560
uh everything maybe using the checkout
2886
02:13:31,560 --> 02:13:34,040
button
2887
02:13:34,920 --> 02:13:37,199
think I'm going to wrap everything in
2888
02:13:37,199 --> 02:13:39,739
this template
2889
02:13:41,099 --> 02:13:44,639
okay if there are new items we this one
2890
02:13:44,639 --> 02:13:46,440
will not be displayed
2891
02:13:46,440 --> 02:13:49,820
uh however we will need another template
2892
02:13:49,820 --> 02:13:52,860
uh alpngs doesn't have else so we're
2893
02:13:52,860 --> 02:13:54,900
going to write X if
2894
02:13:54,900 --> 02:13:58,280
if a cart
2895
02:13:58,280 --> 02:14:00,599
items I think we need to do it vice
2896
02:14:00,599 --> 02:14:01,920
versa so
2897
02:14:01,920 --> 02:14:04,440
if Carta no we're doing it correctly
2898
02:14:04,440 --> 02:14:06,619
excuse me so if the cart items exists
2899
02:14:06,619 --> 02:14:09,719
then this will be uh this condition will
2900
02:14:09,719 --> 02:14:13,739
be satisfied if card items length does
2901
02:14:13,739 --> 02:14:16,800
not exist let's put exclamation mark
2902
02:14:16,800 --> 02:14:21,239
right here then let's create one div
2903
02:14:21,239 --> 02:14:23,880
with Talon scissors classes let's give
2904
02:14:23,880 --> 02:14:29,280
it a text Center and padding y
2905
02:14:29,280 --> 02:14:35,040
padding Y8 maybe text Gray like a 500
2906
02:14:35,040 --> 02:14:41,179
okay and let's write you don't have any
2907
02:14:41,179 --> 02:14:44,520
items in cart
2908
02:14:44,520 --> 02:14:48,780
okay perfect now we need to write a for
2909
02:14:48,780 --> 02:14:52,820
Loop and I'm gonna do this for Loop
2910
02:14:52,820 --> 02:14:57,060
uh right here so template
2911
02:14:57,060 --> 02:14:59,659
X4
2912
02:14:59,659 --> 02:15:05,400
product of cart items
2913
02:15:05,400 --> 02:15:08,579
okay let's format the code product of
2914
02:15:08,579 --> 02:15:11,219
cart items and now I can access this
2915
02:15:11,219 --> 02:15:14,639
product and this product
2916
02:15:14,639 --> 02:15:18,420
uh is something I can pass to another
2917
02:15:18,420 --> 02:15:20,340
component and I'm going to create X data
2918
02:15:20,340 --> 02:15:23,880
just like I have the
2919
02:15:23,880 --> 02:15:27,239
product index blade let's move up so we
2920
02:15:27,239 --> 02:15:29,840
have the product and this is the product
2921
02:15:29,840 --> 02:15:32,159
and this product is passed to the
2922
02:15:32,159 --> 02:15:33,480
product item so I'm going to do
2923
02:15:33,480 --> 02:15:36,800
something similar right here
2924
02:15:36,800 --> 02:15:40,500
and I'm going to call product item and
2925
02:15:40,500 --> 02:15:45,300
I'm going to pass the product right here
2926
02:15:45,300 --> 02:15:48,000
okay and what does this give me this
2927
02:15:48,000 --> 02:15:50,760
give me the functionality
2928
02:15:50,760 --> 02:15:54,119
that inside this component I can use the
2929
02:15:54,119 --> 02:15:56,760
methods defined in the component like
2930
02:15:56,760 --> 02:15:58,739
remove item from card and change
2931
02:15:58,739 --> 02:16:02,520
quantity and this is what I want let's
2932
02:16:02,520 --> 02:16:05,099
go in the cart this is exactly what I
2933
02:16:05,099 --> 02:16:08,520
want now let's let's save this and first
2934
02:16:08,520 --> 02:16:10,380
have a look in the browser we should see
2935
02:16:10,380 --> 02:16:12,179
a few items
2936
02:16:12,179 --> 02:16:15,360
okay we see only three let's inspect
2937
02:16:15,360 --> 02:16:17,520
this and have a look maybe we have an
2938
02:16:17,520 --> 02:16:18,960
error
2939
02:16:18,960 --> 02:16:22,139
uh no we don't have any error we have
2940
02:16:22,139 --> 02:16:23,760
three items
2941
02:16:23,760 --> 02:16:26,699
I think this is logical because we have
2942
02:16:26,699 --> 02:16:28,739
three different items but the quantities
2943
02:16:28,739 --> 02:16:30,599
should be
2944
02:16:30,599 --> 02:16:32,340
um should not be one for all of them
2945
02:16:32,340 --> 02:16:36,260
anyway let's Implement now this
2946
02:16:36,260 --> 02:16:41,519
uh the source will be it should be bound
2947
02:16:41,519 --> 02:16:46,740
using a colon product Dot
2948
02:16:46,740 --> 02:16:49,740
how do we call this image product dot
2949
02:16:49,740 --> 02:16:53,519
image save this and have a look so we
2950
02:16:53,519 --> 02:16:56,099
have now different images which is good
2951
02:16:56,099 --> 02:16:58,260
let's output the
2952
02:16:58,260 --> 02:17:01,558
X text that's going to be product dot
2953
02:17:01,558 --> 02:17:03,599
title
2954
02:17:03,599 --> 02:17:07,399
now let's remove these
2955
02:17:07,740 --> 02:17:09,840
save and have a look we have different
2956
02:17:09,840 --> 02:17:14,760
titles now let's take here of the price
2957
02:17:14,760 --> 02:17:18,058
the price will be
2958
02:17:18,058 --> 02:17:21,179
product No it should not be like this we
2959
02:17:21,179 --> 02:17:25,320
should basically give this pan X text
2960
02:17:25,320 --> 02:17:26,939
and
2961
02:17:26,939 --> 02:17:29,580
if we simply write product.price this
2962
02:17:29,580 --> 02:17:32,040
will print the price without the dollar
2963
02:17:32,040 --> 02:17:34,580
sign so I want dollar sign to be
2964
02:17:34,580 --> 02:17:37,799
prefixed with that so I'm going to use
2965
02:17:37,799 --> 02:17:40,740
string literals tactics right here
2966
02:17:40,740 --> 02:17:43,620
and I'm outputting the product price
2967
02:17:43,620 --> 02:17:46,679
which will do the same thing so we see
2968
02:17:46,679 --> 02:17:48,540
the product price but I'm going to put
2969
02:17:48,540 --> 02:17:51,959
additional Dollar in front of that
2970
02:17:51,959 --> 02:17:54,359
so now I refresh the page and we see
2971
02:17:54,359 --> 02:17:56,939
dollar sign right here the CSS is
2972
02:17:56,939 --> 02:17:59,099
something that needs to be adjusted and
2973
02:17:59,099 --> 02:18:00,799
fixed and we're going to fix that
2974
02:18:00,799 --> 02:18:04,320
however we have to I think
2975
02:18:04,320 --> 02:18:08,459
take care of the quantity
2976
02:18:08,459 --> 02:18:12,359
here we have it so on that select I'm
2977
02:18:12,359 --> 02:18:16,679
going to give this one X model to be
2978
02:18:16,679 --> 02:18:20,040
product dot quantity
2979
02:18:20,040 --> 02:18:22,260
now let's have a look
2980
02:18:22,260 --> 02:18:24,959
and voila we see that this item is added
2981
02:18:24,959 --> 02:18:27,718
twice this is a three times this is I
2982
02:18:27,718 --> 02:18:29,820
did just once
2983
02:18:29,820 --> 02:18:32,820
okay and I'm gonna listen to change of
2984
02:18:32,820 --> 02:18:34,939
this drop down and I'm going to call
2985
02:18:34,939 --> 02:18:39,420
change quantity on that
2986
02:18:39,420 --> 02:18:43,859
okay so far so good we can test this but
2987
02:18:43,859 --> 02:18:45,718
let's add
2988
02:18:45,718 --> 02:18:48,179
um right here
2989
02:18:48,179 --> 02:18:50,340
click
2990
02:18:50,340 --> 02:18:52,740
remove
2991
02:18:52,740 --> 02:18:55,379
um remove how it's called the method
2992
02:18:55,379 --> 02:18:57,660
remove quantity or
2993
02:18:57,660 --> 02:19:00,780
remove item from cart okay this is what
2994
02:19:00,780 --> 02:19:02,638
we need to call and I'm going to call
2995
02:19:02,638 --> 02:19:06,540
also modifier prevent
2996
02:19:06,540 --> 02:19:10,679
just to call the payment default
2997
02:19:10,679 --> 02:19:15,299
let's format this input
2998
02:19:15,299 --> 02:19:19,439
okay so we have added the remove event
2999
02:19:19,439 --> 02:19:24,000
listener we have added the change uh I
3000
02:19:24,000 --> 02:19:26,939
think we need to add right here minimum
3001
02:19:26,939 --> 02:19:29,580
needs to be one
3002
02:19:29,580 --> 02:19:31,320
on this
3003
02:19:31,320 --> 02:19:33,359
um by the way do we need
3004
02:19:33,359 --> 02:19:36,179
um select right here maybe this should
3005
02:19:36,179 --> 02:19:38,459
be an input and we can set whatever we
3006
02:19:38,459 --> 02:19:41,580
want so let me change this into input
3007
02:19:41,580 --> 02:19:47,479
uh let's give this one the same classes
3008
02:19:49,020 --> 02:19:51,780
and let's
3009
02:19:51,780 --> 02:19:55,979
give it a X model and change
3010
02:19:55,979 --> 02:20:00,000
we give it type number and let's give
3011
02:20:00,000 --> 02:20:02,460
this one minimum one in this case
3012
02:20:02,460 --> 02:20:06,620
and let's remove the select
3013
02:20:08,840 --> 02:20:14,520
uh okay I don't like the width of this
3014
02:20:14,520 --> 02:20:18,359
input so maybe we can give it a width of
3015
02:20:18,359 --> 02:20:21,260
16.
3016
02:20:21,600 --> 02:20:24,300
okay this is good let's go in the
3017
02:20:24,300 --> 02:20:26,939
network and see if the update quantity
3018
02:20:26,939 --> 02:20:29,460
or removed from the card works fine so
3019
02:20:29,460 --> 02:20:31,800
let's reduce the quantity request is
3020
02:20:31,800 --> 02:20:34,439
made we see the toast item quantity was
3021
02:20:34,439 --> 02:20:35,600
updated
3022
02:20:35,600 --> 02:20:38,939
and in the header we also see five I
3023
02:20:38,939 --> 02:20:40,979
decrease the quantity this changes into
3024
02:20:40,979 --> 02:20:43,260
four I decrease the quantity changes
3025
02:20:43,260 --> 02:20:45,899
into three as soon as I keep increasing
3026
02:20:45,899 --> 02:20:48,180
the counter in the header increases as
3027
02:20:48,180 --> 02:20:49,020
well
3028
02:20:49,020 --> 02:20:52,620
which is awesome so we have implemented
3029
02:20:52,620 --> 02:20:55,800
the quantity change now let's remove the
3030
02:20:55,800 --> 02:20:59,460
item from the cart let's remove the
3031
02:20:59,460 --> 02:21:02,220
first one it was removed the item
3032
02:21:02,220 --> 02:21:04,859
disappeared from The View which is
3033
02:21:04,859 --> 02:21:07,200
awesome exactly what we wanted let's
3034
02:21:07,200 --> 02:21:10,500
make a few changes right here a few CSS
3035
02:21:10,500 --> 02:21:12,120
modified modifications so that this
3036
02:21:12,120 --> 02:21:14,040
needs to be on the right and the height
3037
02:21:14,040 --> 02:21:17,760
of this item should not be that large
3038
02:21:17,760 --> 02:21:20,220
let's go in the blade template
3039
02:21:20,220 --> 02:21:23,399
and have a look so we need to adjust the
3040
02:21:23,399 --> 02:21:26,819
image Dimensions first let's actually
3041
02:21:26,819 --> 02:21:28,380
wrap this
3042
02:21:28,380 --> 02:21:29,880
in
3043
02:21:29,880 --> 02:21:33,240
anchor tag let's put image inside there
3044
02:21:33,240 --> 02:21:37,680
let's give this one it needs href
3045
02:21:37,680 --> 02:21:41,100
so in the href will be product dot href
3046
02:21:41,100 --> 02:21:43,620
we specified right here in this product
3047
02:21:43,620 --> 02:21:44,939
View
3048
02:21:44,939 --> 02:21:48,899
and we're going to provide some classes
3049
02:21:48,899 --> 02:21:51,240
what classes do we need let's give it a
3050
02:21:51,240 --> 02:21:57,479
fixed width like with 32 and 832
3051
02:21:57,479 --> 02:22:01,640
let's give this one a flex items Center
3052
02:22:01,640 --> 02:22:06,180
and justify Center and let's give this
3053
02:22:06,180 --> 02:22:09,780
overflow hidden as well and on that
3054
02:22:09,780 --> 02:22:12,240
image I'm going to give this one
3055
02:22:12,240 --> 02:22:14,520
object cover
3056
02:22:14,520 --> 02:22:18,420
so let's save these and have a look
3057
02:22:18,420 --> 02:22:19,620
okay
3058
02:22:19,620 --> 02:22:22,200
this is more or less okay so at least it
3059
02:22:22,200 --> 02:22:25,620
doesn't have that much hate there
3060
02:22:25,620 --> 02:22:28,080
and every row will have the same height
3061
02:22:28,080 --> 02:22:30,540
which is good
3062
02:22:30,540 --> 02:22:33,540
however
3063
02:22:35,520 --> 02:22:37,560
this one has different width and this
3064
02:22:37,560 --> 02:22:39,479
one has different width so width needs
3065
02:22:39,479 --> 02:22:41,939
to be adjusted as well
3066
02:22:41,939 --> 02:22:46,640
and maybe I can set
3067
02:22:46,819 --> 02:22:50,280
mean with
3068
02:22:50,280 --> 02:22:52,380
mean with something
3069
02:22:52,380 --> 02:22:55,080
okay I can set this um you can set this
3070
02:22:55,080 --> 02:22:57,660
later I know how to spend too much time
3071
02:22:57,660 --> 02:23:00,960
on the CSS
3072
02:23:00,960 --> 02:23:04,680
and this is the place which probably
3073
02:23:04,680 --> 02:23:08,460
needs to have a flex one
3074
02:23:08,460 --> 02:23:10,819
see
3075
02:23:10,859 --> 02:23:12,899
let's give Flex
3076
02:23:12,899 --> 02:23:16,979
one right here and remove from here
3077
02:23:16,979 --> 02:23:20,819
to have a look in the browser and yes
3078
02:23:20,819 --> 02:23:23,399
this is what we needed
3079
02:23:23,399 --> 02:23:27,960
okay so now this this one
3080
02:23:27,960 --> 02:23:31,319
where's that so the whole div the whole
3081
02:23:31,319 --> 02:23:35,700
right side so this div element the right
3082
02:23:35,700 --> 02:23:38,819
div has the flex one and stretches fully
3083
02:23:38,819 --> 02:23:42,540
and then we have the uh two divs with
3084
02:23:42,540 --> 02:23:44,700
justify between right here and justify
3085
02:23:44,700 --> 02:23:47,280
between right here okay this gives us
3086
02:23:47,280 --> 02:23:50,760
exactly what we want
3087
02:23:50,760 --> 02:23:54,359
okay so we have implemented adding item
3088
02:23:54,359 --> 02:23:56,060
into the cart
3089
02:23:56,060 --> 02:23:59,720
uh updating the quantity
3090
02:23:59,720 --> 02:24:03,600
removing item into the cart and I think
3091
02:24:03,600 --> 02:24:06,960
we haven't implemented the
3092
02:24:06,960 --> 02:24:11,100
total quantity on the card so
3093
02:24:11,100 --> 02:24:13,260
basically
3094
02:24:13,260 --> 02:24:16,260
we created a getter car total and this
3095
02:24:16,260 --> 02:24:19,500
is something what we need to use right
3096
02:24:19,500 --> 02:24:21,600
here so
3097
02:24:21,600 --> 02:24:25,200
maybe I will use x text right here
3098
02:24:25,200 --> 02:24:29,760
and use cart total and
3099
02:24:29,760 --> 02:24:32,100
let's have a look
3100
02:24:32,100 --> 02:24:36,620
by the way this is not outputted why
3101
02:24:37,319 --> 02:24:39,300
X if
3102
02:24:39,300 --> 02:24:43,380
let's collapse this we have the if
3103
02:24:43,380 --> 02:24:46,319
card items length
3104
02:24:46,319 --> 02:24:51,200
and this one is inside if
3105
02:24:51,479 --> 02:24:53,160
that should work
3106
02:24:53,160 --> 02:24:55,080
isn't it
3107
02:24:55,080 --> 02:24:57,780
okay why this is not displayed let's
3108
02:24:57,780 --> 02:25:00,060
observe this once again so let me
3109
02:25:00,060 --> 02:25:03,180
inspect and see
3110
02:25:03,180 --> 02:25:06,479
Where is the
3111
02:25:06,479 --> 02:25:10,220
so we have a template
3112
02:25:10,439 --> 02:25:12,899
okay this is something we don't
3113
02:25:12,899 --> 02:25:15,620
need
3114
02:25:18,660 --> 02:25:22,740
to see if cart items length
3115
02:25:22,740 --> 02:25:25,200
this is displayed those items are
3116
02:25:25,200 --> 02:25:27,800
displayed
3117
02:25:29,760 --> 02:25:32,520
and this is not displayed to have any
3118
02:25:32,520 --> 02:25:34,920
error in the console
3119
02:25:34,920 --> 02:25:36,979
no we don't
3120
02:25:36,979 --> 02:25:41,880
then why this is not displayed
3121
02:25:41,880 --> 02:25:45,260
I'm on a card page
3122
02:25:46,680 --> 02:25:50,520
okay let's delete the
3123
02:25:50,520 --> 02:25:53,540
whole template
3124
02:25:57,479 --> 02:26:02,540
we have data then we have cart item
3125
02:26:07,380 --> 02:26:10,500
do we need to clear the cache level
3126
02:26:10,500 --> 02:26:14,840
cache maybe let's remove this
3127
02:26:15,120 --> 02:26:20,600
okay here's the here's the subtotal
3128
02:26:21,660 --> 02:26:25,979
strange so we say that I think the
3129
02:26:25,979 --> 02:26:28,220
reason
3130
02:26:29,040 --> 02:26:33,060
might be overflow hidden
3131
02:26:33,060 --> 02:26:36,780
so in fact it might be
3132
02:26:36,780 --> 02:26:39,680
displayed
3133
02:26:44,640 --> 02:26:48,540
no don't be honest I don't see that
3134
02:26:48,540 --> 02:26:51,000
by the way let's give this one
3135
02:26:51,000 --> 02:26:52,680
key
3136
02:26:52,680 --> 02:26:56,180
product dot ID
3137
02:26:59,700 --> 02:27:03,500
and let's remove this again
3138
02:27:03,540 --> 02:27:07,760
and now this is displayed
3139
02:27:11,939 --> 02:27:15,660
this is outside of the if statement if
3140
02:27:15,660 --> 02:27:19,200
Court items length
3141
02:27:19,200 --> 02:27:21,920
is it so
3142
02:27:22,920 --> 02:27:24,899
no
3143
02:27:24,899 --> 02:27:28,520
it is actually in sight
3144
02:27:29,640 --> 02:27:33,800
also the button is not visible
3145
02:27:39,300 --> 02:27:42,780
PHP artisan
3146
02:27:42,780 --> 02:27:44,040
cash
3147
02:27:44,040 --> 02:27:46,819
clear
3148
02:27:51,960 --> 02:27:55,460
view clear
3149
02:28:00,180 --> 02:28:04,399
why I don't see the button
3150
02:28:06,060 --> 02:28:08,399
I know I'm making some stupid mistake
3151
02:28:08,399 --> 02:28:10,080
right here
3152
02:28:10,080 --> 02:28:11,819
and that's why the button is not
3153
02:28:11,819 --> 02:28:13,979
displayed which is
3154
02:28:13,979 --> 02:28:16,319
very annoying
3155
02:28:16,319 --> 02:28:20,120
when you make such mistakes
3156
02:28:20,580 --> 02:28:22,859
okay I think the reason might be that
3157
02:28:22,859 --> 02:28:25,439
inside the template it only displays the
3158
02:28:25,439 --> 02:28:26,939
first element
3159
02:28:26,939 --> 02:28:30,960
so if I wrap this in a div
3160
02:28:30,960 --> 02:28:34,520
and format this
3161
02:28:34,800 --> 02:28:36,840
let's save this and have a look in the
3162
02:28:36,840 --> 02:28:38,399
browser
3163
02:28:38,399 --> 02:28:40,319
here it goes
3164
02:28:40,319 --> 02:28:43,460
it was it
3165
02:28:43,859 --> 02:28:46,200
okay
3166
02:28:46,200 --> 02:28:48,840
um now right here we are outputting the
3167
02:28:48,840 --> 02:28:51,600
car total let's actually use the back
3168
02:28:51,600 --> 02:28:57,660
ticks and usually use the taller sign
3169
02:28:57,660 --> 02:29:00,300
and now we have the total price
3170
02:29:00,300 --> 02:29:03,060
formatted nicely so when you increase
3171
02:29:03,060 --> 02:29:05,700
the number of items in the card this one
3172
02:29:05,700 --> 02:29:09,979
also changes and this is what we wanted
3173
02:29:09,979 --> 02:29:13,380
and that happens through alpine.js
3174
02:29:13,380 --> 02:29:17,819
basically this re-evaluates and finally
3175
02:29:17,819 --> 02:29:21,479
we have the updated price
3176
02:29:21,479 --> 02:29:25,620
okay now I think what we need to do is
3177
02:29:25,620 --> 02:29:27,780
first test
3178
02:29:27,780 --> 02:29:30,420
adding items into the cart when the user
3179
02:29:30,420 --> 02:29:32,760
is authorized and also implement the
3180
02:29:32,760 --> 02:29:34,859
functionality when user logs in or
3181
02:29:34,859 --> 02:29:37,500
registers and then logs in
3182
02:29:37,500 --> 02:29:41,160
to move the items from the cookies into
3183
02:29:41,160 --> 02:29:43,020
the database
3184
02:29:43,020 --> 02:29:47,300
okay so I'm going to log in
3185
02:29:47,640 --> 02:29:51,120
and let's log in using zura and click
3186
02:29:51,120 --> 02:29:53,359
login
3187
02:29:53,460 --> 02:29:55,800
okay it redirects to dashboard and the
3188
02:29:55,800 --> 02:29:59,640
dashboard doesn't exist so we have to
3189
02:29:59,640 --> 02:30:03,240
find the root service provider and
3190
02:30:03,240 --> 02:30:05,819
change the home into slash
3191
02:30:05,819 --> 02:30:08,819
reload
3192
02:30:09,300 --> 02:30:11,939
okay now I'm authorized and my number of
3193
02:30:11,939 --> 02:30:14,939
items in the cart basically is zero
3194
02:30:14,939 --> 02:30:17,640
that's because nothing was moved in the
3195
02:30:17,640 --> 02:30:21,620
cart so I'm going to open
3196
02:30:21,620 --> 02:30:25,080
authenticated session controller
3197
02:30:25,080 --> 02:30:28,439
and right here in the store after the
3198
02:30:28,439 --> 02:30:30,300
session regenerate basically I'm going
3199
02:30:30,300 --> 02:30:34,439
to call cart helper move cart items into
3200
02:30:34,439 --> 02:30:37,979
DB and I'm going to do the same thing
3201
02:30:37,979 --> 02:30:42,240
in the registered user controller
3202
02:30:42,240 --> 02:30:46,620
after store after out logging
3203
02:30:46,620 --> 02:30:49,859
okay so we save this and now I'm going
3204
02:30:49,859 --> 02:30:51,720
to log out
3205
02:30:51,720 --> 02:30:54,479
now let's log in when I log out you see
3206
02:30:54,479 --> 02:30:56,939
I have something in the cookie so it
3207
02:30:56,939 --> 02:30:59,100
shows two right here
3208
02:30:59,100 --> 02:31:00,899
now I
3209
02:31:00,899 --> 02:31:03,960
log in
3210
02:31:03,960 --> 02:31:08,340
and now I have two items in the cart the
3211
02:31:08,340 --> 02:31:10,979
advantage of these is that it saves
3212
02:31:10,979 --> 02:31:13,680
those cart items in the database and if
3213
02:31:13,680 --> 02:31:16,920
I log in from another device I will have
3214
02:31:16,920 --> 02:31:20,939
those two items as well in my cart
3215
02:31:20,939 --> 02:31:22,380
okay
3216
02:31:22,380 --> 02:31:25,680
now let's say that I have those two
3217
02:31:25,680 --> 02:31:28,200
items the chair and the PlayStation in
3218
02:31:28,200 --> 02:31:30,780
the cart so I log out
3219
02:31:30,780 --> 02:31:33,420
I go in the cart I remove all those
3220
02:31:33,420 --> 02:31:34,560
items
3221
02:31:34,560 --> 02:31:36,780
and I see this text also which is nice
3222
02:31:36,780 --> 02:31:39,420
and I'm going to add
3223
02:31:39,420 --> 02:31:43,020
um Mouse in the cart okay I have one
3224
02:31:43,020 --> 02:31:45,260
Mouse in the card and two
3225
02:31:45,260 --> 02:31:49,080
items for the authorized users now I log
3226
02:31:49,080 --> 02:31:51,240
in and they should be merged and I
3227
02:31:51,240 --> 02:31:53,700
should have three items in the cart
3228
02:31:53,700 --> 02:31:55,439
okay and look at this
3229
02:31:55,439 --> 02:31:58,260
this is this is Handy and very important
3230
02:31:58,260 --> 02:32:00,300
feature by the way if you're building a
3231
02:32:00,300 --> 02:32:01,920
production ready e-commerce application
3232
02:32:01,920 --> 02:32:04,260
user experience is the most important
3233
02:32:04,260 --> 02:32:09,300
thing you have to give to to your users
3234
02:32:09,300 --> 02:32:12,180
all right and maybe we need to test the
3235
02:32:12,180 --> 02:32:16,740
registration I have a user John which
3236
02:32:16,740 --> 02:32:19,380
doesn't have email verified so as soon
3237
02:32:19,380 --> 02:32:22,439
as the user logs in we get the following
3238
02:32:22,439 --> 02:32:25,080
uh message even if I try to open the
3239
02:32:25,080 --> 02:32:28,620
cart or basically any other page it asks
3240
02:32:28,620 --> 02:32:31,640
me to verify my email
3241
02:32:31,640 --> 02:32:36,359
address so if I go right here and let's
3242
02:32:36,359 --> 02:32:41,120
actually resend the verification email
3243
02:32:42,620 --> 02:32:46,020
and here it comes I click verify email
3244
02:32:46,020 --> 02:32:50,939
address and now I am probably authorized
3245
02:32:50,939 --> 02:32:53,939
and verified and I am able to see all
3246
02:32:53,939 --> 02:32:57,000
the pages I need now let's log out
3247
02:32:57,000 --> 02:32:59,520
I have Mouse in the card and I'm gonna
3248
02:32:59,520 --> 02:33:03,660
register with another user Mary Mary it
3249
02:33:03,660 --> 02:33:04,960
example.com
3250
02:33:04,960 --> 02:33:06,180
[Music]
3251
02:33:06,180 --> 02:33:08,819
let's provide the password
3252
02:33:08,819 --> 02:33:11,880
okay and now pay attention Okay I have
3253
02:33:11,880 --> 02:33:14,640
one item in the cart the items from
3254
02:33:14,640 --> 02:33:17,600
cookie was moved into the database for
3255
02:33:17,600 --> 02:33:20,580
recently I did user Mary and I guess
3256
02:33:20,580 --> 02:33:24,540
Mary has id4 and I of course get the
3257
02:33:24,540 --> 02:33:27,180
verification email right here as well as
3258
02:33:27,180 --> 02:33:29,040
soon as I verify my email address I will
3259
02:33:29,040 --> 02:33:33,740
be able to access everything so I think
3260
02:33:33,740 --> 02:33:36,960
this finalizes the
3261
02:33:36,960 --> 02:33:39,359
cart management
3262
02:33:39,359 --> 02:33:41,520
no we actually missed one important
3263
02:33:41,520 --> 02:33:45,000
thing adding items into the cart from
3264
02:33:45,000 --> 02:33:47,819
the product inner page this is something
3265
02:33:47,819 --> 02:33:50,160
we haven't done
3266
02:33:50,160 --> 02:33:52,140
okay whenever I click this add to cart
3267
02:33:52,140 --> 02:33:53,819
button it should add the item into the
3268
02:33:53,819 --> 02:33:56,520
cart and I should also be able to change
3269
02:33:56,520 --> 02:33:59,100
the quantity and click it to cart yeah
3270
02:33:59,100 --> 02:34:01,260
this is something we haven't done
3271
02:34:01,260 --> 02:34:04,620
okay let's open resources views
3272
02:34:04,620 --> 02:34:09,800
product in View and right here
3273
02:34:09,960 --> 02:34:13,020
okay what do we have here let's search
3274
02:34:13,020 --> 02:34:17,460
for Aid to cart and on this button
3275
02:34:17,460 --> 02:34:19,800
we have the set to cards it accepts an
3276
02:34:19,800 --> 02:34:20,880
ID
3277
02:34:20,880 --> 02:34:23,760
let's remove this ID
3278
02:34:23,760 --> 02:34:27,780
and it takes the value from the quantity
3279
02:34:27,780 --> 02:34:30,060
from this input which has a reference
3280
02:34:30,060 --> 02:34:32,520
quantity L I think this is good so this
3281
02:34:32,520 --> 02:34:34,620
one takes the value and sends it to the
3282
02:34:34,620 --> 02:34:37,859
backend so let's save this and test this
3283
02:34:37,859 --> 02:34:40,319
go in the network
3284
02:34:40,319 --> 02:34:43,740
clear we have this on six and click it
3285
02:34:43,740 --> 02:34:45,899
to cart
3286
02:34:45,899 --> 02:34:50,359
maybe we need to reload the page first
3287
02:34:50,819 --> 02:34:53,340
and click add to cart and it doesn't
3288
02:34:53,340 --> 02:34:57,060
work and I think I know why
3289
02:34:57,060 --> 02:35:00,560
because we don't have the product
3290
02:35:00,560 --> 02:35:04,020
component in the app.js
3291
02:35:04,020 --> 02:35:07,979
this is a this is a data and this data
3292
02:35:07,979 --> 02:35:11,700
is not added on product
3293
02:35:11,700 --> 02:35:14,399
so maybe
3294
02:35:14,399 --> 02:35:16,080
what do we have right here this is a
3295
02:35:16,080 --> 02:35:19,200
gallery this is image gallery
3296
02:35:19,200 --> 02:35:21,720
and this one can be product section but
3297
02:35:21,720 --> 02:35:23,880
I'm going to actually create X data
3298
02:35:23,880 --> 02:35:25,439
right here
3299
02:35:25,439 --> 02:35:27,840
and I'm going to call product
3300
02:35:27,840 --> 02:35:29,399
item
3301
02:35:29,399 --> 02:35:32,040
and we're going to accept product right
3302
02:35:32,040 --> 02:35:35,040
here so right here basically I'm going
3303
02:35:35,040 --> 02:35:36,800
to run
3304
02:35:36,800 --> 02:35:41,640
blade template expressions and thing
3305
02:35:41,640 --> 02:35:45,140
called Json encode
3306
02:35:45,200 --> 02:35:50,340
uh we need to pass right here an array
3307
02:35:50,340 --> 02:35:53,420
and then
3308
02:35:53,760 --> 02:35:56,280
let's open
3309
02:35:56,280 --> 02:35:58,260
cart index
3310
02:35:58,260 --> 02:36:01,680
and I'm going to copy the following
3311
02:36:01,680 --> 02:36:05,160
or maybe we need to open product slash
3312
02:36:05,160 --> 02:36:09,120
index blade PHP and we copy the
3313
02:36:09,120 --> 02:36:11,700
following code we need to add to cart as
3314
02:36:11,700 --> 02:36:14,760
well so and go in the view and paste
3315
02:36:14,760 --> 02:36:15,600
that
3316
02:36:15,600 --> 02:36:17,160
now let's
3317
02:36:17,160 --> 02:36:20,300
format this
3318
02:36:25,560 --> 02:36:28,100
okay
3319
02:36:31,680 --> 02:36:35,760
here it goes so now we have product data
3320
02:36:35,760 --> 02:36:37,920
and whenever
3321
02:36:37,920 --> 02:36:41,399
we call into cart we should call the up
3322
02:36:41,399 --> 02:36:45,359
JSA to cart let's refresh the page
3323
02:36:45,359 --> 02:36:48,420
clearing Network and click it to card
3324
02:36:48,420 --> 02:36:50,700
for five items
3325
02:36:50,700 --> 02:36:53,700
okay it made request and now we have six
3326
02:36:53,700 --> 02:36:55,200
right here
3327
02:36:55,200 --> 02:36:59,939
okay this is as easy as like that
3328
02:36:59,939 --> 02:37:02,580
so we have the collapse working
3329
02:37:02,580 --> 02:37:06,780
we have we can set this into okay we
3330
02:37:06,780 --> 02:37:09,620
need to give this one some minimum value
3331
02:37:09,620 --> 02:37:13,080
minimum equals one
3332
02:37:13,080 --> 02:37:15,840
reload the page you can't go below one
3333
02:37:15,840 --> 02:37:18,960
so click and now it's seven now let's
3334
02:37:18,960 --> 02:37:20,100
say three
3335
02:37:20,100 --> 02:37:22,380
there are 10. we click on the card we
3336
02:37:22,380 --> 02:37:25,080
see nine items right here we reduce the
3337
02:37:25,080 --> 02:37:26,960
quantity
3338
02:37:26,960 --> 02:37:30,780
and I think we finished the cart
3339
02:37:30,780 --> 02:37:32,580
management so we have implemented the
3340
02:37:32,580 --> 02:37:34,439
adding items into the card from the list
3341
02:37:34,439 --> 02:37:37,620
as well as from the inner page we show
3342
02:37:37,620 --> 02:37:40,080
the notification we implemented the
3343
02:37:40,080 --> 02:37:42,660
moving items from the cart into the
3344
02:37:42,660 --> 02:37:46,020
database if the user is authorized we
3345
02:37:46,020 --> 02:37:48,479
haven't tested this probably but if the
3346
02:37:48,479 --> 02:37:51,540
user is authorized and we click
3347
02:37:51,540 --> 02:37:54,300
it took art it should create records in
3348
02:37:54,300 --> 02:37:56,520
the database immediately how many
3349
02:37:56,520 --> 02:37:58,380
records we have in the database we have
3350
02:37:58,380 --> 02:37:59,819
totally
3351
02:37:59,819 --> 02:38:03,000
uh which user I am I am the second user
3352
02:38:03,000 --> 02:38:06,180
I guess and there are four items four
3353
02:38:06,180 --> 02:38:07,380
rows
3354
02:38:07,380 --> 02:38:10,620
uh in the database let's create so let's
3355
02:38:10,620 --> 02:38:11,880
add
3356
02:38:11,880 --> 02:38:14,939
the laptop into the card so click right
3357
02:38:14,939 --> 02:38:16,140
here
3358
02:38:16,140 --> 02:38:20,340
and it doesn't work here we found the
3359
02:38:20,340 --> 02:38:23,160
bug a user ID to fillable property to
3360
02:38:23,160 --> 02:38:26,460
allow Mass assignment I think yeah we
3361
02:38:26,460 --> 02:38:29,399
missed that okay now let's open cart
3362
02:38:29,399 --> 02:38:30,660
item
3363
02:38:30,660 --> 02:38:33,540
you need to test your code carefully so
3364
02:38:33,540 --> 02:38:37,560
we put fillable right here and what
3365
02:38:37,560 --> 02:38:40,260
attributes do we need
3366
02:38:40,260 --> 02:38:42,600
we will need
3367
02:38:42,600 --> 02:38:46,560
user ID we will need
3368
02:38:46,560 --> 02:38:48,840
product ID
3369
02:38:48,840 --> 02:38:52,500
we will need what else do we need
3370
02:38:52,500 --> 02:38:55,020
user ID product ID and quantity I guess
3371
02:38:55,020 --> 02:38:57,120
we don't need
3372
02:38:57,120 --> 02:39:00,540
oh we don't need anything else
3373
02:39:00,540 --> 02:39:03,560
in the quantity
3374
02:39:03,560 --> 02:39:06,479
and by the way the created it and
3375
02:39:06,479 --> 02:39:10,260
updated it is not populated so we have
3376
02:39:10,260 --> 02:39:14,280
to fix this one as well so let's save
3377
02:39:14,280 --> 02:39:17,359
this and first
3378
02:39:17,399 --> 02:39:20,520
trigger it to cart again okay now this
3379
02:39:20,520 --> 02:39:23,640
was added in the cart and we should see
3380
02:39:23,640 --> 02:39:25,800
one more record in the database for the
3381
02:39:25,800 --> 02:39:29,399
second user product id1 and now we have
3382
02:39:29,399 --> 02:39:33,800
created that and updated it
3383
02:39:34,140 --> 02:39:37,200
in this section we have implemented the
3384
02:39:37,200 --> 02:39:40,020
profile details update as well as the
3385
02:39:40,020 --> 02:39:43,080
password update and the HTML right here
3386
02:39:43,080 --> 02:39:45,180
the template basically is taken again
3387
02:39:45,180 --> 02:39:47,520
from the following theme so right here
3388
02:39:47,520 --> 02:39:48,660
we have
3389
02:39:48,660 --> 02:39:51,240
profile HTML so that was grabbed and
3390
02:39:51,240 --> 02:39:53,640
integrated into larval and let's
3391
02:39:53,640 --> 02:39:56,220
understand how this process was actually
3392
02:39:56,220 --> 02:39:57,960
done and we have right here this
3393
02:39:57,960 --> 02:39:59,939
checkbox as well so whenever you modify
3394
02:39:59,939 --> 02:40:02,100
something in the billing address and you
3395
02:40:02,100 --> 02:40:03,720
hit the checkbox it's going to copy that
3396
02:40:03,720 --> 02:40:06,000
into shipping address as well so let's
3397
02:40:06,000 --> 02:40:07,620
Now understand how this was actually
3398
02:40:07,620 --> 02:40:12,000
made so we first created the immigration
3399
02:40:12,000 --> 02:40:14,640
and that migration basically changed
3400
02:40:14,640 --> 02:40:16,620
these states which was a text column
3401
02:40:16,620 --> 02:40:19,800
into a Json column because inside the
3402
02:40:19,800 --> 02:40:22,260
stage we're going to basically save
3403
02:40:22,260 --> 02:40:25,200
um array of states for a specific
3404
02:40:25,200 --> 02:40:28,020
country okay states are relevant for not
3405
02:40:28,020 --> 02:40:30,479
for all countries like you for USA it's
3406
02:40:30,479 --> 02:40:31,500
really
3407
02:40:31,500 --> 02:40:34,260
um very relevant and that was done like
3408
02:40:34,260 --> 02:40:36,000
this so we have also created country
3409
02:40:36,000 --> 02:40:38,819
Cedar inside there we just
3410
02:40:38,819 --> 02:40:41,760
um save in the database few countries
3411
02:40:41,760 --> 02:40:46,500
and for USA we save um like four how
3412
02:40:46,500 --> 02:40:48,300
many states we have we have five states
3413
02:40:48,300 --> 02:40:50,520
for USA and we have four countries so
3414
02:40:50,520 --> 02:40:52,200
these are just for the implementation
3415
02:40:52,200 --> 02:40:55,319
purposes uh I didn't spend time to save
3416
02:40:55,319 --> 02:40:57,780
all the countries and all the states and
3417
02:40:57,780 --> 02:40:59,460
we have the database leader inside which
3418
02:40:59,460 --> 02:41:03,000
we registered our country Cedar and the
3419
02:41:03,000 --> 02:41:05,700
most interesting part starts in the in
3420
02:41:05,700 --> 02:41:07,319
the controller basically so in the
3421
02:41:07,319 --> 02:41:08,819
profile controller so we basically
3422
02:41:08,819 --> 02:41:11,939
render The View for the for the customer
3423
02:41:11,939 --> 02:41:14,280
customer details we get the customer
3424
02:41:14,280 --> 02:41:17,460
addresses uh and if the addresses
3425
02:41:17,460 --> 02:41:19,859
doesn't exist they are created the first
3426
02:41:19,859 --> 02:41:22,620
time and we have right here store method
3427
02:41:22,620 --> 02:41:25,380
which basically runs all the checks if
3428
02:41:25,380 --> 02:41:26,880
the shipping address exists it's going
3429
02:41:26,880 --> 02:41:28,380
to run an update if not then it's going
3430
02:41:28,380 --> 02:41:30,600
to be created now we have a password
3431
02:41:30,600 --> 02:41:32,939
update right here as well and we have
3432
02:41:32,939 --> 02:41:35,520
created password update request with the
3433
02:41:35,520 --> 02:41:38,100
validation rules as well as the profile
3434
02:41:38,100 --> 02:41:40,920
update request with all the fields and
3435
02:41:40,920 --> 02:41:43,439
validation rules and the most
3436
02:41:43,439 --> 02:41:45,060
interesting and tricky part is the
3437
02:41:45,060 --> 02:41:47,280
component's input that is that input
3438
02:41:47,280 --> 02:41:51,300
became a very reusable input it has a
3439
02:41:51,300 --> 02:41:53,340
support for select right there as well
3440
02:41:53,340 --> 02:41:55,220
which accepts
3441
02:41:55,220 --> 02:41:57,560
uh which accepts
3442
02:41:57,560 --> 02:42:00,479
options and renders basically like this
3443
02:42:00,479 --> 02:42:03,359
and it has also validation support and
3444
02:42:03,359 --> 02:42:05,520
few other good things have been added
3445
02:42:05,520 --> 02:42:07,800
inside this input component and of
3446
02:42:07,800 --> 02:42:10,020
course the view blade itself which as I
3447
02:42:10,020 --> 02:42:12,660
mentioned is just copied and pasted uh
3448
02:42:12,660 --> 02:42:16,200
from this theme and we just tweaked a
3449
02:42:16,200 --> 02:42:18,960
little bit so we are using the alpine.js
3450
02:42:18,960 --> 02:42:21,600
to display the flash messages so as a
3451
02:42:21,600 --> 02:42:23,819
result when we click on this update
3452
02:42:23,819 --> 02:42:26,700
range here we're going to see these nice
3453
02:42:26,700 --> 02:42:28,920
um with progress bar message success
3454
02:42:28,920 --> 02:42:30,540
message box that the profile was
3455
02:42:30,540 --> 02:42:32,520
successfully updated and this is done
3456
02:42:32,520 --> 02:42:34,560
through this alpine.js flash messages
3457
02:42:34,560 --> 02:42:37,020
and it's going to time out of after this
3458
02:42:37,020 --> 02:42:38,819
amount of time we are using a
3459
02:42:38,819 --> 02:42:41,040
combination of alpine.js and laravel
3460
02:42:41,040 --> 02:42:43,319
right here to achieve the best possible
3461
02:42:43,319 --> 02:42:45,000
result and the result is actually
3462
02:42:45,000 --> 02:42:47,220
achieved so if I just remove the one
3463
02:42:47,220 --> 02:42:48,840
field that's going to make the field
3464
02:42:48,840 --> 02:42:51,600
required and this is done through both
3465
02:42:51,600 --> 02:42:54,540
as I mentioned laravel and alpine.js
3466
02:42:54,540 --> 02:42:56,520
okay and just like this we have
3467
02:42:56,520 --> 02:42:59,460
implemented the profile update as well
3468
02:42:59,460 --> 02:43:02,640
as well as the password update and now
3469
02:43:02,640 --> 02:43:04,859
let's start working on the stripe
3470
02:43:04,859 --> 02:43:07,560
checkout process and I'm offering you
3471
02:43:07,560 --> 02:43:10,380
the full process of the stripe checkout
3472
02:43:10,380 --> 02:43:13,200
which is I think about two hours or even
3473
02:43:13,200 --> 02:43:16,080
maybe more the full process how to
3474
02:43:16,080 --> 02:43:19,020
correctly correctly Implement stripe
3475
02:43:19,020 --> 02:43:21,240
online payments stripe checkout online
3476
02:43:21,240 --> 02:43:23,220
payments in your project and how to
3477
02:43:23,220 --> 02:43:26,220
configure web hooks as well so enjoy
3478
02:43:26,220 --> 02:43:29,340
this particular section now let's start
3479
02:43:29,340 --> 02:43:32,520
working on payments and we're going to
3480
02:43:32,520 --> 02:43:35,040
do payments using stripe
3481
02:43:35,040 --> 02:43:39,120
make sure to have an account on stripe
3482
02:43:39,120 --> 02:43:42,120
first I already created an account the
3483
02:43:42,120 --> 02:43:44,939
process is very straightforward like you
3484
02:43:44,939 --> 02:43:48,720
we can Google stripe uh sign up it will
3485
02:43:48,720 --> 02:43:51,300
give you registration page you just need
3486
02:43:51,300 --> 02:43:53,040
to fill up the form and as soon as you
3487
02:43:53,040 --> 02:43:54,960
fill up the form you will be redirected
3488
02:43:54,960 --> 02:43:58,760
and you will have test mode enabled okay
3489
02:43:58,760 --> 02:44:01,380
when the test mode is enabled you can
3490
02:44:01,380 --> 02:44:03,600
actually Implement your functionality
3491
02:44:03,600 --> 02:44:06,780
use the test publishable keys and secret
3492
02:44:06,780 --> 02:44:09,720
keys but as soon as you want to go to
3493
02:44:09,720 --> 02:44:11,760
live you have to provide bunch of
3494
02:44:11,760 --> 02:44:14,880
information to stripe and here are like
3495
02:44:14,880 --> 02:44:19,200
five step activation process which needs
3496
02:44:19,200 --> 02:44:22,500
to be completed to get the permission to
3497
02:44:22,500 --> 02:44:24,780
go live basically but as far as we are
3498
02:44:24,780 --> 02:44:26,460
in the test mode we should be fine to
3499
02:44:26,460 --> 02:44:28,560
implement stripe
3500
02:44:28,560 --> 02:44:30,020
all right
3501
02:44:30,020 --> 02:44:32,460
I'm going to look for
3502
02:44:32,460 --> 02:44:36,540
PHP stripe GitHub package
3503
02:44:36,540 --> 02:44:38,760
I believe this is the one let's open the
3504
02:44:38,760 --> 02:44:40,680
second one as well I think the second
3505
02:44:40,680 --> 02:44:42,540
one is for reals is
3506
02:44:42,540 --> 02:44:45,479
okay and let's move down below you know
3507
02:44:45,479 --> 02:44:48,420
let me actually log into change the
3508
02:44:48,420 --> 02:44:50,819
theme into dark mode
3509
02:44:50,819 --> 02:44:53,340
all right okay let's first install the
3510
02:44:53,340 --> 02:44:57,060
stripe package so I'm gonna get this and
3511
02:44:57,060 --> 02:45:00,780
open my terminal and paste this
3512
02:45:00,780 --> 02:45:03,720
then I think the readme doesn't describe
3513
02:45:03,720 --> 02:45:07,260
every step every step that is necessary
3514
02:45:07,260 --> 02:45:09,660
so of course tripe is a huge service and
3515
02:45:09,660 --> 02:45:13,140
they have a lot of payment uh a lot of
3516
02:45:13,140 --> 02:45:14,760
different types of payments like
3517
02:45:14,760 --> 02:45:17,939
recurring payments one-time payments and
3518
02:45:17,939 --> 02:45:19,800
few others of course subscription type
3519
02:45:19,800 --> 02:45:22,500
and so on so what we're going to look
3520
02:45:22,500 --> 02:45:25,920
for is a stripe let's first open stripe
3521
02:45:25,920 --> 02:45:28,520
documentation
3522
02:45:28,560 --> 02:45:32,220
and we are interested in to accept
3523
02:45:32,220 --> 02:45:36,200
accept a one-time payment
3524
02:45:36,240 --> 02:45:39,240
um accept a payment okay let's find
3525
02:45:39,240 --> 02:45:40,319
these
3526
02:45:40,319 --> 02:45:43,500
I went dark theme
3527
02:45:43,500 --> 02:45:46,500
think I don't hacked okay I think this
3528
02:45:46,500 --> 02:45:48,359
is what we want so we have to set up the
3529
02:45:48,359 --> 02:45:49,319
stripe
3530
02:45:49,319 --> 02:45:50,939
um this is what we have already done
3531
02:45:50,939 --> 02:45:53,760
then we have to redirect customer to the
3532
02:45:53,760 --> 02:45:55,920
stripe checkout page and we have to
3533
02:45:55,920 --> 02:45:58,140
create a button actually we do have the
3534
02:45:58,140 --> 02:46:01,260
button if we go in the home page and we
3535
02:46:01,260 --> 02:46:03,720
add a few items in the cart actually I I
3536
02:46:03,720 --> 02:46:06,720
already have two items in the cart so I
3537
02:46:06,720 --> 02:46:08,340
click this procedure to check out
3538
02:46:08,340 --> 02:46:11,520
whenever I click this we need to submit
3539
02:46:11,520 --> 02:46:15,380
to our laravel root and basically
3540
02:46:15,380 --> 02:46:18,479
generate uh stripe checkout session
3541
02:46:18,479 --> 02:46:20,760
let's scroll down below and we will find
3542
02:46:20,760 --> 02:46:22,800
more examples
3543
02:46:22,800 --> 02:46:24,960
I think this example uses the slim
3544
02:46:24,960 --> 02:46:27,359
framework which we don't need however
3545
02:46:27,359 --> 02:46:30,120
this is what we need Okay so this
3546
02:46:30,120 --> 02:46:31,560
generates a session
3547
02:46:31,560 --> 02:46:34,859
and then we have the session URL okay
3548
02:46:34,859 --> 02:46:37,380
and we can redirect user to the session
3549
02:46:37,380 --> 02:46:41,399
URL let me actually grab this
3550
02:46:41,399 --> 02:46:44,280
and let's open also
3551
02:46:44,280 --> 02:46:48,899
let's open cart index play this is the
3552
02:46:48,899 --> 02:46:50,880
cart page and here we have the proceed
3553
02:46:50,880 --> 02:46:52,800
to checkout so I'm going to generate
3554
02:46:52,800 --> 02:46:55,040
form with action
3555
02:46:55,040 --> 02:46:58,439
root will be cart checkout we're going
3556
02:46:58,439 --> 02:47:00,600
to create the root and then we're going
3557
02:47:00,600 --> 02:47:03,660
to have method to be post
3558
02:47:03,660 --> 02:47:06,180
okay we will need
3559
02:47:06,180 --> 02:47:07,920
um csrf
3560
02:47:07,920 --> 02:47:10,439
and let's move this up
3561
02:47:10,439 --> 02:47:13,020
Oops I did something wrong
3562
02:47:13,020 --> 02:47:15,600
uh I I have something copied and I
3563
02:47:15,600 --> 02:47:18,359
didn't want to cut these I didn't want
3564
02:47:18,359 --> 02:47:19,380
to lose
3565
02:47:19,380 --> 02:47:21,660
the copied script but I think I have
3566
02:47:21,660 --> 02:47:24,120
already lost that so that's fine now
3567
02:47:24,120 --> 02:47:26,520
let's open a web PHP
3568
02:47:26,520 --> 02:47:30,120
and let's put this right here user needs
3569
02:47:30,120 --> 02:47:32,880
to be authorized so post request needs
3570
02:47:32,880 --> 02:47:36,240
to come on cart checkout
3571
02:47:36,240 --> 02:47:40,380
uh we're gonna use cart controller
3572
02:47:40,380 --> 02:47:44,939
class checkout oops checkout
3573
02:47:44,939 --> 02:47:47,220
will be the method and let's give this
3574
02:47:47,220 --> 02:47:50,760
name cart dot checkout
3575
02:47:50,760 --> 02:47:53,280
awesome now let's open card controller
3576
02:47:53,280 --> 02:47:55,260
scroll down below
3577
02:47:55,260 --> 02:47:58,859
and create public function
3578
02:47:58,859 --> 02:48:01,439
checkout we're going to accept request
3579
02:48:01,439 --> 02:48:03,319
of course right here
3580
02:48:03,319 --> 02:48:08,420
and let me now copy
3581
02:48:08,880 --> 02:48:10,740
um what do we need to copy so first we
3582
02:48:10,740 --> 02:48:12,899
have to set this set API key and that's
3583
02:48:12,899 --> 02:48:16,260
going to be the secret key so I'm going
3584
02:48:16,260 --> 02:48:18,180
to put this we have to put the secret
3585
02:48:18,180 --> 02:48:21,180
key in the enf of course so let's open
3586
02:48:21,180 --> 02:48:22,939
enf
3587
02:48:22,939 --> 02:48:27,060
and and let's look for secrets
3588
02:48:27,060 --> 02:48:29,899
let's remove this
3589
02:48:35,300 --> 02:48:40,140
AWS Pusher stripe secret key
3590
02:48:40,140 --> 02:48:43,560
okay so we have some secret keys
3591
02:48:43,560 --> 02:48:46,740
uh which is fine but I think mine will
3592
02:48:46,740 --> 02:48:48,479
be different because I I haven't set
3593
02:48:48,479 --> 02:48:51,720
this secret Keys probably that came out
3594
02:48:51,720 --> 02:48:53,520
of the box
3595
02:48:53,520 --> 02:48:57,060
okay so let's search for API
3596
02:48:57,060 --> 02:48:59,040
or I think I have it right here for
3597
02:48:59,040 --> 02:49:02,040
developers okay this is the publishable
3598
02:49:02,040 --> 02:49:04,200
key and this is the secret key so I'm
3599
02:49:04,200 --> 02:49:06,240
going to click the secret key
3600
02:49:06,240 --> 02:49:10,140
and I'm going to copy this and then I'm
3601
02:49:10,140 --> 02:49:13,859
going to put this right here
3602
02:49:13,859 --> 02:49:16,020
okay I think this is mine I I think I
3603
02:49:16,020 --> 02:49:17,460
have said this
3604
02:49:17,460 --> 02:49:19,319
um maybe before when I was actually
3605
02:49:19,319 --> 02:49:20,939
experimenting
3606
02:49:20,939 --> 02:49:23,460
okay now I have to copy the uh
3607
02:49:23,460 --> 02:49:25,140
publishable key as well and I'm going to
3608
02:49:25,140 --> 02:49:29,040
put this right here as well all right so
3609
02:49:29,040 --> 02:49:31,560
we have them now let me take the stripe
3610
02:49:31,560 --> 02:49:34,740
secret key in the card controller and
3611
02:49:34,740 --> 02:49:38,700
replace this with the
3612
02:49:38,700 --> 02:49:40,020
get
3613
02:49:40,020 --> 02:49:42,140
EnV
3614
02:49:42,140 --> 02:49:45,780
stripe secret key okay so now we have
3615
02:49:45,780 --> 02:49:48,660
that let's open now documentation
3616
02:49:48,660 --> 02:49:52,319
and we have to take and create the
3617
02:49:52,319 --> 02:49:55,979
session and then redirect user to the
3618
02:49:55,979 --> 02:49:57,560
specified
3619
02:49:57,560 --> 02:50:02,040
session ID okay so what line items we
3620
02:50:02,040 --> 02:50:03,899
have to pass the line items are
3621
02:50:03,899 --> 02:50:06,240
basically whatever we have right now in
3622
02:50:06,240 --> 02:50:08,460
the cart okay because we are on the cart
3623
02:50:08,460 --> 02:50:10,920
page we click proceed to checkout and we
3624
02:50:10,920 --> 02:50:12,420
have to be redirected to the stripe
3625
02:50:12,420 --> 02:50:14,220
checkout page and we have to take those
3626
02:50:14,220 --> 02:50:16,979
line items and pass it to stripe
3627
02:50:16,979 --> 02:50:19,080
okay so we have
3628
02:50:19,080 --> 02:50:21,420
um helper I think it's called cart
3629
02:50:21,420 --> 02:50:22,620
helper
3630
02:50:22,620 --> 02:50:24,680
uh cart
3631
02:50:24,680 --> 02:50:29,399
uh get cart items we have those
3632
02:50:29,399 --> 02:50:32,520
cart items
3633
02:50:32,520 --> 02:50:35,640
and let me actually die in dump
3634
02:50:35,640 --> 02:50:37,800
cart items
3635
02:50:37,800 --> 02:50:41,220
okay let's reload the page
3636
02:50:41,220 --> 02:50:44,340
let's click proceed to check out and we
3637
02:50:44,340 --> 02:50:48,120
see two card items right here and we
3638
02:50:48,120 --> 02:50:51,600
have product ID in quantity and I think
3639
02:50:51,600 --> 02:50:54,180
we don't have anything else however we
3640
02:50:54,180 --> 02:50:56,939
want the whole product information
3641
02:50:56,939 --> 02:51:00,660
so maybe we need to get the get the IDS
3642
02:51:00,660 --> 02:51:02,399
and then make a
3643
02:51:02,399 --> 02:51:04,560
make a keyword in the database to get
3644
02:51:04,560 --> 02:51:06,600
the products I think I have done this
3645
02:51:06,600 --> 02:51:09,600
above
3646
02:51:10,020 --> 02:51:14,399
I think I'm sure I have done this
3647
02:51:14,399 --> 02:51:18,180
uh this is not add probably index yeah
3648
02:51:18,180 --> 02:51:20,100
we get the cart items then we get the
3649
02:51:20,100 --> 02:51:23,460
IDS then we cure it to get the products
3650
02:51:23,460 --> 02:51:27,359
and then we have the cart items as well
3651
02:51:27,359 --> 02:51:30,780
which is indexed by product ID
3652
02:51:30,780 --> 02:51:32,180
okay
3653
02:51:32,180 --> 02:51:34,920
I can copy this
3654
02:51:34,920 --> 02:51:38,460
and this will give me the products
3655
02:51:38,460 --> 02:51:40,319
let's go down below
3656
02:51:40,319 --> 02:51:43,020
and let's put this right here okay so
3657
02:51:43,020 --> 02:51:45,420
now I have products and let me down
3658
02:51:45,420 --> 02:51:47,880
these products
3659
02:51:47,880 --> 02:51:51,300
let's reload the page
3660
02:51:51,300 --> 02:51:54,240
here we go I have two
3661
02:51:54,240 --> 02:51:57,000
um two products and let's go in the
3662
02:51:57,000 --> 02:52:00,300
where are the attributes here it is okay
3663
02:52:00,300 --> 02:52:02,700
and we have everything what we need and
3664
02:52:02,700 --> 02:52:06,120
let's now create line items array so I'm
3665
02:52:06,120 --> 02:52:09,779
going to create line items empty array
3666
02:52:09,779 --> 02:52:12,060
then I'm going to iterate over my
3667
02:52:12,060 --> 02:52:15,359
products and inside each line item I'm
3668
02:52:15,359 --> 02:52:17,640
going to push
3669
02:52:17,640 --> 02:52:21,359
um the following object
3670
02:52:21,359 --> 02:52:25,200
okay let's remove tie and dump and we
3671
02:52:25,200 --> 02:52:26,640
will also need
3672
02:52:26,640 --> 02:52:30,060
cart items to be indexed by a product ID
3673
02:52:30,060 --> 02:52:31,500
because we're going to use that for
3674
02:52:31,500 --> 02:52:33,899
quantity so I'm going to get this
3675
02:52:33,899 --> 02:52:35,760
actually you know what
3676
02:52:35,760 --> 02:52:37,979
now I see that I have code duplication
3677
02:52:37,979 --> 02:52:39,600
okay
3678
02:52:39,600 --> 02:52:43,740
so whenever I put this now I have these
3679
02:52:43,740 --> 02:52:45,840
four lines duplicated in the first
3680
02:52:45,840 --> 02:52:48,359
method and right here as well so I'm
3681
02:52:48,359 --> 02:52:50,340
going to extract this into a separate
3682
02:52:50,340 --> 02:52:53,700
method and I'm going to call this get
3683
02:52:53,700 --> 02:52:56,939
uh get products
3684
02:52:56,939 --> 02:52:57,540
um
3685
02:52:57,540 --> 02:53:01,740
kit products and cart items just like
3686
02:53:01,740 --> 02:53:02,520
this
3687
02:53:02,520 --> 02:53:06,300
okay I'm going to extract this
3688
02:53:06,300 --> 02:53:08,040
okay it found out that there was a
3689
02:53:08,040 --> 02:53:09,479
second occurrence
3690
02:53:09,479 --> 02:53:12,060
um with the same code and I'm going to
3691
02:53:12,060 --> 02:53:14,399
replace this one as well however right
3692
02:53:14,399 --> 02:53:18,180
here I need cart items as well so this
3693
02:53:18,180 --> 02:53:20,040
one probably returns products but I'm
3694
02:53:20,040 --> 02:53:22,260
gonna return an area where we have
3695
02:53:22,260 --> 02:53:24,660
products and cart items
3696
02:53:24,660 --> 02:53:26,100
okay
3697
02:53:26,100 --> 02:53:29,160
I think a little bit formatting is
3698
02:53:29,160 --> 02:53:31,500
necessary okay let's remove this
3699
02:53:31,500 --> 02:53:34,260
now we have products and cart items and
3700
02:53:34,260 --> 02:53:37,460
I'm using this right here and let's call
3701
02:53:37,460 --> 02:53:41,700
list and take out products and cut items
3702
02:53:41,700 --> 02:53:43,979
from here
3703
02:53:43,979 --> 02:53:46,859
awesome let's move up and modify this
3704
02:53:46,859 --> 02:53:49,380
part as well so we get list
3705
02:53:49,380 --> 02:53:54,180
and cart items okay I don't like code
3706
02:53:54,180 --> 02:53:57,420
duplication okay perfect let's actually
3707
02:53:57,420 --> 02:53:59,640
render the page to make sure that
3708
02:53:59,640 --> 02:54:03,720
rendering works fine right here I mean
3709
02:54:03,720 --> 02:54:06,840
it should be just cart page
3710
02:54:06,840 --> 02:54:09,720
okay here are mark my cart items which
3711
02:54:09,720 --> 02:54:12,540
is fine now let's scroll down below
3712
02:54:12,540 --> 02:54:15,920
uh right here
3713
02:54:16,140 --> 02:54:18,660
and now I'm going to set the currency to
3714
02:54:18,660 --> 02:54:21,899
be USD because I I have only USD uh
3715
02:54:21,899 --> 02:54:26,180
currency I don't have like anything else
3716
02:54:26,819 --> 02:54:30,600
well then we have to specify uh specify
3717
02:54:30,600 --> 02:54:33,800
line items right here
3718
02:54:33,840 --> 02:54:36,720
we have the product data and we can
3719
02:54:36,720 --> 02:54:38,939
specify right here name
3720
02:54:38,939 --> 02:54:40,740
to be
3721
02:54:40,740 --> 02:54:42,840
product
3722
02:54:42,840 --> 02:54:47,180
title or name oh it's called
3723
02:54:48,779 --> 02:54:52,020
um yeah tight or a title and we have
3724
02:54:52,020 --> 02:54:54,840
unit amount which is
3725
02:54:54,840 --> 02:54:56,760
product price
3726
02:54:56,760 --> 02:55:01,200
so we have product price I'm recording
3727
02:55:01,200 --> 02:55:04,140
this tutorial like on weekends because I
3728
02:55:04,140 --> 02:55:05,399
don't have time
3729
02:55:05,399 --> 02:55:06,060
um
3730
02:55:06,060 --> 02:55:08,819
for like every every day and then it
3731
02:55:08,819 --> 02:55:11,340
keeps forgetting me how my schema looks
3732
02:55:11,340 --> 02:55:14,000
like so apologies for this
3733
02:55:14,000 --> 02:55:17,700
and then cart item from the cart items
3734
02:55:17,700 --> 02:55:21,479
for the given product ID we have to take
3735
02:55:21,479 --> 02:55:23,340
quantity
3736
02:55:23,340 --> 02:55:25,319
now it's going to be an array so we have
3737
02:55:25,319 --> 02:55:27,660
to take quantity with the area notation
3738
02:55:27,660 --> 02:55:30,960
okay we have cart items let's actually
3739
02:55:30,960 --> 02:55:35,340
die in down card items I like to be sure
3740
02:55:35,340 --> 02:55:38,220
that everything is okay
3741
02:55:38,220 --> 02:55:42,960
say we have two items we have price
3742
02:55:42,960 --> 02:55:46,080
okay we have quantity
3743
02:55:46,080 --> 02:55:49,260
perfect let's actually test one more
3744
02:55:49,260 --> 02:55:51,540
thing I'm going to increase the quantity
3745
02:55:51,540 --> 02:55:55,500
and then proceed to check out
3746
02:55:55,500 --> 02:55:57,840
now let's see the first one has quantity
3747
02:55:57,840 --> 02:56:00,300
four all right so far so good
3748
02:56:00,300 --> 02:56:02,399
um we can we need to redirect user to
3749
02:56:02,399 --> 02:56:05,040
the checkout page and we can actually do
3750
02:56:05,040 --> 02:56:07,340
this
3751
02:56:07,380 --> 02:56:08,939
um let's
3752
02:56:08,939 --> 02:56:12,720
return redirect
3753
02:56:13,020 --> 02:56:16,880
uh we have to specify
3754
02:56:17,279 --> 02:56:18,779
huh
3755
02:56:18,779 --> 02:56:21,120
we have to specify right here probably
3756
02:56:21,120 --> 02:56:23,640
session
3757
02:56:23,640 --> 02:56:26,479
URL
3758
02:56:27,660 --> 02:56:32,960
and let's see let's reload the page
3759
02:56:34,979 --> 02:56:36,960
invalid integer
3760
02:56:36,960 --> 02:56:38,520
okay
3761
02:56:38,520 --> 02:56:43,700
it expects the unit amount
3762
02:56:45,540 --> 02:56:48,600
unit amount of integer okay what is the
3763
02:56:48,600 --> 02:56:51,180
unit amount I I think that should be
3764
02:56:51,180 --> 02:56:54,200
price right
3765
02:56:54,479 --> 02:56:57,359
is there any explanation about the unit
3766
02:56:57,359 --> 02:57:00,020
amount
3767
02:57:03,600 --> 02:57:07,020
same Tunes unit amount but that accepts
3768
02:57:07,020 --> 02:57:10,020
unit amount decimal a high C so we have
3769
02:57:10,020 --> 02:57:13,200
unit amount decimal as well
3770
02:57:13,200 --> 02:57:18,620
like I found this right here somewhere
3771
02:57:25,020 --> 02:57:27,720
you need to mount is an integer
3772
02:57:27,720 --> 02:57:30,240
but we have unit amount there there
3773
02:57:30,240 --> 02:57:32,880
should be a unit amount decimal let's
3774
02:57:32,880 --> 02:57:35,939
try if it doesn't exist we'll find
3775
02:57:35,939 --> 02:57:38,240
something
3776
02:57:38,279 --> 02:57:41,460
okay here we go so we see
3777
02:57:41,460 --> 02:57:43,859
this right payment page
3778
02:57:43,859 --> 02:57:44,460
um
3779
02:57:44,460 --> 02:57:47,779
we have this element as quantity four
3780
02:57:47,779 --> 02:57:54,080
and it has price for each and this one
3781
02:57:54,540 --> 02:57:57,660
this one has
3782
02:57:57,660 --> 02:58:00,540
I think the prices are too small and I
3783
02:58:00,540 --> 02:58:02,520
think I know why because this accepts
3784
02:58:02,520 --> 02:58:04,020
expects
3785
02:58:04,020 --> 02:58:06,720
um I'll specify this unit amount this
3786
02:58:06,720 --> 02:58:10,020
expects incense probably
3787
02:58:10,020 --> 02:58:12,540
so we have to multiply whatever we have
3788
02:58:12,540 --> 02:58:16,439
right here we have to multiply this 100.
3789
02:58:16,439 --> 02:58:20,640
okay let's go back below the page
3790
02:58:20,640 --> 02:58:25,140
and let's click procedure checkout
3791
02:58:25,140 --> 02:58:28,979
yeah okay here we go that's more like it
3792
02:58:28,979 --> 02:58:31,200
okay I want images right here so there
3793
02:58:31,200 --> 02:58:33,660
must be possibility to specify image
3794
02:58:33,660 --> 02:58:37,140
right here so let me actually explore
3795
02:58:37,140 --> 02:58:40,800
this session now this one accepts line
3796
02:58:40,800 --> 02:58:42,479
items
3797
02:58:42,479 --> 02:58:46,800
uh validate problems we have an array
3798
02:58:46,800 --> 02:58:49,319
we have problems
3799
02:58:49,319 --> 02:58:51,120
this one just validates then the
3800
02:58:51,120 --> 02:58:53,520
problems is given into static requests
3801
02:58:53,520 --> 02:58:56,160
we have problems right here and the
3802
02:58:56,160 --> 02:58:58,680
requester request we have problems right
3803
02:58:58,680 --> 02:59:01,920
here request rule
3804
02:59:01,920 --> 02:59:03,960
um we have parents right here prepare
3805
02:59:03,960 --> 02:59:06,540
request okay this one just makes
3806
02:59:06,540 --> 02:59:09,660
requests to the API it doesn't have any
3807
02:59:09,660 --> 02:59:13,979
kind of a model dto type object which
3808
02:59:13,979 --> 02:59:18,120
would show me uh what other properties
3809
02:59:18,120 --> 02:59:21,180
does the products product data supports
3810
02:59:21,180 --> 02:59:23,100
but I guess it should support something
3811
02:59:23,100 --> 02:59:27,300
like image so let's try product
3812
02:59:27,300 --> 02:59:29,939
um how it's called product image
3813
02:59:29,939 --> 02:59:33,779
okay let's now go back
3814
02:59:33,779 --> 02:59:38,359
and click proceed to checkout
3815
02:59:39,420 --> 02:59:41,220
okay it
3816
02:59:41,220 --> 02:59:43,979
did you mean images okay probably it has
3817
02:59:43,979 --> 02:59:45,960
images array
3818
02:59:45,960 --> 02:59:49,920
and let's convert this into an array
3819
02:59:49,920 --> 02:59:52,880
not a bed
3820
02:59:54,300 --> 02:59:57,500
okay let's see
3821
02:59:59,399 --> 03:00:01,380
okay this one
3822
03:00:01,380 --> 03:00:02,160
um
3823
03:00:02,160 --> 03:00:04,020
it should work
3824
03:00:04,020 --> 03:00:07,560
let's actually get the image in open
3825
03:00:07,560 --> 03:00:10,979
okay maybe because this is coming from
3826
03:00:10,979 --> 03:00:12,720
the localhost
3827
03:00:12,720 --> 03:00:15,979
it simply doesn't work
3828
03:00:16,140 --> 03:00:17,640
okay
3829
03:00:17,640 --> 03:00:19,859
maybe that's the reason
3830
03:00:19,859 --> 03:00:21,180
um
3831
03:00:21,180 --> 03:00:23,819
Dell laptop let me actually get one
3832
03:00:23,819 --> 03:00:27,600
image from the Google to easily pass
3833
03:00:27,600 --> 03:00:29,700
that to stripe
3834
03:00:29,700 --> 03:00:32,760
not this one
3835
03:00:32,760 --> 03:00:38,399
thing copy image address let's open
3836
03:00:38,399 --> 03:00:42,000
and I'm going to put this right here
3837
03:00:42,000 --> 03:00:45,920
okay let's go back now
3838
03:00:45,920 --> 03:00:50,420
and click proceed to checkout
3839
03:00:51,600 --> 03:00:53,880
and here we go yeah because the image
3840
03:00:53,880 --> 03:00:55,859
was coming from localhost it didn't show
3841
03:00:55,859 --> 03:01:00,600
up but this looks this looks good and we
3842
03:01:00,600 --> 03:01:02,700
can make a payment and then we need to
3843
03:01:02,700 --> 03:01:05,819
handle the success and failure okay let
3844
03:01:05,819 --> 03:01:07,680
me just go back and return to the
3845
03:01:07,680 --> 03:01:09,479
product image this is how it should be
3846
03:01:09,479 --> 03:01:12,000
and we have to specify right here
3847
03:01:12,000 --> 03:01:15,359
success URL and cancel the URL let's
3848
03:01:15,359 --> 03:01:17,340
actually create
3849
03:01:17,340 --> 03:01:19,680
let's create
3850
03:01:19,680 --> 03:01:22,979
different methods I'm thinking maybe we
3851
03:01:22,979 --> 03:01:24,720
need to create a different controller
3852
03:01:24,720 --> 03:01:27,000
not the card controller but it should be
3853
03:01:27,000 --> 03:01:29,399
probably checkout controller inside
3854
03:01:29,399 --> 03:01:32,460
which we will have the checkout as well
3855
03:01:32,460 --> 03:01:35,040
as the success and failure let's let's
3856
03:01:35,040 --> 03:01:39,600
create PHP artisan make
3857
03:01:39,600 --> 03:01:41,040
controller
3858
03:01:41,040 --> 03:01:45,359
checkout controller hit enter
3859
03:01:45,359 --> 03:01:49,560
let's open checkout controller
3860
03:01:49,560 --> 03:01:53,279
let's create public function success
3861
03:01:53,279 --> 03:01:55,979
and we accept request
3862
03:01:55,979 --> 03:01:59,040
and I just want to dump whatever comes
3863
03:01:59,040 --> 03:02:01,920
from here
3864
03:02:01,920 --> 03:02:06,180
and then let's create Baylor
3865
03:02:06,180 --> 03:02:10,740
we accept request and let's dump request
3866
03:02:10,740 --> 03:02:13,380
all here as well
3867
03:02:13,380 --> 03:02:16,740
now let's open web of PHP and I'm going
3868
03:02:16,740 --> 03:02:18,439
to change yeah we have to create
3869
03:02:18,439 --> 03:02:21,540
probably checkout as well
3870
03:02:21,540 --> 03:02:24,359
check out
3871
03:02:24,359 --> 03:02:28,220
and let's move this
3872
03:02:29,220 --> 03:02:34,760
let's move this into checkout
3873
03:02:36,020 --> 03:02:39,300
however now we don't have these get
3874
03:02:39,300 --> 03:02:42,180
products and cart items because that's
3875
03:02:42,180 --> 03:02:46,620
that was left in the card controller so
3876
03:02:46,620 --> 03:02:49,740
I'm going to actually take this and move
3877
03:02:49,740 --> 03:02:52,080
into card helper
3878
03:02:52,080 --> 03:02:54,000
scroll down below
3879
03:02:54,000 --> 03:02:56,939
and put this right here I'm going to
3880
03:02:56,939 --> 03:02:59,399
change this into public and it should be
3881
03:02:59,399 --> 03:03:02,479
static as well
3882
03:03:03,540 --> 03:03:05,279
Okay so
3883
03:03:05,279 --> 03:03:08,340
self get cart items then array plug we
3884
03:03:08,340 --> 03:03:11,399
get the IDS then we make query we and we
3885
03:03:11,399 --> 03:03:13,620
return what we need okay let's go in the
3886
03:03:13,620 --> 03:03:15,720
card controller and at the top change
3887
03:03:15,720 --> 03:03:18,060
this into cart
3888
03:03:18,060 --> 03:03:21,120
get card get products and cart items and
3889
03:03:21,120 --> 03:03:23,520
we have to do the same thing right here
3890
03:03:23,520 --> 03:03:26,160
I'm using card helper get product in
3891
03:03:26,160 --> 03:03:27,600
cart items
3892
03:03:27,600 --> 03:03:31,620
all right let's again test the
3893
03:03:31,620 --> 03:03:34,200
card page make sure we didn't break
3894
03:03:34,200 --> 03:03:37,020
anything so far so good
3895
03:03:37,020 --> 03:03:39,300
uh card control checkout doesn't exist
3896
03:03:39,300 --> 03:03:41,760
that's sphere we have to change this
3897
03:03:41,760 --> 03:03:45,240
into checkout controller let's change
3898
03:03:45,240 --> 03:03:47,700
this into use
3899
03:03:47,700 --> 03:03:49,740
and we have card checkout and now let's
3900
03:03:49,740 --> 03:03:53,100
specify two more one will be
3901
03:03:53,100 --> 03:03:58,020
actually let's change this into
3902
03:03:58,020 --> 03:04:01,020
check out
3903
03:04:01,020 --> 03:04:03,960
like this and it's going to be check out
3904
03:04:03,960 --> 03:04:07,100
slash success and that's going to be
3905
03:04:07,100 --> 03:04:11,220
check out slash failure and let's
3906
03:04:11,220 --> 03:04:15,600
specify right here success and failure
3907
03:04:15,600 --> 03:04:17,340
as well
3908
03:04:17,340 --> 03:04:20,580
all right now let's go in the checkout
3909
03:04:20,580 --> 03:04:22,040
controller
3910
03:04:22,040 --> 03:04:24,479
and let's
3911
03:04:24,479 --> 03:04:28,020
modify this so we have to use
3912
03:04:28,020 --> 03:04:32,279
root but I want absolute
3913
03:04:32,279 --> 03:04:34,439
so I'm going to specify
3914
03:04:34,439 --> 03:04:36,960
where's the root name and it's going to
3915
03:04:36,960 --> 03:04:40,620
be check out success we don't have any
3916
03:04:40,620 --> 03:04:42,600
parameters so I'm going to specify empty
3917
03:04:42,600 --> 03:04:45,540
array then the third is whether it
3918
03:04:45,540 --> 03:04:47,100
should be absolute or not and I'm going
3919
03:04:47,100 --> 03:04:50,100
to specify true right there
3920
03:04:50,100 --> 03:04:53,100
and let's do the same thing for uh
3921
03:04:53,100 --> 03:04:55,700
failure
3922
03:04:56,939 --> 03:04:59,700
right here
3923
03:04:59,700 --> 03:05:02,120
well before I test again
3924
03:05:02,120 --> 03:05:06,779
uh let me die in term which is this URL
3925
03:05:06,779 --> 03:05:10,740
uh and what is the other URL
3926
03:05:10,740 --> 03:05:13,080
failure
3927
03:05:13,080 --> 03:05:14,340
okay
3928
03:05:14,340 --> 03:05:16,380
now let's go back
3929
03:05:16,380 --> 03:05:19,020
click proceed to checkout
3930
03:05:19,020 --> 03:05:21,180
okay that wasn't found let's reload the
3931
03:05:21,180 --> 03:05:23,819
page proceed to checkout
3932
03:05:23,819 --> 03:05:27,540
okay check out success not defined
3933
03:05:27,540 --> 03:05:30,060
okay
3934
03:05:30,060 --> 03:05:33,479
and it should be check out success and
3935
03:05:33,479 --> 03:05:37,140
it should be checkout failure and let it
3936
03:05:37,140 --> 03:05:40,399
be card check out no problem
3937
03:05:42,300 --> 03:05:44,880
okay so we have checkout success and
3938
03:05:44,880 --> 03:05:47,160
checkout failure this looks good now
3939
03:05:47,160 --> 03:05:49,439
let's go again in the checkout
3940
03:05:49,439 --> 03:05:51,600
controller and comment out this die and
3941
03:05:51,600 --> 03:05:52,319
dump
3942
03:05:52,319 --> 03:05:55,319
and let's have a look
3943
03:05:55,319 --> 03:05:57,600
okay we have to provide
3944
03:05:57,600 --> 03:06:00,540
uh let's click proceed to checkout and
3945
03:06:00,540 --> 03:06:04,800
let's actually use test card
3946
03:06:04,800 --> 03:06:06,840
um I'm not sure what is the
3947
03:06:06,840 --> 03:06:09,800
test card
3948
03:06:13,680 --> 03:06:17,540
okay let's check the testing section
3949
03:06:18,779 --> 03:06:21,840
okay I think four two four two four two
3950
03:06:21,840 --> 03:06:26,180
is the test card let's specify it
3951
03:06:28,140 --> 03:06:29,399
okay
3952
03:06:29,399 --> 03:06:31,740
I think this anything in the future will
3953
03:06:31,740 --> 03:06:33,620
make sense
3954
03:06:33,620 --> 03:06:37,200
and save my info okay I don't want this
3955
03:06:37,200 --> 03:06:39,000
let's click pay
3956
03:06:39,000 --> 03:06:41,700
I have to specify
3957
03:06:41,700 --> 03:06:44,220
email so let me write to write
3958
03:06:44,220 --> 03:06:47,700
example.com name on the card just Surah
3959
03:06:47,700 --> 03:06:51,600
let's try this click on pay okay let's
3960
03:06:51,600 --> 03:06:55,439
see so we see success and now the get
3961
03:06:55,439 --> 03:06:57,060
method is not supported for this road
3962
03:06:57,060 --> 03:06:59,520
support methods post that's fine that's
3963
03:06:59,520 --> 03:07:03,859
my mistake this should be get
3964
03:07:04,620 --> 03:07:09,600
all right now let's go in the cart again
3965
03:07:09,600 --> 03:07:11,460
whenever the user makes payment of
3966
03:07:11,460 --> 03:07:14,220
course the items in the cart should uh
3967
03:07:14,220 --> 03:07:18,120
simply like disappear and
3968
03:07:18,120 --> 03:07:18,779
um
3969
03:07:18,779 --> 03:07:20,340
yeah but but right now we haven't
3970
03:07:20,340 --> 03:07:21,540
finished yet
3971
03:07:21,540 --> 03:07:23,279
let me actually test if the payment was
3972
03:07:23,279 --> 03:07:25,380
made in the
3973
03:07:25,380 --> 03:07:27,359
in the dashboard
3974
03:07:27,359 --> 03:07:30,240
okay here I see and most of them are
3975
03:07:30,240 --> 03:07:31,920
incomplete and one of them will
3976
03:07:31,920 --> 03:07:34,740
succeeded I think this is the latest one
3977
03:07:34,740 --> 03:07:38,160
okay so far so good uh let's proceed now
3978
03:07:38,160 --> 03:07:42,899
I want to disable the email and
3979
03:07:42,899 --> 03:07:46,439
name if possible I can find all this out
3980
03:07:46,439 --> 03:07:48,740
later
3981
03:07:50,279 --> 03:07:52,939
okay
3982
03:07:53,220 --> 03:07:56,279
that should be in the future
3983
03:07:56,279 --> 03:08:00,920
okay let's specify and click pay
3984
03:08:00,920 --> 03:08:03,979
now let's see what information we have
3985
03:08:03,979 --> 03:08:08,000
in the success
3986
03:08:09,420 --> 03:08:12,300
okay we don't have anything what just
3987
03:08:12,300 --> 03:08:14,479
happened
3988
03:08:18,600 --> 03:08:21,600
was the payment made
3989
03:08:21,600 --> 03:08:24,960
okay the payment was made but we are
3990
03:08:24,960 --> 03:08:29,340
we are still on this page which is weird
3991
03:08:29,340 --> 03:08:32,899
okay let's try this once again
3992
03:08:36,540 --> 03:08:38,340
okay something
3993
03:08:38,340 --> 03:08:41,640
um something doesn't work I think the
3994
03:08:41,640 --> 03:08:43,319
problem is in the
3995
03:08:43,319 --> 03:08:46,460
success URL
3996
03:08:48,840 --> 03:08:52,560
let's try to access to localhost
3997
03:08:52,560 --> 03:08:56,640
what is the actual URL that is checkout
3998
03:08:56,640 --> 03:08:58,439
success
3999
03:08:58,439 --> 03:09:00,300
check out
4000
03:09:00,300 --> 03:09:03,020
success
4001
03:09:04,380 --> 03:09:06,899
okay and we are redirected to the
4002
03:09:06,899 --> 03:09:10,200
payment page again
4003
03:09:10,200 --> 03:09:13,200
that's my bet we have right here check
4004
03:09:13,200 --> 03:09:16,500
out always that should be success it
4005
03:09:16,500 --> 03:09:18,840
should be failure
4006
03:09:18,840 --> 03:09:21,300
okay it's good it's good that it was my
4007
03:09:21,300 --> 03:09:25,020
mistake and not something else
4008
03:09:25,020 --> 03:09:28,439
okay let's now access to our application
4009
03:09:28,439 --> 03:09:30,359
once again
4010
03:09:30,359 --> 03:09:34,520
and click proceed to checkout
4011
03:09:35,100 --> 03:09:38,040
okay how many payments we already have I
4012
03:09:38,040 --> 03:09:39,840
think like four
4013
03:09:39,840 --> 03:09:42,600
maybe three three successful recent
4014
03:09:42,600 --> 03:09:45,060
payments
4015
03:09:45,060 --> 03:09:46,560
okay let's
4016
03:09:46,560 --> 03:09:51,020
make payment once again
4017
03:09:55,800 --> 03:09:57,540
okay
4018
03:09:57,540 --> 03:09:59,580
now let's see
4019
03:09:59,580 --> 03:10:02,399
I want to see some kind of result and
4020
03:10:02,399 --> 03:10:05,700
the result is empty it's good that
4021
03:10:05,700 --> 03:10:07,380
um we got this
4022
03:10:07,380 --> 03:10:08,220
um
4023
03:10:08,220 --> 03:10:12,300
it actually called our action however we
4024
03:10:12,300 --> 03:10:15,180
need to make sure that the payment was
4025
03:10:15,180 --> 03:10:18,020
actually successfully completed
4026
03:10:18,020 --> 03:10:20,760
okay we need to
4027
03:10:20,760 --> 03:10:23,100
there must be something in the
4028
03:10:23,100 --> 03:10:26,160
documentation about this all right let's
4029
03:10:26,160 --> 03:10:28,500
start from the top
4030
03:10:28,500 --> 03:10:31,740
okay we have implemented this
4031
03:10:31,740 --> 03:10:34,319
this is fine then we redirect to this
4032
03:10:34,319 --> 03:10:36,600
page
4033
03:10:36,600 --> 03:10:39,140
okay
4034
03:10:40,680 --> 03:10:43,140
so far it's good
4035
03:10:43,140 --> 03:10:45,420
show success page
4036
03:10:45,420 --> 03:10:48,800
let's go on the server side
4037
03:10:51,899 --> 03:10:53,700
okay this is for two-factor
4038
03:10:53,700 --> 03:10:55,500
Authentication
4039
03:10:55,500 --> 03:10:59,300
this is something which fails
4040
03:11:02,279 --> 03:11:04,080
create production
4041
03:11:04,080 --> 03:11:07,200
prices up front this is something we are
4042
03:11:07,200 --> 03:11:08,819
not interested we don't want our
4043
03:11:08,819 --> 03:11:12,359
products to be sent to the stripe up
4044
03:11:12,359 --> 03:11:15,240
front fine we don't own existing
4045
03:11:15,240 --> 03:11:17,819
customers to be there or anything like
4046
03:11:17,819 --> 03:11:18,840
this
4047
03:11:18,840 --> 03:11:21,840
and we don't also have discounts and
4048
03:11:21,840 --> 03:11:23,640
taxes
4049
03:11:23,640 --> 03:11:29,880
however what I'm interested in validate
4050
03:11:30,180 --> 03:11:32,580
whether the payment was successfully
4051
03:11:32,580 --> 03:11:35,279
completed or not like it was redirected
4052
03:11:35,279 --> 03:11:37,200
to the checkout success but I don't know
4053
03:11:37,200 --> 03:11:39,960
actually whether someone else redirected
4054
03:11:39,960 --> 03:11:42,720
this here or striped it there so
4055
03:11:42,720 --> 03:11:45,260
basically we have to validate
4056
03:11:45,260 --> 03:11:47,160
the
4057
03:11:47,160 --> 03:11:49,740
transaction
4058
03:11:49,740 --> 03:11:54,060
in the stripe all right let's go in the
4059
03:11:54,060 --> 03:11:57,479
third section again and we must have
4060
03:11:57,479 --> 03:12:00,540
something okay so here we have the show
4061
03:12:00,540 --> 03:12:02,520
success page it's important for your
4062
03:12:02,520 --> 03:12:03,840
customer to see a success page after
4063
03:12:03,840 --> 03:12:06,359
they success I'm in the payment form
4064
03:12:06,359 --> 03:12:08,100
um Host this success page on your site
4065
03:12:08,100 --> 03:12:09,660
okay that's clear but we want to
4066
03:12:09,660 --> 03:12:12,240
validate next to the checkout session
4067
03:12:12,240 --> 03:12:15,560
creation endpoint to use the new page
4068
03:12:15,560 --> 03:12:21,540
okay this is our success URL if you want
4069
03:12:21,540 --> 03:12:23,399
to customize your success page read the
4070
03:12:23,399 --> 03:12:26,880
custom success page okay let's have a
4071
03:12:26,880 --> 03:12:28,740
look
4072
03:12:28,740 --> 03:12:31,260
modify this and the checkout section ID
4073
03:12:31,260 --> 03:12:34,080
template variable I think yeah I think
4074
03:12:34,080 --> 03:12:36,840
that that's what I was looking for so we
4075
03:12:36,840 --> 03:12:39,359
basically need to put a session ID in
4076
03:12:39,359 --> 03:12:42,120
the success URL and on the success page
4077
03:12:42,120 --> 03:12:43,380
itself
4078
03:12:43,380 --> 03:12:45,840
uh right here we need to get that
4079
03:12:45,840 --> 03:12:48,240
session ID and retrieve this session
4080
03:12:48,240 --> 03:12:51,660
from the stripe API okay and then from
4081
03:12:51,660 --> 03:12:53,040
the session we can read through the
4082
03:12:53,040 --> 03:12:55,260
customer and we can show things for your
4083
03:12:55,260 --> 03:12:57,840
order John Smith however we don't have
4084
03:12:57,840 --> 03:13:00,120
information about the customer because
4085
03:13:00,120 --> 03:13:02,460
we we haven't don't have customers and
4086
03:13:02,460 --> 03:13:05,520
products pre-added inside stripe so we
4087
03:13:05,520 --> 03:13:08,279
just need to validate if the session is
4088
03:13:08,279 --> 03:13:11,220
actually valid or not and the session is
4089
03:13:11,220 --> 03:13:14,100
a random random ID so
4090
03:13:14,100 --> 03:13:17,160
like this is what we want to do all
4091
03:13:17,160 --> 03:13:20,640
right now let's go in the PHP storm
4092
03:13:20,640 --> 03:13:23,460
let's go in the checkout and I want to
4093
03:13:23,460 --> 03:13:25,620
print
4094
03:13:25,620 --> 03:13:29,399
um session ID
4095
03:13:29,399 --> 03:13:31,979
uh by the way should be down below now
4096
03:13:31,979 --> 03:13:36,060
let's open our cart page and click
4097
03:13:36,060 --> 03:13:38,399
proceed to checkout
4098
03:13:38,399 --> 03:13:41,040
and this is our session ID this is
4099
03:13:41,040 --> 03:13:43,859
something which is random and no one can
4100
03:13:43,859 --> 03:13:47,340
guess this so we have to provide
4101
03:13:47,340 --> 03:13:49,260
parameter right here session ID let's
4102
03:13:49,260 --> 03:13:52,800
actually go to the web and specify right
4103
03:13:52,800 --> 03:13:57,240
here uh session ID
4104
03:13:57,240 --> 03:13:59,640
all right and then we have to specify
4105
03:13:59,640 --> 03:14:04,380
right here session ID that's going to be
4106
03:14:04,380 --> 03:14:06,600
that's going to be what that's going to
4107
03:14:06,600 --> 03:14:11,899
be something which is mentioned
4108
03:14:12,720 --> 03:14:15,420
right here
4109
03:14:15,420 --> 03:14:20,460
okay check out session ID
4110
03:14:20,460 --> 03:14:23,279
check out session ID let's copy this I
4111
03:14:23,279 --> 03:14:25,439
think we can specify this using question
4112
03:14:25,439 --> 03:14:27,420
mark as well
4113
03:14:27,420 --> 03:14:31,220
uh if we just remove these
4114
03:14:33,000 --> 03:14:35,460
if we just remove these
4115
03:14:35,460 --> 03:14:37,319
well I was thinking yeah like we can do
4116
03:14:37,319 --> 03:14:39,120
it in both ways like if we leave this
4117
03:14:39,120 --> 03:14:41,640
parameter right here and then I will
4118
03:14:41,640 --> 03:14:46,620
specify this is the session ID and then
4119
03:14:46,620 --> 03:14:49,200
as we can see if we just die and dump
4120
03:14:49,200 --> 03:14:51,300
this access URL
4121
03:14:51,300 --> 03:14:54,600
we will see how the URL looks like let's
4122
03:14:54,600 --> 03:14:57,439
reload the page
4123
03:14:58,439 --> 03:15:00,899
okay the parameter wasn't replaced that
4124
03:15:00,899 --> 03:15:03,080
is something I hoped it would be
4125
03:15:03,080 --> 03:15:05,880
replaced but the easy solution will be
4126
03:15:05,880 --> 03:15:09,479
to just remove this from here
4127
03:15:09,479 --> 03:15:12,479
and at the end we just concatenate
4128
03:15:12,479 --> 03:15:15,020
session ID
4129
03:15:15,020 --> 03:15:19,800
equals to till this
4130
03:15:19,800 --> 03:15:21,899
whatever
4131
03:15:21,899 --> 03:15:24,600
is this
4132
03:15:24,600 --> 03:15:27,420
okay now let's let's comment this time
4133
03:15:27,420 --> 03:15:29,040
dump
4134
03:15:29,040 --> 03:15:32,340
and we have the session ID
4135
03:15:32,340 --> 03:15:34,859
and let's go in the
4136
03:15:34,859 --> 03:15:38,399
let's go in the success and let's get
4137
03:15:38,399 --> 03:15:39,960
session
4138
03:15:39,960 --> 03:15:42,240
ID from here let's actually
4139
03:15:42,240 --> 03:15:45,540
scroll down below find this portion so
4140
03:15:45,540 --> 03:15:47,399
I'm going to get this
4141
03:15:47,399 --> 03:15:49,260
paste it right here
4142
03:15:49,260 --> 03:15:51,560
and from request we get the session
4143
03:15:51,560 --> 03:15:53,939
underscore ID let's change this into
4144
03:15:53,939 --> 03:15:55,500
underscore ID
4145
03:15:55,500 --> 03:15:58,140
and we have a session okay retrieved
4146
03:15:58,140 --> 03:16:00,479
from stripe and I'm going to die and
4147
03:16:00,479 --> 03:16:01,380
down
4148
03:16:01,380 --> 03:16:03,240
session
4149
03:16:03,240 --> 03:16:05,220
and let's have a look
4150
03:16:05,220 --> 03:16:08,340
so let's reload the page
4151
03:16:08,340 --> 03:16:11,520
we must be redirected to the stripe
4152
03:16:11,520 --> 03:16:13,979
we are not redirected because we didn't
4153
03:16:13,979 --> 03:16:16,020
dump something
4154
03:16:16,020 --> 03:16:18,180
session ID
4155
03:16:18,180 --> 03:16:19,620
all right
4156
03:16:19,620 --> 03:16:22,819
let's continue
4157
03:16:23,939 --> 03:16:27,979
all right on specifying
4158
03:16:28,439 --> 03:16:31,439
example.com
4159
03:16:37,979 --> 03:16:41,479
let's click on pay
4160
03:16:42,899 --> 03:16:45,960
all right now what do we have so we have
4161
03:16:45,960 --> 03:16:49,200
a session ID no API key provided that's
4162
03:16:49,200 --> 03:16:53,399
absolutely correct so we have to
4163
03:16:53,399 --> 03:16:55,500
we have to take this
4164
03:16:55,500 --> 03:17:00,420
and put it right here as well
4165
03:17:00,420 --> 03:17:03,720
and just reload it and here we have a
4166
03:17:03,720 --> 03:17:06,300
session okay if we try to get the
4167
03:17:06,300 --> 03:17:08,600
customer
4168
03:17:08,760 --> 03:17:10,740
this is just the customer identifier
4169
03:17:10,740 --> 03:17:14,520
okay on the demo right here it tries to
4170
03:17:14,520 --> 03:17:16,080
get the customer name but I think we
4171
03:17:16,080 --> 03:17:18,300
don't have a customer name at least I
4172
03:17:18,300 --> 03:17:20,819
haven't tried so let's try to get this
4173
03:17:20,819 --> 03:17:24,840
session and customer so we just reload
4174
03:17:24,840 --> 03:17:27,180
the page
4175
03:17:27,180 --> 03:17:29,399
and now let's scroll down below so we
4176
03:17:29,399 --> 03:17:31,260
have the customer and what is the name
4177
03:17:31,260 --> 03:17:33,359
of the customer name is test okay with
4178
03:17:33,359 --> 03:17:36,180
whatever I provided that's fine so we
4179
03:17:36,180 --> 03:17:39,000
can display success message to test that
4180
03:17:39,000 --> 03:17:41,580
hey your payment was successfully
4181
03:17:41,580 --> 03:17:43,500
completed and we need to remove the
4182
03:17:43,500 --> 03:17:46,680
items from the cart as well okay let's
4183
03:17:46,680 --> 03:17:49,319
now create success page we're going to
4184
03:17:49,319 --> 03:17:52,200
go in the resources views
4185
03:17:52,200 --> 03:17:55,260
Let's find let's create new folder
4186
03:17:55,260 --> 03:17:56,819
called
4187
03:17:56,819 --> 03:17:59,160
check out
4188
03:17:59,160 --> 03:18:03,740
and inside there I'm going to create new
4189
03:18:03,740 --> 03:18:08,340
success blade PHP
4190
03:18:08,340 --> 03:18:10,140
and we will need
4191
03:18:10,140 --> 03:18:13,520
failure as well
4192
03:18:14,580 --> 03:18:18,720
Taylor played PHP okay let's include x
4193
03:18:18,720 --> 03:18:22,100
app layout
4194
03:18:22,800 --> 03:18:25,859
or is it called Excel yeah it's it's
4195
03:18:25,859 --> 03:18:28,680
called the xap layout and let's just
4196
03:18:28,680 --> 03:18:31,020
write a simple message right here with
4197
03:18:31,020 --> 03:18:34,319
some Talent CSS classes BG
4198
03:18:34,319 --> 03:18:41,359
um PG Emerald 500 padding Y2 padding X3
4199
03:18:41,359 --> 03:18:46,439
takes white rounded
4200
03:18:46,620 --> 03:18:51,180
and let's put right here message
4201
03:18:51,180 --> 03:18:53,340
uh thanks
4202
03:18:53,340 --> 03:18:57,540
for your or your order has been
4203
03:18:57,540 --> 03:19:00,540
completed
4204
03:19:02,880 --> 03:19:07,500
Mr or Mrs someone let's just write name
4205
03:19:07,500 --> 03:19:10,020
we have customer
4206
03:19:10,020 --> 03:19:11,700
name
4207
03:19:11,700 --> 03:19:16,040
comma your order has been completed
4208
03:19:16,080 --> 03:19:18,420
uh by the way we did this in the failure
4209
03:19:18,420 --> 03:19:22,880
we should have done this in the success
4210
03:19:24,660 --> 03:19:26,700
for the failure
4211
03:19:26,700 --> 03:19:28,800
we should give some a message to the
4212
03:19:28,800 --> 03:19:32,460
user let's actually change this into BG
4213
03:19:32,460 --> 03:19:35,760
red 500
4214
03:19:35,760 --> 03:19:37,920
and
4215
03:19:37,920 --> 03:19:40,520
Baylor
4216
03:19:41,760 --> 03:19:44,580
and let's remove this style and dump
4217
03:19:44,580 --> 03:19:48,779
and we just return View
4218
03:19:48,779 --> 03:19:50,700
checkout
4219
03:19:50,700 --> 03:19:54,720
success and we pass
4220
03:19:54,720 --> 03:19:58,920
we pass customer
4221
03:19:58,920 --> 03:20:02,700
so far so good we'll reload the page
4222
03:20:02,700 --> 03:20:05,399
and we see test your order has been
4223
03:20:05,399 --> 03:20:07,020
completed test obviously is the customer
4224
03:20:07,020 --> 03:20:11,220
name let's go and give this one
4225
03:20:11,220 --> 03:20:13,500
with of
4226
03:20:13,500 --> 03:20:16,200
like 400 pixel
4227
03:20:16,200 --> 03:20:20,220
and let's give it also margin X Auto
4228
03:20:20,220 --> 03:20:24,000
so we save this put load the page
4229
03:20:24,000 --> 03:20:26,760
okay here we have your order has been
4230
03:20:26,760 --> 03:20:28,439
completed
4231
03:20:28,439 --> 03:20:30,840
and the only thing which is remained
4232
03:20:30,840 --> 03:20:33,300
right here in the checkout we have to
4233
03:20:33,300 --> 03:20:36,180
clear cart and we have to make order as
4234
03:20:36,180 --> 03:20:39,120
well whenever the session exists
4235
03:20:39,120 --> 03:20:42,120
okay let's try to provide in invalid
4236
03:20:42,120 --> 03:20:44,220
session ID let's put additional one at
4237
03:20:44,220 --> 03:20:46,560
the end hit the enter
4238
03:20:46,560 --> 03:20:49,439
okay now we have problem invalid string
4239
03:20:49,439 --> 03:20:51,300
must be at most
4240
03:20:51,300 --> 03:20:54,600
66 characters okay
4241
03:20:54,600 --> 03:20:57,540
uh let's just delete the last B in type
4242
03:20:57,540 --> 03:21:00,180
c let's hit the enter
4243
03:21:00,180 --> 03:21:03,120
that that error comes from
4244
03:21:03,120 --> 03:21:07,560
stripe no such checkout session which is
4245
03:21:07,560 --> 03:21:11,040
valid okay right now we try to the the
4246
03:21:11,040 --> 03:21:13,439
error basically was produced from this
4247
03:21:13,439 --> 03:21:16,140
line session let's scroll down below we
4248
03:21:16,140 --> 03:21:18,180
need to find the place where the error
4249
03:21:18,180 --> 03:21:20,340
came from because we have to put this in
4250
03:21:20,340 --> 03:21:24,260
the try catch
4251
03:21:25,920 --> 03:21:28,859
let's search for checkout current
4252
03:21:28,859 --> 03:21:30,560
checkout
4253
03:21:30,560 --> 03:21:33,000
controller here we have this
4254
03:21:33,000 --> 03:21:35,640
okay yeah from there comes from this
4255
03:21:35,640 --> 03:21:38,340
line so we basically put this in the try
4256
03:21:38,340 --> 03:21:40,260
catch
4257
03:21:40,260 --> 03:21:43,319
we try to get the session
4258
03:21:43,319 --> 03:21:45,380
um after this we try to get the customer
4259
03:21:45,380 --> 03:21:49,080
if for some reason they didn't work
4260
03:21:49,080 --> 03:21:52,920
uh we get the exception right here
4261
03:21:52,920 --> 03:21:55,380
and we know that the uh session ID is
4262
03:21:55,380 --> 03:21:57,060
not valid
4263
03:21:57,060 --> 03:21:58,620
and that's it
4264
03:21:58,620 --> 03:22:00,660
okay
4265
03:22:00,660 --> 03:22:03,720
how every everything is successfully we
4266
03:22:03,720 --> 03:22:06,300
need to render let's just render it
4267
03:22:06,300 --> 03:22:08,779
properly
4268
03:22:09,660 --> 03:22:14,000
and right here we need to render failure
4269
03:22:14,100 --> 03:22:17,340
and we have to render failure also if
4270
03:22:17,340 --> 03:22:20,100
the stripe return with a failure
4271
03:22:20,100 --> 03:22:22,319
obviously if the session ID is wrong
4272
03:22:22,319 --> 03:22:24,359
someone else is accessing it's going to
4273
03:22:24,359 --> 03:22:26,100
come right here and the failure and if
4274
03:22:26,100 --> 03:22:29,399
inside the failure we show uh like your
4275
03:22:29,399 --> 03:22:33,420
payment was not successful
4276
03:22:33,420 --> 03:22:36,720
okay this is the message we can show but
4277
03:22:36,720 --> 03:22:39,479
we aren't able to test the case when the
4278
03:22:39,479 --> 03:22:41,220
session ID
4279
03:22:41,220 --> 03:22:44,399
um comes right here but the session
4280
03:22:44,399 --> 03:22:46,380
actually wasn't fetched from the stripe
4281
03:22:46,380 --> 03:22:48,779
or or something like this okay just in
4282
03:22:48,779 --> 03:22:50,819
case this happens let's put right here
4283
03:22:50,819 --> 03:22:53,700
if session does not exist for some
4284
03:22:53,700 --> 03:22:57,359
reason then we return
4285
03:22:57,359 --> 03:23:00,260
failure
4286
03:23:01,560 --> 03:23:03,960
okay we return with failure and
4287
03:23:03,960 --> 03:23:06,060
otherwise if the session exists we get
4288
03:23:06,060 --> 03:23:09,380
the customer and we Rin render success
4289
03:23:09,380 --> 03:23:12,180
success page
4290
03:23:12,180 --> 03:23:16,020
okay so right here we get the customer
4291
03:23:16,020 --> 03:23:18,960
so we need to do a few things we have to
4292
03:23:18,960 --> 03:23:21,840
create an order let's go in the
4293
03:23:21,840 --> 03:23:24,899
localhost and we have to find
4294
03:23:24,899 --> 03:23:26,819
orders
4295
03:23:26,819 --> 03:23:30,000
okay right here we need to make requests
4296
03:23:30,000 --> 03:23:31,200
when the
4297
03:23:31,200 --> 03:23:33,420
payment was successfully done we have
4298
03:23:33,420 --> 03:23:35,880
the total price we have the status
4299
03:23:35,880 --> 03:23:38,700
and we have also payments inside the
4300
03:23:38,700 --> 03:23:40,439
payment we have the order ID amount
4301
03:23:40,439 --> 03:23:44,520
status and type and probably we should
4302
03:23:44,520 --> 03:23:46,620
save session ID as well
4303
03:23:46,620 --> 03:23:48,720
inside the payments so I'm going to
4304
03:23:48,720 --> 03:23:51,239
create the payment basically is the
4305
03:23:51,239 --> 03:23:53,700
transaction which happened in stripe so
4306
03:23:53,700 --> 03:23:55,439
I'm going to create new migration to add
4307
03:23:55,439 --> 03:23:59,120
the session ID to payment so PHP artisan
4308
03:23:59,120 --> 03:24:06,239
make migration add session ID to
4309
03:24:06,239 --> 03:24:07,920
payments
4310
03:24:07,920 --> 03:24:10,020
table
4311
03:24:10,020 --> 03:24:15,120
now let's open add session ID to
4312
03:24:15,120 --> 03:24:18,060
payments table and right here we're
4313
03:24:18,060 --> 03:24:19,859
going to create
4314
03:24:19,859 --> 03:24:23,939
this we have to create string not this
4315
03:24:23,939 --> 03:24:26,340
sorry but the table
4316
03:24:26,340 --> 03:24:27,960
treeing
4317
03:24:27,960 --> 03:24:30,300
let's make it
4318
03:24:30,300 --> 03:24:33,960
oh let's give it name session ID
4319
03:24:33,960 --> 03:24:38,340
and let's give it length 255. okay and
4320
03:24:38,340 --> 03:24:41,580
it basically must not be null
4321
03:24:41,580 --> 03:24:45,660
or it should be now let me think so the
4322
03:24:45,660 --> 03:24:48,840
payment should be made whenever success
4323
03:24:48,840 --> 03:24:52,500
page happens whenever stripe accesses to
4324
03:24:52,500 --> 03:24:55,439
the success URL in this case if we make
4325
03:24:55,439 --> 03:24:56,340
um
4326
03:24:56,340 --> 03:25:00,000
if we make a payment we have to provide
4327
03:25:00,000 --> 03:25:02,520
session ID otherwise it's it's doesn't
4328
03:25:02,520 --> 03:25:03,899
make any sense
4329
03:25:03,899 --> 03:25:06,960
so but if we make the session if we
4330
03:25:06,960 --> 03:25:09,180
insert the session in the database right
4331
03:25:09,180 --> 03:25:11,220
here
4332
03:25:11,220 --> 03:25:14,340
on the checkout page
4333
03:25:14,340 --> 03:25:17,520
we can get decision ID from here and
4334
03:25:17,520 --> 03:25:19,140
insert
4335
03:25:19,140 --> 03:25:23,340
into the database this is also something
4336
03:25:23,340 --> 03:25:26,040
good to do I think this is this is uh
4337
03:25:26,040 --> 03:25:28,739
what we need to do okay actually we need
4338
03:25:28,739 --> 03:25:31,140
to make an order right here as well so
4339
03:25:31,140 --> 03:25:33,420
we make order right here you make a
4340
03:25:33,420 --> 03:25:36,359
payment right here order will have an
4341
03:25:36,359 --> 03:25:40,979
status unpaid payment will be will have
4342
03:25:40,979 --> 03:25:44,040
status of pending and then whenever on
4343
03:25:44,040 --> 03:25:46,859
success page we get the session ID
4344
03:25:46,859 --> 03:25:49,500
now let's extract this into a variable
4345
03:25:49,500 --> 03:25:52,439
called session
4346
03:25:52,439 --> 03:25:55,859
session ID we get this we make cure in
4347
03:25:55,859 --> 03:25:57,060
the database
4348
03:25:57,060 --> 03:25:59,939
so we need to make sure that the not
4349
03:25:59,939 --> 03:26:03,180
only session ID is a valid session ID
4350
03:26:03,180 --> 03:26:06,660
coming to us but this session also
4351
03:26:06,660 --> 03:26:09,140
exists in our database created
4352
03:26:09,140 --> 03:26:12,779
previously somewhere right here okay if
4353
03:26:12,779 --> 03:26:15,180
we make sure that this is the case then
4354
03:26:15,180 --> 03:26:19,739
we proceed so let's create order data
4355
03:26:19,739 --> 03:26:22,739
and
4356
03:26:22,859 --> 03:26:24,720
what information do we need inside the
4357
03:26:24,720 --> 03:26:27,420
order we need the let's open first order
4358
03:26:27,420 --> 03:26:30,479
we have the total price and Status like
4359
03:26:30,479 --> 03:26:32,760
nothing nothing that important
4360
03:26:32,760 --> 03:26:37,140
and we need the total total price of the
4361
03:26:37,140 --> 03:26:38,340
order
4362
03:26:38,340 --> 03:26:40,500
it's going to be Zero by default so
4363
03:26:40,500 --> 03:26:43,260
right here we get the product price
4364
03:26:43,260 --> 03:26:45,979
so let me sum up to
4365
03:26:45,979 --> 03:26:50,819
uh total price plus equals product price
4366
03:26:50,819 --> 03:26:54,359
and the total price comes
4367
03:26:54,359 --> 03:26:57,800
right here
4368
03:26:58,200 --> 03:27:03,200
we have to specify status as well
4369
03:27:03,680 --> 03:27:08,279
for the statuses let's create an enum
4370
03:27:08,279 --> 03:27:10,979
so let's go in the app
4371
03:27:10,979 --> 03:27:13,380
enums and I'm going to create let me
4372
03:27:13,380 --> 03:27:15,060
actually duplicate address type that's
4373
03:27:15,060 --> 03:27:20,279
much easier order oops order status
4374
03:27:20,279 --> 03:27:23,040
let's hit the enter
4375
03:27:23,040 --> 03:27:26,000
um this is going to be
4376
03:27:27,720 --> 03:27:30,060
order status
4377
03:27:30,060 --> 03:27:31,800
and I think I have a typo in the address
4378
03:27:31,800 --> 03:27:33,720
type
4379
03:27:33,720 --> 03:27:35,279
yes I do
4380
03:27:35,279 --> 03:27:37,439
okay inside the order status we have
4381
03:27:37,439 --> 03:27:40,439
unpaid
4382
03:27:43,080 --> 03:27:46,080
unpaid and
4383
03:27:46,080 --> 03:27:48,120
we have paid
4384
03:27:48,120 --> 03:27:50,220
orders either on paid or paid of course
4385
03:27:50,220 --> 03:27:52,920
we can have like more granular statuses
4386
03:27:52,920 --> 03:27:56,279
like pending and processing and so on
4387
03:27:56,279 --> 03:28:00,420
and maybe we need that the order
4388
03:28:00,420 --> 03:28:02,819
needs to have
4389
03:28:02,819 --> 03:28:04,020
let's
4390
03:28:04,020 --> 03:28:07,439
write paid maybe we need completed or
4391
03:28:07,439 --> 03:28:10,680
complete completed is better
4392
03:28:10,680 --> 03:28:12,960
uh complete so whenever user makes
4393
03:28:12,960 --> 03:28:14,100
payment
4394
03:28:14,100 --> 03:28:18,479
the user will turn into paid okay and
4395
03:28:18,479 --> 03:28:22,080
and then the vendor the administrator of
4396
03:28:22,080 --> 03:28:25,319
the e-commerce website can take care of
4397
03:28:25,319 --> 03:28:27,779
the shipping which is not handled in in
4398
03:28:27,779 --> 03:28:30,239
the in our application at the moment and
4399
03:28:30,239 --> 03:28:32,160
shipping will be handled outside of the
4400
03:28:32,160 --> 03:28:35,640
application and when this happens then
4401
03:28:35,640 --> 03:28:37,439
simply we will
4402
03:28:37,439 --> 03:28:39,380
um
4403
03:28:39,380 --> 03:28:42,120
I just I just noticed that
4404
03:28:42,120 --> 03:28:45,000
and then I just noticed that I have the
4405
03:28:45,000 --> 03:28:47,460
editor zoomed out
4406
03:28:47,460 --> 03:28:51,000
and that distracted me
4407
03:28:51,000 --> 03:28:53,819
okay let me actually zoom zoom in
4408
03:28:53,819 --> 03:28:56,279
so basically uh when the admin of the
4409
03:28:56,279 --> 03:28:57,779
website will handle the shipping the
4410
03:28:57,779 --> 03:29:00,300
user the admin can turn the status into
4411
03:29:00,300 --> 03:29:02,760
completed and just like this we we're
4412
03:29:02,760 --> 03:29:05,880
gonna have the completed orders
4413
03:29:05,880 --> 03:29:08,460
okay so this can be just unpaid or draft
4414
03:29:08,460 --> 03:29:11,819
both of them will be uh the same and
4415
03:29:11,819 --> 03:29:15,020
let's create another enum which will be
4416
03:29:15,020 --> 03:29:19,020
payment status
4417
03:29:19,020 --> 03:29:23,180
let's change this into payment status
4418
03:29:23,180 --> 03:29:28,140
and the payment will be unpaid
4419
03:29:28,140 --> 03:29:31,819
or let's call it pending
4420
03:29:33,260 --> 03:29:35,819
and we're going to have
4421
03:29:35,819 --> 03:29:37,080
Aid
4422
03:29:37,080 --> 03:29:40,979
and failed
4423
03:29:42,660 --> 03:29:45,060
all right
4424
03:29:45,060 --> 03:29:48,479
so now let's go in the HTTP controllers
4425
03:29:48,479 --> 03:29:51,239
checkout controller and we have to take
4426
03:29:51,239 --> 03:29:54,439
here creating orders so we're gonna take
4427
03:29:54,439 --> 03:29:58,100
order status
4428
03:29:58,100 --> 03:30:02,100
and it's going to be unpaid
4429
03:30:02,100 --> 03:30:05,460
okay so what information do we have
4430
03:30:05,460 --> 03:30:10,140
total price status like created at
4431
03:30:10,140 --> 03:30:12,180
and updated that will be managed
4432
03:30:12,180 --> 03:30:14,100
automatically but we can specify created
4433
03:30:14,100 --> 03:30:16,319
by an updated buy which will be in any
4434
03:30:16,319 --> 03:30:18,420
case authorized user so we'll specify
4435
03:30:18,420 --> 03:30:20,399
created by
4436
03:30:20,399 --> 03:30:23,220
it's going to be user but we don't have
4437
03:30:23,220 --> 03:30:26,279
the user right so let's get the user
4438
03:30:26,279 --> 03:30:29,279
actually let me take this from
4439
03:30:29,279 --> 03:30:33,000
from card controller or from a profile
4440
03:30:33,000 --> 03:30:38,160
controller so let me copy this
4441
03:30:38,160 --> 03:30:41,520
and put this right here so now we have
4442
03:30:41,520 --> 03:30:46,920
the user ID let's duplicate this for
4443
03:30:46,920 --> 03:30:49,080
updated by
4444
03:30:49,080 --> 03:30:53,399
and now let's open order model
4445
03:30:53,399 --> 03:30:56,880
order PHP and let's add right here
4446
03:30:56,880 --> 03:31:00,479
fillable to be status
4447
03:31:00,479 --> 03:31:06,000
we have total price we have created it
4448
03:31:06,000 --> 03:31:10,040
and updated it
4449
03:31:11,220 --> 03:31:13,920
okay I think we created immigration and
4450
03:31:13,920 --> 03:31:17,660
we wrote but we have not actually
4451
03:31:17,660 --> 03:31:19,500
finalized it
4452
03:31:19,500 --> 03:31:22,560
the session ID this can be nullable by
4453
03:31:22,560 --> 03:31:24,779
the way so I'll specify we decided that
4454
03:31:24,779 --> 03:31:28,020
it can be nullable and in the down let's
4455
03:31:28,020 --> 03:31:31,739
just drop the column
4456
03:31:31,739 --> 03:31:35,640
drop column session
4457
03:31:35,640 --> 03:31:38,300
ID
4458
03:31:39,779 --> 03:31:41,760
all right
4459
03:31:41,760 --> 03:31:44,600
so
4460
03:31:45,720 --> 03:31:48,060
let's let's have a look again so now we
4461
03:31:48,060 --> 03:31:49,800
have the order data and we are going to
4462
03:31:49,800 --> 03:31:54,920
create order equals order
4463
03:31:54,920 --> 03:31:57,420
create we don't need to validate the
4464
03:31:57,420 --> 03:31:59,460
data because we know what we are
4465
03:31:59,460 --> 03:32:02,220
inserting right we have the prices and
4466
03:32:02,220 --> 03:32:04,439
we have the unpaid and IDs okay we don't
4467
03:32:04,439 --> 03:32:07,140
need to run any kind of validation in
4468
03:32:07,140 --> 03:32:09,239
this case and we're going to have order
4469
03:32:09,239 --> 03:32:12,000
and I'm going to Simply vote down let me
4470
03:32:12,000 --> 03:32:14,700
actually hit the dump and I'm going to
4471
03:32:14,700 --> 03:32:17,220
power down the order then I'm going to
4472
03:32:17,220 --> 03:32:21,080
create the payment data
4473
03:32:21,720 --> 03:32:24,420
and for the payments
4474
03:32:24,420 --> 03:32:26,460
we're going to have
4475
03:32:26,460 --> 03:32:30,840
oops order ID amount
4476
03:32:30,840 --> 03:32:33,180
and Status the amount will be the same
4477
03:32:33,180 --> 03:32:35,340
as the total price
4478
03:32:35,340 --> 03:32:38,580
so let's specify first let's specify
4479
03:32:38,580 --> 03:32:40,319
order ID
4480
03:32:40,319 --> 03:32:43,140
order ID that's going to be just created
4481
03:32:43,140 --> 03:32:47,100
order ID then we have to specify amount
4482
03:32:47,100 --> 03:32:49,620
that's going to be total price
4483
03:32:49,620 --> 03:32:53,180
we're going to have status
4484
03:32:53,520 --> 03:32:55,859
which will be
4485
03:32:55,859 --> 03:32:59,760
payment status pending
4486
03:32:59,760 --> 03:33:02,040
and we have type as well by the way is
4487
03:33:02,040 --> 03:33:04,859
the type required
4488
03:33:04,859 --> 03:33:09,300
no no yeah the type is required but
4489
03:33:09,300 --> 03:33:10,560
in this case
4490
03:33:10,560 --> 03:33:13,380
um like the payment type can be uh
4491
03:33:13,380 --> 03:33:17,760
credit card or cash or Checker Etc so I
4492
03:33:17,760 --> 03:33:19,380
think in this case we can just always
4493
03:33:19,380 --> 03:33:21,899
specify a credit card
4494
03:33:21,899 --> 03:33:23,640
and
4495
03:33:23,640 --> 03:33:27,600
we have created it
4496
03:33:27,600 --> 03:33:29,580
um no created by and create that will be
4497
03:33:29,580 --> 03:33:32,520
managed automatically so we have to
4498
03:33:32,520 --> 03:33:34,920
specify created by let me actually take
4499
03:33:34,920 --> 03:33:35,939
this code
4500
03:33:35,939 --> 03:33:38,640
and paste this right here and we have
4501
03:33:38,640 --> 03:33:40,979
the payment data and let's create now
4502
03:33:40,979 --> 03:33:43,399
payment
4503
03:33:45,120 --> 03:33:47,220
create
4504
03:33:47,220 --> 03:33:51,899
with payment data and let's now dump
4505
03:33:51,899 --> 03:33:56,340
payment as well and maybe exit right
4506
03:33:56,340 --> 03:33:58,140
here
4507
03:33:58,140 --> 03:33:59,460
okay
4508
03:33:59,460 --> 03:34:01,620
it's getting interesting
4509
03:34:01,620 --> 03:34:06,080
now let's go in the cart enter
4510
03:34:07,739 --> 03:34:11,960
okay and click proceed to checkout
4511
03:34:13,080 --> 03:34:16,080
okay
4512
03:34:16,200 --> 03:34:17,819
we have
4513
03:34:17,819 --> 03:34:20,819
order ID to okay we didn't I think the
4514
03:34:20,819 --> 03:34:25,080
order was created we can check this
4515
03:34:25,080 --> 03:34:27,779
yeah the order was created we have the
4516
03:34:27,779 --> 03:34:30,180
total price I'm not sure if the price is
4517
03:34:30,180 --> 03:34:31,979
correct by the way
4518
03:34:31,979 --> 03:34:35,040
uh created by updated by
4519
03:34:35,040 --> 03:34:37,319
is not presented
4520
03:34:37,319 --> 03:34:39,239
not sure why
4521
03:34:39,239 --> 03:34:41,819
let me actually dump the
4522
03:34:41,819 --> 03:34:45,500
user ID
4523
03:34:52,260 --> 03:34:54,840
the user must exist
4524
03:34:54,840 --> 03:34:56,460
I was thinking maybe I was doing
4525
03:34:56,460 --> 03:34:58,200
something wrong but the user must exist
4526
03:34:58,200 --> 03:35:00,960
so you have to have created by an
4527
03:35:00,960 --> 03:35:02,279
updated Buy
4528
03:35:02,279 --> 03:35:04,800
however I have specified something else
4529
03:35:04,800 --> 03:35:06,060
right here
4530
03:35:06,060 --> 03:35:07,439
okay
4531
03:35:07,439 --> 03:35:10,979
now let's open payment model
4532
03:35:10,979 --> 03:35:13,979
payment.php
4533
03:35:14,220 --> 03:35:18,500
okay let's open from here
4534
03:35:19,140 --> 03:35:23,880
and let's add a fillable to be
4535
03:35:23,880 --> 03:35:26,279
order ID
4536
03:35:26,279 --> 03:35:28,979
potatoes
4537
03:35:28,979 --> 03:35:31,200
um what else type
4538
03:35:31,200 --> 03:35:37,979
and created by and updated by
4539
03:35:38,160 --> 03:35:43,819
all right now let's reload the page
4540
03:35:44,520 --> 03:35:47,279
and now let's have a look among doesn't
4541
03:35:47,279 --> 03:35:51,300
have a default value into payments okay
4542
03:35:51,300 --> 03:35:55,399
we haven't specified amount here
4543
03:35:56,279 --> 03:35:59,479
let's reload once again
4544
03:36:00,180 --> 03:36:03,420
and we have something looking successful
4545
03:36:03,420 --> 03:36:07,200
int 8. 8 I guess is the authorized user
4546
03:36:07,200 --> 03:36:08,160
ID
4547
03:36:08,160 --> 03:36:10,020
let's reload the page
4548
03:36:10,020 --> 03:36:15,020
okay now we have the user ID for orders
4549
03:36:15,120 --> 03:36:18,180
and we have one payment this is looking
4550
03:36:18,180 --> 03:36:20,520
good so we have three orders because for
4551
03:36:20,520 --> 03:36:22,680
two of them it was simply failed we can
4552
03:36:22,680 --> 03:36:25,939
delete the first and second
4553
03:36:26,100 --> 03:36:28,260
even we can delete this
4554
03:36:28,260 --> 03:36:30,899
but we have to delete first payment I'm
4555
03:36:30,899 --> 03:36:34,020
curious why amount is five eight seven
4556
03:36:34,020 --> 03:36:35,760
so
4557
03:36:35,760 --> 03:36:38,760
I think I know I think I know
4558
03:36:38,760 --> 03:36:40,620
because I didn't multiply this on
4559
03:36:40,620 --> 03:36:42,120
quantity right
4560
03:36:42,120 --> 03:36:45,420
exactly so right here I have to multiply
4561
03:36:45,420 --> 03:36:47,460
this on quantity so let me actually
4562
03:36:47,460 --> 03:36:49,800
extract this into a variable called
4563
03:36:49,800 --> 03:36:51,359
quantity
4564
03:36:51,359 --> 03:36:54,300
and then move this up and use quantity
4565
03:36:54,300 --> 03:36:57,359
right here so I save this
4566
03:36:57,359 --> 03:36:58,800
and
4567
03:36:58,800 --> 03:37:02,300
I reload the page
4568
03:37:03,840 --> 03:37:06,899
all right now let's have a look so we
4569
03:37:06,899 --> 03:37:09,779
have the total amount inside payments we
4570
03:37:09,779 --> 03:37:12,620
have the order ID we have the payments
4571
03:37:12,620 --> 03:37:16,020
type and everything that is necessary
4572
03:37:16,020 --> 03:37:17,939
however we don't have session ID because
4573
03:37:17,939 --> 03:37:21,000
we haven't run migration so PHP artisan
4574
03:37:21,000 --> 03:37:25,500
make uh no me great
4575
03:37:25,500 --> 03:37:28,020
okay now let's see what happens
4576
03:37:28,020 --> 03:37:30,359
there's no column with Name ID on table
4577
03:37:30,359 --> 03:37:34,040
customers what
4578
03:37:34,859 --> 03:37:38,460
rename customer ID column
4579
03:37:38,460 --> 03:37:42,000
okay I think while I was testing uh I
4580
03:37:42,000 --> 03:37:45,120
broke something that will not be a
4581
03:37:45,120 --> 03:37:47,340
problem on your
4582
03:37:47,340 --> 03:37:49,260
on your case
4583
03:37:49,260 --> 03:37:53,779
so I think I have some migrations down
4584
03:37:53,819 --> 03:37:57,840
and it is not marked in the table
4585
03:37:57,840 --> 03:38:02,220
so let's check the migrations
4586
03:38:02,220 --> 03:38:04,260
the last migration
4587
03:38:04,260 --> 03:38:07,080
rename customer ID into user ID
4588
03:38:07,080 --> 03:38:09,979
let's see
4589
03:38:10,800 --> 03:38:13,700
let's see
4590
03:38:14,640 --> 03:38:18,540
database migrations
4591
03:38:26,640 --> 03:38:28,800
okay that should be the name
4592
03:38:28,800 --> 03:38:31,140
that should be the name uh that's gonna
4593
03:38:31,140 --> 03:38:33,239
that's not going to be a problem on your
4594
03:38:33,239 --> 03:38:35,520
uh machine because like uh I was first
4595
03:38:35,520 --> 03:38:37,620
preparing and doing the project and then
4596
03:38:37,620 --> 03:38:40,319
recording and I gave it slightly
4597
03:38:40,319 --> 03:38:43,319
different name while I was recording and
4598
03:38:43,319 --> 03:38:46,140
I guess that is the problem so I will
4599
03:38:46,140 --> 03:38:48,779
simply take the name of this migration
4600
03:38:48,779 --> 03:38:51,120
and put this
4601
03:38:51,120 --> 03:38:53,960
right here
4602
03:38:55,620 --> 03:38:58,859
no this is something wrong
4603
03:38:58,859 --> 03:39:02,420
let's go in the migrations
4604
03:39:03,120 --> 03:39:06,300
at least one the last one
4605
03:39:06,300 --> 03:39:09,120
rename customer ID into user ID is what
4606
03:39:09,120 --> 03:39:12,120
is in the database however we just have
4607
03:39:12,120 --> 03:39:16,260
rename customer ID column let's go
4608
03:39:16,260 --> 03:39:20,279
and change countries states column into
4609
03:39:20,279 --> 03:39:23,399
Json this is something which needs to be
4610
03:39:23,399 --> 03:39:25,080
run right
4611
03:39:25,080 --> 03:39:28,439
let's see but again I think that is
4612
03:39:28,439 --> 03:39:30,660
already run
4613
03:39:30,660 --> 03:39:34,020
and simply we have to add a new record
4614
03:39:34,020 --> 03:39:36,239
let's try to migrate
4615
03:39:36,239 --> 03:39:39,600
change country State cone into Json okay
4616
03:39:39,600 --> 03:39:41,819
so far it worked so I think there is no
4617
03:39:41,819 --> 03:39:43,859
problem let's go in the countries again
4618
03:39:43,859 --> 03:39:46,319
that was problem on my computer there's
4619
03:39:46,319 --> 03:39:48,960
not going to be a problem on yours
4620
03:39:48,960 --> 03:39:51,660
however if we open now payments we
4621
03:39:51,660 --> 03:39:53,700
should see session ID right here okay
4622
03:39:53,700 --> 03:39:55,800
this is something we need to also
4623
03:39:55,800 --> 03:39:57,300
consider
4624
03:39:57,300 --> 03:39:59,880
right here when creating let me remove
4625
03:39:59,880 --> 03:40:03,060
the user ID let's remove order and let's
4626
03:40:03,060 --> 03:40:07,020
specify right here session ID
4627
03:40:07,020 --> 03:40:11,880
that's going to be session ID and let's
4628
03:40:11,880 --> 03:40:16,020
add session ID into fillable as well
4629
03:40:16,020 --> 03:40:19,160
session ID
4630
03:40:20,220 --> 03:40:22,140
all right
4631
03:40:22,140 --> 03:40:25,140
let's remove this and now I have session
4632
03:40:25,140 --> 03:40:28,800
already created okay I have a payment
4633
03:40:28,800 --> 03:40:31,859
and Order already created so let's
4634
03:40:31,859 --> 03:40:34,439
scroll down below right here
4635
03:40:34,439 --> 03:40:39,660
and we have to now grab the payment okay
4636
03:40:39,660 --> 03:40:41,300
payment
4637
03:40:41,300 --> 03:40:45,260
equals payment
4638
03:40:45,260 --> 03:40:48,300
let's get
4639
03:40:48,300 --> 03:40:50,760
query
4640
03:40:50,760 --> 03:40:53,000
where
4641
03:40:53,000 --> 03:40:58,920
session ID equals to session ID and
4642
03:40:58,920 --> 03:41:01,620
we're gonna get one
4643
03:41:01,620 --> 03:41:04,859
okay this is going to be the payment
4644
03:41:04,859 --> 03:41:08,700
let's actually do this
4645
03:41:08,700 --> 03:41:10,260
we get this session ID we get this
4646
03:41:10,260 --> 03:41:12,439
session
4647
03:41:13,080 --> 03:41:15,060
okay if the session doesn't exist that's
4648
03:41:15,060 --> 03:41:15,960
fine
4649
03:41:15,960 --> 03:41:19,220
then we get the payment
4650
03:41:19,439 --> 03:41:21,960
okay and then we can do one more check
4651
03:41:21,960 --> 03:41:25,500
if the payment doesn't exist
4652
03:41:25,500 --> 03:41:29,160
if the payment doesn't exist or if the
4653
03:41:29,160 --> 03:41:30,200
payment
4654
03:41:30,200 --> 03:41:33,200
uh status
4655
03:41:33,200 --> 03:41:39,120
uh does not equal to payment status
4656
03:41:39,120 --> 03:41:44,760
pending dot value not dot but value
4657
03:41:44,760 --> 03:41:48,239
then we return to checkout failure
4658
03:41:48,239 --> 03:41:50,939
otherwise we give the customer
4659
03:41:50,939 --> 03:41:53,040
and we show the success page as well as
4660
03:41:53,040 --> 03:41:55,380
we have to update the payment
4661
03:41:55,380 --> 03:41:57,540
and the order
4662
03:41:57,540 --> 03:42:00,239
and we have to mark them as paid like
4663
03:42:00,239 --> 03:42:02,100
payment
4664
03:42:02,100 --> 03:42:04,020
status
4665
03:42:04,020 --> 03:42:06,899
or still like this payment status equals
4666
03:42:06,899 --> 03:42:09,359
payment status
4667
03:42:09,359 --> 03:42:11,580
uh pale paid
4668
03:42:11,580 --> 03:42:13,380
uh
4669
03:42:13,380 --> 03:42:15,479
value I think the value is not necessary
4670
03:42:15,479 --> 03:42:18,960
let's see without the value
4671
03:42:18,960 --> 03:42:22,439
and what else you know we have we can
4672
03:42:22,439 --> 03:42:24,720
what else do we need
4673
03:42:24,720 --> 03:42:27,120
I think nothing like we have updated by
4674
03:42:27,120 --> 03:42:28,979
but that's going to be the same one
4675
03:42:28,979 --> 03:42:31,200
status we just need to change the status
4676
03:42:31,200 --> 03:42:33,540
okay we change the status then on
4677
03:42:33,540 --> 03:42:37,020
payment we call update
4678
03:42:37,020 --> 03:42:38,700
and we have to do the same thing for
4679
03:42:38,700 --> 03:42:41,340
order so we get the order from
4680
03:42:41,340 --> 03:42:44,760
payment actually we need to set up the
4681
03:42:44,760 --> 03:42:46,859
relation so let's open
4682
03:42:46,859 --> 03:42:48,420
payment
4683
03:42:48,420 --> 03:42:51,239
and now let's create public function
4684
03:42:51,239 --> 03:42:52,520
order
4685
03:42:52,520 --> 03:42:56,760
which should return as one
4686
03:42:56,760 --> 03:43:00,720
return lease as one
4687
03:43:00,720 --> 03:43:03,720
order
4688
03:43:05,580 --> 03:43:08,880
and I think that's it so the payment has
4689
03:43:08,880 --> 03:43:11,160
order ID so that should have a correct
4690
03:43:11,160 --> 03:43:13,500
reference to the order and that should
4691
03:43:13,500 --> 03:43:14,840
return order
4692
03:43:14,840 --> 03:43:17,700
let's get the order
4693
03:43:17,700 --> 03:43:19,680
and let's
4694
03:43:19,680 --> 03:43:22,680
let's far dump
4695
03:43:22,680 --> 03:43:25,340
order
4696
03:43:27,239 --> 03:43:31,220
um let me actually dump this
4697
03:43:31,260 --> 03:43:33,960
I I need the pre-tags as well so I have
4698
03:43:33,960 --> 03:43:35,939
the order now I'm going to change the
4699
03:43:35,939 --> 03:43:37,319
order
4700
03:43:37,319 --> 03:43:39,540
status
4701
03:43:39,540 --> 03:43:43,739
to be order status
4702
03:43:43,739 --> 03:43:46,220
paid
4703
03:43:47,040 --> 03:43:49,680
and
4704
03:43:49,680 --> 03:43:52,560
what else do we need to update
4705
03:43:52,560 --> 03:43:55,439
we have the status to be paid
4706
03:43:55,439 --> 03:43:57,720
and nothing else so we change the status
4707
03:43:57,720 --> 03:44:01,140
then on order we call Save not save it
4708
03:44:01,140 --> 03:44:03,120
update
4709
03:44:03,120 --> 03:44:06,439
and just like this
4710
03:44:06,960 --> 03:44:09,779
we finish the success page so we get the
4711
03:44:09,779 --> 03:44:12,060
session ID we make here in the stripe we
4712
03:44:12,060 --> 03:44:13,500
make sure that the session exists if
4713
03:44:13,500 --> 03:44:15,420
that doesn't exist we return failure
4714
03:44:15,420 --> 03:44:19,220
then we cure a payment from our database
4715
03:44:19,220 --> 03:44:21,840
and we can put this status by the way
4716
03:44:21,840 --> 03:44:24,200
here
4717
03:44:25,160 --> 03:44:28,080
the session ID
4718
03:44:28,080 --> 03:44:33,859
needs to be these in the status
4719
03:44:33,859 --> 03:44:37,800
should be equal pending
4720
03:44:37,800 --> 03:44:41,819
right so payment status
4721
03:44:41,819 --> 03:44:43,739
pending
4722
03:44:43,739 --> 03:44:45,840
if the payment doesn't exist with the
4723
03:44:45,840 --> 03:44:48,239
following criterias then we again return
4724
03:44:48,239 --> 03:44:51,540
with failure if the payment exists then
4725
03:44:51,540 --> 03:44:54,239
we mark it as paid in update and we take
4726
03:44:54,239 --> 03:44:57,180
the order of this payment and Market as
4727
03:44:57,180 --> 03:45:00,420
paid and update
4728
03:45:00,420 --> 03:45:02,939
perfect
4729
03:45:02,939 --> 03:45:06,420
all right now let's test this
4730
03:45:06,420 --> 03:45:09,620
let's reload the page
4731
03:45:12,260 --> 03:45:15,000
let's provide
4732
03:45:15,000 --> 03:45:16,920
correct information
4733
03:45:16,920 --> 03:45:19,680
let's write John Smith
4734
03:45:19,680 --> 03:45:25,020
and let's click pay now let's see
4735
03:45:25,020 --> 03:45:28,200
your payment was not successful and
4736
03:45:28,200 --> 03:45:31,080
there must be reason for that
4737
03:45:31,080 --> 03:45:33,779
okay either payment doesn't exist didn't
4738
03:45:33,779 --> 03:45:37,500
exist or sessions didn't exist
4739
03:45:37,500 --> 03:45:39,180
let's start
4740
03:45:39,180 --> 03:45:42,420
typing everything let's start let's type
4741
03:45:42,420 --> 03:45:44,399
print session
4742
03:45:44,399 --> 03:45:47,340
and let's print
4743
03:45:47,340 --> 03:45:50,340
payment
4744
03:45:50,340 --> 03:45:53,779
s also
4745
03:45:54,120 --> 03:45:55,800
um throw
4746
03:45:55,800 --> 03:45:58,640
exception
4747
03:45:59,700 --> 03:46:02,819
let's reload the page
4748
03:46:02,819 --> 03:46:04,200
okay
4749
03:46:04,200 --> 03:46:08,840
collection update does not exist
4750
03:46:11,160 --> 03:46:15,899
let's look for checkout controller
4751
03:46:16,560 --> 03:46:20,760
and payment update didn't work because
4752
03:46:20,760 --> 03:46:24,260
right here I called get
4753
03:46:24,840 --> 03:46:28,279
okay I need first
4754
03:46:28,380 --> 03:46:31,560
I think Laro is right I hear another
4755
03:46:31,560 --> 03:46:33,720
let's reload the page
4756
03:46:33,720 --> 03:46:35,880
and now let's see
4757
03:46:35,880 --> 03:46:40,819
orders payment ID okay that's
4758
03:46:40,920 --> 03:46:43,260
orders payment ID and we're close Okay
4759
03:46:43,260 --> 03:46:44,939
that's something
4760
03:46:44,939 --> 03:46:48,720
which I didn't expect so payment
4761
03:46:48,720 --> 03:46:51,979
has one order
4762
03:46:52,859 --> 03:46:55,260
a single payment cannot have multiple
4763
03:46:55,260 --> 03:46:59,100
orders right so basically payment should
4764
03:46:59,100 --> 03:46:59,880
have
4765
03:46:59,880 --> 03:47:02,100
this has one order
4766
03:47:02,100 --> 03:47:03,600
strange
4767
03:47:03,600 --> 03:47:06,000
so I have to specify right here foreign
4768
03:47:06,000 --> 03:47:08,819
key will be ID and the local key will be
4769
03:47:08,819 --> 03:47:10,800
order ID if I specify this it's going to
4770
03:47:10,800 --> 03:47:12,979
work
4771
03:47:13,080 --> 03:47:17,399
but yeah I didn't expect that
4772
03:47:17,399 --> 03:47:18,060
um
4773
03:47:18,060 --> 03:47:20,819
I'm going to find out more about this
4774
03:47:20,819 --> 03:47:24,420
but let's reload the page
4775
03:47:24,420 --> 03:47:26,340
okay we don't have any error that's good
4776
03:47:26,340 --> 03:47:27,960
so we have the session
4777
03:47:27,960 --> 03:47:30,600
scroll down below
4778
03:47:30,600 --> 03:47:35,040
uh we don't have payment however
4779
03:47:35,040 --> 03:47:37,680
and then we have a problem now why don't
4780
03:47:37,680 --> 03:47:39,420
we have payment
4781
03:47:39,420 --> 03:47:42,899
let's click on payments
4782
03:47:42,899 --> 03:47:47,239
and we have the session ID right
4783
03:47:47,700 --> 03:47:50,520
and yeah this status is already paid
4784
03:47:50,520 --> 03:47:52,920
that is the problem
4785
03:47:52,920 --> 03:47:55,920
which is logical because we had an error
4786
03:47:55,920 --> 03:47:58,620
right here so let me update this and
4787
03:47:58,620 --> 03:48:00,120
change into
4788
03:48:00,120 --> 03:48:02,340
unpaid
4789
03:48:02,340 --> 03:48:07,920
and click go now let's
4790
03:48:07,920 --> 03:48:09,779
let's go in the checkout controller and
4791
03:48:09,779 --> 03:48:12,540
remove our dump statements
4792
03:48:12,540 --> 03:48:16,319
I'm going to leave order let's reload
4793
03:48:16,319 --> 03:48:17,700
the page
4794
03:48:17,700 --> 03:48:19,920
payment wasn't successful again we have
4795
03:48:19,920 --> 03:48:22,979
problem let's undo
4796
03:48:22,979 --> 03:48:25,399
and reload
4797
03:48:25,399 --> 03:48:29,420
what is the payment status
4798
03:48:30,239 --> 03:48:33,260
it should be pending
4799
03:48:34,080 --> 03:48:35,340
ending
4800
03:48:35,340 --> 03:48:38,100
yeah so like we are debugging and we're
4801
03:48:38,100 --> 03:48:40,020
testing and we're making sure that it
4802
03:48:40,020 --> 03:48:41,939
doesn't break so we don't have a
4803
03:48:41,939 --> 03:48:44,160
security hole here
4804
03:48:44,160 --> 03:48:46,800
now what happens so we have session and
4805
03:48:46,800 --> 03:48:49,680
we have everything in John Smith your
4806
03:48:49,680 --> 03:48:51,660
order has been completed
4807
03:48:51,660 --> 03:48:56,239
this is the most satisfying message
4808
03:48:56,340 --> 03:48:57,960
um so far
4809
03:48:57,960 --> 03:49:01,020
so let's remove this
4810
03:49:01,020 --> 03:49:03,960
let's save and if we just reload the
4811
03:49:03,960 --> 03:49:05,460
payment wasn't successful obviously
4812
03:49:05,460 --> 03:49:07,800
because our session ID was already used
4813
03:49:07,800 --> 03:49:10,020
and payment was already marked as
4814
03:49:10,020 --> 03:49:11,760
completed
4815
03:49:11,760 --> 03:49:13,760
let's go in the
4816
03:49:13,760 --> 03:49:16,979
failure blade and give it also width
4817
03:49:16,979 --> 03:49:21,560
just like we gave to success
4818
03:49:23,819 --> 03:49:26,760
so that we show this in the center
4819
03:49:26,760 --> 03:49:29,120
we reload
4820
03:49:29,120 --> 03:49:33,560
okay so far so good
4821
03:49:33,600 --> 03:49:36,660
of course the design of this accessor
4822
03:49:36,660 --> 03:49:39,180
failure message can be improved
4823
03:49:39,180 --> 03:49:41,399
um but yeah I'm Gonna Leave This as this
4824
03:49:41,399 --> 03:49:43,920
and now I'm going to do final thing in
4825
03:49:43,920 --> 03:49:46,500
the checkout process which basically
4826
03:49:46,500 --> 03:49:51,239
will remove the items from cart
4827
03:49:51,239 --> 03:49:53,760
so we can leave this throw no we
4828
03:49:53,760 --> 03:49:56,100
shouldn't leave that
4829
03:49:56,100 --> 03:49:58,800
so probably in the checkout failure I'm
4830
03:49:58,800 --> 03:49:59,819
going to pass
4831
03:49:59,819 --> 03:50:02,779
message
4832
03:50:04,560 --> 03:50:08,640
and message in this case will be e and
4833
03:50:08,640 --> 03:50:12,060
get message
4834
03:50:14,040 --> 03:50:16,859
and we need to accept the message in
4835
03:50:16,859 --> 03:50:19,460
failure
4836
03:50:21,060 --> 03:50:25,319
let's put this in the H1
4837
03:50:25,319 --> 03:50:27,359
and then we have a paragraph inside
4838
03:50:27,359 --> 03:50:31,380
which we output message
4839
03:50:31,859 --> 03:50:34,800
If the message exists we output that
4840
03:50:34,800 --> 03:50:38,160
otherwise we output empty string
4841
03:50:38,160 --> 03:50:41,939
and from the other failures like we can
4842
03:50:41,939 --> 03:50:43,319
specify
4843
03:50:43,319 --> 03:50:45,239
message
4844
03:50:45,239 --> 03:50:47,720
payment
4845
03:50:47,720 --> 03:50:50,819
does not exist
4846
03:50:50,819 --> 03:50:52,859
and right here we can
4847
03:50:52,859 --> 03:50:56,239
specify message
4848
03:50:56,939 --> 03:50:59,939
um invalid session
4849
03:50:59,939 --> 03:51:01,979
ID
4850
03:51:01,979 --> 03:51:03,600
okay fine
4851
03:51:03,600 --> 03:51:07,739
now let's delete the items from the cart
4852
03:51:07,739 --> 03:51:10,319
so I think the cart
4853
03:51:10,319 --> 03:51:12,359
has
4854
03:51:12,359 --> 03:51:13,680
remove
4855
03:51:13,680 --> 03:51:16,319
D item from the card let's open cart
4856
03:51:16,319 --> 03:51:21,739
controller and remember how we do remove
4857
03:51:22,620 --> 03:51:25,920
now we do remove for a single item in
4858
03:51:25,920 --> 03:51:28,500
this case we have to remove items
4859
03:51:28,500 --> 03:51:30,840
completely from the cart and if the
4860
03:51:30,840 --> 03:51:33,600
checkout happens we know that they are
4861
03:51:33,600 --> 03:51:35,520
the cart items are definitely in the
4862
03:51:35,520 --> 03:51:38,460
database not in the cookie or somewhere
4863
03:51:38,460 --> 03:51:43,319
else so why don't we simply run
4864
03:51:43,319 --> 03:51:44,399
um
4865
03:51:44,399 --> 03:51:45,899
delete
4866
03:51:45,899 --> 03:51:48,979
on cart
4867
03:51:49,319 --> 03:51:52,560
item delete
4868
03:51:52,560 --> 03:51:56,160
and we have to specify I think uh user
4869
03:51:56,160 --> 03:51:59,600
ID user ID
4870
03:52:00,060 --> 03:52:03,600
not sure if I'm doing correct so let me
4871
03:52:03,600 --> 03:52:06,319
actually search for this laravel
4872
03:52:06,319 --> 03:52:09,800
bulk delete
4873
03:52:14,220 --> 03:52:17,359
I want bulk delete
4874
03:52:17,359 --> 03:52:21,899
something find and delete something find
4875
03:52:21,899 --> 03:52:23,819
and delete
4876
03:52:23,819 --> 03:52:26,899
is that correct
4877
03:52:33,000 --> 03:52:37,020
find each delete
4878
03:52:37,020 --> 03:52:39,720
the question I think
4879
03:52:39,720 --> 03:52:41,279
the question is slightly different
4880
03:52:41,279 --> 03:52:44,399
probably the user probably wants to
4881
03:52:44,399 --> 03:52:46,979
trigger the events as well
4882
03:52:46,979 --> 03:52:51,239
I just want bulk delete I don't care
4883
03:52:51,239 --> 03:52:56,040
events so let me try uh cart item find
4884
03:52:56,040 --> 03:52:58,939
and then delete
4885
03:52:59,580 --> 03:53:02,220
so let's run
4886
03:53:02,220 --> 03:53:06,500
where's the find let me actually copy
4887
03:53:11,760 --> 03:53:16,979
find and delete so let's run query
4888
03:53:16,979 --> 03:53:19,560
do we have find here
4889
03:53:19,560 --> 03:53:27,960
bind specify a user ID corresponds to
4890
03:53:27,960 --> 03:53:31,260
current user ID do we have the user I
4891
03:53:31,260 --> 03:53:33,420
think we don't have the user so I'm let
4892
03:53:33,420 --> 03:53:36,239
me actually get the user from request
4893
03:53:36,239 --> 03:53:39,979
and put this right here
4894
03:53:40,260 --> 03:53:44,960
and then call delete
4895
03:53:45,060 --> 03:53:47,939
okay let's see if this works so we have
4896
03:53:47,939 --> 03:53:50,040
file items in the cart
4897
03:53:50,040 --> 03:53:53,340
then proceed to check out
4898
03:53:53,340 --> 03:53:54,720
provide
4899
03:53:54,720 --> 03:53:56,939
email
4900
03:53:56,939 --> 03:53:58,939
John Smith
4901
03:53:58,939 --> 03:54:02,279
and let's save this
4902
03:54:02,279 --> 03:54:04,859
so you may info I have to provide my
4903
03:54:04,859 --> 03:54:06,120
phone number
4904
03:54:06,120 --> 03:54:09,680
okay let me make sure that this
4905
03:54:11,640 --> 03:54:13,439
now let's see
4906
03:54:13,439 --> 03:54:16,319
your payment wasn't successful method
4907
03:54:16,319 --> 03:54:18,660
okay delete collection delete does not
4908
03:54:18,660 --> 03:54:20,880
exist
4909
03:54:20,880 --> 03:54:22,319
okay
4910
03:54:22,319 --> 03:54:26,420
so let's go back and find another
4911
03:54:26,460 --> 03:54:29,899
another example
4912
03:54:31,920 --> 03:54:34,920
something find
4913
03:54:34,920 --> 03:54:37,380
and delete
4914
03:54:37,380 --> 03:54:39,600
okay this one gives you
4915
03:54:39,600 --> 03:54:42,680
an error
4916
03:54:46,439 --> 03:54:48,840
this one looks
4917
03:54:48,840 --> 03:54:51,840
like correct
4918
03:54:55,620 --> 03:54:58,319
product Destroyer okay I it's not a
4919
03:54:58,319 --> 03:55:00,239
problem I can iterate over my products
4920
03:55:00,239 --> 03:55:03,199
and just delete them
4921
03:55:03,300 --> 03:55:05,399
if there is
4922
03:55:05,399 --> 03:55:07,800
I don't want to just lose
4923
03:55:07,800 --> 03:55:10,020
um much time on this I'm going to go
4924
03:55:10,020 --> 03:55:14,160
back and then find out and fix that
4925
03:55:14,160 --> 03:55:17,300
seems like we're in should work
4926
03:55:17,300 --> 03:55:19,859
let me actually just search for into
4927
03:55:19,859 --> 03:55:23,819
laravel documentation
4928
03:55:28,680 --> 03:55:29,239
um
4929
03:55:29,239 --> 03:55:31,199
eloquent
4930
03:55:31,199 --> 03:55:33,800
delete
4931
03:55:36,420 --> 03:55:38,520
let's look for
4932
03:55:38,520 --> 03:55:41,060
delete
4933
03:55:41,279 --> 03:55:44,699
ing modals
4934
03:55:44,699 --> 03:55:48,739
don't we have like bulk delete
4935
03:55:51,000 --> 03:55:54,020
help
4936
03:56:03,540 --> 03:56:07,800
okay fight weird delete that should work
4937
03:56:07,800 --> 03:56:10,520
where
4938
03:56:11,100 --> 03:56:13,739
delete
4939
03:56:13,739 --> 03:56:17,060
now let's
4940
03:56:17,399 --> 03:56:18,720
I think
4941
03:56:18,720 --> 03:56:20,160
I think it's not going to work because
4942
03:56:20,160 --> 03:56:24,180
the payment would be marked as paid so
4943
03:56:24,180 --> 03:56:26,100
let's actually change the last payment
4944
03:56:26,100 --> 03:56:29,420
into pending
4945
03:56:32,580 --> 03:56:36,739
and now let's reload the page
4946
03:56:36,960 --> 03:56:39,600
the order has been completed and I don't
4947
03:56:39,600 --> 03:56:42,620
have items in the cart
4948
03:56:42,620 --> 03:56:45,000
congratulate me
4949
03:56:45,000 --> 03:56:48,060
or I will congratulate you so we have
4950
03:56:48,060 --> 03:56:50,520
successfully implemented a now checkout
4951
03:56:50,520 --> 03:56:52,260
process the whole process I wasn't
4952
03:56:52,260 --> 03:56:54,120
actually prepared for this process you
4953
03:56:54,120 --> 03:56:56,640
probably noticed that now I just had a
4954
03:56:56,640 --> 03:56:59,939
very very minimalistic uh research where
4955
03:56:59,939 --> 03:57:02,279
was the stripe documentation and things
4956
03:57:02,279 --> 03:57:03,540
like that
4957
03:57:03,540 --> 03:57:07,199
so yeah we we made it so now we have
4958
03:57:07,199 --> 03:57:09,000
order
4959
03:57:09,000 --> 03:57:12,540
in the orders we have actually few
4960
03:57:12,540 --> 03:57:15,120
orders two of them are paid and of
4961
03:57:15,120 --> 03:57:16,920
course in my account we have the my
4962
03:57:16,920 --> 03:57:19,080
profile and my orders page and the next
4963
03:57:19,080 --> 03:57:21,899
step will be to have my orders page
4964
03:57:21,899 --> 03:57:24,239
inside which we will see what items we
4965
03:57:24,239 --> 03:57:26,399
have purchased in this order as well as
4966
03:57:26,399 --> 03:57:29,180
see whether the order is paid or not
4967
03:57:29,180 --> 03:57:32,420
even if we just add items into the cart
4968
03:57:32,420 --> 03:57:36,359
and go to the stripe page this is the
4969
03:57:36,359 --> 03:57:38,640
interesting thing go in the stripe
4970
03:57:38,640 --> 03:57:42,720
payment page and then I close this or
4971
03:57:42,720 --> 03:57:44,399
just cancel or do anything else the
4972
03:57:44,399 --> 03:57:46,439
order is made and the order is unpaid
4973
03:57:46,439 --> 03:57:49,199
and that will now we have how many one
4974
03:57:49,199 --> 03:57:51,000
two three four we have four orders I
4975
03:57:51,000 --> 03:57:53,520
reload and we have now unpaid one more
4976
03:57:53,520 --> 03:57:56,939
order and this will show up in our my
4977
03:57:56,939 --> 03:58:00,720
orders page for sure and we can we can
4978
03:58:00,720 --> 03:58:03,960
probably implement to pay it later
4979
03:58:03,960 --> 03:58:06,720
okay we can start working on my orders I
4980
03:58:06,720 --> 03:58:07,439
think
4981
03:58:07,439 --> 03:58:11,520
now let's create new route for orders
4982
03:58:11,520 --> 03:58:13,080
page
4983
03:58:13,080 --> 03:58:16,620
I'm going to Define right here root
4984
03:58:16,620 --> 03:58:18,000
get
4985
03:58:18,000 --> 03:58:20,580
slash orders
4986
03:58:20,580 --> 03:58:23,779
and let's consider there is order
4987
03:58:23,779 --> 03:58:26,520
controller for this
4988
03:58:26,520 --> 03:58:28,859
maybe you can create controller first
4989
03:58:28,859 --> 03:58:32,100
PHP artisan
4990
03:58:32,100 --> 03:58:38,220
make controller order controller
4991
03:58:38,220 --> 03:58:42,180
okay controller
4992
03:58:43,020 --> 03:58:45,300
okay let's hit the enter and now let's
4993
03:58:45,300 --> 03:58:49,680
use order controller class and the
4994
03:58:49,680 --> 03:58:52,520
method should be probable index
4995
03:58:52,520 --> 03:58:59,660
then we have a name orders dot index
4996
03:58:59,880 --> 03:59:04,199
okay we we might have one more
4997
03:59:04,199 --> 03:59:09,120
URL is going to be orders view with the
4998
03:59:09,120 --> 03:59:12,439
order specified order let's replace the
4999
03:59:12,439 --> 03:59:14,880
qualifier with an import
5000
03:59:14,880 --> 03:59:19,620
in in this case that's going to be View
5001
03:59:19,620 --> 03:59:22,140
okay we have the in we have the roots
5002
03:59:22,140 --> 03:59:23,520
ready now let's go in the order
5003
03:59:23,520 --> 03:59:24,960
controller
5004
03:59:24,960 --> 03:59:27,300
and let's define
5005
03:59:27,300 --> 03:59:29,100
index
5006
03:59:29,100 --> 03:59:31,500
we get request
5007
03:59:31,500 --> 03:59:33,720
and we're going to make query into
5008
03:59:33,720 --> 03:59:37,140
orders so orders
5009
03:59:37,140 --> 03:59:41,040
equals order
5010
03:59:41,300 --> 03:59:45,080
uh query
5011
03:59:45,960 --> 03:59:48,859
well we have to specify where
5012
03:59:48,859 --> 03:59:51,840
the current user I think I have copied
5013
03:59:51,840 --> 03:59:53,279
somewhere the current user information
5014
03:59:53,279 --> 03:59:57,060
so I'm going to paste this right here so
5015
03:59:57,060 --> 03:59:58,800
Theory
5016
03:59:58,800 --> 04:00:01,520
where
5017
04:00:01,520 --> 04:00:04,800
user ID corresponds to
5018
04:00:04,800 --> 04:00:07,260
user ID
5019
04:00:07,260 --> 04:00:10,319
and I'm going to call paginate on that
5020
04:00:10,319 --> 04:00:13,500
returning 20 orders
5021
04:00:13,500 --> 04:00:16,859
and then we're going to return View
5022
04:00:16,859 --> 04:00:19,319
with orders
5023
04:00:19,319 --> 04:00:21,720
index
5024
04:00:21,720 --> 04:00:25,140
in posterior
5025
04:00:25,140 --> 04:00:27,800
orders
5026
04:00:28,319 --> 04:00:32,819
okay let's create now view resource
5027
04:00:32,819 --> 04:00:35,699
we have car check out layout product so
5028
04:00:35,699 --> 04:00:38,460
let's name it into singular form order
5029
04:00:38,460 --> 04:00:40,199
index
5030
04:00:40,199 --> 04:00:42,479
and we have the product so I want to
5031
04:00:42,479 --> 04:00:44,640
actually duplicate this product and call
5032
04:00:44,640 --> 04:00:46,520
this order
5033
04:00:46,520 --> 04:00:48,840
and then I'm going to clear up
5034
04:00:48,840 --> 04:00:52,680
everything inside
5035
04:00:52,739 --> 04:00:54,300
index
5036
04:00:54,300 --> 04:00:58,340
I'm going to get right here orders
5037
04:00:59,040 --> 04:01:02,880
and I will not clear up everything from
5038
04:01:02,880 --> 04:01:06,000
view as well I just duplicate because
5039
04:01:06,000 --> 04:01:10,500
like my PHP storm when I have scaling
5040
04:01:10,500 --> 04:01:12,239
increased
5041
04:01:12,239 --> 04:01:15,840
then the right click opens in the second
5042
04:01:15,840 --> 04:01:16,859
screen
5043
04:01:16,859 --> 04:01:19,859
the context menu basically anyway so we
5044
04:01:19,859 --> 04:01:20,819
have the
5045
04:01:20,819 --> 04:01:24,540
uh we have the view ready so in fact if
5046
04:01:24,540 --> 04:01:29,040
we now go and open navigation and find
5047
04:01:29,040 --> 04:01:30,420
orders
5048
04:01:30,420 --> 04:01:33,720
and change these I think we have a
5049
04:01:33,720 --> 04:01:36,239
second match for this and let's change
5050
04:01:36,239 --> 04:01:37,819
into both
5051
04:01:37,819 --> 04:01:40,500
now I have multi-cursor one is about
5052
04:01:40,500 --> 04:01:44,939
somewhere one is here root
5053
04:01:44,939 --> 04:01:48,000
order dot index
5054
04:01:48,000 --> 04:01:53,060
so we save this and reload the page
5055
04:01:53,220 --> 04:01:55,319
order index not defined I think we
5056
04:01:55,319 --> 04:01:58,220
called it orders
5057
04:01:58,380 --> 04:02:03,500
so let's call it order index order View
5058
04:02:07,199 --> 04:02:11,540
okay what just happened on the home page
5059
04:02:12,479 --> 04:02:15,560
homepage doesn't work
5060
04:02:15,660 --> 04:02:18,420
where are the
5061
04:02:18,420 --> 04:02:19,979
products
5062
04:02:19,979 --> 04:02:22,920
we have the products
5063
04:02:22,920 --> 04:02:26,180
what did we do
5064
04:02:29,340 --> 04:02:32,399
I I did what I shouldn't have done so I
5065
04:02:32,399 --> 04:02:34,140
modified the product index and product
5066
04:02:34,140 --> 04:02:35,220
View
5067
04:02:35,220 --> 04:02:38,040
okay so I'm going to revert this using
5068
04:02:38,040 --> 04:02:40,399
git
5069
04:02:40,920 --> 04:02:46,040
and this is what I should have modified
5070
04:02:46,739 --> 04:02:48,600
okay it should be
5071
04:02:48,600 --> 04:02:50,880
orders
5072
04:02:50,880 --> 04:02:53,220
and
5073
04:02:53,220 --> 04:02:56,220
should clear up everything right here H1
5074
04:02:56,220 --> 04:02:57,840
order
5075
04:02:57,840 --> 04:02:59,399
H1
5076
04:02:59,399 --> 04:03:01,859
order View
5077
04:03:01,859 --> 04:03:04,260
and that is H1
5078
04:03:04,260 --> 04:03:07,080
orders we have template for this but
5079
04:03:07,080 --> 04:03:08,399
let's have a look
5080
04:03:08,399 --> 04:03:12,620
so let's click now my orders
5081
04:03:12,960 --> 04:03:17,279
a known calm user ID in wear clause
5082
04:03:17,279 --> 04:03:20,040
I think it's called created by right so
5083
04:03:20,040 --> 04:03:21,180
let's open
5084
04:03:21,180 --> 04:03:23,640
order controller
5085
04:03:23,640 --> 04:03:29,720
created by is the user
5086
04:03:30,000 --> 04:03:32,640
okay we have orders now let me open vs
5087
04:03:32,640 --> 04:03:33,479
code
5088
04:03:33,479 --> 04:03:36,000
because we have
5089
04:03:36,000 --> 04:03:38,939
somewhere orders
5090
04:03:38,939 --> 04:03:42,680
okay and I'm going to copy now
5091
04:03:44,100 --> 04:03:47,220
copy this container
5092
04:03:47,220 --> 04:03:49,680
and put in my
5093
04:03:49,680 --> 04:03:51,960
order index
5094
04:03:51,960 --> 04:03:55,100
right here
5095
04:03:55,199 --> 04:03:59,160
and let's have a look in the browser
5096
04:03:59,160 --> 04:04:02,939
okay this is my orders
5097
04:04:02,939 --> 04:04:05,840
and we have
5098
04:04:06,300 --> 04:04:08,160
what do we have so we have the order
5099
04:04:08,160 --> 04:04:09,180
number
5100
04:04:09,180 --> 04:04:11,279
we have the date when the orders was
5101
04:04:11,279 --> 04:04:15,840
made we have status we have subtotal and
5102
04:04:15,840 --> 04:04:19,620
few actions like we have view invoice or
5103
04:04:19,620 --> 04:04:22,319
pay if the order is paid of course we
5104
04:04:22,319 --> 04:04:24,000
aren't going to show this we just have
5105
04:04:24,000 --> 04:04:27,359
view invoice okay let's actually try to
5106
04:04:27,359 --> 04:04:31,620
implement this and output actual data so
5107
04:04:31,620 --> 04:04:35,600
here we have TR I'm going to use PHP
5108
04:04:35,600 --> 04:04:39,060
no actually we can use blade why should
5109
04:04:39,060 --> 04:04:44,340
I use PHP for each orders is
5110
04:04:44,340 --> 04:04:46,739
order
5111
04:04:46,739 --> 04:04:50,279
and right here we have aim for each
5112
04:04:50,279 --> 04:04:52,859
and let's just output
5113
04:04:52,859 --> 04:04:57,560
view information let me actually
5114
04:05:01,800 --> 04:05:02,760
um
5115
04:05:02,760 --> 04:05:04,920
delete the
5116
04:05:04,920 --> 04:05:07,500
other
5117
04:05:07,500 --> 04:05:10,140
TRS
5118
04:05:10,140 --> 04:05:11,939
all of them
5119
04:05:11,939 --> 04:05:14,399
leave only one and it's going to have
5120
04:05:14,399 --> 04:05:15,720
the
5121
04:05:15,720 --> 04:05:18,300
root to
5122
04:05:18,300 --> 04:05:22,020
order Dot View we have to specify right
5123
04:05:22,020 --> 04:05:25,020
here order as an argument and let's
5124
04:05:25,020 --> 04:05:28,800
output number whatever is the order
5125
04:05:28,800 --> 04:05:32,699
number so order ID is the number in this
5126
04:05:32,699 --> 04:05:33,479
case
5127
04:05:33,479 --> 04:05:36,779
now let's output date
5128
04:05:36,779 --> 04:05:39,420
it's going to be order
5129
04:05:39,420 --> 04:05:42,180
created it
5130
04:05:42,180 --> 04:05:46,040
we're going to Output the status
5131
04:05:47,580 --> 04:05:49,140
order
5132
04:05:49,140 --> 04:05:50,880
haters
5133
04:05:50,880 --> 04:05:54,120
and let's output price
5134
04:05:54,120 --> 04:05:55,680
order
5135
04:05:55,680 --> 04:05:59,779
thing it's called total price
5136
04:06:00,960 --> 04:06:03,960
and then this is view invoice and this
5137
04:06:03,960 --> 04:06:06,840
is pay okay we will take care of these
5138
04:06:06,840 --> 04:06:10,319
buttons but let's have a look so far we
5139
04:06:10,319 --> 04:06:12,239
have unpaid and paid
5140
04:06:12,239 --> 04:06:14,520
let's
5141
04:06:14,520 --> 04:06:18,300
let's modify this so we have the status
5142
04:06:18,300 --> 04:06:21,260
and
5143
04:06:21,479 --> 04:06:25,500
we have to conditionally add classes
5144
04:06:25,500 --> 04:06:29,239
okay so right here
5145
04:06:29,699 --> 04:06:34,140
we are going to add if order
5146
04:06:34,140 --> 04:06:35,359
status
5147
04:06:35,359 --> 04:06:38,699
equals order
5148
04:06:38,699 --> 04:06:40,800
status
5149
04:06:40,800 --> 04:06:43,340
paid
5150
04:06:44,420 --> 04:06:47,880
we're going to make these let's move
5151
04:06:47,880 --> 04:06:52,880
this down we're going to make the screen
5152
04:06:54,660 --> 04:06:56,340
um PG
5153
04:06:56,340 --> 04:06:57,960
okay I think
5154
04:06:57,960 --> 04:07:01,500
we have this like green color or it was
5155
04:07:01,500 --> 04:07:04,340
called Emerald
5156
04:07:05,160 --> 04:07:08,399
where was that
5157
04:07:08,399 --> 04:07:11,960
uh let's search for paid
5158
04:07:12,420 --> 04:07:15,960
here it is PG Emerald 500. okay let's
5159
04:07:15,960 --> 04:07:18,660
give it PG Emerald 500
5160
04:07:18,660 --> 04:07:21,779
if the order is paid otherwise we don't
5161
04:07:21,779 --> 04:07:24,380
give anything
5162
04:07:24,840 --> 04:07:28,500
okay but we output the order status for
5163
04:07:28,500 --> 04:07:30,080
sure
5164
04:07:30,080 --> 04:07:32,939
uh no let's see
5165
04:07:32,939 --> 04:07:36,180
let's remove this PG Gray
5166
04:07:36,180 --> 04:07:39,680
we can put this in the else
5167
04:07:45,540 --> 04:07:46,439
okay
5168
04:07:46,439 --> 04:07:51,020
let's specify right here maybe value
5169
04:07:52,620 --> 04:07:55,620
okay if the order status equals
5170
04:07:55,620 --> 04:07:59,040
paid we have bgmoral 500
5171
04:07:59,040 --> 04:08:01,560
else we have something else well it
5172
04:08:01,560 --> 04:08:03,239
doesn't seem to be working let's check
5173
04:08:03,239 --> 04:08:05,479
this
5174
04:08:09,000 --> 04:08:12,060
oops that should be
5175
04:08:12,060 --> 04:08:14,399
that should be right here
5176
04:08:14,399 --> 04:08:16,140
isn't it
5177
04:08:16,140 --> 04:08:18,420
yes it is
5178
04:08:18,420 --> 04:08:22,500
okay here we go we have paid in unpaid
5179
04:08:22,500 --> 04:08:24,420
actually and let's try to change this
5180
04:08:24,420 --> 04:08:26,840
into small
5181
04:08:26,840 --> 04:08:30,800
yeah I think better
5182
04:08:31,560 --> 04:08:33,600
okay so we have the date we have the
5183
04:08:33,600 --> 04:08:36,600
subtotal and we have the buttons let's
5184
04:08:36,600 --> 04:08:39,239
disable the pay button if the order is
5185
04:08:39,239 --> 04:08:41,520
actually already paid
5186
04:08:41,520 --> 04:08:43,979
so that is the button we can completely
5187
04:08:43,979 --> 04:08:47,340
remove or like disable it let's actually
5188
04:08:47,340 --> 04:08:50,520
remove so if
5189
04:08:50,520 --> 04:08:53,040
uh order
5190
04:08:53,040 --> 04:08:55,800
status let's actually do like this so
5191
04:08:55,800 --> 04:08:59,040
I'm going to open order PHP and I'm
5192
04:08:59,040 --> 04:09:02,880
going to create public function is paid
5193
04:09:02,880 --> 04:09:06,020
which will return this
5194
04:09:06,020 --> 04:09:09,500
status if the status
5195
04:09:09,500 --> 04:09:13,819
equals to order status
5196
04:09:13,819 --> 04:09:15,600
paid
5197
04:09:15,600 --> 04:09:17,640
value
5198
04:09:17,640 --> 04:09:20,580
okay and I'm going to use right here is
5199
04:09:20,580 --> 04:09:21,960
paid
5200
04:09:21,960 --> 04:09:24,420
if the order is paid
5201
04:09:24,420 --> 04:09:26,520
let's do like this if the order is not
5202
04:09:26,520 --> 04:09:30,020
paid in this case we show
5203
04:09:30,020 --> 04:09:33,120
the link
5204
04:09:33,120 --> 04:09:35,460
and we can do something similar right
5205
04:09:35,460 --> 04:09:36,420
here
5206
04:09:36,420 --> 04:09:38,279
if the order
5207
04:09:38,279 --> 04:09:43,500
is paid that's much shorter let me show
5208
04:09:43,500 --> 04:09:47,760
um Emerald color so now we don't see the
5209
04:09:47,760 --> 04:09:49,979
payment button for two of those but
5210
04:09:49,979 --> 04:09:51,660
because those orders are not actually
5211
04:09:51,660 --> 04:09:54,979
paid we can actually click and pay
5212
04:09:54,979 --> 04:09:59,000
that's also really useful
5213
04:09:59,000 --> 04:10:02,040
we can implement this however
5214
04:10:02,040 --> 04:10:02,939
um
5215
04:10:02,939 --> 04:10:05,460
let's first
5216
04:10:05,460 --> 04:10:09,439
implement the order inner page
5217
04:10:09,720 --> 04:10:13,520
now let's actually implement this
5218
04:10:15,060 --> 04:10:16,979
now let me think
5219
04:10:16,979 --> 04:10:19,260
so the order needs to have its own
5220
04:10:19,260 --> 04:10:21,540
session ID let's check
5221
04:10:21,540 --> 04:10:23,939
not the order but the payment
5222
04:10:23,939 --> 04:10:26,580
and order has a single payment
5223
04:10:26,580 --> 04:10:29,279
okay like in complex applications a
5224
04:10:29,279 --> 04:10:31,080
single order can have multiple payments
5225
04:10:31,080 --> 04:10:33,720
but in our application order has a one
5226
04:10:33,720 --> 04:10:36,000
payment only it could be even in this
5227
04:10:36,000 --> 04:10:38,399
like we could even combine orders and
5228
04:10:38,399 --> 04:10:40,500
payments in single table that would not
5229
04:10:40,500 --> 04:10:42,660
be a problem however let's check
5230
04:10:42,660 --> 04:10:45,779
payments so we have four payments
5231
04:10:45,779 --> 04:10:49,920
but we have five orders
5232
04:10:49,920 --> 04:10:52,439
like three and four let me actually
5233
04:10:52,439 --> 04:10:54,779
delete three and four because I think
5234
04:10:54,779 --> 04:10:56,760
they don't have
5235
04:10:56,760 --> 04:10:59,760
yes they don't have um payments so I'm
5236
04:10:59,760 --> 04:11:02,640
gonna delete this fourth we only leave
5237
04:11:02,640 --> 04:11:05,340
five six and seven all of them have
5238
04:11:05,340 --> 04:11:08,520
session ID so if we go in the payments I
5239
04:11:08,520 --> 04:11:11,520
delete all of them and not all of them
5240
04:11:11,520 --> 04:11:14,160
but uh third and
5241
04:11:14,160 --> 04:11:15,899
with the ID
5242
04:11:15,899 --> 04:11:19,199
come on and fourth
5243
04:11:19,199 --> 04:11:23,520
okay now we have three orders two of
5244
04:11:23,520 --> 04:11:25,220
them is paid one of them is unpaid
5245
04:11:25,220 --> 04:11:28,979
however whichever is unpaid we also have
5246
04:11:28,979 --> 04:11:31,080
information about
5247
04:11:31,080 --> 04:11:33,660
uh its session ID
5248
04:11:33,660 --> 04:11:35,399
okay
5249
04:11:35,399 --> 04:11:40,739
and we can get this session from
5250
04:11:40,739 --> 04:11:44,939
from stripe and redirect user to the
5251
04:11:44,939 --> 04:11:48,060
payment page let's do this so
5252
04:11:48,060 --> 04:11:50,520
I'm going to open now
5253
04:11:50,520 --> 04:11:54,060
again checkout controller
5254
04:11:54,060 --> 04:11:57,380
and let's create
5255
04:11:58,080 --> 04:12:01,199
one more function
5256
04:12:01,199 --> 04:12:03,060
by the way we don't do anything in the
5257
04:12:03,060 --> 04:12:04,920
fail right
5258
04:12:04,920 --> 04:12:07,680
so let's put this right here
5259
04:12:07,680 --> 04:12:11,600
however the message will be
5260
04:12:12,000 --> 04:12:14,040
um your payment wasn't successful or
5261
04:12:14,040 --> 04:12:15,479
something like this okay let's give it
5262
04:12:15,479 --> 04:12:17,279
an empty string because we also have a
5263
04:12:17,279 --> 04:12:20,040
message inside the failure view itself
5264
04:12:20,040 --> 04:12:23,720
all right let's create
5265
04:12:24,120 --> 04:12:24,899
um
5266
04:12:24,899 --> 04:12:26,760
function called
5267
04:12:26,760 --> 04:12:29,160
checkout with
5268
04:12:29,160 --> 04:12:31,739
session
5269
04:12:31,739 --> 04:12:33,180
ID
5270
04:12:33,180 --> 04:12:36,560
we get the request
5271
04:12:37,439 --> 04:12:41,239
and I'm going to get this session ID
5272
04:12:42,060 --> 04:12:44,040
uh we're gonna get the session ID from
5273
04:12:44,040 --> 04:12:46,979
the URL right
5274
04:12:46,979 --> 04:12:49,979
so let's open web of PHP and configure
5275
04:12:49,979 --> 04:12:51,979
wrote for this
5276
04:12:51,979 --> 04:12:55,160
uh check out
5277
04:12:55,160 --> 04:12:59,120
but with session ID
5278
04:13:01,979 --> 04:13:06,420
and check out with session ID
5279
04:13:06,420 --> 04:13:08,100
check out
5280
04:13:08,100 --> 04:13:09,660
with
5281
04:13:09,660 --> 04:13:12,000
session should be the view name so I'm
5282
04:13:12,000 --> 04:13:13,620
going to get this
5283
04:13:13,620 --> 04:13:17,540
now let's go in the order
5284
04:13:17,540 --> 04:13:21,540
and we have this
5285
04:13:21,540 --> 04:13:23,340
payment button
5286
04:13:23,340 --> 04:13:25,439
however I'm going to turn this into
5287
04:13:25,439 --> 04:13:27,899
button
5288
04:13:27,899 --> 04:13:31,500
and I'm going to create form right here
5289
04:13:31,500 --> 04:13:33,739
with action
5290
04:13:33,739 --> 04:13:35,279
root
5291
04:13:35,279 --> 04:13:38,399
check out with session and provide right
5292
04:13:38,399 --> 04:13:39,840
here
5293
04:13:39,840 --> 04:13:43,800
session ID however I need to get the
5294
04:13:43,800 --> 04:13:45,300
session ID and I'm going to get this
5295
04:13:45,300 --> 04:13:50,120
from the order so let's open order
5296
04:13:50,220 --> 04:13:52,739
excuse me and I'm going to create right
5297
04:13:52,739 --> 04:13:55,920
here public function payment
5298
04:13:55,920 --> 04:14:00,840
now which is one
5299
04:14:00,840 --> 04:14:03,600
so order has one payment okay in in
5300
04:14:03,600 --> 04:14:05,580
theory it can have multiple but in our
5301
04:14:05,580 --> 04:14:08,040
case it has only one payment and we're
5302
04:14:08,040 --> 04:14:11,880
gonna return these his one
5303
04:14:11,880 --> 04:14:13,800
payment
5304
04:14:13,800 --> 04:14:15,840
Plus
5305
04:14:15,840 --> 04:14:18,500
okay
5306
04:14:19,199 --> 04:14:22,680
and right here I'm going to get order
5307
04:14:22,680 --> 04:14:24,600
payment
5308
04:14:24,600 --> 04:14:26,460
session ID
5309
04:14:26,460 --> 04:14:28,880
I passed the session ID
5310
04:14:28,880 --> 04:14:33,840
let's change the method into post
5311
04:14:33,840 --> 04:14:38,239
and let's give it csrf as well
5312
04:14:38,880 --> 04:14:41,760
and let's close
5313
04:14:41,760 --> 04:14:43,979
let's close the four then format the
5314
04:14:43,979 --> 04:14:47,220
code okay now we have this form if the
5315
04:14:47,220 --> 04:14:48,660
order is not paid
5316
04:14:48,660 --> 04:14:51,319
now let's go in the checkout controller
5317
04:14:51,319 --> 04:14:55,560
and we are going to get session ID right
5318
04:14:55,560 --> 04:14:56,520
here
5319
04:14:56,520 --> 04:14:58,380
session ID
5320
04:14:58,380 --> 04:15:00,479
that's coming from
5321
04:15:00,479 --> 04:15:04,560
web PHP from here we should get this
5322
04:15:04,560 --> 04:15:07,560
okay so now we have a session ID
5323
04:15:07,560 --> 04:15:09,840
and I'm going to get this session
5324
04:15:09,840 --> 04:15:13,020
and here is the method to get the
5325
04:15:13,020 --> 04:15:13,859
session
5326
04:15:13,859 --> 04:15:16,500
and we have to take this as well so I
5327
04:15:16,500 --> 04:15:19,199
copied both right now and I'm going to
5328
04:15:19,199 --> 04:15:21,960
paste first this and second using
5329
04:15:21,960 --> 04:15:25,800
multiple cursor I'm going to pass the
5330
04:15:25,800 --> 04:15:28,819
session ID right here
5331
04:15:29,040 --> 04:15:32,760
the session might even be expired
5332
04:15:32,760 --> 04:15:34,560
and in this case you have to generate
5333
04:15:34,560 --> 04:15:37,319
new session okay I'm thinking maybe
5334
04:15:37,319 --> 04:15:40,680
it's good idea to always generate new
5335
04:15:40,680 --> 04:15:42,239
session
5336
04:15:42,239 --> 04:15:45,120
um when you click
5337
04:15:45,120 --> 04:15:47,699
when you click pay
5338
04:15:47,699 --> 04:15:50,580
I think it's gonna be
5339
04:15:50,580 --> 04:15:53,160
it's going to be good in this case check
5340
04:15:53,160 --> 04:15:54,960
out with session I'm going to rename
5341
04:15:54,960 --> 04:15:56,840
this and call this checkout
5342
04:15:56,840 --> 04:15:59,399
checkout order
5343
04:15:59,399 --> 04:16:02,220
and in this case I will get
5344
04:16:02,220 --> 04:16:05,660
I will get the whole order
5345
04:16:06,359 --> 04:16:12,319
okay no need let me actually delete this
5346
04:16:12,600 --> 04:16:17,460
and let's change this specify order
5347
04:16:17,460 --> 04:16:22,080
checkout order was renamed and check out
5348
04:16:22,080 --> 04:16:25,859
order right here let's open
5349
04:16:25,859 --> 04:16:27,540
this part
5350
04:16:27,540 --> 04:16:30,359
and that should be changed into order
5351
04:16:30,359 --> 04:16:32,819
and I'm going to pass right here
5352
04:16:32,819 --> 04:16:35,520
order as well
5353
04:16:35,520 --> 04:16:37,500
okay
5354
04:16:37,500 --> 04:16:39,300
now
5355
04:16:39,300 --> 04:16:41,460
whenever it comes here I'm going to die
5356
04:16:41,460 --> 04:16:42,500
in damp
5357
04:16:42,500 --> 04:16:45,859
entire order
5358
04:16:46,920 --> 04:16:49,979
let's save this reload the page and
5359
04:16:49,979 --> 04:16:51,920
click pay
5360
04:16:51,920 --> 04:16:55,500
here here is the place where order comes
5361
04:16:55,500 --> 04:16:59,359
but what is this
5362
04:16:59,699 --> 04:17:03,739
okay what is this
5363
04:17:05,699 --> 04:17:09,600
let's go in the orders
5364
04:17:09,600 --> 04:17:11,939
and click on pay
5365
04:17:11,939 --> 04:17:16,319
and we see these which is fine
5366
04:17:16,319 --> 04:17:19,859
now let's go right here and find the
5367
04:17:19,859 --> 04:17:22,620
basically we have to copy uh the code
5368
04:17:22,620 --> 04:17:25,680
from checkout but maybe not just direct
5369
04:17:25,680 --> 04:17:28,800
the copy and paste but we have to do
5370
04:17:28,800 --> 04:17:30,180
something similar what we are doing in
5371
04:17:30,180 --> 04:17:32,520
the checkout so first we need to have
5372
04:17:32,520 --> 04:17:35,580
the user information and the we have to
5373
04:17:35,580 --> 04:17:37,319
set the API key
5374
04:17:37,319 --> 04:17:41,040
for stripe so we do this next we have to
5375
04:17:41,040 --> 04:17:43,979
take the order items by the way we don't
5376
04:17:43,979 --> 04:17:45,859
create order items
5377
04:17:45,859 --> 04:17:48,899
yes we don't do that
5378
04:17:48,899 --> 04:17:51,180
so we have to make records in the order
5379
04:17:51,180 --> 04:17:54,960
items as well so let's go in the
5380
04:17:54,960 --> 04:17:57,600
checkout page where we create uh orders
5381
04:17:57,600 --> 04:18:01,080
and payments and all of that
5382
04:18:01,080 --> 04:18:04,199
and let's create order items
5383
04:18:04,199 --> 04:18:06,300
so order items needs to be created for
5384
04:18:06,300 --> 04:18:09,420
sure after order is created because we
5385
04:18:09,420 --> 04:18:11,359
will need the order ID
5386
04:18:11,359 --> 04:18:13,439
and we have to create as many other
5387
04:18:13,439 --> 04:18:17,100
items as many products uh we have in the
5388
04:18:17,100 --> 04:18:18,000
cart
5389
04:18:18,000 --> 04:18:20,399
uh we can directly create right here
5390
04:18:20,399 --> 04:18:23,100
because we will need the order ID as
5391
04:18:23,100 --> 04:18:25,380
well so I'm going to create
5392
04:18:25,380 --> 04:18:29,520
uh by the way we have line items
5393
04:18:29,520 --> 04:18:31,920
but that's not that's not what we want
5394
04:18:31,920 --> 04:18:37,199
so let's create order items array
5395
04:18:37,199 --> 04:18:39,239
and we're going to push
5396
04:18:39,239 --> 04:18:41,880
inside order items
5397
04:18:41,880 --> 04:18:45,439
we will push the following information
5398
04:18:45,899 --> 04:18:49,080
uh we will push the product ID
5399
04:18:49,080 --> 04:18:50,520
product
5400
04:18:50,520 --> 04:18:53,180
ID
5401
04:18:55,380 --> 04:18:59,540
we're going to pass quantity
5402
04:19:01,380 --> 04:19:05,000
and unit price
5403
04:19:07,979 --> 04:19:11,220
product price
5404
04:19:11,220 --> 04:19:14,699
okay now let's take the order items and
5405
04:19:14,699 --> 04:19:17,880
after the order is created let's leave
5406
04:19:17,880 --> 04:19:19,439
comments also
5407
04:19:19,439 --> 04:19:22,260
uh create order
5408
04:19:22,260 --> 04:19:24,300
items
5409
04:19:24,300 --> 04:19:28,680
we have to iterate over our order items
5410
04:19:28,680 --> 04:19:31,439
and I'm going to call order
5411
04:19:31,439 --> 04:19:35,220
item create
5412
04:19:36,180 --> 04:19:38,880
and I'm going to give each order item
5413
04:19:38,880 --> 04:19:42,420
needs to have order ID as well
5414
04:19:42,420 --> 04:19:45,420
it's going to be just created order ID
5415
04:19:45,420 --> 04:19:48,420
and then we pass
5416
04:19:48,420 --> 04:19:51,620
order item
5417
04:19:51,620 --> 04:19:54,600
to the order item create
5418
04:19:54,600 --> 04:19:58,199
okay let's leave comment create
5419
04:19:58,199 --> 04:20:01,199
order
5420
04:20:02,239 --> 04:20:03,960
and
5421
04:20:03,960 --> 04:20:07,620
create payment
5422
04:20:07,800 --> 04:20:10,859
okay now we have order items we should
5423
04:20:10,859 --> 04:20:14,160
test this once again
5424
04:20:14,160 --> 04:20:17,460
now but let's now select the order items
5425
04:20:17,460 --> 04:20:19,560
okay I think we don't have order items
5426
04:20:19,560 --> 04:20:20,760
so we're going to delete everything
5427
04:20:20,760 --> 04:20:23,399
every order what we have
5428
04:20:23,399 --> 04:20:26,160
or at least unpaid order
5429
04:20:26,160 --> 04:20:28,560
let's actually delete all because they
5430
04:20:28,560 --> 04:20:30,479
need to have order items
5431
04:20:30,479 --> 04:20:32,580
so let's click delete
5432
04:20:32,580 --> 04:20:37,220
yes no first we need to delete payments
5433
04:20:41,460 --> 04:20:44,600
then orders
5434
04:20:47,580 --> 04:20:53,340
okay now let's go on the card page
5435
04:20:53,340 --> 04:20:55,319
we have only one let's increase the
5436
04:20:55,319 --> 04:20:57,720
quantity and let's add
5437
04:20:57,720 --> 04:21:00,180
second product
5438
04:21:00,180 --> 04:21:02,279
keyboard
5439
04:21:02,279 --> 04:21:04,859
now we have totally three items we're
5440
04:21:04,859 --> 04:21:08,000
going to proceed to checkout
5441
04:21:09,840 --> 04:21:13,920
okay we have to open order item and add
5442
04:21:13,920 --> 04:21:15,239
right here
5443
04:21:15,239 --> 04:21:17,580
billable
5444
04:21:17,580 --> 04:21:20,520
we need order ID
5445
04:21:20,520 --> 04:21:23,760
we need you need price
5446
04:21:23,760 --> 04:21:26,600
we need
5447
04:21:27,000 --> 04:21:28,979
order items
5448
04:21:28,979 --> 04:21:33,840
product ID and quantity product ID and
5449
04:21:33,840 --> 04:21:35,760
quantity
5450
04:21:35,760 --> 04:21:37,859
so we save this let's create by the way
5451
04:21:37,859 --> 04:21:40,319
here Order
5452
04:21:40,319 --> 04:21:42,779
return this
5453
04:21:42,779 --> 04:21:44,520
is one
5454
04:21:44,520 --> 04:21:47,000
order
5455
04:21:47,699 --> 04:21:50,040
Plus
5456
04:21:50,040 --> 04:21:52,739
not sure if this this will work without
5457
04:21:52,739 --> 04:21:55,920
specifying right here for in key and
5458
04:21:55,920 --> 04:21:59,840
anyway let's leave this
5459
04:22:00,120 --> 04:22:03,439
let's reload the page
5460
04:22:03,779 --> 04:22:06,779
I think it will create no second order
5461
04:22:06,779 --> 04:22:09,000
because it should have created order
5462
04:22:09,000 --> 04:22:13,140
previously as well this one has id8
5463
04:22:13,140 --> 04:22:15,660
let's check order items so we have now
5464
04:22:15,660 --> 04:22:18,660
two items with order right nine so I
5465
04:22:18,660 --> 04:22:21,000
think we can go in the payments
5466
04:22:21,000 --> 04:22:23,460
uh not payments but in the orders and
5467
04:22:23,460 --> 04:22:26,899
delete the eighth one
5468
04:22:27,600 --> 04:22:30,359
by the way I think everything right here
5469
04:22:30,359 --> 04:22:33,720
in this checkout controller whenever we
5470
04:22:33,720 --> 04:22:34,800
create
5471
04:22:34,800 --> 04:22:38,819
order and Order items and payments
5472
04:22:38,819 --> 04:22:40,680
should go in a single transaction
5473
04:22:40,680 --> 04:22:43,680
because if one of them fails all of them
5474
04:22:43,680 --> 04:22:45,899
should be protect
5475
04:22:45,899 --> 04:22:50,060
okay so now let's specify
5476
04:22:53,340 --> 04:22:56,220
okay your order has been completed and
5477
04:22:56,220 --> 04:22:58,439
now we have all the items right here
5478
04:22:58,439 --> 04:23:02,460
let's go and add now two more items in
5479
04:23:02,460 --> 04:23:03,840
the cart
5480
04:23:03,840 --> 04:23:07,439
Mouse and PlayStation
5481
04:23:07,439 --> 04:23:10,680
and I'm going to go to the checkout page
5482
04:23:10,680 --> 04:23:13,800
but don't pay that
5483
04:23:13,800 --> 04:23:16,939
not a valid URL
5484
04:23:16,939 --> 04:23:20,160
trench really strange
5485
04:23:20,160 --> 04:23:22,979
okay I think this problem is coming from
5486
04:23:22,979 --> 04:23:26,340
the images as I found out because we are
5487
04:23:26,340 --> 04:23:29,640
giving right here images from a
5488
04:23:29,640 --> 04:23:31,439
localhost domain and that is not
5489
04:23:31,439 --> 04:23:34,020
accessible by stripe we get this error
5490
04:23:34,020 --> 04:23:36,000
it's strange why previously we didn't
5491
04:23:36,000 --> 04:23:38,939
get this error previously images simply
5492
04:23:38,939 --> 04:23:40,859
we are not displayed but now we have
5493
04:23:40,859 --> 04:23:44,160
this problem so let's open and comment
5494
04:23:44,160 --> 04:23:46,620
up this line we don't pass images at all
5495
04:23:46,620 --> 04:23:49,739
and simply reload the page and have a
5496
04:23:49,739 --> 04:23:51,500
look
5497
04:23:51,500 --> 04:23:55,380
I spent quite a lot of time on finding
5498
04:23:55,380 --> 04:23:57,239
out what the problem was and that was
5499
04:23:57,239 --> 04:23:59,220
actually the problem so now let's
5500
04:23:59,220 --> 04:24:00,479
proceed
5501
04:24:00,479 --> 04:24:03,380
and let's have a look now we should see
5502
04:24:03,380 --> 04:24:05,699
basically right now at this moment the
5503
04:24:05,699 --> 04:24:08,160
order must already be created I think we
5504
04:24:08,160 --> 04:24:10,800
want to create unpaid order so here one
5505
04:24:10,800 --> 04:24:13,140
order which is order nine and I guess
5506
04:24:13,140 --> 04:24:16,080
this is paid or the nine is paid order
5507
04:24:16,080 --> 04:24:17,880
10 is unpaid actually we don't need to
5508
04:24:17,880 --> 04:24:21,000
like populate anything so imagine the
5509
04:24:21,000 --> 04:24:22,739
case that the user opened the payment
5510
04:24:22,739 --> 04:24:25,140
page but simply close the tab didn't do
5511
04:24:25,140 --> 04:24:28,380
anything okay so we have to show that
5512
04:24:28,380 --> 04:24:31,859
order in the let's leave this
5513
04:24:31,859 --> 04:24:34,979
in the my orders and here we go here we
5514
04:24:34,979 --> 04:24:37,439
see that okay and we have view invoice
5515
04:24:37,439 --> 04:24:42,120
and pay whenever we click pay now this
5516
04:24:42,120 --> 04:24:44,100
should trigger the same type of payment
5517
04:24:44,100 --> 04:24:47,760
process let's now scroll down below so
5518
04:24:47,760 --> 04:24:49,859
it should come right here and the same
5519
04:24:49,859 --> 04:24:51,899
thing should start but now let's
5520
04:24:51,899 --> 04:24:56,220
actually copy and paste uh some code so
5521
04:24:56,220 --> 04:24:59,220
we have to basically we're doing this
5522
04:24:59,220 --> 04:25:02,699
uh let me actually copy this part
5523
04:25:02,699 --> 04:25:06,239
down below and now we have order we have
5524
04:25:06,239 --> 04:25:09,060
to take the order items so let me create
5525
04:25:09,060 --> 04:25:11,939
right here line items called an empty
5526
04:25:11,939 --> 04:25:15,680
array then we start iterating over order
5527
04:25:15,680 --> 04:25:18,720
items and the order doesn't have items
5528
04:25:18,720 --> 04:25:22,319
so let's define it right here public
5529
04:25:22,319 --> 04:25:25,380
function items this
5530
04:25:25,380 --> 04:25:27,479
has
5531
04:25:27,479 --> 04:25:29,399
is many
5532
04:25:29,399 --> 04:25:33,800
okay we return this is
5533
04:25:33,800 --> 04:25:36,840
many order item
5534
04:25:36,840 --> 04:25:39,859
specify class
5535
04:25:39,960 --> 04:25:42,899
and I think we don't have to specify
5536
04:25:42,899 --> 04:25:44,760
anything else let's have a look at least
5537
04:25:44,760 --> 04:25:47,279
so we have the order items is item
5538
04:25:47,279 --> 04:25:51,479
inside line items we push
5539
04:25:51,479 --> 04:25:55,620
the same type of array we have
5540
04:25:55,620 --> 04:26:00,120
okay here we go and we have the item
5541
04:26:00,120 --> 04:26:02,399
quantity
5542
04:26:02,399 --> 04:26:05,340
we have item
5543
04:26:05,340 --> 04:26:07,920
we don't have item title but the item
5544
04:26:07,920 --> 04:26:11,399
every item has access to product and we
5545
04:26:11,399 --> 04:26:13,140
can go to the product and take the
5546
04:26:13,140 --> 04:26:17,939
product title so let's open order item
5547
04:26:17,939 --> 04:26:20,939
and just like we have has one order we
5548
04:26:20,939 --> 04:26:25,020
need to duplicate this and return has
5549
04:26:25,020 --> 04:26:26,880
one
5550
04:26:26,880 --> 04:26:30,300
that should go to product
5551
04:26:30,300 --> 04:26:34,260
Okay order item has one product
5552
04:26:34,260 --> 04:26:38,399
uh let's put this has one here as well
5553
04:26:38,399 --> 04:26:42,479
and now from the item we go to product
5554
04:26:42,479 --> 04:26:46,080
and the product has title
5555
04:26:46,080 --> 04:26:49,560
also for the price we have this price in
5556
04:26:49,560 --> 04:26:50,580
the
5557
04:26:50,580 --> 04:26:53,359
as a unit price in the order items table
5558
04:26:53,359 --> 04:26:58,620
so we just take unit price okay now we
5559
04:26:58,620 --> 04:27:01,080
have live items array and we are passing
5560
04:27:01,080 --> 04:27:02,180
these
5561
04:27:02,180 --> 04:27:04,739
into the session create
5562
04:27:04,739 --> 04:27:08,220
okay let's move up uh so whenever we do
5563
04:27:08,220 --> 04:27:11,239
this then we take the session
5564
04:27:11,239 --> 04:27:13,979
URL and redirect user we don't need to
5565
04:27:13,979 --> 04:27:16,199
do anything else right here
5566
04:27:16,199 --> 04:27:19,380
so we simply redirect user we already
5567
04:27:19,380 --> 04:27:21,899
have order the order is obviously unpaid
5568
04:27:21,899 --> 04:27:25,080
so we simply a redirect user to the
5569
04:27:25,080 --> 04:27:27,659
session URL
5570
04:27:27,659 --> 04:27:30,779
okay now let's reload the page let's
5571
04:27:30,779 --> 04:27:33,779
click on pay and let's have a look so
5572
04:27:33,779 --> 04:27:36,659
unknown column products order item id
5573
04:27:36,659 --> 04:27:39,359
this is really strange I need to find
5574
04:27:39,359 --> 04:27:41,699
this out so laravel
5575
04:27:41,699 --> 04:27:43,140
has
5576
04:27:43,140 --> 04:27:46,220
has many
5577
04:27:46,319 --> 04:27:50,760
okay let's quickly find out as many
5578
04:27:50,760 --> 04:27:54,899
okay post has many comments
5579
04:27:54,899 --> 04:27:57,180
and this assumes that the comment has
5580
04:27:57,180 --> 04:27:59,779
post ID
5581
04:28:02,520 --> 04:28:06,000
okay now how do we do this so if we go
5582
04:28:06,000 --> 04:28:08,100
in the order
5583
04:28:08,100 --> 04:28:10,620
we see that the order
5584
04:28:10,620 --> 04:28:12,739
has many
5585
04:28:12,739 --> 04:28:14,699
items
5586
04:28:14,699 --> 04:28:19,380
and the order item as many as order ID
5587
04:28:19,380 --> 04:28:21,840
okay now let's open
5588
04:28:21,840 --> 04:28:24,779
order item and talk about the product
5589
04:28:24,779 --> 04:28:25,920
has one
5590
04:28:25,920 --> 04:28:30,300
so it's clear for his many and I guess
5591
04:28:30,300 --> 04:28:32,220
um for the
5592
04:28:32,220 --> 04:28:34,319
let's go in the checkout for the
5593
04:28:34,319 --> 04:28:36,300
iterating over the order items that
5594
04:28:36,300 --> 04:28:38,460
should work okay we should be able to
5595
04:28:38,460 --> 04:28:40,020
get the items
5596
04:28:40,020 --> 04:28:44,040
let's now search for his one
5597
04:28:44,040 --> 04:28:46,859
okay as many comments know we need has
5598
04:28:46,859 --> 04:28:49,159
one
5599
04:28:49,620 --> 04:28:52,500
let's see here's one example
5600
04:28:52,500 --> 04:28:54,300
a latest order
5601
04:28:54,300 --> 04:28:57,180
that's probably coming from the
5602
04:28:57,180 --> 04:28:59,699
product okay let's just order and test
5603
04:28:59,699 --> 04:29:02,000
order
5604
04:29:03,180 --> 04:29:06,560
let's see in other examples
5605
04:29:11,180 --> 04:29:14,220
okay the throw is basically using a
5606
04:29:14,220 --> 04:29:16,140
junction table mean to many
5607
04:29:16,140 --> 04:29:17,880
relationships
5608
04:29:17,880 --> 04:29:22,080
uh we need this one like user user has
5609
04:29:22,080 --> 04:29:24,479
one phone
5610
04:29:24,479 --> 04:29:26,220
okay the first argument passes to his
5611
04:29:26,220 --> 04:29:31,920
one okay that's clear we get the phone
5612
04:29:31,920 --> 04:29:34,560
and it is assumed that the phone models
5613
04:29:34,560 --> 04:29:36,180
automatically assume that have a user ID
5614
04:29:36,180 --> 04:29:39,120
okay so it's it means that the phone
5615
04:29:39,120 --> 04:29:41,580
should have user ID
5616
04:29:41,580 --> 04:29:44,399
okay not
5617
04:29:44,399 --> 04:29:46,080
not
5618
04:29:46,080 --> 04:29:48,659
understood now okay not the user should
5619
04:29:48,659 --> 04:29:51,439
have phone ID
5620
04:29:51,859 --> 04:29:56,040
but if we want from phone to access to
5621
04:29:56,040 --> 04:29:58,520
the user
5622
04:30:05,000 --> 04:30:09,239
belongs to user
5623
04:30:10,260 --> 04:30:12,060
now inside the phone we would put
5624
04:30:12,060 --> 04:30:13,380
belongs to
5625
04:30:13,380 --> 04:30:16,260
okay this is something I was missing if
5626
04:30:16,260 --> 04:30:18,960
we open now order item
5627
04:30:18,960 --> 04:30:20,939
right here
5628
04:30:20,939 --> 04:30:23,460
for the order I'm going to put that
5629
04:30:23,460 --> 04:30:25,220
the order
5630
04:30:25,220 --> 04:30:29,100
belongs to the order item belongs to
5631
04:30:29,100 --> 04:30:32,819
order and we can leave these because I
5632
04:30:32,819 --> 04:30:35,040
think it will assume that the order item
5633
04:30:35,040 --> 04:30:36,540
should have
5634
04:30:36,540 --> 04:30:39,420
um order ID and we will do the same
5635
04:30:39,420 --> 04:30:41,580
thing it's not going to return has one
5636
04:30:41,580 --> 04:30:42,840
in this case
5637
04:30:42,840 --> 04:30:46,760
and let's put this right here
5638
04:30:47,819 --> 04:30:50,760
all right
5639
04:30:50,760 --> 04:30:52,859
so I think we can add
5640
04:30:52,859 --> 04:30:54,720
belongs to
5641
04:30:54,720 --> 04:30:57,180
to be returned from here
5642
04:30:57,180 --> 04:30:59,880
belongs to all right now we should be
5643
04:30:59,880 --> 04:31:02,880
able to get the product and now let's
5644
04:31:02,880 --> 04:31:06,560
have a look so we reload
5645
04:31:06,560 --> 04:31:09,300
and we don't have any errors it looks
5646
04:31:09,300 --> 04:31:10,979
like and it's going to redirect us to
5647
04:31:10,979 --> 04:31:12,600
stripe
5648
04:31:12,600 --> 04:31:15,120
okay attempt to read property title on
5649
04:31:15,120 --> 04:31:18,720
now okay it wasn't able to basically get
5650
04:31:18,720 --> 04:31:20,640
the product because right here we need
5651
04:31:20,640 --> 04:31:21,540
product
5652
04:31:21,540 --> 04:31:26,540
sorry so we reload the page
5653
04:31:27,779 --> 04:31:30,300
and here we go so we are on the stripe
5654
04:31:30,300 --> 04:31:31,680
page now let's
5655
04:31:31,680 --> 04:31:34,680
um if we proceed and
5656
04:31:34,680 --> 04:31:38,460
if we proceed and pay then we have to
5657
04:31:38,460 --> 04:31:40,319
handle the payment successfully now we
5658
04:31:40,319 --> 04:31:43,080
have the checkout success but the
5659
04:31:43,080 --> 04:31:46,800
checkout successes uh URL which is for
5660
04:31:46,800 --> 04:31:50,760
checkout for from cart but now we are
5661
04:31:50,760 --> 04:31:52,920
actually making payment of an existing
5662
04:31:52,920 --> 04:31:55,020
order
5663
04:31:55,020 --> 04:31:58,859
so does it actually make sense so if we
5664
04:31:58,859 --> 04:32:01,140
go in the checkout success
5665
04:32:01,140 --> 04:32:04,140
in any case
5666
04:32:04,140 --> 04:32:06,600
we will get the session ID okay this is
5667
04:32:06,600 --> 04:32:08,880
what we have to change so right here
5668
04:32:08,880 --> 04:32:11,100
when we generate the new session we
5669
04:32:11,100 --> 04:32:13,260
should take the session ID and update
5670
04:32:13,260 --> 04:32:15,659
the payment
5671
04:32:15,659 --> 04:32:18,120
okay we have order right here if we go
5672
04:32:18,120 --> 04:32:19,580
in the order
5673
04:32:19,580 --> 04:32:24,020
the order has payment
5674
04:32:25,620 --> 04:32:29,300
and now right here I'm going to get
5675
04:32:29,300 --> 04:32:35,000
order let's zoom in order payment
5676
04:32:35,000 --> 04:32:37,979
will have a session ID
5677
04:32:37,979 --> 04:32:42,600
and this session ID equals to session ID
5678
04:32:42,600 --> 04:32:45,899
so we update the session ID and let's
5679
04:32:45,899 --> 04:32:47,520
call order
5680
04:32:47,520 --> 04:32:50,100
payment
5681
04:32:50,100 --> 04:32:52,979
save that's going to update the session
5682
04:32:52,979 --> 04:32:57,000
ID and let's go back
5683
04:32:57,000 --> 04:33:00,300
and let's have a look in the orders of
5684
04:33:00,300 --> 04:33:04,919
the orders but in the in the payments
5685
04:33:04,919 --> 04:33:08,278
okay the second one has this this is
5686
04:33:08,278 --> 04:33:10,799
actually it's um session ID let me copy
5687
04:33:10,799 --> 04:33:13,020
part of it and then when I click pay
5688
04:33:13,020 --> 04:33:15,180
it's going to generate new session and
5689
04:33:15,180 --> 04:33:17,759
it should update right here so if I just
5690
04:33:17,759 --> 04:33:20,340
reload the page right now that should be
5691
04:33:20,340 --> 04:33:23,879
different yeah now my search uh copied
5692
04:33:23,879 --> 04:33:27,719
uh session ID is not basically found on
5693
04:33:27,719 --> 04:33:29,879
the page so the session ID was updated
5694
04:33:29,879 --> 04:33:32,660
and now whenever the redirect happens
5695
04:33:32,660 --> 04:33:36,719
the we can use the same uh same success
5696
04:33:36,719 --> 04:33:40,379
URL okay in this case in the success URL
5697
04:33:40,379 --> 04:33:43,799
the code will select the payment
5698
04:33:43,799 --> 04:33:46,500
now first it will valid validate then it
5699
04:33:46,500 --> 04:33:49,740
will select the payment and then goes
5700
04:33:49,740 --> 04:33:53,400
through the same process and update the
5701
04:33:53,400 --> 04:33:55,320
payment and the order
5702
04:33:55,320 --> 04:33:58,618
which is excellent so now if I proceed
5703
04:33:58,618 --> 04:34:01,020
and if I
5704
04:34:01,020 --> 04:34:04,459
fill up the information
5705
04:34:07,980 --> 04:34:09,900
oops
5706
04:34:09,900 --> 04:34:12,660
and click on pay
5707
04:34:12,660 --> 04:34:16,740
that should change the order into paid
5708
04:34:16,740 --> 04:34:20,039
let's let's have a look okay where your
5709
04:34:20,039 --> 04:34:21,778
order has been completed now if we go
5710
04:34:21,778 --> 04:34:24,778
into my orders both of them are paid
5711
04:34:24,778 --> 04:34:28,500
okay but one very important thing uh
5712
04:34:28,500 --> 04:34:30,539
when building a production ready online
5713
04:34:30,539 --> 04:34:33,539
payments system
5714
04:34:33,539 --> 04:34:37,459
uh and I have to reproduce this
5715
04:34:38,039 --> 04:34:40,438
okay now let's add one more item in the
5716
04:34:40,438 --> 04:34:44,160
cart go in the cart proceed to checkout
5717
04:34:44,160 --> 04:34:47,039
the order was created at this moment
5718
04:34:47,039 --> 04:34:50,779
uh let me paste this
5719
04:34:52,438 --> 04:34:54,080
and now
5720
04:34:54,080 --> 04:34:59,219
be like be careful so I click on hey
5721
04:34:59,219 --> 04:35:02,520
okay and as as soon as I get the green
5722
04:35:02,520 --> 04:35:04,259
button green the payment is done I'm
5723
04:35:04,259 --> 04:35:06,958
going to close the tab okay
5724
04:35:06,958 --> 04:35:09,359
now what happened is that the payment
5725
04:35:09,359 --> 04:35:11,340
was completed
5726
04:35:11,340 --> 04:35:15,359
but the redirect didn't work
5727
04:35:15,359 --> 04:35:20,340
okay and if we reload now payments page
5728
04:35:20,340 --> 04:35:23,400
we see that the um the order is actually
5729
04:35:23,400 --> 04:35:27,000
uh made and the payment is pending and
5730
04:35:27,000 --> 04:35:30,719
if we open now stripe dashboard
5731
04:35:30,719 --> 04:35:33,061
let's go under payments
5732
04:35:33,061 --> 04:35:35,340
and the very latest payment is this one
5733
04:35:35,340 --> 04:35:38,340
okay now you see we have the latest two
5734
04:35:38,340 --> 04:35:42,180
payments uh three seven eight six which
5735
04:35:42,180 --> 04:35:44,458
is the previous one in the latest one
5736
04:35:44,458 --> 04:35:47,160
which is succeeded 399 okay this one is
5737
04:35:47,160 --> 04:35:50,539
succeeded user actually paid but
5738
04:35:50,539 --> 04:35:54,118
mistakenly maybe close the tab or the
5739
04:35:54,118 --> 04:35:57,359
electricity was off and that happened
5740
04:35:57,359 --> 04:36:00,599
and the order if the user now this is
5741
04:36:00,599 --> 04:36:02,099
the this is not something else okay
5742
04:36:02,099 --> 04:36:06,480
let's open the our closed
5743
04:36:06,480 --> 04:36:09,061
Tab and now if the user goes in in my
5744
04:36:09,061 --> 04:36:12,180
orders we see that the order is actually
5745
04:36:12,180 --> 04:36:14,641
unpaid by the way the item is in the
5746
04:36:14,641 --> 04:36:17,299
cart which is something
5747
04:36:17,299 --> 04:36:20,938
we should change so let me actually
5748
04:36:20,938 --> 04:36:23,039
the items from the cart is deleted on
5749
04:36:23,039 --> 04:36:24,840
success but that's not
5750
04:36:24,840 --> 04:36:26,879
that's not correct so let's take the
5751
04:36:26,879 --> 04:36:29,938
cart item and that should be deleted as
5752
04:36:29,938 --> 04:36:32,160
soon as the order is created order item
5753
04:36:32,160 --> 04:36:35,160
is created and the payment is created we
5754
04:36:35,160 --> 04:36:37,919
delete the items from the cart okay this
5755
04:36:37,919 --> 04:36:41,958
is small Improvement but in any case
5756
04:36:41,958 --> 04:36:45,419
the order is unpaid even though the like
5757
04:36:45,419 --> 04:36:48,061
almost 400 was taken from the user's
5758
04:36:48,061 --> 04:36:49,438
account
5759
04:36:49,438 --> 04:36:53,879
so for this uh stripe has web Hooks and
5760
04:36:53,879 --> 04:36:57,180
the web hooks uh will be triggered from
5761
04:36:57,180 --> 04:36:59,759
time to time if the
5762
04:36:59,759 --> 04:37:01,980
a success URL didn't work
5763
04:37:01,980 --> 04:37:04,379
stripe will send web Hooks and you have
5764
04:37:04,379 --> 04:37:06,778
to provide those web hooks let's go in
5765
04:37:06,778 --> 04:37:09,061
the payments again in the stripe
5766
04:37:09,061 --> 04:37:12,180
dashboard and I'm going to go in the
5767
04:37:12,180 --> 04:37:16,141
let's actually look for uh web hooks
5768
04:37:16,141 --> 04:37:18,539
cane developer webhooks
5769
04:37:18,539 --> 04:37:21,660
and okay I actually I was testing and I
5770
04:37:21,660 --> 04:37:24,061
generated a few web hooks but on the
5771
04:37:24,061 --> 04:37:26,219
webhook section like we have the API
5772
04:37:26,219 --> 04:37:27,900
keys right here and then we have web
5773
04:37:27,900 --> 04:37:30,299
hooks by the way I have this webhook key
5774
04:37:30,299 --> 04:37:31,799
which I'm going to delete so you won't
5775
04:37:31,799 --> 04:37:34,740
have this so I'm going to delete that
5776
04:37:34,740 --> 04:37:36,599
let's confirm the password because I'm
5777
04:37:36,599 --> 04:37:38,520
going to generate new one so that you
5778
04:37:38,520 --> 04:37:40,438
can follow
5779
04:37:40,438 --> 04:37:42,599
okay now if you go in the webhook
5780
04:37:42,599 --> 04:37:45,840
section we have to add an endpoint
5781
04:37:45,840 --> 04:37:48,539
while we are doing this on a local
5782
04:37:48,539 --> 04:37:52,199
environment on localhost we can test in
5783
04:37:52,199 --> 04:37:54,539
local environment and we have to use the
5784
04:37:54,539 --> 04:37:58,859
stripe CLI for that okay but as soon as
5785
04:37:58,859 --> 04:38:02,641
we deploy this project on staging or on
5786
04:38:02,641 --> 04:38:04,919
a production environment we have to
5787
04:38:04,919 --> 04:38:07,618
provide right here endpoint URLs which
5788
04:38:07,618 --> 04:38:09,359
will be for web hooks
5789
04:38:09,359 --> 04:38:12,840
and we can also configure uh the events
5790
04:38:12,840 --> 04:38:15,419
on which the web hook should be
5791
04:38:15,419 --> 04:38:17,340
triggered for us
5792
04:38:17,340 --> 04:38:19,740
so let's click an endpoint and test in
5793
04:38:19,740 --> 04:38:21,240
local environment because right now we
5794
04:38:21,240 --> 04:38:23,099
are doing everything locally so we have
5795
04:38:23,099 --> 04:38:25,259
to download the CLI I'm going to click
5796
04:38:25,259 --> 04:38:28,618
the download CLI that will redirect us
5797
04:38:28,618 --> 04:38:31,680
to the get started with stripe CLI and
5798
04:38:31,680 --> 04:38:33,958
we have a few options right here okay so
5799
04:38:33,958 --> 04:38:36,618
on Windows for example we can go to the
5800
04:38:36,618 --> 04:38:40,561
GitHub following link on Linux uh we
5801
04:38:40,561 --> 04:38:42,061
need to go to the following link and
5802
04:38:42,061 --> 04:38:44,580
download the Target easy let's go on
5803
04:38:44,580 --> 04:38:46,561
Windows I'm going to open this in a new
5804
04:38:46,561 --> 04:38:49,320
tab and right here we have the release
5805
04:38:49,320 --> 04:38:52,438
and we have the zip file we have to
5806
04:38:52,438 --> 04:38:54,180
download the zip file I'm going to click
5807
04:38:54,180 --> 04:38:56,278
on the zip file
5808
04:38:56,278 --> 04:38:58,199
and it's going to trigger the download I
5809
04:38:58,199 --> 04:39:00,359
actually already have it downloaded so
5810
04:39:00,359 --> 04:39:02,340
now let's open this
5811
04:39:02,340 --> 04:39:05,458
I opened it and extracted the zip file
5812
04:39:05,458 --> 04:39:08,099
and inside there we have the only file
5813
04:39:08,099 --> 04:39:11,759
is stripe XM and that is the file that
5814
04:39:11,759 --> 04:39:14,340
is described CLI okay now let's go in
5815
04:39:14,340 --> 04:39:17,039
the browser again
5816
04:39:17,039 --> 04:39:19,799
and we don't need this we downloaded
5817
04:39:19,799 --> 04:39:22,859
okay now we need to log in into the CLI
5818
04:39:22,859 --> 04:39:24,719
and that is also written right here okay
5819
04:39:24,719 --> 04:39:26,879
so we have to do logging I'm going to
5820
04:39:26,879 --> 04:39:28,859
click on copy to clip actually I don't
5821
04:39:28,859 --> 04:39:30,599
need to click on copy to clipboard this
5822
04:39:30,599 --> 04:39:34,020
very small to type and even just stripe
5823
04:39:34,020 --> 04:39:36,359
login will not work in my case I'm going
5824
04:39:36,359 --> 04:39:39,600
to now bring up this CMD okay CMD or git
5825
04:39:39,600 --> 04:39:42,840
bash if you are going to use CMD
5826
04:39:42,840 --> 04:39:47,820
first you have to navigate to the folder
5827
04:39:47,820 --> 04:39:50,640
where this type X is located okay I'm
5828
04:39:50,640 --> 04:39:53,878
gonna paste this and navigate and right
5829
04:39:53,878 --> 04:39:57,480
now I can already use the stripe Excel
5830
04:39:57,480 --> 04:40:01,378
file so uh let me actually write stripe
5831
04:40:01,378 --> 04:40:05,280
XA login and hit the enter
5832
04:40:05,280 --> 04:40:08,820
okay this one will ask me please enter
5833
04:40:08,820 --> 04:40:12,718
to open the browser or visit the
5834
04:40:12,718 --> 04:40:15,660
following URL okay I'm going to Simply
5835
04:40:15,660 --> 04:40:19,080
click enter right here
5836
04:40:19,080 --> 04:40:21,600
which will start the authorization
5837
04:40:21,600 --> 04:40:23,878
process for the stripe CLI
5838
04:40:23,878 --> 04:40:27,120
and this will ask me to allow access to
5839
04:40:27,120 --> 04:40:29,760
my account information and look at this
5840
04:40:29,760 --> 04:40:33,660
so right here your peering code is exalt
5841
04:40:33,660 --> 04:40:36,660
amuse poised up with something and it
5842
04:40:36,660 --> 04:40:38,280
asks me if that's the information you
5843
04:40:38,280 --> 04:40:40,560
see on screen yes I allow the access
5844
04:40:40,560 --> 04:40:43,260
access is granted now I can close the
5845
04:40:43,260 --> 04:40:46,200
window and return to the CLI I already
5846
04:40:46,200 --> 04:40:49,020
have access to CLI so let me clear up
5847
04:40:49,020 --> 04:40:51,900
everything and now following the
5848
04:40:51,900 --> 04:40:54,540
documentation we need to forward the
5849
04:40:54,540 --> 04:40:58,200
events to my web hook so basically the
5850
04:40:58,200 --> 04:41:01,320
web hooks are triggered by stripe and
5851
04:41:01,320 --> 04:41:03,600
whenever we start listening to the web
5852
04:41:03,600 --> 04:41:06,140
Hooks and forward it to local
5853
04:41:06,140 --> 04:41:10,080
stripe will send it to my local server
5854
04:41:10,080 --> 04:41:12,240
and my local server at the moment is
5855
04:41:12,240 --> 04:41:16,378
running on Port 8000. so
5856
04:41:16,378 --> 04:41:18,240
this is an example I'm going to copy
5857
04:41:18,240 --> 04:41:21,080
these and now paste this right here
5858
04:41:21,080 --> 04:41:24,718
however the executable is called stripe
5859
04:41:24,718 --> 04:41:28,100
exam listen forward to localhost Port
5860
04:41:28,100 --> 04:41:31,980
8000 okay and I'm going to specify the
5861
04:41:31,980 --> 04:41:34,138
path to the web hook and we don't have
5862
04:41:34,138 --> 04:41:38,100
path yet let me actually move this uh in
5863
04:41:38,100 --> 04:41:40,500
the corner just like this and now let's
5864
04:41:40,500 --> 04:41:43,440
open a page to worm and create path for
5865
04:41:43,440 --> 04:41:45,780
that I'm going to open
5866
04:41:45,780 --> 04:41:47,060
um
5867
04:41:47,060 --> 04:41:50,100
webphp and Define the roads for the web
5868
04:41:50,100 --> 04:41:54,780
hook we have redirect callbacks and
5869
04:41:54,780 --> 04:41:56,940
let's actually create
5870
04:41:56,940 --> 04:42:00,000
let's create now two routes but that's
5871
04:42:00,000 --> 04:42:01,680
going to be post rules
5872
04:42:01,680 --> 04:42:05,820
one will be web hook
5873
04:42:05,820 --> 04:42:07,378
success
5874
04:42:07,378 --> 04:42:09,660
and it's going to use let's use the same
5875
04:42:09,660 --> 04:42:12,840
controller checkout controller
5876
04:42:12,840 --> 04:42:13,860
um
5877
04:42:13,860 --> 04:42:16,798
yeah let's feature code controller okay
5878
04:42:16,798 --> 04:42:19,860
and that's going to be called success
5879
04:42:19,860 --> 04:42:22,440
and the second one will be
5880
04:42:22,440 --> 04:42:25,280
failure
5881
04:42:25,980 --> 04:42:27,900
well basically I think we only need one
5882
04:42:27,900 --> 04:42:31,500
Web book okay webhook uh stripe let's go
5883
04:42:31,500 --> 04:42:34,500
into epic stripe and
5884
04:42:34,500 --> 04:42:36,240
web hook
5885
04:42:36,240 --> 04:42:38,580
fine so if we go in the checkout
5886
04:42:38,580 --> 04:42:40,138
controller we have to create this
5887
04:42:40,138 --> 04:42:43,040
webhook right now
5888
04:42:44,760 --> 04:42:47,100
however
5889
04:42:47,100 --> 04:42:47,760
um
5890
04:42:47,760 --> 04:42:50,160
let's actually do it like this I want to
5891
04:42:50,160 --> 04:42:51,958
just follow the error so we have the web
5892
04:42:51,958 --> 04:42:54,298
hook which accepts the post requests now
5893
04:42:54,298 --> 04:42:56,940
what now what to do now let's go in the
5894
04:42:56,940 --> 04:42:58,680
documentation again and on the right
5895
04:42:58,680 --> 04:43:01,500
side we have the sample endpoint okay
5896
04:43:01,500 --> 04:43:04,200
this is how webhook PHP should look like
5897
04:43:04,200 --> 04:43:06,840
we have to install the stripe PHP which
5898
04:43:06,840 --> 04:43:08,400
we already have we have to start
5899
04:43:08,400 --> 04:43:11,940
listening to the localhost 4242 which we
5900
04:43:11,940 --> 04:43:13,440
are not doing we are listening on
5901
04:43:13,440 --> 04:43:16,080
localhost Port 8000 and we have to
5902
04:43:16,080 --> 04:43:18,958
configure it like this and we can
5903
04:43:18,958 --> 04:43:20,520
already by the way
5904
04:43:20,520 --> 04:43:22,440
put this in the corner we can already
5905
04:43:22,440 --> 04:43:26,160
specify right here webhook slash stripe
5906
04:43:26,160 --> 04:43:29,400
okay this is now listening to webhooks
5907
04:43:29,400 --> 04:43:33,000
and it will redirect to the webhook
5908
04:43:33,000 --> 04:43:36,718
stripe okay but we have to trigger
5909
04:43:36,718 --> 04:43:40,138
webhooks as well so now
5910
04:43:40,138 --> 04:43:43,980
uh let's actually open another CMD
5911
04:43:43,980 --> 04:43:48,440
let me copy this open another CMD
5912
04:43:48,440 --> 04:43:50,700
and I'm going to put this in the left
5913
04:43:50,700 --> 04:43:53,000
corner and
5914
04:43:53,000 --> 04:43:57,240
we need to navigate to the folder and
5915
04:43:57,240 --> 04:43:58,138
now let's have a look in the
5916
04:43:58,138 --> 04:44:01,500
documentation again
5917
04:44:01,500 --> 04:44:03,840
down below we have the stripe trigger
5918
04:44:03,840 --> 04:44:07,080
and the event okay here we have a lot of
5919
04:44:07,080 --> 04:44:09,718
different types of events uh but right
5920
04:44:09,718 --> 04:44:12,298
now we're gonna trigger the payment
5921
04:44:12,298 --> 04:44:14,458
intent succeeded so I'm going to copy
5922
04:44:14,458 --> 04:44:18,360
this and open the second terminal and
5923
04:44:18,360 --> 04:44:21,120
open the right one as well and it went
5924
04:44:21,120 --> 04:44:24,240
up uh put this right here okay stripe
5925
04:44:24,240 --> 04:44:27,660
trigger but let's specify stripe XA
5926
04:44:27,660 --> 04:44:30,718
trigger payment intent succeeded and
5927
04:44:30,718 --> 04:44:33,060
whenever we hit enter ID right here
5928
04:44:33,060 --> 04:44:36,660
stripe will redirect the event to my
5929
04:44:36,660 --> 04:44:39,480
local domain let's wait
5930
04:44:39,480 --> 04:44:42,120
here it comes okay charge succeeded
5931
04:44:42,120 --> 04:44:44,458
payment intent created payment intent
5932
04:44:44,458 --> 04:44:48,060
succeeded okay these three events were
5933
04:44:48,060 --> 04:44:51,180
sent to my web hook and all of them
5934
04:44:51,180 --> 04:44:55,740
return with status code 419.
5935
04:44:55,860 --> 04:44:58,200
and that error code identifies that we
5936
04:44:58,200 --> 04:45:00,840
have csrf validation on post requests we
5937
04:45:00,840 --> 04:45:03,060
have to disable csrf basically for the
5938
04:45:03,060 --> 04:45:05,760
following endpoints so I'm going to open
5939
04:45:05,760 --> 04:45:10,680
now the file which is called app
5940
04:45:10,680 --> 04:45:11,458
um
5941
04:45:11,458 --> 04:45:13,500
where where it is
5942
04:45:13,500 --> 04:45:17,878
um let me actually double click C ISR if
5943
04:45:17,878 --> 04:45:21,298
verify CSF token that is located under
5944
04:45:21,298 --> 04:45:25,560
app HTTP middleware uh verify csrf token
5945
04:45:25,560 --> 04:45:28,440
and right here we the by default is
5946
04:45:28,440 --> 04:45:31,138
going to be empty and we have to specify
5947
04:45:31,138 --> 04:45:34,080
a web hook
5948
04:45:34,080 --> 04:45:37,680
slash stripe whatever whatever is the
5949
04:45:37,680 --> 04:45:41,160
URL okay so in the webphp we have
5950
04:45:41,160 --> 04:45:43,260
webhook stripe and we have to specify
5951
04:45:43,260 --> 04:45:44,940
right here where poke stripe as well so
5952
04:45:44,940 --> 04:45:47,700
we basically disable CSF validation for
5953
04:45:47,700 --> 04:45:52,740
this URL now if I try to trigger the
5954
04:45:52,740 --> 04:45:54,780
same event it's going to succeed in
5955
04:45:54,780 --> 04:45:58,980
return with the status quo 200.
5956
04:45:58,980 --> 04:46:00,680
foreign
5957
04:46:00,680 --> 04:46:04,400
okay what happened
5958
04:46:09,420 --> 04:46:13,340
it doesn't send right now
5959
04:46:16,020 --> 04:46:17,160
okay
5960
04:46:17,160 --> 04:46:21,718
here it is it was returned with 302.
5961
04:46:21,718 --> 04:46:25,040
let me restart this
5962
04:46:26,160 --> 04:46:29,638
well let's trigger once again
5963
04:46:29,638 --> 04:46:33,000
okay we get this with um 302 because
5964
04:46:33,000 --> 04:46:34,440
probably because we don't return
5965
04:46:34,440 --> 04:46:37,100
anything okay if we just return
5966
04:46:37,100 --> 04:46:40,260
response uh with empty response but the
5967
04:46:40,260 --> 04:46:42,600
status code is 200 and by default this
5968
04:46:42,600 --> 04:46:45,420
article is 200 by the way so when we
5969
04:46:45,420 --> 04:46:47,700
trigger this once again
5970
04:46:47,700 --> 04:46:51,440
and on the right side we still get
5971
04:46:51,440 --> 04:46:53,000
302
5972
04:46:53,000 --> 04:46:56,718
webhook stripe
5973
04:47:01,100 --> 04:47:04,860
webhook stripe let's open web PHP we
5974
04:47:04,860 --> 04:47:08,400
have workbook stripe which is post
5975
04:47:08,400 --> 04:47:12,200
why should why why are we are getting
5976
04:47:12,200 --> 04:47:15,120
302 we should not be getting but let's
5977
04:47:15,120 --> 04:47:18,718
actually keep following the instructions
5978
04:47:18,718 --> 04:47:20,638
and then we will identify the problem
5979
04:47:20,638 --> 04:47:24,600
okay on the right sides then we have to
5980
04:47:24,600 --> 04:47:27,780
we have to validate the signature of the
5981
04:47:27,780 --> 04:47:30,060
payload okay we have to read the payload
5982
04:47:30,060 --> 04:47:33,240
and validate that so the very first
5983
04:47:33,240 --> 04:47:36,420
thing what we need is to set the API key
5984
04:47:36,420 --> 04:47:38,760
inside the stripe so we will still need
5985
04:47:38,760 --> 04:47:40,620
to take this by the way the user is not
5986
04:47:40,620 --> 04:47:42,780
used here so we can remove that
5987
04:47:42,780 --> 04:47:46,500
and we set this stripe API key the very
5988
04:47:46,500 --> 04:47:50,040
first thing second is that whenever we
5989
04:47:50,040 --> 04:47:52,798
run our
5990
04:47:52,798 --> 04:47:55,500
um redirect let's clear up
5991
04:47:55,500 --> 04:47:59,700
uh it tells us what is the webhook uh
5992
04:47:59,700 --> 04:48:02,040
here it is uh webhook sign in secret
5993
04:48:02,040 --> 04:48:04,740
this is webhook signing secret so I'm
5994
04:48:04,740 --> 04:48:06,480
going to copy this
5995
04:48:06,480 --> 04:48:09,718
and basically put this somewhere in the
5996
04:48:09,718 --> 04:48:12,540
comment right here and then if we copy
5997
04:48:12,540 --> 04:48:14,218
everything from the documentation this
5998
04:48:14,218 --> 04:48:15,900
is the endpoint Secret by the way so
5999
04:48:15,900 --> 04:48:18,680
let's copy everything
6000
04:48:19,320 --> 04:48:23,780
and paste now this right here
6001
04:48:23,820 --> 04:48:27,378
and let's format the code
6002
04:48:29,280 --> 04:48:31,500
okay the only thing is endpoint secret
6003
04:48:31,500 --> 04:48:35,700
which should be this
6004
04:48:36,420 --> 04:48:39,000
okay we set the API key we have the
6005
04:48:39,000 --> 04:48:42,120
endpoint secret we read the payload uh
6006
04:48:42,120 --> 04:48:45,958
we read the signature header okay and
6007
04:48:45,958 --> 04:48:48,540
then we try to construct an event from
6008
04:48:48,540 --> 04:48:50,218
this payload signature header and
6009
04:48:50,218 --> 04:48:52,620
endpoint secret and if there is any
6010
04:48:52,620 --> 04:48:56,280
error we'll return either 400 or
6011
04:48:56,280 --> 04:48:58,740
um yeah 400 basically in different type
6012
04:48:58,740 --> 04:49:01,020
of errors and finally if everything is
6013
04:49:01,020 --> 04:49:03,240
okay we return with 200. I'm going to
6014
04:49:03,240 --> 04:49:05,520
actually change this with return
6015
04:49:05,520 --> 04:49:08,340
response
6016
04:49:08,340 --> 04:49:11,218
um empty string with
6017
04:49:11,218 --> 04:49:13,920
400 and I'm going to actually return
6018
04:49:13,920 --> 04:49:17,400
this with 401 and with this 402 because
6019
04:49:17,400 --> 04:49:19,740
that helps me to debug if there is this
6020
04:49:19,740 --> 04:49:21,958
error I get 401 if there is a second
6021
04:49:21,958 --> 04:49:25,320
there I get this 402. when I was testing
6022
04:49:25,320 --> 04:49:28,320
I was getting the signature verification
6023
04:49:28,320 --> 04:49:31,320
exception uh very often and it took me
6024
04:49:31,320 --> 04:49:33,958
huge time to find out the problem the
6025
04:49:33,958 --> 04:49:36,360
problem was that the time zone in my
6026
04:49:36,360 --> 04:49:39,000
computer was mixed up and
6027
04:49:39,000 --> 04:49:41,760
the time wasn't correct and the header
6028
04:49:41,760 --> 04:49:43,560
basically contains the information about
6029
04:49:43,560 --> 04:49:45,718
the current timestamp as well and that
6030
04:49:45,718 --> 04:49:48,000
needs to be validated as well so that's
6031
04:49:48,000 --> 04:49:51,360
why I had this big problem okay make
6032
04:49:51,360 --> 04:49:53,878
sure your time is correct when you are
6033
04:49:53,878 --> 04:49:55,020
doing this
6034
04:49:55,020 --> 04:49:57,718
and finally I'm going to return with
6035
04:49:57,718 --> 04:49:59,340
status code
6036
04:49:59,340 --> 04:50:02,160
at 200.
6037
04:50:02,160 --> 04:50:04,760
return
6038
04:50:04,760 --> 04:50:10,560
response 200. okay so far so good we
6039
04:50:10,560 --> 04:50:12,540
have everything which we need now let's
6040
04:50:12,540 --> 04:50:15,020
bring up the
6041
04:50:15,020 --> 04:50:17,760
Terminals and we are listening and now
6042
04:50:17,760 --> 04:50:20,480
let's trigger
6043
04:50:22,560 --> 04:50:26,400
okay we still get 302 which is weird we
6044
04:50:26,400 --> 04:50:28,740
should not be getting this
6045
04:50:28,740 --> 04:50:33,660
webhook stripe web hook stripe
6046
04:50:33,660 --> 04:50:35,638
okay
6047
04:50:35,638 --> 04:50:37,440
why do we get this let's actually open
6048
04:50:37,440 --> 04:50:41,280
uh and change this into get
6049
04:50:41,280 --> 04:50:43,740
and then
6050
04:50:43,740 --> 04:50:45,718
I will try to access this in the browser
6051
04:50:45,718 --> 04:50:47,760
maybe I'm going to return
6052
04:50:47,760 --> 04:50:50,280
everything I think I know why I think I
6053
04:50:50,280 --> 04:50:51,780
know why because we have this route
6054
04:50:51,780 --> 04:50:54,240
protected in the out and verified that
6055
04:50:54,240 --> 04:50:57,600
should be that should be accessible
6056
04:50:57,600 --> 04:51:00,360
uh from anywhere okay because the stripe
6057
04:51:00,360 --> 04:51:03,360
can access yeah okay I think it's very
6058
04:51:03,360 --> 04:51:05,218
obvious very clear we shouldn't have
6059
04:51:05,218 --> 04:51:07,138
this in our verified because the stripe
6060
04:51:07,138 --> 04:51:10,138
is accessing uh this URL and stripe
6061
04:51:10,138 --> 04:51:12,480
obviously is not authorized when making
6062
04:51:12,480 --> 04:51:15,298
requests to this okay so the web hook
6063
04:51:15,298 --> 04:51:18,298
needs to be accessed from anywhere
6064
04:51:18,298 --> 04:51:20,340
without authorization
6065
04:51:20,340 --> 04:51:24,240
okay so when we do this now let's have a
6066
04:51:24,240 --> 04:51:25,080
look
6067
04:51:25,080 --> 04:51:29,100
so we trigger again and now on the right
6068
04:51:29,100 --> 04:51:32,638
side we get 200 okay so it was
6069
04:51:32,638 --> 04:51:34,860
successfully completed and if we now go
6070
04:51:34,860 --> 04:51:36,900
in the web hook
6071
04:51:36,900 --> 04:51:39,420
um we actually cannot dump the
6072
04:51:39,420 --> 04:51:41,760
information right here and see however
6073
04:51:41,760 --> 04:51:43,860
we have this payment intent and that
6074
04:51:43,860 --> 04:51:47,218
payment intent contains uh everything
6075
04:51:47,218 --> 04:51:48,660
which we need so we know that payment
6076
04:51:48,660 --> 04:51:50,700
intent succeeded
6077
04:51:50,700 --> 04:51:55,378
and we can mark the uh payment is
6078
04:51:55,378 --> 04:51:57,660
um like the payment and order is paid
6079
04:51:57,660 --> 04:52:00,378
now let's go in this stripe dashboard
6080
04:52:00,378 --> 04:52:03,060
and go in the received events and look
6081
04:52:03,060 --> 04:52:05,638
at this so we see what event we received
6082
04:52:05,638 --> 04:52:08,340
okay we received the whole everything
6083
04:52:08,340 --> 04:52:10,260
right here is
6084
04:52:10,260 --> 04:52:11,100
um
6085
04:52:11,100 --> 04:52:13,020
is event
6086
04:52:13,020 --> 04:52:15,480
okay and we have data object look at
6087
04:52:15,480 --> 04:52:17,878
this we have data object and that is the
6088
04:52:17,878 --> 04:52:20,580
event that is the payment intent at the
6089
04:52:20,580 --> 04:52:23,580
moment right here so we have the ID we
6090
04:52:23,580 --> 04:52:26,040
have the object amount what amount
6091
04:52:26,040 --> 04:52:27,600
received
6092
04:52:27,600 --> 04:52:28,980
um
6093
04:52:28,980 --> 04:52:32,280
way well we have charges as well however
6094
04:52:32,280 --> 04:52:34,378
I'm looking for if we have anything
6095
04:52:34,378 --> 04:52:37,260
related to a specific session
6096
04:52:37,260 --> 04:52:41,458
payment intent payment method
6097
04:52:41,458 --> 04:52:46,100
fingerprint receipt URL
6098
04:52:46,798 --> 04:52:49,700
succeeded
6099
04:52:50,340 --> 04:52:52,740
client secrets
6100
04:52:52,740 --> 04:52:54,958
to the client secret I think that's not
6101
04:52:54,958 --> 04:52:56,820
the
6102
04:52:56,820 --> 04:52:59,100
it's not the session ID I want the
6103
04:52:59,100 --> 04:53:01,458
session ID to
6104
04:53:01,458 --> 04:53:06,900
identify which order should I Mark as
6105
04:53:06,900 --> 04:53:09,000
paid
6106
04:53:09,000 --> 04:53:11,520
now we are listening web Hooks and then
6107
04:53:11,520 --> 04:53:14,820
sending the uh intent but why don't we
6108
04:53:14,820 --> 04:53:17,580
listen to webhooks like this
6109
04:53:17,580 --> 04:53:20,700
but don't actually send it manually but
6110
04:53:20,700 --> 04:53:23,940
try to make a normal payment like this
6111
04:53:23,940 --> 04:53:26,580
one for example which is considered as
6112
04:53:26,580 --> 04:53:28,680
unpaid at the moment even though that
6113
04:53:28,680 --> 04:53:32,400
the user paid let's click pay right here
6114
04:53:32,400 --> 04:53:36,060
and let's provide the user information
6115
04:53:36,060 --> 04:53:37,620
and by the way
6116
04:53:37,620 --> 04:53:40,680
if we increase this
6117
04:53:40,680 --> 04:53:43,340
so we're going to get information
6118
04:53:43,340 --> 04:53:46,920
not only about like payment succeeded
6119
04:53:46,920 --> 04:53:49,798
but payment intent created
6120
04:53:49,798 --> 04:53:52,378
so whenever we open this page it's
6121
04:53:52,378 --> 04:53:55,020
triggered this payment intent created so
6122
04:53:55,020 --> 04:53:56,760
let me actually
6123
04:53:56,760 --> 04:53:59,480
to like
6124
04:53:59,580 --> 04:54:02,160
reduce it
6125
04:54:02,160 --> 04:54:04,680
and click on pay
6126
04:54:04,680 --> 04:54:06,718
now let's wait
6127
04:54:06,718 --> 04:54:09,298
okay right now payment succeeded I think
6128
04:54:09,298 --> 04:54:11,280
I I had to close the tab my mistake so
6129
04:54:11,280 --> 04:54:13,440
let me actually go to the cart and
6130
04:54:13,440 --> 04:54:16,200
proceed to checkout
6131
04:54:16,200 --> 04:54:19,980
and let's provide
6132
04:54:19,980 --> 04:54:22,260
and again when this form was opened
6133
04:54:22,260 --> 04:54:24,900
another payment intent created was
6134
04:54:24,900 --> 04:54:27,600
triggered in my opinion okay here it is
6135
04:54:27,600 --> 04:54:30,000
and checkout session completed
6136
04:54:30,000 --> 04:54:33,120
sometimes this CMD is stuck and until
6137
04:54:33,120 --> 04:54:35,820
you hit the enter it doesn't show
6138
04:54:35,820 --> 04:54:38,100
progress but here we see this payment
6139
04:54:38,100 --> 04:54:41,878
intent created okay now let's click on
6140
04:54:41,878 --> 04:54:44,218
pay and I'm going to close the tab
6141
04:54:44,218 --> 04:54:46,740
as soon as it turns into green okay I
6142
04:54:46,740 --> 04:54:48,600
close the top and we got a few
6143
04:54:48,600 --> 04:54:50,340
information like charge succeeded
6144
04:54:50,340 --> 04:54:52,920
checkout session completed and now we
6145
04:54:52,920 --> 04:54:55,378
should payment intent succeeded here it
6146
04:54:55,378 --> 04:54:57,780
is as well
6147
04:54:57,780 --> 04:55:00,900
and let's go in the stripe dashboard and
6148
04:55:00,900 --> 04:55:02,520
we see that
6149
04:55:02,520 --> 04:55:04,798
this is checkout session we are looking
6150
04:55:04,798 --> 04:55:08,100
for payment intent succeeded and if we
6151
04:55:08,100 --> 04:55:09,958
if we're talking about the checkout
6152
04:55:09,958 --> 04:55:12,298
session we get the session ID as well so
6153
04:55:12,298 --> 04:55:14,160
previously because we were testing some
6154
04:55:14,160 --> 04:55:17,100
test data the idea was obviously wrong
6155
04:55:17,100 --> 04:55:19,320
but if I look for
6156
04:55:19,320 --> 04:55:22,138
a payment intent succeeded like 31
6157
04:55:22,138 --> 04:55:25,138
seconds ago we should have some kind of
6158
04:55:25,138 --> 04:55:27,718
identifier
6159
04:55:27,718 --> 04:55:31,260
for the session okay customer created
6160
04:55:31,260 --> 04:55:34,020
this is something we don't hear payment
6161
04:55:34,020 --> 04:55:37,200
intent succeeded okay so we don't have a
6162
04:55:37,200 --> 04:55:39,540
decision ID for payment intent succeeded
6163
04:55:39,540 --> 04:55:43,260
but we do have session ID for
6164
04:55:43,260 --> 04:55:46,620
uh checkout session
6165
04:55:46,620 --> 04:55:49,138
we have the amount as well the correct
6166
04:55:49,138 --> 04:55:51,120
amount 399
6167
04:55:51,120 --> 04:55:55,920
however can we know from this event that
6168
04:55:55,920 --> 04:55:57,600
the
6169
04:55:57,600 --> 04:55:59,638
yeah the status is completed but
6170
04:55:59,638 --> 04:56:04,138
basically so if the checkout session is
6171
04:56:04,138 --> 04:56:06,420
completed then we know that the user
6172
04:56:06,420 --> 04:56:08,940
actually completed the payment so right
6173
04:56:08,940 --> 04:56:10,440
here instead of payment instant
6174
04:56:10,440 --> 04:56:14,400
succeeded so we set checkout
6175
04:56:14,400 --> 04:56:17,760
session if that is completed then we
6176
04:56:17,760 --> 04:56:19,860
also take the ID which is the session ID
6177
04:56:19,860 --> 04:56:22,378
we have the payment intent and we get
6178
04:56:22,378 --> 04:56:28,320
the session ID from payment intent
6179
04:56:28,320 --> 04:56:30,860
um just ID
6180
04:56:31,320 --> 04:56:33,958
okay and then we will do the a whole
6181
04:56:33,958 --> 04:56:36,000
process like we were doing in the
6182
04:56:36,000 --> 04:56:37,020
success
6183
04:56:37,020 --> 04:56:40,320
now right here so we get the session ID
6184
04:56:40,320 --> 04:56:41,160
um
6185
04:56:41,160 --> 04:56:43,320
we can also retrieve the session but I
6186
04:56:43,320 --> 04:56:45,600
guess that's not necessary we select the
6187
04:56:45,600 --> 04:56:48,718
payment we updated status we update the
6188
04:56:48,718 --> 04:56:50,700
order as well
6189
04:56:50,700 --> 04:56:54,480
and and and then we return uh the
6190
04:56:54,480 --> 04:56:56,340
customer push the customer to the view
6191
04:56:56,340 --> 04:56:59,580
so if I just take this portion and
6192
04:56:59,580 --> 04:57:01,980
extract into a new function and I'm
6193
04:57:01,980 --> 04:57:03,440
going to call this
6194
04:57:03,440 --> 04:57:07,160
these update
6195
04:57:07,740 --> 04:57:12,000
um update order and session
6196
04:57:12,000 --> 04:57:16,638
and we only pass session ID or session
6197
04:57:16,638 --> 04:57:19,560
underscore ID doesn't matter so let's
6198
04:57:19,560 --> 04:57:21,560
create this update order in session
6199
04:57:21,560 --> 04:57:24,060
method private method down below and I'm
6200
04:57:24,060 --> 04:57:26,218
going to paste my code here
6201
04:57:26,218 --> 04:57:30,000
okay so I get session underscore ID
6202
04:57:30,000 --> 04:57:32,458
right here
6203
04:57:32,458 --> 04:57:34,980
let's format the code I select the
6204
04:57:34,980 --> 04:57:37,860
payment if the payment doesn't exist we
6205
04:57:37,860 --> 04:57:40,860
return View
6206
04:57:40,860 --> 04:57:44,580
but we have to we have to be careful
6207
04:57:44,580 --> 04:57:46,200
here
6208
04:57:46,200 --> 04:57:48,718
uh if we return view from there we have
6209
04:57:48,718 --> 04:57:52,020
to return view from here as well
6210
04:57:52,020 --> 04:57:55,500
okay the payment doesn't exist
6211
04:57:55,500 --> 04:57:57,780
will return payment doesn't exist why
6212
04:57:57,780 --> 04:57:59,580
don't we simply
6213
04:57:59,580 --> 04:58:03,840
roll new not found
6214
04:58:03,840 --> 04:58:05,700
HTTP exception
6215
04:58:05,700 --> 04:58:09,740
is this the correct one just scroll new
6216
04:58:09,740 --> 04:58:12,780
HTTP not
6217
04:58:12,780 --> 04:58:15,620
bound
6218
04:58:21,240 --> 04:58:24,780
okay let's draw this exception
6219
04:58:24,780 --> 04:58:27,360
and in other case we will update the
6220
04:58:27,360 --> 04:58:29,760
payment and the order and we're going to
6221
04:58:29,760 --> 04:58:33,000
take this code and put this in our
6222
04:58:33,000 --> 04:58:35,280
webhoop right here as well so if the
6223
04:58:35,280 --> 04:58:40,378
event is checkout session and we get the
6224
04:58:40,378 --> 04:58:43,080
session ID and we selected the order if
6225
04:58:43,080 --> 04:58:44,700
the payment was not selected we throw
6226
04:58:44,700 --> 04:58:46,860
not for an exception but if that was
6227
04:58:46,860 --> 04:58:51,120
selected we update status and that's it
6228
04:58:51,120 --> 04:58:53,400
okay now if we go in the browser and
6229
04:58:53,400 --> 04:58:56,340
have a look so we're gonna have
6230
04:58:56,340 --> 04:59:01,200
um this order actually is already paid
6231
04:59:01,200 --> 04:59:03,780
they tease the payment let's go in the
6232
04:59:03,780 --> 04:59:04,980
orders
6233
04:59:04,980 --> 04:59:07,378
okay we have all of them paid now let's
6234
04:59:07,378 --> 04:59:09,718
open
6235
04:59:09,718 --> 04:59:13,138
our website
6236
04:59:13,138 --> 04:59:16,500
and add item into the cart let's go in
6237
04:59:16,500 --> 04:59:20,420
the cart proceed to checkout
6238
04:59:20,520 --> 04:59:23,820
we have this uh webhook
6239
04:59:23,820 --> 04:59:26,340
um redirect enabled
6240
04:59:26,340 --> 04:59:30,080
let's provide some details
6241
04:59:30,120 --> 04:59:32,638
and let's hit pay and I'm going to close
6242
04:59:32,638 --> 04:59:34,860
the tab
6243
04:59:34,860 --> 04:59:37,560
okay so I close the tab reload the page
6244
04:59:37,560 --> 04:59:40,500
and we see that the order or the payment
6245
04:59:40,500 --> 04:59:43,440
is pending now let's see right here we
6246
04:59:43,440 --> 04:59:45,120
got
6247
04:59:45,120 --> 04:59:48,958
um checkout session completed okay I
6248
04:59:48,958 --> 04:59:50,240
think
6249
04:59:50,240 --> 04:59:53,878
we made a small mistake right here it's
6250
04:59:53,878 --> 04:59:56,458
not simply checkout session the event is
6251
04:59:56,458 --> 04:59:59,580
called checkout session completed
6252
04:59:59,580 --> 05:00:01,740
Okay let's listen to this so we get the
6253
05:00:01,740 --> 05:00:04,560
session ID we update the order
6254
05:00:04,560 --> 05:00:07,378
and just like these then we we will
6255
05:00:07,378 --> 05:00:10,860
return 200.
6256
05:00:11,218 --> 05:00:14,638
so now the order will stay pinning
6257
05:00:14,638 --> 05:00:16,920
so let's
6258
05:00:16,920 --> 05:00:21,000
let's open the tab again go to websites
6259
05:00:21,000 --> 05:00:23,218
now we can go in my orders and we see
6260
05:00:23,218 --> 05:00:25,560
this is unpaid I'm going to click pay on
6261
05:00:25,560 --> 05:00:27,798
this
6262
05:00:28,500 --> 05:00:32,100
okay let's provide formation again
6263
05:00:32,100 --> 05:00:34,260
and let's click pay and I'm going to
6264
05:00:34,260 --> 05:00:36,240
close the tab again as soon as it turns
6265
05:00:36,240 --> 05:00:37,920
into green
6266
05:00:37,920 --> 05:00:40,620
okay close the top okay let's have a
6267
05:00:40,620 --> 05:00:42,180
look now it's already paid look at this
6268
05:00:42,180 --> 05:00:44,340
and if we have a look right here we see
6269
05:00:44,340 --> 05:00:47,040
checkout session completed okay chart
6270
05:00:47,040 --> 05:00:49,500
succeeded checkout session completed
6271
05:00:49,500 --> 05:00:53,458
okay this works fine however let's test
6272
05:00:53,458 --> 05:00:56,100
one more time because whenever we don't
6273
05:00:56,100 --> 05:00:58,080
close the tab
6274
05:00:58,080 --> 05:01:01,080
like this might be triggered and as well
6275
05:01:01,080 --> 05:01:04,378
as redirect and then when we select the
6276
05:01:04,378 --> 05:01:06,900
payment which has should have status
6277
05:01:06,900 --> 05:01:09,660
pending one of them might fail
6278
05:01:09,660 --> 05:01:12,120
okay let's let's see let's have a look
6279
05:01:12,120 --> 05:01:16,820
so let's open the tab
6280
05:01:16,980 --> 05:01:20,040
and let's add one more item
6281
05:01:20,040 --> 05:01:23,218
now proceed to checkout
6282
05:01:23,218 --> 05:01:27,660
okay and let's have this also
6283
05:01:27,660 --> 05:01:29,820
opened
6284
05:01:29,820 --> 05:01:31,500
or maybe I'm going to clear up
6285
05:01:31,500 --> 05:01:35,240
everything and restart it
6286
05:01:36,240 --> 05:01:39,718
okay and now let's click
6287
05:01:39,718 --> 05:01:43,020
pay and have this open
6288
05:01:43,020 --> 05:01:46,798
so we get succeeded check out complete
6289
05:01:46,798 --> 05:01:49,560
and now look at this so your payment was
6290
05:01:49,560 --> 05:01:54,420
not successful and that happened
6291
05:01:54,420 --> 05:01:56,580
that happened because the web hook
6292
05:01:56,580 --> 05:01:59,100
actually triggered earlier than the
6293
05:01:59,100 --> 05:02:03,120
redirect okay so on this redirect we
6294
05:02:03,120 --> 05:02:06,440
have to make few modifications
6295
05:02:06,440 --> 05:02:10,200
uh here it is let me actually look for
6296
05:02:10,200 --> 05:02:12,900
uh success
6297
05:02:12,900 --> 05:02:15,180
so here it is and we get the session ID
6298
05:02:15,180 --> 05:02:18,718
and we have to update uh order and
6299
05:02:18,718 --> 05:02:21,180
session so maybe we can make a small
6300
05:02:21,180 --> 05:02:23,400
change right here so I'm going to take
6301
05:02:23,400 --> 05:02:26,700
this out and we're going to accept
6302
05:02:26,700 --> 05:02:30,718
uh payment here it's going to be an
6303
05:02:30,718 --> 05:02:32,900
instance of payment model
6304
05:02:32,900 --> 05:02:35,218
and let me make sure to remove this
6305
05:02:35,218 --> 05:02:36,540
mixed and I'm going to change the
6306
05:02:36,540 --> 05:02:38,638
notation into well we don't even need
6307
05:02:38,638 --> 05:02:41,340
session ID we just passed the payment
6308
05:02:41,340 --> 05:02:45,900
then from the success we select the
6309
05:02:45,900 --> 05:02:48,180
payment first but on the success web
6310
05:02:48,180 --> 05:02:50,520
hook we only select the
6311
05:02:50,520 --> 05:02:53,580
let's select the payment
6312
05:02:53,580 --> 05:02:55,458
if it is
6313
05:02:55,458 --> 05:02:59,340
pending or completed and then we check
6314
05:02:59,340 --> 05:03:02,400
if it is completed we still show success
6315
05:03:02,400 --> 05:03:04,560
to the
6316
05:03:04,560 --> 05:03:07,200
to the user
6317
05:03:07,200 --> 05:03:10,500
so but if it's failed we aren't going to
6318
05:03:10,500 --> 05:03:13,378
do anything so we have pending uh paid
6319
05:03:13,378 --> 05:03:14,580
and failed
6320
05:03:14,580 --> 05:03:16,920
so let's put right here let's change
6321
05:03:16,920 --> 05:03:19,260
this into an array and we're going to
6322
05:03:19,260 --> 05:03:23,160
select pending payments or payment when
6323
05:03:23,160 --> 05:03:26,458
payment status is paid
6324
05:03:26,458 --> 05:03:29,340
okay if payment does not exist then
6325
05:03:29,340 --> 05:03:32,120
we're gonna throw not found
6326
05:03:32,120 --> 05:03:33,900
however
6327
05:03:33,900 --> 05:03:37,440
if payment exists in the payment
6328
05:03:37,440 --> 05:03:40,138
tattoos
6329
05:03:40,138 --> 05:03:42,320
is called
6330
05:03:42,320 --> 05:03:45,540
payment status paid
6331
05:03:45,540 --> 05:03:48,200
this means that webhook already
6332
05:03:48,200 --> 05:03:51,480
succeeded and then the redirect happened
6333
05:03:51,480 --> 05:03:54,540
so we have to show success message to
6334
05:03:54,540 --> 05:03:56,160
the user so basically we have to put
6335
05:03:56,160 --> 05:03:59,520
this right here okay or we can do vice
6336
05:03:59,520 --> 05:04:04,860
versa if payment status equals pending
6337
05:04:04,860 --> 05:04:06,718
it should be either pending or paid
6338
05:04:06,718 --> 05:04:08,820
because we are selecting only these two
6339
05:04:08,820 --> 05:04:11,940
statuses if this status is pending then
6340
05:04:11,940 --> 05:04:14,400
we update
6341
05:04:14,400 --> 05:04:16,500
um then we update the payment and we're
6342
05:04:16,500 --> 05:04:18,000
going to pass right here payment okay
6343
05:04:18,000 --> 05:04:20,700
this accepts payment right now and we're
6344
05:04:20,700 --> 05:04:22,138
going to accept payment we're going to
6345
05:04:22,138 --> 05:04:23,580
pass payment
6346
05:04:23,580 --> 05:04:26,940
uh and and what
6347
05:04:26,940 --> 05:04:29,340
and then the payment will be updated
6348
05:04:29,340 --> 05:04:31,138
with the order and then we show success
6349
05:04:31,138 --> 05:04:33,480
message to the user let's find the
6350
05:04:33,480 --> 05:04:35,100
second place where we are passing the
6351
05:04:35,100 --> 05:04:37,920
session ID and we have to select right
6352
05:04:37,920 --> 05:04:39,840
here
6353
05:04:39,840 --> 05:04:41,580
um
6354
05:04:41,580 --> 05:04:43,138
okay
6355
05:04:43,138 --> 05:04:45,900
we have to select
6356
05:04:45,900 --> 05:04:49,020
payment right here which
6357
05:04:49,020 --> 05:04:51,060
okay in this case we can assume that the
6358
05:04:51,060 --> 05:04:53,580
payment is pending because it looks like
6359
05:04:53,580 --> 05:04:57,060
webhook comes earlier than the redirect
6360
05:04:57,060 --> 05:05:00,298
but just in case the redirect comes
6361
05:05:00,298 --> 05:05:03,540
first uh we have to select only now we
6362
05:05:03,540 --> 05:05:05,940
have to select um completed as well okay
6363
05:05:05,940 --> 05:05:09,180
if it's completed we won't do anything
6364
05:05:09,180 --> 05:05:12,620
or simply in this case
6365
05:05:14,100 --> 05:05:17,458
so we get the checkout session completed
6366
05:05:17,458 --> 05:05:20,718
okay let's select only pending
6367
05:05:20,718 --> 05:05:24,420
and if that doesn't exist we don't do
6368
05:05:24,420 --> 05:05:28,260
anything okay simply if that exists we
6369
05:05:28,260 --> 05:05:30,958
will update it
6370
05:05:30,958 --> 05:05:36,020
otherwise we just don't do anything
6371
05:05:36,600 --> 05:05:41,638
okay now let's test one more time
6372
05:05:41,638 --> 05:05:43,620
we are creating something which should
6373
05:05:43,620 --> 05:05:44,700
be
6374
05:05:44,700 --> 05:05:48,240
used on on production right so proceed
6375
05:05:48,240 --> 05:05:49,920
to checkout
6376
05:05:49,920 --> 05:05:53,400
according my to my observation and my
6377
05:05:53,400 --> 05:05:55,138
past few years
6378
05:05:55,138 --> 05:05:58,860
uh like a lot of time is taken on to
6379
05:05:58,860 --> 05:06:01,980
actually test your product on multiple
6380
05:06:01,980 --> 05:06:04,440
use cases
6381
05:06:04,440 --> 05:06:08,400
now hit the enter payment
6382
05:06:08,400 --> 05:06:10,740
okay payment session checkout session
6383
05:06:10,740 --> 05:06:15,240
completed but here we have another error
6384
05:06:15,240 --> 05:06:17,160
yeah the order has been completed we got
6385
05:06:17,160 --> 05:06:21,240
this we got multiple
6386
05:06:21,240 --> 05:06:23,638
we got multiple succeeds so customer
6387
05:06:23,638 --> 05:06:25,860
created succeeded payment and then
6388
05:06:25,860 --> 05:06:28,680
succeeded but session to code has 500
6389
05:06:28,680 --> 05:06:31,680
error and I think we can have a look at
6390
05:06:31,680 --> 05:06:36,138
this error inside storage
6391
05:06:36,138 --> 05:06:40,638
logs larval log
6392
05:06:40,860 --> 05:06:43,260
it's going to be probably huge right so
6393
05:06:43,260 --> 05:06:46,700
let's crawl at the very bottom
6394
05:06:47,700 --> 05:06:51,480
and what is the error let's see
6395
05:06:51,480 --> 05:06:54,298
argument one payment must be type of
6396
05:06:54,298 --> 05:06:56,700
payment string given
6397
05:06:56,700 --> 05:06:59,480
okay
6398
05:06:59,940 --> 05:07:01,440
that's right
6399
05:07:01,440 --> 05:07:03,840
laravel is right as always
6400
05:07:03,840 --> 05:07:06,718
so we pass payment right here
6401
05:07:06,718 --> 05:07:09,180
now we need one more test because we
6402
05:07:09,180 --> 05:07:11,280
want everything to pass
6403
05:07:11,280 --> 05:07:15,000
a law I bought a lot of things from my
6404
05:07:15,000 --> 05:07:16,500
website
6405
05:07:16,500 --> 05:07:20,638
and click pay let's bring up this
6406
05:07:20,638 --> 05:07:24,958
we see them coming all of them succeeded
6407
05:07:24,958 --> 05:07:29,040
and payment was not successful
6408
05:07:29,040 --> 05:07:33,060
okay payment was not successful
6409
05:07:33,060 --> 05:07:36,180
let's understand why
6410
05:07:36,180 --> 05:07:38,718
so
6411
05:07:38,878 --> 05:07:41,100
we tried to
6412
05:07:41,100 --> 05:07:43,980
we tried to fetch the session in valid
6413
05:07:43,980 --> 05:07:45,718
session ID so we we don't see this
6414
05:07:45,718 --> 05:07:47,160
message
6415
05:07:47,160 --> 05:07:48,840
your payment wasn't successful let's
6416
05:07:48,840 --> 05:07:50,580
open this checkout failure by the way
6417
05:07:50,580 --> 05:07:53,458
and see what
6418
05:07:53,458 --> 05:07:56,600
we need View
6419
05:07:56,940 --> 05:08:00,420
okay your payment was not successful see
6420
05:08:00,420 --> 05:08:04,100
that's the message is empty
6421
05:08:04,378 --> 05:08:05,700
okay
6422
05:08:05,700 --> 05:08:08,160
If the message is empty
6423
05:08:08,160 --> 05:08:11,780
then this does didn't happen
6424
05:08:12,600 --> 05:08:14,638
okay what might happen
6425
05:08:14,638 --> 05:08:16,740
is this
6426
05:08:16,740 --> 05:08:19,320
some exception
6427
05:08:19,320 --> 05:08:23,040
okay let's open Laurel log
6428
05:08:23,040 --> 05:08:26,760
and see if there is any new exception
6429
05:08:26,760 --> 05:08:29,218
update session order okay okay no
6430
05:08:29,218 --> 05:08:31,798
there's nothing new or at least let's
6431
05:08:31,798 --> 05:08:35,660
try to reopen this
6432
05:08:37,560 --> 05:08:39,740
thank you
6433
05:08:44,820 --> 05:08:47,400
no that's not
6434
05:08:47,400 --> 05:08:51,600
it's not a new message so let's close it
6435
05:08:51,600 --> 05:08:54,600
so obviously there was an error the
6436
05:08:54,600 --> 05:08:56,400
error might be
6437
05:08:56,400 --> 05:08:58,020
we get the first payment if the payment
6438
05:08:58,020 --> 05:08:59,940
doesn't exist withdrawn not found an
6439
05:08:59,940 --> 05:09:01,020
exception
6440
05:09:01,020 --> 05:09:05,480
if the payment is pending we update that
6441
05:09:08,280 --> 05:09:10,980
and then in the exception I think the
6442
05:09:10,980 --> 05:09:13,020
problem is right here okay
6443
05:09:13,020 --> 05:09:16,020
so there was some kind of exception
6444
05:09:16,020 --> 05:09:18,860
but because
6445
05:09:21,840 --> 05:09:23,760
we should have a message displayed
6446
05:09:23,760 --> 05:09:26,520
somewhere right if we inspect this we
6447
05:09:26,520 --> 05:09:29,780
have a paragraph which is empty
6448
05:09:30,958 --> 05:09:33,920
okay we have to we have to throw maybe
6449
05:09:33,920 --> 05:09:38,400
throw an exception from here and do one
6450
05:09:38,400 --> 05:09:40,798
more test
6451
05:09:40,798 --> 05:09:45,000
let's enter cart and then
6452
05:09:45,000 --> 05:09:48,200
check out
6453
05:09:56,940 --> 05:10:00,780
okay now here we see not found
6454
05:10:00,780 --> 05:10:03,980
in the not found
6455
05:10:04,080 --> 05:10:07,580
because the payment
6456
05:10:09,000 --> 05:10:12,180
okay maybe this doesn't work where I
6457
05:10:12,180 --> 05:10:15,060
expected this status would be
6458
05:10:15,060 --> 05:10:18,360
um in this but I think that doesn't work
6459
05:10:18,360 --> 05:10:21,420
so that should be weird
6460
05:10:21,420 --> 05:10:24,440
we are in
6461
05:10:25,378 --> 05:10:28,860
tattoos in the array
6462
05:10:28,860 --> 05:10:32,958
so let's remove this
6463
05:10:34,260 --> 05:10:37,820
now let's go back
6464
05:10:40,798 --> 05:10:43,440
okay one and um one another thing like
6465
05:10:43,440 --> 05:10:45,060
we are throwing not sound exception
6466
05:10:45,060 --> 05:10:46,260
right here
6467
05:10:46,260 --> 05:10:51,660
uh but that will be caught by this so
6468
05:10:51,660 --> 05:10:54,780
maybe we need another catch
6469
05:10:54,780 --> 05:10:58,500
which will catch not found
6470
05:10:58,500 --> 05:11:01,020
not found HTTP exception and simply
6471
05:11:01,020 --> 05:11:02,580
throw that exception
6472
05:11:02,580 --> 05:11:05,760
otherwise we will take this and display
6473
05:11:05,760 --> 05:11:07,980
it
6474
05:11:07,980 --> 05:11:12,320
okay but that should already work
6475
05:11:14,940 --> 05:11:17,218
okay we don't have any items
6476
05:11:17,218 --> 05:11:19,740
and it took card
6477
05:11:19,740 --> 05:11:23,240
and press it to checkout
6478
05:11:24,540 --> 05:11:26,940
and where's my information it didn't
6479
05:11:26,940 --> 05:11:30,138
save I think
6480
05:11:30,840 --> 05:11:34,458
or it did let me know
6481
05:11:34,798 --> 05:11:36,600
I don't want to provide my phone number
6482
05:11:36,600 --> 05:11:38,340
at the moment
6483
05:11:38,340 --> 05:11:40,860
so let's fill up the form and click pay
6484
05:11:40,860 --> 05:11:44,240
let's open this
6485
05:11:44,940 --> 05:11:48,420
okay everything completed and your order
6486
05:11:48,420 --> 05:11:51,180
has been completed now I think we have
6487
05:11:51,180 --> 05:11:54,120
everything good and let's check now our
6488
05:11:54,120 --> 05:11:55,440
payments
6489
05:11:55,440 --> 05:11:58,440
okay the last one is paid
6490
05:11:58,440 --> 05:12:00,958
if we go in the orders we see this is
6491
05:12:00,958 --> 05:12:05,060
also paid if we go in my orders we see
6492
05:12:05,060 --> 05:12:07,500
that all of them actually is paid except
6493
05:12:07,500 --> 05:12:09,740
this one so let's pay this one as well
6494
05:12:09,740 --> 05:12:12,540
just to make sure that the payment from
6495
05:12:12,540 --> 05:12:15,798
the orders also works fine
6496
05:12:15,798 --> 05:12:19,920
here is the intent that was created
6497
05:12:19,920 --> 05:12:22,020
and your order has been completed if you
6498
05:12:22,020 --> 05:12:24,240
go into my orders we see all of them is
6499
05:12:24,240 --> 05:12:25,138
paid
6500
05:12:25,138 --> 05:12:27,840
okay I think this is the full flow of
6501
05:12:27,840 --> 05:12:30,120
stripe so you configure not only
6502
05:12:30,120 --> 05:12:33,718
redirect URLs success and failure but
6503
05:12:33,718 --> 05:12:36,060
webhook as well and you have to test
6504
05:12:36,060 --> 05:12:38,458
your web hook because that is
6505
05:12:38,458 --> 05:12:39,298
um
6506
05:12:39,298 --> 05:12:42,060
that's a fallback case if the redirect
6507
05:12:42,060 --> 05:12:44,700
failed for some reason okay
6508
05:12:44,700 --> 05:12:47,820
okay now let's Implement view order or
6509
05:12:47,820 --> 05:12:50,458
view invoice functionality if we go into
6510
05:12:50,458 --> 05:12:53,040
design so when we click on this order
6511
05:12:53,040 --> 05:12:56,218
number it opens the order Details page
6512
05:12:56,218 --> 05:12:58,798
where we see the order number date
6513
05:12:58,798 --> 05:13:01,560
status what is the subtotal and the
6514
05:13:01,560 --> 05:13:04,860
items what is inside the order and if
6515
05:13:04,860 --> 05:13:07,200
the order is not paid we have make a
6516
05:13:07,200 --> 05:13:09,360
payment button right here as well if we
6517
05:13:09,360 --> 05:13:12,000
go back and click view invoice that
6518
05:13:12,000 --> 05:13:15,780
basically doesn't do anything but I
6519
05:13:15,780 --> 05:13:18,120
think we need to show a model maybe
6520
05:13:18,120 --> 05:13:21,060
inside which we will have invoice okay
6521
05:13:21,060 --> 05:13:25,798
but let's first implement the um this my
6522
05:13:25,798 --> 05:13:28,260
this should not be my orders that should
6523
05:13:28,260 --> 05:13:31,020
be an order with some specific number
6524
05:13:31,020 --> 05:13:33,780
this page basically so for this let's
6525
05:13:33,780 --> 05:13:37,020
now close everything I'm going to close
6526
05:13:37,020 --> 05:13:40,020
all the tabs I have opened and now let's
6527
05:13:40,020 --> 05:13:41,458
open
6528
05:13:41,458 --> 05:13:42,958
order
6529
05:13:42,958 --> 05:13:45,480
controller
6530
05:13:45,480 --> 05:13:47,638
and create
6531
05:13:47,638 --> 05:13:50,160
function View
6532
05:13:50,160 --> 05:13:54,360
where we will get order right here
6533
05:13:54,360 --> 05:13:59,480
and we have to render return view order
6534
05:13:59,480 --> 05:14:03,540
Dot View and we're going to pass
6535
05:14:03,540 --> 05:14:05,820
order
6536
05:14:05,820 --> 05:14:09,540
okay however we need to make sure that
6537
05:14:09,540 --> 05:14:11,940
the order belongs to the user who is
6538
05:14:11,940 --> 05:14:14,160
actually trying to
6539
05:14:14,160 --> 05:14:17,280
um trying to view the order so I'm gonna
6540
05:14:17,280 --> 05:14:18,660
get this
6541
05:14:18,660 --> 05:14:20,700
current user
6542
05:14:20,700 --> 05:14:25,638
and we can accept requests right here
6543
05:14:26,218 --> 05:14:28,560
I think we can get the current user from
6544
05:14:28,560 --> 05:14:30,600
a simple function
6545
05:14:30,600 --> 05:14:33,360
to have that function I think no okay
6546
05:14:33,360 --> 05:14:38,000
anyway so I think we have a request
6547
05:14:38,000 --> 05:14:41,700
request user so basically no need to
6548
05:14:41,700 --> 05:14:43,860
accept a request argument right here so
6549
05:14:43,860 --> 05:14:45,958
we get the user
6550
05:14:45,958 --> 05:14:47,878
and we need to make sure that the order
6551
05:14:47,878 --> 05:14:51,298
belongs to the user okay so we check if
6552
05:14:51,298 --> 05:14:53,218
the order
6553
05:14:53,218 --> 05:14:55,860
created by that can be done in the
6554
05:14:55,860 --> 05:14:57,500
middleware as well
6555
05:14:57,500 --> 05:15:02,040
but yeah I'm doing it right here so if
6556
05:15:02,040 --> 05:15:05,400
the order created by equals or let's say
6557
05:15:05,400 --> 05:15:12,378
doesn't equal to user ID then we throw
6558
05:15:12,378 --> 05:15:16,200
new forbidden
6559
05:15:16,200 --> 05:15:20,340
uh forbidden forbidden I think we don't
6560
05:15:20,340 --> 05:15:22,680
have forbidden exception do we have
6561
05:15:22,680 --> 05:15:24,718
unauthorized
6562
05:15:24,718 --> 05:15:26,820
unauthorized we do have unauthorized
6563
05:15:26,820 --> 05:15:29,100
let's go in the
6564
05:15:29,100 --> 05:15:31,440
unauthorized exception and maybe we have
6565
05:15:31,440 --> 05:15:33,180
some of them
6566
05:15:33,180 --> 05:15:35,458
exceptions here as well
6567
05:15:35,458 --> 05:15:38,520
exception we have validation exception
6568
05:15:38,520 --> 05:15:41,718
and basically that's it we don't have
6569
05:15:41,718 --> 05:15:45,180
forbidden exception
6570
05:15:45,180 --> 05:15:48,420
well let me actually return
6571
05:15:48,420 --> 05:15:52,680
in this case return response
6572
05:15:53,540 --> 05:15:59,520
response with message you don't have
6573
05:15:59,520 --> 05:16:00,298
um
6574
05:16:00,298 --> 05:16:04,440
let's put this in double quotation marks
6575
05:16:04,440 --> 05:16:08,218
you don't have permission to view this
6576
05:16:08,218 --> 05:16:10,040
order
6577
05:16:10,040 --> 05:16:12,000
and
6578
05:16:12,000 --> 05:16:15,900
we're gonna pass 403 or maybe we need to
6579
05:16:15,900 --> 05:16:18,718
render a page which is specifically for
6580
05:16:18,718 --> 05:16:20,700
this for Simplicity I'm going to do it
6581
05:16:20,700 --> 05:16:23,400
like this because there's a basically
6582
05:16:23,400 --> 05:16:26,280
case when someone is trying something
6583
05:16:26,280 --> 05:16:28,920
illegal or something which is not
6584
05:16:28,920 --> 05:16:30,360
actually possible from the user
6585
05:16:30,360 --> 05:16:32,638
interface okay
6586
05:16:32,638 --> 05:16:34,920
so in another case we will render the
6587
05:16:34,920 --> 05:16:38,660
order so let's now open order slash view
6588
05:16:38,660 --> 05:16:42,718
blade and let's delete this and now I'm
6589
05:16:42,718 --> 05:16:45,840
going to open vs code and open order
6590
05:16:45,840 --> 05:16:47,520
Details page
6591
05:16:47,520 --> 05:16:49,560
and let's copy
6592
05:16:49,560 --> 05:16:52,260
this container and put this right here
6593
05:16:52,260 --> 05:16:54,718
let's format the code and have a look in
6594
05:16:54,718 --> 05:16:56,900
the browser
6595
05:16:56,900 --> 05:17:00,480
let's reload the page
6596
05:17:00,480 --> 05:17:03,298
okay it doesn't seem to be linked
6597
05:17:03,298 --> 05:17:05,520
properly let's open
6598
05:17:05,520 --> 05:17:08,638
let's open index blade as well
6599
05:17:08,638 --> 05:17:12,180
and let's see we should have wrote order
6600
05:17:12,180 --> 05:17:15,980
view we're passing order now let's open
6601
05:17:15,980 --> 05:17:18,840
web.php and see
6602
05:17:18,840 --> 05:17:23,600
we have order right here and the order
6603
05:17:23,760 --> 05:17:26,040
uh sorry
6604
05:17:26,040 --> 05:17:29,100
okay this is how it should be
6605
05:17:29,100 --> 05:17:32,160
okay orders and maybe we can specify
6606
05:17:32,160 --> 05:17:35,340
URL like this so if I just reload the
6607
05:17:35,340 --> 05:17:36,958
page
6608
05:17:36,958 --> 05:17:39,298
now we see URLs look correct in the
6609
05:17:39,298 --> 05:17:40,980
bottom left corner of the screen so I'm
6610
05:17:40,980 --> 05:17:42,958
going to click the first one and it's
6611
05:17:42,958 --> 05:17:45,660
going to open the order view page and we
6612
05:17:45,660 --> 05:17:47,940
have to implement this so if we go right
6613
05:17:47,940 --> 05:17:50,580
here uh the title which is called my
6614
05:17:50,580 --> 05:17:53,540
orders that should be order number
6615
05:17:53,540 --> 05:17:57,420
whatever is order ID
6616
05:17:57,420 --> 05:17:59,760
then we have order number right here as
6617
05:17:59,760 --> 05:18:00,718
well
6618
05:18:00,718 --> 05:18:02,700
order ID
6619
05:18:02,700 --> 05:18:06,780
order date we can specify it right here
6620
05:18:06,780 --> 05:18:10,500
order created it
6621
05:18:10,500 --> 05:18:14,940
order status let's
6622
05:18:15,000 --> 05:18:19,500
format HTML nicely and for the order
6623
05:18:19,500 --> 05:18:22,080
status we're going to have
6624
05:18:22,080 --> 05:18:24,900
order a status
6625
05:18:24,900 --> 05:18:29,400
however we have to change this as well
6626
05:18:29,400 --> 05:18:31,560
so we have to add a conditional classes
6627
05:18:31,560 --> 05:18:34,378
right here if the order
6628
05:18:34,378 --> 05:18:36,840
is paid
6629
05:18:36,840 --> 05:18:39,620
then we're going to have a class BG
6630
05:18:39,620 --> 05:18:41,600
Emerald
6631
05:18:41,600 --> 05:18:45,420
500 maybe otherwise we're going to have
6632
05:18:45,420 --> 05:18:49,080
PG gray 400
6633
05:18:49,080 --> 05:18:52,560
uh that's fine subtotal let's
6634
05:18:52,560 --> 05:18:54,120
output
6635
05:18:54,120 --> 05:18:56,360
order
6636
05:18:56,360 --> 05:18:59,400
amount I think it's called amount we're
6637
05:18:59,400 --> 05:19:02,218
going to fix if something if we have a
6638
05:19:02,218 --> 05:19:05,540
typo so let's just reload the page
6639
05:19:05,540 --> 05:19:08,040
and what happens
6640
05:19:08,040 --> 05:19:10,378
okay this is what happens
6641
05:19:10,378 --> 05:19:13,440
subtotal order amount okay it seems like
6642
05:19:13,440 --> 05:19:15,900
the order doesn't have amount it's
6643
05:19:15,900 --> 05:19:20,760
called total price okay total price
6644
05:19:20,760 --> 05:19:24,958
now we reload and we see total price we
6645
05:19:24,958 --> 05:19:27,718
see order status we see order number as
6646
05:19:27,718 --> 05:19:29,040
well
6647
05:19:29,040 --> 05:19:32,340
and now let's render order items
6648
05:19:32,340 --> 05:19:33,360
so
6649
05:19:33,360 --> 05:19:36,240
cart item that should not be card item
6650
05:19:36,240 --> 05:19:38,160
that should be an order item
6651
05:19:38,160 --> 05:19:43,080
uh okay let me remove all of them except
6652
05:19:43,080 --> 05:19:45,060
only one
6653
05:19:45,060 --> 05:19:50,120
and let's put this in a 4-H
6654
05:19:50,120 --> 05:19:52,320
for each
6655
05:19:52,320 --> 05:19:57,298
order items is item
6656
05:19:57,298 --> 05:20:00,138
lowercase
6657
05:20:01,200 --> 05:20:05,040
Oops why do I need dollar sign here
6658
05:20:05,040 --> 05:20:08,760
then we have end for each and let's put
6659
05:20:08,760 --> 05:20:10,440
this right here
6660
05:20:10,440 --> 05:20:17,040
okay so we need to Output the item
6661
05:20:17,218 --> 05:20:20,280
item product
6662
05:20:20,280 --> 05:20:22,320
image
6663
05:20:22,320 --> 05:20:25,378
I think product has image right
6664
05:20:25,378 --> 05:20:29,218
or image URL it's an image okay then
6665
05:20:29,218 --> 05:20:31,378
right here we have product title
6666
05:20:31,378 --> 05:20:33,480
that is item
6667
05:20:33,480 --> 05:20:35,040
product
6668
05:20:35,040 --> 05:20:36,540
title
6669
05:20:36,540 --> 05:20:39,060
and then we have price the price should
6670
05:20:39,060 --> 05:20:40,980
come from
6671
05:20:40,980 --> 05:20:43,080
uh item
6672
05:20:43,080 --> 05:20:47,600
I think it's called unit price
6673
05:20:47,638 --> 05:20:50,580
and then quantity it should come from
6674
05:20:50,580 --> 05:20:52,680
item
6675
05:20:52,680 --> 05:20:55,280
um 150.
6676
05:20:55,280 --> 05:20:59,878
and then we have remove why do we have
6677
05:20:59,878 --> 05:21:02,280
remove right here I don't know there's a
6678
05:21:02,280 --> 05:21:03,660
mistake
6679
05:21:03,660 --> 05:21:06,298
we shouldn't have removed
6680
05:21:06,298 --> 05:21:09,060
it was cart item probably in that that's
6681
05:21:09,060 --> 05:21:13,100
why we hit remove it is for the right
6682
05:21:15,120 --> 05:21:18,660
okay if we just reload the page
6683
05:21:18,660 --> 05:21:20,160
we see
6684
05:21:20,160 --> 05:21:22,378
the items
6685
05:21:22,378 --> 05:21:25,020
that's fine however the image is
6686
05:21:25,020 --> 05:21:27,000
um straight not stretched but image
6687
05:21:27,000 --> 05:21:30,240
takes huge amount of hate so we have to
6688
05:21:30,240 --> 05:21:31,400
do something
6689
05:21:31,400 --> 05:21:35,638
uh like we have in the cart
6690
05:21:35,638 --> 05:21:38,940
like this so if we now open
6691
05:21:38,940 --> 05:21:42,840
a cart blade
6692
05:21:42,840 --> 05:21:46,020
and look for the product item how image
6693
05:21:46,020 --> 05:21:48,420
is rendered
6694
05:21:48,420 --> 05:21:51,180
we see that this is
6695
05:21:51,180 --> 05:21:53,280
the image
6696
05:21:53,280 --> 05:21:55,680
section so
6697
05:21:55,680 --> 05:21:58,980
let's put this right here for the image
6698
05:21:58,980 --> 05:22:02,700
URL this is how it should be and remove
6699
05:22:02,700 --> 05:22:05,700
colon because that column is using uh
6700
05:22:05,700 --> 05:22:07,798
uses alpine.js
6701
05:22:07,798 --> 05:22:11,638
and we can change this in to link to an
6702
05:22:11,638 --> 05:22:13,560
actual product page which is also fine
6703
05:22:13,560 --> 05:22:16,860
so we can specify root right here we're
6704
05:22:16,860 --> 05:22:20,218
going to specify product Dot View and
6705
05:22:20,218 --> 05:22:22,080
provide item
6706
05:22:22,080 --> 05:22:23,820
product
6707
05:22:23,820 --> 05:22:28,080
and let's delete this and have a look so
6708
05:22:28,080 --> 05:22:30,660
go my orders and click on the first one
6709
05:22:30,660 --> 05:22:34,620
and okay this is how it looks like and
6710
05:22:34,620 --> 05:22:36,240
we have everything like we have the
6711
05:22:36,240 --> 05:22:39,840
title and we have the price however
6712
05:22:39,840 --> 05:22:43,320
um I think I'm gonna move the price down
6713
05:22:43,320 --> 05:22:47,040
next to quantity Maybe
6714
05:22:47,040 --> 05:22:49,740
it's like just if I justify between I
6715
05:22:49,740 --> 05:22:53,480
think that's that's much better
6716
05:22:54,360 --> 05:22:57,660
okay let's go back and let's actually go
6717
05:22:57,660 --> 05:23:02,160
to my orders and view another one
6718
05:23:02,160 --> 05:23:04,680
okay fine
6719
05:23:04,680 --> 05:23:08,638
another one which is also fine
6720
05:23:08,638 --> 05:23:12,180
okay so we have implemented
6721
05:23:12,180 --> 05:23:14,100
um we have implemented the order view
6722
05:23:14,100 --> 05:23:16,100
page however
6723
05:23:16,100 --> 05:23:18,680
this make a payment button should be
6724
05:23:18,680 --> 05:23:21,958
disabled or maybe not even visible if
6725
05:23:21,958 --> 05:23:24,060
the order is actually paid but if not
6726
05:23:24,060 --> 05:23:27,298
paid that should do the same thing as
6727
05:23:27,298 --> 05:23:31,138
the payment button from here so let's
6728
05:23:31,138 --> 05:23:34,378
open let's close cart index blade and
6729
05:23:34,378 --> 05:23:38,340
open order index plate and find the this
6730
05:23:38,340 --> 05:23:39,660
portion
6731
05:23:39,660 --> 05:23:42,718
okay if the order is paid so let's go
6732
05:23:42,718 --> 05:23:44,940
right here and I'm going to paste this
6733
05:23:44,940 --> 05:23:48,360
and let's now copy this button make a
6734
05:23:48,360 --> 05:23:51,360
payment button let's format the code
6735
05:23:51,360 --> 05:23:56,040
and if the order is not paid we send we
6736
05:23:56,040 --> 05:23:58,500
create a form with the cart checkout
6737
05:23:58,500 --> 05:24:00,798
order
6738
05:24:01,378 --> 05:24:04,440
I think that's it and then
6739
05:24:04,440 --> 05:24:08,840
we should replace this button
6740
05:24:10,740 --> 05:24:13,860
we can leave the icon I think
6741
05:24:13,860 --> 05:24:16,138
make a payment
6742
05:24:16,138 --> 05:24:20,218
however let's leave the icon this SVG
6743
05:24:20,218 --> 05:24:22,638
icon
6744
05:24:23,400 --> 05:24:25,080
let's put this right here
6745
05:24:25,080 --> 05:24:26,280
okay
6746
05:24:26,280 --> 05:24:27,718
let's see
6747
05:24:27,718 --> 05:24:29,638
reload the page
6748
05:24:29,638 --> 05:24:31,920
okay let's comment out to see the button
6749
05:24:31,920 --> 05:24:34,080
first
6750
05:24:34,080 --> 05:24:37,200
okay make a payment is looking ugly that
6751
05:24:37,200 --> 05:24:38,480
should be Flex
6752
05:24:38,480 --> 05:24:41,600
items Center
6753
05:24:41,600 --> 05:24:47,940
and here we go justify Center as well
6754
05:24:47,940 --> 05:24:50,580
make a payment perfect
6755
05:24:50,580 --> 05:24:52,560
now we can
6756
05:24:52,560 --> 05:24:56,340
we can recover this if statement if
6757
05:24:56,340 --> 05:24:58,138
order is paid
6758
05:24:58,138 --> 05:25:01,860
right here and down below we need end
6759
05:25:01,860 --> 05:25:04,638
if
6760
05:25:04,740 --> 05:25:07,020
okay now let's create one more order
6761
05:25:07,020 --> 05:25:10,980
let's add few items in the cart let's
6762
05:25:10,980 --> 05:25:14,940
check out let's see to checkout
6763
05:25:14,940 --> 05:25:17,520
okay we the order was created at this
6764
05:25:17,520 --> 05:25:20,040
moment so now let's open localhost 8000
6765
05:25:20,040 --> 05:25:22,560
I'm going to go into my orders and we
6766
05:25:22,560 --> 05:25:24,660
see unpaid order let's by the way sort
6767
05:25:24,660 --> 05:25:26,820
the orders the reasons to be at the top
6768
05:25:26,820 --> 05:25:31,260
so if you open now order controller and
6769
05:25:31,260 --> 05:25:33,540
see
6770
05:25:33,540 --> 05:25:36,780
um we're let's put right here Order
6771
05:25:36,780 --> 05:25:38,760
by
6772
05:25:38,760 --> 05:25:42,540
order by created it
6773
05:25:42,540 --> 05:25:45,840
uh descending
6774
05:25:45,840 --> 05:25:48,360
okay reload the page we see latest at
6775
05:25:48,360 --> 05:25:51,840
the top uh however we don't also see the
6776
05:25:51,840 --> 05:25:55,680
pagination let's move this format this
6777
05:25:55,680 --> 05:25:59,700
nicely let's give it pagination five now
6778
05:25:59,700 --> 05:26:01,260
we don't see the buttons so we have to
6779
05:26:01,260 --> 05:26:02,940
implement the buttons as well just like
6780
05:26:02,940 --> 05:26:05,458
we have in the uh in the product index
6781
05:26:05,458 --> 05:26:07,980
so I think
6782
05:26:07,980 --> 05:26:11,160
if we go in the index
6783
05:26:11,160 --> 05:26:13,080
um
6784
05:26:13,080 --> 05:26:15,780
maybe after the table
6785
05:26:15,780 --> 05:26:18,298
we have a table
6786
05:26:18,298 --> 05:26:21,780
and inside it should be inside
6787
05:26:21,780 --> 05:26:23,340
um no it should be outside of the video
6788
05:26:23,340 --> 05:26:25,680
white I think it will be nicer so we're
6789
05:26:25,680 --> 05:26:28,378
going to have uh orders I think it's
6790
05:26:28,378 --> 05:26:31,620
called links not sure let's see
6791
05:26:31,620 --> 05:26:34,980
yeah we see these links and let's put
6792
05:26:34,980 --> 05:26:37,260
this in zone div and give it class
6793
05:26:37,260 --> 05:26:41,600
margin top like three
6794
05:26:42,540 --> 05:26:45,298
okay here we see that the first page
6795
05:26:45,298 --> 05:26:49,080
second page third page and let's display
6796
05:26:49,080 --> 05:26:52,860
only 10
6797
05:26:53,218 --> 05:26:56,100
10 at a time
6798
05:26:56,100 --> 05:26:59,340
okay go to the first page we have 10
6799
05:26:59,340 --> 05:27:02,638
items and we see this pay button here as
6800
05:27:02,638 --> 05:27:03,780
well
6801
05:27:03,780 --> 05:27:07,440
uh however the button is not that nice
6802
05:27:07,440 --> 05:27:10,080
and the viewing invoice button also has
6803
05:27:10,080 --> 05:27:12,540
some Styles missing we go in the orders
6804
05:27:12,540 --> 05:27:14,878
view invoice looks like this
6805
05:27:14,878 --> 05:27:18,600
so now let's go in the index and look
6806
05:27:18,600 --> 05:27:22,378
for view invoice not sure if we need
6807
05:27:22,378 --> 05:27:26,100
this because the invoice is kind of um
6808
05:27:26,100 --> 05:27:28,740
form it's kind of document to prove that
6809
05:27:28,740 --> 05:27:31,020
you made an order and you should be able
6810
05:27:31,020 --> 05:27:34,080
to print that however this is something
6811
05:27:34,080 --> 05:27:37,320
that is a proof and if that's that is
6812
05:27:37,320 --> 05:27:40,378
printable that's going to be fine okay
6813
05:27:40,378 --> 05:27:43,798
so I'm going to remove this view invoice
6814
05:27:43,798 --> 05:27:46,218
at the moment and
6815
05:27:46,218 --> 05:27:49,280
leave it
6816
05:27:49,280 --> 05:27:53,298
leave it like this
6817
05:27:54,360 --> 05:27:57,180
okay so we have the date we have status
6818
05:27:57,180 --> 05:27:59,820
we have subtotal
6819
05:27:59,820 --> 05:28:00,600
um
6820
05:28:00,600 --> 05:28:02,760
and yeah well the only thing we can add
6821
05:28:02,760 --> 05:28:07,020
here is maybe number of items
6822
05:28:07,020 --> 05:28:07,740
um
6823
05:28:07,740 --> 05:28:09,180
items
6824
05:28:09,180 --> 05:28:13,820
after subtotal so we collapse this TD
6825
05:28:13,820 --> 05:28:17,340
second uh this is status this is
6826
05:28:17,340 --> 05:28:18,980
subtotal and
6827
05:28:18,980 --> 05:28:21,660
maybe items
6828
05:28:21,660 --> 05:28:24,420
and then we call count how many items
6829
05:28:24,420 --> 05:28:26,160
the order has
6830
05:28:26,160 --> 05:28:30,298
so end dollar is not necessary here
6831
05:28:30,298 --> 05:28:34,580
and we can specify text here
6832
05:28:35,100 --> 05:28:37,638
okay
6833
05:28:38,580 --> 05:28:40,638
this should have um
6834
05:28:40,638 --> 05:28:45,540
text no wrap I want no wrap
6835
05:28:45,540 --> 05:28:48,860
white space no wrap
6836
05:28:49,320 --> 05:28:52,080
however the action has fixed width which
6837
05:28:52,080 --> 05:28:54,420
I want to reduce
6838
05:28:54,420 --> 05:28:56,878
no that's much better
6839
05:28:56,878 --> 05:29:00,600
so we have like three items two one item
6840
05:29:00,600 --> 05:29:03,958
one item and so on
6841
05:29:03,958 --> 05:29:05,100
okay
6842
05:29:05,100 --> 05:29:09,718
fine so we have now orders page and we
6843
05:29:09,718 --> 05:29:11,760
um we have to
6844
05:29:11,760 --> 05:29:14,400
this one works however I'm going to
6845
05:29:14,400 --> 05:29:17,520
slightly increase the button
6846
05:29:17,520 --> 05:29:19,860
slightly the vertical padding of the
6847
05:29:19,860 --> 05:29:20,940
button
6848
05:29:20,940 --> 05:29:23,820
uh yeah that's much better
6849
05:29:23,820 --> 05:29:26,760
and if we go inside we need to test if
6850
05:29:26,760 --> 05:29:28,680
this make a payment button also works so
6851
05:29:28,680 --> 05:29:30,780
I'm going to click on that and we are
6852
05:29:30,780 --> 05:29:33,540
redirected right here let's fill up the
6853
05:29:33,540 --> 05:29:34,740
form
6854
05:29:34,740 --> 05:29:39,000
let's click on pane and and your order
6855
05:29:39,000 --> 05:29:41,878
has been completed and here is my orders
6856
05:29:41,878 --> 05:29:43,560
as well
6857
05:29:43,560 --> 05:29:46,260
which is by the way which is by the way
6858
05:29:46,260 --> 05:29:50,400
unpaid and you know why because I have
6859
05:29:50,400 --> 05:29:54,718
stopped the stripe CLI in the web hook
6860
05:29:54,718 --> 05:29:57,120
uh was not sent
6861
05:29:57,120 --> 05:30:01,798
however the redirect worked so so it
6862
05:30:01,798 --> 05:30:04,440
should have marked this as completed so
6863
05:30:04,440 --> 05:30:07,680
we probably have a small error in the
6864
05:30:07,680 --> 05:30:10,440
checkout controller
6865
05:30:10,440 --> 05:30:13,080
again testing testing takes a huge
6866
05:30:13,080 --> 05:30:15,180
amount of time building your production
6867
05:30:15,180 --> 05:30:18,138
ready application
6868
05:30:18,360 --> 05:30:23,160
so we should be checking success
6869
05:30:23,160 --> 05:30:25,680
excuse me so right here we get the
6870
05:30:25,680 --> 05:30:28,260
session we select the payment
6871
05:30:28,260 --> 05:30:31,920
and I think the payment will be pending
6872
05:30:31,920 --> 05:30:34,378
right so we select pending
6873
05:30:34,378 --> 05:30:37,500
we are in pending or paid if the payment
6874
05:30:37,500 --> 05:30:39,900
doesn't exist we show not found
6875
05:30:39,900 --> 05:30:43,138
if the payment equals pending we update
6876
05:30:43,138 --> 05:30:47,900
order and session for the payment
6877
05:30:49,080 --> 05:30:52,740
okay paid and paid
6878
05:30:52,740 --> 05:30:56,060
and then we show success so
6879
05:30:56,060 --> 05:30:59,520
this should have updated
6880
05:30:59,520 --> 05:31:03,138
this should have updated the payment
6881
05:31:06,420 --> 05:31:07,620
okay
6882
05:31:07,620 --> 05:31:11,298
we don't know why it didn't work
6883
05:31:11,340 --> 05:31:14,400
let's dump
6884
05:31:14,400 --> 05:31:16,680
I'm going to dump the payment
6885
05:31:16,680 --> 05:31:19,620
if that's available so let's click on
6886
05:31:19,620 --> 05:31:22,458
pay from here
6887
05:31:24,660 --> 05:31:28,340
okay we have the payment
6888
05:31:28,378 --> 05:31:31,080
in status is pending
6889
05:31:31,080 --> 05:31:33,958
so it should come right here
6890
05:31:33,958 --> 05:31:37,680
let's put this here
6891
05:31:37,680 --> 05:31:40,700
reload the page
6892
05:31:41,160 --> 05:31:43,200
we see your order has been completed
6893
05:31:43,200 --> 05:31:45,180
because probably the if wasn't satisfied
6894
05:31:45,180 --> 05:31:48,060
probably because I don't use right here
6895
05:31:48,060 --> 05:31:49,560
value
6896
05:31:49,560 --> 05:31:51,298
okay I think that's the reason so
6897
05:31:51,298 --> 05:31:55,980
basically comparing a status to
6898
05:31:55,980 --> 05:31:59,120
payments such as pending which is an num
6899
05:31:59,120 --> 05:32:02,400
NM value simply will not kind of work
6900
05:32:02,400 --> 05:32:04,440
especially when when you compare with
6901
05:32:04,440 --> 05:32:05,878
two
6902
05:32:05,878 --> 05:32:10,980
uh with three quality basically so
6903
05:32:10,980 --> 05:32:13,440
if I do this with two equal sign
6904
05:32:13,440 --> 05:32:15,420
probably it might work no it's not going
6905
05:32:15,420 --> 05:32:17,700
to work so I'm going to specify right
6906
05:32:17,700 --> 05:32:21,120
here value in this case this if we'll be
6907
05:32:21,120 --> 05:32:23,060
satisfied and we should see payment
6908
05:32:23,060 --> 05:32:25,500
right here
6909
05:32:25,500 --> 05:32:28,080
here we go and now it's marked as
6910
05:32:28,080 --> 05:32:30,000
completed actually marked as completed
6911
05:32:30,000 --> 05:32:31,980
and we should be able to see in the
6912
05:32:31,980 --> 05:32:35,580
database as well and if we go into my
6913
05:32:35,580 --> 05:32:39,060
orders page we should see it marked as
6914
05:32:39,060 --> 05:32:40,920
completed here as well
6915
05:32:40,920 --> 05:32:43,080
all right fantastic
6916
05:32:43,080 --> 05:32:45,000
in this section we have implemented
6917
05:32:45,000 --> 05:32:48,718
outputting all orders in the admin this
6918
05:32:48,718 --> 05:32:51,420
table looks amazing in my opinion so the
6919
05:32:51,420 --> 05:32:54,240
statuses have nice colors and
6920
05:32:54,240 --> 05:32:57,060
um I generally uh I am not strong in
6921
05:32:57,060 --> 05:32:59,160
design but this is something I I
6922
05:32:59,160 --> 05:33:01,740
personally actually liked so we have um
6923
05:33:01,740 --> 05:33:04,138
the orders inner page as well from which
6924
05:33:04,138 --> 05:33:06,540
we have possibility to change the order
6925
05:33:06,540 --> 05:33:10,260
details status I think the UI of these
6926
05:33:10,260 --> 05:33:12,180
Details page is not that nice and I'm
6927
05:33:12,180 --> 05:33:13,920
going to work on this UI in the future
6928
05:33:13,920 --> 05:33:17,580
and make it more like better basically
6929
05:33:17,580 --> 05:33:20,040
in terms of UI so whenever this status
6930
05:33:20,040 --> 05:33:23,400
is changed right here the customer of
6931
05:33:23,400 --> 05:33:25,680
this order will receive an email that
6932
05:33:25,680 --> 05:33:27,480
his order status was actually changed
6933
05:33:27,480 --> 05:33:29,458
let's see everything basically that has
6934
05:33:29,458 --> 05:33:33,060
been changed so far so we created order
6935
05:33:33,060 --> 05:33:35,760
controller for the API and that is done
6936
05:33:35,760 --> 05:33:38,400
inside the API folder and it has a
6937
05:33:38,400 --> 05:33:40,138
couple of methods like to get the order
6938
05:33:40,138 --> 05:33:41,400
details
6939
05:33:41,400 --> 05:33:44,580
um is it get the all orders as a list
6940
05:33:44,580 --> 05:33:47,340
get specific order get the orders
6941
05:33:47,340 --> 05:33:50,878
tattooses which are basically values of
6942
05:33:50,878 --> 05:33:53,520
NM and we have change status as well
6943
05:33:53,520 --> 05:33:56,400
inside which we are using the
6944
05:33:56,400 --> 05:34:00,540
um updates order email class for email
6945
05:34:00,540 --> 05:34:02,700
sending basically so that's the order
6946
05:34:02,700 --> 05:34:05,218
controller we have the order list
6947
05:34:05,218 --> 05:34:07,200
resource we have created order list
6948
05:34:07,200 --> 05:34:09,240
resource which Returns the following
6949
05:34:09,240 --> 05:34:10,740
information which is displayed in the
6950
05:34:10,740 --> 05:34:13,320
table and we have created order resource
6951
05:34:13,320 --> 05:34:16,020
that is a massive resource it has the
6952
05:34:16,020 --> 05:34:18,780
order items inside there each item has
6953
05:34:18,780 --> 05:34:20,820
product details there we have the
6954
05:34:20,820 --> 05:34:23,160
customer with this shipping and billing
6955
05:34:23,160 --> 05:34:25,980
addresses inside this order resource and
6956
05:34:25,980 --> 05:34:28,740
we have two classes New Order email and
6957
05:34:28,740 --> 05:34:31,680
update order email so New Order email is
6958
05:34:31,680 --> 05:34:34,620
sent to the customer as well as to the
6959
05:34:34,620 --> 05:34:37,320
admin user that the new order has been
6960
05:34:37,320 --> 05:34:40,200
made that information is necessary for
6961
05:34:40,200 --> 05:34:42,660
both admin receives basically that hey
6962
05:34:42,660 --> 05:34:44,400
new order has been made and you need to
6963
05:34:44,400 --> 05:34:46,260
take care of this order and the customer
6964
05:34:46,260 --> 05:34:48,660
receives a new email that hey you you
6965
05:34:48,660 --> 05:34:50,878
have just made an order and here is your
6966
05:34:50,878 --> 05:34:54,298
order details okay so this is the this
6967
05:34:54,298 --> 05:34:57,180
is very simple available class and it
6968
05:34:57,180 --> 05:34:58,920
has right here New Order subject and
6969
05:34:58,920 --> 05:35:00,600
view we're going to have a look at the
6970
05:35:00,600 --> 05:35:02,340
views as well so we have order update
6971
05:35:02,340 --> 05:35:05,218
the same type and let's have a look
6972
05:35:05,218 --> 05:35:08,160
first the mailable views so we have
6973
05:35:08,160 --> 05:35:11,400
right here tables that these are just um
6974
05:35:11,400 --> 05:35:15,180
not nice user interface basically for
6975
05:35:15,180 --> 05:35:19,138
email sending we have links also to the
6976
05:35:19,138 --> 05:35:22,860
order Details page for admin if the the
6977
05:35:22,860 --> 05:35:24,600
same view basically is used for admin
6978
05:35:24,600 --> 05:35:26,340
for the customer when the New Order is
6979
05:35:26,340 --> 05:35:29,638
made and if the this view is for admin
6980
05:35:29,638 --> 05:35:31,860
we are passing a variable if the user is
6981
05:35:31,860 --> 05:35:34,260
for admin we are rendering the backend
6982
05:35:34,260 --> 05:35:38,520
URL for the for the view link and in
6983
05:35:38,520 --> 05:35:41,520
else case we render the front-end URL
6984
05:35:41,520 --> 05:35:45,360
for the order Details page okay and the
6985
05:35:45,360 --> 05:35:48,480
similar view is this update order we
6986
05:35:48,480 --> 05:35:51,540
just give the user information that your
6987
05:35:51,540 --> 05:35:53,458
order is has been updated this is the
6988
05:35:53,458 --> 05:35:55,680
new order status and this is a link to
6989
05:35:55,680 --> 05:35:57,540
the order which was basically updated
6990
05:35:57,540 --> 05:36:00,958
and on the front hand side we created a
6991
05:36:00,958 --> 05:36:04,680
similar view views basically we have for
6992
05:36:04,680 --> 05:36:07,020
the products we created the orders view
6993
05:36:07,020 --> 05:36:09,420
component which has inside the orders
6994
05:36:09,420 --> 05:36:12,840
table the orders table basically has the
6995
05:36:12,840 --> 05:36:16,020
pagination there and the table header
6996
05:36:16,020 --> 05:36:18,420
cell which is uh which is the common one
6997
05:36:18,420 --> 05:36:21,540
for sorting and we also have a search
6998
05:36:21,540 --> 05:36:24,360
right there and we have order statuses
6999
05:36:24,360 --> 05:36:26,580
component as well or the status
7000
05:36:26,580 --> 05:36:28,860
component basically as well and that
7001
05:36:28,860 --> 05:36:31,260
order status reusable component is used
7002
05:36:31,260 --> 05:36:35,280
right here as well as in the list of the
7003
05:36:35,280 --> 05:36:37,860
orders right here okay
7004
05:36:37,860 --> 05:36:40,260
and we have created that reusable
7005
05:36:40,260 --> 05:36:43,860
component and that is basically all we
7006
05:36:43,860 --> 05:36:46,980
made in this uh in this section so we
7007
05:36:46,980 --> 05:36:49,378
inside the order statuses we added uh
7008
05:36:49,378 --> 05:36:51,000
three more sentences canceled and
7009
05:36:51,000 --> 05:36:53,160
shipped and completed and we added this
7010
05:36:53,160 --> 05:36:55,138
method which returns all the statuses
7011
05:36:55,138 --> 05:36:57,540
okay that is all that has been made in
7012
05:36:57,540 --> 05:36:59,458
this particular section again I cannot
7013
05:36:59,458 --> 05:37:01,860
explain everything line by line uh this
7014
05:37:01,860 --> 05:37:04,260
is going to take the huge time of course
7015
05:37:04,260 --> 05:37:07,080
and if you're interested to see the full
7016
05:37:07,080 --> 05:37:09,480
process of this particular section check
7017
05:37:09,480 --> 05:37:12,500
uh the full course on my website
7018
05:37:12,500 --> 05:37:15,420
thecodeholic.com all right let's move on
7019
05:37:15,420 --> 05:37:18,020
the next section
7020
05:37:18,600 --> 05:37:21,120
in this section we have implemented the
7021
05:37:21,120 --> 05:37:23,458
user management from the admin side and
7022
05:37:23,458 --> 05:37:26,160
that is for the admin users so from here
7023
05:37:26,160 --> 05:37:28,440
we now added possibility to create new
7024
05:37:28,440 --> 05:37:30,718
admin user provide its email address
7025
05:37:30,718 --> 05:37:33,780
provide the password and just like this
7026
05:37:33,780 --> 05:37:36,660
new admin user will be created and we
7027
05:37:36,660 --> 05:37:38,700
have of course possibility to edit or
7028
05:37:38,700 --> 05:37:41,040
delete existing users and that's a
7029
05:37:41,040 --> 05:37:44,218
simple user's crowd right here the one
7030
05:37:44,218 --> 05:37:47,280
small difference of the difference but
7031
05:37:47,280 --> 05:37:49,378
one small thing is that whenever a new
7032
05:37:49,378 --> 05:37:52,138
user is added from from here is admin
7033
05:37:52,138 --> 05:37:54,718
flag is added to true because the user
7034
05:37:54,718 --> 05:37:56,400
needs to be able to log in into the
7035
05:37:56,400 --> 05:37:58,138
admin interface okay let's understand
7036
05:37:58,138 --> 05:37:59,760
how this was made that's going to be
7037
05:37:59,760 --> 05:38:01,440
pretty straightforward and similar to
7038
05:38:01,440 --> 05:38:04,200
like orders or products cried so we
7039
05:38:04,200 --> 05:38:06,360
create the user controller inside the
7040
05:38:06,360 --> 05:38:09,540
API folder for at least for index store
7041
05:38:09,540 --> 05:38:12,420
update and delete methods we created
7042
05:38:12,420 --> 05:38:14,940
create user request and update user
7043
05:38:14,940 --> 05:38:17,760
request we created user resource which
7044
05:38:17,760 --> 05:38:19,980
Returns the following information we
7045
05:38:19,980 --> 05:38:21,718
actually updated the existing user
7046
05:38:21,718 --> 05:38:24,000
resource not created and just edit right
7047
05:38:24,000 --> 05:38:26,160
here created it because that's going to
7048
05:38:26,160 --> 05:38:28,860
be used right here in this table okay
7049
05:38:28,860 --> 05:38:32,160
and we created new user model that's
7050
05:38:32,160 --> 05:38:34,378
going to be under API folder which
7051
05:38:34,378 --> 05:38:37,138
simply extends to app modules user okay
7052
05:38:37,138 --> 05:38:39,120
that's that's that is generally good
7053
05:38:39,120 --> 05:38:41,638
approach to create different models for
7054
05:38:41,638 --> 05:38:44,280
API because you might need some things
7055
05:38:44,280 --> 05:38:46,860
differently for the API models and
7056
05:38:46,860 --> 05:38:48,420
that's why we created the user model
7057
05:38:48,420 --> 05:38:50,400
probably we are using in the next
7058
05:38:50,400 --> 05:38:53,580
sections of the course and we made few
7059
05:38:53,580 --> 05:38:57,780
updates in the app layout so we see that
7060
05:38:57,780 --> 05:39:01,320
we modified the get user that was a
7061
05:39:01,320 --> 05:39:03,240
action get user and that was modified
7062
05:39:03,240 --> 05:39:06,000
into get current user okay because the
7063
05:39:06,000 --> 05:39:09,480
get user might be necessary for to get
7064
05:39:09,480 --> 05:39:12,480
the the following user whichever on
7065
05:39:12,480 --> 05:39:14,760
whichever we click this edit button okay
7066
05:39:14,760 --> 05:39:17,280
so we make those changes in the actions
7067
05:39:17,280 --> 05:39:19,200
as we see we change the gate user into
7068
05:39:19,200 --> 05:39:21,240
get current user and down below we're
7069
05:39:21,240 --> 05:39:23,160
going to see that we created get users
7070
05:39:23,160 --> 05:39:24,680
action right here
7071
05:39:24,680 --> 05:39:28,680
and we have get a single user as well
7072
05:39:28,680 --> 05:39:30,420
which at the moment is not used in my
7073
05:39:30,420 --> 05:39:32,700
opinion and we have create user as well
7074
05:39:32,700 --> 05:39:35,700
and we have created update user inside
7075
05:39:35,700 --> 05:39:37,860
the actions of course the corresponding
7076
05:39:37,860 --> 05:39:40,820
mutations are added as well set users
7077
05:39:40,820 --> 05:39:44,340
and I think yeah only set users is added
7078
05:39:44,340 --> 05:39:47,340
and similar to orders and products we
7079
05:39:47,340 --> 05:39:50,040
have the users component which has users
7080
05:39:50,040 --> 05:39:52,860
table and the user model right here in
7081
05:39:52,860 --> 05:39:55,820
the user table has possibility
7082
05:39:55,820 --> 05:39:59,580
for a pagination and sorting and for
7083
05:39:59,580 --> 05:40:02,520
search as well all right and in the API
7084
05:40:02,520 --> 05:40:05,160
of course we added new root right here
7085
05:40:05,160 --> 05:40:09,298
new API resource for users from the user
7086
05:40:09,298 --> 05:40:11,820
controller okay that was all that made
7087
05:40:11,820 --> 05:40:14,700
in this particular section and the next
7088
05:40:14,700 --> 05:40:19,100
section is the customers crud
7089
05:40:19,260 --> 05:40:21,958
customers grad is very similar to users
7090
05:40:21,958 --> 05:40:25,200
but we actually I actually spent much
7091
05:40:25,200 --> 05:40:27,360
much more time working on the customer's
7092
05:40:27,360 --> 05:40:30,060
crowd than on the user's crowd because
7093
05:40:30,060 --> 05:40:33,298
the customers cried ahead one
7094
05:40:33,298 --> 05:40:35,340
um one tricky thing which we have
7095
05:40:35,340 --> 05:40:37,320
finally implemented of course so the
7096
05:40:37,320 --> 05:40:39,840
customer details form has these
7097
05:40:39,840 --> 05:40:41,820
addresses right there okay so we have
7098
05:40:41,820 --> 05:40:43,798
billing addresses and shipping addresses
7099
05:40:43,798 --> 05:40:47,760
and we implemented uh we had a custom
7100
05:40:47,760 --> 05:40:49,798
input component in the vue.js we have
7101
05:40:49,798 --> 05:40:53,940
that and we added this support for the
7102
05:40:53,940 --> 05:40:56,298
select as well as we implemented this
7103
05:40:56,298 --> 05:40:59,820
possibility to have right here either
7104
05:40:59,820 --> 05:41:03,600
text field or select and that believe me
7105
05:41:03,600 --> 05:41:06,120
uh the the section is really interesting
7106
05:41:06,120 --> 05:41:08,580
the the whole section I think it's also
7107
05:41:08,580 --> 05:41:10,620
two hours I planned it to be actually
7108
05:41:10,620 --> 05:41:13,860
like a half an hour maximum because uh
7109
05:41:13,860 --> 05:41:16,680
it was very similar to the users but it
7110
05:41:16,680 --> 05:41:18,660
took some time and if we have a look in
7111
05:41:18,660 --> 05:41:20,160
the source code you you will know that
7112
05:41:20,160 --> 05:41:22,458
so the customer's controller is
7113
05:41:22,458 --> 05:41:25,920
like similar to user's controller but in
7114
05:41:25,920 --> 05:41:28,080
this case we consider if we go in the
7115
05:41:28,080 --> 05:41:30,540
update we consider the addresses as well
7116
05:41:30,540 --> 05:41:32,280
okay and that makes things a little bit
7117
05:41:32,280 --> 05:41:35,760
challenging and we are we are also
7118
05:41:35,760 --> 05:41:37,440
returning from the customer's control
7119
05:41:37,440 --> 05:41:40,440
controller all the countries we have
7120
05:41:40,440 --> 05:41:42,420
because we need the countries drop down
7121
05:41:42,420 --> 05:41:44,520
and the data is received from the back
7122
05:41:44,520 --> 05:41:45,780
end of course
7123
05:41:45,780 --> 05:41:48,718
okay so let's let's see the next section
7124
05:41:48,718 --> 05:41:50,638
so we change the authenticated session
7125
05:41:50,638 --> 05:41:53,458
controller as well and
7126
05:41:53,458 --> 05:41:54,480
um
7127
05:41:54,480 --> 05:41:57,060
okay so this this is unnecessary the
7128
05:41:57,060 --> 05:41:59,280
customer set is right here so let's keep
7129
05:41:59,280 --> 05:42:03,958
that uh in the login request however we
7130
05:42:03,958 --> 05:42:05,820
made the following changes so we make
7131
05:42:05,820 --> 05:42:09,360
sure that whenever the customer I think
7132
05:42:09,360 --> 05:42:11,580
this is the authenticate yeah so
7133
05:42:11,580 --> 05:42:14,400
whenever the customer authorizes we
7134
05:42:14,400 --> 05:42:15,600
check
7135
05:42:15,600 --> 05:42:17,520
um on the website we check if the
7136
05:42:17,520 --> 05:42:20,878
customer status is active so we are low
7137
05:42:20,878 --> 05:42:22,740
if this status is not active basically
7138
05:42:22,740 --> 05:42:25,320
we log out the customer invalidate the
7139
05:42:25,320 --> 05:42:28,378
session and return the error message
7140
05:42:28,378 --> 05:42:32,040
that that your account has been disabled
7141
05:42:32,040 --> 05:42:34,440
okay so that was made in the customer
7142
05:42:34,440 --> 05:42:37,200
request we have all the validation for
7143
05:42:37,200 --> 05:42:39,180
the customer Fields as well as for the
7144
05:42:39,180 --> 05:42:41,520
addresses we have kind we have created
7145
05:42:41,520 --> 05:42:43,920
country resource and customer list
7146
05:42:43,920 --> 05:42:47,160
resource with a few fields in the
7147
05:42:47,160 --> 05:42:49,798
customer resource with much more Fields
7148
05:42:49,798 --> 05:42:54,298
right here and inside the models we may
7149
05:42:54,298 --> 05:42:57,120
just made changes we had has one right
7150
05:42:57,120 --> 05:42:59,160
here but we changed it into correct
7151
05:42:59,160 --> 05:43:03,180
approach uh to using belongs to and
7152
05:43:03,180 --> 05:43:05,040
let's scroll down below and in the
7153
05:43:05,040 --> 05:43:07,798
customers I want to open the customers
7154
05:43:07,798 --> 05:43:10,500
model okay so that was challenging
7155
05:43:10,500 --> 05:43:12,840
actually tricky and challenging so we
7156
05:43:12,840 --> 05:43:15,240
have right here all the inputs so this
7157
05:43:15,240 --> 05:43:17,040
is the header and down below we have all
7158
05:43:17,040 --> 05:43:19,138
the inputs so custom inputs this is what
7159
05:43:19,138 --> 05:43:22,798
we are using and we made it so that the
7160
05:43:22,798 --> 05:43:26,160
select basically is also a custom input
7161
05:43:26,160 --> 05:43:28,440
right now so we create we improved our
7162
05:43:28,440 --> 05:43:31,378
custom input and make made it even more
7163
05:43:31,378 --> 05:43:33,900
reusable so we have select right here we
7164
05:43:33,900 --> 05:43:36,240
provide all the countries we provide of
7165
05:43:36,240 --> 05:43:38,940
course V model and now down below we
7166
05:43:38,940 --> 05:43:41,638
check if the billing country states does
7167
05:43:41,638 --> 05:43:44,700
not exist we render it as a text field
7168
05:43:44,700 --> 05:43:47,458
however if it exists we render the
7169
05:43:47,458 --> 05:43:50,160
states as a drop down and we even
7170
05:43:50,160 --> 05:43:52,798
provide the billing State options and
7171
05:43:52,798 --> 05:43:54,840
the same thing of course happens for the
7172
05:43:54,840 --> 05:43:57,298
shipping and down below we have the
7173
05:43:57,298 --> 05:44:01,440
whole logic how we basically take those
7174
05:44:01,440 --> 05:44:04,440
billing country identify the active one
7175
05:44:04,440 --> 05:44:06,718
and take out the billing States as well
7176
05:44:06,718 --> 05:44:08,340
as consider the cases when the building
7177
05:44:08,340 --> 05:44:10,860
country might not be selected the
7178
05:44:10,860 --> 05:44:12,718
response is not received from the server
7179
05:44:12,718 --> 05:44:15,718
and so that it should not throw an error
7180
05:44:15,718 --> 05:44:17,700
like I can't explain again everything
7181
05:44:17,700 --> 05:44:20,040
line by line but that was actually
7182
05:44:20,040 --> 05:44:22,980
challenging and the whole section as I
7183
05:44:22,980 --> 05:44:25,100
mentioned is about like two hours long
7184
05:44:25,100 --> 05:44:27,600
in the premium course
7185
05:44:27,600 --> 05:44:30,718
okay so and finally on submit we call
7186
05:44:30,718 --> 05:44:32,458
the action update customer and down
7187
05:44:32,458 --> 05:44:34,320
below we have the create customer okay
7188
05:44:34,320 --> 05:44:37,020
that was basically all about the
7189
05:44:37,020 --> 05:44:40,458
customer crud
7190
05:44:40,860 --> 05:44:43,500
in this section we have implemented the
7191
05:44:43,500 --> 05:44:45,540
dashboard page and the whole information
7192
05:44:45,540 --> 05:44:47,940
basically is coming from the backend so
7193
05:44:47,940 --> 05:44:50,400
we have the number of active customers
7194
05:44:50,400 --> 05:44:52,500
number of active products we have paid
7195
05:44:52,500 --> 05:44:56,340
orders the total income in the uh in the
7196
05:44:56,340 --> 05:44:58,020
whole period we have this website
7197
05:44:58,020 --> 05:45:01,080
running and we have the latest 10 orders
7198
05:45:01,080 --> 05:45:02,820
right here and we have the latest
7199
05:45:02,820 --> 05:45:05,638
customers as well down below and we also
7200
05:45:05,638 --> 05:45:09,240
have the orders by country okay so the
7201
05:45:09,240 --> 05:45:10,558
whole thing is implemented in this
7202
05:45:10,558 --> 05:45:14,878
section and we even have uh we even have
7203
05:45:14,878 --> 05:45:17,280
right here change date period drop down
7204
05:45:17,280 --> 05:45:19,440
and if we switch this into last week
7205
05:45:19,440 --> 05:45:21,600
we're going to see updated numbers right
7206
05:45:21,600 --> 05:45:24,000
there that basically nothing was uh
7207
05:45:24,000 --> 05:45:25,620
purchased in the last week let's change
7208
05:45:25,620 --> 05:45:28,440
this into last two weeks we probably see
7209
05:45:28,440 --> 05:45:30,600
something no all the orders has been
7210
05:45:30,600 --> 05:45:33,480
made in last month okay so we have this
7211
05:45:33,480 --> 05:45:36,420
date range period and let's Now
7212
05:45:36,420 --> 05:45:38,820
understand how these changes have been
7213
05:45:38,820 --> 05:45:41,520
made in the in the back end so we
7214
05:45:41,520 --> 05:45:43,558
obviously created dashboard controller
7215
05:45:43,558 --> 05:45:46,080
this section is very very interesting so
7216
05:45:46,080 --> 05:45:48,840
we created dashboard controller and we
7217
05:45:48,840 --> 05:45:51,180
have a couple of endpoints right here to
7218
05:45:51,180 --> 05:45:53,820
get all the active customers count to
7219
05:45:53,820 --> 05:45:56,218
get the active products count and this
7220
05:45:56,218 --> 05:45:59,218
count will be changed in the future and
7221
05:45:59,218 --> 05:46:01,798
added the possibility to only get to
7222
05:46:01,798 --> 05:46:03,780
those products which is published on the
7223
05:46:03,780 --> 05:46:05,940
website at the moment the published flag
7224
05:46:05,940 --> 05:46:08,280
does not exist on the product but this
7225
05:46:08,280 --> 05:46:10,798
will be added in the later sections so
7226
05:46:10,798 --> 05:46:12,540
the paid orders that's going to return
7227
05:46:12,540 --> 05:46:15,360
the all the number of paid orders and
7228
05:46:15,360 --> 05:46:17,280
down below we have the total income
7229
05:46:17,280 --> 05:46:21,298
that's going to return the sum of all
7230
05:46:21,298 --> 05:46:25,020
the total prices of the orders okay but
7231
05:46:25,020 --> 05:46:27,120
we also consider in every request
7232
05:46:27,120 --> 05:46:29,580
basically this orders by country and we
7233
05:46:29,580 --> 05:46:32,820
return this is a complex select with
7234
05:46:32,820 --> 05:46:36,180
joins and we return finally the number
7235
05:46:36,180 --> 05:46:39,840
of Records by country okay
7236
05:46:39,840 --> 05:46:41,340
and down below we have the latest
7237
05:46:41,340 --> 05:46:44,218
customers and the latest orders with
7238
05:46:44,218 --> 05:46:46,200
limited for the customers we have limit
7239
05:46:46,200 --> 05:46:49,200
five and for the orders we have limits
7240
05:46:49,200 --> 05:46:51,660
limit 10. okay and in this case we are
7241
05:46:51,660 --> 05:46:54,240
using order Resource as well and we
7242
05:46:54,240 --> 05:46:56,940
return only the information we need and
7243
05:46:56,940 --> 05:46:59,458
down below we have get from date so this
7244
05:46:59,458 --> 05:47:01,680
is interesting basically most of the
7245
05:47:01,680 --> 05:47:04,680
methods right here uh not this one not
7246
05:47:04,680 --> 05:47:07,378
this one this one actually is uh uses
7247
05:47:07,378 --> 05:47:10,320
that get from date and we have this from
7248
05:47:10,320 --> 05:47:13,260
date so basically if the date was
7249
05:47:13,260 --> 05:47:15,240
changed in the user interface like last
7250
05:47:15,240 --> 05:47:18,000
month or last week so we basically need
7251
05:47:18,000 --> 05:47:21,958
to use uh inside the wear query we want
7252
05:47:21,958 --> 05:47:24,840
to add where the create that is more
7253
05:47:24,840 --> 05:47:27,900
than the last week date okay and this is
7254
05:47:27,900 --> 05:47:31,218
what we calculate okay so get from date
7255
05:47:31,218 --> 05:47:34,378
Returns the following array
7256
05:47:34,378 --> 05:47:36,420
um and we have we're using carbon
7257
05:47:36,420 --> 05:47:39,298
package and we calculate the following
7258
05:47:39,298 --> 05:47:41,340
days and then return that information
7259
05:47:41,340 --> 05:47:45,000
let's proceed so we have now this from
7260
05:47:45,000 --> 05:47:45,900
date
7261
05:47:45,900 --> 05:47:49,138
all right let's have a look in the other
7262
05:47:49,138 --> 05:47:51,360
files so we have all the resources I
7263
05:47:51,360 --> 05:47:53,160
mentioned that's going to return the
7264
05:47:53,160 --> 05:47:55,378
order details which is necessary for
7265
05:47:55,378 --> 05:47:59,360
displaying the latest orders right here
7266
05:47:59,760 --> 05:48:02,340
um the basically this order resource is
7267
05:48:02,340 --> 05:48:05,458
under the resources dashboard folder
7268
05:48:05,458 --> 05:48:07,798
okay because that order resource is only
7269
05:48:07,798 --> 05:48:09,058
for dashboard
7270
05:48:09,058 --> 05:48:12,120
okay and uh of course we implemented
7271
05:48:12,120 --> 05:48:16,878
installed the chart.js so vue.js chart
7272
05:48:16,878 --> 05:48:19,740
let's have a look what's the exact name
7273
05:48:19,740 --> 05:48:22,740
of a package viewcharge Jes package and
7274
05:48:22,740 --> 05:48:24,840
the charge JS was also installed okay
7275
05:48:24,840 --> 05:48:27,480
and using that package we rather render
7276
05:48:27,480 --> 05:48:30,120
this donut chart right now if we change
7277
05:48:30,120 --> 05:48:32,218
this into all time we're going to see
7278
05:48:32,218 --> 05:48:34,260
this donut right here
7279
05:48:34,260 --> 05:48:37,798
okay so we also made modifications in
7280
05:48:37,798 --> 05:48:39,600
the customer section as well because
7281
05:48:39,600 --> 05:48:42,240
right here we render all the latest
7282
05:48:42,240 --> 05:48:44,040
customers but whenever we click on the
7283
05:48:44,040 --> 05:48:46,440
customer I want the customer details to
7284
05:48:46,440 --> 05:48:48,660
be visible for the users okay so
7285
05:48:48,660 --> 05:48:50,940
whenever I click now previously the
7286
05:48:50,940 --> 05:48:54,240
customer form was a modal okay and
7287
05:48:54,240 --> 05:48:58,200
showing the model from this place is is
7288
05:48:58,200 --> 05:49:00,480
um is not a good idea basically it's
7289
05:49:00,480 --> 05:49:02,760
even more challenging but not a good
7290
05:49:02,760 --> 05:49:04,440
idea so when you click on the customer
7291
05:49:04,440 --> 05:49:06,900
right now there is dedicated customer
7292
05:49:06,900 --> 05:49:09,958
page that customer page opens and it is
7293
05:49:09,958 --> 05:49:11,878
also affected in the URL so when you
7294
05:49:11,878 --> 05:49:14,580
just reload the page then the active
7295
05:49:14,580 --> 05:49:17,400
customer stays right there okay this is
7296
05:49:17,400 --> 05:49:19,440
this is the uh change we made of course
7297
05:49:19,440 --> 05:49:22,440
in the API we added the following
7298
05:49:22,440 --> 05:49:24,780
dashboard roads everything starts with
7299
05:49:24,780 --> 05:49:27,180
the dashboard prefix with the dashboard
7300
05:49:27,180 --> 05:49:29,520
controller and the method name
7301
05:49:29,520 --> 05:49:32,458
and we created the currency filter in
7302
05:49:32,458 --> 05:49:34,080
the view.js that's that's something
7303
05:49:34,080 --> 05:49:36,420
interesting so we basically if we go in
7304
05:49:36,420 --> 05:49:38,340
the dashboard we see that the number
7305
05:49:38,340 --> 05:49:40,440
right here is formatted with the dollar
7306
05:49:40,440 --> 05:49:43,440
sign okay and this is done through the
7307
05:49:43,440 --> 05:49:46,558
currency filter we created that currency
7308
05:49:46,558 --> 05:49:49,798
filter we installed that currency filter
7309
05:49:49,798 --> 05:49:51,900
we activated the currency filter in the
7310
05:49:51,900 --> 05:49:56,218
main JS and then we are using this uh
7311
05:49:56,218 --> 05:49:57,718
the
7312
05:49:57,718 --> 05:50:00,240
in the dashboard where is dashboard view
7313
05:50:00,240 --> 05:50:03,958
file here it is okay and if we scroll
7314
05:50:03,958 --> 05:50:06,480
down below let's
7315
05:50:06,480 --> 05:50:09,780
enlarge the right side
7316
05:50:09,780 --> 05:50:12,058
total income
7317
05:50:12,058 --> 05:50:15,620
we have this total income
7318
05:50:15,718 --> 05:50:18,360
so basically we are using that uh not
7319
05:50:18,360 --> 05:50:21,360
sure here it is here's how we are using
7320
05:50:21,360 --> 05:50:23,298
that
7321
05:50:23,298 --> 05:50:26,940
currency filter okay so that is all that
7322
05:50:26,940 --> 05:50:28,680
has been done into the dashboard
7323
05:50:28,680 --> 05:50:30,540
controller but the full process is of
7324
05:50:30,540 --> 05:50:31,680
course
7325
05:50:31,680 --> 05:50:34,260
um like much much longer I think more
7326
05:50:34,260 --> 05:50:36,420
than one hour I think it's uh one and a
7327
05:50:36,420 --> 05:50:38,638
half hours the whole section all right
7328
05:50:38,638 --> 05:50:41,638
let's move on the next section and see
7329
05:50:41,638 --> 05:50:45,620
how the reports are done
7330
05:50:46,080 --> 05:50:49,440
in this section we created two uh two
7331
05:50:49,440 --> 05:50:52,378
reports and one is the orders report and
7332
05:50:52,378 --> 05:50:54,540
second is the customers report so
7333
05:50:54,540 --> 05:50:58,500
basically we see all the orders that the
7334
05:50:58,500 --> 05:51:01,440
number of orders made per day for the um
7335
05:51:01,440 --> 05:51:03,480
from the beginning of the application
7336
05:51:03,480 --> 05:51:07,680
okay and if we choose like last week for
7337
05:51:07,680 --> 05:51:09,718
example uh we don't see anything because
7338
05:51:09,718 --> 05:51:11,820
no order has been made in the last week
7339
05:51:11,820 --> 05:51:14,100
but we see seven
7340
05:51:14,100 --> 05:51:17,400
um seven days right here okay uh seven
7341
05:51:17,400 --> 05:51:19,740
over eight I think this is this is eight
7342
05:51:19,740 --> 05:51:22,740
so this includes like um seven days plus
7343
05:51:22,740 --> 05:51:24,718
one okay which is probably something
7344
05:51:24,718 --> 05:51:27,480
that needs to be fixed but uh at the
7345
05:51:27,480 --> 05:51:30,058
moment it is um like this so we have
7346
05:51:30,058 --> 05:51:34,080
this report orders by orders by day and
7347
05:51:34,080 --> 05:51:35,940
we have the customer report as well
7348
05:51:35,940 --> 05:51:38,760
let's choose last month and we're going
7349
05:51:38,760 --> 05:51:41,180
to see how many customers basically was
7350
05:51:41,180 --> 05:51:43,740
registered the last month so only one
7351
05:51:43,740 --> 05:51:46,860
customer was producer okay the data is
7352
05:51:46,860 --> 05:51:48,600
not that much at the moment that's why
7353
05:51:48,600 --> 05:51:51,180
it doesn't look that nice but believe me
7354
05:51:51,180 --> 05:51:53,520
uh when you have a good data and I
7355
05:51:53,520 --> 05:51:56,040
tested this on good data as well so
7356
05:51:56,040 --> 05:51:59,878
these reports look uh look amazing okay
7357
05:51:59,878 --> 05:52:02,820
let's understand how these reports have
7358
05:52:02,820 --> 05:52:05,958
been done okay so first we added
7359
05:52:05,958 --> 05:52:09,600
published column into products okay so
7360
05:52:09,600 --> 05:52:12,718
this was added and we updated the
7361
05:52:12,718 --> 05:52:16,320
dashboard controller as well if we
7362
05:52:16,320 --> 05:52:19,260
scroll down below we are only returning
7363
05:52:19,260 --> 05:52:22,260
those the count of those products which
7364
05:52:22,260 --> 05:52:25,020
has published true we also changed the
7365
05:52:25,020 --> 05:52:27,240
product controller on the front end and
7366
05:52:27,240 --> 05:52:29,940
we return only those products who has
7367
05:52:29,940 --> 05:52:31,860
published true okay if the product
7368
05:52:31,860 --> 05:52:33,900
doesn't have published true it's not
7369
05:52:33,900 --> 05:52:35,580
going to be outputted on the website
7370
05:52:35,580 --> 05:52:38,160
okay that was added
7371
05:52:38,160 --> 05:52:40,440
and then we let's have a look in the
7372
05:52:40,440 --> 05:52:43,138
report controller okay the report
7373
05:52:43,138 --> 05:52:45,298
controller has two main methods orders
7374
05:52:45,298 --> 05:52:48,240
and customers and it has a private
7375
05:52:48,240 --> 05:52:51,058
method prepared data for bar chart
7376
05:52:51,058 --> 05:52:54,000
and we are using bar charts in both
7377
05:52:54,000 --> 05:52:57,660
cases let's have a look but the actual
7378
05:52:57,660 --> 05:53:00,480
data is very similar The Identical
7379
05:53:00,480 --> 05:53:02,940
basically for bar chart online chart so
7380
05:53:02,940 --> 05:53:05,160
we can even create the line chart for
7381
05:53:05,160 --> 05:53:07,740
the customer's report okay it's going to
7382
05:53:07,740 --> 05:53:09,480
be pretty straightforward the same
7383
05:53:09,480 --> 05:53:13,740
basically okay but I also created report
7384
05:53:13,740 --> 05:53:15,840
trade remember in the dashboard
7385
05:53:15,840 --> 05:53:19,260
controller we we are using the method
7386
05:53:19,260 --> 05:53:22,200
called get from date
7387
05:53:22,200 --> 05:53:24,718
okay this is from date or start date
7388
05:53:24,718 --> 05:53:28,020
from which uh until the current date we
7389
05:53:28,020 --> 05:53:30,120
want to get the data and this gate from
7390
05:53:30,120 --> 05:53:33,480
date was used and is used still
7391
05:53:33,480 --> 05:53:35,760
right here for example to get the orders
7392
05:53:35,760 --> 05:53:38,340
by country or right here to get the
7393
05:53:38,340 --> 05:53:41,458
total income from starting from this day
7394
05:53:41,458 --> 05:53:44,458
but I created a trade because I needed
7395
05:53:44,458 --> 05:53:46,798
the same method in the report controller
7396
05:53:46,798 --> 05:53:49,320
as well and I used this trade right here
7397
05:53:49,320 --> 05:53:51,840
in the dashboard controller and in the
7398
05:53:51,840 --> 05:53:53,940
report controller as well right here
7399
05:53:53,940 --> 05:53:56,580
okay and the trade is very simple it has
7400
05:53:56,580 --> 05:53:59,520
just one method right here okay
7401
05:53:59,520 --> 05:54:02,638
okay we updated the product request uh
7402
05:54:02,638 --> 05:54:04,378
we did publish right there we updated
7403
05:54:04,378 --> 05:54:06,780
the product uh resource we returned
7404
05:54:06,780 --> 05:54:09,360
published and down below we created the
7405
05:54:09,360 --> 05:54:12,240
bar and line I think I created the line
7406
05:54:12,240 --> 05:54:15,058
chart but not sure why I didn't use this
7407
05:54:15,058 --> 05:54:18,120
line chart uh probably I just forgot to
7408
05:54:18,120 --> 05:54:20,100
use this line chart and still using the
7409
05:54:20,100 --> 05:54:21,120
bar chart
7410
05:54:21,120 --> 05:54:24,058
okay so we made a few changes in the
7411
05:54:24,058 --> 05:54:25,760
customer we created a customer's report
7412
05:54:25,760 --> 05:54:30,620
orders report and we also used
7413
05:54:30,780 --> 05:54:34,320
um currency USD filter everywhere
7414
05:54:34,320 --> 05:54:37,440
basically we have the price output okay
7415
05:54:37,440 --> 05:54:40,138
so in any place where you see price
7416
05:54:40,138 --> 05:54:42,298
outputted on the website on the admin
7417
05:54:42,298 --> 05:54:45,540
panel right here on this products uh
7418
05:54:45,540 --> 05:54:47,878
right here in the orders basically now
7419
05:54:47,878 --> 05:54:50,940
it's going to use this currency currency
7420
05:54:50,940 --> 05:54:53,340
formatter and the currency format is
7421
05:54:53,340 --> 05:54:55,740
like the big Advantage the biggest
7422
05:54:55,740 --> 05:54:58,680
Advantage is that it formats with the
7423
05:54:58,680 --> 05:55:00,780
currency symbol as well as with the
7424
05:55:00,780 --> 05:55:02,940
Thousand separator okay that is
7425
05:55:02,940 --> 05:55:05,280
something which is very
7426
05:55:05,280 --> 05:55:08,160
um necessary for the uh for the
7427
05:55:08,160 --> 05:55:10,860
readability let's let's say like this
7428
05:55:10,860 --> 05:55:13,860
okay so that was uh that was basically
7429
05:55:13,860 --> 05:55:17,160
all so inside this state we added the
7430
05:55:17,160 --> 05:55:19,080
date options we moved the date options
7431
05:55:19,080 --> 05:55:21,958
from the dashboard into the States state
7432
05:55:21,958 --> 05:55:24,780
store State and we are using this in
7433
05:55:24,780 --> 05:55:27,840
both cases in the uh report
7434
05:55:27,840 --> 05:55:30,058
um as well as on the dashboard okay
7435
05:55:30,058 --> 05:55:33,298
ending the API of course we added those
7436
05:55:33,298 --> 05:55:38,100
two report API endpoints okay and just
7437
05:55:38,100 --> 05:55:41,160
like this as it it's it is as simple as
7438
05:55:41,160 --> 05:55:44,400
that so we created this dashboard in
7439
05:55:44,400 --> 05:55:46,500
just five minutes explaining
7440
05:55:46,500 --> 05:55:49,740
all right now it's time to take our
7441
05:55:49,740 --> 05:55:52,260
e-commerce application and deploy it on
7442
05:55:52,260 --> 05:55:55,020
custom domain we can also create custom
7443
05:55:55,020 --> 05:55:57,780
email address and configure laravel
7444
05:55:57,780 --> 05:56:00,600
application to send emails from that
7445
05:56:00,600 --> 05:56:03,120
email address this is hostinger age
7446
05:56:03,120 --> 05:56:05,940
panel and from here we can manage our
7447
05:56:05,940 --> 05:56:09,120
hosting we can claim our free domain set
7448
05:56:09,120 --> 05:56:12,080
up our email set up our SSL certificates
7449
05:56:12,080 --> 05:56:15,540
and create databases and Etc
7450
05:56:15,540 --> 05:56:18,240
okay so once you register the first time
7451
05:56:18,240 --> 05:56:21,120
you will be redirected right here so I
7452
05:56:21,120 --> 05:56:22,920
use hostinger as I mentioned for every
7453
05:56:22,920 --> 05:56:25,980
kind of things I need and right here I
7454
05:56:25,980 --> 05:56:28,200
have premium shared hosting which I can
7455
05:56:28,200 --> 05:56:31,620
set up but first we need to claim our
7456
05:56:31,620 --> 05:56:34,260
free domain I'm going to click right
7457
05:56:34,260 --> 05:56:36,540
here claim domain and I'm going to
7458
05:56:36,540 --> 05:56:40,378
search now my domain so I can choose the
7459
05:56:40,378 --> 05:56:41,280
um
7460
05:56:41,280 --> 05:56:44,218
suffix for my domain which I want
7461
05:56:44,218 --> 05:56:48,000
and let's search for L as a the first
7462
05:56:48,000 --> 05:56:51,900
letter for laravel L Commerce
7463
05:56:51,900 --> 05:56:55,680
L Commerce dot.com
7464
05:56:55,680 --> 05:56:58,020
let's see the domain is already taken
7465
05:56:58,020 --> 05:57:02,340
let's try another one lcommerce.net
7466
05:57:02,760 --> 05:57:05,400
let's click right here
7467
05:57:05,400 --> 05:57:08,940
okay and as we see L commerce.net is
7468
05:57:08,940 --> 05:57:11,638
available I think that's great domain
7469
05:57:11,638 --> 05:57:13,980
for our e-commerce website and I'm going
7470
05:57:13,980 --> 05:57:16,200
to take this domain and after one year
7471
05:57:16,200 --> 05:57:20,280
the domain renews for 14.
7472
05:57:20,280 --> 05:57:23,700
okay so I'm going to click claim domain
7473
05:57:23,700 --> 05:57:25,080
right here
7474
05:57:25,080 --> 05:57:27,780
which will claim the domain for me and
7475
05:57:27,780 --> 05:57:30,480
then we have to set up our SSL
7476
05:57:30,480 --> 05:57:31,638
certificates
7477
05:57:31,638 --> 05:57:35,100
and premium shared hosting so select
7478
05:57:35,100 --> 05:57:37,798
primer details I'm going to choose my
7479
05:57:37,798 --> 05:57:39,240
country
7480
05:57:39,240 --> 05:57:41,280
this is the place where I have to
7481
05:57:41,280 --> 05:57:44,218
provide the address details and this is
7482
05:57:44,218 --> 05:57:46,760
just for personal purposes
7483
05:57:46,760 --> 05:57:49,860
I'm going to provide right here my
7484
05:57:49,860 --> 05:57:51,480
address information
7485
05:57:51,480 --> 05:57:54,000
and then click finish registration okay
7486
05:57:54,000 --> 05:57:56,340
so my contact information is under
7487
05:57:56,340 --> 05:57:59,218
review and I will be informed about my
7488
05:57:59,218 --> 05:58:02,040
domain registration in a short while and
7489
05:58:02,040 --> 05:58:04,020
I can already create my website so I'm
7490
05:58:04,020 --> 05:58:07,458
going to click continue right here
7491
05:58:07,458 --> 05:58:09,980
no this is something else
7492
05:58:09,980 --> 05:58:12,840
protect your brand it suggests me to
7493
05:58:12,840 --> 05:58:15,840
take ecommerce.live but I see right here
7494
05:58:15,840 --> 05:58:18,180
the domain status is active email
7495
05:58:18,180 --> 05:58:21,378
verification status is verified
7496
05:58:21,378 --> 05:58:26,820
and now we just need to add a website
7497
05:58:26,820 --> 05:58:29,040
so let's click on the home page right
7498
05:58:29,040 --> 05:58:32,400
here on the left side we have the domain
7499
05:58:32,400 --> 05:58:34,980
chosen so let's click on the home page
7500
05:58:34,980 --> 05:58:38,160
right here we have this setup section we
7501
05:58:38,160 --> 05:58:40,260
have to set up premium shared hosting
7502
05:58:40,260 --> 05:58:43,200
I'm going to click setup right here and
7503
05:58:43,200 --> 05:58:46,920
let's click Start now I can skip this
7504
05:58:46,920 --> 05:58:50,760
part I'm building something
7505
05:58:50,760 --> 05:58:54,660
fresh new I'm going to choose skip I
7506
05:58:54,660 --> 05:58:57,298
will start from scratch here is my
7507
05:58:57,298 --> 05:58:58,558
domain
7508
05:58:58,558 --> 05:59:01,378
I'm going to select my domain and your
7509
05:59:01,378 --> 05:59:04,920
teeth so I'm going to click finish setup
7510
05:59:04,920 --> 05:59:08,340
okay now let's go on the home page again
7511
05:59:08,340 --> 05:59:10,080
and
7512
05:59:10,080 --> 05:59:13,558
we have to basically set up activate SSL
7513
05:59:13,558 --> 05:59:16,280
certificates my browser right now is
7514
05:59:16,280 --> 05:59:19,378
zoomed and this is displayed on the
7515
05:59:19,378 --> 05:59:21,718
right side the navigation if I just zoom
7516
05:59:21,718 --> 05:59:24,360
out we see this main navigation at the
7517
05:59:24,360 --> 05:59:26,580
top okay you will probably see this at
7518
05:59:26,580 --> 05:59:28,440
the top and right here we have couple of
7519
05:59:28,440 --> 05:59:31,320
options let me actually zoom in so we
7520
05:59:31,320 --> 05:59:32,878
have websites
7521
05:59:32,878 --> 05:59:36,660
the websites basically uh I am I have on
7522
05:59:36,660 --> 05:59:39,420
this shared hosting so we have right
7523
05:59:39,420 --> 05:59:42,360
here hosting and emails and domains and
7524
05:59:42,360 --> 05:59:46,200
PPS and SSL let's click on SSL here it
7525
05:59:46,200 --> 05:59:49,200
is so lcommerce.net
7526
05:59:49,200 --> 05:59:52,500
and let's by the way check what is the
7527
05:59:52,500 --> 05:59:55,280
result in the browser
7528
05:59:55,280 --> 05:59:59,340
ecommerce.net okay so we see hostinger
7529
05:59:59,340 --> 06:00:02,040
welcome page this means that the domain
7530
06:00:02,040 --> 06:00:05,400
is taken and it is on the hostinger all
7531
06:00:05,400 --> 06:00:07,860
right so this is failed for let's
7532
06:00:07,860 --> 06:00:10,080
encrypt why it is failed let's click
7533
06:00:10,080 --> 06:00:12,320
manage right there
7534
06:00:12,320 --> 06:00:13,980
rhinestone
7535
06:00:13,980 --> 06:00:16,138
let's try to reinstall the SSO
7536
06:00:16,138 --> 06:00:18,420
certificate okay the SSL is being
7537
06:00:18,420 --> 06:00:20,280
installed for eCommerce in the
7538
06:00:20,280 --> 06:00:22,860
background https will be automatically
7539
06:00:22,860 --> 06:00:25,260
forced on your domain let's click close
7540
06:00:25,260 --> 06:00:28,860
right here it's trying to install and
7541
06:00:28,860 --> 06:00:31,558
once this finishes we are going to see
7542
06:00:31,558 --> 06:00:33,840
right here it is not secure but we're
7543
06:00:33,840 --> 06:00:36,240
going to see https protocol right here
7544
06:00:36,240 --> 06:00:41,100
and the mark that now this is secure
7545
06:00:41,100 --> 06:00:43,680
let's wait until this is done and we
7546
06:00:43,680 --> 06:00:46,740
have to add websites as well okay let's
7547
06:00:46,740 --> 06:00:49,558
reload the page now we see this as
7548
06:00:49,558 --> 06:00:52,458
active so if we go in the tab
7549
06:00:52,458 --> 06:00:55,798
ecommerce.net and just refresh this page
7550
06:00:55,798 --> 06:00:58,980
now we see lock icon right here and we
7551
06:00:58,980 --> 06:01:02,520
have connection is secure now this is
7552
06:01:02,520 --> 06:01:06,900
under https we have to add subdomain as
7553
06:01:06,900 --> 06:01:08,340
well because this is going to be the
7554
06:01:08,340 --> 06:01:10,200
main website now this is going to be
7555
06:01:10,200 --> 06:01:13,320
this part but we need item inside as
7556
06:01:13,320 --> 06:01:17,420
well we can take subdomain like
7557
06:01:17,420 --> 06:01:19,200
admin.elcomers.net which is really
7558
06:01:19,200 --> 06:01:20,218
logical
7559
06:01:20,218 --> 06:01:23,100
so let's go in the hostinger
7560
06:01:23,100 --> 06:01:26,280
premium shirt for hosting for alchemers
7561
06:01:26,280 --> 06:01:28,138
we have it right there let's click
7562
06:01:28,138 --> 06:01:30,660
manage for l commerce.net so I think
7563
06:01:30,660 --> 06:01:33,718
this is the place so from here we can
7564
06:01:33,718 --> 06:01:35,700
also take the free email but let's
7565
06:01:35,700 --> 06:01:38,700
create first a subdomain okay we have to
7566
06:01:38,700 --> 06:01:40,860
add a website let me actually zoom out
7567
06:01:40,860 --> 06:01:43,260
this slightly we have domains and
7568
06:01:43,260 --> 06:01:46,200
subdomains let's try to add subdomain
7569
06:01:46,200 --> 06:01:49,980
admin dot lcommerce.net let it create a
7570
06:01:49,980 --> 06:01:53,458
custom folder for subdomain okay let's
7571
06:01:53,458 --> 06:01:56,218
understand so basically our main website
7572
06:01:56,218 --> 06:01:58,620
is this and if we have a look in the
7573
06:01:58,620 --> 06:02:01,580
project Source okay our main website
7574
06:02:01,580 --> 06:02:04,798
will be
7575
06:02:04,798 --> 06:02:07,798
under public so basically this index
7576
06:02:07,798 --> 06:02:12,298
index dot PHP is what will be served and
7577
06:02:12,298 --> 06:02:14,458
we have this backend side and we have to
7578
06:02:14,458 --> 06:02:16,620
build this vue.js application and to
7579
06:02:16,620 --> 06:02:18,958
deploy it on the place where we need
7580
06:02:18,958 --> 06:02:22,200
that so it really does not matter I
7581
06:02:22,200 --> 06:02:22,980
think
7582
06:02:22,980 --> 06:02:25,378
what's going to be the path
7583
06:02:25,378 --> 06:02:28,798
so let's specify right here
7584
06:02:28,798 --> 06:02:31,200
folder admin
7585
06:02:31,200 --> 06:02:34,138
let's create subdomain
7586
06:02:34,138 --> 06:02:36,780
subdomin created successfully and let's
7587
06:02:36,780 --> 06:02:40,378
now open in a new tab admin
7588
06:02:40,378 --> 06:02:42,180
e Commerce
7589
06:02:42,180 --> 06:02:43,860
Dot
7590
06:02:43,860 --> 06:02:45,180
net
7591
06:02:45,180 --> 06:02:47,100
let's hit enter
7592
06:02:47,100 --> 06:02:49,320
okay now we see website for our
7593
06:02:49,320 --> 06:02:52,378
subdomain as well and let's install SSO
7594
06:02:52,378 --> 06:02:54,420
certificate right here
7595
06:02:54,420 --> 06:02:56,820
on the right side we have this SSL
7596
06:02:56,820 --> 06:02:59,638
section I'm going to click on this SSL
7597
06:02:59,638 --> 06:03:02,520
and here we see this admin ecommerce.net
7598
06:03:02,520 --> 06:03:05,940
let's click manage okay now it is
7599
06:03:05,940 --> 06:03:07,860
already active it automatically got
7600
06:03:07,860 --> 06:03:11,218
active and if we just reload this page
7601
06:03:11,218 --> 06:03:14,400
we will see lock right here as well so
7602
06:03:14,400 --> 06:03:16,700
now we have two domains
7603
06:03:16,700 --> 06:03:20,520
admin.elcomers.net and lcommerce.net for
7604
06:03:20,520 --> 06:03:22,920
our eCommerce website and the only thing
7605
06:03:22,920 --> 06:03:25,378
we need is to deploy our applications
7606
06:03:25,378 --> 06:03:28,798
but now let's understand where we need
7607
06:03:28,798 --> 06:03:30,360
to deploy it
7608
06:03:30,360 --> 06:03:34,138
let's go under files and click the file
7609
06:03:34,138 --> 06:03:37,378
manager so let's explore the file
7610
06:03:37,378 --> 06:03:40,020
structure and understand where we are
7611
06:03:40,020 --> 06:03:42,360
going to actually deploy or how we are
7612
06:03:42,360 --> 06:03:44,638
going to deploy it hostinger provides
7613
06:03:44,638 --> 06:03:48,600
nice really nice file manager but I am
7614
06:03:48,600 --> 06:03:50,760
not going to use file manager to deploy
7615
06:03:50,760 --> 06:03:52,980
lateral application maybe we can use the
7616
06:03:52,980 --> 06:03:54,780
file manager to deploy vue.js
7617
06:03:54,780 --> 06:03:57,540
application but not for a lot of
7618
06:03:57,540 --> 06:04:00,620
so right here we see this public HTML
7619
06:04:00,620 --> 06:04:04,080
which is a symbolic link basically into
7620
06:04:04,080 --> 06:04:07,860
domains L commerce.net public HTML and
7621
06:04:07,860 --> 06:04:09,958
if we click on the root directory right
7622
06:04:09,958 --> 06:04:10,860
here
7623
06:04:10,860 --> 06:04:13,260
we see the same thing if we click on the
7624
06:04:13,260 --> 06:04:16,020
domains double click maybe if we go
7625
06:04:16,020 --> 06:04:18,718
inside we see ecommerce.net right here
7626
06:04:18,718 --> 06:04:21,600
if we go inside
7627
06:04:21,600 --> 06:04:25,440
we see this public HTML okay
7628
06:04:25,440 --> 06:04:28,020
and right here we see this default PHP
7629
06:04:28,020 --> 06:04:30,840
and admin folder if we go inside the
7630
06:04:30,840 --> 06:04:32,700
admin folder
7631
06:04:32,700 --> 06:04:35,760
this also includes default PHP and let's
7632
06:04:35,760 --> 06:04:38,340
open default PHP click edit right here
7633
06:04:38,340 --> 06:04:40,320
and understand what is there inside
7634
06:04:40,320 --> 06:04:44,820
default PHP we see the HTML basically
7635
06:04:44,820 --> 06:04:48,420
this part of HTML okay so we can
7636
06:04:48,420 --> 06:04:50,400
actually delete this this is for admin
7637
06:04:50,400 --> 06:04:53,280
default HTML so I can delete this
7638
06:04:53,280 --> 06:04:54,780
everything
7639
06:04:54,780 --> 06:04:58,558
and simply write hello from admin this
7640
06:04:58,558 --> 06:05:01,798
is PHP so we can write HTML there I'm
7641
06:05:01,798 --> 06:05:03,840
going to save this
7642
06:05:03,840 --> 06:05:06,240
and now if we go on the admin page and
7643
06:05:06,240 --> 06:05:07,798
just reload this
7644
06:05:07,798 --> 06:05:10,138
we're gonna see hello from admin okay
7645
06:05:10,138 --> 06:05:12,058
this is the place
7646
06:05:12,058 --> 06:05:15,180
right here we are going to deploy our
7647
06:05:15,180 --> 06:05:18,540
vue.js application okay so let's close
7648
06:05:18,540 --> 06:05:22,440
this and let me actually go back into
7649
06:05:22,440 --> 06:05:25,320
eCommerce and we have public HTML right
7650
06:05:25,320 --> 06:05:28,080
here and I know that from inside this
7651
06:05:28,080 --> 06:05:32,458
public HTML we have to put our vue.js
7652
06:05:32,458 --> 06:05:34,740
application under admin folder by the
7653
06:05:34,740 --> 06:05:36,780
way we can change this folder as well if
7654
06:05:36,780 --> 06:05:37,740
we want
7655
06:05:37,740 --> 06:05:42,180
okay so now I'm going to use SSH to
7656
06:05:42,180 --> 06:05:44,820
clone my my application in the correct
7657
06:05:44,820 --> 06:05:48,718
folder okay and then make
7658
06:05:48,718 --> 06:05:52,680
public folder of our vue.js sorry of our
7659
06:05:52,680 --> 06:05:55,620
laravel application this public folder
7660
06:05:55,620 --> 06:05:57,540
is something that needs to be web
7661
06:05:57,540 --> 06:06:00,240
accessible okay right now everything
7662
06:06:00,240 --> 06:06:03,240
what is inside this public HTML
7663
06:06:03,240 --> 06:06:06,840
is the web accessible if I rename this
7664
06:06:06,840 --> 06:06:10,080
right click and rename and call this
7665
06:06:10,080 --> 06:06:14,580
index dot PHP it's going to work in the
7666
06:06:14,580 --> 06:06:16,520
same way for our
7667
06:06:16,520 --> 06:06:20,218
lcommerce.net okay so if we just manage
7668
06:06:20,218 --> 06:06:23,280
to have this index PHP which is our
7669
06:06:23,280 --> 06:06:26,400
laravel applications entry script index
7670
06:06:26,400 --> 06:06:29,520
PHP into here
7671
06:06:29,520 --> 06:06:31,558
okay then our application will be
7672
06:06:31,558 --> 06:06:34,378
deployed now let's go in the age panel
7673
06:06:34,378 --> 06:06:36,840
and I'm going to search for
7674
06:06:36,840 --> 06:06:39,058
SSH
7675
06:06:39,058 --> 06:06:41,580
right here we have this SSH access under
7676
06:06:41,580 --> 06:06:45,298
Advanced so let's click it right here
7677
06:06:45,298 --> 06:06:48,298
and here we have IP and port and
7678
06:06:48,298 --> 06:06:51,180
username and password basically using
7679
06:06:51,180 --> 06:06:54,360
these configurations we can connect to
7680
06:06:54,360 --> 06:06:57,740
our project we can do deployment using
7681
06:06:57,740 --> 06:07:01,638
basically uploading our files right here
7682
06:07:01,638 --> 06:07:05,458
but we have to upload vendor as well and
7683
06:07:05,458 --> 06:07:08,040
if we have a look in the application so
7684
06:07:08,040 --> 06:07:11,218
our vendor contains a lot of packages
7685
06:07:11,218 --> 06:07:14,520
and it's going to take a lot of time
7686
06:07:14,520 --> 06:07:17,940
until we upload it so we can zip the
7687
06:07:17,940 --> 06:07:20,280
whole application and upload it like
7688
06:07:20,280 --> 06:07:22,620
this as well but that's going to also
7689
06:07:22,620 --> 06:07:26,100
take huge time so I'm going to try
7690
06:07:26,100 --> 06:07:29,280
to show you and teach you how you can
7691
06:07:29,280 --> 06:07:33,480
use SSH to deploy your application
7692
06:07:33,480 --> 06:07:36,840
okay so let's try to connect using SSH
7693
06:07:36,840 --> 06:07:39,240
so for this I'm going to use Puti I
7694
06:07:39,240 --> 06:07:41,940
don't have putty so let's download
7695
06:07:41,940 --> 06:07:46,558
download Puti which is an SSH client for
7696
06:07:46,558 --> 06:07:48,920
Windows so let's click right here
7697
06:07:48,920 --> 06:07:52,138
download putting we have to download for
7698
06:07:52,138 --> 06:07:54,298
our operating system
7699
06:07:54,298 --> 06:07:58,020
so I'm going to click right here to
7700
06:07:58,020 --> 06:08:01,260
download the installer save that click
7701
06:08:01,260 --> 06:08:03,420
next next
7702
06:08:03,420 --> 06:08:06,360
and let's install it
7703
06:08:06,360 --> 06:08:09,540
okay now we have protein installed now
7704
06:08:09,540 --> 06:08:10,860
let's open it
7705
06:08:10,860 --> 06:08:13,200
here is per team and now we have to
7706
06:08:13,200 --> 06:08:16,620
provide right here the credentials in IP
7707
06:08:16,620 --> 06:08:20,400
that hostinger gave us so IP is this
7708
06:08:20,400 --> 06:08:23,820
so we have to hostname or IP we're going
7709
06:08:23,820 --> 06:08:25,980
to paste this right here this is the
7710
06:08:25,980 --> 06:08:27,558
port
7711
06:08:27,558 --> 06:08:30,298
65002 we're gonna put this right here
7712
06:08:30,298 --> 06:08:33,840
and we can already click open we have to
7713
06:08:33,840 --> 06:08:36,360
click accept right here
7714
06:08:36,360 --> 06:08:38,940
and now we have to provide username so
7715
06:08:38,940 --> 06:08:43,500
for username we we need to copy these
7716
06:08:43,500 --> 06:08:46,080
and then paste it right here and hit the
7717
06:08:46,080 --> 06:08:46,980
enter
7718
06:08:46,980 --> 06:08:49,798
now it asks password let's Click Change
7719
06:08:49,798 --> 06:08:52,860
right here and let's generate new
7720
06:08:52,860 --> 06:08:55,500
password okay we have to generate new
7721
06:08:55,500 --> 06:08:57,780
password we can type of course new
7722
06:08:57,780 --> 06:09:01,440
password we prefer or I prefer to take a
7723
06:09:01,440 --> 06:09:03,180
random password so in the Google I'm
7724
06:09:03,180 --> 06:09:06,058
going to type random password let's
7725
06:09:06,058 --> 06:09:07,920
click right here and let's click
7726
06:09:07,920 --> 06:09:09,718
Generate random password and this is the
7727
06:09:09,718 --> 06:09:11,580
password now I'm going to set so let's
7728
06:09:11,580 --> 06:09:14,280
copy this right click and copy then
7729
06:09:14,280 --> 06:09:17,700
let's paste this and click change okay
7730
06:09:17,700 --> 06:09:20,340
our password was actually changed now
7731
06:09:20,340 --> 06:09:22,798
let's open booty
7732
06:09:22,798 --> 06:09:25,620
and let's paste our password here as
7733
06:09:25,620 --> 06:09:28,020
well just right click and it's going to
7734
06:09:28,020 --> 06:09:30,718
paste it seems like nothing is pasted
7735
06:09:30,718 --> 06:09:32,940
but if you just right right click it's
7736
06:09:32,940 --> 06:09:36,000
going to paste so then let's hit the
7737
06:09:36,000 --> 06:09:38,180
enter
7738
06:09:38,280 --> 06:09:41,940
but he was closed okay basically you can
7739
06:09:41,940 --> 06:09:45,540
connect to your SSH server in two ways
7740
06:09:45,540 --> 06:09:48,058
using password or using public private
7741
06:09:48,058 --> 06:09:51,058
keys so let's try to repeat these steps
7742
06:09:51,058 --> 06:09:53,280
I have actually password so I'm gonna
7743
06:09:53,280 --> 06:09:56,520
save this password temporarily so let me
7744
06:09:56,520 --> 06:09:58,920
actually put this right here in our code
7745
06:09:58,920 --> 06:10:01,260
I'm going to comment and push it just
7746
06:10:01,260 --> 06:10:04,558
put right here for a short time so let's
7747
06:10:04,558 --> 06:10:06,540
repeat these steps so I'm going to copy
7748
06:10:06,540 --> 06:10:07,500
IP
7749
06:10:07,500 --> 06:10:09,420
and put this right here
7750
06:10:09,420 --> 06:10:11,040
copy port
7751
06:10:11,040 --> 06:10:13,680
this right here
7752
06:10:13,680 --> 06:10:16,440
we can also provide username so let's
7753
06:10:16,440 --> 06:10:18,360
copy the username
7754
06:10:18,360 --> 06:10:21,240
and we can go in the
7755
06:10:21,240 --> 06:10:23,940
let's give it let's give it a name we
7756
06:10:23,940 --> 06:10:25,798
can save this session as well let's give
7757
06:10:25,798 --> 06:10:28,638
it a name the name is l
7758
06:10:28,638 --> 06:10:31,080
commerce.net okay and I'm going to click
7759
06:10:31,080 --> 06:10:33,900
save right here this is our e-commerce
7760
06:10:33,900 --> 06:10:38,400
and then if we go under connection under
7761
06:10:38,400 --> 06:10:41,760
data right here under connection data we
7762
06:10:41,760 --> 06:10:44,400
have to provide after login username so
7763
06:10:44,400 --> 06:10:46,558
I'm going to paste our username right
7764
06:10:46,558 --> 06:10:51,360
here go under session and hit save so
7765
06:10:51,360 --> 06:10:54,718
now our lcommerce.net session has that
7766
06:10:54,718 --> 06:10:58,260
username saved and if we click open
7767
06:10:58,260 --> 06:11:00,840
right now it's gonna take the username
7768
06:11:00,840 --> 06:11:04,378
but ask password okay so we have our
7769
06:11:04,378 --> 06:11:07,500
password right here so let's take this
7770
06:11:07,500 --> 06:11:08,420
password
7771
06:11:08,420 --> 06:11:12,958
and hit shift and insert or right click
7772
06:11:12,958 --> 06:11:15,540
and then hit the enter
7773
06:11:15,540 --> 06:11:18,240
for some reason we are not able to log
7774
06:11:18,240 --> 06:11:20,940
in and I think I know the reason
7775
06:11:20,940 --> 06:11:23,638
so right here we have SSH status
7776
06:11:23,638 --> 06:11:26,040
inactive we have to click enable right
7777
06:11:26,040 --> 06:11:28,920
here okay SSH is successfully enabled
7778
06:11:28,920 --> 06:11:31,860
and now it also recommends to use either
7779
06:11:31,860 --> 06:11:35,400
putty or pinguinet and this is the
7780
06:11:35,400 --> 06:11:38,458
command which you can run from your
7781
06:11:38,458 --> 06:11:42,298
Linux machine okay and the recommended
7782
06:11:42,298 --> 06:11:44,940
way which I'm going to also do is to add
7783
06:11:44,940 --> 06:11:48,480
a public key okay but first I want to
7784
06:11:48,480 --> 06:11:51,718
log in with the password so again I'm
7785
06:11:51,718 --> 06:11:54,680
going to now open putty now we have this
7786
06:11:54,680 --> 06:11:57,180
lcommerce.net saved I'm going to click
7787
06:11:57,180 --> 06:11:59,940
load and then click open
7788
06:11:59,940 --> 06:12:02,218
it will ask password I'm going to take
7789
06:12:02,218 --> 06:12:04,200
the password
7790
06:12:04,200 --> 06:12:08,100
and specify it right here and hit the
7791
06:12:08,100 --> 06:12:09,480
enter
7792
06:12:09,480 --> 06:12:12,660
okay now we are inside the server this
7793
06:12:12,660 --> 06:12:15,540
is the server we are in and we can type
7794
06:12:15,540 --> 06:12:18,240
some basic Linux commands and those
7795
06:12:18,240 --> 06:12:20,400
basic Linux commands can be found right
7796
06:12:20,400 --> 06:12:23,520
here as well basic SSH comments if you
7797
06:12:23,520 --> 06:12:25,920
just click on this it's going to open
7798
06:12:25,920 --> 06:12:29,340
new tab and it will show you some basic
7799
06:12:29,340 --> 06:12:31,138
comments and it will show you also how
7800
06:12:31,138 --> 06:12:33,600
you can connect to the server using
7801
06:12:33,600 --> 06:12:36,900
putty okay but let me close this and I'm
7802
06:12:36,900 --> 06:12:39,240
going to show you a few basic cons to
7803
06:12:39,240 --> 06:12:42,240
see every file and folder in this
7804
06:12:42,240 --> 06:12:45,480
directory we need to type LS
7805
06:12:45,480 --> 06:12:47,878
in this case we only have domain and
7806
06:12:47,878 --> 06:12:51,180
domains and public HTML we can type ALS
7807
06:12:51,180 --> 06:12:54,420
Dash L A and it's going to give you much
7808
06:12:54,420 --> 06:12:56,820
more information for each file and it's
7809
06:12:56,820 --> 06:12:58,920
going to also show us that we have some
7810
06:12:58,920 --> 06:13:01,980
files and folders which start with DOT
7811
06:13:01,980 --> 06:13:06,620
like dot logs in dot profile we can type
7812
06:13:06,620 --> 06:13:10,440
PWD to show the current path we are
7813
06:13:10,440 --> 06:13:14,458
under home U24 something now if we go in
7814
06:13:14,458 --> 06:13:18,540
the browser and click right here this is
7815
06:13:18,540 --> 06:13:22,860
the same path okay this is the path we
7816
06:13:22,860 --> 06:13:25,558
are inside right now this is our home
7817
06:13:25,558 --> 06:13:26,820
directory
7818
06:13:26,820 --> 06:13:28,558
K right here
7819
06:13:28,558 --> 06:13:30,860
and if we type again
7820
06:13:30,860 --> 06:13:35,100
ls-l-a we see right here public HTML
7821
06:13:35,100 --> 06:13:38,520
which is a symbolic link from domains L
7822
06:13:38,520 --> 06:13:41,458
commerce.net public HTML and we see
7823
06:13:41,458 --> 06:13:43,980
domains folder right there and we see
7824
06:13:43,980 --> 06:13:46,500
them right here as well domains in
7825
06:13:46,500 --> 06:13:50,400
public HTML and profile and logs as well
7826
06:13:50,400 --> 06:13:52,740
and we see all all of them right here
7827
06:13:52,740 --> 06:13:55,980
okay so this is the same folder now we
7828
06:13:55,980 --> 06:14:00,718
need to clone our application right here
7829
06:14:00,718 --> 06:14:03,420
okay not right here but under domains
7830
06:14:03,420 --> 06:14:05,280
basically so if we navigate inside
7831
06:14:05,280 --> 06:14:07,500
domains
7832
06:14:07,500 --> 06:14:10,340
and just type
7833
06:14:10,340 --> 06:14:13,558
ls-l-a navigation happens using CD
7834
06:14:13,558 --> 06:14:15,298
command which stands for change
7835
06:14:15,298 --> 06:14:17,940
directory we change the directory into
7836
06:14:17,940 --> 06:14:20,400
domains and now we are in the domains if
7837
06:14:20,400 --> 06:14:23,100
we just type PWD
7838
06:14:23,100 --> 06:14:26,878
now we are under home username domains
7839
06:14:26,878 --> 06:14:30,620
okay and then we can type
7840
06:14:30,620 --> 06:14:33,718
ls-la and hit the enter and we see our
7841
06:14:33,718 --> 06:14:35,820
domain L commerce.net this is our
7842
06:14:35,820 --> 06:14:39,080
website so if we navigate inside
7843
06:14:39,080 --> 06:14:42,000
lcommerce.net and hit the enter and then
7844
06:14:42,000 --> 06:14:42,980
type
7845
06:14:42,980 --> 06:14:46,320
ls-l-a we see public HTML right here
7846
06:14:46,320 --> 06:14:49,620
okay and if we navigate again inside the
7847
06:14:49,620 --> 06:14:52,440
public HTML or we can just list the
7848
06:14:52,440 --> 06:14:54,958
directories from this public HTML using
7849
06:14:54,958 --> 06:15:00,680
LS LA Public HTML hit the enter we see
7850
06:15:00,680 --> 06:15:05,040
admin and index PHP right there okay so
7851
06:15:05,040 --> 06:15:08,638
this reflects the same folder in file
7852
06:15:08,638 --> 06:15:11,160
structure we see in the browser under
7853
06:15:11,160 --> 06:15:14,340
domains we have l commerce.net and
7854
06:15:14,340 --> 06:15:18,600
public HTML and in fact if I now
7855
06:15:18,600 --> 06:15:21,958
delete this admin folder and index PHP
7856
06:15:21,958 --> 06:15:24,420
it's going to disappear from here as
7857
06:15:24,420 --> 06:15:27,240
well because that's the actual same file
7858
06:15:27,240 --> 06:15:28,440
storage
7859
06:15:28,440 --> 06:15:32,280
so let's type ls-la and we see right
7860
06:15:32,280 --> 06:15:34,320
here public HTML so basically I'm going
7861
06:15:34,320 --> 06:15:38,040
to remove this public HTML RM
7862
06:15:38,040 --> 06:15:40,080
Dash RF
7863
06:15:40,080 --> 06:15:42,780
public HTML that's going to delete this
7864
06:15:42,780 --> 06:15:45,298
public HTML and if we go in the L
7865
06:15:45,298 --> 06:15:47,340
Commerce folder right now
7866
06:15:47,340 --> 06:15:49,558
we don't see anything we don't have
7867
06:15:49,558 --> 06:15:52,798
public HTML anymore and if we check our
7868
06:15:52,798 --> 06:15:55,260
websites which is this is the admin
7869
06:15:55,260 --> 06:15:56,340
website
7870
06:15:56,340 --> 06:15:58,680
we don't see anything we see not found
7871
06:15:58,680 --> 06:16:00,840
page from hostinger
7872
06:16:00,840 --> 06:16:03,000
and if we check our another website
7873
06:16:03,000 --> 06:16:07,558
let's close these tabs another website
7874
06:16:07,558 --> 06:16:09,660
we're going to see not found right right
7875
06:16:09,660 --> 06:16:11,760
there as well
7876
06:16:11,760 --> 06:16:14,878
here we go now we need to clone our
7877
06:16:14,878 --> 06:16:18,360
application using our ssh in our file
7878
06:16:18,360 --> 06:16:21,900
system so let's clear up everything now
7879
06:16:21,900 --> 06:16:24,540
we are under l commerce.net so let's go
7880
06:16:24,540 --> 06:16:26,700
One Directory back and I'm going to
7881
06:16:26,700 --> 06:16:28,980
clone my application right here in this
7882
06:16:28,980 --> 06:16:30,900
lcommerce.net
7883
06:16:30,900 --> 06:16:34,440
I have my application on my GitHub so if
7884
06:16:34,440 --> 06:16:37,680
we open github.com the code holy go
7885
06:16:37,680 --> 06:16:39,900
under repositories
7886
06:16:39,900 --> 06:16:43,980
here is laravel view e-commerce okay let
7887
06:16:43,980 --> 06:16:46,378
me check if I have everything pushed so
7888
06:16:46,378 --> 06:16:49,458
I'm going to delete this password
7889
06:16:49,680 --> 06:16:51,900
let's check if I have everything pushed
7890
06:16:51,900 --> 06:16:55,080
yes I do have everything pushed
7891
06:16:55,080 --> 06:16:58,260
and I now I need to clone this before I
7892
06:16:58,260 --> 06:17:00,058
clone this I want to show you one very
7893
06:17:00,058 --> 06:17:01,620
important thing as well
7894
06:17:01,620 --> 06:17:03,718
so now we are connected right here using
7895
06:17:03,718 --> 06:17:07,320
username and password okay but I want to
7896
06:17:07,320 --> 06:17:09,840
connect using public private Keys as
7897
06:17:09,840 --> 06:17:10,980
well
7898
06:17:10,980 --> 06:17:13,558
how to do that if you go in the SSH
7899
06:17:13,558 --> 06:17:17,458
access right here we have ADD SSH key we
7900
06:17:17,458 --> 06:17:20,340
have to generate public private SSH keys
7901
06:17:20,340 --> 06:17:23,160
and edit them right here
7902
06:17:23,160 --> 06:17:25,820
okay what are public private SSH Keys
7903
06:17:25,820 --> 06:17:29,160
those are the authorization mechanism
7904
06:17:29,160 --> 06:17:32,580
modern today's like the most popular and
7905
06:17:32,580 --> 06:17:35,638
secure authorization mechanism so
7906
06:17:35,638 --> 06:17:38,100
basically you generate two keys public
7907
06:17:38,100 --> 06:17:41,940
and private Keys you save Private key on
7908
06:17:41,940 --> 06:17:44,160
your operating system and you don't
7909
06:17:44,160 --> 06:17:46,920
share it to anyone and you share your
7910
06:17:46,920 --> 06:17:50,040
public key to third parties for which
7911
06:17:50,040 --> 06:17:52,440
you basically want the authorization to
7912
06:17:52,440 --> 06:17:53,160
work
7913
06:17:53,160 --> 06:17:55,680
okay and we have to generate our public
7914
06:17:55,680 --> 06:17:58,680
private keys on Windows the most common
7915
06:17:58,680 --> 06:18:02,700
tool to generate them is putty gain but
7916
06:18:02,700 --> 06:18:04,680
I think yeah we do have put again I
7917
06:18:04,680 --> 06:18:07,138
think it comes with putty so if we open
7918
06:18:07,138 --> 06:18:09,780
this put again it's going to show The
7919
06:18:09,780 --> 06:18:12,840
Following window okay and we click this
7920
06:18:12,840 --> 06:18:15,600
generate button and basically we have to
7921
06:18:15,600 --> 06:18:18,620
move our Mouse randomly
7922
06:18:18,620 --> 06:18:21,780
to Generate random public private Keys
7923
06:18:21,780 --> 06:18:25,200
okay and now that was generated so we
7924
06:18:25,200 --> 06:18:28,080
have public key and we have to save our
7925
06:18:28,080 --> 06:18:31,320
public keys in private Keys just click
7926
06:18:31,320 --> 06:18:35,520
right here save public key and we have
7927
06:18:35,520 --> 06:18:37,620
to save this in a
7928
06:18:37,620 --> 06:18:40,160
specific location in that location
7929
06:18:40,160 --> 06:18:45,298
should be under your home folder
7930
06:18:45,298 --> 06:18:48,360
okay you can save it in else in
7931
06:18:48,360 --> 06:18:50,100
different places as well but that is
7932
06:18:50,100 --> 06:18:53,218
that is the most common common place and
7933
06:18:53,218 --> 06:18:56,160
also the SSH client will by default
7934
06:18:56,160 --> 06:18:58,860
search for your public private keys in
7935
06:18:58,860 --> 06:19:03,240
that place so under your home folder dot
7936
06:19:03,240 --> 06:19:04,558
SSH
7937
06:19:04,558 --> 06:19:06,480
okay and you have to save your public
7938
06:19:06,480 --> 06:19:09,058
private keys right here okay and for
7939
06:19:09,058 --> 06:19:11,160
your public Keys you just need to call
7940
06:19:11,160 --> 06:19:13,160
it ID
7941
06:19:13,160 --> 06:19:17,280
underscore rsa.pub and just click save I
7942
06:19:17,280 --> 06:19:18,660
I'm not going to save because I already
7943
06:19:18,660 --> 06:19:20,218
have that saved
7944
06:19:20,218 --> 06:19:23,100
and then click save Private key
7945
06:19:23,100 --> 06:19:25,558
and in this case it will ask you are you
7946
06:19:25,558 --> 06:19:27,000
sure you want to save this key without
7947
06:19:27,000 --> 06:19:29,940
passphrase to protect it so in this case
7948
06:19:29,940 --> 06:19:31,798
I'm going to give it yes I want to save
7949
06:19:31,798 --> 06:19:34,440
it without passphrase passphrase is kind
7950
06:19:34,440 --> 06:19:36,900
of additional security layer on top of
7951
06:19:36,900 --> 06:19:39,480
this public private keys but I want I
7952
06:19:39,480 --> 06:19:41,520
don't want these passphrase because I
7953
06:19:41,520 --> 06:19:42,600
want
7954
06:19:42,600 --> 06:19:45,900
I want whenever I try to log in inside
7955
06:19:45,900 --> 06:19:48,240
the server I don't want to enter any
7956
06:19:48,240 --> 06:19:51,420
kind of passwords there anymore okay and
7957
06:19:51,420 --> 06:19:53,520
if we if I just set the passphrase it's
7958
06:19:53,520 --> 06:19:55,440
going to ask me passphrase
7959
06:19:55,440 --> 06:19:57,420
okay I'm going to click yes right here
7960
06:19:57,420 --> 06:19:59,458
and again we have to specify the
7961
06:19:59,458 --> 06:20:03,480
location your home your username then
7962
06:20:03,480 --> 06:20:06,798
SSH folder and you have to call
7963
06:20:06,798 --> 06:20:13,340
your private key ID underscore RSA Dot
7964
06:20:13,340 --> 06:20:17,100
PPK I think I don't have any kind of PPK
7965
06:20:17,100 --> 06:20:19,980
files at the moment because I have my
7966
06:20:19,980 --> 06:20:22,860
public private Keys generated on a
7967
06:20:22,860 --> 06:20:24,480
different operating system on the Linux
7968
06:20:24,480 --> 06:20:26,218
operating system and then moved into
7969
06:20:26,218 --> 06:20:28,980
this machine so you just create ideas
7970
06:20:28,980 --> 06:20:32,218
say dot PPK and save it okay I'm not
7971
06:20:32,218 --> 06:20:36,798
going to save it instead I'm gonna load
7972
06:20:36,798 --> 06:20:40,138
my private key let's try to load my
7973
06:20:40,138 --> 06:20:42,680
private key
7974
06:20:43,798 --> 06:20:46,740
show all files and this is ideas this is
7975
06:20:46,740 --> 06:20:51,000
my private private key let's click open
7976
06:20:51,000 --> 06:20:53,458
that was actually imported okay this is
7977
06:20:53,458 --> 06:20:54,480
my
7978
06:20:54,480 --> 06:20:57,058
um my public key for my private key
7979
06:20:57,058 --> 06:20:59,940
okay I do definitely have public and
7980
06:20:59,940 --> 06:21:02,580
private keys and if you follow your the
7981
06:21:02,580 --> 06:21:04,440
instructions I showed to you you are
7982
06:21:04,440 --> 06:21:06,240
going to have public private Keys as
7983
06:21:06,240 --> 06:21:08,638
well generated we have to take our
7984
06:21:08,638 --> 06:21:12,298
public key and put in our
7985
06:21:12,298 --> 06:21:16,138
in our website okay so for this let's
7986
06:21:16,138 --> 06:21:18,180
basically open our home folder okay
7987
06:21:18,180 --> 06:21:21,240
here's my home folder let's open SSH
7988
06:21:21,240 --> 06:21:24,058
folder and inside there I actually have
7989
06:21:24,058 --> 06:21:25,920
multiple public private keys but this is
7990
06:21:25,920 --> 06:21:29,218
what I'm going to use idrc.pop
7991
06:21:29,218 --> 06:21:31,080
okay and then right click on this and
7992
06:21:31,080 --> 06:21:33,298
I'm going to open this using vs code or
7993
06:21:33,298 --> 06:21:35,280
you can open with any editor you prefer
7994
06:21:35,280 --> 06:21:38,638
and here is my public key so I'm going
7995
06:21:38,638 --> 06:21:41,280
to copy everything go in the browser
7996
06:21:41,280 --> 06:21:44,458
click add SSH key and paste this right
7997
06:21:44,458 --> 06:21:46,860
here and I'm going to give this name
7998
06:21:46,860 --> 06:21:50,638
which is which gives you some kind of
7999
06:21:50,638 --> 06:21:53,340
context to identify what kind of kind of
8000
06:21:53,340 --> 06:21:56,540
key is this so this is my
8001
06:21:56,540 --> 06:21:59,638
Windows laptop and I'm going to click
8002
06:21:59,638 --> 06:22:02,040
add SSH key
8003
06:22:02,040 --> 06:22:04,980
okay SSH key is successfully added on
8004
06:22:04,980 --> 06:22:08,580
the server and now I can authorize you
8005
06:22:08,580 --> 06:22:11,520
inside the SSH using putty without
8006
06:22:11,520 --> 06:22:13,378
entering password
8007
06:22:13,378 --> 06:22:17,040
okay password is less secure way than
8008
06:22:17,040 --> 06:22:19,260
public private keys so you should always
8009
06:22:19,260 --> 06:22:22,378
try to have authorization using public
8010
06:22:22,378 --> 06:22:25,378
private Keys now let's open
8011
06:22:25,378 --> 06:22:28,378
Puti okay this is our active session so
8012
06:22:28,378 --> 06:22:31,440
I'm gonna type exit right here and now
8013
06:22:31,440 --> 06:22:35,298
let's open hoodie and we have these
8014
06:22:35,298 --> 06:22:37,980
l-commerce.net I'm going to load and if
8015
06:22:37,980 --> 06:22:40,260
I click open it will ask me for password
8016
06:22:40,260 --> 06:22:43,138
that's because we need to configure our
8017
06:22:43,138 --> 06:22:45,540
putty to take to have a look at the
8018
06:22:45,540 --> 06:22:48,000
private key and try to authorize using
8019
06:22:48,000 --> 06:22:50,520
public private keys so let's actually
8020
06:22:50,520 --> 06:22:55,860
start new session and let's close this
8021
06:22:55,860 --> 06:22:58,378
and let's click on L commerce.net and
8022
06:22:58,378 --> 06:23:00,958
load this and now if you go under
8023
06:23:00,958 --> 06:23:04,638
connection and data connection sorry SSH
8024
06:23:04,638 --> 06:23:08,458
and Under auth This Is The Place private
8025
06:23:08,458 --> 06:23:11,520
key file for authentication so I'm going
8026
06:23:11,520 --> 06:23:13,980
to browse right here and choose our
8027
06:23:13,980 --> 06:23:18,360
private key so if I click my user folder
8028
06:23:18,360 --> 06:23:22,580
SSH and let's show all files right here
8029
06:23:22,580 --> 06:23:26,400
and choose ID RSA in your case it might
8030
06:23:26,400 --> 06:23:27,378
be called
8031
06:23:27,378 --> 06:23:29,760
idrsa.ppk but they are going to be the
8032
06:23:29,760 --> 06:23:33,058
same so I'm going to click idea say open
8033
06:23:33,058 --> 06:23:37,320
that and then I will go under session
8034
06:23:37,320 --> 06:23:40,320
again and click save
8035
06:23:40,320 --> 06:23:44,458
so this will associate my just specified
8036
06:23:44,458 --> 06:23:47,878
private key into loaded session and the
8037
06:23:47,878 --> 06:23:50,340
loaded session is lcommerce.net
8038
06:23:50,340 --> 06:23:53,458
now if I click open right here basically
8039
06:23:53,458 --> 06:23:56,458
it I should be authorized and able to
8040
06:23:56,458 --> 06:24:00,600
use key file okay opensh SSH to private
8041
06:24:00,600 --> 06:24:03,420
key new format so in my case I have a
8042
06:24:03,420 --> 06:24:06,360
different format than the server
8043
06:24:06,360 --> 06:24:10,520
requires so that's why I wasn't able to
8044
06:24:10,520 --> 06:24:12,780
authenticate but if you have just
8045
06:24:12,780 --> 06:24:15,298
generated your public private Keys you
8046
06:24:15,298 --> 06:24:18,058
should be able to authenticate in fact
8047
06:24:18,058 --> 06:24:22,860
let me make is make this um easy and I
8048
06:24:22,860 --> 06:24:25,558
can generate new public private keys or
8049
06:24:25,558 --> 06:24:27,120
I can convert
8050
06:24:27,120 --> 06:24:30,540
my existing private key into the new
8051
06:24:30,540 --> 06:24:33,900
version so let's try to open putty again
8052
06:24:33,900 --> 06:24:37,680
and let me open now
8053
06:24:37,680 --> 06:24:40,200
private key
8054
06:24:40,200 --> 06:24:43,558
from my home directory SSH folder
8055
06:24:43,558 --> 06:24:46,260
I'm going to choose ideas say and I'm
8056
06:24:46,260 --> 06:24:48,120
going to open this okay so that's
8057
06:24:48,120 --> 06:24:49,620
successfully imported and I'm going to
8058
06:24:49,620 --> 06:24:52,740
now save the private key I think it
8059
06:24:52,740 --> 06:24:55,558
needs PPK file so I'm going to click yes
8060
06:24:55,558 --> 06:24:59,940
right here go again in the whole the my
8061
06:24:59,940 --> 06:25:02,580
home folder zura SSH and I'm going to
8062
06:25:02,580 --> 06:25:07,740
call this ID underscore airsa dot PPK
8063
06:25:07,740 --> 06:25:11,100
okay this is the extension I think it
8064
06:25:11,100 --> 06:25:13,558
needs on Windows I'm going to hit save
8065
06:25:13,558 --> 06:25:15,540
right here I think the file was actually
8066
06:25:15,540 --> 06:25:19,620
saved now let's open booty and we need
8067
06:25:19,620 --> 06:25:21,840
to load L Commerce
8068
06:25:21,840 --> 06:25:26,340
and then go under connection SSH alph
8069
06:25:26,340 --> 06:25:29,760
and let's browse right here PPK file
8070
06:25:29,760 --> 06:25:32,580
open that let's click on session again
8071
06:25:32,580 --> 06:25:35,160
and hit save
8072
06:25:35,160 --> 06:25:38,400
then we click open right here and let's
8073
06:25:38,400 --> 06:25:41,160
wait here we go we are successfully
8074
06:25:41,160 --> 06:25:43,500
authorized using our public private Keys
8075
06:25:43,500 --> 06:25:47,760
okay I my again I mentioned this but my
8076
06:25:47,760 --> 06:25:49,440
public private Keys we are generated on
8077
06:25:49,440 --> 06:25:52,080
Linux and then I moved them copied them
8078
06:25:52,080 --> 06:25:53,878
on my windows as well because I use the
8079
06:25:53,878 --> 06:25:56,218
same public private keys on Windows and
8080
06:25:56,218 --> 06:25:58,320
Linux as well but if you just generated
8081
06:25:58,320 --> 06:26:00,120
your public private Keys you're gonna
8082
06:26:00,120 --> 06:26:02,700
name it dot PPK and you shouldn't have
8083
06:26:02,700 --> 06:26:03,958
any problems
8084
06:26:03,958 --> 06:26:06,298
okay now I'm on the server and again
8085
06:26:06,298 --> 06:26:09,600
let's type LS la
8086
06:26:09,600 --> 06:26:12,240
let's see right here we have this broken
8087
06:26:12,240 --> 06:26:15,660
symbolic link it tries to it is linked
8088
06:26:15,660 --> 06:26:18,480
to domains L commerce.net public HTML
8089
06:26:18,480 --> 06:26:21,120
but we deleted that public HTML from
8090
06:26:21,120 --> 06:26:24,420
domains which is fine no problem uh we
8091
06:26:24,420 --> 06:26:28,100
can even delete that symbolic link RM
8092
06:26:28,100 --> 06:26:34,400
RM Dash RF public HTML then
8093
06:26:34,400 --> 06:26:37,260
ls-la and we don't see this Pro can
8094
06:26:37,260 --> 06:26:40,440
simply click let's navigate into domains
8095
06:26:40,440 --> 06:26:42,780
and now I'm going to clone clear up
8096
06:26:42,780 --> 06:26:44,340
everything and I'm going to clone my
8097
06:26:44,340 --> 06:26:48,000
project right here let's open GitHub
8098
06:26:48,000 --> 06:26:53,458
and just copy the https URL
8099
06:26:53,458 --> 06:26:58,320
and then type git clone and paste this
8100
06:26:58,320 --> 06:27:02,160
URL okay but I'm gonna give it the same
8101
06:27:02,160 --> 06:27:05,100
name whatever is our domain
8102
06:27:05,100 --> 06:27:08,540
okay so in our case I'm gonna name it l
8103
06:27:08,540 --> 06:27:12,600
Commerce dot net
8104
06:27:12,600 --> 06:27:15,298
and let's hit the enter
8105
06:27:15,298 --> 06:27:17,580
it's going to clone our application in
8106
06:27:17,580 --> 06:27:21,260
the lcommerce.net and if I just type LS
8107
06:27:21,260 --> 06:27:26,040
La L commerce.net it's gonna show me
8108
06:27:26,040 --> 06:27:28,740
list of files and folders we have in the
8109
06:27:28,740 --> 06:27:31,558
lcommerce.net right now and if we open
8110
06:27:31,558 --> 06:27:33,000
browser
8111
06:27:33,000 --> 06:27:36,718
the file manager and if we just refresh
8112
06:27:36,718 --> 06:27:37,558
this
8113
06:27:37,558 --> 06:27:39,900
we're going to see those laravel files
8114
06:27:39,900 --> 06:27:42,958
and folders right here as well okay we
8115
06:27:42,958 --> 06:27:45,298
don't have vendor because vendor only
8116
06:27:45,298 --> 06:27:47,100
appears if you run composer install
8117
06:27:47,100 --> 06:27:50,280
right so let's just run composer install
8118
06:27:50,280 --> 06:27:52,878
here
8119
06:27:53,040 --> 06:27:55,798
what happened uh composer could not be
8120
06:27:55,798 --> 06:27:58,138
found yes we need to run composer
8121
06:27:58,138 --> 06:28:00,600
install from the lcommerce.net folder
8122
06:28:00,600 --> 06:28:03,900
right now we are under domains folder
8123
06:28:03,900 --> 06:28:06,660
look at this so if we navigate into
8124
06:28:06,660 --> 06:28:09,120
lcommerce.net
8125
06:28:09,120 --> 06:28:11,760
type ls-l-a
8126
06:28:11,760 --> 06:28:14,940
this is the files and folders we see and
8127
06:28:14,940 --> 06:28:17,580
we're going to run composer install
8128
06:28:17,580 --> 06:28:20,280
right here let's hit the enter
8129
06:28:20,280 --> 06:28:23,520
all right now we have small problem and
8130
06:28:23,520 --> 06:28:27,180
the problem tells us that we are we
8131
06:28:27,180 --> 06:28:29,400
don't have enough extensions PHP
8132
06:28:29,400 --> 06:28:31,080
extensions
8133
06:28:31,080 --> 06:28:34,320
okay first the problem one this package
8134
06:28:34,320 --> 06:28:39,080
requires PHP 8.1 by your PHP version
8135
06:28:39,080 --> 06:28:42,138
7.4 doesn't satisfy that requirement
8136
06:28:42,138 --> 06:28:46,798
that version 7.4 is by default set from
8137
06:28:46,798 --> 06:28:49,378
the when you create new application from
8138
06:28:49,378 --> 06:28:51,360
the hostinger age panel this is the
8139
06:28:51,360 --> 06:28:54,600
default version it is set okay so let's
8140
06:28:54,600 --> 06:28:58,620
go now in our age panel right here and
8141
06:28:58,620 --> 06:29:00,958
I'm going to search for PHP
8142
06:29:00,958 --> 06:29:03,180
so we need this under Advanced section
8143
06:29:03,180 --> 06:29:06,420
we see this PHP configuration this is an
8144
06:29:06,420 --> 06:29:08,940
excellent thing so I think
8145
06:29:08,940 --> 06:29:12,600
that's why I just love the singer shared
8146
06:29:12,600 --> 06:29:14,218
hosting Services because it gives you
8147
06:29:14,218 --> 06:29:16,080
possibility to configure as much as you
8148
06:29:16,080 --> 06:29:16,920
need
8149
06:29:16,920 --> 06:29:20,760
the PHP version we are using is 8.1 so
8150
06:29:20,760 --> 06:29:23,878
we're going to just change this and hit
8151
06:29:23,878 --> 06:29:25,320
the update
8152
06:29:25,320 --> 06:29:27,780
changing the PHP version will result PHP
8153
06:29:27,780 --> 06:29:30,240
extension values to default okay no
8154
06:29:30,240 --> 06:29:31,920
problem I'm going to click confirm right
8155
06:29:31,920 --> 06:29:33,718
here it's going to take a few seconds
8156
06:29:33,718 --> 06:29:36,058
until this is actually changed
8157
06:29:36,058 --> 06:29:39,480
and right now in our terminal
8158
06:29:39,480 --> 06:29:42,480
if we just type PHP Dash V
8159
06:29:42,480 --> 06:29:45,840
we have already 8.1
8160
06:29:45,840 --> 06:29:47,760
that was already changed and it was
8161
06:29:47,760 --> 06:29:50,580
immediately changed okay let's run
8162
06:29:50,580 --> 06:29:52,920
composer install again
8163
06:29:52,920 --> 06:29:55,620
now we have different problems
8164
06:29:55,620 --> 06:29:58,440
let's scroll up and have a look okay
8165
06:29:58,440 --> 06:30:01,740
composer runtime API I think
8166
06:30:01,740 --> 06:30:03,900
by default if we just clear up
8167
06:30:03,900 --> 06:30:06,058
everything by default this uses composer
8168
06:30:06,058 --> 06:30:08,400
version one so let's just type composer
8169
06:30:08,400 --> 06:30:12,900
dash dash version hit the enter
8170
06:30:12,900 --> 06:30:17,180
uh we see warnings and composer version
8171
06:30:17,180 --> 06:30:21,480
1.10 point something okay I think we can
8172
06:30:21,480 --> 06:30:23,700
update the composer we need to update
8173
06:30:23,700 --> 06:30:27,058
the composer and we have to run composer
8174
06:30:27,058 --> 06:30:30,240
self Dash update
8175
06:30:30,240 --> 06:30:33,058
okay once we do this uh it's gonna
8176
06:30:33,058 --> 06:30:35,520
download the latest version but the
8177
06:30:35,520 --> 06:30:37,558
latest version is one point something
8178
06:30:37,558 --> 06:30:40,740
one point latest so it's going to update
8179
06:30:40,740 --> 06:30:44,040
into one point latest version we need to
8180
06:30:44,040 --> 06:30:46,798
update into second latest version so we
8181
06:30:46,798 --> 06:30:49,620
have to type composer self update dash
8182
06:30:49,620 --> 06:30:53,280
dash 2 and hit the enter
8183
06:30:53,280 --> 06:30:56,280
now it is downloading the latest version
8184
06:30:56,280 --> 06:30:58,138
for version 2.
8185
06:30:58,138 --> 06:31:00,540
and let's see file system exception
8186
06:31:00,540 --> 06:31:02,878
composer update failed user local being
8187
06:31:02,878 --> 06:31:08,100
composer one far could not be written
8188
06:31:08,100 --> 06:31:11,700
okay so this user local Bean composer
8189
06:31:11,700 --> 06:31:15,240
one far so this is the place where
8190
06:31:15,240 --> 06:31:18,780
composer self update basically tries to
8191
06:31:18,780 --> 06:31:23,420
put it okay this is probably one small
8192
06:31:23,420 --> 06:31:26,340
not maybe disadvantage but a
8193
06:31:26,340 --> 06:31:29,000
configuration a restriction let's say
8194
06:31:29,000 --> 06:31:32,040
that the current version in this
8195
06:31:32,040 --> 06:31:34,740
hostinger Services is the composer
8196
06:31:34,740 --> 06:31:36,660
current version is version one if we
8197
06:31:36,660 --> 06:31:38,700
just try to update composer self update
8198
06:31:38,700 --> 06:31:40,378
version 2 that's not going to work
8199
06:31:40,378 --> 06:31:43,080
because we don't have root permissions
8200
06:31:43,080 --> 06:31:47,218
to update it and it should be updated
8201
06:31:47,218 --> 06:31:49,620
globally basically the order there
8202
06:31:49,620 --> 06:31:52,020
should be probably an option from this
8203
06:31:52,020 --> 06:31:54,540
hpanel to update
8204
06:31:54,540 --> 06:31:57,600
the composer to the version one I think
8205
06:31:57,600 --> 06:31:59,100
we don't have this
8206
06:31:59,100 --> 06:32:02,400
a possibility not sure I'm going to type
8207
06:32:02,400 --> 06:32:04,558
composer right here I think we don't
8208
06:32:04,558 --> 06:32:07,500
have anything related to this we have to
8209
06:32:07,500 --> 06:32:09,540
find a solution that's basically
8210
06:32:09,540 --> 06:32:11,878
um daily life of of the developer you
8211
06:32:11,878 --> 06:32:14,458
have problems you find the solutions so
8212
06:32:14,458 --> 06:32:17,700
in this case we need to use a local
8213
06:32:17,700 --> 06:32:20,458
composer so by default when we type
8214
06:32:20,458 --> 06:32:22,620
composer we see this is a global
8215
06:32:22,620 --> 06:32:25,680
composer and this is the version one but
8216
06:32:25,680 --> 06:32:27,958
now I'm going to download the composer
8217
06:32:27,958 --> 06:32:31,200
file far file locally which will be for
8218
06:32:31,200 --> 06:32:34,080
version two okay let's open Google and
8219
06:32:34,080 --> 06:32:35,840
just type download
8220
06:32:35,840 --> 06:32:39,420
composer far we want to download for the
8221
06:32:39,420 --> 06:32:41,820
latest version so I think we need to run
8222
06:32:41,820 --> 06:32:44,340
this following code okay let's just
8223
06:32:44,340 --> 06:32:47,160
paste this right here
8224
06:32:47,160 --> 06:32:49,980
everything using right click and here we
8225
06:32:49,980 --> 06:32:52,680
go so composer version 2.4.3
8226
06:32:52,680 --> 06:32:55,440
successfully installed 2 and here's the
8227
06:32:55,440 --> 06:32:58,260
location so it was installed right here
8228
06:32:58,260 --> 06:32:59,520
in this location
8229
06:32:59,520 --> 06:33:03,180
and let's hit the enter and if we just
8230
06:33:03,180 --> 06:33:04,100
type
8231
06:33:04,100 --> 06:33:07,378
ls-l-a we're going to see composer far
8232
06:33:07,378 --> 06:33:10,020
right here okay so we basically need to
8233
06:33:10,020 --> 06:33:13,500
execute this composer far using PHP and
8234
06:33:13,500 --> 06:33:15,840
it's going to give us version 2. so I'm
8235
06:33:15,840 --> 06:33:19,680
going to type PHP composer far
8236
06:33:19,680 --> 06:33:22,558
and let's hit the enter now this is
8237
06:33:22,558 --> 06:33:25,260
composer version 2. we see it right here
8238
06:33:25,260 --> 06:33:27,900
we don't see any warnings by the way and
8239
06:33:27,900 --> 06:33:31,260
if we just type composer for test Dash
8240
06:33:31,260 --> 06:33:34,320
version he didn't enter we see version
8241
06:33:34,320 --> 06:33:37,500
two so we basically need to run
8242
06:33:37,500 --> 06:33:41,820
PHP composer far install
8243
06:33:41,820 --> 06:33:44,218
space right here and install
8244
06:33:44,218 --> 06:33:46,260
let's hit the enter now it is
8245
06:33:46,260 --> 06:33:48,600
downloading all the packages our laravel
8246
06:33:48,600 --> 06:33:49,980
application needs
8247
06:33:49,980 --> 06:33:53,160
we have the correct version of PHP 8.1
8248
06:33:53,160 --> 06:33:55,320
and we have the correct version of
8249
06:33:55,320 --> 06:33:57,420
composer in this case we used the local
8250
06:33:57,420 --> 06:33:59,820
composer because the global composer
8251
06:33:59,820 --> 06:34:02,940
basically was referring to the composer
8252
06:34:02,940 --> 06:34:06,000
version one okay it should not take much
8253
06:34:06,000 --> 06:34:08,580
time until this is downloaded I'm gonna
8254
06:34:08,580 --> 06:34:11,400
pause recording and then continue okay
8255
06:34:11,400 --> 06:34:14,580
so that was actually finished and we
8256
06:34:14,580 --> 06:34:18,000
need to now create a local en file so if
8257
06:34:18,000 --> 06:34:22,500
we just type LS again La we see right
8258
06:34:22,500 --> 06:34:25,558
here enf example but we don't see en
8259
06:34:25,558 --> 06:34:28,440
file okay so I'm going to run CP which
8260
06:34:28,440 --> 06:34:31,860
means copy so I want to copy en dot
8261
06:34:31,860 --> 06:34:35,638
example into enf and then we need to use
8262
06:34:35,638 --> 06:34:38,940
veeam which is an very popular text
8263
06:34:38,940 --> 06:34:40,620
editor
8264
06:34:40,620 --> 06:34:44,160
to open this EnV file and we're going to
8265
06:34:44,160 --> 06:34:46,500
modify a few things right here once you
8266
06:34:46,500 --> 06:34:49,138
are inside the veeam you have to type I
8267
06:34:49,138 --> 06:34:52,200
on your keyboard to go in the insert
8268
06:34:52,200 --> 06:34:54,298
mode and let's change the application
8269
06:34:54,298 --> 06:34:56,340
name which is
8270
06:34:56,340 --> 06:35:00,260
let's put use double quotes
8271
06:35:00,260 --> 06:35:04,920
laravel e-commerce okay so we can leave
8272
06:35:04,920 --> 06:35:06,840
the environment local at the moment and
8273
06:35:06,840 --> 06:35:08,820
make sure that everything works so far
8274
06:35:08,820 --> 06:35:11,520
let's specify right here our application
8275
06:35:11,520 --> 06:35:17,000
URL and our application URL is https L
8276
06:35:17,000 --> 06:35:19,558
commerce.net okay what options do we
8277
06:35:19,558 --> 06:35:21,298
need if we scroll down below we need to
8278
06:35:21,298 --> 06:35:23,760
create mySQL database which we haven't
8279
06:35:23,760 --> 06:35:25,798
created by the way and then run
8280
06:35:25,798 --> 06:35:29,520
migrations so let me leave this open and
8281
06:35:29,520 --> 06:35:33,120
now let's create mySQL database let's go
8282
06:35:33,120 --> 06:35:36,240
and search for database right here
8283
06:35:36,240 --> 06:35:39,240
here we see MySQL databases I'm going to
8284
06:35:39,240 --> 06:35:42,600
click on this and let's specify the name
8285
06:35:42,600 --> 06:35:45,420
database name L Commerce
8286
06:35:45,420 --> 06:35:47,400
okay and that's going to be our full
8287
06:35:47,400 --> 06:35:50,400
database name this is the prefix this is
8288
06:35:50,400 --> 06:35:53,420
our name L Commerce
8289
06:35:53,420 --> 06:35:57,000
the username we can specify the same
8290
06:35:57,000 --> 06:35:59,700
username and password I'm going to
8291
06:35:59,700 --> 06:36:01,920
Generate random password take this
8292
06:36:01,920 --> 06:36:03,138
password
8293
06:36:03,138 --> 06:36:07,378
and put this in our in file by the way
8294
06:36:07,378 --> 06:36:11,218
you can edit your en file from here as
8295
06:36:11,218 --> 06:36:13,920
well if you just refresh this page we
8296
06:36:13,920 --> 06:36:16,500
are going to see en right here just
8297
06:36:16,500 --> 06:36:19,798
click on this and click edit so we can
8298
06:36:19,798 --> 06:36:22,440
do editing from here as well okay maybe
8299
06:36:22,440 --> 06:36:24,480
that's that's better for you
8300
06:36:24,480 --> 06:36:27,120
so right here I'm going to specify the
8301
06:36:27,120 --> 06:36:30,020
connection is MySQL the host is
8302
06:36:30,020 --> 06:36:33,138
localhost or
8303
06:36:33,138 --> 06:36:36,360
12127001 this is the port everything is
8304
06:36:36,360 --> 06:36:39,000
default let's adjust now database
8305
06:36:39,000 --> 06:36:40,860
username and password I have password
8306
06:36:40,860 --> 06:36:42,660
copied so I'm going to put this right
8307
06:36:42,660 --> 06:36:45,138
here so this is the database password
8308
06:36:45,138 --> 06:36:49,020
now let's take the let's take the
8309
06:36:49,020 --> 06:36:52,378
database name the database name is let's
8310
06:36:52,378 --> 06:36:55,740
delete everything the prefix and then L
8311
06:36:55,740 --> 06:36:57,600
Commerce
8312
06:36:57,600 --> 06:37:00,900
and username is the same thing
8313
06:37:00,900 --> 06:37:03,840
prefix and L Commerce
8314
06:37:03,840 --> 06:37:06,780
all right now let's go down below we
8315
06:37:06,780 --> 06:37:08,820
don't need to change anything right here
8316
06:37:08,820 --> 06:37:13,558
okay and we are going to create new
8317
06:37:13,558 --> 06:37:16,200
email custom email and we're going to
8318
06:37:16,200 --> 06:37:18,540
configure this right here but let's
8319
06:37:18,540 --> 06:37:20,340
leave this until now just to make sure
8320
06:37:20,340 --> 06:37:22,020
that the website works
8321
06:37:22,020 --> 06:37:24,360
if you scroll down below we have to
8322
06:37:24,360 --> 06:37:26,120
provide
8323
06:37:26,120 --> 06:37:28,940
stripe Keys as well but let's actually
8324
06:37:28,940 --> 06:37:32,040
save everything to save everything we're
8325
06:37:32,040 --> 06:37:35,458
going to hit escape on our keyboard then
8326
06:37:35,458 --> 06:37:39,058
we're going to type colon W which means
8327
06:37:39,058 --> 06:37:41,820
to write the changes on the inside the
8328
06:37:41,820 --> 06:37:45,480
file and then Q to quit basically from
8329
06:37:45,480 --> 06:37:49,500
the file I'm going to hit enter okay and
8330
06:37:49,500 --> 06:37:52,620
what else do we have remained I think we
8331
06:37:52,620 --> 06:37:55,440
have to generate the ANSI key but let's
8332
06:37:55,440 --> 06:37:58,680
check first the browser in the browser
8333
06:37:58,680 --> 06:38:01,558
we don't see anything yet because we
8334
06:38:01,558 --> 06:38:03,958
have one very important thing missing
8335
06:38:03,958 --> 06:38:07,558
okay we don't have public HTML under L
8336
06:38:07,558 --> 06:38:10,080
Commerce folder and by default it
8337
06:38:10,080 --> 06:38:12,680
searches for public HTML if we type
8338
06:38:12,680 --> 06:38:15,600
ls-l-a we don't see public HTML right
8339
06:38:15,600 --> 06:38:18,600
here but we have public folder
8340
06:38:18,600 --> 06:38:21,480
if we just create a symbolic link
8341
06:38:21,480 --> 06:38:25,740
from public into public HTML then it
8342
06:38:25,740 --> 06:38:26,878
should work
8343
06:38:26,878 --> 06:38:29,100
so for creating a symbolic link we're
8344
06:38:29,100 --> 06:38:34,500
going to type Ln Dash public dash s
8345
06:38:34,500 --> 06:38:37,558
public needs to be linked inside public
8346
06:38:37,558 --> 06:38:40,860
underscore HTML so let's hit enter
8347
06:38:40,860 --> 06:38:42,780
now we should see symbolic link right
8348
06:38:42,780 --> 06:38:46,020
here actually we see that and if we open
8349
06:38:46,020 --> 06:38:48,840
our browser and reload it we're gonna
8350
06:38:48,840 --> 06:38:51,120
see some kind of error okay this is
8351
06:38:51,120 --> 06:38:53,638
larval error that tells no application
8352
06:38:53,638 --> 06:38:56,520
encryption key has been specified and
8353
06:38:56,520 --> 06:38:59,280
that is exactly what I expected now we
8354
06:38:59,280 --> 06:39:01,440
are in the project main directory and
8355
06:39:01,440 --> 06:39:05,058
we're going to run PHP artisan
8356
06:39:05,058 --> 06:39:10,860
uh T colon generate a insi
8357
06:39:10,860 --> 06:39:13,378
let's hit the enter application key set
8358
06:39:13,378 --> 06:39:15,718
successfully and if we just reload the
8359
06:39:15,718 --> 06:39:16,680
page
8360
06:39:16,680 --> 06:39:18,718
now we see problem about the database
8361
06:39:18,718 --> 06:39:20,780
okay now we're going to run migrations
8362
06:39:20,780 --> 06:39:24,718
PHP Artisan migrate
8363
06:39:24,718 --> 06:39:28,440
and let's run seed as well dash dash
8364
06:39:28,440 --> 06:39:29,760
seed
8365
06:39:29,760 --> 06:39:31,920
let's hit the enter we have the problem
8366
06:39:31,920 --> 06:39:33,718
access denied for user did we actually
8367
06:39:33,718 --> 06:39:35,940
finish creating database I think we we
8368
06:39:35,940 --> 06:39:37,980
haven't finished that so we have to
8369
06:39:37,980 --> 06:39:40,320
click create right here it's going to
8370
06:39:40,320 --> 06:39:41,878
take a few seconds database created
8371
06:39:41,878 --> 06:39:43,558
successfully and we have the database
8372
06:39:43,558 --> 06:39:46,798
right here and now let's rerun PHP
8373
06:39:46,798 --> 06:39:50,120
design migrate dash dash seed
8374
06:39:50,120 --> 06:39:52,798
and here it goes
8375
06:39:52,798 --> 06:39:55,798
now it it is running migrations it runs
8376
06:39:55,798 --> 06:39:58,440
admin user Cedar and Country Cedar as
8377
06:39:58,440 --> 06:40:02,340
well and if we open our website and
8378
06:40:02,340 --> 06:40:05,280
reload it now we have the problem which
8379
06:40:05,280 --> 06:40:10,080
is basically about the vue.js not the
8380
06:40:10,080 --> 06:40:13,620
view JS but the white because of white
8381
06:40:13,620 --> 06:40:16,860
so we don't have white manifest file we
8382
06:40:16,860 --> 06:40:19,980
need to run npm run build let's all open
8383
06:40:19,980 --> 06:40:22,500
our project we can do this from here as
8384
06:40:22,500 --> 06:40:25,500
well but not sure if we have npm do we
8385
06:40:25,500 --> 06:40:28,200
have node.js and npm here no we don't
8386
06:40:28,200 --> 06:40:30,540
have that we can go ahead and install it
8387
06:40:30,540 --> 06:40:32,820
right here but it is not necessary we
8388
06:40:32,820 --> 06:40:34,740
can open our project
8389
06:40:34,740 --> 06:40:37,500
we can bring up the terminal and I'm
8390
06:40:37,500 --> 06:40:41,878
going to run npm run build
8391
06:40:41,878 --> 06:40:45,780
okay that's gonna create and build
8392
06:40:45,780 --> 06:40:47,940
and create these build folder under
8393
06:40:47,940 --> 06:40:50,940
public so if we now check
8394
06:40:50,940 --> 06:40:54,180
under public we have this build folder
8395
06:40:54,180 --> 06:40:57,600
okay and we have to commit and push this
8396
06:40:57,600 --> 06:41:01,378
build folder and then pull the changes
8397
06:41:01,378 --> 06:41:04,558
right here okay using git so I'm going
8398
06:41:04,558 --> 06:41:07,920
to go and comment the changes
8399
06:41:07,920 --> 06:41:12,180
I think this build might be even ignored
8400
06:41:12,180 --> 06:41:15,000
I think it is ignored but I'm gonna just
8401
06:41:15,000 --> 06:41:17,040
remove it from git ignore
8402
06:41:17,040 --> 06:41:20,638
so if I open git ignore and search for
8403
06:41:20,638 --> 06:41:23,160
public build it is added right here so
8404
06:41:23,160 --> 06:41:26,040
basically purpose why the spill
8405
06:41:26,040 --> 06:41:29,280
directory is added under uh here in the
8406
06:41:29,280 --> 06:41:30,840
git ignore is that
8407
06:41:30,840 --> 06:41:33,600
the it is a generated file build file
8408
06:41:33,600 --> 06:41:35,638
and it can be generated on any platform
8409
06:41:35,638 --> 06:41:37,740
so basically if we have node.js right
8410
06:41:37,740 --> 06:41:40,378
here and if we just run npm install and
8411
06:41:40,378 --> 06:41:43,020
then npm run build we would be able to
8412
06:41:43,020 --> 06:41:46,558
generate it from here as well but I
8413
06:41:46,558 --> 06:41:48,120
think the easiest solution will be just
8414
06:41:48,120 --> 06:41:50,580
to remove it from here at the moment we
8415
06:41:50,580 --> 06:41:52,080
save it
8416
06:41:52,080 --> 06:41:53,878
now I'm going to make
8417
06:41:53,878 --> 06:41:55,378
I'm going to comment those changes
8418
06:41:55,378 --> 06:41:57,360
basically I can comment from terminal as
8419
06:41:57,360 --> 06:42:00,480
well it status and here's the public
8420
06:42:00,480 --> 06:42:04,620
build so let's add git head
8421
06:42:04,620 --> 06:42:08,638
public build okay let's type git status
8422
06:42:08,638 --> 06:42:11,100
and we see those those changes right
8423
06:42:11,100 --> 06:42:13,620
here and let's comment and we have to
8424
06:42:13,620 --> 06:42:17,458
also add a git ignore as well so git add
8425
06:42:17,458 --> 06:42:21,180
Dot git ignore
8426
06:42:21,180 --> 06:42:22,558
hit the enter
8427
06:42:22,558 --> 06:42:25,620
now again git status and we see those
8428
06:42:25,620 --> 06:42:27,360
changes right there let's comment them
8429
06:42:27,360 --> 06:42:33,000
hit commit minus M Aid build directory
8430
06:42:33,000 --> 06:42:35,940
let's hit enter now we need to push our
8431
06:42:35,940 --> 06:42:39,360
changes kit push origin main okay we'll
8432
06:42:39,360 --> 06:42:41,580
push them now let's open our project
8433
06:42:41,580 --> 06:42:44,760
terminal this is our project true
8434
06:42:44,760 --> 06:42:47,520
directory and I'm going to run git pool
8435
06:42:47,520 --> 06:42:49,680
origin Main
8436
06:42:49,680 --> 06:42:53,100
if we hit the enter now our changes have
8437
06:42:53,100 --> 06:42:56,940
been pulled and if we just reload
8438
06:42:56,940 --> 06:43:00,718
we see the home page up and running we
8439
06:43:00,718 --> 06:43:03,600
don't have any product pro products at
8440
06:43:03,600 --> 06:43:06,058
the moment but we do have the login
8441
06:43:06,058 --> 06:43:08,940
registration all of that should actually
8442
06:43:08,940 --> 06:43:11,820
successfully work now let's deploy our
8443
06:43:11,820 --> 06:43:14,520
vue.js application so that log in and
8444
06:43:14,520 --> 06:43:17,458
create products right there okay this is
8445
06:43:17,458 --> 06:43:19,740
it and it shows not found deploying
8446
06:43:19,740 --> 06:43:22,620
view.js application is much easier so
8447
06:43:22,620 --> 06:43:24,540
let's go in the project and let's
8448
06:43:24,540 --> 06:43:26,240
navigate into
8449
06:43:26,240 --> 06:43:29,940
backend okay we will have that right
8450
06:43:29,940 --> 06:43:31,320
here
8451
06:43:31,320 --> 06:43:33,660
under back end and I'm going to run npm
8452
06:43:33,660 --> 06:43:39,000
run build and that is going to generate
8453
06:43:39,000 --> 06:43:42,058
build files let's wait here we see this
8454
06:43:42,058 --> 06:43:45,480
folder let's go in the backend
8455
06:43:45,480 --> 06:43:48,180
and right here we see this dist folder
8456
06:43:48,180 --> 06:43:50,580
okay and everything basically we should
8457
06:43:50,580 --> 06:43:52,400
take everything from this this folder
8458
06:43:52,400 --> 06:43:56,458
and put it in the directory we mapped
8459
06:43:56,458 --> 06:44:00,660
into our uh into our subdomain so in
8460
06:44:00,660 --> 06:44:03,600
this case we mapped everything from the
8461
06:44:03,600 --> 06:44:06,660
public so if we go inside let's refresh
8462
06:44:06,660 --> 06:44:08,280
everything
8463
06:44:08,280 --> 06:44:10,920
we should see right here public HTML as
8464
06:44:10,920 --> 06:44:14,340
well here we go so inside there we need
8465
06:44:14,340 --> 06:44:17,638
to create right here admin folder and if
8466
06:44:17,638 --> 06:44:19,980
we open that we're going to put our
8467
06:44:19,980 --> 06:44:21,540
files right here
8468
06:44:21,540 --> 06:44:23,638
so here are our files I'm going to open
8469
06:44:23,638 --> 06:44:26,700
this in a file system
8470
06:44:26,700 --> 06:44:28,980
on our file system
8471
06:44:28,980 --> 06:44:32,218
then basically let's open browser and
8472
06:44:32,218 --> 06:44:35,760
then these files and I'm going to drag
8473
06:44:35,760 --> 06:44:38,700
and drop those files right here in this
8474
06:44:38,700 --> 06:44:40,138
admin
8475
06:44:40,138 --> 06:44:42,420
there are not much files let's click
8476
06:44:42,420 --> 06:44:44,240
upload it's going to take few seconds
8477
06:44:44,240 --> 06:44:48,558
until all theme is uploaded
8478
06:44:49,860 --> 06:44:52,440
and let's have a look
8479
06:44:52,440 --> 06:44:55,500
let's reload the page
8480
06:44:55,500 --> 06:44:58,260
and here we go so we see our application
8481
06:44:58,260 --> 06:45:01,980
and now let's try to log in with the
8482
06:45:01,980 --> 06:45:04,500
admin username and password we gave it
8483
06:45:04,500 --> 06:45:07,320
in the admin user Cedar so we have this
8484
06:45:07,320 --> 06:45:10,920
admin user Cedar and there we specified
8485
06:45:10,920 --> 06:45:13,320
admin one two three to be the password
8486
06:45:13,320 --> 06:45:16,138
so let's specify username to be admin at
8487
06:45:16,138 --> 06:45:17,580
example.com
8488
06:45:17,580 --> 06:45:19,680
the password will be admin one to three
8489
06:45:19,680 --> 06:45:22,500
and let's click sign in but I'm going to
8490
06:45:22,500 --> 06:45:24,480
also inspect and have a look in the
8491
06:45:24,480 --> 06:45:27,058
network just in case there are some
8492
06:45:27,058 --> 06:45:28,080
errors
8493
06:45:28,080 --> 06:45:29,700
to observe it
8494
06:45:29,700 --> 06:45:33,540
there are no errors and we are actually
8495
06:45:33,540 --> 06:45:35,100
able
8496
06:45:35,100 --> 06:45:37,500
to successfully
8497
06:45:37,500 --> 06:45:40,320
logging into the backend
8498
06:45:40,320 --> 06:45:44,040
however however look at this so we don't
8499
06:45:44,040 --> 06:45:46,740
have any products we don't have any paid
8500
06:45:46,740 --> 06:45:48,840
orders but we see numbers right here
8501
06:45:48,840 --> 06:45:52,320
okay that happened because
8502
06:45:52,320 --> 06:45:55,558
when we build our vue.js application it
8503
06:45:55,558 --> 06:45:56,700
used
8504
06:45:56,700 --> 06:46:00,480
the domain of our local API not the
8505
06:46:00,480 --> 06:46:02,700
production API okay we didn't specify
8506
06:46:02,700 --> 06:46:03,540
this
8507
06:46:03,540 --> 06:46:05,878
and if we just click login for example
8508
06:46:05,878 --> 06:46:09,600
look at this the URL basically is the
8509
06:46:09,600 --> 06:46:12,718
localhost port 8000 okay and this is
8510
06:46:12,718 --> 06:46:14,878
something we have to adjust so we have
8511
06:46:14,878 --> 06:46:17,820
right here dot EnV and the dot en
8512
06:46:17,820 --> 06:46:21,058
basically corresponds to inside the dot
8513
06:46:21,058 --> 06:46:23,280
EnV we have this base URL to be
8514
06:46:23,280 --> 06:46:25,920
localhost Port 8000. we need to create
8515
06:46:25,920 --> 06:46:28,920
another en file which should be for
8516
06:46:28,920 --> 06:46:30,240
production
8517
06:46:30,240 --> 06:46:33,360
Dot en.production
8518
06:46:33,360 --> 06:46:37,138
and we can have a look at the white
8519
06:46:37,138 --> 06:46:40,080
let's search for white environment
8520
06:46:40,080 --> 06:46:42,058
variables
8521
06:46:42,058 --> 06:46:47,638
or byte for example.en production
8522
06:46:47,878 --> 06:46:51,660
okay so if we just click right here
8523
06:46:51,660 --> 06:46:54,478
so you can read these section but
8524
06:46:54,478 --> 06:46:57,540
basically as far as I remember if we
8525
06:46:57,540 --> 06:47:00,240
just have these em dot mode in this case
8526
06:47:00,240 --> 06:47:02,878
production and we build that it's going
8527
06:47:02,878 --> 06:47:04,400
to take
8528
06:47:04,400 --> 06:47:08,160
the this byte API based URL from this
8529
06:47:08,160 --> 06:47:11,100
enf production so I'm going to basically
8530
06:47:11,100 --> 06:47:14,760
modify now these in production and call
8531
06:47:14,760 --> 06:47:17,340
this https
8532
06:47:17,340 --> 06:47:18,958
L Commerce
8533
06:47:18,958 --> 06:47:21,740
.net
8534
06:47:21,840 --> 06:47:23,638
so I save this
8535
06:47:23,638 --> 06:47:26,458
I open the terminal and run npm run
8536
06:47:26,458 --> 06:47:28,138
build again that's going to take few
8537
06:47:28,138 --> 06:47:31,020
seconds okay as soon as this is done I'm
8538
06:47:31,020 --> 06:47:34,260
going to open the file manager and I'm
8539
06:47:34,260 --> 06:47:35,700
going to delete
8540
06:47:35,700 --> 06:47:37,440
all the
8541
06:47:37,440 --> 06:47:39,600
files from here
8542
06:47:39,600 --> 06:47:42,058
and re-upload
8543
06:47:42,058 --> 06:47:46,138
then these files now the Javascript file
8544
06:47:46,138 --> 06:47:49,080
which is inside the assets folder will
8545
06:47:49,080 --> 06:47:51,958
correspond to production server not
8546
06:47:51,958 --> 06:47:55,020
local server and if we open our admin
8547
06:47:55,020 --> 06:47:57,660
and reload the page
8548
06:47:57,660 --> 06:48:00,780
we see not found that's that's
8549
06:48:00,780 --> 06:48:02,280
understandable we're going to fix this
8550
06:48:02,280 --> 06:48:05,280
not found as well okay and let's now try
8551
06:48:05,280 --> 06:48:09,540
to log in with admin in admin123 and hit
8552
06:48:09,540 --> 06:48:12,840
sign in okay now we see everything is
8553
06:48:12,840 --> 06:48:16,978
zero because there are no products no
8554
06:48:16,978 --> 06:48:18,958
orders nothing is there everything is
8555
06:48:18,958 --> 06:48:21,058
empty if we go in the products empty
8556
06:48:21,058 --> 06:48:24,840
database orders empty users we have only
8557
06:48:24,840 --> 06:48:27,180
one admin user which is the logged in
8558
06:48:27,180 --> 06:48:30,180
one we have customers and we have
8559
06:48:30,180 --> 06:48:32,940
reports okay everything is empty
8560
06:48:32,940 --> 06:48:36,120
however if I just reload this right now
8561
06:48:36,120 --> 06:48:39,180
we have this not bound problem
8562
06:48:39,180 --> 06:48:41,700
so that happens because
8563
06:48:41,700 --> 06:48:44,458
our web server is configured that it
8564
06:48:44,458 --> 06:48:48,180
tries to find a file or folder this path
8565
06:48:48,180 --> 06:48:49,558
at this path
8566
06:48:49,558 --> 06:48:51,298
so we basically need to change the
8567
06:48:51,298 --> 06:48:53,940
configuration so that everything needs
8568
06:48:53,940 --> 06:48:56,400
to be redirected to the index HTML
8569
06:48:56,400 --> 06:49:00,000
because the index.html in our case is
8570
06:49:00,000 --> 06:49:02,638
the file which takes all the requests
8571
06:49:02,638 --> 06:49:05,458
okay and this is processed by JavaScript
8572
06:49:05,458 --> 06:49:08,700
not by the server side now we have to
8573
06:49:08,700 --> 06:49:10,740
open file manager
8574
06:49:10,740 --> 06:49:12,840
inside which we have this admin
8575
06:49:12,840 --> 06:49:15,478
basically deployed and right here we're
8576
06:49:15,478 --> 06:49:18,320
going to create new file called dot
8577
06:49:18,320 --> 06:49:21,478
htaccess that is the Apache
8578
06:49:21,478 --> 06:49:23,400
configuration file and we have to
8579
06:49:23,400 --> 06:49:26,100
configure it so that everything should
8580
06:49:26,100 --> 06:49:28,558
be redirected to the index HTML so let's
8581
06:49:28,558 --> 06:49:32,580
click this HD access and click edit
8582
06:49:32,580 --> 06:49:34,260
and I'm going to specify right here
8583
06:49:34,260 --> 06:49:36,718
first we're going to enable rewrite
8584
06:49:36,718 --> 06:49:40,500
engine so rewrite engine
8585
06:49:40,500 --> 06:49:43,978
on uppercase O then we're going to write
8586
06:49:43,978 --> 06:49:46,020
rewrite conditions
8587
06:49:46,020 --> 06:49:47,760
we write
8588
06:49:47,760 --> 06:49:51,240
cond we have to specify right here
8589
06:49:51,240 --> 06:49:55,440
the request file name request
8590
06:49:55,440 --> 06:49:57,660
file name
8591
06:49:57,660 --> 06:50:00,058
space
8592
06:50:00,058 --> 06:50:03,478
exclamation Dash F so basically this
8593
06:50:03,478 --> 06:50:06,478
means the request file name the request
8594
06:50:06,478 --> 06:50:08,700
file name is everything after the domain
8595
06:50:08,700 --> 06:50:10,200
okay
8596
06:50:10,200 --> 06:50:12,600
and we specify if the request file name
8597
06:50:12,600 --> 06:50:15,660
doesn't equal to file and we have to
8598
06:50:15,660 --> 06:50:19,440
copy this and put this and change this
8599
06:50:19,440 --> 06:50:22,500
into D and if the request file name is
8600
06:50:22,500 --> 06:50:24,138
not a directory
8601
06:50:24,138 --> 06:50:29,580
then inside rewrite rule we write that
8602
06:50:29,580 --> 06:50:31,558
should be everything redirected into
8603
06:50:31,558 --> 06:50:33,478
index HTML
8604
06:50:33,478 --> 06:50:37,558
okay and we hit save right here and
8605
06:50:37,558 --> 06:50:40,260
let's now refresh
8606
06:50:40,260 --> 06:50:43,260
and here we go so now we see up
8607
06:50:43,260 --> 06:50:45,900
dashboard if we go on another page and
8608
06:50:45,900 --> 06:50:49,440
reload that Apache understands that it
8609
06:50:49,440 --> 06:50:52,260
needs to redirect to the index.html and
8610
06:50:52,260 --> 06:50:54,660
we see our application okay and just
8611
06:50:54,660 --> 06:50:57,240
like this we deployed our vue.js
8612
06:50:57,240 --> 06:50:58,798
application
8613
06:50:58,798 --> 06:51:02,218
now we need to take custom email address
8614
06:51:02,218 --> 06:51:04,020
create custom email address and
8615
06:51:04,020 --> 06:51:06,478
Implement email sending with that custom
8616
06:51:06,478 --> 06:51:09,478
email address let me close all the tabs
8617
06:51:09,478 --> 06:51:12,000
I don't need them at the moment and if
8618
06:51:12,000 --> 06:51:13,860
we go in the register now and fill up
8619
06:51:13,860 --> 06:51:16,200
the form it's not going to send us an
8620
06:51:16,200 --> 06:51:18,900
email because we don't have eno file
8621
06:51:18,900 --> 06:51:22,400
configured correctly okay if I go in the
8622
06:51:22,400 --> 06:51:27,000
ecommerce.net and click on this EnV and
8623
06:51:27,000 --> 06:51:30,600
edit that scroll down below we see in
8624
06:51:30,600 --> 06:51:33,600
the mailer section we have a mail hog
8625
06:51:33,600 --> 06:51:35,218
right here which is basically for local
8626
06:51:35,218 --> 06:51:38,458
testing okay let's create now custom
8627
06:51:38,458 --> 06:51:41,520
email address configure it right here so
8628
06:51:41,520 --> 06:51:43,978
that when the user registers the email
8629
06:51:43,978 --> 06:51:48,080
is sent basically from let's say info at
8630
06:51:48,080 --> 06:51:51,240
lcommerce.net from that email address
8631
06:51:51,240 --> 06:51:54,900
okay for this we need to search
8632
06:51:54,900 --> 06:51:57,660
email section right here
8633
06:51:57,660 --> 06:52:00,600
emails go to control panel and we have
8634
06:52:00,600 --> 06:52:03,360
to select the plan for our eCommerce so
8635
06:52:03,360 --> 06:52:05,940
we can take a business email which has
8636
06:52:05,940 --> 06:52:08,040
couple of advantages like email
8637
06:52:08,040 --> 06:52:11,700
templates and send later feature and
8638
06:52:11,700 --> 06:52:13,500
follow-up reminders
8639
06:52:13,500 --> 06:52:16,260
but I think we don't need that at the
8640
06:52:16,260 --> 06:52:18,360
moment so I'm going to click this free
8641
06:52:18,360 --> 06:52:19,860
email
8642
06:52:19,860 --> 06:52:22,500
select right here
8643
06:52:22,500 --> 06:52:24,900
email plan was successfully selected and
8644
06:52:24,900 --> 06:52:26,700
right here we have to create now uh
8645
06:52:26,700 --> 06:52:29,298
email and I'm going to call this info
8646
06:52:29,298 --> 06:52:35,298
info at lcommerce.net and let's generate
8647
06:52:35,298 --> 06:52:39,020
random password for our email info at
8648
06:52:39,020 --> 06:52:41,420
lcommerce.net let me actually I can
8649
06:52:41,420 --> 06:52:44,458
specify or automatically generate
8650
06:52:44,458 --> 06:52:48,958
password so let's create new account uh
8651
06:52:48,958 --> 06:52:50,580
we're going to specify by the way the
8652
06:52:50,580 --> 06:52:52,558
recovery email address as well I'm going
8653
06:52:52,558 --> 06:52:56,040
to specify this as my email address and
8654
06:52:56,040 --> 06:52:58,978
create new account okay so the email was
8655
06:52:58,978 --> 06:53:01,860
actually created and in fact we can now
8656
06:53:01,860 --> 06:53:04,740
login into the email inbox as well so if
8657
06:53:04,740 --> 06:53:07,020
I just click on this it's going to open
8658
06:53:07,020 --> 06:53:10,020
new tab and we have this info at L
8659
06:53:10,020 --> 06:53:12,298
commerce.net provided right here and
8660
06:53:12,298 --> 06:53:14,340
let's copy the password
8661
06:53:14,340 --> 06:53:18,298
and paste this right here click login
8662
06:53:18,298 --> 06:53:21,478
it will ask us again about recovery
8663
06:53:21,478 --> 06:53:25,260
email and click on submit
8664
06:53:25,260 --> 06:53:28,440
okay once this process is finished we
8665
06:53:28,440 --> 06:53:31,558
will be able to see our inbox let's just
8666
06:53:31,558 --> 06:53:33,780
reload because sometimes it Stacks right
8667
06:53:33,780 --> 06:53:36,840
there okay and here we have this inbox
8668
06:53:36,840 --> 06:53:40,320
so let's close this we don't we don't
8669
06:53:40,320 --> 06:53:42,840
need this professional email okay and
8670
06:53:42,840 --> 06:53:44,458
this is our email from which we can
8671
06:53:44,458 --> 06:53:46,798
basically send emails and receive emails
8672
06:53:46,798 --> 06:53:50,160
using info at lcommerce.net this is
8673
06:53:50,160 --> 06:53:52,320
awesome right but we're gonna go even
8674
06:53:52,320 --> 06:53:54,240
step further we have this custom email
8675
06:53:54,240 --> 06:53:56,638
address from which we can respond to the
8676
06:53:56,638 --> 06:53:59,700
customers of our e-commerce website and
8677
06:53:59,700 --> 06:54:03,120
anyone but let's take now SMTP
8678
06:54:03,120 --> 06:54:05,760
credentials and put this in our website
8679
06:54:05,760 --> 06:54:10,320
okay so let me hit done right here
8680
06:54:10,320 --> 06:54:12,600
let's go on the home and this is the
8681
06:54:12,600 --> 06:54:14,840
place so here we have multiple options
8682
06:54:14,840 --> 06:54:18,478
but what I need is configure desktop
8683
06:54:18,478 --> 06:54:19,978
application basically this is the
8684
06:54:19,978 --> 06:54:22,558
approach how a third party can connect
8685
06:54:22,558 --> 06:54:25,138
to your email so I click on configure
8686
06:54:25,138 --> 06:54:28,440
desktop app and it gives me now the SMTP
8687
06:54:28,440 --> 06:54:31,260
information I need so we basically we're
8688
06:54:31,260 --> 06:54:33,360
going to use this so we have two options
8689
06:54:33,360 --> 06:54:36,718
configure via pop or iMap for us it's
8690
06:54:36,718 --> 06:54:39,000
the same so I'm going to I'm going to
8691
06:54:39,000 --> 06:54:42,680
take this outgoing server which is SMTP
8692
06:54:42,680 --> 06:54:45,540
titan.email quick disclaimer right here
8693
06:54:45,540 --> 06:54:48,180
the only purpose of this section is just
8694
06:54:48,180 --> 06:54:50,638
to show you how you can configure your
8695
06:54:50,638 --> 06:54:52,680
laravel application to use production
8696
06:54:52,680 --> 06:54:55,740
ready SMTP credentials this particular
8697
06:54:55,740 --> 06:54:58,620
email provider is not intended for
8698
06:54:58,620 --> 06:55:01,260
massive email sending it has limitations
8699
06:55:01,260 --> 06:55:04,260
per day or per hour its main purpose is
8700
06:55:04,260 --> 06:55:06,058
to give you a business email and
8701
06:55:06,058 --> 06:55:08,520
business look when sending and receiving
8702
06:55:08,520 --> 06:55:11,100
emails from the user interface from the
8703
06:55:11,100 --> 06:55:14,160
inbox I don't recommend using this
8704
06:55:14,160 --> 06:55:16,320
particular email provider on production
8705
06:55:16,320 --> 06:55:18,780
for massive email sending if you need
8706
06:55:18,780 --> 06:55:21,298
massive email sending we should probably
8707
06:55:21,298 --> 06:55:23,400
consider something like MailChimp or
8708
06:55:23,400 --> 06:55:26,400
sendgrid also don't abuse the email
8709
06:55:26,400 --> 06:55:28,920
service providers terms and conditions
8710
06:55:28,920 --> 06:55:31,680
and don't send emails to non-existing
8711
06:55:31,680 --> 06:55:34,320
accounts in such case your email account
8712
06:55:34,320 --> 06:55:36,500
might be suspended
8713
06:55:36,500 --> 06:55:41,298
and put this in the file manager
8714
06:55:41,298 --> 06:55:47,100
mailer is SMTP itan email let me zoom in
8715
06:55:47,100 --> 06:55:49,500
then we need to take
8716
06:55:49,500 --> 06:55:54,180
let's use SSL encryption to be SSL
8717
06:55:54,180 --> 06:55:56,940
we have encryption right here
8718
06:55:56,940 --> 06:56:01,798
let's specify Port which is 465
8719
06:56:01,798 --> 06:56:04,440
we have portrait here
8720
06:56:04,440 --> 06:56:06,420
uh excuse me
8721
06:56:06,420 --> 06:56:08,580
excuse me right here the mailer should
8722
06:56:08,580 --> 06:56:09,840
be as MTP
8723
06:56:09,840 --> 06:56:13,440
I'm sorry the host should be SMTP Titan
8724
06:56:13,440 --> 06:56:15,840
email let me remove this the mailer
8725
06:56:15,840 --> 06:56:19,138
should be SMTP host should be SMTP Titan
8726
06:56:19,138 --> 06:56:20,040
email
8727
06:56:20,040 --> 06:56:23,638
mail Port we have now username and
8728
06:56:23,638 --> 06:56:25,680
password the username and password is
8729
06:56:25,680 --> 06:56:26,958
basically
8730
06:56:26,958 --> 06:56:29,400
what we
8731
06:56:29,400 --> 06:56:31,978
just copied I think we copied password
8732
06:56:31,978 --> 06:56:35,820
once but we need to probably reset the
8733
06:56:35,820 --> 06:56:37,200
password because I didn't save that
8734
06:56:37,200 --> 06:56:41,400
password so here we see that
8735
06:56:41,400 --> 06:56:43,920
email accounts
8736
06:56:43,920 --> 06:56:47,280
let's click on this reset password info
8737
06:56:47,280 --> 06:56:52,200
at eCommerce dot net send result link we
8738
06:56:52,200 --> 06:56:54,180
should receive reset link right here
8739
06:56:54,180 --> 06:56:56,940
here we received let me zoom out and
8740
06:56:56,940 --> 06:56:59,760
click reset your password and we have we
8741
06:56:59,760 --> 06:57:01,740
have to specify new password so I'm
8742
06:57:01,740 --> 06:57:03,600
going to generate again a random
8743
06:57:03,600 --> 06:57:04,860
password
8744
06:57:04,860 --> 06:57:07,020
because we need a strong password for
8745
06:57:07,020 --> 06:57:09,718
that let's take this
8746
06:57:09,718 --> 06:57:12,120
and this is my new password
8747
06:57:12,120 --> 06:57:15,718
okay so that was successfully changed
8748
06:57:15,718 --> 06:57:17,638
and I was logged out from the system
8749
06:57:17,638 --> 06:57:20,340
basically and now I'm gonna put this
8750
06:57:20,340 --> 06:57:23,638
right here okay this is my password and
8751
06:57:23,638 --> 06:57:27,298
the username is obviously info at l
8752
06:57:27,298 --> 06:57:30,180
commerce.net
8753
06:57:30,180 --> 06:57:32,340
so now we have the mailer configured
8754
06:57:32,340 --> 06:57:34,378
properly and let's specify from address
8755
06:57:34,378 --> 06:57:37,378
as well which will be in for at
8756
06:57:37,378 --> 06:57:40,378
lcommerce.net
8757
06:57:41,400 --> 06:57:45,058
scroll down below and hit save right
8758
06:57:45,058 --> 06:57:47,700
here okay now I'm going to close this
8759
06:57:47,700 --> 06:57:50,458
and now let's try to register on our
8760
06:57:50,458 --> 06:57:51,540
website
8761
06:57:51,540 --> 06:57:53,520
and I'm going to use my personal email
8762
06:57:53,520 --> 06:57:57,298
address and let's hit sign up
8763
06:57:57,298 --> 06:58:00,138
okay so here it tells me that
8764
06:58:00,138 --> 06:58:02,520
thanks for signing up before getting
8765
06:58:02,520 --> 06:58:04,798
started I had to verify my email address
8766
06:58:04,798 --> 06:58:08,340
basically let me open my Gmail
8767
06:58:08,340 --> 06:58:11,100
look at this so I just received an email
8768
06:58:11,100 --> 06:58:13,920
verify email address laravel elcom
8769
06:58:13,920 --> 06:58:16,200
eCommerce this is our website hello
8770
06:58:16,200 --> 06:58:18,540
click the link below to verify your
8771
06:58:18,540 --> 06:58:21,000
email address let's click on this link
8772
06:58:21,000 --> 06:58:23,700
and now we are authorized in the system
8773
06:58:23,700 --> 06:58:26,638
and we can go in my profile and add
8774
06:58:26,638 --> 06:58:28,798
addresses right here and we see
8775
06:58:28,798 --> 06:58:30,478
countries as well which came from the
8776
06:58:30,478 --> 06:58:34,320
country Cedar okay now we have our email
8777
06:58:34,320 --> 06:58:35,900
address
8778
06:58:35,900 --> 06:58:38,340
set a custom email address set up
8779
06:58:38,340 --> 06:58:41,120
correctly and basically from application
8780
06:58:41,120 --> 06:58:43,558
we use this custom email address for
8781
06:58:43,558 --> 06:58:46,620
email sending which is awesome now I
8782
06:58:46,620 --> 06:58:47,820
think we need to create couple of
8783
06:58:47,820 --> 06:58:51,240
products and make an order and we have
8784
06:58:51,240 --> 06:58:55,080
to also specify stripe fees as well so
8785
06:58:55,080 --> 06:58:58,320
because I am going to have a test
8786
06:58:58,320 --> 06:59:01,440
account uh for stripe as well so I'm
8787
06:59:01,440 --> 06:59:03,180
just gonna have a production stripe
8788
06:59:03,180 --> 06:59:05,580
account so I'm I can
8789
06:59:05,580 --> 06:59:07,740
take
8790
06:59:07,740 --> 06:59:12,000
these keys from dot EnV
8791
06:59:12,000 --> 06:59:16,320
I can copy these three keys and then
8792
06:59:16,320 --> 06:59:21,240
open the file manager open in edit it
8793
06:59:21,240 --> 06:59:23,160
scroll down below
8794
06:59:23,160 --> 06:59:25,440
and paste them right here
8795
06:59:25,440 --> 06:59:28,320
okay so we have publishable key secret
8796
06:59:28,320 --> 06:59:31,200
key and webhook secret key as well we
8797
06:59:31,200 --> 06:59:33,840
have to configure webhook as well so I'm
8798
06:59:33,840 --> 06:59:37,860
going to click save and close Okay so we
8799
06:59:37,860 --> 06:59:40,378
have that stripe information as well and
8800
06:59:40,378 --> 06:59:42,600
now I'm going to add a few products and
8801
06:59:42,600 --> 06:59:44,040
then make an order
8802
06:59:44,040 --> 06:59:46,620
we have this small problem because we
8803
06:59:46,620 --> 06:59:49,200
added published and whenever we are
8804
06:59:49,200 --> 06:59:52,020
trying to create new product and we hit
8805
06:59:52,020 --> 06:59:54,058
the submit no matter if you tick this
8806
06:59:54,058 --> 06:59:57,180
published or not we hit the submit we
8807
06:59:57,180 --> 06:59:59,040
have this error we have this debugger
8808
06:59:59,040 --> 07:00:01,620
and if we just continue and have a look
8809
07:00:01,620 --> 07:00:05,420
in the network we have this problem that
8810
07:00:05,420 --> 07:00:07,798
published the published field is
8811
07:00:07,798 --> 07:00:10,138
required if we check payload right here
8812
07:00:10,138 --> 07:00:12,600
we don't see published so we don't pass
8813
07:00:12,600 --> 07:00:16,080
published on the new product creation so
8814
07:00:16,080 --> 07:00:20,100
let's open big inside go under source
8815
07:00:20,100 --> 07:00:22,680
views
8816
07:00:22,680 --> 07:00:24,900
products product model
8817
07:00:24,900 --> 07:00:27,298
and let's have a look
8818
07:00:27,298 --> 07:00:30,420
what do we do right here
8819
07:00:30,420 --> 07:00:33,600
so when the user hits submit
8820
07:00:33,600 --> 07:00:35,160
on submit
8821
07:00:35,160 --> 07:00:37,500
we take product value
8822
07:00:37,500 --> 07:00:40,080
and send that
8823
07:00:40,080 --> 07:00:43,798
okay so whenever we call update product
8824
07:00:43,798 --> 07:00:46,378
if we change the image we're going to
8825
07:00:46,378 --> 07:00:49,260
lose that published yes this will happen
8826
07:00:49,260 --> 07:00:51,240
so whenever we are trying to create new
8827
07:00:51,240 --> 07:00:55,820
product let's search for
8828
07:00:55,820 --> 07:00:57,540
create
8829
07:00:57,540 --> 07:01:01,500
product we basically lose that published
8830
07:01:01,500 --> 07:01:03,660
so let's click right here we have to
8831
07:01:03,660 --> 07:01:05,820
duplicate this
8832
07:01:05,820 --> 07:01:09,360
and change this into published
8833
07:01:09,360 --> 07:01:11,458
product published
8834
07:01:11,458 --> 07:01:13,978
but I have a feeling that that's going
8835
07:01:13,978 --> 07:01:15,600
to be always true because it's going to
8836
07:01:15,600 --> 07:01:18,000
send probably
8837
07:01:18,000 --> 07:01:20,940
shrink so we're gonna test this I'm
8838
07:01:20,940 --> 07:01:23,700
going to click a new product
8839
07:01:23,700 --> 07:01:26,940
give it test title
8840
07:01:26,940 --> 07:01:29,340
let's choose some image
8841
07:01:29,340 --> 07:01:31,200
and give some price
8842
07:01:31,200 --> 07:01:33,500
clear up the network
8843
07:01:33,500 --> 07:01:36,660
and hit
8844
07:01:36,660 --> 07:01:38,638
submit
8845
07:01:38,638 --> 07:01:41,638
okay we have this error let's check the
8846
07:01:41,638 --> 07:01:43,320
networking payload
8847
07:01:43,320 --> 07:01:46,798
we send published to be undefined all
8848
07:01:46,798 --> 07:01:49,558
right let's check now
8849
07:01:49,558 --> 07:01:53,700
what do we have inside the product
8850
07:01:53,700 --> 07:01:54,900
debugger
8851
07:01:54,900 --> 07:01:57,298
let's add new product
8852
07:01:57,298 --> 07:02:01,200
test choose an image give some price and
8853
07:02:01,200 --> 07:02:03,978
hit the submit
8854
07:02:04,020 --> 07:02:06,718
the product contains right there
8855
07:02:06,718 --> 07:02:08,940
published to be undefined
8856
07:02:08,940 --> 07:02:12,420
okay if we don't tag the checkbox it is
8857
07:02:12,420 --> 07:02:15,478
undefined which is okay so it's kind of
8858
07:02:15,478 --> 07:02:16,820
false
8859
07:02:16,820 --> 07:02:21,058
but we definitely get this error
8860
07:02:21,058 --> 07:02:23,040
let's continue There
8861
07:02:23,040 --> 07:02:25,620
the published field must be true or
8862
07:02:25,620 --> 07:02:28,378
false we send it undefined but it must
8863
07:02:28,378 --> 07:02:30,240
be true or false
8864
07:02:30,240 --> 07:02:33,840
all right let's change this
8865
07:02:33,840 --> 07:02:36,660
and if it's undefined
8866
07:02:36,660 --> 07:02:40,020
well we can cast it into Boolean so
8867
07:02:40,020 --> 07:02:42,840
let's use double exclamation mark
8868
07:02:42,840 --> 07:02:45,900
okay and this will simply cast this into
8869
07:02:45,900 --> 07:02:47,160
Boolean
8870
07:02:47,160 --> 07:02:49,378
if it's undefined it's going to become
8871
07:02:49,378 --> 07:02:51,298
false
8872
07:02:51,298 --> 07:02:53,760
so it's just a new product
8873
07:02:53,760 --> 07:02:55,200
test
8874
07:02:55,200 --> 07:02:58,978
choose the image
8875
07:02:58,978 --> 07:03:01,200
and give some price
8876
07:03:01,200 --> 07:03:04,138
let's not mark this published checkbox
8877
07:03:04,138 --> 07:03:06,000
hit the submit
8878
07:03:06,000 --> 07:03:09,840
and now the product should contain
8879
07:03:09,840 --> 07:03:14,540
it will not contain actually but it will
8880
07:03:14,700 --> 07:03:17,400
product published I think the browser
8881
07:03:17,400 --> 07:03:19,320
will didn't update
8882
07:03:19,320 --> 07:03:23,940
our changes Let's test this test
8883
07:03:23,940 --> 07:03:27,000
image and price hit the submit
8884
07:03:27,000 --> 07:03:29,458
let's proceed
8885
07:03:29,458 --> 07:03:31,320
we have an error let's see what
8886
07:03:31,320 --> 07:03:34,260
information is sent it is still
8887
07:03:34,260 --> 07:03:35,760
undefined
8888
07:03:35,760 --> 07:03:39,080
let's proceed
8889
07:03:39,378 --> 07:03:44,120
published is still undefined
8890
07:03:44,820 --> 07:03:48,298
let's remove the debugger from here so
8891
07:03:48,298 --> 07:03:50,638
let's do like this if published exists
8892
07:03:50,638 --> 07:03:53,520
then we take true otherwise we take
8893
07:03:53,520 --> 07:03:55,620
false because we want it to be Boolean
8894
07:03:55,620 --> 07:03:57,780
but the value right here actually should
8895
07:03:57,780 --> 07:04:01,558
be string inside form append not sure
8896
07:04:01,558 --> 07:04:04,620
how this will work so let's check this
8897
07:04:04,620 --> 07:04:08,458
price is one two let's mark this and hit
8898
07:04:08,458 --> 07:04:10,138
the submit now
8899
07:04:10,138 --> 07:04:13,200
okay we still get this error I want to
8900
07:04:13,200 --> 07:04:17,298
remove this debugger from product model
8901
07:04:17,580 --> 07:04:21,558
let's remove it
8902
07:04:21,660 --> 07:04:24,978
endless proceed
8903
07:04:25,860 --> 07:04:29,298
and let's check Network
8904
07:04:30,660 --> 07:04:32,218
the published field must be true or
8905
07:04:32,218 --> 07:04:33,900
false
8906
07:04:33,900 --> 07:04:38,160
yes in this case we send it to be true
8907
07:04:38,160 --> 07:04:41,160
but this is actually string it is not
8908
07:04:41,160 --> 07:04:42,240
Boolean
8909
07:04:42,240 --> 07:04:45,478
okay this is the problem the published
8910
07:04:45,478 --> 07:04:48,478
field must be true or false
8911
07:04:48,478 --> 07:04:51,058
I think this can be adjusted using
8912
07:04:51,058 --> 07:04:54,360
laravel rules so if we open product
8913
07:04:54,360 --> 07:04:57,320
request
8914
07:04:57,420 --> 07:04:59,520
and scroll down below
8915
07:04:59,520 --> 07:05:02,940
and find the published
8916
07:05:02,940 --> 07:05:06,660
needs to be required in Boolean so by
8917
07:05:06,660 --> 07:05:08,638
default the Boolean rule basically
8918
07:05:08,638 --> 07:05:11,218
checks only the following values it
8919
07:05:11,218 --> 07:05:15,240
should be either false or true or zero
8920
07:05:15,240 --> 07:05:19,320
or or one or it can be string zero or
8921
07:05:19,320 --> 07:05:21,900
string one okay but it doesn't have
8922
07:05:21,900 --> 07:05:25,320
string true and string false so if we
8923
07:05:25,320 --> 07:05:27,680
open now our
8924
07:05:27,680 --> 07:05:31,200
actions JS and if we just change what we
8925
07:05:31,200 --> 07:05:33,840
are sending so instead of sending right
8926
07:05:33,840 --> 07:05:38,280
here true or false why don't we send one
8927
07:05:38,280 --> 07:05:40,558
and a zero
8928
07:05:40,558 --> 07:05:42,660
okay we can even wrap this as strings
8929
07:05:42,660 --> 07:05:44,760
but we it will be
8930
07:05:44,760 --> 07:05:46,978
um just converted into Strings in any
8931
07:05:46,978 --> 07:05:50,878
case if we do like this and then try to
8932
07:05:50,878 --> 07:05:53,540
add new product
8933
07:05:56,940 --> 07:05:59,700
hit this submit now we see that the
8934
07:05:59,700 --> 07:06:01,680
product was actually created
8935
07:06:01,680 --> 07:06:06,360
okay and it also has this published
8936
07:06:06,360 --> 07:06:09,420
checked now let's create second product
8937
07:06:09,420 --> 07:06:12,620
test two
8938
07:06:13,200 --> 07:06:15,360
which will not have this published
8939
07:06:15,360 --> 07:06:17,718
marked
8940
07:06:18,660 --> 07:06:22,378
and we see test two and if we edit we
8941
07:06:22,378 --> 07:06:24,660
see it is not published and if we check
8942
07:06:24,660 --> 07:06:27,120
on the front and side we're going to
8943
07:06:27,120 --> 07:06:30,120
also see test outputted right here but
8944
07:06:30,120 --> 07:06:32,160
S2 is not output
8945
07:06:32,160 --> 07:06:35,580
okay just like this we have fixed this
8946
07:06:35,580 --> 07:06:37,080
problem
8947
07:06:37,080 --> 07:06:40,020
let's try update as well because that
8948
07:06:40,020 --> 07:06:42,600
was the creation part and if we search
8949
07:06:42,600 --> 07:06:45,840
for update or why why don't we simply
8950
07:06:45,840 --> 07:06:47,400
copy this part
8951
07:06:47,400 --> 07:06:51,900
and search for update product and put
8952
07:06:51,900 --> 07:06:53,520
this right here
8953
07:06:53,520 --> 07:06:55,978
okay we need to send it like this as
8954
07:06:55,978 --> 07:06:59,240
well and now if we just
8955
07:06:59,240 --> 07:07:02,458
open any products
8956
07:07:02,458 --> 07:07:06,718
and just change the image and tick the
8957
07:07:06,718 --> 07:07:09,138
checkbox
8958
07:07:09,180 --> 07:07:12,360
it's gonna work so here we see this last
8959
07:07:12,360 --> 07:07:15,600
updated and it should have also checkbox
8960
07:07:15,600 --> 07:07:17,280
checked
8961
07:07:17,280 --> 07:07:20,638
okay the description is now which I know
8962
07:07:20,638 --> 07:07:23,218
why because right here we send the
8963
07:07:23,218 --> 07:07:25,500
description was actually null and it was
8964
07:07:25,500 --> 07:07:29,040
sent as now string so we can specify
8965
07:07:29,040 --> 07:07:31,500
right here if the description doesn't
8966
07:07:31,500 --> 07:07:35,400
exist just take an empty string okay and
8967
07:07:35,400 --> 07:07:38,458
we have to do the same thing when we are
8968
07:07:38,458 --> 07:07:42,298
creating product right here as well so
8969
07:07:42,298 --> 07:07:44,940
we fixed this problem about creating new
8970
07:07:44,940 --> 07:07:46,138
product
8971
07:07:46,138 --> 07:07:49,740
I have created a simple test product but
8972
07:07:49,740 --> 07:07:52,558
the uploaded image is not displayed and
8973
07:07:52,558 --> 07:07:55,680
there are two things to do to make the
8974
07:07:55,680 --> 07:07:58,200
uploaded images to be displayed first we
8975
07:07:58,200 --> 07:08:01,020
have to create a storage link which we
8976
07:08:01,020 --> 07:08:03,500
haven't done we're going to run PHP
8977
07:08:03,500 --> 07:08:07,680
Artisan storage column link and this
8978
07:08:07,680 --> 07:08:10,920
will create a link from Storage up
8979
07:08:10,920 --> 07:08:13,920
public into public storage so basically
8980
07:08:13,920 --> 07:08:16,740
the uploaded files go under storage app
8981
07:08:16,740 --> 07:08:19,200
public and that storage are public is
8982
07:08:19,200 --> 07:08:23,160
not web accessible only those files and
8983
07:08:23,160 --> 07:08:25,440
folders are web accessible which are
8984
07:08:25,440 --> 07:08:28,740
under public folder so laravel creates a
8985
07:08:28,740 --> 07:08:31,020
symbolic link from Storage are public
8986
07:08:31,020 --> 07:08:34,320
into public storage and now if we go
8987
07:08:34,320 --> 07:08:37,500
under public folder we're going to see
8988
07:08:37,500 --> 07:08:40,138
right here storage symbolic link okay
8989
07:08:40,138 --> 07:08:42,540
and everything which is uploaded under
8990
07:08:42,540 --> 07:08:45,360
Storage Public will be available right
8991
07:08:45,360 --> 07:08:48,180
here as well okay so far so good but
8992
07:08:48,180 --> 07:08:51,058
this will not fix our problem there is a
8993
07:08:51,058 --> 07:08:53,160
second thing to do to make this working
8994
07:08:53,160 --> 07:08:55,920
now the storage link exists but we are
8995
07:08:55,920 --> 07:08:59,718
using an incorrect nothing correct but
8996
07:08:59,718 --> 07:09:02,340
the file system we are using is not
8997
07:09:02,340 --> 07:09:05,760
configured to be publicly accessible all
8998
07:09:05,760 --> 07:09:07,920
right so let's have a look let's
8999
07:09:07,920 --> 07:09:10,798
navigate One Directory back calling the
9000
07:09:10,798 --> 07:09:12,958
project through directory and we're
9001
07:09:12,958 --> 07:09:16,260
going to open Dot en file
9002
07:09:16,260 --> 07:09:18,840
and right here we have this file system
9003
07:09:18,840 --> 07:09:22,200
disk equals local okay so we are using
9004
07:09:22,200 --> 07:09:24,478
at the moment local file system and now
9005
07:09:24,478 --> 07:09:27,240
let's open our laravel project
9006
07:09:27,240 --> 07:09:30,120
let's open a file under config file
9007
07:09:30,120 --> 07:09:32,638
systems PHP and right here we have
9008
07:09:32,638 --> 07:09:34,920
multiple disks configured this comes out
9009
07:09:34,920 --> 07:09:36,900
of the box with laravel we have local
9010
07:09:36,900 --> 07:09:41,040
file system public S3 and so on and if
9011
07:09:41,040 --> 07:09:43,860
we scroll up the default one is taken
9012
07:09:43,860 --> 07:09:46,920
from the en file system disk and this is
9013
07:09:46,920 --> 07:09:49,500
local we just saw and if we have a look
9014
07:09:49,500 --> 07:09:52,860
the local file system is not configured
9015
07:09:52,860 --> 07:09:56,218
to be publicly available and accessible
9016
07:09:56,218 --> 07:09:59,820
okay so right here we need to give it a
9017
07:09:59,820 --> 07:10:02,520
visibility to be public just like the
9018
07:10:02,520 --> 07:10:06,180
public disk has like we could use this
9019
07:10:06,180 --> 07:10:09,958
public disk as well but in this case a
9020
07:10:09,958 --> 07:10:11,638
few things might not work because we
9021
07:10:11,638 --> 07:10:13,680
might have to update the code of
9022
07:10:13,680 --> 07:10:16,680
uploading image which we don't want at
9023
07:10:16,680 --> 07:10:18,718
the moment so we're going to put right
9024
07:10:18,718 --> 07:10:22,798
here visibility is public okay so once
9025
07:10:22,798 --> 07:10:25,440
you do this just comment and push the
9026
07:10:25,440 --> 07:10:28,260
changes on your git repository then
9027
07:10:28,260 --> 07:10:30,360
we're gonna we're gonna go in the
9028
07:10:30,360 --> 07:10:32,580
project we can
9029
07:10:32,580 --> 07:10:35,400
exit from veeam
9030
07:10:35,400 --> 07:10:38,638
and then we're gonna pull the changes
9031
07:10:38,638 --> 07:10:41,218
we're going to run git pool and I
9032
07:10:41,218 --> 07:10:44,638
already have those changes pulled
9033
07:10:44,638 --> 07:10:46,798
well we're going to run gitpool origin
9034
07:10:46,798 --> 07:10:50,040
Master main origin main this will
9035
07:10:50,040 --> 07:10:52,680
download the latest version and now if
9036
07:10:52,680 --> 07:10:57,180
we open a full file from config file
9037
07:10:57,180 --> 07:10:59,820
systems and have a look if I scroll at
9038
07:10:59,820 --> 07:11:02,878
the top so let's have a look we have the
9039
07:11:02,878 --> 07:11:04,620
local and right here we have visibility
9040
07:11:04,620 --> 07:11:07,260
public so this indicates that now we
9041
07:11:07,260 --> 07:11:09,780
have the latest change on our server
9042
07:11:09,780 --> 07:11:12,298
okay and now we can open the browser
9043
07:11:12,298 --> 07:11:15,540
let's delete this and try to create new
9044
07:11:15,540 --> 07:11:16,440
product
9045
07:11:16,440 --> 07:11:17,940
okay
9046
07:11:17,940 --> 07:11:20,100
let's name it test
9047
07:11:20,100 --> 07:11:21,718
choose some image
9048
07:11:21,718 --> 07:11:23,400
give some price
9049
07:11:23,400 --> 07:11:26,540
and hit submit
9050
07:11:26,580 --> 07:11:29,160
okay the product was uploaded and images
9051
07:11:29,160 --> 07:11:32,458
right there let's test also modifying
9052
07:11:32,458 --> 07:11:34,020
the image I'm going to choose a
9053
07:11:34,020 --> 07:11:37,138
different one and click submit
9054
07:11:37,138 --> 07:11:40,080
and that works perfectly now I'm going
9055
07:11:40,080 --> 07:11:42,540
to go ahead and create several simple
9056
07:11:42,540 --> 07:11:46,200
products I added these two items and I'm
9057
07:11:46,200 --> 07:11:48,780
going to now add both of them in the
9058
07:11:48,780 --> 07:11:50,340
cart
9059
07:11:50,340 --> 07:11:52,860
go to the cart
9060
07:11:52,860 --> 07:11:55,558
click on proceed to check out
9061
07:11:55,558 --> 07:11:58,740
we have already provided stripe keys so
9062
07:11:58,740 --> 07:12:00,478
we should be good to go
9063
07:12:00,478 --> 07:12:04,440
let's specify right here stripe
9064
07:12:04,440 --> 07:12:06,958
S card information
9065
07:12:06,958 --> 07:12:09,240
we haven't configured the web hook so
9066
07:12:09,240 --> 07:12:12,540
far so the redirect should work and our
9067
07:12:12,540 --> 07:12:15,780
order should be able our order should be
9068
07:12:15,780 --> 07:12:17,940
marked as completely and I get the
9069
07:12:17,940 --> 07:12:20,520
success message and if I go in my orders
9070
07:12:20,520 --> 07:12:23,218
I see right here Order
9071
07:12:23,218 --> 07:12:25,798
click on this I see the order is
9072
07:12:25,798 --> 07:12:29,638
actually paid if I go in the admin
9073
07:12:29,638 --> 07:12:33,000
right here we see one order and I also
9074
07:12:33,000 --> 07:12:36,920
got an email I want to show this email
9075
07:12:36,920 --> 07:12:39,780
this is the email I received new order
9076
07:12:39,780 --> 07:12:42,180
has been created
9077
07:12:42,180 --> 07:12:45,420
okay the image for the second one is for
9078
07:12:45,420 --> 07:12:46,920
some reason broken
9079
07:12:46,920 --> 07:12:49,440
but the email is actually received and
9080
07:12:49,440 --> 07:12:51,540
if you go in the dashboard
9081
07:12:51,540 --> 07:12:54,058
we are going to see two active products
9082
07:12:54,058 --> 07:12:56,700
one active customer one paid order total
9083
07:12:56,700 --> 07:12:57,660
income
9084
07:12:57,660 --> 07:13:00,478
we see the latest customer latest order
9085
07:13:00,478 --> 07:13:03,780
if we go in the orders we see this order
9086
07:13:03,780 --> 07:13:05,638
and if we click right here we're going
9087
07:13:05,638 --> 07:13:09,900
to see the order details
9088
07:13:09,900 --> 07:13:13,500
we probably have an error right here
9089
07:13:13,500 --> 07:13:16,200
sometimes the error happen after you
9090
07:13:16,200 --> 07:13:18,120
deploy your application they don't
9091
07:13:18,120 --> 07:13:20,878
happen on locally but they happen when
9092
07:13:20,878 --> 07:13:23,520
you deploy so you should know how to
9093
07:13:23,520 --> 07:13:25,978
deal with these problems I tend to read
9094
07:13:25,978 --> 07:13:30,000
property ID on null
9095
07:13:30,000 --> 07:13:32,580
that happens
9096
07:13:32,580 --> 07:13:36,558
on order resource
9097
07:13:36,958 --> 07:13:39,958
this is where it happens and I think the
9098
07:13:39,958 --> 07:13:42,958
reason might be addresses because we
9099
07:13:42,958 --> 07:13:45,478
don't restrict users
9100
07:13:45,478 --> 07:13:48,000
from checkout
9101
07:13:48,000 --> 07:13:49,978
and if we open this
9102
07:13:49,978 --> 07:13:54,240
right here we try to access to
9103
07:13:54,240 --> 07:13:57,120
something like customer and shipping ID
9104
07:13:57,120 --> 07:14:00,298
and and I think that is the that is the
9105
07:14:00,298 --> 07:14:01,378
problem
9106
07:14:01,378 --> 07:14:04,200
and yeah this is something which can be
9107
07:14:04,200 --> 07:14:06,058
easily fixed we have the line right here
9108
07:14:06,058 --> 07:14:10,978
as well so the line is 47 this is
9109
07:14:10,978 --> 07:14:12,298
exactly
9110
07:14:12,298 --> 07:14:17,040
okay here is the line mentioned
9111
07:14:17,040 --> 07:14:19,320
so this is something we need to improve
9112
07:14:19,320 --> 07:14:20,638
but the main thing is that the
9113
07:14:20,638 --> 07:14:23,820
application is deployed and working and
9114
07:14:23,820 --> 07:14:26,878
we are able to register and log in
9115
07:14:26,878 --> 07:14:30,478
and make an order as well
9116
07:14:30,478 --> 07:14:33,120
probably the only thing that is remained
9117
07:14:33,120 --> 07:14:37,200
is to configure web hooks which is very
9118
07:14:37,200 --> 07:14:41,660
easy so let's go to the stripe dashboard
9119
07:14:41,660 --> 07:14:45,840
let's search for web hooks right here
9120
07:14:45,840 --> 07:14:48,420
and at an end point
9121
07:14:48,420 --> 07:14:51,240
so now we have to provide right here our
9122
07:14:51,240 --> 07:14:52,320
domain
9123
07:14:52,320 --> 07:14:54,420
which is this
9124
07:14:54,420 --> 07:14:57,718
and I think the URL is called webhook
9125
07:14:57,718 --> 07:15:00,780
right so let's put this right here and
9126
07:15:00,780 --> 07:15:06,298
let's open in our project web PHP
9127
07:15:06,298 --> 07:15:11,340
and webhook stripe this is the URL so
9128
07:15:11,340 --> 07:15:14,820
I'm going to paste this right here
9129
07:15:14,820 --> 07:15:17,160
select the events to listen we can
9130
07:15:17,160 --> 07:15:19,558
listen for checkout
9131
07:15:19,558 --> 07:15:20,780
session
9132
07:15:20,780 --> 07:15:23,218
completed because this is what we are
9133
07:15:23,218 --> 07:15:24,958
interested in
9134
07:15:24,958 --> 07:15:28,860
this is what we're looking for and we
9135
07:15:28,860 --> 07:15:32,160
can open this webhook and scroll down
9136
07:15:32,160 --> 07:15:34,440
below and find checkout session
9137
07:15:34,440 --> 07:15:36,478
completed yeah this is exactly what we
9138
07:15:36,478 --> 07:15:38,218
are interested anything else is
9139
07:15:38,218 --> 07:15:41,100
something we don't care all right so we
9140
07:15:41,100 --> 07:15:42,780
add an event
9141
07:15:42,780 --> 07:15:45,600
we have this domain ready
9142
07:15:45,600 --> 07:15:50,100
endpoint URL and let's add endpoint so
9143
07:15:50,100 --> 07:15:53,100
we edit this webhook and now let's make
9144
07:15:53,100 --> 07:15:55,260
one more order but in this case we're
9145
07:15:55,260 --> 07:15:58,080
gonna close the tab after
9146
07:15:58,080 --> 07:16:01,138
the payment basically is made but before
9147
07:16:01,138 --> 07:16:04,080
the redirect happens so we proceed to
9148
07:16:04,080 --> 07:16:05,340
check out
9149
07:16:05,340 --> 07:16:07,920
so we fill up the information and click
9150
07:16:07,920 --> 07:16:10,620
on pay and this button turns into green
9151
07:16:10,620 --> 07:16:14,000
I'm going to close the tab
9152
07:16:14,218 --> 07:16:17,958
okay I'm going to close the tab and now
9153
07:16:17,958 --> 07:16:22,020
let's have a look so let's reload the
9154
07:16:22,020 --> 07:16:24,298
page it's gonna go through an error if
9155
07:16:24,298 --> 07:16:26,580
we click on the orders now we see both
9156
07:16:26,580 --> 07:16:29,000
is actually paid and that's because
9157
07:16:29,000 --> 07:16:33,000
stripe sent webhook properly and if we
9158
07:16:33,000 --> 07:16:35,840
check the customer
9159
07:16:35,840 --> 07:16:37,378
ecommerce.net
9160
07:16:37,378 --> 07:16:40,500
and go in my orders right here I see
9161
07:16:40,500 --> 07:16:42,600
both of them are paid so our webhook
9162
07:16:42,600 --> 07:16:45,240
also works fine
9163
07:16:45,240 --> 07:16:47,218
all right guys that's it for this
9164
07:16:47,218 --> 07:16:49,740
project and I hope you liked it if so
9165
07:16:49,740 --> 07:16:52,320
hit the like button and subscribe to my
9166
07:16:52,320 --> 07:16:56,120
channel I will see you in the next time
626388
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.