1
00:00:01,740 --> 00:00:07,950
So this lesson we are going to be connecting to the posts that are contained within the local server

2
00:00:07,950 --> 00:00:15,870
databases, was doing some troubleshooting and returning back content from the database and then outputting

3
00:00:15,870 --> 00:00:17,450
that content on the page.

4
00:00:17,640 --> 00:00:20,580
So we don't have that yet, but we're putting into the console.

5
00:00:20,820 --> 00:00:28,510
We also have that option to make new items, so specifying the title and getting back an ID.

6
00:00:28,710 --> 00:00:33,740
So now when we load it to the page, we're also going to have that brandnew and that was just created.

7
00:00:34,230 --> 00:00:42,240
So that's in this lesson where we're going to be constructing the basic structure for making get and

8
00:00:42,240 --> 00:00:49,150
post requests to our local server endpoint and then also updating the data within the database.

9
00:00:50,670 --> 00:00:55,030
In this lesson, we are going to be connecting to our local server.

10
00:00:55,350 --> 00:01:00,660
So just make sure that your local host, Port three thousand is up and running and that you've got some

11
00:01:00,660 --> 00:01:03,390
content within your JSON debit database.

12
00:01:03,750 --> 00:01:10,170
So connecting to it and we're going to be connecting to it through the front end code, HTML and JavaScript.

13
00:01:10,500 --> 00:01:16,680
So we've got a basic structure here where we've got an input field, a button and an output area, and

14
00:01:16,680 --> 00:01:19,170
that's all contained within the main container element.

15
00:01:19,530 --> 00:01:25,500
So opening up the JavaScript, let's make some connections and first start will select the container

16
00:01:25,500 --> 00:01:33,930
object using the documents and query selector select elements with a class of container.

17
00:01:36,430 --> 00:01:38,660
So we'll add that into one of our objects.

18
00:01:38,950 --> 00:01:43,360
I'm also going to update the view on the ED so that we can see everything within one page.

19
00:01:44,050 --> 00:01:46,990
Let's select the other elements from the page as well.

20
00:01:47,290 --> 00:01:48,670
So we've got our button.

21
00:01:48,910 --> 00:01:50,020
So that's the button one.

22
00:01:50,200 --> 00:01:52,450
And this can act as a submit button.

23
00:01:52,450 --> 00:02:00,250
So that element with the class of button and selecting the elements, the input element with a class

24
00:02:00,250 --> 00:02:03,450
of value, and then also we'll select the output element.

25
00:02:04,060 --> 00:02:06,380
So adding in all of those.

26
00:02:06,550 --> 00:02:11,930
So we've got the value and this is going to be the input area with the class of value.

27
00:02:12,400 --> 00:02:19,270
And then lastly, the output area where we can put the results from our request return values from the

28
00:02:19,270 --> 00:02:26,350
request object and for the button one, add an event listener that that listener that we're adding for

29
00:02:26,350 --> 00:02:27,640
is going to be a click.

30
00:02:27,940 --> 00:02:30,730
So whenever it gets clicked, that's going to fire off the event.

31
00:02:30,970 --> 00:02:37,700
And for now, we're going to log it out into the console that we're ready and ready to go to make our

32
00:02:37,700 --> 00:02:38,560
vets request.

33
00:02:38,950 --> 00:02:41,840
So let's select and we've got ready.

34
00:02:42,220 --> 00:02:45,190
So that means that we are ready to make our vets request.

35
00:02:45,520 --> 00:02:48,600
So starting and let's set up a new URL.

36
00:02:48,820 --> 00:02:54,880
This is going to be where our base, your URL is and that's going to be the local server.

37
00:02:55,300 --> 00:03:00,630
So just running over to the local port localhost three thousand.

38
00:03:01,240 --> 00:03:03,490
And this is only for local testing.

39
00:03:04,000 --> 00:03:10,410
So you typically would have a real endpoint server end point on a real database.

40
00:03:10,420 --> 00:03:12,190
So that's why we're just using the localhost.

41
00:03:13,090 --> 00:03:21,790
So selecting and let's make our Futch request so fetch and construct a new URL and the URL is going

42
00:03:21,790 --> 00:03:25,780
to use the base URL and add to it.

43
00:03:25,780 --> 00:03:26,800
So append to it.

44
00:03:27,490 --> 00:03:31,180
And the endpoint that we're sending to it is going to be the Post's.

45
00:03:34,600 --> 00:03:42,130
So that should return back the all of the post content, and for now we're just going to get method,

46
00:03:43,150 --> 00:03:50,710
so getting the content so the response object and then returning back to the response object with Jason

47
00:03:50,710 --> 00:04:00,580
data and next promise is we get the data and for now we're just put into the console just to make sure

48
00:04:00,580 --> 00:04:03,090
that everything is working as expected.

49
00:04:04,300 --> 00:04:07,270
So going in click and there's our data.

50
00:04:07,270 --> 00:04:11,440
And so this is the live data that's coming from the actual data content.

51
00:04:11,900 --> 00:04:16,630
And for this for this application, we're just going to work with the posts.

52
00:04:16,850 --> 00:04:20,230
I know I do have some additional options.

53
00:04:20,230 --> 00:04:21,630
There are additional routes.

54
00:04:21,680 --> 00:04:25,960
I've got comments and I've got the profile and tester.

55
00:04:26,140 --> 00:04:31,090
So there's a bunch of other routes, but we're going to focus on the posts and the other routes are

56
00:04:31,090 --> 00:04:33,220
going to work the same way where we can make requests.

57
00:04:33,640 --> 00:04:37,180
So let's go ahead and add to the database.

58
00:04:37,790 --> 00:04:44,800
So this was typical Thach requests where we load the page contents and want to load it out onto the

59
00:04:44,800 --> 00:04:55,270
page so you can create a function and get page contents and then that can just take in the data value

60
00:04:56,140 --> 00:05:02,520
and we just move the console message and this is where we can load the page contents.

61
00:05:02,890 --> 00:05:09,640
So we also want to have a post request to the posts and point.

62
00:05:10,030 --> 00:05:13,780
And this is how we can add to the existing content.

63
00:05:14,710 --> 00:05:18,910
So within the database we've got the option for title.

64
00:05:19,120 --> 00:05:23,830
So that's the only input field and we'll just use whatever value is here that we have the input field

65
00:05:24,010 --> 00:05:26,170
and then we're going to use the default authors.

66
00:05:26,170 --> 00:05:27,910
So they're all going to have the same author.

67
00:05:28,090 --> 00:05:30,760
The only thing that's going to be different between them is going to be the input.

68
00:05:31,690 --> 00:05:34,930
So we need to append and add a separate button.

69
00:05:38,410 --> 00:05:45,130
And we could actually use the additional button that we have the button one and I'll update the text

70
00:05:45,130 --> 00:05:52,120
content and then we'll add that listener that's going to load all of the post content.

71
00:05:52,390 --> 00:05:55,570
We're going to load that using the DOM content loaded function.

72
00:05:55,750 --> 00:05:58,400
So it's going to automatically load and make the fetch request.

73
00:05:58,990 --> 00:06:00,760
So selecting the text content

74
00:06:03,370 --> 00:06:12,190
and this can just create new and we're going to take the input value and create a new one for for that.

75
00:06:13,030 --> 00:06:21,120
So using the window add event, listener and event that we're listening for is dom content loaded.

76
00:06:22,540 --> 00:06:34,180
And when that fire is off, phrenologists just log into the console onto page ready and just make sure

77
00:06:34,180 --> 00:06:35,040
that that's working.

78
00:06:35,050 --> 00:06:36,000
So that is working.

79
00:06:37,000 --> 00:06:40,690
So that means that we can update this feature request

80
00:06:43,240 --> 00:06:45,900
and just load all of the page contents.

81
00:06:46,060 --> 00:06:49,910
So whenever the page loads, it's automatically going to load all the page content.

82
00:06:50,410 --> 00:07:01,620
And now for the post of the content into the database, let's update and send using the post method.

83
00:07:02,230 --> 00:07:08,830
So we need to make some updates to this request where we're going to set an object and this will contain

84
00:07:08,830 --> 00:07:09,580
the options.

85
00:07:10,210 --> 00:07:12,120
And this is an object format.

86
00:07:12,640 --> 00:07:21,550
And with the fetch request, we're going to now send it with options and I can console log out the returned

87
00:07:21,550 --> 00:07:21,970
data.

88
00:07:24,280 --> 00:07:29,800
And for the options, the endpoint is going to be the same where we're posting content to it.

89
00:07:30,700 --> 00:07:35,710
So let's update within the options and for this JavaScript object.

90
00:07:36,040 --> 00:07:42,820
So we've got a method and the method that we want to use is going to be a post method and then comma

91
00:07:42,820 --> 00:07:47,540
separated out and the contents that we want to post.

92
00:07:47,560 --> 00:07:50,650
So that's going to be contained within the body of the object.

93
00:07:51,670 --> 00:07:57,930
So let's construct the body and this is going to be an object itself.

94
00:07:58,870 --> 00:08:07,330
So that way we can use JSON, string of fi and string of either body object so that it posts as a string

95
00:08:09,220 --> 00:08:11,050
and within the body object.

96
00:08:11,050 --> 00:08:16,560
So whatever values we want contained in there, we can construct the body contents.

97
00:08:18,280 --> 00:08:27,540
So let's set up a title and the title is going to be the value of the VAL one value.

98
00:08:29,320 --> 00:08:38,170
So the one value and that should just be value and also for author.

99
00:08:41,800 --> 00:08:43,570
And we're going to hardcourt the author.

100
00:08:44,050 --> 00:08:50,120
And of course you can have input fields and change the author and add whatever values you want.

101
00:08:51,010 --> 00:08:57,700
So doing a post and one last parameter that we need is would you need the headers?

102
00:08:58,420 --> 00:09:02,430
So let's set up the headers within the object.

103
00:09:02,560 --> 00:09:12,550
So we want to specify the content dash type and the content type that we're sending is going to be application

104
00:09:13,330 --> 00:09:14,760
for Jason.

105
00:09:14,800 --> 00:09:22,240
So sending it as JSON data and then the semicolon and let's set up the character set and equal that

106
00:09:22,240 --> 00:09:23,730
to UTF eight.

107
00:09:24,130 --> 00:09:26,510
So let's see how that works.

108
00:09:27,760 --> 00:09:35,110
So now we added in title test and of course, we're not posting the content properly into it, but it

109
00:09:35,110 --> 00:09:39,280
did create a new ID and then it returned back to ID content.

110
00:09:39,700 --> 00:09:42,700
So we want to prevent the default action.

111
00:09:44,860 --> 00:09:46,030
So prevent default.

112
00:09:46,880 --> 00:09:53,380
And let's try that one more time and console log out the options just to see what we're passing through

113
00:09:53,710 --> 00:09:55,390
and also need to update this.

114
00:09:55,390 --> 00:09:57,490
So that should be character set.

115
00:09:59,410 --> 00:10:01,930
So let's try that and new.

116
00:10:03,790 --> 00:10:06,070
So it is adding to the database.

117
00:10:06,070 --> 00:10:12,100
So do need to do some troubleshooting to see why it's not passing and then accepting the JSON object,

118
00:10:12,400 --> 00:10:12,850
the body.

119
00:10:13,360 --> 00:10:18,700
And the problem actually is going to be where our database file is located because it's in the same

120
00:10:18,700 --> 00:10:25,810
file directory as our live app and the live server is actually doing a page refresh because the code

121
00:10:25,810 --> 00:10:26,620
has changed.

122
00:10:26,920 --> 00:10:34,180
So let's make a quick update to it and I'll move the location of the database outside of this folder.

123
00:10:34,480 --> 00:10:35,380
And I just went into the.

124
00:10:35,460 --> 00:10:42,000
Terminal, I stopped and I restarted, so now our DB JSON file is actually going to be sitting somewhere

125
00:10:42,000 --> 00:10:46,380
outside of this main folder that we're working on our workspace folder.

126
00:10:46,620 --> 00:10:50,340
So the live server now is no longer refreshing.

127
00:10:50,550 --> 00:10:57,620
So if we do a hello world, do I create new and we see the response object being sent back with the

128
00:10:57,660 --> 00:11:04,250
JavaScript code, then we see that this actually got updated and we added to the database file.

129
00:11:05,400 --> 00:11:08,760
So whatever we type in here, so it's going to be all uppercase.

130
00:11:09,390 --> 00:11:12,080
We add in and we get the response of the ID back.

131
00:11:12,510 --> 00:11:19,950
In addition, let's add one more button to the page and this button can add and just list out everything.

132
00:11:19,950 --> 00:11:23,190
So the same thing that we're doing when the window loads.

133
00:11:23,760 --> 00:11:25,560
So creating a brand new button object.

134
00:11:25,980 --> 00:11:34,320
And what I'll do is I'll create the function to create element and the parameters it's going to require.

135
00:11:34,350 --> 00:11:35,490
So this is the parent.

136
00:11:38,210 --> 00:11:45,680
And then whatever type of element that we want to create and then any of the HTML code that we want

137
00:11:45,680 --> 00:11:46,340
to add into it.

138
00:11:48,730 --> 00:11:58,450
So let's create the elements and using the document, create elements and specifying the type of element

139
00:11:58,450 --> 00:12:06,910
that we want to create and then the parent object and using append, let's append the element to the

140
00:12:06,910 --> 00:12:12,430
page and for the elements, the inner html of the elements.

141
00:12:12,460 --> 00:12:17,710
So set that as the HTML they got passed in and then return back the element object.

142
00:12:18,040 --> 00:12:22,630
So this way we can create an element for the page.

143
00:12:24,430 --> 00:12:27,370
And let's add in a few other buttons to the page.

144
00:12:29,700 --> 00:12:43,080
So button one is going to load all of the content, so be load content or so just say maybe load posts

145
00:12:43,980 --> 00:12:47,520
and that way you can change it around if you want to add and to load the comments.

146
00:12:47,530 --> 00:12:48,000
So on.

147
00:12:49,450 --> 00:12:56,530
And I'll just update this to create my element instead of create element to avoid any confusion with

148
00:12:56,530 --> 00:12:59,530
the create element function within the document object.

149
00:13:02,790 --> 00:13:09,600
So when we create an elements and type of element that we want to create, so in this case, we're adding

150
00:13:09,600 --> 00:13:13,200
in a button and it's going to say a load posts.

151
00:13:13,860 --> 00:13:20,730
And the parent that we're adding it to says also make sure that we're selecting all of the page elements

152
00:13:21,210 --> 00:13:23,610
and we're going to add it into the container.

153
00:13:26,520 --> 00:13:29,280
So now we've got a button for loading the posts.

154
00:13:29,280 --> 00:13:32,010
So it's just added into another div on the page.

155
00:13:35,720 --> 00:13:40,640
And we can also just create a function for this button event.

156
00:13:44,090 --> 00:13:44,660
So.

157
00:13:48,160 --> 00:13:51,280
So this will be just get all posts function.

158
00:13:53,330 --> 00:14:01,940
And we can add that as an event and update the event listener to just get all of the posts.

159
00:14:04,770 --> 00:14:13,440
And let's select that content go down where we got all of the posts, make a quick update to this person

160
00:14:13,620 --> 00:14:21,950
event, object into it so that if we need to prevent the default action, we can select and prevent

161
00:14:21,950 --> 00:14:22,850
the default action.

162
00:14:23,460 --> 00:14:25,920
And I'm just going to realign the content here.

163
00:14:26,610 --> 00:14:31,440
So we're still getting all of the posts whenever the page loads.

164
00:14:31,470 --> 00:14:32,550
So it's outputting here.

165
00:14:33,480 --> 00:14:39,450
And also we can add an event listener to button two that's going to load the posts.

166
00:14:41,190 --> 00:14:47,220
And I'm also going to take this content and create a function in order to handle it.

167
00:14:50,220 --> 00:14:54,000
So selecting the whole event object.

168
00:14:56,720 --> 00:15:05,900
And what this will do is this is going to load the odd item, or I can call it add post.

169
00:15:10,360 --> 00:15:18,280
So this is just to simplify it and make things more readable, so function, add, post and pass an

170
00:15:18,370 --> 00:15:27,780
event object and this is where I just going to paste in the post content and I'm going to realign it.

171
00:15:27,790 --> 00:15:31,300
So just format and just beautify it through the editor.

172
00:15:32,830 --> 00:15:35,260
So it looks like I do have an error here.

173
00:15:35,380 --> 00:15:41,040
So I had an extra rounded bracket and must make sure that this works.

174
00:15:41,050 --> 00:15:45,790
So create posts and go into the database so we're able to create a new post.

175
00:15:46,120 --> 00:15:50,110
So that's working and the load posts within the JavaScript.

176
00:15:52,690 --> 00:16:00,760
So I had to button one and this can just to get all of the posts so that we've got two functions there,

177
00:16:01,360 --> 00:16:08,030
and I'm also where we're adding to the post, I create an object value for title.

178
00:16:08,920 --> 00:16:17,860
And this way, if the title is blank, then whatever we want as a default title will get loaded.

179
00:16:21,930 --> 00:16:32,130
So let's update this value to include title and then also title for title or for value will reset the

180
00:16:32,130 --> 00:16:33,950
value just to be blank.

181
00:16:34,800 --> 00:16:42,090
So once we've picked it up for adding to the post, we can just clear it out and we won't need any of

182
00:16:42,090 --> 00:16:43,980
these console messages anymore.

183
00:16:45,060 --> 00:16:48,200
So let's save it and create a new one.

184
00:16:48,420 --> 00:16:53,040
So we created a default title with the author and ID.

185
00:16:53,340 --> 00:16:54,720
So that post has been added.

186
00:16:54,940 --> 00:17:00,720
Now when we do a loading of the posts, all of the content is there, so we want to load it all onto

187
00:17:00,720 --> 00:17:01,290
the page.

188
00:17:01,590 --> 00:17:02,760
So that's coming up next.

189
00:17:02,910 --> 00:17:09,480
When we continue to build out this application, costs for this lesson are to connect to that local

190
00:17:09,690 --> 00:17:13,920
DB JSON file and get the contents of that file.

191
00:17:13,920 --> 00:17:21,440
So select all of the posts that are contained within JSON file using the routing endpoint for the localhost

192
00:17:21,450 --> 00:17:30,060
PT. three thousand four posts output the response JSON into the console and then create an option for

193
00:17:30,060 --> 00:17:38,610
the user to use the post method to add content from the input field and post it to the database.

194
00:17:40,400 --> 00:17:45,920
So allowing the user to dynamically interact with database content and add to it.