Okay.
Welcome to this big step.
What we're doing next is integrating my SQL into a web app.
So we saw again how to integrate my SQL 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 unstyled.
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 and do is take it to this.
We have 519 users and that 519 is not hardcoded in.
That's coming from our MySQL 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 there's not nice typography.
I wish I was better at that stuff, but here's our trusty red rectangle that represents a client computer.
Here's our express app, this mint green.
This time we're requesting the home page slash the root root.
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 SQL for a user account.
So my SQL is now involved.
This arrow represents the connection between Express and my SQL.
We've already seen how to do that, how to connect my SQL to a JavaScript file.
We ask basically with a select statement, select count from users.
We get a response from my SQL.
Hopefully there's not an error.
We get a response 519 Then our Express app can take that and say, okay, 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 of 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 SQL to a file.
Now we just need to combine them together.
So the first thing that we'll do is go over to Cloud nine and we need to connect our app, this file
to our MySQL database.
And what we can do is just go to our previous app JS and just copy this code for connection equals my
SQL Create Connection.
So I won't make you watch me type this whole thing again.
But remember, this is using the MySQL package and we already installed that earlier.
We ran NPM install dash dash, save my SQL.
If you didn't do that yet, go ahead and do it so that you see it here and that inside of our Join US
folder instead of node modules, we have my SQL.
We need that, but we're still missing something which is we need to require it for my SQL equals require
my SQL.
So this is all review.
We did it earlier when we made our seed 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.
JS Everything looks okay.
All right, so now we can focus on interacting with the database now that we've connected to it.
But just to reiterate, this database name needs to be the name of the database inside of your MySQL
server that you created with the user's 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 resend.
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 account variable, so that's what we need to aim to get to.
So we'll start by commenting that result 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 were doing over here.
Connection.
Query connection.
Query.
Connection.
Query.
And what is the query?
We want to write.
Let's do it in a separate variable so far.
I'll just do Q again.
Equals a string select count.
Star from users just like that.
If we were to just copy it, go over to our MySQL, we get 500 OC.
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 query.
Then we add in that fun callback or we have error and let's call it results.
Okay.
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 account from users.
So then when that is done, whether it worked or not, this code runs and that 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?
Redirect the user to a different page or send them a different response, which we can see how to do
in a little bit.
But we're just going to leave it as that to keep it short.
And then otherwise let's do a console.log results and just see oh, just see what we get.
So again, to go over this, we connected to our database.
Then only when somebody requests slash are we trying to select count from users.
We could do it inside of joke if we wanted to or random num.
But the way that our app is going to work the home route, when we go to the home page, we see welcome
or 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.
Let's see what happens if I try running Node app.
JS Looks like we have a syntax error and that is because we're missing parentheses around error there.
Okay.
Now we're good to go.
Now if I try and just go to the home root, not joke.
Well, joke will work just fine.
But if I try and go to the home root, 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 resend, so we're not going
to see anything over here.
It just waits and waits and waits until it gives up.
So I'll stop it here.
But notice we get this row data packet, a single array with one item in it.
So we're going to want to do result zero.
And then what is nicer is if we give it that as alias, so we'll say select count as count 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 continent.
So then the last step, and I'm going to get rid of this pain here and just work over here.
But now that we have our data coming back from the query, we're going to want to do a resend.
Now, something that tricks people up, trips people up is 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.
What we want to do instead is only run an 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, or something called callback hell.
But this isn't too bad.
It's not bad at all.
So we have our root target.
When this root is hit, run all of this code inside of there, we're defining a query and we're doing
that query and it takes time.
It might take half a second, although that would be pretty long, but it might take a 10th 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 select or isolate the count from the results.
Then we do a red send.
We have space count space users in our database.
Let's try it.
And then 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 what's something we haven't done
so unoriginal here.
Austin at gmail.com is still struggling with the originality there, so we'll enter that single user.
Okay.
So there now should be 501.
And we can double check.
And it works.
Note that 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'll just be left running, you know, in perpetuity until, I don't know, we have to fix something
or I don't know, we launch our start up app, 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.
It 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 HTML and a thing called Aegis.
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 root 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.