1
00:00:01,230 --> 00:00:07,920
It's time for us to make our first requests from the client side, and that is from the browser.

2
00:00:08,180 --> 00:00:15,960
Under the API development, we always make a request using this tool called ten dot client and it always

3
00:00:15,960 --> 00:00:17,940
give us JSON data.

4
00:00:17,940 --> 00:00:21,810
So how are we going to make a request from the client side?

5
00:00:21,810 --> 00:00:28,020
The process is going to be the same, meaning that we need to pass in the properties that we need.

6
00:00:28,020 --> 00:00:32,490
So how are we going to pass this data from the client side?

7
00:00:32,910 --> 00:00:37,820
So the question is how can we make the same request from the client side?

8
00:00:37,830 --> 00:00:39,240
Let me show you how.

9
00:00:39,270 --> 00:00:41,820
Let's get into the register template.

10
00:00:41,820 --> 00:00:44,340
That's where we want to make the request.

11
00:00:44,340 --> 00:00:46,110
So we inside the.

12
00:00:47,030 --> 00:00:48,800
Controllers, users.

13
00:00:48,800 --> 00:00:50,060
And here we go.

14
00:00:50,090 --> 00:00:52,340
Let's start with the register.

15
00:00:52,940 --> 00:00:59,270
For this one, we will do fuel refraction, because for this one, we are going to retain energies in

16
00:00:59,270 --> 00:00:59,810
data.

17
00:00:59,810 --> 00:01:02,050
But I will show you when we get there.

18
00:01:02,060 --> 00:01:08,570
So the next question is that how can we have access to the data a user is sending from the client side?

19
00:01:08,690 --> 00:01:15,380
So let's open the form and that is users and the register template of form.

20
00:01:15,470 --> 00:01:21,830
And this is a form when I collapse age, you can see that this is the actual form.

21
00:01:21,830 --> 00:01:25,090
And this form we have additional attribute.

22
00:01:25,100 --> 00:01:27,200
One is the action.

23
00:01:27,200 --> 00:01:31,670
Action simply means the endpoint that we want to hit.

24
00:01:31,700 --> 00:01:40,400
In our case, we want to hit this API endpoint to register the next one going to be the method, meaning

25
00:01:40,400 --> 00:01:43,430
what HTTP method do you want to use?

26
00:01:43,550 --> 00:01:49,280
And for this we are going to use post as we did when using the ten client.

27
00:01:49,280 --> 00:01:51,980
So the concept is going to be the same.

28
00:01:51,980 --> 00:01:54,510
So the you are is going to be as this.

29
00:01:54,510 --> 00:01:57,770
So I'll copy this one and back to the form.

30
00:01:57,770 --> 00:02:00,380
The action will point to this.

31
00:02:00,530 --> 00:02:02,690
Then the method is this one.

32
00:02:02,690 --> 00:02:05,810
Now we are done with this ones.

33
00:02:05,810 --> 00:02:10,639
The next question is how can we pass this payload from the browser?

34
00:02:10,669 --> 00:02:15,920
That's why we have a name attribute inside the input.

35
00:02:15,920 --> 00:02:24,770
So whatever we pass in here, we hold the actual value and what we passing here must be equally as the

36
00:02:24,770 --> 00:02:32,870
way we are calling the endpoint here, or it might be the same as the properties on the module and which

37
00:02:32,870 --> 00:02:35,690
are the full name, email and password.

38
00:02:35,690 --> 00:02:38,060
So let's see how we are going to implement that.

39
00:02:38,060 --> 00:02:42,890
So now back to the form, the first one going to be the full name.

40
00:02:42,890 --> 00:02:48,560
We could ask what is specified on this schema and for this I'm going to remove the ID.

41
00:02:49,010 --> 00:02:51,530
Likewise, the email is going to be the email.

42
00:02:51,530 --> 00:02:54,170
Let me remove this one and then the password.

43
00:02:54,170 --> 00:02:57,200
It remains the same as the password.

44
00:02:57,440 --> 00:03:02,690
The next step is that make sure you have a type or submit on the button.

45
00:03:02,690 --> 00:03:09,230
So now with this one, when I make a request, I'll be able to register a moment of truth.

46
00:03:09,230 --> 00:03:11,150
So back to the controller.

47
00:03:11,180 --> 00:03:16,490
Let's go ahead and console.log the red dot body and let's see what we're going to get.

48
00:03:21,140 --> 00:03:21,890
All right.

49
00:03:21,890 --> 00:03:28,280
And for this, too, I want to console.log the response that came back after registration.

50
00:03:28,280 --> 00:03:34,410
So I'm going to be as constituted log the actual user being registered.

51
00:03:34,430 --> 00:03:36,140
Moment of truth.

52
00:03:36,140 --> 00:03:38,060
So let's get back to the form.

53
00:03:38,060 --> 00:03:39,050
Refresh it.

54
00:03:39,500 --> 00:03:44,150
Let me open the console, click on console and let me click on this one.

55
00:03:44,150 --> 00:03:47,900
And now I have clean sheet of my console.

56
00:03:47,990 --> 00:03:53,270
So the first one going to be full name and I'll call this one as Thomas.

57
00:03:55,330 --> 00:03:57,940
And then email as us.

58
00:03:59,640 --> 00:04:01,560
At gmail.com.

59
00:04:03,000 --> 00:04:03,840
The password.

60
00:04:03,840 --> 00:04:05,310
One, two, three, four, five.

61
00:04:05,340 --> 00:04:06,030
Hit send.

62
00:04:07,130 --> 00:04:15,500
Now you can see all fields are required, meaning that I am not passing in some data.

63
00:04:15,500 --> 00:04:17,560
So let's check again.

64
00:04:17,570 --> 00:04:19,760
So back to the controller.

65
00:04:19,790 --> 00:04:22,340
Let's see what we are not passing in.

66
00:04:23,030 --> 00:04:26,560
Well, we have full name, email and password.

67
00:04:26,570 --> 00:04:34,160
You can see that we're able to hit the endpoint, but we are not passing in the actual data.

68
00:04:35,030 --> 00:04:41,990
Remember when we are trying to send data to our endpoints using existing data, unless you configure

69
00:04:41,990 --> 00:04:49,430
our express server to be able to parse incoming data and this is a code to get it done the same way.

70
00:04:49,430 --> 00:04:55,280
If we are trying to access a data from a form, unless we tell Express to do that.

71
00:04:55,610 --> 00:05:03,350
So here we go, we're going to be app dot use and we're going to use express dot.

72
00:05:03,350 --> 00:05:12,110
You are encoded as a function call and then the additional configuration and extend that to true.

73
00:05:12,440 --> 00:05:18,920
With this one, we'll be able to have the data we are sending from the browser on the red dot body.

74
00:05:19,100 --> 00:05:21,890
This one is for passing JSON data.

75
00:05:21,890 --> 00:05:27,770
So because we are not dealing with API anymore, I can go ahead and remove this one, but let me maintain

76
00:05:27,770 --> 00:05:32,390
it and let me add a comment as passed for data.

77
00:05:33,350 --> 00:05:39,590
So now with this one less refresh it and let's make the request again.

78
00:05:40,160 --> 00:05:46,270
Let me provide Ben and then email as Ben at gmail.com.

79
00:05:46,280 --> 00:05:48,860
Password one, two, three, four, five.

80
00:05:51,160 --> 00:05:53,050
Hit, send or register.

81
00:05:54,790 --> 00:06:03,310
And we got some beautiful message and that is of success and full name, band, email and meaning that

82
00:06:03,310 --> 00:06:06,430
I was able to register successfully.

83
00:06:06,730 --> 00:06:11,980
If I check the terminal, I'm going to see the user being registered.

84
00:06:12,560 --> 00:06:14,290
And there we go.

85
00:06:14,300 --> 00:06:18,110
This is a user and this is a payload.

86
00:06:18,110 --> 00:06:21,340
So that is it about the registration.

87
00:06:21,350 --> 00:06:29,680
But what I want to do is that after a user is registered, I want to retract the user after registration.

88
00:06:29,690 --> 00:06:31,880
Let's get into that in the next video.