OK.
Welcome to this big step.
What we're doing next is integrating Majeski well into a web app.
So we saw again how to integrate my ass Cuil with node in a single file that has nothing to do with
the Internet or web applications or servers or routes where we just inserted 500 users at once.
Now what we're going to do is take our web app that we've created super simple and styled but something
like this when we go to the home page here right now it says you've reached the home page.
What we're going to try to do is take it to this.
We have 500000 users and that 519 is not hardcoded in.
That's coming from our my eschewing database with the 500 something that we inserted.
So this will change depending on how many users are in our database.
And we'll see that that works.
So to do that we're basically I have another diagram that took ages to put together.
I apologize if it's the colors aren't perfect or they're not nice typography.
I wish I had better that stuff.
But here's our trusty red rectangle that represents a client computer.
Here is our express app this mint green this time we're requesting the homepage slash the route route.
We ask the server for it by going to this URL.
Hitting enter.
The server says oh hang on it says here that I need to ask my ask Q Well for a user account.
Ok so my school is now involved.
This arrow represents the connection between Express and my ass.
Q Well we've already seen how to do that.
How did connect my ask well to a javascript file.
We ask basically the select statements like to count from users.
We get a response from my ask you.
Hopefully there's an error.
We get a response.
519 then our express app can take that and say OK we're all set.
Now here is your final result.
Here's the page we get.
We have 519 users.
All right.
So there's a couple steps involved that we need to do.
Basically it boils down to we've already seen how to make a simple route and in the last section we
saw how to connect my ask you all to a file.
Now we just need to combine them together.
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
my Escuela database and what we can do is just go to our previous updates and just copy this code for
our connection Nico's my as well that create connection.
So I won't make you watch me type this whole thing again but remember this is using the media.
Q Well package and we already installed that earlier we ran NPM install dash dash save my ass.
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
Join us folder instead of node modules we have my ask you well we need that.
But we're still missing something which is we need to require it far as well.
Equals require.
Q Well so this is all review.
We did it earlier when we made our see data that inserted 500 users.
So we've got this.
And let's just make sure that that works without problem.
So we'll just start node after.
Yes everything looks OK.
All right.
So now we can focus on interacting with a database now that we've connected to it.
But just to reiterate this database name needs to be the name of the database instead of my AS WELL
server that you created with the users table.
So it's the same as what we were doing earlier.
If you've been following along if you named it something else this has to match.
So what we're going to do is instead of you've reached the home page we want to find Count of users
in database and then we want to respond with that count.
So we've got to read that second.
French what we're hoping to do is have something like we have plus count plus users in our database
or something stupid like that that's what we're hoping to do.
Of course right now we don't have this count variables so that's what we need to aim to get to.
So I'll start by commenting that redstart send out.
So to find the count of our users in our database we need to do a connection.
Query which we've done before.
Remember it's all the stuff we are doing over here.
Connection.
Queery connection queery connection.
I query.
And what is the query you want to write.
Let's do it in a separate variable.
So far you just do queue again because the string select count star from users just like that.
If we were to just copy it go over to our my S Q Will we get 500.
OK.
So that's what we're hoping to get.
But of course through Javascript.
So we've got our query written as a string.
Now we just pass it in connection type query.
Then we add in that fun callback.
Or we have error and let's call it results.
OK so whatever code is in here will only run when two things happen.
First when somebody requests slash then we have to wait for this connection to run the query which is
select count from users.
So then when that is done whether it worked or not this code runs and there will either be an error.
So we can add our if error throw error which is not actually a great thing to do in a web application
what would probably be better is to say if there's an error what do we want to do you know redirect
the user to a different page or send them a different response which we can see how to do and a little
bit but we're just going to leave it at that to keep it short and then Otherwise let's do a confidant
log.
Results and just see just see what we get.
OK.
So again to go over this connected to our database then only when somebody requests slash are we trying
to select count from users we could do it inside joke if we wanted to or a random number.
But the way that our app is going to work the home route when we go to the home page we see you know
welcome nurse join us join the 519 users or whatever it is and then there's a form at the bottom.
So we're just going to do it on the home route but see what happens with Red Tree running node apps.
Yes.
Looks like we have a syntax error and that is cause we're missing parentheses around error there.
OK now we're good to go.
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
home route What do you think will happen.
And the answer is that we're not responding with anything assuming we don't get an error we're not actually
responding with any rest of send.
So we're not going to see anything over here.
Just wait and wait and wait until it gives up.
So I'll stop it here.
But notice we get this row data packet single array with one item in it.
So we're going to want to do results to you.
And then what is nicer is if we give it that as alias it will say like count as counts just like that.
So now if I start the server up again and I refresh the page this time we get row data packet count
is equal to 500 it's inside of an object so all I need to do is do dot count.
So this will print 500 now.
So let's save it to a variable var and we'll just call it count as well.
So now we have a variable with the count in it.
So then the last step and I'm going to get rid of this pain here.
Just work over here.
But now that we have our data coming back from the query we're going to want to do a red cent now something
that tricks people up trips people up when you're working with callbacks like this.
It might seem like this code is going to run after this but in fact we have no guarantee of that.
But we want to do instead is only run it inside of this callback.
So this is a very common pattern in javascript and in node in particular is that you have these nested
callbacks and it can get out of control sometimes with something called the callback hell.
But this isn't too bad it's not bad at all.
So we have our route get when this route is hit run all this code instead of there where the front a
query and we're doing that query and it takes time.
It might take half a second.
That would be pretty long but it might take you know a tenth of a second or something.
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
otherwise.
So they isolate the count from the results then we do it results and we have a space count.
Space users in our database.
Let's try it.
And there we go.
We have 500 users in our database and to prove to you that it's working.
Let's go over here.
Let's do an insert into users and we'll just do an email and we'll do something we haven't done.
So an original here.
Austin had she mailed that COM is still struggling with the originality there.
So to answer that single user OK so there now should be five hundred and one.
And we can double check and it works.
No we didn't have to restart the server or anything that would kind of defeat the purpose if our data
was only refreshed whenever the server restarted.
Because we're going to have people interacting with this when we set this app up and we finish it up.
It will just be left running you know in perpetuity until I don't know if we have to fix something or
I don't know we launch or startup happen.
So it will be waiting just running constantly.
So our database will be changing all the time and it has a connection to that database.
You can kind of check in with the database see how it's working what's going on and get the results
back and do something with them.
So still very simple but it's a start.
So we're connecting with our database.
The next thing that we'll need to focus on which will take us a bit to get there because we have to
create the form and talk about each team out and a thing called Ejay us.
But our next goal is to also run the insert query that will insert a new user in.
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
to actually do the insert for us.
But that's where we're heading.