UWD

OUTLINE

Section 1: Front-End Web Development

Section 2: Introduction to HTML

Section 3: Intermediate HTML

Section 4: Introduction to CSS

Section 5: Intermediate CSS

Section 6: Introduction to Bootstrap 4

Section 7: Intermediate Bootstrap

Section 8: Web Design School - Create a Website that People Love

Section 9: Introduction to Javascript ES6

Section 10: Intermediate Javascript

Section 11: The Document Object Model (DOM)

Section 12: Boss Level Challenge 1 - The Dicee Game

Section 13: Advanced Javascript and DOM Manipulation

Section 14: jQuery

METHODS WE CAN USE:

$().addAttribute() $().addClass()

$().css() If one arg is passed, that means we are getting the value If second argument is passed, that means we are updating the value HOWEVER, we should use addClass instead

$("h1").text('bye)

$("button").html("<em>Hey</em>")

GET all the hrefs

$("a").attr("href")

SET all the hrefs

$("a").attr("href", "www.google.com")

EVENT LISTENERS WITH JQUERY

// BEFORE
for (var i=0; i<5; i++){
  document.querySelectorAll("button")[i].addEventListener("click", function() {
    document.querySelector("h1").style.color = "purple"
  })
}

// AFTER (With JQuery)
$("button").click(function () {
  $("h1").css("color", "purple")
})

NOTE: You can pass any JavaScript Events to “ON”

see MDN Event Reference

$("h1").on("mouseover", function(){
  $("h1").css("color", "purple")
})

Section 15: Boss Level Challenge 2 - The Simon Game

Section 16: The Unix Command Line

Section 17: Backend Web Development

Section 18: Node.js

Section 19: Express.js with Node.js

Most commonly used. “Extended: true” means we can pass nested objects

app.use(bodyParser.urlencoded({ extended: true }));

All together now:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));

Section 20: APIs - Application Programming Interfaces

TODO:

kanye.rest

JOKE API https://sv443.net/jokeapi/v2/joke/Pun?blacklistFlags=nsfw&type=single

257: Api auth and postman

Sign up for API key at openweather
Look at the structure of the API call

http://api.openweathermap.org/data/2.5/weather?q=London&appid=933d7d672525d0d55611b4587b398adb

Making GET requests with Node HTTP module

Create new weather app
touch index.html app.js
npm init
npm i express
open in an editor
build out app.js
1. require express
2. app=express()
3. app.listen(3000, function(){ callback})
4. app.get(‘/’, function)

ERRORS I GOT

SyntaxError: Cannot use import statement outside a module

FIXED

// import express from "express";
// import https from "https";
const express = require("express");
const https = require("https");

also had to add

  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

to our start scripts. But really, this should be nodemon.

TINY EXAMPLE OF API REQUEST USING JUST EXPRESS AND NODE HTTPS MODULE

const express = require("express");
const https = require("https");

const app = express();

app.get("/", (req, res) => {
  const url =
    "https://api.openweathermap.org/data/2.5/weather?q=Los Angeles&appid=933d7d672525d0d55611b4587b398adb&units=Imperial";
  https.get(url, (response) => {
    console.log(response);
  });
  res.send("HERE WE ARE!");
});

app.listen(3030, () => {
  console.log("listening on port 3030");
});

260. How to Parse JSON

IMPORTANT!!

To get readable data: JSON.parse(data)

To turn object into string: JSON.stringify(data)

res.on("data", (d) => {
  console.log(d);
});

NOW, to actually read it…

res.on("data", (d) => {
  const parsedData = JSON.parse(d);
  console.log(parsedData);
});

NOTE:

We can only have one res.send in any of the app.get('/'....)

HOWEVER, we can have as many res.write s as we want!

MAILCHIMP API!

Challenge

mkdir
touch app.js signup.html success.html failure.html
npm init
npm i express request body-parser nodemon
update package json to include "start":"nodemon app.js"
add require statements to app.js

make signup page from bootstrap
require bootstrap cdn
change the input fields
update the input fields css
Get this to show up when we hit /

265. Posting Data to Mailchimp’s Servers via their API

GOAL: go to mailchimp.com and see subscriber

JSON.stringify(data
Replace the X in the url
check curl request for the url
const options including method
auth: “sldkfjsdlfkj:myApiKey”
console.log JSON.parse
request.write(request )

How to set Heroku Environment Variables

heroku config:set API_KEY=sdlfjsdlfksjdlfkj

Section 21: Git, Github and Version Control

Section 22: EJS

DOCS

todolist-v1 touch index.html app.js npm init npm i express bodyparser

make template for express and body-parser

NOTE! We can only use res.send() once HOWEVER, we can use res.write as many times as we want!!

res.write('thing') res.write('thing') res.send()

we also have res.sendFile(__dirname + '/myfile.html')

TO USE EJS:

create a new folder called views
create list.ejs
Add this to app.js

const app = express();
app.use("view engine", "ejs");
app.get("/", (req, res) => {
  res.render("list", { kindOfDay: day });
});

CHALLENGE:

Make new app with pages
Make boilerplate express docs
Add EJS
Add variable

TO INCLUDE JS:

use ejs “Scriplette” tag Docs HERE
can ONLY use “control flow” (if/else) statements within <% scriplette %>

UNDERSTANDING NODE EXPORTS & MODULES

INSIDE MODULE FOLDER

module.export = oneFunction;

module.export.functionOne = oneFunction

module.export.functionTwo = secondFunction

INSIDE APP.JS

let howEverWeRequiredIt = require(‘my_module’) howEverWeRequiredIt.oneFunction()

BUT to make everything EVEN MORE SUCCINCT…

module.exports.myFunction = function(){ }

we can make it EVEN SHORTER using just exports instead of module.exports

we can use const for things like Arrays and Objects – it protects the DATA STRUCTURE not the things inside it (which we CAN change)

We can’t REASSIGN the array to a new things or the Object to a new thing, but we CAN change the insides of those things.

Section 23: Boss Level Challenge 3 - Blog Website

Section 24: Databases

Section 25: SQL

Section 26: MongoDB

(10-26-20)

Installing Mongo on Mac

Download from mongodb.com/downloads
Extract folder from downloaded zip
Move the folder to the (hidden) usr folder sudo mv (path to downloaded folder) /usr/local/mongodb
Add our new location to our PATH variable (vi .bash_profile) and then add export PATH=$PATH:/usr/local/mongodb/bin
Now, create a directory for where mongod will live mkdir -p /data/db

Section 27: Mongoose

NOTES:

View db/collections: use my_db show collections

Find: db.collection-name.find()

Drop db: use my_db db.dropDatabase()

Insert MANY THINGS!!

Insert an ARRAY NameOfMongooseModel.insertMany([array], callback) Person.insertMany()

Section 28: Putting Everything Together

Section 29: Deploying Your Web Application

MongoDB Atlas

Create a cluster
Create a user (note un and pw)
security - network access - whitelist allow access from anywhere
cluster connect

mongo “mongodb+srv://cluster0.lived.mongodb.net/test” –username myusername

show dbs

use test

show collects

db.test.findall

376. Deploying an App with a Database to Heroku

Procfile

web: node app.js

it’s just instructions when on the web, use node to access app.js

Add version of node to package json

"engines": {
  "node": "version number"
}

(to find version) node --version

Section 30: Boss Level Challenge 4 - Blog Website Upgrade

Section 31: Build Your Own RESTful API From Scratch

RESTFUL VERBS:

GET POST PUT & PATCH DELETE

RESTFUL + CRUD:

(CRUD = Create Read Update Delete)

GET == Read
POST == Create
PUT & PATCH = Update
DELETE == Delete

Q: What is patch vs put? Put updates the ENTIRE object. Patch just updates the part of the object that needs updating. Think of the replacing the entire bike (PUT) vs replacing just the broken part, the tire (PATCH)

USING POSTMAN

Body » urlencoded (or whatever we’re using with bodyparser )

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");

const app = express();

app.set("view engine", "ejs");

app.use(
  bodyParser.urlencoded({
    extended: true,
  })
);
app.use(express.static("public"));

//TODO

mongoose.connect("mongodb://localhost:27017/wikiDB", { useUnifiedTopology: true, useNewUrlParser: true })

const articleSchema = {
  title: String,
  content: String
};

const Article = mongoose.model("Article", articleSchema)

app.get('/articles', (req, res) => {
  Article.find({}, (err, results)=> {
    if(err){
      res.send(err)
    } else {
      res.send(results)
    }
    // console.log(results)
  })

  
  // Article.find({})
})


app.post('/articles', (req, res) => {

  const newArticle = new Article({
    title: req.body.title,
    content: req.body.content
  })

  newArticle.save(function(err) {
    if(!err){
      res.send("Success!")
    } else {
      res.send(err)
    }
  });

})


app.listen(3330, function () {
  console.log("Server started on port 3330");
});

Aaron Caraway