WEBVTT 0 00:00.970 --> 00:06.370 I hope you are as excited as I am, because for the first time in this course, I'm going to show you 1 00:06.400 --> 00:07.540 what AJAX is. 2 00:07.570 --> 00:08.710 Now, let me be clear. 3 00:08.710 --> 00:14.620 This course is not about AJAX, and it will take me a very, very long time to really explain what AJAX 4 00:14.620 --> 00:18.430 is, to show you the XHR object versus the new Fetch API. 5 00:18.610 --> 00:20.470 I don't want to get into so much detail. 6 00:20.470 --> 00:26.410 All I want to show you is just a high level overview of what AJAX is, and that it is a real alternative 7 00:26.410 --> 00:30.580 to submitting form data to a server. Because this is probably going to be quite lengthy, 8 00:30.580 --> 00:34.030 I just want to start off with the HTML, then we can take a break. 9 00:34.300 --> 00:40.420 Then in the next lecture we can finish off by coding our PHP file, setting up the server and then coding 10 00:40.420 --> 00:41.620 our JavaScript, right, 11 00:41.620 --> 00:43.890 because we've got all those little errors that are going to be displayed. 12 00:43.900 --> 00:44.980 It's going to be really fun. 13 00:44.980 --> 00:45.550 I can't wait. 14 00:45.550 --> 00:48.130 So let's start off with the HTML. Of course, 15 00:48.130 --> 00:49.240 it's a blank file, right? 16 00:49.270 --> 00:50.770 You know my style. 17 00:50.770 --> 00:52.630 So we've got HTML. 18 00:52.630 --> 00:55.450 We are going to need to include CSS. 19 00:55.480 --> 00:59.530 I'm not going to put it in a separate CSS file because it's going to be really simple. 20 00:59.530 --> 01:02.690 I don't want to concentrate on CSS in this lecture. 21 01:02.690 --> 01:07.700 It's going to look rather ugly, but it's more the back end code that I want you to understand and code 22 01:07.700 --> 01:09.380 with you, not CSS. 23 01:09.740 --> 01:10.340 All right. 24 01:10.340 --> 01:15.590 And then of course, we in our body, this is where we have all of our HTML. 25 01:15.590 --> 01:18.440 And of course, I want an h1 heading, right. 26 01:18.440 --> 01:21.260 And this is submitting form to a PHP server. 27 01:21.260 --> 01:26.300 So why don't we say "Submitting a form to a PHP server !" 28 01:26.450 --> 01:27.590 This is our h1 heading. 29 01:27.590 --> 01:28.700 Very, very simple. 30 01:28.700 --> 01:31.070 Everything else I want wrapped within this form element. 31 01:31.070 --> 01:33.370 But, do we need an action? 32 01:33.380 --> 01:37.970 No, because we're going to be using AJAX, so let's remove this action entirely. 33 01:37.970 --> 01:41.060 This is what's really cool. And I want to now create our form. 34 01:41.060 --> 01:44.930 I want to wrap each form control within its own div element. 35 01:44.930 --> 01:53.210 And why don't we give each control its own ID. So, this div can have an ID of usernameWrapper. 36 01:54.930 --> 01:58.890 And within here we can have a label for username. 37 01:59.160 --> 02:00.390 Well, let's just call it name. 38 02:00.390 --> 02:02.310 I'll show you something new here. 39 02:02.460 --> 02:05.430 And we can ask the user, "What is your cool 40 02:06.150 --> 02:06.990 username?" 41 02:07.380 --> 02:09.900 Now we can have an input of type text. 42 02:09.940 --> 02:11.080 It's very, very simple. 43 02:11.100 --> 02:13.980 We can give it a name of username. 44 02:13.980 --> 02:17.970 And remember, this is the name that is submitted to the server. 45 02:18.830 --> 02:22.190 We're giving our variable name, the name of "username". 46 02:22.340 --> 02:26.240 The ID has to match the name of that for attribute, which is name. 47 02:26.240 --> 02:27.410 And that's why I wanted to show you, 48 02:27.410 --> 02:32.900 it doesn't always have to be one value that's used on the for attribute, the name attribute and the 49 02:32.900 --> 02:35.600 ID. And let's give this a placeholder: 50 02:35.810 --> 02:38.510 "make it funky ... " 51 02:40.630 --> 02:41.530 And that's it. 52 02:41.740 --> 02:43.180 It really is this simple. 53 02:43.330 --> 02:46.810 And let's create another form control here asking for the user's favorite food. 54 02:46.810 --> 02:51.340 So why don't we give it an ID of foodWrapper. 55 02:52.570 --> 02:57.670 Within here, the label, we can give its for attribute the value of food. 56 02:57.700 --> 03:02.710 We can ask the user, "What is your favorite food?" 57 03:03.190 --> 03:05.380 And of course, input type text. 58 03:05.410 --> 03:08.680 The name that we send to the server can be favFood. 59 03:08.710 --> 03:12.820 The ID has to match the for attribute's name of food. 60 03:13.000 --> 03:16.030 And again, let's give this a placeholder of "yum ...". 61 03:16.060 --> 03:17.440 What I want to do, 62 03:17.470 --> 03:18.820 you see, we've got two inputs here, 63 03:19.120 --> 03:22.540 I actually want to give each input a class of input 64 03:23.410 --> 03:24.460 just to make it very clear. 65 03:24.460 --> 03:29.470 So, on both inputs, I'm just adding a class of "input". 66 03:31.140 --> 03:32.850 You'll see how we use that later. 67 03:33.600 --> 03:35.250 And then finally, we've got a form. 68 03:35.250 --> 03:37.080 We've got nowhere to submit the form. 69 03:37.080 --> 03:39.000 So of course let's do a final div. 70 03:39.030 --> 03:43.500 We don't even need to give that an ID because we're going to have one button on this entire form, which 71 03:43.500 --> 03:48.810 is a button of type submit, and we can give it a value of "Send my details". 72 03:49.690 --> 03:52.630 And of course you already know we don't need type of submit, do we? 73 03:52.660 --> 03:53.620 We could just do this. 74 03:53.620 --> 03:56.170 But anyway, I like being very explicit. 75 03:56.530 --> 03:58.180 Let's look on the browser now. 76 03:58.180 --> 03:58.990 And there we go. 77 03:58.990 --> 04:00.510 It kind of looks okay. 78 04:00.520 --> 04:05.800 Like I mentioned, I don't care about the CSS, but in saying that, let me just center everything. 79 04:06.100 --> 04:08.230 So let's just scroll up here in our file. 80 04:08.260 --> 04:11.790 Let's target the h1 and the divs. 81 04:12.550 --> 04:15.490 Let's give it a width of 70%. 82 04:15.520 --> 04:16.360 How's that? 83 04:16.570 --> 04:18.110 And now I want it centered. 84 04:18.130 --> 04:19.470 Let me just show you exactly what I'm doing. 85 04:19.480 --> 04:20.560 Let's inspect this. 86 04:20.770 --> 04:22.950 Let's look here at our form. 87 04:22.960 --> 04:25.300 Can you see if we look at our form element, 88 04:25.330 --> 04:27.070 it's all pushed to the left. 89 04:27.550 --> 04:29.130 All our text and all our widgets. 90 04:29.140 --> 04:34.180 I want it centered. To center that, all we have to do is access the text-align property in CSS. 91 04:34.210 --> 04:36.040 It is really, really that simple. 92 04:36.070 --> 04:38.140 Text-align, center. 93 04:38.570 --> 04:38.760 Right. 94 04:38.890 --> 04:42.450 It's all we have to do. If we save this, and we look now, it's now centered 95 04:42.460 --> 04:45.060 okay. But remember, we gave it a width of 70% 96 04:45.070 --> 04:48.850 so that's why it's kind of not exactly centered. To exactly center it, 97 04:48.850 --> 04:52.270 I want to affect its margin property, zero auto. 98 04:52.300 --> 04:53.470 Let's see what that looks like. Now 99 04:53.470 --> 04:56.470 it's exactly in the center, which is really, really cool. 100 04:57.460 --> 04:59.800 But you can see they're a bit bunched up to each other. 101 04:59.800 --> 05:04.720 So why don't we maybe give it a top and bottom margin of 10 pixels? 102 05:05.200 --> 05:06.160 See that. 103 05:06.190 --> 05:06.700 There we go. 104 05:06.700 --> 05:07.750 I think this is fine 105 05:07.750 --> 05:09.820 for the example I want to show you. 106 05:09.820 --> 05:10.750 So let me stop here. 107 05:10.750 --> 05:12.880 We've done our HTML and CSS. 108 05:12.880 --> 05:14.080 Take a break. 109 05:14.110 --> 05:19.030 Think about not necessarily the code and the syntax on how to write it, but think about what it is 110 05:19.030 --> 05:19.990 we need to do. 111 05:20.380 --> 05:22.810 It's going to be super, super interesting and super fun. 112 05:22.810 --> 05:25.240 I can't wait and I'll see you in the next lecture.