This repository has been archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcrud+sequelize.html
211 lines (209 loc) · 15.1 KB
/
crud+sequelize.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html>
<head>
<title>CRUD+Sequelize</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=BioRhyme:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css">
<link rel='stylesheet' type='text/css' href="../css/prism.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css">
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:3.5vw; line-height:0.9em; letter-spacing: -0.4em; font-weight:100;'>
_ _ _ _ _
/' `\ /' `\ ' ) ) /' `\ /' `\ /'
/' ._) /' ) /' /' /' ) /' ._) /'
/' /' (___,/'/' /' /' /' /' (____ ____ ____ ____ /' O ____ ____
/' /' ; /' /' /' /' ___ /___ ) /' ) /' ) /' / /' ) /' /' ' _/'/' )
/' /' /' /' /' /' /' /' /'/(___,/' /' /' /' /' /(___,/' /' /' _/' /(___,/'
(_____,/'(,/' (_, (_____,/'(,/' (___,/' /' (_____,/' (________(___,/(__(___,/(__(________(__(___/'__,(________
/'
-/'-
/'
</pre>
<h2 class='date'> September 10th, 2018</h2>
</header>
<article>
<section id="todo">
<h1>To-Do's:</h1>
<ul>
<li>Administrivia</li>
<li>App Demo: TodoList</li>
<li>ORM-To-Sequelize</li>
<li>New CRUD Methods</li>
<li>Validations</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Good evening, all! Today's class will be dedicated to introducing new Sequelize methods for updating and deleting records as well as
introduce some useful validation. This information will help round out your existing knowledge of Sequelize—e.g. creating models, selecting
inserting, etc.—and extend it to include support
for CRUD-based applications. We'll also want to get used to the CLI when creating new projects from scratch.
</p>
<p>Do keep in mind that this stuff is <span class="italic">not easy</span>; you are expected to struggle a bit through this unit as a whole.
If you're not getting the material immediately, that's perfectly fine. Just be sure to ask plenty of questions, request more thorough explanations
of examples, and stay for office hours. <span class="muted italic">(Seriously! Come hang out with us and we'll clear up anything and everything
you may be fuzzy on.)</span></p>
<p>Throughout the course of this class, please be warned that many of these activities have a lot of working parts that we don't necessarily
need to focus on right now. We'll be sticking with Sequelize, as is the focus of this unit.
</p>
<hr>
<p>Before we begin, how do you feel about this unit so far? How about Sequelize? What is it, what is a model, what are <code>findOne</code>, <code>findAll</code>, and
<code>create</code>?</p>
</section>
<section>
<h1>App Demo: TodoList</h1>
<p>To start things off: everyone deserves a ton of praise for picking up these new concepts. In order to test your knowledge and make it more
robust—this is also the main method in which new concepts have been introduced to you the past four months. Our method of doing so today?
A big application! After introducing it, I'll be domoing the final version of an application called <span class="note">TodoList</span> which is
already built, but uses an ORM instead of Sequelize.
</p>
<p>Since the app is already complete, there will be no need to write anything other than JavaScript for the majority of this class, as you will be
converting it to use Sequelize. It makes use of each CRUD action, allowing users to:.</p>
<ul>
<li><span class="note">CREATE</span> new to-dos</li>
<li><span class="note">READ</span> their to-do list</li>
<li><span class="note">UPDATE</span> to-do items</li>
<li><span class="note">DELETE</span> delete to-dos</li>
</ul>
</section>
<section>
<h1>ORM-To-Sequelize</h1>
<p class="no-letter">Your first task today will be simply to connect to Sequelize and create a "todo" model.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>ORM-To-Sequelize</h3>
<ul>
<li>
Create a new local MYSQL database called <span class="mono">todolist</span>, but don't create any tables.
</li>
<li>
Delete any references to the orm.js file inside the <span class="mono">api-routes.js</span> file.
</li>
<li>
Delete the config folder.
</li>
<li>
While inside the activity folder, run <code class="language-bash">npm install</code> in terminal.
</li>
<li>
In terminal, type in the following command: <code class="language-bash">sequelize init:models & sequelize init:config</code>. If this produces an error, then you may not have the sequelize and the sequelize-cli installed globally.
Fix this by running <code class="language-bash">npm install -g sequelize sequelize-cli</code> in your terminal and trying again.
</li>
<li>
Step 5 should have created a config and a models folder for us. Navigate to the config folder, open <span class="mono">config.json</span>, and modify the development object's "database","username" and "password" values to match your MYSQL database on your machine.
</li>
<li>
Navigate to the models folder and create a new file called <span class="mono">todo.js</span>. Create a Todo model with columns for "text" (<code>DataTypes.STRING</code>), and "complete" (<code>DataTypes.BOOLEAN</code>).
</li>
<li>
Navigate to the <span class="mono">server.js</span> file and require all of our models by requiring the models folder. Save this to a variable and name it "db".
</li>
<li>
Sync the models by running <code class="language-javascript">db.sequelize.sync()</code> before we start the express server.
</li>
<li>
In your terminal, run <code class="language-bash">node server</code>. Check MYSQL Workbench to see if a Todos table was created. If so, you were successful. If not, check your terminal for any errors.
</li>
</ul>
</div>
<div class="review">
<h2>ORM-To-Sequelize Review</h2>
<p>Let's take a look at how this is done.</p>
</div>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>findAll and create</h3>
<ol>
<li>Open the folder and run <code class="language-bash">npm install</code>.</li>
<li>Update the <span class="mono">config.json</span> file's development object with your own local MYSQL database settings.</li>
<li>Navigate to the <span class="mono">api-routes.js</span> folder.</li>
<li>Add a Sequelize findAll method inside the GET route which finds all of the todos and returns them to the user as JSON.</li>
<li>Add a Sequelize create method to the POST route to save a new todo to the database using the data sent to the server in req.body.</li>
<li>To test if this worked, open your terminal and run <code class="language-bash">node server</code> and navigate to <span class="mono">localhost:8080</span>. If you are able to save new todos, you were successful.</li>
<li><span class="hint">Hint:</span> We can access the Todo model here with <span class="mono">db.Todo</span>.</li>
</ol>
<p>
If you get stuck or finish early, check out the Sequelize Star Wars solution from last class, or try and see if those around you can make sense of Sequelize's docs for the <span class="mono">findAll</span> and <span class="mono">create</span> methods:
<a href="http://docs.sequelizejs.com/class/lib/model.js~Model.html#static-method-findAll" target="_blank">findAll reference</a>,
<a href="http://docs.sequelizejs.com/class/lib/model.js~Model.html#static-method-create" target="_blank">create reference</a>.
</p>
</div>
<div class="review">
<h2>findAll and create Review</h2>
<p>Next verse, just like the first. Let's go over this part of the application.</p>
</div>
</section>
<section>
<h1>New CRUD Methods</h1>
<p class="no-letter">Continuing to convert our application requires some new methods. I'll be demoing updating and deleting
todo items. Not only will we be able to delete items—we can also update the todos by ticking the checkbox associated with each one.
This executes an update statement.
</p>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Update and Delete</h3>
<ol>
<li>Open up <span class="mono">09-Sequelize-Update-Delete</span>.</li>
<li>Run <code class="language-bash">npm install</code>.</li>
<li>Update the <span class="mono">config.json</span> file's development object with your own local MySQL database settings.</li>
<li>Inside the <span class="mono">api-routes.js</span> file, look for the DELETE route and add a Sequelize method to delete the todo with the id available to us in <span class="mono">req.params.id</span>.</li>
<li>Inside of the same file, look for the PUT route and add a Sequelize method to update a todo with the new todo data available to us inside <span class="mono">req.body</span>.</li>
<li>Again, you won't need to touch the front end HTML or JavaScript to make any of this work.</li>
<li><span class="hint">Hint:</span> you will need to pass in an options object with a "where" attribute into both methods in order to filter these queries to target the Todos we want to update or delete.</li>
<li><http://docs.sequelizejs.com/en/latest/docs/querying/#where></li>
<li>Navigate to <span class="mono">localhost:8080</span>. If you can update and delete todos without errors, you were successful.</li>
<li>If you get stuck or finish early, discuss the documentation for the update and destroy methods with a partner here:
<a href="http://docs.sequelizejs.com/class/lib/model.js~Model.html#static-method-update" target="_blank">update reference</a>,
<a href="http://docs.sequelizejs.com/class/lib/model.js~Model.html#static-method-destroy" target="_blank">destroy reference</a>.</li>
</ol>
</div>
<hr>
<p>We'll review this activity after the break.</p>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>Validations</h1>
<p>As some of you may have already noticed, there's a small flaw with our TodoList application. While our Todos table's text column won't save
any datatype other than a <span class="mono">Sequelize.STRING</span>, it is possible to save a todo with an empty or null text value.</p>
<p>While it's possible to restrict this functionality on the client side—and we <span class="italic">definitely</span> should be doing this—if someone knows
how to use Chrome Developer Tools, they can circumvent any restrictions we put in our front-end JavaScript.
Knowing that any code we write on the client is potentially available for the user to tamper with, we should take steps
on the back-end to validate what we're receiving before putting it into our database.</p>
<p>Sequelize has built-in validations and flags we can include with our models, like making sure that any given text is a URL or email,
or that a credit card number is formatted correctly. A flag might include making sure a value is not null before entering it into the database or having a default value for a
field if one is not supplied. The difference is that flags are ways for us to implement MYSQL constraints we're already familiar with such as <code class="language-sql">NOT NULL</code>
or <code class="language-sql">DEFAULT</code> and validations are additional built in or custom methods we can run before Sequelize inserts a record.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Sequelize Validations</h3>
<ol>
<li>Open the folder slacked out to you.</li>
<li>Run <code class="language-bash">npm install</code>.</li>
<li>Update the <span class="mono">config.json</span> file's development object with your own local MySQL database settings.</li>
<li>Modify the <span class="mono">todo.js</span> file so that the Todo model has a flag to prevent the text field from being null. Also add a validation to make sure the text field is at least one character, but no more than 140 characters.</li>
<li>Modify the complete field in our Todo model so that it supplies a default value of false if one is not supplied during Todo creation.</li>
<li>Once a Sequelize model has been created and synced for the first time, any changes we make to our Todo model won't be picked up by our database.
The easiest way to get around this during the development process is to pass <code class="language-javascript">{ force: true }</code> as an argument into our sync method inside the <span class="mono">server.js</span> file. This will make it so that every time we run our app, our Todos table will be dropped and recreated with the new configuration. More info here under: <a href="http://docs.sequelizejs.com/class/lib/sequelize.js~Sequelize.html#instance-method-sync" target="_blank">sync reference</a></li>
<li>Navigate to <span class="mono">localhost:8080</span> to test that this worked. Try to save a Todo without any text in it, and then try and save a Todo with over 140 characters. If these didn't save and you see errors in your console that have to do with validation, you were successful.</li>
<li><span class="note">Big Hint:</span> Sequelize documentation on validations with examples can be found here: <a href="http://docs.sequelizejs.com/en/latest/docs/models-definition/#validations" target="_blank">validations reference</a></li>
</ol>
</div>
</section>
<div class="page-break">
<h1>That's all for today, see you Wednesday!</h1>
</div>
</article>
</body>
<!-- Script to make code pretty -->
<script type='text/javascript' src="../js/prism.js"></script>
</html>