This document provides an agenda and information for a class on databases, debugging, forms, and APIs. It includes exercises to set up debugging in VS Code and create a page that allows querying a database table. Key topics covered are debugging, generators, bundling, HTTP requests, parsing request bodies, asynchronous JavaScript, JSON, and RESTful APIs. Students are also instructed on requirements for their upcoming Project 3 presentations and Homework 11 assignment.

1. UNTANGLING THE WEB
WEEK 11 – MORE FUN WITH DATABASES, DEBUGGING, PUTTING IT ALL
TOGETHER

2. AGENDA
• More about debugging and build environments
• HTTP get and post messages, forms
• Pulling responses out of post messages
• Look back to asynchronous js
• Callbacks and promises, async library
• JSON and restful APIs
• Project 3 presentations
• Homework 11

3. HW10 QUESTIONS
• Has each group managed to get a database of their own up and
listing on a web page?
• What parts were hard?

4. DEBUGGERS
• We’ve used chrome developer tools, this is a rudimentary
debugger
• Better is the one built into VS Code because it can also debug
on the server side
• Need to do just a little bit of setup to enable it

5. VS CODE SETUP
• Nice tutorial on
https://code.visualstudio.com/docs/nodejs/nodejs-tutorial
• More debugging details at
https://code.visualstudio.com/docs/editor/debugging
• Let’s go through the tutorial together, just for more practice in
starting projects

6. GENERATORS
• This is something that gives you a framework from which to
start your application
• Boilerplate projects are similar
• Use them, but make sure you know what they are doing!

7. BUNDLING AND BUILD ENVIRONMENTS
• Good video here:
https://www.youtube.com/watch?v=PcqYhSH44Ow
• (this just came across my feed today and I thought it was
interesting. You don’t need most of it for this class, though.)

8. EXERCISE 1
• Make sure you have nodejs installed
• Follow the tutorial we just went through on
https://code.visualstudio.com/docs/nodejs/nodejs-tutorial
• We’ll take 10-15 minutes on it (hopefully, I still suspect there
may be local development environment setup issues lurking
around…)

9. FORMS
• We haven’t used forms in our HTML much yet.
• They primarily provide benefit when using AJAX or other
server-side round-trips
• In this case we are using express.js routes as our server side
• We will use a form primarily as a tool to submit data

10. HTTP GET AND POST MESSAGES
• All of our routes have been get routes so far
• We will use our first post route today
• Need to set up an express route using app.post rather than
app.get

11. BODY-PARSER
• We will use a new npm module to be able to easily access the
body of the request object
• Look at the entire object and what it contains, being able to
just access the body is a great simplification
• (review npm install, the require statement)

12. GRABBING VARIABLES OFF THE REQUEST
OBJECT
• Best use is to grab the variables that we have named in our
html
• Can be any number of these, but just one is used in the current
example

13. ASYNCHRONOUS JAVASCRIPT
• Remember callbacks?
• How about promises?
• We’re going to use an NPM module called async to make this
easier
• (once more through npm install and setting up the require
statements)

14. EXERCISE 2
• Create a branch in your fork of the simpleNode project and
checkout that branch (can be done all in one step with “git
checkout –b branchname”
• Create your own example page (feel free to copy some of what
you need from the files in the project, but you’ll want to create
new files)
• Using the testDB database and the employees table, create a
page that allows you to query by salary (or one of the other
fields)

15. JSON AND RESTFUL API STANDARDS
• JSON – javascript object notation
• You’ve used this a bunch already but haven’t used this name for it.
Basically anytime you are using the object.property notation you are
using JSON
• RESTful APIs - Representational State Transfer
• Really complete discussion here:
http://stackoverflow.com/questions/671118/what-exactly-is-restful-
programming
• Basic thing you have to know is that it is stateless, so the call carries
everything that you need to complete the request. Our GET and POST
actions today are prime examples.

16. PROJECT 3 PRESENTATIONS
• This is next week!
• Each group will have a maximum of 10 minutes to present.
• 15 points total
• 5 points presentation
• Is the demo good, is the website working, is the story about why it is interesting smooth
• 5 points database design and function (do things actually work)
• What is your table structure like? Talk about any problems you ran into. How was connecting it to
the front end?
• 5 points code quality and robustness
• Not everything has to work, but if it is there I want it to do nothing at all or the right thing. How
have you structured your code? Is it commented and easy to understand? Everything checked into
github and deployed to the server?

17. PROJECT 3 PRESENTATIONS
• I’m not looking for the whole design story like in project 1
• Instead I want your quick run-through of your functionality,
wrapped in the story of why it is interesting. Pretend you get 3-
5 minutes in front of an investor and want to convince them
that you have something cool
• Rest of the time should be spent talking about your database
design and any development issues you ran into
• 10 minutes max!

18. HOMEWORK 11
• You can use your database structure from hw10 for this
• Create a web page with a list for results, a text field, and a button
• When the button is pressed, execute the query based on the text
field and populate the results list with it
• The page should be styled with CSS in a separate CSS file
• Turn in by class on 3/29 with a list of who worked on it and the
github link. You do not need to have a running server this time
because you will be using that for your project 3, but when I clone
and pull your project it should work properly.