UNTANGLING THE WEB

WEEK 9 – ASYNCHRONOUS BEHAVIOR, DATABASES, PROJECT 3

AGENDA

• Homework 8 discussion

• Asynchronous javascript

• Databases

• JSON introduction

• Project 3 discussion

• Homework 9

HOMEWORK 8 – MAIN POINTS

• Can organize a github repository with directories, just like anywhere else on the filesystem

• W3schools and MDN are good resources, but far from the only resources.

• Who found some good video sites?

• Who found some good tutorial sites?

ASYNCHRONOUS JAVASCRIPT

• What’s a callback? You’ve used them before! In the maps example

• What’s a promise?

• What’s a promise chain?

• Anyone come across async/await?

CALLBACK EXAMPLE

• https://jsfiddle.net/3cew460a/

PROMISE EXAMPLE

• https://jsfiddle.net/s3m4xv1o/

PROMISE CHAINING EXAMPLE

• https://jsfiddle.net/8Lf4zof3/

• https://www.youtube.com/watch?v=a1cTkiNuEwM

ASYNC/AWAIT

• Let’s watch rather than work

• It is an ES7 feature, so will have to use babel as a transpiler if we want to use it

• https://www.youtube.com/watch?v=COKdtOgopWQ

DATABASES

• SQL versus noSQL

• Flavours of SQL and noSQL

• Why use a database at all?

• Advanced database topics• Schema design

• Replication

• Transactions

SQL VERSUS NOSQL

• SQL – Structured Query Language

• Relational database

• Use when you need multiple tables and when you need to construct queries that span those tables

• More functional than flat databases, but also slower and more complex

• Can exist in either client or server flavours

NoSQL databases – anything that isn’t relational! MongoDB is a popular server-based flavor Redis is a local memory-mapped flavor Cloudant, couchDB, etc. there are many, many

types All are good for rapid, flat table access Avoid the complexities of relational databases

while still preserving the benefits

LOCAL SQL EXAMPLE – CARS DATABASE

• https://jsfiddle.net/m5rh3a83/1/

• (for more details see here: https://www.tutorialspoint.com/html5/html5_web_sql.htm)

MORE REALISTIC SQL EXAMPLE

• http://sqlfiddle.com/#!9/1d643/23

• (video help here: https://www.youtube.com/watch?v=DDVOMRvyAS4)

SQLZOO

• http://sqlzoo.net/

• Go do some exercises!

• (https://www.sqlteaching.com is an alternative if you want some more exercises)

MULTIPLE TABLES• You will usually have more than one table

• If you have only one table, it is time to consider a NoSQL database

• Look on SQLZoo for the JOINS sections and make sense of that• http://sqlzoo.net/wiki/The_JOIN_operation

• If you want more complex examples on a real database you can play here:

• http://data.stackexchange.com/stackoverflow/queries

• More about joins

• https://blog.codinghorror.com/a-visual-explanation-of-sql-joins/

WORK ON YOUR PROJECT 3 DATABASE

• Draw out your table structure and then enter it into sqlfiddle

• Write a couple queries

• Did it work?

PROJECT 3

• This is the back end, I would suggest all of you do a database connection

• If you feel strongly about some other back end component that is possible, but each of your project 2 submissions has a pretty straightforward database connection

• At the end of project 3, you will each demo your finished application

• Finished in the case, of course, means finished to the point of demo’ing it

• I don’t care if there are things that don’t work, but your demo path should work and talk to an actual database

•

PROJECT 3 GRADING• All project 3 presentation are due on March 29th in class, late projects will not be accepted

• If you are horribly ill and nobody in your group can come in to present, the project itself is still due and the presentation marks will be forfeit, or if absolutely necessary you can send me a demo video

• 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?

HOMEWORK 8 – LOCAL CLIENT-SIDE DATABASE• Take the cars webSQL example and modify it to hold place names and latitude/longitude points in a

local database

• As locations are added, add them to a google map on the page as a marker

• Extra special bonus problem (+2 points):• Instead of doing this by means of degrees, use meters, allowing the user to input how far they want the list to

populate from campus

• (NB. This is rather tricky and you’ll want to use the haversine formula: http://www.movable-type.co.uk/scripts/latlong.html, or use the google maps APIs)