WEBVTT 00:00.690 --> 00:07.740 In the last lesson, we mentioned that it's not very good user experience to let your website simply 00:07.740 --> 00:14.790 hang and time out once the user has submitted their details, they're not going to have much confidence 00:14.790 --> 00:17.970 in this newsletter if we don't give them some feedback. 00:17.970 --> 00:18.300 Right. 00:18.960 --> 00:20.910 So let's go ahead and do that. 00:21.390 --> 00:23.390 This is going to be a challenge for you. 00:24.210 --> 00:30.420 How can we figure out what response code we got back after making this request? 00:30.870 --> 00:36.000 And if that code was 200, then it probably means that things went OK. 00:36.330 --> 00:42.420 And we're going to send the user a piece of text to be displayed in the website. 00:42.900 --> 00:48.540 Now, if the code wasn't 200 and we got a different code, then we're going to send them a different 00:48.540 --> 00:48.990 message. 00:49.200 --> 00:52.120 Something about the process failed and they should try again later. 00:52.620 --> 00:56.820 So pause the video and see if you can complete this challenge. 00:59.170 --> 01:05.290 All right, so we know that we can get hold of the response object, that we get back from making the 01:05.290 --> 01:12.910 request and we can tap into the status code to see whether if it was 200 or whether if it was something 01:12.910 --> 01:13.210 else. 01:13.750 --> 01:17.530 What if we check whether if the status code was equal to 200? 01:19.650 --> 01:28.570 And if so, then we go ahead and use that send to send a piece of text to be displayed in the Web site. 01:29.070 --> 01:34.440 Now, you could, of course, send a paragraph or an H1 element, but I'm just going to send a very 01:34.440 --> 01:35.190 simple text. 01:35.190 --> 01:40.500 I'm going to say successfully subscribed. 01:41.910 --> 01:49.290 And if the code was not 200, then I'm going to send there was an error with signing up, please try 01:49.290 --> 01:49.740 again. 01:50.430 --> 01:53.130 So now let's go ahead and test it out. 01:53.830 --> 01:58.320 When I click, sign me up, I get successfully subscribed. 01:58.710 --> 02:00.830 And this is written in the Web site. 02:01.500 --> 02:10.680 But let's say that the API key was wrong or if the list ID was wrong, well, then in this case, when 02:10.680 --> 02:13.710 I try to sign up, then I get there was an error with signing up. 02:13.980 --> 02:15.030 Please try again. 02:15.720 --> 02:19.370 This works, but it's a bit plain, right? 02:19.380 --> 02:25.740 Nobody wants to go on a website that looks nice initially and then after a bit of interaction, it ends 02:25.740 --> 02:28.300 up looking really, really plain. 02:29.160 --> 02:32.270 What if we wanted to use Bootstrap to jazz it up a bit? 02:32.880 --> 02:41.940 Well, we can because previously we created the beginnings of the success story HTML and the failure 02:42.230 --> 02:45.960 HTML in addition to our sign up dot org html. 02:46.620 --> 02:54.390 Here we can include some bootstrap code that will quickly give us a nice looking page that looks a lot 02:54.390 --> 02:55.830 better than what we had before. 02:56.070 --> 03:00.770 And we can also include buttons and allow the user to interact with it. 03:01.320 --> 03:07.350 So I'm going to head over to the bootstrap website and I'm going to head over to components and I'm 03:07.350 --> 03:12.630 going to add a Jumbotron to our website, something that looks a bit like this. 03:13.140 --> 03:20.170 So let's go ahead and copy all of this code and we're going to add HTML boilerplate. 03:20.670 --> 03:27.510 This one is going to have a title of failure, which sounds a bit sad, but let's paste our code for 03:27.510 --> 03:31.740 our Jumbotron and the each one is going to say, Oh. 03:43.210 --> 03:51.520 And we're also going to have a Jumbotron in our success, not HTML, and this one is going to say. 03:58.680 --> 04:05.520 Now, in order to use bootstrap, of course, we need our bootstrap style stylesheet, so let's go ahead 04:05.520 --> 04:11.160 and copy that over to our success and our failure websites. 04:12.320 --> 04:19.760 Now it's back to you for a challenge, instead of using red dots and to send these messages, can you 04:19.760 --> 04:26.930 figure out how we can send these success and failure Web pages over instead pause the video and try 04:26.930 --> 04:28.060 to complete the challenge? 04:30.420 --> 04:36.720 All right, so that's going to be as simple as changing residents send to residents and file, and then 04:36.720 --> 04:45.640 we add our directory and then we tag on our filename, which is going to be for its success dot html. 04:45.990 --> 04:54.450 The name of this file and then this line is going to be residents and file failure dot html. 04:55.140 --> 05:05.400 So now let's check it out, try some random stuff and let's hit sign me up and awesome. 05:05.400 --> 05:07.590 You've been successfully sign up to the newsletter. 05:07.590 --> 05:08.360 Look forwards. 05:08.470 --> 05:08.760 Awesome. 05:08.760 --> 05:09.620 Awesome content. 05:10.080 --> 05:11.180 So that's pretty cool. 05:11.670 --> 05:15.090 And let's test out our failure site. 05:18.790 --> 05:26.350 There's one other problem that I'd like to address, it would be nice if they failed on signing up to 05:26.350 --> 05:34.600 be able to try again and if they had a big button here that said try again, that takes them back to 05:34.600 --> 05:37.030 the original page over here. 05:37.300 --> 05:38.840 That would be pretty nice, right? 05:39.670 --> 05:43.650 We can do this by using our page over here. 05:44.350 --> 05:56.920 We can simply add a form that includes a submit button and this button will say try again and it will 05:56.920 --> 06:02.090 have the action of posting to a new route, which is the failure route. 06:02.560 --> 06:09.460 Now, our form is not going to have a class, but our button is going to get some bootstrap classes, 06:09.670 --> 06:19.750 namely b10 b10 large b10 warning to turn it yellow. 06:22.160 --> 06:32.960 So now let's try again to go to our failure page, and now you can see we have a try again button, 06:33.470 --> 06:42.980 but at the moment it doesn't work because we don't yet have a route to find for the failure route that's 06:42.980 --> 06:44.600 making a post request. 06:45.140 --> 06:51.170 So let's do that here below our post request for the home route. 06:51.320 --> 06:54.860 I'm going to add another one for our failure route. 06:56.390 --> 07:04.100 And this one is going to have a completion handler that redirects the user to the home run. 07:04.670 --> 07:09.410 So I can simply say rest, don't redirect. 07:10.220 --> 07:14.330 And the path I want to redirect it to is simply the home route. 07:14.570 --> 07:21.950 So now when we end up on that failure route, then when we click this button, it will take us right 07:21.950 --> 07:23.790 back to the sign up page. 07:24.890 --> 07:31.820 So that means when I click this button that says try again, we're going to trigger a post request to 07:31.820 --> 07:37.160 the failure route and that is going to be caught by our server over here. 07:37.460 --> 07:45.440 And it's going to redirect to the home route, which triggers this app doGet, and it sends the sign 07:45.440 --> 07:49.580 up page as the file to be rendered on screen. 07:50.270 --> 07:56.630 So that's pretty much all the functionality that we need for our very simple newsletter sign up page. 07:57.110 --> 08:01.130 Now, there's a whole world of customization that you can add to this. 08:01.380 --> 08:07.910 And of course, you can make it even more complex with better pages, better rendering and customizing 08:07.910 --> 08:08.840 these pages. 08:09.110 --> 08:15.860 But what's more important than that is how do we get our server to not just be hosted locally? 08:16.220 --> 08:24.390 Because at the moment, this website only works when we're running our servers locally on our computer. 08:24.830 --> 08:32.030 How can I put this onto the World Wide Web so that we can send our friends and family and clients and 08:32.030 --> 08:40.910 customers a euro so that they can go ahead and use this website and sign up to our MailChimp list as 08:40.910 --> 08:41.240 well? 08:41.780 --> 08:48.410 Well, that is what we're going to tackle in the next lesson where we make our website go live so that 08:48.410 --> 08:53.540 it's a real Web app available on the World Wide Web for all of that. 08:53.660 --> 08:55.400 And we'll ask you on the next lesson.