EJS and databases

1. UNTANGLING THE WEB
WEEK 10 – SERVERS AND DATABASES, OH MY

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

3. 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

4. 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

5. 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]

6. 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 account
only one of you need do this per group, but it’s fine if more than one do
for now
I’d advise doing the same as for project 2 where one person forks and
gives commit permissions to the others

7. 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

8. 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”

9. 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?)

10. 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

11. 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

12. REMEMBER SQLFIDDLE?
• http://sqlfiddle.com/#!9/1d643/23
• We’re going to use the same database structure but in our own
MySQL database now

13. 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/

14. 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!

17. 1) Select a default
database (double click
on testDB)
2) Enter your query
statement
3) Press the lightning bolt
button

18. 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;

19. 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);

20. RUN A TEST QUERY
• Select * from employees
• (or whatever other modifiers you want to run on your query)

21. 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”

22. 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

23. EJS TEMPLATE DEMO

24. 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

25. EJS TEMPLATE DEMO WITH SQL

26. 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-
install-and-use-screen-on-an-ubuntu-cloud-server
• https://www.rackaid.com/blog/linux-screen-tutorial-and-
how-to/

27. 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.

28. 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

29. 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