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 pathbackend-to-frontend.html
244 lines (242 loc) · 22.1 KB
/
backend-to-frontend.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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html>
<head>
<title>Back-end to Front-end (and back)</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:1.2vw; line-height:0.8em; letter-spacing: -0.28em; font-weight:100;'> _____ _____ _____ _____ _____ _____ _____ _____ _______
/\ \ /\ \ /\ \ /\ \ /\ \ /\ \ /\ \ /\ \ /::\ \
/::\ \ /::\ \ /::\ \ /::\____\ /::\ \ /::\____\ /::\ \ /::\ \ /::::\ \
/::::\ \ /::::\ \ /::::\ \ /:::/ / /::::\ \ /::::| | /::::\ \ \:::\ \ /::::::\ \
/::::::\ \ /::::::\ \ /::::::\ \ /:::/ / /::::::\ \ /:::::| | /::::::\ \ \:::\ \ /::::::::\ \
/:::/\:::\ \ /:::/\:::\ \ /:::/\:::\ \ /:::/ / /:::/\:::\ \ /::::::| | /:::/\:::\ \ \:::\ \ /:::/~~\:::\ \
/:::/__\:::\ \ /:::/__\:::\ \ /:::/ \:::\ \ /:::/____/ /:::/__\:::\ \ /:::/|::| | /:::/ \:::\ \ \:::\ \ /:::/ \:::\ \
/::::\ \:::\ \ /::::\ \:::\ \ /:::/ \:::\ \ /::::\ \ /::::\ \:::\ \ /:::/ |::| | /:::/ \:::\ \ /::::\ \ /:::/ / \:::\ \
/::::::\ \:::\ \ /::::::\ \:::\ \ /:::/ / \:::\ \ /::::::\____\________ /::::::\ \:::\ \ /:::/ |::| | _____ /:::/ / \:::\ \ /::::::\ \ /:::/____/ \:::\____\
/:::/\:::\ \:::\ ___\ /:::/\:::\ \:::\ \ /:::/ / \:::\ \ /:::/\:::::::::::\ \ /:::/\:::\ \:::\ \ /:::/ |::| |/\ \ /:::/ / \:::\ ___\ /:::/\:::\ \ |:::| | |:::| |
/:::/__\:::\ \:::| |/:::/ \:::\ \:::\____\/:::/____/ \:::\____\/:::/ |:::::::::::\____\/:::/__\:::\ \:::\____\/:: / |::| /::\____\/:::/____/ \:::| | /:::/ \:::\____\|:::|____| |:::| |
\:::\ \:::\ /:::|____|\::/ \:::\ /:::/ /\:::\ \ \::/ /\::/ |::|~~~|~~~~~ \:::\ \:::\ \::/ /\::/ /|::| /:::/ /\:::\ \ /:::|____| /:::/ \::/ / \:::\ \ /:::/ /
\:::\ \:::\/:::/ / \/____/ \:::\/:::/ / \:::\ \ \/____/ \/____|::| | \:::\ \:::\ \/____/ \/____/ |::| /:::/ / \:::\ \ /:::/ / /:::/ / \/____/ \:::\ \ /:::/ /
\:::\ \::::::/ / \::::::/ / \:::\ \ |::| | \:::\ \:::\ \ |::|/:::/ / \:::\ \ /:::/ / /:::/ / \:::\ /:::/ /
\:::\ \::::/ / \::::/ / \:::\ \ |::| | \:::\ \:::\____\ |::::::/ / \:::\ /:::/ / /:::/ / \:::\__/:::/ /
\:::\ /:::/ / /:::/ / \:::\ \ |::| | \:::\ \::/ / |:::::/ / \:::\ /:::/ / \::/ / \::::::::/ /
\:::\/:::/ / /:::/ / \:::\ \ |::| | \:::\ \/____/ |::::/ / \:::\/:::/ / \/____/ \::::::/ /
\::::::/ / /:::/ / \:::\ \ |::| | \:::\ \ /:::/ / \::::::/ / \::::/ /
\::::/ / /:::/ / \:::\____\ \::| | \:::\____\ /:::/ / \::::/ / \::/____/
\::/____/ \::/ / \::/ / \:| | \::/ / \::/ / \::/____/ ~~
~~ \/____/ \/____/ \|___| \/____/ \/____/ ~~
_____ _____ _______ _____ _____ _____ _____ _____
/\ \ /\ \ /::\ \ /\ \ /\ \ /\ \ /\ \ /\ \
/::\ \ /::\ \ /::::\ \ /::\____\ /::\ \ /::\ \ /::\____\ /::\ \
/::::\ \ /::::\ \ /::::::\ \ /::::| | \:::\ \ /::::\ \ /::::| | /::::\ \
/::::::\ \ /::::::\ \ /::::::::\ \ /:::::| | \:::\ \ /::::::\ \ /:::::| | /::::::\ \
/:::/\:::\ \ /:::/\:::\ \ /:::/~~\:::\ \ /::::::| | \:::\ \ /:::/\:::\ \ /::::::| | /:::/\:::\ \
/:::/__\:::\ \ /:::/__\:::\ \ /:::/ \:::\ \ /:::/|::| | \:::\ \ /:::/__\:::\ \ /:::/|::| | /:::/ \:::\ \
/::::\ \:::\ \ /::::\ \:::\ \ /:::/ / \:::\ \ /:::/ |::| | /::::\ \ /::::\ \:::\ \ /:::/ |::| | /:::/ \:::\ \
/::::::\ \:::\ \ /::::::\ \:::\ \ /:::/____/ \:::\____\ /:::/ |::| | _____ /::::::\ \ /::::::\ \:::\ \ /:::/ |::| | _____ /:::/ / \:::\ \
/:::/\:::\ \:::\ \ /:::/\:::\ \:::\____\ |:::| | |:::| | /:::/ |::| |/\ \ /:::/\:::\ \ /:::/\:::\ \:::\ \ /:::/ |::| |/\ \ /:::/ / \:::\ ___\
/:::/ \:::\ \:::\____\/:::/ \:::\ \:::| ||:::|____| |:::| |/:: / |::| /::\____\ /:::/ \:::\____\/:::/__\:::\ \:::\____\/:: / |::| /::\____\/:::/____/ \:::| |
\::/ \:::\ \::/ /\::/ |::::\ /:::|____| \:::\ \ /:::/ / \::/ /|::| /:::/ / /:::/ \::/ /\:::\ \:::\ \::/ /\::/ /|::| /:::/ /\:::\ \ /:::|____|
\/____/ \:::\ \/____/ \/____|:::::\/:::/ / \:::\ \ /:::/ / \/____/ |::| /:::/ / /:::/ / \/____/ \:::\ \:::\ \/____/ \/____/ |::| /:::/ / \:::\ \ /:::/ /
\:::\ \ |:::::::::/ / \:::\ /:::/ / |::|/:::/ / /:::/ / \:::\ \:::\ \ |::|/:::/ / \:::\ \ /:::/ /
\:::\____\ |::|\::::/ / \:::\__/:::/ / |::::::/ / /:::/ / \:::\ \:::\____\ |::::::/ / \:::\ /:::/ /
\::/ / |::| \::/____/ \::::::::/ / |:::::/ / \::/ / \:::\ \::/ / |:::::/ / \:::\ /:::/ /
\/____/ |::| ~| \::::::/ / |::::/ / \/____/ \:::\ \/____/ |::::/ / \:::\/:::/ /
|::| | \::::/ / /:::/ / \:::\ \ /:::/ / \::::::/ /
\::| | \::/____/ /:::/ / \:::\____\ /:::/ / \::::/ /
\:| | ~~ \::/ / \::/ / \::/ / \::/____/
\|___| \/____/ \/____/ \/____/ ~~
</pre>
<h2 class='date'> August 29th, 2018</h2>
</header>
<article class='container'>
<section id="todo">
<h1>To Do's:</h1>
<ul>
<li>Administrivia</li>
<li>Review Activity</li>
<li>REST</li>
<li>RESTful Application Development</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Good evening everyone! Today's class will build on the fundamental knowledge you have of semantic
templating engines, allowing you to communicate more easily and fluidly between the front-end and
back-end components of your applications. Using <code>GET</code>, <code>POST</code>, <code>PUT</code>,
and <code>DELETE</code> to make HTTP requests to
a back-end will also be key here—recall what these refer to with regards to database manipulation.
</p>
<p>We'll begin with a warm-up activity similar to what we did last class then move into RESTful APIs,
using HTTP requests outside of <code>GET</code> and <code>POST</code>, then bring everything into the mix.
</p>
<p>Feel free to ask any lingering questions from last session before we begin.</p>
</section>
<section>
<h1>Review Activity</h1>
<div class="student-activity">
<h1>Student activity!</h1>
<h2>
Handlebars Animals
</h2>
<p>For this application, I'll demo a small application that uses Handlebars and Express, then you'll implement it. This will be
very similar to last class's Ben and Jerry's application. Here are some example routes I'll demo:</p>
<ul>
<li>
<a href="http://localhost:3000/dog">http://localhost:3000/dog</a>
</li>
<li>
<a href="http://localhost:3000/all-pets">http://localhost:3000/all-pets</a>
</li>
<li>
<a href="http://localhost:3000/all-non-pets">http://localhost:3000/all-non-pets</a>
</li>
</ul>
<p>You will edit the <span class="mono">server.js</span> file, the <span class="mono">dog.handlebars</span> file, and the
<span class="mono">index.handlebars</span> file in an attempt to recreate
the application that we demonstrated just a couple of minutes ago. Instructions on what to do are contained within each file
you will have to edit.</p>
<p>You won't be using MySQL for this exercise but will instead be using the animals array in the <span class="mono">server.js</span> file.</p>
</div>
<div class="review">
<h2>Handlebars Animals Review</h2>
<p>Let's go over this exercise. Recall the specific folder structure and <code class="language-javascript">app.engine(...)</code> parts
we need for a templating engine.</p>
</div>
</section>
<section>
<h1>REST</h1>
<p>With regards to REST, different HTTP requests hold semantic value (<code>GET</code>, <code>POST</code>, <code>PUT</code>, and <code>DELETE</code>).
I've gone over this briefly, but let's talk about them in the context of
<abbr title="Representational State Transfer" class="note">REST</abbr>—<span class="bold mid-accent">Representational State Transfer</span>.</p>
<p>REST is essentially a set of standards for the web. RESTful applications have a <span class="note">uniform interface</span>, are <span class="note">stateless</span>, are <span class="note">cacheable</span>,
keep the <span class="note">server separate from the client</span>, and are a <span class="note">layered system</span> in that there may be intermediary servers between the
client and the database with which they are working.</p>
<p>Breaking this down further, in less words: RESTful applications don't know what happened previously and don't care; they don't
keep track of how many servers talk to each other; they generally work the same way. In fact, the CRUD methodology works marvellously to describe
a RESTful application's ability to access data using HTTP requests:
</p>
<ul>
<li>
<code>POST</code> requests are used to <span class="mid-accent">create</span> new data into a database.
</li>
<li>
<code>GET</code> requests <span class="mid-accent">read</span> data from a database.
</li>
<li>
<code>PUT</code> requests are used to <span class="mid-accent">update</span> a row within a database.
</li>
<li>
<code>DELETE</code> requests are used to <span class="mid-accent">delete</span> a row from a database.
</li>
</ul>
<blockquote>What's the point of using all these different requests? I can just GET all my data into the database
via the URL, right?</blockquote>
<p>Well... yes and no. Do you really want private data to be accessible via the URL? Also, does it make sense to use a hammer
on a screw instead of screwdriver? Not exactly: you can, but it's not a good look.
</p>
<p>If we have the right tools, it makes sense to use
them. REST defines using these four separate HTTP requests as a best practice. When you follow this standard, it makes your code
amazingly readable and easy to follow while also allowing you to track these requests simply and easily in your browser's dev tools.</p>
<p>Let's take about five minutes to talk about this, either in a class conversation, amongst yourselves, or both.</p>
<hr>
<div class="student-activity">
<h2>Class activity!</h2>
<p>Let's pick apart an application called Task Saver shortly. First, let's take a look at the code in <span class="mono">07-TaskSaver</span>
and see what it does. Then, we can import some SQL and demo it. Pay particular attention to methods we see.</p>
<p>Take some time to demo it on your own machines with me and play around with it.</p>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>RESTful Application Development</h1>
<p>The rest of today's class will be dedicated to activities.
If you have any questions throughout the rest of the class, please do not hesitate to ask any of the instructional staff. A lot of different
moving parts have been tossed at you the last couple of weeks—if something isn't clicking, <span class="italic">please, please ask</span>.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Wishes</h3>
<p>I'm going to demonstrate this application, then you'll build it!</p>
<hr/>
<p>Create an app with Express, MySQL and Handlebars.</p>
<p>Create a <span class="mono">schema.sql</span> file and create the following inside of that file:</p>
<ol>
<li>Make a database called <span class="mono">wishes_db</span></li>
<li>Inside of that database, make a table called <span class="mono">wishes</span> which will have a wish column and an id column. The id will be automatically incremented while also being the primary key.</li>
<li>Run your <span class="mono">schema.sql</span> file within MySQL Workbench before moving onto the next steps.</li>
</ol>
<p>In your <span class="mono">server.js</span> file, you will have to create two routes: a GET route for <span class="mono">/</span> and a POST route for <span class="mono">/</span>.</p>
<ul>
<li>Render all of the wishes from the wishes table when the <span class="mono">/</span> get route is hit. Additionally, show the form that the user
can use to create a new wish. The form will POST to the <span class="mono">/</span> route.</li>
<li>The <span class="mono">/</span> POST route will insert the wish from the form into the wishes table and will redirect the user back to the <span class="mono">/</span>
get route.</li>
</ul>
</div>
<div class="review">
<h2>Wishes Summary</h2>
<p>Let's go over this line-by-line.</p>
</div>
<h2>Putting and Deleting</h2>
<p>Let's take a look at an application that uses <code>PUT</code> and <code>DELETE</code> requests.</p>
<div class="student-activity">
<h2>Class activity!</h2>
<p>Let's go over <span class="mono">09-DayPlanner</span>, running it as well as picking apart
how it works. When we use jQuery, note that we can also use <code class="language-javascript">window.fetch(...)</code>.
This is infinitely preferable.</p>
<p>Take some time on your own after we're done running it yourselves, explaining to each other line-by-line.
After we're done and questions are answered, we'll begin a new activity.
</p>
</div>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Watch List</h3>
<p>Create a full-stack application with Express, MySQL and Handlebars. <span class="note">Warning:</span> this
one is fairly involved.</p>
<p>Create a <span class="mono">schema.sql</span> file. Within it, do the following:</p>
<ol>
<li>Make a database called <span class="mono">moviePlannerDB</span></li>
<li>Inside of that database, make a <span class="mono">movies</span> table which will contain a movie column and an id column. The id will be automatically incremented while also being the <span class="italic">primary key</span>.</li>
<li>Run your <span class="mono">schema.sql</span> file within MySQL Workbench before moving onto the next steps.</li>
</ol>
<p>In your <span class="mono">server.js</span> file, you will create four routes: <code>get</code>, <code>post</code>, <code>put</code>, and <code>delete</code>.</p>
<p>Render the main `index.handlebars` when the <span class="mono">/</span> get route is hit with all of the movies from the movies table.</p>
<p>Your application should have a set of routes on <span class="mono">/movies</span> for create, update, and delete operations on the movies table.</p>
<p>Show a delete button next to each movie. When one of the delete buttons is clicked, the code should send a DELETE request to delete the associated movie from your database.</p>
<p>Additionally, show the form that the user can use to add a movie to be watched. When the submit button is clicked, the code will post to the <span class="mono">/movies</span> route, which will insert the movie from the form into the movies table and return the ID of the new movie.</p>
<p>Have another form that will update a movie in the movies table. The form will include two inputs: an id input and a movie title input. Remember to leverage a PUT method.</p>
<p>Remember: best practices for REST include:</p>
<ul>
<li>Put your REST API on it's own URL (e.g. <span class="mono">/todos</span>).</li>
<li>A POST that creates an item should return the ID of the item it created.</li>
<li>PUT and DELETE should specify the ID of the item they're intended to affect in the URL (e.g. <span class="mono">/todos/123</span>).</li>
<li>If the ID for the item specified in a PUT or DELETE couldn't be found, return a 404.</li>
<li>If an error occurs in the server, return an error code (e.g. 500).</li>
</ul>
</div>
<div class="review">
<h2>Watch List Review</h2>
<p>Let's go over the code line-by-line.</p>
</div>
</section>
<div class="page-break">
<h1>That's all for today, see you next Wednesday!</h1>
<h2 class="mid-accent">Enjoy your Labor Day weekend!</h2>
</div>
</article>
</body>
<!-- Script to make code pretty -->
<script type='text/javascript' src="../js/prism.js"></script>
</html>