Untangling spring week10

UNTANGLING THE WEBWEEK 10 – SERVERS AND DATABASES, OH MY

AGENDA

• Server setup – a runthrough of the whole process• Databases• EJS and html templates• Local build environments• Homework

HOMEWORK 8 REVIEW

• Some folks are having a hard time with this one• I am not looking for the database to populate the map

markers, but only the UI to do so• Ignore the problem of when you refresh the page the

database markers do not appear• I suggest working on everything but the map first

NEW SERVER FOR THE THIRD PROJECT

• The cspubl server you have been using has been great. The webserver serves your page and you don’t need to sorry about it.• Now we want a server, though, so I’ve stood up a new

machine. This is on Digital Ocean (if we have time we’ll talk about that process)• You’ll need to log onto that machine using the same type of

SSH approach we have been using

NODEJS

• We’ve talked about this some in relation to the video we watched a couple weeks ago.• Our setup is WAY simpler, just those things you need• NPM install• Node [filename]

FIRST, GET THE PROJECT

• I’m going to ask you to fork my sample project this time• You do this when you know you’ll be making changes that

don’t go back into the base project• So fork https://github.com/derekja/simpleNode into your

github accountonly one of you need do this per group, but it’s fine if more than one do for nowI’d advise doing the same as for project 2 where one person forks and gives commit permissions to the others

CLONE LOCALLY, MODIFY THE PROJECT

• Make sure you change it to use your database permissions and your port number• Then git add, commit, and push

LOG ONTO YOUR SERVER AND CLONE THE PROJECT• You can just do this from your home directory on this server,

no need to be in public_html anymore• Can use the default name as we’ve been doing, but you can

also clone multiple forks and change the name of the directory the go in. For instance:• Git clone https://github.com/derekja/simpleNode.git

anotherSimpleNode• This would clone into the “anotherSimpleNode” directory rather than

“simpleNode”

INSTALL THE DEPENDENCIES

• Because we are now using node, we have access to a wide array of node extensions• These all appear in the node_modules directory, but on your

newly cloned system that doesn’t exist yet so install it• npm install

• (btw. There is a file in the project called .gitignore which lists that files in the node_modules directory don’t get stored in github. Why?)

TRY RUNNING IT

• Navigate into your directory on the server and type “node express.js”• The website will launch and will tell you what server port it is

using• Make sure that this is your server port for your group! Edit it first, if

not

• Now navigate to the site, for instance• http://159.203.42.111:4001/ if you were running on port 4001

THE MORE COMPLEX EXAMPLES

• Stop the node.js server (cntrol-c) and then edit the other examples to use your connection information and try firing them up• Only one server can run on each port at any time, so if

multiple people in your group are trying this make sure you coordinate!• Try sql_ejs_example.js, although there are parts in there that

we haven’t talked about yet

REMEMBER SQLFIDDLE?

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

• We’re going to use the same database structure but in our own MySQL database now

DATABASE TO USE + MYSQL WORKBENCH

• Please don’t modify the testDB database, just leave it so everyone’s samples can run• You’ll want to create your own database for your project• You’ll use MySQL Workbench for this• Install that on your local machine from

https://dev.mysql.com/downloads/workbench/

CREATE A CONNECTION TO THE DATABASE• This is on 206.12.96.242 (our cspubl server) and use the

default port of 3306• In the email instructions I gave you a bit more complicated

way of connecting, but you can ignore that and just connect to the port directly• Use the username and password I sent each group in email!

1) Select a default database (double click on testDB)

2) Enter your query statement

3) Press the lightning bolt button

USE MYSQL WORKBENCH TO CREATE A NEW DATABASE• You’ll need to do this for your project group, but let’s just re-

create the employees database for now• Open a new query window• Create a new database (name it something unique, maybe

use your group name)• drop database if exists group0DB;• create database group0DB;

ADD A TABLE AND POPULATE IT

• Select the new database as the default• DROP TABLE IF EXISTS employees;• CREATE TABLE employees( id          integer,  name    text,•                           designation text,     manager integer,•                           hired_on    date,     salary  integer,•                           commission  float,    dept    integer);

•   INSERT INTO employees VALUES (1,'JOHNSON','ADMIN',6,'1990-12-17',18000,NULL,4);•   INSERT INTO employees VALUES (2,'HARDING','MANAGER',9,'1998-02-02',52000,300,3);

RUN A TEST QUERY

• Select * from employees

• (or whatever other modifiers you want to run on your query)

MODIFY YOUR PROJECT TO USE THE NEW DATABASE• Edit on your machine, git add, commit, push• Git pull on the server• Run it again “node sql_ejs_example.js”

EJS TEMPLATES

• Why can’t we just use client side javascript?• Everything goes to the client, including your database server credentials• There’s no access to filesystems, etc.

• So we need some server side code from node.js, how do we get that to the client?• Lots of ways – react, angular, etc.• But a relatively simple way is EJS – Embedded JavaScript• http://www.embeddedjs.com/getting_started.html

EJS TEMPLATE DEMO

A BIT MORE ON DATABASES

• I’ve only shown you the basic forEach loop over data from a select statement. You can do much more than that and make much more complex queries.

• Here is a good resource: https://www.sitepoint.com/using-node-mysql-javascript-client/• https://github.com/mysqljs/mysql• http://www.w3resource.com/node.js/nodejs-mysql.php

EJS TEMPLATE DEMO WITH SQL

SCREEN

• Since the webserver only runs when you have a console open, how do you get it to keep running?• Best option for our use is a tool called screeen• https://www.digitalocean.com/community/tutorials/how-to-ins

tall-and-use-screen-on-an-ubuntu-cloud-server• https://www.rackaid.com/blog/linux-screen-tutorial-and-how-t

o/

LOCAL DEVELOPMENT ENVIRONMENT

• The main thing missing is just nodejs• https://nodejs.org/en/

• You’ll want to make sure that it works from your git bash window so that you can use node and git from the same window. The workaround if you can’t figure that out is just to use node and git from separate windows. Ask on slack if you have problems.

MY DEVELOPMENT PROCESS

• Work locally in a visual studio code window• Have one git bash window open that is just for running the node server• Have another git bash window open where I check in and do anything else

in the shell I need to do• Go back and forth between editing and viewing in a browser• Checkin and push to the server when things are working the way I want

them• Or when I want to take a risky development path and want to make sure I can get back

HOMEWORK 10

• Due by class time on March 22, can be done as a project group but submission must name each person who contributed

• Take my simpleNode example and fork it• Modify it to point to your own database and so that the database reflects your project data

structure (need not be final)• Modify the sql_ejs_example.js to output from your database (make sure to use your own port

number as described in the email)• Use a more complicated query to get a subset of the records (only pull from the database for this

exercise, there is no need to write back to the database right now.)• Send me your github link and your website, along with the names of each person who contributed