1
00:00:00,180 --> 00:00:00,720
All right.

2
00:00:00,720 --> 00:00:01,410
So we're back.

3
00:00:01,410 --> 00:00:06,720
If you watch that optional kind of boring video, we're now moving on to an exciting and non optional

4
00:00:06,720 --> 00:00:09,420
video, which is all about the project we're going to make.

5
00:00:09,420 --> 00:00:14,040
So we're going to build a simple web app to start using Node and MySQL together.

6
00:00:14,310 --> 00:00:15,600
So what is this app?

7
00:00:16,020 --> 00:00:23,280
Well, it's called Join US and it's a cult mailing or excuse me, a startup mailing list application.

8
00:00:23,670 --> 00:00:28,140
So it's you've probably seen this before when there's a new company that's launched, maybe you haven't,

9
00:00:28,140 --> 00:00:32,610
but if there's a new company that's launched, they're not quite ready yet, but they want to get their

10
00:00:32,610 --> 00:00:33,120
name out there.

11
00:00:33,120 --> 00:00:38,400
They want to start getting interested parties registered or collecting their information so they can

12
00:00:38,400 --> 00:00:43,500
send updates or so they can invite them once the application is launched.

13
00:00:43,500 --> 00:00:48,870
So that's what we're going to build, basically a way of collecting people's emails and it looks like

14
00:00:48,870 --> 00:00:50,400
this now.

15
00:00:50,520 --> 00:00:53,310
I'm not a great designer in any way.

16
00:00:53,310 --> 00:00:54,990
That's not the focus of this course.

17
00:00:54,990 --> 00:00:59,280
Hopefully you think it looks okay enough, but really what I just want to go over are the different

18
00:00:59,280 --> 00:01:00,300
features now.

19
00:01:00,300 --> 00:01:01,680
It's not very feature rich.

20
00:01:01,680 --> 00:01:08,250
The point is to make something simple, but to show you how the we're connecting with MySQL through

21
00:01:08,250 --> 00:01:14,100
Node and how this application kind of showcases both selecting information and inserting information.

22
00:01:14,430 --> 00:01:20,160
So the first thing you'll see, there's a photo here and we don't have to worry about copyright or licensing

23
00:01:20,160 --> 00:01:20,760
issues.

24
00:01:20,760 --> 00:01:22,080
I actually took this photo.

25
00:01:22,110 --> 00:01:23,670
It's a bit of a brag, I guess.

26
00:01:23,670 --> 00:01:30,660
Sorry, but back to the content here we've got join us in big letters and then we've got enter your

27
00:01:30,660 --> 00:01:34,710
email to join and then a number here and this number changes.

28
00:01:34,710 --> 00:01:40,320
So 518 is basically the count of all the users currently in our database.

29
00:01:40,320 --> 00:01:47,610
So when I made kind of this, what I call this, the alpha version that I made screenshots of that I'm,

30
00:01:47,700 --> 00:01:50,370
I made before I have to make the app before I teach it.

31
00:01:50,370 --> 00:01:55,590
So when I made this version, I had 518 users in the, in the waitlist in the database.

32
00:01:56,460 --> 00:01:57,990
We are 100% not a cult.

33
00:01:58,380 --> 00:02:05,250
Then the other thing is this enter your email join now button which you enter an email.

34
00:02:05,460 --> 00:02:09,870
It's going to take that email address and insert it into our database.

35
00:02:10,320 --> 00:02:13,350
So there's kind of two things we're doing right selecting.

36
00:02:13,800 --> 00:02:16,290
We're going to count how many users are in the database.

37
00:02:16,290 --> 00:02:17,730
We don't need all the information.

38
00:02:17,730 --> 00:02:20,160
We don't need 518 email addresses.

39
00:02:20,160 --> 00:02:24,750
We just want to know how many, and then we want to be able to insert something from a form.

40
00:02:24,930 --> 00:02:29,310
When you click this button, it's going to go send the data to our node server.

41
00:02:29,310 --> 00:02:34,680
Then the node server is going to send it over to the MySQL database, wait to see if it worked or not,

42
00:02:34,680 --> 00:02:36,600
and then it will do something.

43
00:02:36,870 --> 00:02:37,980
We'll decide what it does.

44
00:02:37,980 --> 00:02:39,180
Does it take you to a new page?

45
00:02:39,180 --> 00:02:40,380
Does it just refresh the page?

46
00:02:40,380 --> 00:02:43,740
Does it show you a message that says you're signed up, whatever it does?

47
00:02:43,740 --> 00:02:49,410
But the key really is about adding information to our database and getting information out.

48
00:02:49,620 --> 00:02:49,890
Okay.

49
00:02:49,980 --> 00:02:51,240
So that's how it basically works.

50
00:02:51,240 --> 00:02:52,230
Let me show it to you.

51
00:02:52,350 --> 00:02:53,160
Here I am.

52
00:02:53,160 --> 00:02:54,720
I've got join us.

53
00:02:54,900 --> 00:02:57,630
Let's create a new user here.

54
00:02:57,630 --> 00:03:05,880
Let's call it how about blue the cat at gmail dot com we click join now.

55
00:03:09,450 --> 00:03:13,380
And you can see it takes us back, which we can decide what to do.

56
00:03:13,560 --> 00:03:15,230
If we want to change that, I'll show you how.

57
00:03:15,240 --> 00:03:22,110
But now it says we've got 519 on our waitlist and I can refresh, I can stop the server, which we'll

58
00:03:22,110 --> 00:03:23,100
see how to do in a little bit.

59
00:03:23,100 --> 00:03:24,930
This will be 519.

60
00:03:24,930 --> 00:03:29,100
This isn't hard coded in this is coming straight from the database.

61
00:03:29,190 --> 00:03:30,210
Okay, so that's it.

62
00:03:30,930 --> 00:03:32,640
Now let's talk about how it works.

63
00:03:32,640 --> 00:03:39,240
What's the workflow like when I go on my computer like I just did and I refreshed the page or I entered

64
00:03:39,240 --> 00:03:45,630
that address and I hit enter, a request is sent to our Node.js server, which we'll see how to set

65
00:03:45,630 --> 00:03:46,440
up in a little bit.

66
00:03:46,440 --> 00:03:51,870
And the Node.js server has code that says, Oh, okay, this client is asking for our home page.

67
00:03:51,900 --> 00:03:58,290
Well, on the home page we're supposed to have a number here of the total number of users in our database.

68
00:03:58,290 --> 00:04:00,150
So let's ask.

69
00:04:01,390 --> 00:04:01,810
Hello.

70
00:04:01,840 --> 00:04:03,220
My SQL database.

71
00:04:03,820 --> 00:04:06,130
Can you tell me how many users are in the database?

72
00:04:06,340 --> 00:04:09,670
And hopefully you're aware that would be a count.

73
00:04:09,670 --> 00:04:17,829
So would do a select count star from users that will come back and we'll say ideally 518 or whatever

74
00:04:17,829 --> 00:04:19,180
it is, 1000 users.

75
00:04:19,180 --> 00:04:25,240
And then my server, the code there takes that number and it plugs it in, puts it right here and it

76
00:04:25,240 --> 00:04:29,980
sends us the page, sends it back and I see the page same thing.

77
00:04:29,980 --> 00:04:32,980
Roughly the same thing happens when I enter my email and I click join.

78
00:04:32,980 --> 00:04:39,460
Now I'm sending my information, my email to the Node.js server with a message basically saying, I

79
00:04:39,460 --> 00:04:41,470
want to add this, I'm signing up.

80
00:04:41,470 --> 00:04:44,500
So then my server says, Oh, this time this person is trying to sign up.

81
00:04:44,500 --> 00:04:47,410
They're not just asking for the home page, they're trying to sign up.

82
00:04:47,650 --> 00:04:54,940
Okay, my SQL, I'd like to insert this user with with this email address, then my SQL will say that

83
00:04:54,940 --> 00:05:00,790
worked or oh, we actually already have a user with that email, so we can't do that or something else.

84
00:05:00,790 --> 00:05:03,280
Maybe there's an error that would be sent back.

85
00:05:03,280 --> 00:05:03,610
No.

86
00:05:03,610 --> 00:05:05,140
JS figures out what to do.

87
00:05:05,290 --> 00:05:10,150
Do I send an error message or do I send a congratulations success message?

88
00:05:10,150 --> 00:05:12,880
Do I just take them back to the home page and refresh it?

89
00:05:13,150 --> 00:05:15,580
That's the decisions that are made here.

90
00:05:15,850 --> 00:05:17,050
So that's the basics.

91
00:05:17,050 --> 00:05:19,180
But then the next thing is, where do we start?

92
00:05:19,180 --> 00:05:20,800
There's a lot of pieces here, right?

93
00:05:20,920 --> 00:05:24,190
We have to talk about Node.js installing that.

94
00:05:24,190 --> 00:05:26,620
We have to talk about how it communicates with my SQL.

95
00:05:26,620 --> 00:05:32,380
We have to talk about creating web apps in HTML and CSS and JavaScript, all this stuff.

96
00:05:32,920 --> 00:05:34,480
There's a lot of moving pieces.

97
00:05:34,870 --> 00:05:35,960
So where do we start?

98
00:05:35,980 --> 00:05:40,510
Well, we're starting with this handy dandy green box.

99
00:05:40,510 --> 00:05:44,620
We'll draw your attention to the right side of the screen, which tells you we're starting basically

100
00:05:44,620 --> 00:05:48,340
with the relationship between Node.js and MySQL.

101
00:05:48,370 --> 00:05:52,510
How do we talk from JavaScript to my SQL?

102
00:05:52,540 --> 00:05:58,690
So we're going to start with basic things like I want to select the current date from JavaScript, or

103
00:05:58,690 --> 00:06:01,630
I want to insert a single user into my SQL.

104
00:06:01,630 --> 00:06:06,190
So no web app, this whole left side of the screen will be gone for the first part.

105
00:06:06,430 --> 00:06:11,050
But then once we have this relationship established, we figured out how to insert a user, we figured

106
00:06:11,050 --> 00:06:14,230
out how to select all users or select the account.

107
00:06:14,320 --> 00:06:21,130
Then we will then kind of expand into the web application and add in the logic for creating a web app.

108
00:06:21,430 --> 00:06:22,390
So that's our game plan.

109
00:06:22,390 --> 00:06:23,560
We're starting with this side.

110
00:06:23,800 --> 00:06:27,970
So the very last thing to discuss is what our table will look like.

111
00:06:27,970 --> 00:06:30,930
So for this web app, very simple, right?

112
00:06:30,970 --> 00:06:34,870
All that we need to store for every user and we'll just call it users.

113
00:06:34,870 --> 00:06:43,660
We could call it emails or interested people or whatever weightlifters, but we'll go with users and

114
00:06:43,660 --> 00:06:45,520
all we need to store is their email address.

115
00:06:45,520 --> 00:06:45,690
Right?

116
00:06:45,700 --> 00:06:48,640
That's the key thing, and that's all they're entering.

117
00:06:48,640 --> 00:06:52,330
But it's also would be really useful to store a created ad.

118
00:06:52,330 --> 00:06:59,440
So we have a timestamps for when that user was created so that we could do things like figure out when

119
00:06:59,440 --> 00:07:03,250
most of our users signed up or what day of the week most users are signing up.

120
00:07:03,250 --> 00:07:08,200
Or just count how many users we've had, you know, this year compared to last year.

121
00:07:08,290 --> 00:07:10,210
So it's really nice to have created that.

122
00:07:10,210 --> 00:07:11,440
It's very simple as well.

123
00:07:11,440 --> 00:07:16,180
So those are the two fields we'll be working with the two columns and that's it, nice and simple.

124
00:07:16,330 --> 00:07:21,490
And then the other thing to discuss is our game plan from here on out and our first goal, we talked

125
00:07:21,490 --> 00:07:25,660
about how we're only working with this side of the table or of this diagram.

126
00:07:26,410 --> 00:07:33,160
What we're going to work up to is using Node.js to randomly generate and insert over 500 users into

127
00:07:33,160 --> 00:07:33,850
our database.

128
00:07:33,850 --> 00:07:36,700
So I had like 518 users in there.

129
00:07:36,700 --> 00:07:38,740
They all had unique emails.

130
00:07:38,740 --> 00:07:40,630
I did not code those by hand.

131
00:07:40,630 --> 00:07:46,450
I used a tool that generates some for me, and then I'm going to take that and insert them into our

132
00:07:46,450 --> 00:07:47,020
database.

133
00:07:47,020 --> 00:07:53,290
So basically shows you the power of using a language like node that we can very, very quickly generate

134
00:07:53,290 --> 00:07:57,040
data and not have to waste time getting 500 test users in there.

135
00:07:57,190 --> 00:08:00,130
So that's the first goal we're working up towards in this section.