WEBVTT 00:00.130 --> 00:00.690 OK. 00:00.900 --> 00:02.690 Welcome to this big step. 00:02.940 --> 00:07.370 What we're doing next is integrating Majeski well into a web app. 00:07.410 --> 00:12.510 So we saw again how to integrate my ass Cuil with node in a single file that has nothing to do with 00:12.510 --> 00:18.360 the Internet or web applications or servers or routes where we just inserted 500 users at once. 00:18.360 --> 00:24.990 Now what we're going to do is take our web app that we've created super simple and styled but something 00:24.990 --> 00:28.820 like this when we go to the home page here right now it says you've reached the home page. 00:28.930 --> 00:31.530 What we're going to try to do is take it to this. 00:31.800 --> 00:36.900 We have 500000 users and that 519 is not hardcoded in. 00:36.900 --> 00:42.400 That's coming from our my eschewing database with the 500 something that we inserted. 00:42.480 --> 00:46.160 So this will change depending on how many users are in our database. 00:46.320 --> 00:48.210 And we'll see that that works. 00:48.210 --> 00:53.740 So to do that we're basically I have another diagram that took ages to put together. 00:54.210 --> 00:59.400 I apologize if it's the colors aren't perfect or they're not nice typography. 00:59.400 --> 01:00.810 I wish I had better that stuff. 01:01.020 --> 01:05.410 But here's our trusty red rectangle that represents a client computer. 01:05.430 --> 01:13.430 Here is our express app this mint green this time we're requesting the homepage slash the route route. 01:13.590 --> 01:17.220 We ask the server for it by going to this URL. 01:17.250 --> 01:18.590 Hitting enter. 01:18.960 --> 01:24.710 The server says oh hang on it says here that I need to ask my ask Q Well for a user account. 01:25.930 --> 01:29.050 Ok so my school is now involved. 01:29.260 --> 01:32.770 This arrow represents the connection between Express and my ass. 01:32.770 --> 01:34.710 Q Well we've already seen how to do that. 01:34.720 --> 01:38.030 How did connect my ask well to a javascript file. 01:38.050 --> 01:42.450 We ask basically the select statements like to count from users. 01:43.370 --> 01:44.850 We get a response from my ask you. 01:44.900 --> 01:46.580 Hopefully there's an error. 01:46.790 --> 01:47.450 We get a response. 01:47.470 --> 01:53.650 519 then our express app can take that and say OK we're all set. 01:53.650 --> 01:55.340 Now here is your final result. 01:55.400 --> 01:56.560 Here's the page we get. 01:56.690 --> 01:59.500 We have 519 users. 01:59.670 --> 02:00.300 All right. 02:00.530 --> 02:03.140 So there's a couple steps involved that we need to do. 02:03.140 --> 02:08.270 Basically it boils down to we've already seen how to make a simple route and in the last section we 02:08.270 --> 02:10.750 saw how to connect my ask you all to a file. 02:10.760 --> 02:13.280 Now we just need to combine them together. 02:13.340 --> 02:21.120 So the first thing that we'll do is go over to cloud 9 and we need to connect our app this file to our 02:21.200 --> 02:28.190 my Escuela database and what we can do is just go to our previous updates and just copy this code for 02:28.190 --> 02:32.000 our connection Nico's my as well that create connection. 02:32.270 --> 02:36.760 So I won't make you watch me type this whole thing again but remember this is using the media. 02:36.770 --> 02:43.590 Q Well package and we already installed that earlier we ran NPM install dash dash save my ass. 02:43.590 --> 02:48.170 Q Well if you didn't do that yet go ahead and do it so that you see it here and that instead of our 02:48.170 --> 02:54.590 Join us folder instead of node modules we have my ask you well we need that. 02:54.780 --> 02:59.330 But we're still missing something which is we need to require it far as well. 02:59.600 --> 03:01.180 Equals require. 03:01.730 --> 03:03.310 Q Well so this is all review. 03:03.480 --> 03:08.410 We did it earlier when we made our see data that inserted 500 users. 03:08.820 --> 03:10.180 So we've got this. 03:10.230 --> 03:12.570 And let's just make sure that that works without problem. 03:12.570 --> 03:14.110 So we'll just start node after. 03:14.220 --> 03:16.290 Yes everything looks OK. 03:16.770 --> 03:17.280 All right. 03:17.340 --> 03:21.330 So now we can focus on interacting with a database now that we've connected to it. 03:21.480 --> 03:27.430 But just to reiterate this database name needs to be the name of the database instead of my AS WELL 03:27.450 --> 03:30.520 server that you created with the users table. 03:30.900 --> 03:32.960 So it's the same as what we were doing earlier. 03:32.970 --> 03:37.260 If you've been following along if you named it something else this has to match. 03:37.260 --> 03:46.320 So what we're going to do is instead of you've reached the home page we want to find Count of users 03:46.410 --> 03:56.160 in database and then we want to respond with that count. 03:56.180 --> 03:58.330 So we've got to read that second. 03:58.880 --> 04:11.870 French what we're hoping to do is have something like we have plus count plus users in our database 04:11.870 --> 04:14.850 or something stupid like that that's what we're hoping to do. 04:14.900 --> 04:19.700 Of course right now we don't have this count variables so that's what we need to aim to get to. 04:20.000 --> 04:22.220 So I'll start by commenting that redstart send out. 04:22.530 --> 04:28.430 So to find the count of our users in our database we need to do a connection. 04:28.670 --> 04:32.240 Query which we've done before. 04:32.240 --> 04:34.940 Remember it's all the stuff we are doing over here. 04:36.250 --> 04:37.170 Connection. 04:37.270 --> 04:41.160 Queery connection queery connection. 04:41.170 --> 04:41.890 I query. 04:42.100 --> 04:44.220 And what is the query you want to write. 04:44.440 --> 04:46.090 Let's do it in a separate variable. 04:46.090 --> 04:59.900 So far you just do queue again because the string select count star from users just like that. 04:59.970 --> 05:06.350 If we were to just copy it go over to our my S Q Will we get 500. 05:06.710 --> 05:07.100 OK. 05:07.170 --> 05:08.700 So that's what we're hoping to get. 05:09.120 --> 05:11.720 But of course through Javascript. 05:12.030 --> 05:14.340 So we've got our query written as a string. 05:14.340 --> 05:17.280 Now we just pass it in connection type query. 05:17.280 --> 05:20.340 Then we add in that fun callback. 05:20.350 --> 05:25.760 Or we have error and let's call it results. 05:26.890 --> 05:32.310 OK so whatever code is in here will only run when two things happen. 05:32.430 --> 05:40.110 First when somebody requests slash then we have to wait for this connection to run the query which is 05:40.110 --> 05:41.670 select count from users. 05:41.670 --> 05:47.600 So then when that is done whether it worked or not this code runs and there will either be an error. 05:47.610 --> 05:54.500 So we can add our if error throw error which is not actually a great thing to do in a web application 05:54.520 --> 05:59.550 what would probably be better is to say if there's an error what do we want to do you know redirect 05:59.550 --> 06:04.890 the user to a different page or send them a different response which we can see how to do and a little 06:04.890 --> 06:10.400 bit but we're just going to leave it at that to keep it short and then Otherwise let's do a confidant 06:10.440 --> 06:11.380 log. 06:12.950 --> 06:17.880 Results and just see just see what we get. 06:18.260 --> 06:19.370 OK. 06:19.370 --> 06:27.710 So again to go over this connected to our database then only when somebody requests slash are we trying 06:27.710 --> 06:32.380 to select count from users we could do it inside joke if we wanted to or a random number. 06:32.510 --> 06:38.240 But the way that our app is going to work the home route when we go to the home page we see you know 06:38.300 --> 06:44.990 welcome nurse join us join the 519 users or whatever it is and then there's a form at the bottom. 06:44.990 --> 06:49.380 So we're just going to do it on the home route but see what happens with Red Tree running node apps. 06:49.420 --> 06:49.870 Yes. 06:50.000 --> 06:56.570 Looks like we have a syntax error and that is cause we're missing parentheses around error there. 06:58.170 --> 07:00.080 OK now we're good to go. 07:00.790 --> 07:07.840 Now if I try and just go to the home route not joke of Djoko works just fine but if I try to go to the 07:07.840 --> 07:10.040 home route What do you think will happen. 07:11.820 --> 07:17.780 And the answer is that we're not responding with anything assuming we don't get an error we're not actually 07:17.780 --> 07:20.110 responding with any rest of send. 07:20.120 --> 07:21.580 So we're not going to see anything over here. 07:21.590 --> 07:23.860 Just wait and wait and wait until it gives up. 07:24.170 --> 07:25.260 So I'll stop it here. 07:25.400 --> 07:31.230 But notice we get this row data packet single array with one item in it. 07:31.250 --> 07:33.460 So we're going to want to do results to you. 07:33.860 --> 07:42.740 And then what is nicer is if we give it that as alias it will say like count as counts just like that. 07:43.100 --> 07:53.080 So now if I start the server up again and I refresh the page this time we get row data packet count 07:53.410 --> 07:58.400 is equal to 500 it's inside of an object so all I need to do is do dot count. 07:58.510 --> 08:00.780 So this will print 500 now. 08:00.910 --> 08:05.620 So let's save it to a variable var and we'll just call it count as well. 08:07.530 --> 08:10.260 So now we have a variable with the count in it. 08:10.290 --> 08:13.330 So then the last step and I'm going to get rid of this pain here. 08:13.570 --> 08:14.940 Just work over here. 08:15.240 --> 08:22.890 But now that we have our data coming back from the query we're going to want to do a red cent now something 08:22.890 --> 08:28.230 that tricks people up trips people up when you're working with callbacks like this. 08:28.740 --> 08:34.110 It might seem like this code is going to run after this but in fact we have no guarantee of that. 08:34.300 --> 08:38.320 But we want to do instead is only run it inside of this callback. 08:38.640 --> 08:44.190 So this is a very common pattern in javascript and in node in particular is that you have these nested 08:44.190 --> 08:48.000 callbacks and it can get out of control sometimes with something called the callback hell. 08:48.030 --> 08:50.360 But this isn't too bad it's not bad at all. 08:50.370 --> 08:57.100 So we have our route get when this route is hit run all this code instead of there where the front a 08:57.110 --> 08:59.610 query and we're doing that query and it takes time. 08:59.610 --> 09:01.090 It might take half a second. 09:01.190 --> 09:05.290 That would be pretty long but it might take you know a tenth of a second or something. 09:05.310 --> 09:12.110 And so what we want to do is wait until it comes back and run this code if it's an error throw the error 09:12.320 --> 09:13.080 otherwise. 09:13.260 --> 09:21.030 So they isolate the count from the results then we do it results and we have a space count. 09:21.360 --> 09:23.450 Space users in our database. 09:23.730 --> 09:24.710 Let's try it. 09:27.990 --> 09:28.600 And there we go. 09:28.620 --> 09:32.990 We have 500 users in our database and to prove to you that it's working. 09:33.210 --> 09:34.390 Let's go over here. 09:34.650 --> 09:44.930 Let's do an insert into users and we'll just do an email and we'll do something we haven't done. 09:45.030 --> 09:47.340 So an original here. 09:48.090 --> 09:54.050 Austin had she mailed that COM is still struggling with the originality there. 09:54.060 --> 10:00.120 So to answer that single user OK so there now should be five hundred and one. 10:00.370 --> 10:04.470 And we can double check and it works. 10:04.480 --> 10:09.390 No we didn't have to restart the server or anything that would kind of defeat the purpose if our data 10:09.390 --> 10:11.810 was only refreshed whenever the server restarted. 10:11.850 --> 10:17.200 Because we're going to have people interacting with this when we set this app up and we finish it up. 10:17.220 --> 10:22.260 It will just be left running you know in perpetuity until I don't know if we have to fix something or 10:22.740 --> 10:25.600 I don't know we launch or startup happen. 10:25.830 --> 10:28.420 So it will be waiting just running constantly. 10:28.470 --> 10:33.300 So our database will be changing all the time and it has a connection to that database. 10:33.450 --> 10:37.500 You can kind of check in with the database see how it's working what's going on and get the results 10:37.500 --> 10:39.770 back and do something with them. 10:40.290 --> 10:43.200 So still very simple but it's a start. 10:43.440 --> 10:45.680 So we're connecting with our database. 10:45.690 --> 10:50.130 The next thing that we'll need to focus on which will take us a bit to get there because we have to 10:50.130 --> 10:54.330 create the form and talk about each team out and a thing called Ejay us. 10:54.340 --> 11:00.340 But our next goal is to also run the insert query that will insert a new user in. 11:00.790 --> 11:05.670 But like I said to do that we have to set up the route that will insert and we have to set up the form 11:05.760 --> 11:07.470 to actually do the insert for us. 11:07.470 --> 11:08.350 But that's where we're heading.