Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Cheat Sheet

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 }
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment