cmugla/cheat_sheet.md

## cheat_sheet.md

      
    Raw
  

              cheat_sheet.md
            
          
Introduction to the Internet

By definition the Internet is a worldwide, publicly accessible series of interconnected computer networks
that transmit data by packet switching using the standard Internet Protocol

Server Responses

100: Informational

100: Continue - Server receives request headers and client should proceed to send body
101: Switching protocols
102: Processing


200: Success
300: Redirection
400: Client Error
500: Server Error


HTTP: Hypertext transfer protocol

An application protocol for distributed, collaborative, hypermedia information systems.
HTTP is the foundation of data communication for the World Wide Web.
Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text.

AJAX: Asynchronous Javascript and XML

  $.ajax({
    url: 'https://randomuser.me/api/',
    dataType: 'jason',
    // when successful
    succes: function(data, reqStr, jq) {
      console.log('data: ',data);
      console.log('string: '+reqStr); // don't need
      console.log('jqXHR: ',jq); // don't need
    },
    // when there is an error
    error: function(jq, errStr) {
      console.log(jq);
      console.log(errStr);
    },
    // no matter what happens
    complete: function(jq, resStr) {
      console.log(jq) // jq is the jqXHR
      console.log(resStr) // resStr is whatever response string it gives you
    }
  })


APIs: Application program interfaces

Application program interface (API) is a set of routines, protocols, and tools for building software
applications. An API specifies how software components should interact and APIs are used when
programming graphical user interface (GUI) components.

Node: Javascript runtime


Javascript runtime: virtual machine which interprets and executes JavaScript mostly on browser
Built by Google Chrome
asynchronous (ajax, click events, etc.)

code fires not necessarily in order, depending on events within the code
event driven
non-blocking


V8//Google engine

  Node                                      | Java/php/asp
    package manager                            code lives on server
    (npm) - web, ftp, smtp, etc.
    is its own server
    javascript everywhere
    Node environment has more
      features, don't need jQuery


sandbox - isolated environment


target the client's language, can change versions with nvm
nvm ls-remote // shows all the versions available, can install different versions depending on client


create server 'node <file>' // executes javascript


NPM: Node's package ecosystem

Open source library

Express: Node framework

$ npm install express --save

EJS: embedded Javascript

Tags
<%      'Scriptlet' tag, for control-flow, no output
<%=     Outputs the value into the template (HTML escaped)
<%-     Outputs the unescaped value into the template
<%#     Comment tag, no execution, no output
<%%     Outputs a literal '<%'
%>      Plain ending tag
-%>     Trim-mode ('newline slurp') tag, trims following newline

Includes
Includes are relative to the template with the include call. (This requires the 'filename' option.)
For example if you have "./views/users.ejs" and "./views/user/show.ejs" you would use <%- include('user/show'); %>.
You'll likely want to use the raw output tag <%- with your include to avoid double-escaping the HTML output.
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>


Middleware


Middleware functions are functions that have access to

the request object (req)
the response object (res)
the next middleware function in the application’s request-response cycle


Middleware functions can perform the following tasks:

Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware function in the stack.


MVC: Models, Views, Controllers


Process

request made by client
goes to Controller (controls routing logic)
from Controller to Model (handles database)
from Model back to Controller to Views (format data)
from Views, response to client


Components

The model directly manages the data, logic and rules of the application.
Views format the data for the client (ejs files)
The third part, the controller, accepts input and converts it to commands for the model or view.


Interactions

A model stores data that is retrieved according to commands from the controller and displayed in the view.
A view generates new output to the user based on changes in the model.
A controller can send commands to the model to update the model's state


MongoDB: Mongo Database

Classified as a NoSQL database
MongoDB avoids the traditional table-based relational database structure in favor of
JSON-like documents with dynamic schemas (MongoDB calls the format BSON), making the
integration of data in certain types of applications easier and faster.

REST: Representational State Transfer

  VERBS (request methods) - RESTful architecture
    - GET     : requests rep of specified resource
    - HEAD    : just give me the header
    - POST    : create new - forms (adds data to the end of the URL ?user_name=""&user_mail="" etc.)
    - PUT     : modify
    - DELETE  : deletes


Restful Routing : Client side

CRUD: Create, Read, Update, Delete
  verb        http verb       example of Rest Route
  ----------------------------------------------------------------------------------------------
  Create      POST (html)     '/movies'                   --> create a new resource (movie) & return new URL (/movies/35)
                              (don't allow POST at ID ex. '/movies/ID')

  Read        GET  (html)     '/movies'                   --> show list of resources (movies) & return URLs (/movies/35, /movies/38, etc.)
                              ('/movies/:id'              --> show one resource (movie with id: 'id'))

  Update      PUT             '/movies/:id'               --> check for id, validate data, save result, replaces resource of id: 'id' & return /movies/:id or list of movies
                              (don't allow PUT for entire collection ex. '/movies')

  Delete      DELETE          '/movies' OR '/movies/:id'  --> check for internal id in DB (**check for dependencies), delete resource at :id & returns status code (204?)

HTML Forms
forms are only submitted if they have a name for each input field
  <form action = '/movies' method='get'>
    <input type='text' name='title' />
  </form>

creates '/movies?title=blah&submit=true'                      ---> req.query
  <form action = '/movies' method='post'>
    <input name='title' />
  </form>

creates '/movies' body = { title : 'blah', submit : 'true' }  ---> req.body

Restful Routing : Server side

express
  app = express()

  app .get(filepath , function(req,res))
      .post( '' )
      .put( '' )
      .delete( '' )

shortcuts:
    app .route('/movies')
        .post(fn)
        .put(fn1, fn2)
        .delet(fn)

============================================
How to set up an Express app with middleware

In Node
npm install express
npm install morgan
npm install body-parser

In server.js: basic express app
  const express     = require('express');
  const app         = express();
  const server      = app.listen(3000);
  
  // Require middleware
  const logger      = require('morgan');
  const bodyParser  = require('body-parser');
  
  // use middleware
  app.use(logger('dev'))
  app.use(bodyParser.json())

When using any middleware, don't forget next() or res.end at end of function
Using MVC architecture

mkdir Models Views Controllers


Models

module.exports data


Views

ejs files
linked in controller


Controllers

control where data goes, links to model and views


Seeding and connecting a MongoDB


Terminal
  mongod  --> starts server
  mongo   --> starts mongo shell, create databases, collections, and modify

                          Command
                      ----------------
  Start mongo >>        mongo`
  help                  help`
  show databases        show dbs
  use databases         use test
  add to databases      db.people.insert({name:"Celeste",age:27})
  find data             db.people.find({age:{ $gt: 30 }})
  sort data by stuff    db.people.find({age:{ $gt: 30 }}).sort({name:-1})
  update data           db.people.update({name:'Celeste'},{$set: {age:30}}, {multi:true})
  incriment data(+/-)   db.people.update({name:'Celeste'},{$inc:{age:1}}, {multi:true})
  remove data           db.people.remove({age:{$gt: 30}})
  drop json file to db  mongoimport --db test --collection restaurants --drop --file restaurants.json --jsonArray


Linking database to app in model or service
  const {MongoClient} = require('mongodb');
  const dbConnection = 'mongodb://localhost:27017/transit';
  
  module.exports = {
  
    list(req,res,next) {

    MongoClient.connect(dbConnection, function(err, db){
      if(err) throw err;

      db.collection('lines')
        .find()
        .sort( {key:1} )
        .toArray( function(err, data){
          if(err) throw err;

          // get the data back
          res.lines = data;
          next();
        });
    });
  }
}


Getting data from an API with AJAX


In public js file, use AJAX to access API with URL

Accessing data from an internal route with AJAX


Set up page that responds with json array of data, access that url with $.ajax
  let inputID = $('.id').val();
  let inputYear = $('.y').val();
  let inputDirector = $('.d').val();
  let inputTitle = $('.t').val();

let queryObj = {};
  if(inputID) queryObj.id = inputID
  if(inputTitle) queryObj.t = inputTitle
  if(inputYear) queryObj.y = inputYear
  if(inputDirector) queryObj.d = inputDirector

$.ajax({
  //we are requesting data from the /movies page to use in our ajax success
    url: '/movies',
    method: 'GET',
    dataType: 'json',
    data: queryObj,
    success: function(data){
      $moviesDiv.empty();
      $inputs.val('');

      data.forEach(function(movie) {
        let $liTitle = $('<li>').text(movie.Title);
        let $img = $('<img>');
          $img.attr('src', movie.Poster)
        let $liYear = $('<li>').text(movie.Year);
        let $liDirector = $('<li>').text(movie.Director);
        let $liID = $('<li>').text(movie.imdbID);
        let $underline = $('<hr>');

        $ul.append($liTitle);
        $ul.append($img);
        $ul.append($liYear);
        $ul.append($liDirector);
        $ul.append($liID);
        $ul.append($underline);
      });
      $moviesDiv.append($ul);
      }
    })


Filtering data


Filter regular json file
    jsonArray.filter(function(obj){
      return obj.id == req.query.val;
    })


Filter with Mongo DB
  // es6
  //const {MongoClient}     =require('mongodb').MongoClient
  const MongoClient = require('mongodb').MongoClient
      //when I go to this address, mongo will be there and we can speak
  const dbConnection = 'mongodb://localhost:27017/test' //location our database is being tested but only get the test database
      //export this whole object to be used over there
  module.exports = {
      //es6  - method for this object: searchMovies(){}
      //go and search movies
      searchMovies: function(req, res, next) {
          //empty object to fill with if statements below then use to pass into the .find
           //make sure capitalization matches the key from the object!
          const filterObj = {};
            //check for request queries t/y/d/id, if they are there set the
            //not if/elses, just ifs, special javascript word in
          if('id' in req.query) {
            //if it is then:
            filterObj['imdbID'] = req.query.id
          }
          if('y' in req.query) {
            //if it is then:
            filterObj['Year'] = req.query.y
          }
          if('t' in req.query) {
            //if it is then:
            //the RegExp allows you to search through part of a string, i is for case insensitivity
            filterObj['Title'] = new RegExp( '^' + req.query.t, 'i')
          }
          if('d' in req.query) {
            filterObj['Director'] = new RegExp( '^' + req.query.d, 'i')
          }
  
          //mongo go to this database in this place and when you do run this function
          MongoClient.connect(dbConnection, function(err, db) {
              if (err) throw err
                  //same as saying db.cruiseMovies - we're searching though our database test for a collection called cruiseMovies
              db.collection('cruiseMovies')
              //.find is a mongo property that requires an object
              .find(filterObj)//filter from above
              .sort({Year: -1, Title: 1})
                  //as the array is created do this:
              .toArray(function(err, results) {
                      if (err) throw err
                          /* Act on the event */
                          //when i make the array i'm going to take the results and stick them onto the response
                      res.filteredMovies = results
                          //now fire the next function in the middleware chain for the server.js get request
                      next();
                  });
          });
      }
  }


Authentication


app.js
'use strict'

const express         = require('express')
const logger          = require('morgan')
const path            = require('path')
const bodyParser      = require('body-parser')
const session         = require('express-session')
const methodOverrise  = require('method-override')
const homeRoute       = require('./routes/home')
const userRoute       = require('./routes/user')

const app             = express()
const PORT            = process.env.PORT || process.argv[2] || 3000

// set up session
app.use(session({
  saveUnintialized: true,
  resave: true,
  secret: 'sooopersekret',
  cookie: {maxAge: 60000}
}))

// set up method override
app.use(methodOverrise('_method'))

// set up logging so that we can see what's happening
app.use(logger('dev'))
app.use(bodyParser.urlencoded({extended:false}))
app.use(express.static(path.join(__dirname,'public')));
app.use('/bower_components', express.static(path.join(__dirname,'bower_components')));

// set up ejs to render the views
app.set('view engine', 'ejs')


/* ROUTES */
app.use('/', homeRoute)
app.use('/user', userRoute)

// set up server
app.listen(PORT, function(){
  console.log("server up and running on port ", PORT)
})


views/index.ejs
<!DOCTYPE html>
<html>
<head>

  <% include ./partials/head %>

</head>
<body>

  <% include ./partials/header %>

  <h2>welcome,
    <% if(user){ %>
      <%= user.fname %> <%= user.lname %>
    <% } else { %>
      guest!
    <% } %>
  </h2>

</body>
</html>


views/user/new.ejs
<!DOCTYPE html>
<html>
<head>
  <% include ../partials/head %>
</head>
<body>

  <% include ../partials/header %>

  <h1>New User</h1>

  <form action="/user/new" method="post">
    <label for="">First Name:</label>
    <input type="text" name="fname">
    <br>
    <label for="">Last Name:</label>
    <input type="text" name="lname">
    <br>
    <label for="">e-mail:</label>
    <input type="text" name="email">
    <br>
    <label for="">Password:</label>
    <input type="password" name="password">
    <br>
    <input type="submit" value="Create New User">
  </form>
</body>
</html>


views/user/login.ejs
<!DOCTYPE html>
<html>
<head>
  <% include ../partials/head %>
</head>
<body>

  <% include ../partials/header %>

  <h1>Login</h1>

  <form action="/user/login" method="post">
    <label for="">Email:</label>
    <input type="text" name="email">
    <br>
    <label for="">Password:</label>
    <input type="password" name="password">
    <br>
    <input type="submit" value="Login">
  </form>
</body>
</html>


routes/home.js
const homeRouter = require('express').Router();

homeRouter.get('/', function(req,res){
  res.render('index', { user : req.session.user });
})

module.exports = homeRouter;


routes/user.js
const userRouter                  = require('express').Router()
const { createUser, loginUser }   = require('../models/user')
// means const createUser = require('../models/user').createUser

/* CREATE NEW USER */
userRouter.get('/new', function(req,res){
  res.render('user/new', { user : req.session.user });
})

userRouter.post('/new', createUser, loginUser, function(req,res){
  console.log(req.body);
  req.session.user = res.user;

  req.session.save(function(err){
    if(err) throw err;
    res.redirect('/')
  })
})


/* LOGIN */
userRouter.get('/login', function(req,res){
  res.render('user/login', { user : req.session.user });
})

userRouter.post('/login', loginUser, function(req,res){
  console.log(res.user);
  req.session.user = res.user;

  req.session.save(function(err){
    if(err) throw err;
    res.redirect('/')
  })
})

/* LOGOUT */
userRouter.get('/logout', function(req,res){
  req.session.destroy(function(err){
    res.redirect('/')
  })
})


module.exports = userRouter


models/user.js
const { MongoClient }   = require('mongodb')
const dbConnection      = 'mongodb://localhost:27017/auth_practice'
const bcrypt            = require('bcrypt')
const salt              = bcrypt.genSalt(10);

function createSecure(email, password, callback) {
  bcrypt.genSalt(function(err, salt){
    bcrypt.hash(password, salt, function(err,hash){
      console.log('hash:', hash)
      callback(email, hash)
    })
  })
}

function createUser(req,res,next){

  createSecure(req.body.email, req.body.password, saveUser)

  function saveUser(email, hash){
    console.log('email:',email)
    console.log('passwordDigest:',hash)
    // posts to collection
    MongoClient.connect(dbConnection, function(err, db){
      if(err) throw err;

      let userInfo = {
        fname: req.body.fname,
        lname: req.body.lname,
        email: email,
        passwordDigest: hash
      }

      db.collection('users')
        .insertOne(userInfo, function(err, result){
          if(err) throw err;

          next();
        })
    })
  }
}

function loginUser(req,res,next){

  let email     = req.body.email;
  let password  = req.body.password;

  MongoClient.connect(dbConnection, function(err,db){
    if(err) throw err;

    db.collection('users')
      .findOne( { "email" : email }, function(err, user){
        if(err) throw err;

        if(user === null) {
          console.log("no user under e-mail", email);
        } else if(bcrypt.compareSync(password, user.passwordDigest)) {
          res.user = user;
        } else {
          console.log("password wasn't right")
        }

        next()
      })
  })

}


module.exports = { createUser, loginUser }