WEBVTT 00:00.160 --> 00:06.870 OK so now what we're going to focus on is actually getting each team implemented with our web application. 00:06.870 --> 00:13.590 So right now we're responding with these little things of text like this. 00:13.680 --> 00:17.710 And before we go too much further just another note if you know him out great. 00:17.730 --> 00:21.340 If you don't know Tim I am he'll just sort of have to hang on for the ride here. 00:21.420 --> 00:22.800 I'm sure you've heard of it. 00:23.070 --> 00:27.610 Well I guess hopefully I'm not assuming too much but most you've come across age Tim. 00:27.630 --> 00:30.180 Every web page to look at is built with age him. 00:30.360 --> 00:35.910 Behind the scenes there is this marketplace guage that is dictating what elements go where and then 00:35.910 --> 00:39.450 there CSSA which I'll get to later which makes it look pretty. 00:39.450 --> 00:44.460 So what we're going to do is focus on writing aged him out so that we can have things like a form and 00:44.460 --> 00:50.670 a button or we can have large text which is known as an H1 and we actually can do that right now and 00:50.670 --> 00:52.230 it really hacky way. 00:52.680 --> 00:54.360 So let's say rather than just. 00:54.690 --> 00:57.960 Well let's do it for my joke. 00:58.060 --> 01:00.310 But I could do is make this joke. 01:00.890 --> 01:02.580 I'd talus sized part of it. 01:02.580 --> 01:07.950 So I'd say What do you call a dog that does magic tricks and all type italicize the answer by putting 01:07.950 --> 01:10.320 around it the E-M tag which is how you make things. 01:10.320 --> 01:12.500 Italicize sense for emphasis. 01:14.790 --> 01:22.120 So if I just put him out inside of this string and actually I can make this bold to say I'll do strong. 01:22.230 --> 01:24.760 First thing you should notice if you've ever written to him. 01:24.770 --> 01:29.220 This is a horrible way to write it instead of a single line like this. 01:29.220 --> 01:32.630 It's just not a good experience so we're going to see how to get around that. 01:33.030 --> 01:36.220 But I'm just showing you it's possible to have Tim Allen there. 01:36.270 --> 01:41.930 So if I go to slash joke you can see I'm getting him out. 01:42.010 --> 01:44.550 That's being rendered properly properly. 01:44.770 --> 01:50.300 So if we wanted to get like a form on our home page which is what we want eventually by the end of this 01:50.320 --> 01:55.900 video we could put all of h tim out to make a form instead of the string. 01:55.930 --> 01:58.230 But it's going to be significantly longer than this. 01:58.270 --> 01:59.460 So we're not going to do that. 01:59.650 --> 02:04.030 And there's a bunch of reasons why the main one is that it's a pain but it's also hard to change things 02:04.300 --> 02:06.420 and it doesn't really allow us to style it. 02:06.430 --> 02:08.020 SS When we get there. 02:08.440 --> 02:11.780 So to jog your memory this is what we're working towards. 02:12.070 --> 02:13.680 Here's what our app will look like. 02:13.690 --> 02:18.490 We have a big background photo of a beautiful mountain in Argentina and we've got. 02:18.490 --> 02:19.300 Join us. 02:19.300 --> 02:23.370 Big text different font different color then we've got this other text. 02:23.410 --> 02:26.880 To your email to join 500 or whatever the number of users is. 02:27.040 --> 02:28.000 Others on our waitlist. 02:28.000 --> 02:29.610 We are 100 percent not a cult. 02:29.770 --> 02:36.250 And then we have a form with a single item in it or single fields a text field and then a button that 02:36.250 --> 02:37.570 will submit the form. 02:38.140 --> 02:43.060 But if we strip away all the pretty styling all the makeup or paint on top. 02:43.090 --> 02:44.440 This is probably what it looks like. 02:44.440 --> 02:47.000 This is you know the bare bones of it. 02:47.020 --> 02:49.620 So this is what we'll get to by the end of this video. 02:50.110 --> 02:51.940 So this will be our home page. 02:51.940 --> 02:56.270 We are going to replace the content here. 02:56.860 --> 03:02.230 The single string with this and to do it there's a couple of steps we have to take. 03:02.800 --> 03:07.020 So here is the HTML itself if you don't want to type it this is the Timah we need. 03:07.210 --> 03:09.200 We've had an 81 and says join us. 03:09.280 --> 03:10.370 We got a paragraph. 03:10.510 --> 03:12.070 We'll come back to this class. 03:12.070 --> 03:14.310 You don't need that actually right now. 03:14.530 --> 03:19.630 But then we've got enter email to join strong which is the bold around 518. 03:19.630 --> 03:22.450 Then we've got a form which will also come back to. 03:22.480 --> 03:27.640 So I'm just showing you this is all we need to actually make him I'll at the correct time out to make 03:27.640 --> 03:28.420 that page. 03:28.420 --> 03:31.890 Now how do we actually get this to be sent back. 03:31.990 --> 03:36.930 What we want is you know in this route when you go to slash basically give the user to this. 03:37.210 --> 03:38.980 We can't just make that a single string. 03:39.220 --> 03:42.230 So what we do is use something called Ejay Yes. 03:42.250 --> 03:43.580 And you have to bear with me here. 03:43.630 --> 03:48.190 There was a couple of steps you have to go over and if you're new to web development this will be a 03:48.190 --> 03:50.220 bit intimidating possibly. 03:50.260 --> 03:55.960 It's probably a terrible thing for a teacher to say but just hang in there just know that we're going 03:55.960 --> 04:00.400 somewhere and some of the steps along the way may be confusing but once we get there it won't be too 04:00.400 --> 04:00.940 bad. 04:01.040 --> 04:06.060 So E.J. this is what's known as a templating language stand for embedded javascript. 04:06.070 --> 04:08.630 It's an alternative to writing just plain edged him out. 04:08.650 --> 04:13.450 It allows us to add in variable values and code logic. 04:13.480 --> 04:17.460 So this is where it's that slide I go back here. 04:17.530 --> 04:22.870 This is H Tim L but this right here is not always 518. 04:22.930 --> 04:28.350 So we couldn't do that in a normal HTML file we would want to be able to say okay this is Tim. 04:28.480 --> 04:34.770 But right here in that strong tag in the bold area there's a variable but you can't do a variable in 04:34.780 --> 04:36.570 regular h him up. 04:36.730 --> 04:39.040 So that's what we're going to use Ejay ask for. 04:39.040 --> 04:40.820 It stands for embedded javascript. 04:40.840 --> 04:45.070 It didn't just HMO that allows you to embed javascript inside of it. 04:45.070 --> 04:46.770 So we'll see how to do that in a moment. 04:47.020 --> 04:51.570 But the first thing we have to do NPM install dash dash save. 04:51.790 --> 04:58.710 Yes this is you know you should know by now hopefully that this is going to tell our app and our packages 04:58.710 --> 05:05.280 are based on that we want yes installed and it should install it and save it record to packaged Jaison 05:05.320 --> 05:08.790 which you can see now we have Ejay us there. 05:08.860 --> 05:10.280 That's our first step. 05:10.460 --> 05:13.960 Then we're going to do something else. 05:14.020 --> 05:20.100 This is configuring our express application set view engine Khama. 05:20.220 --> 05:20.730 Yes. 05:20.740 --> 05:27.010 So apps that said is a method that allows us to set certain settings in our app view engine is the most 05:27.010 --> 05:28.320 common one to change. 05:28.330 --> 05:34.560 There are other templating engines there's things like Jayde which is a common one Hammil. 05:34.830 --> 05:36.370 There's other languages. 05:36.370 --> 05:39.640 So basically they are similar analogs T.J.. 05:39.640 --> 05:40.420 Yes. 05:40.930 --> 05:46.420 OK so we'll go do it at the top is a traditional place to do it just like we're setting up you know 05:46.420 --> 05:52.880 our connection appear and make sense to set and to configure application wide things up top. 05:53.080 --> 05:59.590 So we'll do that and then the next step is OK where do we actually start writing these files and to 05:59.590 --> 06:05.590 show you that I'm actually going to work backwards so the line that will be running in our route that 06:05.590 --> 06:10.030 will actually render a file is redstart render some string. 06:10.030 --> 06:14.770 In our case home and the process that will happen behind the scenes that express doesn't really show 06:14.770 --> 06:20.560 you or tell you about it it will automatically look for a directory called views. 06:20.740 --> 06:22.270 That's a standardized name. 06:22.480 --> 06:26.290 So we're going to look for a directory called views you can change it if you want it to but we're not 06:26.290 --> 06:27.140 going to. 06:27.640 --> 06:35.170 And inside that directory it's going to look for a file called home dot whatever the view engine we 06:35.170 --> 06:39.170 said which is Ejay us in our case so it's going to look for home. 06:39.190 --> 06:39.950 Got you. 06:39.990 --> 06:40.510 Yes. 06:40.630 --> 06:42.190 In that View's directory. 06:42.490 --> 06:47.680 So what that means is we need to create a directory and then we need to create a file we'll call it 06:47.680 --> 06:48.030 home. 06:48.040 --> 06:51.390 But you could call it landing page yes or route study. 06:51.470 --> 06:51.910 Yes. 06:51.970 --> 06:54.520 Whatever it is you just need to remember the name. 06:54.640 --> 06:56.040 So let's do that now. 06:56.230 --> 06:57.140 Will do. 06:57.430 --> 07:04.000 Right click where you can do make directory of whom are comfortable with a terminal new folder views 07:04.720 --> 07:09.300 inside if there will make a single file which we will call home. 07:09.410 --> 07:09.960 Yes. 07:10.120 --> 07:12.970 Again you could call it whatever as long as it ends and Ejay. 07:13.140 --> 07:22.150 And you remember what you call it and we'll start with a single H-1 we'll just say this is HMO and save 07:22.150 --> 07:22.690 it. 07:22.960 --> 07:24.280 Then we go to her. 07:24.340 --> 07:25.170 Yes. 07:25.690 --> 07:31.960 And let's just work with our route rather than sending results and we have count. 07:32.020 --> 07:33.790 We're no longer working if rest does send. 07:33.790 --> 07:39.040 We have a restaurant render home test. 07:39.140 --> 07:41.790 I'm going to be a broken record but it's looking for a home. 07:41.980 --> 07:47.230 Yes because we added this new engine is Ejay Yes and it's looking in views by default. 07:47.230 --> 07:48.890 So we need to make sure we have that file. 07:48.910 --> 07:53.890 It's going to take the contents of this file and send it all back rather than a single line. 07:54.130 --> 07:56.310 We can write our code now in a separate file. 07:56.710 --> 07:58.190 So let's see if it works. 07:58.780 --> 08:00.040 Start her app. 08:00.310 --> 08:01.720 Try going to the home page. 08:01.720 --> 08:02.530 There we go. 08:02.560 --> 08:03.910 This is aged him up. 08:04.000 --> 08:06.360 Our other pages still have. 08:06.640 --> 08:09.820 Well this one is HDMI out but it's not coming from a separate file. 08:10.030 --> 08:10.740 OK. 08:10.960 --> 08:13.800 So then what we can do next is I'll just show you. 08:13.840 --> 08:19.360 You could you know use rest out render home you can send the same file in all of these instead of just 08:19.490 --> 08:20.270 send. 08:20.380 --> 08:23.170 You can reuse files in different routes. 08:23.200 --> 08:24.640 It doesn't matter. 08:24.640 --> 08:34.870 So here we have the same thing for joke so for now if I get a joke as well I get the exact same thing. 08:35.090 --> 08:35.410 OK. 08:35.430 --> 08:37.520 So these don't care about what they're called. 08:37.590 --> 08:42.330 The name of this has nothing to do with the route although it should if you're just following best practices 08:42.760 --> 08:44.890 to get rid of that. 08:44.910 --> 08:50.180 So now let's just copy the time that I provided here so that we don't have to type it all ourselves. 08:50.190 --> 08:52.840 So I went home that E.J. is just going to paste this in. 08:52.860 --> 08:54.860 We'll go over what some of this is. 08:54.870 --> 09:02.880 In particular the form we haven't talked about but let's just get this in here and see how it works. 09:02.880 --> 09:05.080 So we have to save a file. 09:05.700 --> 09:07.420 Now we get our form. 09:07.590 --> 09:09.570 So we have join us which is our H-1. 09:09.650 --> 09:12.420 So we started with and we have a paragraph again. 09:12.660 --> 09:15.180 Don't worry about the class at all for now. 09:15.180 --> 09:16.870 Can actually just get rid of that if you want. 09:16.920 --> 09:19.160 Just focus on keeping it simple. 09:19.230 --> 09:22.680 Then we've got end to your e-mail to join in said the paragraph. 09:22.850 --> 09:25.440 All of this is in the paragraph. 09:25.440 --> 09:26.800 There we go. 09:27.330 --> 09:29.540 518 is hard coded for now. 09:29.550 --> 09:31.430 We're about to replace that. 09:31.560 --> 09:32.970 We are 100 percent not a cult. 09:32.970 --> 09:35.750 And then we've got this form which we're just going to ignore for now. 09:35.760 --> 09:41.230 Except know that there's a text input in a button which we get all looks good. 09:41.490 --> 09:47.400 And in fact we can clear out that form and just leave it like this to start OK. 09:47.790 --> 09:53.490 So now what we want to do is figure out how we get our data in here because right now this is just plain 09:53.670 --> 09:54.380 to him. 09:54.840 --> 09:59.910 There's no use for this Ejay a stuff that I was talking about but the whole point is that we want this 09:59.910 --> 10:08.430 to be five 19:5 20 499 10000 whatever the result of this is whatever count is. 10:08.640 --> 10:13.270 But how do we get count this variable over here. 10:14.010 --> 10:21.030 What we do is after resod out render we can pass a comma and pass a javascript object and I'm allowed 10:21.030 --> 10:23.150 to pass data through. 10:23.310 --> 10:24.850 So what we want to send is count. 10:24.990 --> 10:26.710 But first I have to give it a name. 10:27.000 --> 10:28.590 So typically you'll see something like this. 10:28.590 --> 10:36.850 Count count rather than that all do data is counted. 10:36.960 --> 10:39.790 I'm going to change it later but just to show you they're distinct. 10:39.990 --> 10:47.790 So what this does now is it says OK take count whatever it is which last time we counted as 501. 10:47.820 --> 10:55.910 Send that to this template and give it the name of data basically put it in an object under the key 10:56.030 --> 10:56.690 of data. 10:56.840 --> 11:03.230 So inside if here if I refer to data it will be referring to whatever count was. 11:03.270 --> 11:05.100 The problem is I can't just say data. 11:05.160 --> 11:10.690 I just do that and refresh we just get into your e-mail to join data others on our list. 11:10.830 --> 11:14.200 So I need a way of saying hey this is not. 11:14.340 --> 11:16.020 This is not each tim Elvis this is special. 11:16.020 --> 11:19.050 This is code and the way we do it. 11:19.050 --> 11:21.240 It's weird if you've never seen it before. 11:21.300 --> 11:23.250 It looks like this. 11:23.250 --> 11:26.220 So we have brackets just like we would. 11:26.330 --> 11:27.570 Tim Alba angle brackets. 11:27.660 --> 11:32.400 But then percent equals and then percent on the closing side. 11:32.400 --> 11:38.700 And this is basically a signifier that says this is not age timeo whatever's in here is going to return 11:38.730 --> 11:41.270 a value that we want to put in the HMO. 11:41.430 --> 11:46.650 So if data is equal to 500 it will be replaced with 500 If it's equal to 12. 11:46.650 --> 11:51.840 It will be replaced with 12 kind of a lot to take in as I was saying there is a lot of moving pieces 11:51.840 --> 11:52.530 here. 11:52.920 --> 11:57.670 Unfortunately we don't have well we don't really have time I guess we could we could have time. 11:57.690 --> 11:59.630 But the Course isn't on. 11:59.790 --> 12:00.040 E.J.. 12:00.100 --> 12:00.370 Yes. 12:00.390 --> 12:02.240 It's not on web development. 12:02.280 --> 12:06.030 This is just a vehicle to showing you how to make something. 12:06.150 --> 12:06.920 OK. 12:07.470 --> 12:11.850 So data will be count whatever's coming through there. 12:12.210 --> 12:16.870 Let's try it and we've got five on one. 12:16.980 --> 12:20.480 And of course we could insert one more user very quickly. 12:20.520 --> 12:22.390 Let's do Austin. 12:22.510 --> 12:27.190 Two three four refresh refresher page now it's 502. 12:27.680 --> 12:29.570 So we've accomplished our goal. 12:29.570 --> 12:31.360 If you feel comfortable with how it's working. 12:31.370 --> 12:31.910 Go ahead. 12:31.910 --> 12:33.820 Stop move on to the next video. 12:34.040 --> 12:37.420 If you have a couple of questions so go through the process again. 12:37.430 --> 12:40.770 I'm not going to recreate it but I'm going to step through what's happening. 12:40.850 --> 12:46.330 So we'll start with this app that get slash that's activating the router when I go to this you are well 12:46.880 --> 12:53.900 we still have our slash joke for instance we we're talking about the route route when I hit that route. 12:54.230 --> 13:01.280 First thing that happens is this code runs which the end result is it figures out how many users are 13:01.280 --> 13:02.060 in our database. 13:02.060 --> 13:04.070 It's running this code in our database. 13:04.160 --> 13:12.320 Select count start as count from users that's coming back stored in results inside of results. 13:12.320 --> 13:16.940 We're finding it the reason it's stored under count is because of this as. 13:16.970 --> 13:22.300 So if I call this counter then this needs to be done counter. 13:22.980 --> 13:24.110 OK. 13:24.710 --> 13:27.610 So then we're storing that in a variable called count. 13:27.650 --> 13:32.500 So this has something like 501 in it. 13:32.720 --> 13:40.100 Then what we're doing can get rid of this line now is we are rendering the home that Ejay s file which 13:40.100 --> 13:43.570 is automatically looked for it in the directory which is right here. 13:43.880 --> 13:50.420 We have a bunch of H-2 melon here some of which we haven't talked about yet but then we have this one 13:50.600 --> 13:51.550 variable. 13:51.650 --> 13:54.950 But this very weird syntax we haven't seen before. 13:54.950 --> 13:58.730 This is our way of saying hey this is not h tim Jim. 13:58.760 --> 14:05.360 This is a special value we can put javascript in here and just to show you a couple other things I'll 14:05.360 --> 14:06.570 do another one. 14:06.890 --> 14:10.610 And then our funky bracket thing again. 14:10.610 --> 14:12.840 And I can actually just do simple math in here. 14:12.900 --> 14:15.530 It's something like 4 times 98. 14:15.530 --> 14:21.180 This will run as JavaScript whatever the result is I'm terrible at mental math will be printed there. 14:21.560 --> 14:33.230 So if we refresh our page we get 392 and we could also pass in another piece of data like favorite color 14:34.760 --> 14:39.800 and I'll just say it is purple which is true color highly underrated. 14:39.980 --> 14:42.230 Pass that in over here. 14:42.230 --> 14:43.960 I can refer to. 14:44.570 --> 14:45.850 Favorite color. 14:47.370 --> 14:48.800 Why we would do this. 14:49.110 --> 14:51.170 Well that's another question. 14:51.540 --> 14:53.710 But I'm just showing you that way. 14:53.730 --> 14:54.260 Here we go. 14:54.300 --> 14:57.540 Favorite underscore color. 14:58.140 --> 15:01.150 We have access to whatever we pass in here. 15:01.650 --> 15:03.590 So favorite color is the string purple. 15:03.870 --> 15:05.510 I will need to restart the server. 15:05.700 --> 15:12.060 If we are changing our Actually yes file now we get purple it's coming through. 15:12.360 --> 15:18.060 So the only difference is that data right here is not something we're coding in our cells are not hard 15:18.060 --> 15:26.820 coding and it's coming from the database from all this work running the query and then basically extracting 15:26.820 --> 15:32.220 the data out saving into the count variable and the last thing I'll do is change to be count because 15:32.220 --> 15:35.340 data is just a bad to bad name for a variable. 15:35.340 --> 15:36.550 Everything is data. 15:37.050 --> 15:41.220 But the reason I call the data again was just to kind of show you that there's a difference. 15:41.220 --> 15:45.380 It can be confusing at first if you see count count which one is which. 15:45.570 --> 15:48.840 This is the value we're passing and this is the label for it. 15:48.840 --> 15:50.750 This is the key. 15:50.880 --> 15:51.720 OK. 15:52.380 --> 15:55.090 So just make sure it's still working. 15:55.630 --> 15:59.040 Refresh your email to join 502 others on our waitlist. 15:59.040 --> 16:00.640 We are 100 percent not a cult. 16:00.810 --> 16:01.640 Perfect. 16:01.650 --> 16:02.010 We're done.