WEBVTT 0 00:00.030 --> 00:06.360 All right guys. So you should be pretty familiar to setting up new projects using Node and 1 00:06.390 --> 00:08.010 Express by now. 2 00:08.040 --> 00:14.880 So I want to set this to you as a challenge, and right now on the screen you should see a checklist of a number 3 00:14.880 --> 00:18.200 of things that you need to do in order to set up this project. 4 00:18.240 --> 00:23.340 And I want you to pause the video and try to do all of those things so that we get to a point where 5 00:23.340 --> 00:26.580 we're ready to go and we can start coding up our sign up form. 6 00:26.790 --> 00:28.810 So good luck and I'll see you soon. 7 00:31.580 --> 00:31.920 All right. 8 00:31.930 --> 00:33.280 So I hope that went all right. 9 00:33.280 --> 00:37.780 We're going to be repeating these steps every single time we create a new project, and it's pretty simple 10 00:37.780 --> 00:38.770 once you get used to it. 11 00:38.950 --> 00:45.520 So first things first. We’re going to change directory into a location where we want to create our new 12 00:45.520 --> 00:51.400 project, and we're going to call it Newsletter-Signup. 13 00:52.030 --> 00:58.600 And now that we've created this new directory, let's cd over to it, and inside here we're going to create 14 00:58.660 --> 01:04.840 our new files. And the file that we're going to write our server side code in is going to be called 15 01:04.870 --> 01:05.620 app.js. 16 01:05.650 --> 01:12.310 Now in a lot of Node.js, and especially Node.js projects that use Express, you'll see that their main server 17 01:12.430 --> 01:14.270 file is called app.js. 18 01:14.290 --> 01:19.150 Now it's actually completely up to you what you want to call it, but this is something that you will 19 01:19.150 --> 01:26.290 see out in the wild as well. If you don't want to create each of these files individually by writing 20 01:26.290 --> 01:32.320 touch this file, touch that file, you can actually chain them together just by using touch once, and then 21 01:32.320 --> 01:36.580 you can add all of the names, all of the files that you want to create in one go. 22 01:36.940 --> 01:44.560 So, for example, we need to create signup.html, as well as success.html, and also 23 01:44.650 --> 01:50.700 failure.html. By having all three files with a single space between them, 24 01:50.740 --> 01:54.850 when I hit enter, you can see that all three get created simultaneously. 25 01:54.850 --> 01:59.610 So the command line is super powerful and it is here to be your friend. 26 01:59.680 --> 02:04.960 So the next thing to do is to create our NPM to initialize NPM. 27 02:04.960 --> 02:09.140 And I'm just going to keep to these standard options just by hitting enter. 28 02:09.220 --> 02:12.760 And finally I'm going to hit enter to create our package.json. 29 02:12.790 --> 02:21.100 So now that we have that, we can go ahead and install our NPM modules. And again, just as I did with 30 02:21.160 --> 02:27.520 the touch command, I'm going to install a number of modules simultaneously, so add all of their names, 31 02:27.640 --> 02:33.850 and then I'll include a space in between, so that we can install all of them at the same time. So the 32 02:33.850 --> 02:37.960 ones I need are body-parser, express and request. 33 02:37.960 --> 02:42.720 So now let's hit enter, and we'll let that download in the background. 34 02:42.730 --> 02:42.910 All right. 35 02:42.910 --> 02:51.430 So now that it's done, let's open up our project in Atom, and let's head into our app.js and require 36 02:51.730 --> 02:54.130 those modules that we just installed. 37 02:54.490 --> 03:01.320 So the first one was express, next was body-parser, 38 03:01.360 --> 03:05.810 and finally we've got our request package. 39 03:06.190 --> 03:13.400 And let me just add in that comment, so that our JSHint is not going crazy on us. 40 03:13.760 --> 03:14.510 All right. 41 03:14.560 --> 03:21.800 Now that we've done all of that, the last thing to do is to setup our server to listen on port 42 03:21.800 --> 03:22.390 3000. 43 03:22.420 --> 03:30.280 So first things first, we need to create our app constant, and this is equal to a new instance of Express. 44 03:30.310 --> 03:35.040 And now we can use that app to listen on port 3000. 45 03:35.290 --> 03:45.410 And once that port is set up and ready to go, we're going to log that our server is running on port 46 03:45.410 --> 03:46.270 3000. 47 03:48.100 --> 03:49.420 All right. Cool. 48 03:49.720 --> 03:50.090 That's it. 49 03:50.110 --> 03:54.050 That's all you need to do to set up a brand new project. 50 03:54.220 --> 04:00.000 And as you go along creating new projects, this process will very soon become second nature. 51 04:00.070 --> 04:06.130 Now that we've done all of this, the next thing that we need to do is we need to create a HTML page that 52 04:06.130 --> 04:07.930 has a sign up form on it. 53 04:08.290 --> 04:10.750 So where can we get one of those in a hurry? 54 04:10.750 --> 04:16.220 Well, it's time to start piecing together some of the different things that we learnt about in this course. 55 04:16.360 --> 04:22.030 If you remember, in the Bootstrap module, we spoke about how Bootstrap can cut down on development time 56 04:22.240 --> 04:24.340 and make our web site look really nice. 57 04:25.300 --> 04:30.610 So let's head over to getbootstrap.com and go over to their Examples section. 58 04:30.610 --> 04:36.340 So here they've got a whole bunch of examples that allow you to quickly get a project started, and that's 59 04:36.340 --> 04:37.480 exactly what we're going to do. 60 04:37.870 --> 04:43.540 So if you scroll down, you'll see that there are some complex forms, which is not what we want, but there's 61 04:43.540 --> 04:48.210 also some simple forms, and this is exactly what we're going to use. 62 04:48.220 --> 04:54.040 So right click on this web site, and we're going to view its page source, and then we're going to select 63 04:54.130 --> 04:59.260 all of this, and then paste it inside our signup.html. 64 04:59.410 --> 05:07.240 So now, if you right click on this and copy full path, then you can see that our page looks nothing like 65 05:07.300 --> 05:09.160 what they had over here. 66 05:09.160 --> 05:10.300 Now why is that? 67 05:10.300 --> 05:14.140 Well, the first thing you notice is that this doesn't look very bootstrappy at all. 68 05:14.140 --> 05:18.690 The fonts are not bootstrapped, the buttons don't look bootstrappy. 69 05:18.750 --> 05:23.320 So we haven't actually got Bootstrap enabled in our web site. 70 05:23.410 --> 05:24.640 And why is that? 71 05:24.640 --> 05:30.400 Well, if you take a look at this section where it says ‘Bootstrap core CSS’, well, they've actually got it 72 05:30.400 --> 05:35.260 included as a local file, and that file we don't currently have. 73 05:35.290 --> 05:41.350 So let's go onto the Internet and grab the Bootstrap CDN so that we can also incorporate Bootstrap 74 05:41.380 --> 05:43.630 into our web site. 75 05:43.630 --> 05:51.660 I'm just going to copy this entire link, and I'm going to replace this line with that. 76 05:51.670 --> 05:57.430 So now let's go ahead and refresh our web site, and you can see that we've got a lot of the Bootstrap 77 05:57.490 --> 05:59.530 elements that have been enabled. 78 05:59.530 --> 06:03.520 The fonts are now Sans Serif, and it's looking a little bit nicer. 79 06:03.520 --> 06:07.240 The only problem is that they still don't look anything like each other, 80 06:07.240 --> 06:07.510 right? 81 06:08.110 --> 06:13.550 And the reason is because, if we have a look at the source, in addition to the Bootstrap core CSS, 82 06:13.630 --> 06:19.330 they've also got a custom style sheet for this template. And you can find this template by following 83 06:19.330 --> 06:20.450 this link. 84 06:20.480 --> 06:20.950 Aha. 85 06:20.950 --> 06:23.050 So they've got some custom CSS here. 86 06:23.050 --> 06:29.510 Well, let's go ahead and rip off that as well, so that we can put it into our web site. 87 06:29.510 --> 06:35.670 Now I use these terms like rip off and steal, but actually it's fine. Bootstrap allows you to do this 88 06:35.800 --> 06:42.220 and it's set all of this up so that we can speed up our development time and make it easier for us to 89 06:42.220 --> 06:43.540 create beautiful web sites. 90 06:43.990 --> 06:50.290 So inside our newsletter sign up, I'm going to create a new file called styles.css, and I'm going 91 06:50.290 --> 06:53.280 to paste all of that CSS into here. 92 06:53.320 --> 07:02.380 And, as usual, we're going to change our link ref to refer to that CSS, which was called styles.css. 93 07:02.380 --> 07:09.160 So now, when we refresh our web site, then you can see that we're getting pretty close to the desired 94 07:09.250 --> 07:10.830 look and feel. 95 07:10.900 --> 07:18.670 Now all we have to do is just to modify the words and the inputs and the buttons to fit our project. 96 07:18.670 --> 07:25.990 So inside our signup.html, we're going to change our title from ‘Signin Template for Bootstrap’, 97 07:26.020 --> 07:36.580 which looks like we obviously took it from somewhere, to our Newsletter Signup. Next is this image, which 98 07:36.640 --> 07:40.850 is the Bootstrap brand logo, which looks like this, 99 07:40.990 --> 07:44.950 and instead we're going to include our own custom image. 100 07:44.950 --> 07:52.360 So I'm going to create a images folder, and inside this images folder I'm going to drop in a image that 101 07:52.360 --> 07:56.140 I have, which is called lablogo.png. 102 07:56.200 --> 08:01.990 Now feel free to add in whichever image you would like for your newsletter web site because, after all, 103 08:02.050 --> 08:03.950 this is about your web site. 104 08:03.950 --> 08:13.260 So now I can replace this source from this http address to “images/lablogo.png”. 105 08:13.360 --> 08:20.170 This is a image called lablogo.png inside a folder called images, and that corresponds to what 106 08:20.170 --> 08:21.010 we've got over here. 107 08:21.160 --> 08:25.690 So let's hit save and let's check to make sure that it appears. All right. 108 08:25.690 --> 08:27.370 Looking pretty good. 109 08:27.370 --> 08:36.490 Now let's change some of these bits of text. Instead of ‘Please sign in’, let's say ‘Signup to My Newsletter!’. 110 08:39.250 --> 08:45.250 And instead of having an email address and a password, what I actually want are three input fields: the 111 08:45.250 --> 08:50.870 first name, their last name, and their e-mail address, because we're not actually signing anybody in, 112 08:50.890 --> 08:57.310 we’re signing them up. So I'm going to add another input, and I'm going to delete these labels, because 113 08:57.340 --> 09:04.300 currently they’re only for screen readers. And I'm also going to delete our checkbox that says ‘Remember 114 09:04.300 --> 09:06.180 Me’, which we don't need. 115 09:06.250 --> 09:08.800 So let's go ahead and add a new input. 116 09:08.890 --> 09:15.790 So we have three of them now, and the first one, the type is going to be just a simple text input, and 117 09:15.790 --> 09:20.860 the place holder is going to be “First Name”. 118 09:20.860 --> 09:30.490 The second one is going to be, again, type of text, and the place holder is going to be “Last Name”. 119 09:30.490 --> 09:36.050 Now we don't need an id for our inputs, so I'm going to delete that. 120 09:36.070 --> 09:39.780 And finally, the last one is going to be type email, 121 09:39.970 --> 09:45.910 and the place holder is going to say “Email”. All three of these are required, 122 09:45.910 --> 09:50.650 and the first one is automatically focused when we load up our web site, 123 09:50.980 --> 09:54.340 so that means it's got that blue highlight around it. 124 09:54.340 --> 10:03.220 And, of course instead of saying ‘Sign in’, we should say ‘Sign Up’, or ‘Sign Me Up’. And the copyright text down 125 10:03.220 --> 10:12.170 here I'm just going to change to say ‘The App Brewery’, or whichever company, or your name, if you wish. 126 10:12.190 --> 10:19.690 So now that we're happy with our text and our images, the next thing to fix are these input boxes. 127 10:19.780 --> 10:22.110 You can see that in their input boxes, 128 10:22.150 --> 10:23.800 they all look very together, 129 10:23.800 --> 10:24.500 right? 130 10:24.520 --> 10:31.250 And that's because the corner radius is only applied to the top left and right for the first input, and 131 10:31.250 --> 10:37.220 then the bottom left and right gets a rounded corner on the second input. And we can see that when we 132 10:37.220 --> 10:42.770 go into the styles.css, you can see that they're targeting the input that has type email and 133 10:42.770 --> 10:46.790 the input that has type password to apply these things to. 134 10:46.850 --> 10:50.510 Now we no longer have an input with a type of password, 135 10:50.510 --> 10:59.210 so I'm going to change this one to .top, this one to .bottom, and I'm also going to add another 136 10:59.210 --> 11:01.490 class called .middle. 137 11:01.490 --> 11:06.970 So now we can go over and apply those classes to our inputs. 138 11:07.010 --> 11:12.490 So this one is going to have a class of top and this one is going to be middle, 139 11:12.560 --> 11:15.080 and this one is going to be bottom. 140 11:15.110 --> 11:21.980 So now, if we take a look at our rendered newsletter page, then you can see that we've got the rounded 141 11:21.980 --> 11:25.430 corners for the top and the bottom looking pretty nice. 142 11:25.430 --> 11:26.990 Now it's just the middle one. 143 11:27.020 --> 11:35.300 It doesn't actually need any rounding of the corners, so we can go ahead and add the border radius to 144 11:35.390 --> 11:36.050 zero. 145 11:37.220 --> 11:41.240 So that means that it no longer has curved edges. 146 11:41.240 --> 11:47.930 And the final thing that you can fix if you want is this last bit looks a little bit heavier in terms 147 11:47.930 --> 11:48.910 of its shadow, 148 11:49.130 --> 11:55.870 and that's because we need a margin-bottom of -1 pixels just to pull it up a little bit. 149 11:55.940 --> 11:58.040 And that is now looking perfect. 150 11:58.430 --> 12:04.150 So, as you can see, at the moment I'm accessing this web site as a static page. 151 12:04.190 --> 12:07.540 Now that's not how we do things anymore when we have a server, 152 12:07.610 --> 12:12.570 but, in order for that to work, you need to set up the get method for our home route, 153 12:12.650 --> 12:16.430 and you also need to make sure there's two S's in express. 154 12:16.610 --> 12:22.730 So, as a challenge, I want you to set up the get route to our sign up page so that we can test it on the 155 12:22.730 --> 12:29.210 browser at localhost:3000. Pause the video and remind yourself of what we did in previous lessons 156 12:29.540 --> 12:32.570 in order to get our app up and running using the server. 157 12:35.540 --> 12:40.610 OK. So this shouldn't be too difficult as we've done it a few times already. 158 12:40.640 --> 12:46.250 The first thing to do is we're going to say app.get and then we're going to specify the route. And 159 12:46.250 --> 12:52.640 we're going to use the home route in this case, so that when people go to our home page, they first see 160 12:52.640 --> 13:00.020 our newsletter sign up. Then we're going to add our callback function with req and res, and inside 161 13:00.020 --> 13:09.080 here we can specify that our response is to send the file that is at the location of our directory name 162 13:09.170 --> 13:14.900 of the current file plus the string “/signup.html”. 163 13:15.020 --> 13:22.010 So now when we request the home route from our server, then it should deliver the file at that directory 164 13:22.010 --> 13:29.800 name, which is something like ‘Desktop/Newsletter-Signup/ 165 13:29.800 --> 13:30.950 signup.html’. 166 13:31.220 --> 13:35.360 Let's see if that worked by running our server with Nodemon, 167 13:35.510 --> 13:43.210 and we're going to use app.js to spin up our server. Server is running on port 3000. 168 13:43.280 --> 13:52.070 So let's head over to localhost:3000, and you can see that something is not quite right. At 169 13:52.070 --> 14:00.690 the moment our changes to the text have been replicated, but our image is gone, and our CSS seems to be gone. 170 14:00.830 --> 14:03.520 So why is that? 171 14:03.520 --> 14:11.140 Well, if you take a look inside this web site, we get the Bootstrap style sheet from a remote location, 172 14:11.140 --> 14:15.010 but our custom style sheet is local. 173 14:15.010 --> 14:20.590 So this is basically a static page in our local file system that we're trying to pull up. 174 14:20.680 --> 14:24.280 And it's exactly the same story with our images. 175 14:24.280 --> 14:32.470 In order for our server to serve up static files such as CSS and images, then we need to use a special 176 14:32.470 --> 14:34.210 function of Express, 177 14:34.210 --> 14:36.430 and that's something called static. 178 14:36.430 --> 14:46.750 So we need to say app.use(express.static), and inside the parentheses we're going to add the name 179 14:46.810 --> 14:51.040 of a folder that we're going to keep as our static folder, 180 14:51.040 --> 14:52.800 and I'm going to call it public. 181 14:52.900 --> 15:01.000 So now, inside my Newsletter-Signup, I'm going to create a new folder called public, and inside this folder 182 15:01.060 --> 15:08.690 I'm going to add a new folder called css, and I'm going to place my styles.css inside there. 183 15:08.710 --> 15:14.930 Now I'm also going to drag my images so that it's also inside our public folder. 184 15:15.100 --> 15:20.890 And now I have all of my static files in one place under a particular folder name. 185 15:20.890 --> 15:28.300 And by using app.use(express.static), providing the path of our static files, then we should be able to 186 15:28.300 --> 15:35.460 refer to these static files by a relative URL, and that is relative to the public folder. 187 15:35.470 --> 15:40.450 So imagining that we're currently inside the public folder, in order to get to our style sheet, 188 15:40.450 --> 15:45.980 we have to go to the css/styles.css. Now for images, 189 15:46.000 --> 15:50.510 it’s exactly the same, inside the images folder, to lablogo.png. 190 15:50.590 --> 15:58.450 So let's hit save and let's refresh, and you can see that all of those static files, the CSS and the images, 191 15:58.810 --> 16:06.520 are now able to be rendered all because of this one line of code that specifies a static folder where 192 16:06.520 --> 16:14.410 we have all of those files. Now that we've managed to serve up our web site using our server, 193 16:14.410 --> 16:23.470 the next challenge for you is to program the post route. And we're going to use Body Parser to grab the 194 16:23.470 --> 16:29.250 data from the sign up form, and we're going to console.log it from our server. 195 16:29.620 --> 16:35.390 So pause the video and see if you can figure out how to do that. All right. 196 16:35.420 --> 16:41.770 So, in order to create the post route, we're going to say app.post, and we're going to target, again, 197 16:41.840 --> 16:50.690 the home route, and then it's time for our callback, and inside the callback we're going to try and log 198 16:50.960 --> 16:56.930 some of those things that the user entered into the input. In order to do that, 199 16:56.930 --> 16:59.510 remember we need to use body-parser. 200 16:59.780 --> 17:04.620 And we've already required it, but we need to tell our app to use it. 201 17:04.640 --> 17:14.600 So you have to say app.use(bodyParser), and, more specifically, the urlencoded method of 202 17:14.600 --> 17:16.520 bodyParser. 203 17:16.520 --> 17:21.800 And we're going to set extended to true as usual. 204 17:21.800 --> 17:29.520 So when you start a new project, it is pretty much inevitable that you will use Express and Body Parser. 205 17:29.570 --> 17:36.200 So some people find that it's easier to just keep a copy of all of this somewhere, and just paste it 206 17:36.200 --> 17:39.180 in for every single new project. 207 17:39.180 --> 17:44.730 Now I prefer to write it all out, because on one hand that will give you more practice at coding, 208 17:44.930 --> 17:47.300 and secondly sometimes things change, 209 17:47.330 --> 17:51.300 and if you don't write it out, you're not always aware of what you've put in there, 210 17:51.470 --> 17:55.280 so that can lead to unexpected crashes. 211 17:55.280 --> 17:55.520 All right. 212 17:55.520 --> 18:02.930 So now that we've set up Body Parser to be used by our app, the next thing to do is to pull up the values 213 18:03.290 --> 18:05.780 of those things inside our form. 214 18:05.840 --> 18:14.090 So let's create a variable called firstName, and we're going to set that equal to the request.body. 215 18:14.480 --> 18:18.240 name of the input. 216 18:18.290 --> 18:30.550 So for the first input, we're going to give it a name of fName, and for our second input we're going 217 18:30.550 --> 18:33.360 to call it lName, 218 18:33.970 --> 18:42.130 and for our last one, we’re just going to call it email. Now that we've got all of those names set up, we can 219 18:42.130 --> 18:46.450 pull up the values by referring to it inside Body Parser. 220 18:46.450 --> 18:56.650 So request.body.fName should be equal to our first name, and our last name should be equal to 221 18:56.650 --> 18:59.700 request.body.lName. 222 18:59.890 --> 19:04.840 And finally the email should be request.body.email. 223 19:06.340 --> 19:14.530 So let's try logging some of these values: firstName, lastName, and email. 224 19:14.530 --> 19:20.500 Let's hit save and refresh, and let's enter some values in here. 225 19:22.420 --> 19:26.860 So the form got submitted, but we didn't trigger any log statements. 226 19:26.860 --> 19:29.230 What's going on here? 227 19:29.230 --> 19:35.650 Well, if you take a look inside our signup.html, you can see the form currently doesn't have 228 19:35.650 --> 19:38.170 any actions specified. 229 19:38.170 --> 19:44.760 So in order to fire a post request to happen, we first have to specify the method as post, 230 19:45.040 --> 19:51.730 and we also have to specify the action, that is the location that we're going to send our post request 231 19:51.730 --> 19:54.300 to, which is going to be the home route. 232 19:54.400 --> 20:02.590 And this ensures that when we click the Submit button, the information in here gets posted to this location, 233 20:02.920 --> 20:07.450 so that our server can then pick it up in this route that we have preplanned. 234 20:08.050 --> 20:10.270 So now, if we try again, 235 20:15.610 --> 20:23.170 you can see that we get all of that logged in our console. So our Body Parser code is working, and our 236 20:23.170 --> 20:32.500 sign up form is able to submit the data in the inputs to our home route using a post request. 237 20:32.500 --> 20:39.130 So now we've done all the prep work of setting up our sign up page and getting the data that's inside 238 20:39.130 --> 20:40.210 the inputs. 239 20:40.250 --> 20:46.900 Now in the next lesson, we're going to set our web page up with the MailChimp API to start sending this 240 20:46.900 --> 20:51.940 data over to their servers. For all of that and more, I’ll see you on the next lesson.