All right.
So we're back.
If you watch that optional kind of boring video, we're now moving on to an exciting and non optional
video, which is all about the project we're going to make.
So we're going to build a simple web app to start using Node and MySQL together.
So what is this app?
Well, it's called Join US and it's a cult mailing or excuse me, a startup mailing list application.
So it's you've probably seen this before when there's a new company that's launched, maybe you haven't,
but if there's a new company that's launched, they're not quite ready yet, but they want to get their
name out there.
They want to start getting interested parties registered or collecting their information so they can
send updates or so they can invite them once the application is launched.
So that's what we're going to build, basically a way of collecting people's emails and it looks like
this now.
I'm not a great designer in any way.
That's not the focus of this course.
Hopefully you think it looks okay enough, but really what I just want to go over are the different
features now.
It's not very feature rich.
The point is to make something simple, but to show you how the we're connecting with MySQL through
Node and how this application kind of showcases both selecting information and inserting information.
So the first thing you'll see, there's a photo here and we don't have to worry about copyright or licensing
issues.
I actually took this photo.
It's a bit of a brag, I guess.
Sorry, but back to the content here we've got join us in big letters and then we've got enter your
email to join and then a number here and this number changes.
So 518 is basically the count of all the users currently in our database.
So when I made kind of this, what I call this, the alpha version that I made screenshots of that I'm,
I made before I have to make the app before I teach it.
So when I made this version, I had 518 users in the, in the waitlist in the database.
We are 100% not a cult.
Then the other thing is this enter your email join now button which you enter an email.
It's going to take that email address and insert it into our database.
So there's kind of two things we're doing right selecting.
We're going to count how many users are in the database.
We don't need all the information.
We don't need 518 email addresses.
We just want to know how many, and then we want to be able to insert something from a form.
When you click this button, it's going to go send the data to our node server.
Then the node server is going to send it over to the MySQL database, wait to see if it worked or not,
and then it will do something.
We'll decide what it does.
Does it take you to a new page?
Does it just refresh the page?
Does it show you a message that says you're signed up, whatever it does?
But the key really is about adding information to our database and getting information out.
Okay.
So that's how it basically works.
Let me show it to you.
Here I am.
I've got join us.
Let's create a new user here.
Let's call it how about blue the cat at gmail dot com we click join now.
And you can see it takes us back, which we can decide what to do.
If we want to change that, I'll show you how.
But now it says we've got 519 on our waitlist and I can refresh, I can stop the server, which we'll
see how to do in a little bit.
This will be 519.
This isn't hard coded in this is coming straight from the database.
Okay, so that's it.
Now let's talk about how it works.
What's the workflow like when I go on my computer like I just did and I refreshed the page or I entered
that address and I hit enter, a request is sent to our Node.js server, which we'll see how to set
up in a little bit.
And the Node.js server has code that says, Oh, okay, this client is asking for our home page.
Well, on the home page we're supposed to have a number here of the total number of users in our database.
So let's ask.
Hello.
My SQL database.
Can you tell me how many users are in the database?
And hopefully you're aware that would be a count.
So would do a select count star from users that will come back and we'll say ideally 518 or whatever
it is, 1000 users.
And then my server, the code there takes that number and it plugs it in, puts it right here and it
sends us the page, sends it back and I see the page same thing.
Roughly the same thing happens when I enter my email and I click join.
Now I'm sending my information, my email to the Node.js server with a message basically saying, I
want to add this, I'm signing up.
So then my server says, Oh, this time this person is trying to sign up.
They're not just asking for the home page, they're trying to sign up.
Okay, my SQL, I'd like to insert this user with with this email address, then my SQL will say that
worked or oh, we actually already have a user with that email, so we can't do that or something else.
Maybe there's an error that would be sent back.
No.
JS figures out what to do.
Do I send an error message or do I send a congratulations success message?
Do I just take them back to the home page and refresh it?
That's the decisions that are made here.
So that's the basics.
But then the next thing is, where do we start?
There's a lot of pieces here, right?
We have to talk about Node.js installing that.
We have to talk about how it communicates with my SQL.
We have to talk about creating web apps in HTML and CSS and JavaScript, all this stuff.
There's a lot of moving pieces.
So where do we start?
Well, we're starting with this handy dandy green box.
We'll draw your attention to the right side of the screen, which tells you we're starting basically
with the relationship between Node.js and MySQL.
How do we talk from JavaScript to my SQL?
So we're going to start with basic things like I want to select the current date from JavaScript, or
I want to insert a single user into my SQL.
So no web app, this whole left side of the screen will be gone for the first part.
But then once we have this relationship established, we figured out how to insert a user, we figured
out how to select all users or select the account.
Then we will then kind of expand into the web application and add in the logic for creating a web app.
So that's our game plan.
We're starting with this side.
So the very last thing to discuss is what our table will look like.
So for this web app, very simple, right?
All that we need to store for every user and we'll just call it users.
We could call it emails or interested people or whatever weightlifters, but we'll go with users and
all we need to store is their email address.
Right?
That's the key thing, and that's all they're entering.
But it's also would be really useful to store a created ad.
So we have a timestamps for when that user was created so that we could do things like figure out when
most of our users signed up or what day of the week most users are signing up.
Or just count how many users we've had, you know, this year compared to last year.
So it's really nice to have created that.
It's very simple as well.
So those are the two fields we'll be working with the two columns and that's it, nice and simple.
And then the other thing to discuss is our game plan from here on out and our first goal, we talked
about how we're only working with this side of the table or of this diagram.
What we're going to work up to is using Node.js to randomly generate and insert over 500 users into
our database.
So I had like 518 users in there.
They all had unique emails.
I did not code those by hand.
I used a tool that generates some for me, and then I'm going to take that and insert them into our
database.
So basically shows you the power of using a language like node that we can very, very quickly generate
data and not have to waste time getting 500 test users in there.
So that's the first goal we're working up towards in this section.